/**
 * mobile-drawers.css — Shared mobile UI primitives
 *
 * Google Docs / Canvas-style slide-in drawers, bottom sheets, FABs,
 * compact toolbars, and touch-target enforcement.
 *
 * ONLY activates at ≤900px — desktop layouts are completely untouched.
 * Include on any studio / office page that needs mobile drawer support.
 *
 * Depends on tokens.css for var(--bg-card), var(--accent), etc.
 */

/* ═══════════════════════════════════════════════════════════
   §1  BACKDROP
   ═══════════════════════════════════════════════════════════ */
.hy-backdrop {
  position: fixed; inset: 0; z-index: 7999;
  background: rgba(0,0,0,.55);
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
  -webkit-tap-highlight-color: transparent;
}
.hy-backdrop.open {
  opacity: 1; pointer-events: auto;
}

/* ═══════════════════════════════════════════════════════════
   §2  DRAWERS (left / right / bottom)
   ═══════════════════════════════════════════════════════════ */
.hy-drawer {
  position: fixed; z-index: 8000;
  background: var(--bg-card, #0a1a10);
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  will-change: transform;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 0 40px rgba(0,0,0,.6);
}
.hy-drawer--left {
  top: 0; bottom: 0; left: 0;
  width: 280px; max-width: 85vw;
  transform: translateX(-100%);
}
.hy-drawer--right {
  top: 0; bottom: 0; right: 0;
  width: 280px; max-width: 85vw;
  transform: translateX(100%);
}
.hy-drawer--bottom {
  left: 0; right: 0; bottom: 0;
  max-height: 75vh;
  transform: translateY(100%);
  border-radius: 16px 16px 0 0;
}
.hy-drawer.open {
  transform: translate(0, 0);
}

/* ═══════════════════════════════════════════════════════════
   §3  BOTTOM SHEET (extends drawer--bottom)
   ═══════════════════════════════════════════════════════════ */
.hy-bottom-sheet {
  position: fixed; z-index: 8000;
  left: 0; right: 0; bottom: 0;
  max-height: 80vh;
  background: var(--bg-card, #0a1a10);
  border-radius: 16px 16px 0 0;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  will-change: transform;
  box-shadow: 0 -4px 40px rgba(0,0,0,.5);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.hy-bottom-sheet.open {
  transform: translateY(0);
}
.hy-sheet-handle {
  display: flex; align-items: center; justify-content: center;
  padding: 10px 0 6px; cursor: grab; flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.hy-sheet-handle::before {
  content: ''; display: block;
  width: 36px; height: 4px;
  border-radius: 2px;
  background: var(--muted, rgba(200,255,240,.3));
}
.hy-sheet-body {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 0 12px 16px;
}

/* ═══════════════════════════════════════════════════════════
   §4  HAMBURGER + PANEL TRIGGER BUTTONS
   ═══════════════════════════════════════════════════════════ */
.hy-hamburger,
.hy-panel-btn {
  display: none;  /* hidden on desktop, shown via media query */
}

/* ═══════════════════════════════════════════════════════════
   §5  MOBILE TOOLBAR (compact horizontal strip)
   ═══════════════════════════════════════════════════════════ */
.hy-mobile-toolbar {
  display: none;  /* shown via media query */
}

/* ═══════════════════════════════════════════════════════════
   §6  FAB (Floating Action Button)
   ═══════════════════════════════════════════════════════════ */
.hy-fab {
  display: none;  /* shown via media query */
}

/* ═══════════════════════════════════════════════════════════
   §7  OVERFLOW MENU
   ═══════════════════════════════════════════════════════════ */
.hy-overflow-menu {
  position: absolute; top: 100%; right: 0;
  min-width: 180px;
  background: var(--bg-card, #0a1a10);
  border: 1px solid var(--border, rgba(0,255,163,.12));
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,.6);
  z-index: 8100;
  padding: 4px 0;
  opacity: 0; pointer-events: none;
  transform: translateY(-4px);
  transition: opacity .2s, transform .2s;
}
.hy-overflow-menu.open {
  opacity: 1; pointer-events: auto;
  transform: translateY(0);
}
.hy-overflow-item {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  font-size: 13px; color: var(--text, #dce5e0);
  cursor: pointer; border: none; background: none;
  width: 100%; text-align: left; font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.hy-overflow-item:hover,
.hy-overflow-item:active {
  background: var(--accent-dim, rgba(0,255,163,.06));
  color: var(--accent, #00ffa3);
}
.hy-overflow-sep {
  height: 1px; margin: 4px 10px;
  background: var(--border, rgba(0,255,163,.12));
}

/* ═══════════════════════════════════════════════════════════
   §8  MOBILE ACTIVATION — ≤900px
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* ── Hamburger / panel trigger buttons ── */
  .hy-hamburger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border: 1px solid var(--border, rgba(0,255,163,.12));
    border-radius: 8px;
    background: var(--bg-card, rgba(0,14,8,.95));
    color: var(--text, #dce5e0);
    font-size: 20px; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0; z-index: 100;
  }
  .hy-hamburger:active {
    background: var(--accent-dim, rgba(0,255,163,.06));
    color: var(--accent, #00ffa3);
  }

  .hy-panel-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border: 1px solid var(--border, rgba(0,255,163,.12));
    border-radius: 8px;
    background: var(--bg-card, rgba(0,14,8,.95));
    color: var(--text, #dce5e0);
    font-size: 18px; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
  }
  .hy-panel-btn:active {
    background: var(--accent-dim);
    color: var(--accent, #00ffa3);
  }

  /* ── Mobile compact toolbar ── */
  .hy-mobile-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-shrink: 0;
    background: var(--bg-card, rgba(0,14,8,.95));
    border-bottom: 1px solid var(--border, rgba(0,255,163,.12));
  }
  .hy-mobile-toolbar::-webkit-scrollbar { display: none; }

  .hy-toolbar-btn {
    min-width: 40px; height: 40px;
    border-radius: 6px;
    border: 1px solid var(--border, rgba(0,255,163,.12));
    background: transparent;
    color: var(--muted, rgba(200,255,240,.5));
    font-size: 15px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
  }
  .hy-toolbar-btn:active,
  .hy-toolbar-btn.active {
    background: var(--accent-dim, rgba(0,255,163,.06));
    border-color: var(--accent, #00ffa3);
    color: var(--accent, #00ffa3);
  }

  .hy-toolbar-sep {
    width: 1px; height: 24px;
    background: var(--border, rgba(0,255,163,.12));
    margin: 0 4px; flex-shrink: 0;
  }

  .hy-toolbar-overflow {
    min-width: 40px; height: 40px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted); font-size: 18px;
    cursor: pointer; display: inline-flex;
    align-items: center; justify-content: center;
    flex-shrink: 0; position: relative;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
  }

  /* ── FAB ── */
  .hy-fab {
    display: flex; align-items: center; justify-content: center;
    position: fixed;
    bottom: max(24px, env(safe-area-inset-bottom, 0px));
    right: 16px;
    width: 56px; height: 56px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--accent, #00ffa3), var(--info, #3ac9ff));
    color: #000;
    font-size: 22px; font-weight: 900;
    cursor: pointer;
    z-index: 7000;
    box-shadow: 0 4px 20px rgba(0,255,163,.35);
    -webkit-tap-highlight-color: transparent;
    transition: transform .2s, box-shadow .2s;
  }
  .hy-fab:active {
    transform: scale(.9);
  }
  .hy-fab.hidden {
    transform: scale(0);
    pointer-events: none;
  }

  /* ── Mobile header bar (replaces hidden desktops bars) ── */
  .hy-mobile-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--bg-card, rgba(0,14,8,.95));
    border-bottom: 1px solid var(--border, rgba(0,255,163,.12));
    flex-shrink: 0;
    min-height: 48px;
  }
  .hy-mobile-header .hy-mobile-title {
    flex: 1; min-width: 0;
    font-size: 12px; font-weight: 700;
    color: var(--accent, #00ffa3);
    overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: .06em;
  }

  /* ── Touch target enforcement ── */
  button, [role="button"], .btn,
  select, input[type="checkbox"],
  .os-tbtn, .sr-btn, .tb-btn, .ps-nav-btn,
  .pres-nav-btn, .genre-chip, .bst-chip,
  .os-ai-chip, .os-mode, .right-tab,
  .hy-toolbar-btn, .hy-panel-btn {
    min-height: 44px;
    min-width: 44px;
  }

  /* Prevent iOS zoom on inputs */
  input[type="text"], input[type="search"],
  input[type="email"], input[type="url"],
  textarea, select {
    font-size: 16px !important;
  }

  /* ── Ensure active drawers override page-level display:none ──
     Pages often hide sidebar / right-panel by ID at mobile widths;
     once mobile-drawers.js converts them into .hy-drawer panels the
     element must be rendered (off-screen via transform) so it can
     slide in on tap / swipe.  !important beats ID selectors. */
  .hy-drawer {
    display: block !important;
  }

  /* ── Scroll lock when drawer is open ── */
  body.hy-drawer-open {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════
   §9  TABLET TWEAKS — 768–900px
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 900px) {
  .hy-drawer--left, .hy-drawer--right {
    width: 320px;
  }
}

/* ═══════════════════════════════════════════════════════════
   §10  SMALL PHONE — ≤480px
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .hy-drawer--left, .hy-drawer--right {
    width: 100vw; max-width: 100vw;
  }
  .hy-fab {
    bottom: max(16px, env(safe-area-inset-bottom, 0px));
    right: 12px;
    width: 52px; height: 52px;
    font-size: 20px;
  }
}