/* ══════════════════════════════════════════════════════════════════════
 * os-ios.css  —  hyOS Desktop: iPhone / iPad Safari Optimization Layer
 * Version: 2026-07-25
 *
 * REQUIRES: ios_detect.js (sets html[data-ios], html[data-ipad])
 * SAFE: All rules scoped to html[data-ios] — zero desktop/Android impact
 *
 * Goals
 *   1. Bigger, easier-to-hit drawer tab (the #os-drawer-tab pill)
 *   2. GPU-safe backdrop-filter on the drawer itself
 *   3. Proper safe-area + Dynamic Island clearance for the taskbar
 *   4. Touch-friendly tap targets (iOS HIG: 44pt minimum)
 *   5. Swipe-feel: fast spring curves, no hover artifacts on touch
 *   6. Disable decorative animations that eat GPU on iPhone
 *   7. App grid: readable icon labels, larger touch zones
 * ══════════════════════════════════════════════════════════════════════ */


/* ─── §1  Drawer Tab — bigger, friendlier pill for thumbs ─────────── */
/*
 * The drawer tab is the only way to open the app drawer on iOS.
 * Default is a ~44px wide, narrow pill centred at bottom.
 * On iPhones we make it wider, taller, and easier to see.
 */
html[data-ios] #os-drawer-tab {
  /* Full-width tap strip — easy to swipe up from anywhere at bottom */
  width: calc(100vw - 12px) !important;
  max-width: 480px !important;             /* cap on iPad so it doesn't span 100% */
  /* Taller tap zone: safe area + visible pill */
  height: calc(54px + env(safe-area-inset-bottom, 0px)) !important;
  /* Shift content (icon) up into the visible zone above home bar */
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 4px) !important;
  padding-top: 10px !important;
  border-radius: 18px 18px 0 0 !important;
  /* Remove backdrop blur to save GPU on iPhone */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  /* Solid but very subtle tint so it's visible without BF cost */
  background: rgba(0, 0, 0, 0.15) !important;
  /* Faster spring for snappier feel on touch */
  transition: opacity 0.2s ease, transform 0.2s ease !important;
}

/* Jarvis mode: keep the neon accent */
html[data-ios] .jarvis #os-drawer-tab {
  background: rgba(0, 10, 5, 0.25) !important;
  border-top: 1px solid rgba(0, 255, 163, 0.15) !important;
}
/* Clean mode */
html[data-ios] .clean #os-drawer-tab {
  background: rgba(255, 255, 255, 0.10) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* Sweep animation: keep it but make it GPU-composited (opacity only) */
html[data-ios] #os-drawer-tab::before {
  /* Simplify the sweep — just a subtle opacity pulse, no BF */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 255, 255, 0.06) 50%,
    transparent 100%
  ) !important;
}

/* The handle pill inside the tab — bigger on iOS */
html[data-ios] #os-drawer-tab .os-drawer-hint-arrow,
html[data-ios] #os-drawer-hint {
  width: 44px !important;    /* was 36px */
  height: 5px !important;
  border-radius: 3px !important;
  margin: 0 auto 4px !important;
  opacity: 0.4 !important;
}


/* ─── §2  Drawer — GPU-safe glass on iOS ─────────────────────────── */
/*
 * The drawer has backdrop-filter:blur(56px) by default.
 * On iOS this is one of the GPU-budget-eating blur layers.
 * Reduce to 12px — indistinguishable at ~3× Retina scale,
 * saves ~70% compositor cost vs 56px.
 */
html[data-ios] #os-drawer {
  backdrop-filter: blur(12px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
  /* Make sure it extends below the home indicator */
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  /* 90% of viewport height max — leave taskbar visible */
  max-height: calc(90dvh - env(safe-area-inset-top, 0px)) !important;
  border-radius: 24px 24px 0 0 !important;
}

/* When drawer is open, restore a bit more blur since user is actively using it */
html[data-ios] #os-drawer.open {
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}

/* Handle bar — bigger for easier drag */
html[data-ios] #os-drawer-handle {
  width: 48px !important;
  height: 5px !important;
  border-radius: 3px !important;
  margin: 12px auto 8px !important;
  opacity: 0.5 !important;
}


/* ─── §3  Drawer backdrop — no BF on iOS ─────────────────────────── */
html[data-ios] #os-drawer-backdrop {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  /* Pure colour dim — no blurred BG compositor cost */
  background: rgba(0, 0, 0, 0.45) !important;
}


/* ─── §4  App grid — touch-friendly sizing ───────────────────────── */
/* Larger tap targets so icons are easy to hit with a finger */
html[data-ios]:not([data-ipad]) .os-app-card {
  min-height: 80px !important;
  padding: 12px 6px 10px !important;
  /* :active spring — immediate feedback on tap */
  transition: transform 0.08s ease !important;
}
html[data-ios]:not([data-ipad]) .os-app-card:active {
  transform: scale(0.88) !important;
}
/* Slightly larger icon on iPhone */
html[data-ios]:not([data-ipad]) .os-app-icon {
  width: 48px !important;
  height: 48px !important;
  font-size: 22px !important;
}
/* App name: always visible (was display:none at ≤768px) */
html[data-ios]:not([data-ipad]) .os-app-name {
  display: block !important;
  font-size: 9px !important;
}


/* ─── §5  Category pills — fat-finger friendly ───────────────────── */
html[data-ios] .os-cat-pill {
  min-width: 44px !important;
  min-height: 44px !important;
  width: 44px !important;
  height: 44px !important;
  touch-action: manipulation !important;
}
/* Remove hover pseudo tooltips on touch (they linger weirdly after tap) */
html[data-ios] .os-cat-pill[title]:hover::after {
  display: none !important;
}


/* ─── §6  Search bar — iOS keyboard safe ─────────────────────────── */
html[data-ios] #os-search {
  height: 44px !important;
  font-size: 16px !important;           /* prevents iOS auto-zoom */
  border-radius: 12px !important;
}
/* When drawer keyboard is open, keep search above it */
html[data-ios] #os-drawer .os-search-wrap {
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
}


/* ─── §7  Taskbar — Dynamic Island / notch clearance ─────────────── */
/* ios-universal.css §2 handles safe areas for the chat page.
 * Here we ensure the hyOS taskbar has correct clearance too.
 * (Some of this also lives in os-beta.css but belt-and-suspenders.) */
html[data-ios] #os-taskbar {
  /* Minimum height: DI safe area (~59px) + 6px buffer + actual bar content */
  min-height: calc(env(safe-area-inset-top, 0px) + 50px) !important;
  padding-top: calc(env(safe-area-inset-top, 0px) + 6px) !important;
  /* No backdrop BF budget: use solid tint */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-ios] .jarvis #os-taskbar {
  background: rgba(0, 6, 3, 0.92) !important;
}
html[data-ios] .clean #os-taskbar {
  background: rgba(12, 12, 20, 0.88) !important;
}


/* ─── §8  Disable hover effects on touch (they fire on first tap) ── */
@media (hover: none) {
  html[data-ios] .os-app-card:hover,
  html[data-ios] .os-app-card:hover .os-app-icon,
  html[data-ios] .os-app-card:hover .os-app-name {
    transform: none !important;
    box-shadow: none !important;
    color: inherit !important;
    text-shadow: none !important;
    background: transparent !important;
    border-color: transparent !important;
  }
  html[data-ios] .clean-dock-icon:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  html[data-ios] .os-tray-icon[title]:hover::after {
    display: none !important;
  }
}


/* ─── §9  Decorative animations — kill on iOS to save GPU ────────── */
/*
 * These animations are purely decorative and eat GPU on iPhone.
 * The backdrop-filter governor (§3 in ios-universal.css) handles
 * the BF budget. This handles the animation budget.
 */
html[data-ios] #clean-bg {
  /* Aurora gradient still shows but stops animating */
  animation-play-state: paused !important;
}
html[data-ios] #clean-bg::before,
html[data-ios] #clean-bg::after {
  animation-play-state: paused !important;
}
html[data-ios] .j-datastream {
  display: none !important;    /* scrolling text = expensive, not visible anyway */
}
html[data-ios] #j-scanline::before,
html[data-ios] #j-scanline::after {
  animation-play-state: paused !important;
}
/* OS title color cycle — single static color is fine */
html[data-ios] #os-tb-title {
  animation-play-state: paused !important;
}
/* Start button portal ring — keep but slow it way down */
html[data-ios] .clean #os-start-btn {
  animation-duration: 30s !important;
}
/* Drawer tab sweep: make subtle & GPU-composited */
html[data-ios] #os-drawer-tab::before {
  animation-play-state: paused !important;
}


/* ─── §10  Drawer open: pause ALL background animations ─────────── */
/*
 * When the drawer is open on iOS, all background animations become
 * unnecessary GPU work. Pause them via body.os-drawer-active.
 * (os-media-mode.css already handles this for desktop via the same class.)
 */
html[data-ios] body.os-drawer-active #clean-bg,
html[data-ios] body.os-drawer-active #clean-bg::before,
html[data-ios] body.os-drawer-active #clean-bg::after,
html[data-ios] body.os-drawer-active .j-ring,
html[data-ios] body.os-drawer-active .ch-ring,
html[data-ios] body.os-drawer-active .j-corner,
html[data-ios] body.os-drawer-active #os-tb-title,
html[data-ios] body.os-drawer-active .clean #os-start-btn {
  animation-play-state: paused !important;
}


/* ─── §11  Toast: properly above home bar ────────────────────────── */
html[data-ios] #os-toast-area {
  bottom: max(
    calc(env(safe-area-inset-bottom, 0px) + 20px),
    20px
  ) !important;
}


/* ─── §12  iPad: keep desktop experience, just apply safe areas ──── */
html[data-ipad] #os-drawer-tab {
  /* iPad can have a smaller, more desktop-like tab */
  max-width: 520px !important;
  height: calc(48px + env(safe-area-inset-bottom, 0px)) !important;
}
html[data-ipad] #os-drawer {
  /* iPad can afford a bit more blur */
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
}
/* iPad app grid: a little bigger, more desktop-like */
html[data-ipad] .os-app-card {
  min-height: auto !important;
}
html[data-ipad] #os-taskbar {
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
}