/* ============================================================
   touch-device.css — iPad & Touch Device Optimization Layer
   Board Book · v1 · 2026-04-19

   Purpose: Professional touch support for iPad, Android tablets,
   and any touch-enabled device. Supports Apple Pencil / stylus
   and finger interactions simultaneously.

   This file is loaded AFTER responsive-scale.css to override
   where needed specifically for touch devices.
   ============================================================ */


/* ============================================================
   1. TOUCH DEVICE DETECTION — body class applied by JS
      .touch-device        : any touch-capable device
      .stylus-active       : stylus is currently in use
      .finger-active       : finger is currently in use
      .ipad-device         : specifically iPad
   ============================================================ */

/* ── 1A. Global Touch Optimizations ─────────────────────────── */
body.touch-device {
    /* Prevent overscroll bounce on iOS */
    overscroll-behavior: none;
}

/* Allow text selection everywhere — only suppress on UI chrome */
body.touch-device input,
body.touch-device textarea,
body.touch-device select,
body.touch-device option,
body.touch-device [contenteditable="true"] {
    -webkit-user-select: text !important;
    user-select: text !important;
    -webkit-touch-callout: default !important;
}

/* Suppress user-select ONLY on toolbar/nav UI — never globally */
body.touch-device .side-system,
body.touch-device .nav-system,
body.touch-device .top-ui-layer,
body.touch-device .pinned-bottom-bar {
    -webkit-user-select: none;
    user-select: none;
}


/* ============================================================
   2. STYLUS vs FINGER — Visual Mode Indicators
   ============================================================ */

/* Stylus mode indicator (subtle top bar glow) */
body.stylus-active::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #6366f1, transparent);
    z-index: 99999;
    pointer-events: none;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

/* Finger mode — no indicator (default) */
body.finger-active::after {
    opacity: 0;
}


/* ============================================================
   3. CANVAS TOUCH — Drawing Surface Optimizations
   ============================================================ */

/* Ensure canvas captures ALL touch input for drawing */
body.touch-device .canvas-layer,
body.touch-device canvas.upper-canvas,
body.touch-device canvas.lower-canvas {
    touch-action: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    /* Prevent magnifying glass on long press */
    -webkit-user-select: none !important;
    user-select: none !important;
}

/* Workspace container — prevent browser gestures interfering */
body.touch-device .zen-workspace {
    touch-action: none;
    overflow: hidden;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: auto;
}

/* When stylus is active, cursor reflects pen precision */
body.stylus-active canvas.upper-canvas {
    cursor: crosshair !important;
}

/* Palm rejection visual — during stylus use, 
   enlarge hover detection on fabric controls */
body.stylus-active .canvas-container {
    /* Fabric.js controls get bigger touch targets when stylus is active */
    touch-action: none;
}


/* ============================================================
   4. SELECTION & DRAG — Touch-Optimized Object Manipulation
   ============================================================ */

/* Larger control corners for touch selection */
@media (pointer: coarse) {
    /* Already handled in SelectionManager.js via touchCornerSize: 48
       This CSS provides visual feedback */
}

/* Selection handles glow on touch */
body.touch-device .canvas-container canvas {
    /* Fabric handles this via JS, CSS supplements with visual smoothness */
    -webkit-tap-highlight-color: transparent;
}

/* Drag selection box — finger-friendly with thicker borders */
body.touch-device .canvas-container {
    /* Selection rectangle inherits from Fabric.js settings */
    touch-action: none;
}


/* ============================================================
   5. TOOLBAR & BUTTONS — Touch-Friendly Sizing
   ============================================================ */

/* ── 5A. Tool Buttons (Left panel) ──────────────────────────── */
body.touch-device .tool-btn {
    min-width: 44px;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.1s ease, background 0.15s ease;
}

body.touch-device .tool-btn:active {
    transform: scale(0.88) !important;
    background: rgba(99, 102, 241, 0.2) !important;
}

/* Active tool emphasis for touch (no hover state) */
body.touch-device .tool-btn.active {
    box-shadow: inset 0 0 0 2.5px var(--primary, #6366f1),
                0 0 12px rgba(99, 102, 241, 0.3) !important;
}

/* ── 5B. Top UI Control Buttons ─────────────────────────────── */
body.touch-device .ui-control-btn {
    min-width: 44px;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
}

body.touch-device .ui-control-btn:active {
    transform: scale(0.88) !important;
    opacity: 0.8;
}

/* ── 5C. Side/Nav Tabs ──────────────────────────────────────── */
body.touch-device .side-tab,
body.touch-device .nav-tab {
    min-width: 48px;
    min-height: 48px;
    -webkit-tap-highlight-color: transparent;
}

body.touch-device .side-tab:active,
body.touch-device .nav-tab:active {
    transform: scale(0.9) !important;
    opacity: 0.85;
}


/* ============================================================
   6. DROPDOWN MENUS — Touch-Optimized Open/Close
   ============================================================ */

/* Pen/eraser dropdown menus — larger items for finger tapping */
body.touch-device .pinned-tool-dropdown,
body.touch-device .tool-dropdown-menu {
    /* Bigger padding and spacing for touch */
    padding: 8px !important;
}

body.touch-device .pinned-tool-dropdown .tool-btn,
body.touch-device .tool-dropdown-menu .tool-btn {
    min-width: 48px !important;
    min-height: 48px !important;
}

/* Group trigger buttons (pen group, eraser group) */
body.touch-device .group-trigger,
body.touch-device .dropdown-trigger {
    min-width: 44px;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
}

body.touch-device .group-trigger:active,
body.touch-device .dropdown-trigger:active {
    transform: scale(0.9) !important;
}

/* Color picker popup — ensure touch-friendly swatches */
body.touch-device #colorGridPopup .color-swatch,
body.touch-device .color-grid .color-swatch {
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 50%;
}

/* Pen size dots — larger hit areas */
body.touch-device .pen-size-dot {
    min-width: 20px !important;
    min-height: 20px !important;
    padding: 4px;
    cursor: pointer;
}

/* Size category buttons */
body.touch-device .size-category-btn {
    min-width: 40px !important;
    min-height: 36px !important;
    padding: 6px 10px !important;
}


/* ============================================================
   7. CONTEXT MENU — Touch Long-Press Menu
   ============================================================ */

body.touch-device .context-menu {
    /* Slightly wider on touch for finger targets */
    min-width: 220px !important;
    border-radius: 16px !important;
}

body.touch-device .context-menu .menu-item {
    min-height: 44px !important;
    padding: 10px 16px !important;
    font-size: 0.9rem !important;
    gap: 12px !important;
}

body.touch-device .context-menu .menu-item:active {
    background: rgba(99, 102, 241, 0.15) !important;
    transform: scale(0.98);
}

body.touch-device .context-menu .menu-item-iconic {
    min-width: 44px !important;
    min-height: 44px !important;
}

body.touch-device .context-menu .menu-item-mini {
    min-width: 40px !important;
    min-height: 36px !important;
    padding: 6px 10px !important;
}

/* Hide keyboard shortcuts on touch devices (not relevant) */
body.touch-device .context-menu kbd {
    display: none !important;
}

/* Show touch-friendly labels instead */
body.touch-device .context-menu .menu-row {
    gap: 6px !important;
    flex-wrap: wrap;
}

/* Link / Activity button — prominent on touch */
body.touch-device .context-menu .link-action-btn {
    min-height: 48px !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    border-bottom: 1px solid var(--border-glass);
}

body.touch-device .context-menu .link-action-btn:active {
    background: var(--primary) !important;
    color: white !important;
    transform: scale(0.97) !important;
}


/* ============================================================
   8. SCROLLABLE CONTAINERS — Momentum Scroll on Touch
   ============================================================ */

/* All scrollable regions get iOS-smooth momentum */
body.touch-device .col-list,
body.touch-device .nav-book-list,
body.touch-device .notif-list,
body.touch-device .student-grid,
body.touch-device .slide-thumbnails-list,
body.touch-device .tools-scroll,
body.touch-device .share-suggestions,
body.touch-device .store-grid,
body.touch-device .chat-messages,
body.touch-device .ai-body,
body.touch-device .search-results-body {
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
}

/* Horizontal scroll regions */
body.touch-device .fixed-ui-controls,
body.touch-device .fixed-ui-controls-left,
body.touch-device .pinned-tools-container,
body.touch-device .store-filters {
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

body.touch-device .fixed-ui-controls::-webkit-scrollbar,
body.touch-device .fixed-ui-controls-left::-webkit-scrollbar,
body.touch-device .pinned-tools-container::-webkit-scrollbar,
body.touch-device .store-filters::-webkit-scrollbar {
    display: none;
}


/* ============================================================
   9. MODALS & OVERLAYS — Touch Scroll + Dismiss
   ============================================================ */

/* Modal body scrolls with momentum */
body.touch-device .premium-modal-box {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
}

/* Close buttons — extra large for touch */
body.touch-device .close-btn-modern {
    min-width: 48px !important;
    min-height: 48px !important;
    font-size: 1.1rem !important;
}

/* Overlay backgrounds — tap to dismiss */
body.touch-device .custom-modal-overlay,
body.touch-device .auth-modal-overlay {
    -webkit-tap-highlight-color: transparent;
}

/* Form inputs inside modals — prevent iOS zoom */
body.touch-device .input-modern,
body.touch-device .auth-input {
    font-size: 16px !important; /* iOS won't zoom if ≥ 16px */
    padding: 14px 16px !important;
    border-radius: 12px !important;
}


/* ============================================================
   10. AI SIDEBAR & SEARCH SIDEBAR — Touch Optimized
   ============================================================ */

/* AI sidebar body — scrollable */
body.touch-device .ai-body {
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overscroll-behavior: contain;
    overflow-y: scroll !important;
    min-height: 0 !important;
}

/* AI action chips — larger on touch */
body.touch-device .ai-action-chip {
    min-height: 44px !important;
    padding: 12px 8px !important;
    -webkit-tap-highlight-color: transparent;
}

body.touch-device .ai-action-chip:active {
    transform: scale(0.95) !important;
    opacity: 0.85;
}

/* AI input area — touch-friendly send button */
body.touch-device #btnSendAi {
    min-width: 48px !important;
    min-height: 48px !important;
}

/* Search sidebar scrollable */
body.touch-device .search-results-body {
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overflow-y: scroll !important;
    min-height: 0 !important;
}

/* Quran sidebar scrollable body */
body.touch-device .quran-body {
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overflow-y: scroll !important;
    overscroll-behavior: contain;
}


/* ============================================================
    11. ONENOTE NAVIGATION — Touch Navigation
   ============================================================ */

/* Book items — touch-friendly */
body.touch-device .nav-book-item {
    min-width: 48px !important;
    min-height: 48px !important;
    -webkit-tap-highlight-color: transparent;
}

body.touch-device .nav-book-item:active {
    transform: scale(0.9) !important;
    opacity: 0.85;
}

/* Navigation items (chapter/section list) */
body.touch-device .nav-item {
    min-height: 44px !important;
    padding: 10px 12px !important;
    -webkit-tap-highlight-color: transparent;
}

body.touch-device .nav-item:active {
    background: rgba(99, 102, 241, 0.12) !important;
    transform: scale(0.98);
}

/* Bulk action bar */
body.touch-device .nav-bulk-bar .bulk-btn {
    min-height: 44px !important;
    padding: 8px 14px !important;
}


/* ============================================================
   12. PINNED BOTTOM BAR — Touch Toolbar
   ============================================================ */

body.touch-device .pinned-bottom-bar {
    /* Ensure the bar doesn't fight touch scrolling */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

body.touch-device .pinned-bottom-bar .tool-btn {
    min-width: 40px !important;
    min-height: 40px !important;
    -webkit-tap-highlight-color: transparent;
}

body.touch-device .pinned-bottom-bar .tool-btn:active {
    transform: scale(0.88) !important;
}

/* Color preview in pinned bar */
body.touch-device .active-color-btn,
body.touch-device #pinned-active-color-preview {
    min-width: 32px !important;
    min-height: 32px !important;
}

/* Collapse & expand FAB */
body.touch-device .pinned-collapse-btn,
body.touch-device .unpin-btn,
body.touch-device #btn-expand-pinned-bar {
    min-width: 44px !important;
    min-height: 44px !important;
}


/* ============================================================
   13. iOS FLEX SCROLL FIX — Critical for ALL scrollable panels
   
   iOS Safari bug: flex children with `flex: 1` default to 
   `min-height: auto` (content height), which prevents overflow
   scrolling. Adding `min-height: 0` forces iOS to constrain
   the element and enable scroll.
   
   This section fixes EVERY scrollable flex child in the app.
   ============================================================ */

/* ── Tracking Sidebar ──────────────────────────────────────── */
body.touch-device .tracking-body {
    min-height: 0 !important;
    -webkit-overflow-scrolling: touch !important;
    overflow-y: scroll !important;
    touch-action: pan-y !important;
}

body.touch-device .tp-view {
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
}

body.touch-device .tracking-sidebar .tp-btn {
    min-height: 40px !important;
    -webkit-tap-highlight-color: transparent;
}

body.touch-device .tracking-sidebar .tp-btn:active {
    transform: scale(0.95) !important;
    opacity: 0.85;
}

/* ── Activity Store ────────────────────────────────────────── */
body.touch-device .store-body {
    min-height: 0 !important;
}

body.touch-device .store-content {
    min-height: 0 !important;
}

body.touch-device .store-grid {
    min-height: 0 !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
}

body.touch-device .store-sidebar {
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
}

body.touch-device .store-tab {
    min-height: 48px !important;
    -webkit-tap-highlight-color: transparent;
}

/* ── Quiz / Aura Modal ─────────────────────────────────────── */
body.touch-device .aura-modal-box {
    min-height: 0 !important;
}

body.touch-device .aura-modal-content {
    min-height: 0 !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overflow-y: auto !important;
}

body.touch-device .aura-quiz-grid {
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
}

/* ── Premium Modals (all overlay modals) ───────────────────── */
body.touch-device .premium-modal-box {
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
}

/* ── AI Sidebar ────────────────────────────────────────────── */
body.touch-device .ai-body {
    min-height: 0 !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overflow-y: scroll !important;
}

/* ── Navigation Lists ──────────────────────────────────────── */
body.touch-device .col-list,
body.touch-device .nav-book-list,
body.touch-device .slide-thumbnails-list {
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
}

/* ── Student Dashboard ─────────────────────────────────────── */
body.touch-device .student-grid {
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
}

/* ── Chat Messages ─────────────────────────────────────────── */
body.touch-device .chat-messages {
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
}

/* ── Search Results ────────────────────────────────────────── */
body.touch-device .search-results-body {
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overflow-y: scroll !important;
    min-height: 0 !important;
}

/* ── Quran Sidebar ─────────────────────────────────────────── */
body.touch-device .quran-body {
    min-height: 0 !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overflow-y: scroll !important;
}

/* ── Worksheet Modal ───────────────────────────────────────── */
body.touch-device .ws-modal-body {
    min-height: 0 !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
}

/* ── Generic fix: ANY flex column child with overflow-y auto ─ */
body.touch-device [style*="flex: 1"][style*="overflow-y: auto"],
body.touch-device [style*="flex:1"][style*="overflow-y:auto"],
body.touch-device [style*="flex: 1"][style*="overflow-y: scroll"],
body.touch-device [style*="flex:1"][style*="overflow-y:scroll"] {
    min-height: 0 !important;
    -webkit-overflow-scrolling: touch !important;
}


/* ============================================================
   14. STUDENT DASHBOARD — Touch Grid
   ============================================================ */

body.touch-device .student-dashboard {
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
}

body.touch-device .student-grid .student-card {
    -webkit-tap-highlight-color: transparent;
}

body.touch-device .student-grid .student-card:active {
    transform: scale(0.97) !important;
}

body.touch-device .dash-btn {
    min-height: 44px !important;
    -webkit-tap-highlight-color: transparent;
}


/* ============================================================
   15. PRESENCE NOTCH — Touch-Friendly Top Bar
   ============================================================ */

body.touch-device .presence-notch {
    -webkit-tap-highlight-color: transparent;
}

body.touch-device .presence-notch button {
    min-width: 36px !important;
    min-height: 36px !important;
}


/* ============================================================
   16. WORKSHEET & SLIDES MODALS — Touch Optimized
   ============================================================ */

body.touch-device #worksheetModal,
body.touch-device #lessonSlidesModal {
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
}


/* ============================================================
   17. FROZEN OVERLAY — Touch Dismissal Prevention
   ============================================================ */

body.touch-device .frozen-overlay {
    touch-action: none !important;
    -webkit-tap-highlight-color: transparent !important;
    pointer-events: auto !important;
}


/* ============================================================
   18. ACTIVITY STORE — Touch Grid & Filters
   ============================================================ */

body.touch-device .store-card {
    -webkit-tap-highlight-color: transparent;
}

body.touch-device .store-card:active {
    transform: scale(0.97) !important;
}

body.touch-device .store-filter-btn {
    min-height: 40px !important;
    -webkit-tap-highlight-color: transparent;
}


/* ============================================================
   19. SKETCH SOLVE — Touch Canvas Overlay
   ============================================================ */

body.touch-device #ss-student-overlay canvas {
    touch-action: none !important;
}

body.touch-device .ss-tool-btn {
    min-width: 48px !important;
    min-height: 48px !important;
    -webkit-tap-highlight-color: transparent;
}

body.touch-device .ss-tool-btn:active {
    transform: scale(0.9) !important;
    opacity: 0.85;
}


/* ============================================================
   20. TOUCH SCROLLBARS — Wide, grabbable scrollbars for finger/stylus
   Overrides the default thin scrollbars to be 14px wide so they
   can actually be grabbed with a finger or Apple Pencil
   ============================================================ */

/* ── WIDE SCROLLBAR: All vertical scrollable containers ────── */
body.touch-device .tracking-body::-webkit-scrollbar,
body.touch-device .tp-report-student-picker::-webkit-scrollbar,
body.touch-device .tp-student-list::-webkit-scrollbar,
body.touch-device .tp-table-wrapper::-webkit-scrollbar,
body.touch-device .store-grid::-webkit-scrollbar,
body.touch-device .store-sidebar::-webkit-scrollbar,
body.touch-device .store-publish-card::-webkit-scrollbar,
body.touch-device .col-list::-webkit-scrollbar,
body.touch-device .nav-book-list::-webkit-scrollbar,
body.touch-device .ai-body::-webkit-scrollbar,
body.touch-device .search-results-body::-webkit-scrollbar,
body.touch-device .quran-body::-webkit-scrollbar,
body.touch-device .premium-modal-box::-webkit-scrollbar,
body.touch-device .slide-thumbnails-list::-webkit-scrollbar,
body.touch-device .slide-panel-list::-webkit-scrollbar,
body.touch-device .tools-scroll::-webkit-scrollbar,
body.touch-device .student-grid::-webkit-scrollbar,
body.touch-device .chat-messages::-webkit-scrollbar,
body.touch-device .tp-view::-webkit-scrollbar,
body.touch-device .tp-classes-list::-webkit-scrollbar {
    width: 14px;
}

/* ── Track: subtle background so you can see the scroll area ── */
body.touch-device .tracking-body::-webkit-scrollbar-track,
body.touch-device .tp-report-student-picker::-webkit-scrollbar-track,
body.touch-device .tp-student-list::-webkit-scrollbar-track,
body.touch-device .tp-table-wrapper::-webkit-scrollbar-track,
body.touch-device .store-grid::-webkit-scrollbar-track,
body.touch-device .store-sidebar::-webkit-scrollbar-track,
body.touch-device .store-publish-card::-webkit-scrollbar-track,
body.touch-device .col-list::-webkit-scrollbar-track,
body.touch-device .nav-book-list::-webkit-scrollbar-track,
body.touch-device .ai-body::-webkit-scrollbar-track,
body.touch-device .search-results-body::-webkit-scrollbar-track,
body.touch-device .quran-body::-webkit-scrollbar-track,
body.touch-device .premium-modal-box::-webkit-scrollbar-track,
body.touch-device .slide-thumbnails-list::-webkit-scrollbar-track,
body.touch-device .slide-panel-list::-webkit-scrollbar-track,
body.touch-device .tools-scroll::-webkit-scrollbar-track,
body.touch-device .student-grid::-webkit-scrollbar-track,
body.touch-device .chat-messages::-webkit-scrollbar-track,
body.touch-device .tp-view::-webkit-scrollbar-track,
body.touch-device .tp-classes-list::-webkit-scrollbar-track {
    background: rgba(128, 128, 128, 0.08);
    border-radius: 7px;
}

/* ── Thumb: large, high-contrast, easy to grab ─────────────── */
body.touch-device .tracking-body::-webkit-scrollbar-thumb,
body.touch-device .tp-report-student-picker::-webkit-scrollbar-thumb,
body.touch-device .tp-student-list::-webkit-scrollbar-thumb,
body.touch-device .tp-table-wrapper::-webkit-scrollbar-thumb,
body.touch-device .store-grid::-webkit-scrollbar-thumb,
body.touch-device .store-sidebar::-webkit-scrollbar-thumb,
body.touch-device .store-publish-card::-webkit-scrollbar-thumb,
body.touch-device .col-list::-webkit-scrollbar-thumb,
body.touch-device .nav-book-list::-webkit-scrollbar-thumb,
body.touch-device .ai-body::-webkit-scrollbar-thumb,
body.touch-device .search-results-body::-webkit-scrollbar-thumb,
body.touch-device .quran-body::-webkit-scrollbar-thumb,
body.touch-device .premium-modal-box::-webkit-scrollbar-thumb,
body.touch-device .slide-thumbnails-list::-webkit-scrollbar-thumb,
body.touch-device .slide-panel-list::-webkit-scrollbar-thumb,
body.touch-device .tools-scroll::-webkit-scrollbar-thumb,
body.touch-device .student-grid::-webkit-scrollbar-thumb,
body.touch-device .chat-messages::-webkit-scrollbar-thumb,
body.touch-device .tp-view::-webkit-scrollbar-thumb,
body.touch-device .tp-classes-list::-webkit-scrollbar-thumb {
    background: rgba(128, 128, 128, 0.35);
    border-radius: 7px;
    border: 3px solid transparent;
    background-clip: padding-box;
    min-height: 48px; /* Easy to grab with a finger */
}

/* ── Thumb hover/active: even more visible ─────────────────── */
body.touch-device .tracking-body::-webkit-scrollbar-thumb:hover,
body.touch-device .tp-report-student-picker::-webkit-scrollbar-thumb:hover,
body.touch-device .tp-student-list::-webkit-scrollbar-thumb:hover,
body.touch-device .tp-table-wrapper::-webkit-scrollbar-thumb:hover,
body.touch-device .store-grid::-webkit-scrollbar-thumb:hover,
body.touch-device .store-sidebar::-webkit-scrollbar-thumb:hover,
body.touch-device .store-publish-card::-webkit-scrollbar-thumb:hover,
body.touch-device .col-list::-webkit-scrollbar-thumb:hover,
body.touch-device .nav-book-list::-webkit-scrollbar-thumb:hover,
body.touch-device .ai-body::-webkit-scrollbar-thumb:hover,
body.touch-device .search-results-body::-webkit-scrollbar-thumb:hover,
body.touch-device .quran-body::-webkit-scrollbar-thumb:hover,
body.touch-device .premium-modal-box::-webkit-scrollbar-thumb:hover,
body.touch-device .slide-thumbnails-list::-webkit-scrollbar-thumb:hover,
body.touch-device .slide-panel-list::-webkit-scrollbar-thumb:hover,
body.touch-device .tools-scroll::-webkit-scrollbar-thumb:hover,
body.touch-device .student-grid::-webkit-scrollbar-thumb:hover,
body.touch-device .chat-messages::-webkit-scrollbar-thumb:hover,
body.touch-device .tp-view::-webkit-scrollbar-thumb:hover,
body.touch-device .tp-classes-list::-webkit-scrollbar-thumb:hover {
    background: rgba(128, 128, 128, 0.55);
    border: 3px solid transparent;
    background-clip: padding-box;
}

/* ── Horizontal scrollbars also wider ──────────────────────── */
body.touch-device .tp-table-wrapper::-webkit-scrollbar:horizontal,
body.touch-device .store-filter-bar::-webkit-scrollbar:horizontal {
    height: 14px;
}

/* ── Firefox touch scrollbar ───────────────────────────────── */
@supports (scrollbar-width: auto) {
    body.touch-device .tracking-body,
    body.touch-device .tp-report-student-picker,
    body.touch-device .tp-student-list,
    body.touch-device .tp-table-wrapper,
    body.touch-device .store-grid,
    body.touch-device .store-sidebar,
    body.touch-device .col-list,
    body.touch-device .nav-book-list,
    body.touch-device .ai-body,
    body.touch-device .search-results-body,
    body.touch-device .slide-panel-list,
    body.touch-device .tools-scroll,
    body.touch-device .premium-modal-box,
    body.touch-device .slide-thumbnails-list,
    body.touch-device .chat-messages,
    body.touch-device .quran-body,
    body.touch-device .tp-view,
    body.touch-device .tp-classes-list {
        scrollbar-width: auto;
        scrollbar-color: rgba(128, 128, 128, 0.35) rgba(128, 128, 128, 0.08);
    }
}





/* Press feedback ONLY on specific UI buttons — NOT on <select>,
   form controls, or generic buttons inside dropdowns/modals */
body.touch-device .role-selector:active,
body.touch-device .landing-btn:active,
body.touch-device .auth-submit:active {
    transform: scale(0.95) !important;
    opacity: 0.85;
    transition: transform 0.08s ease, opacity 0.08s ease !important;
}

/* Disable hover effects on touch (they "stick" awkwardly) */
@media (hover: none) and (pointer: coarse) {
    body.touch-device .tool-btn:hover,
    body.touch-device .ui-control-btn:hover,
    body.touch-device .nav-item:hover,
    body.touch-device .nav-book-item:hover,
    body.touch-device .side-tab:hover,
    body.touch-device .nav-tab:hover,
    body.touch-device .store-card:hover,
    body.touch-device .role-selector:hover {
        transform: none !important;
    }
}


/* ============================================================
   22. SAFE AREA INSETS — Notch/Dynamic Island/Home Indicator
   ============================================================ */

body.touch-device {
    /* Reserved space for home indicator (iPad) */
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Fixed-position elements respect safe areas */
body.touch-device .pinned-bottom-bar {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
}

body.touch-device .side-system {
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    left: calc(12px + env(safe-area-inset-left, 0px));
}

body.touch-device .nav-system {
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    right: calc(12px + env(safe-area-inset-right, 0px));
}


/* ============================================================
   23. APPLE PENCIL / STYLUS — Precision Drawing Mode
   ============================================================ */

/* When stylus is detected, reduce control sizes slightly for precision */
body.stylus-active .tool-btn {
    /* Stylus users prefer smaller, more precise targets */
    min-width: 40px;
    min-height: 40px;
}

/* Stylus cursor — shows precision crosshair */
body.stylus-active .zen-workspace {
    cursor: crosshair;
}

/* Show a subtle "pen" icon near the cursor area */
body.stylus-active .canvas-container::after {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: 0;
}


/* ============================================================
   24. IPAD SPECIFIC — Split View & Slide Over Support
   ============================================================ */

body.ipad-device {
    /* Ensure smooth resizing during Split View */
    transition: none !important;
}

/* In narrow Split View, further compress UI */
@media (max-width: 500px) and (pointer: coarse) {
    body.ipad-device .top-ui-layer {
        gap: 3px !important;
    }

    body.ipad-device .ui-control-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.75rem !important;
    }

    /* Hide less-critical buttons */
    body.ipad-device #tool-image-search,
    body.ipad-device #btn-tracking-sidebar {
        display: none !important;
    }
}


/* ============================================================
   25. CHAT SLIDER — Touch Scrollable Messages
   ============================================================ */

body.touch-device .chat-messages {
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overscroll-behavior: contain;
}

body.touch-device .chat-close-btn {
    min-width: 44px !important;
    min-height: 44px !important;
}


/* ============================================================
   26. LANDING PAGE — Touch-Optimized Entry
   ============================================================ */

body.touch-device .role-selector {
    min-height: 64px;
    -webkit-tap-highlight-color: transparent;
}

body.touch-device .role-selector:active {
    transform: scale(0.97) !important;
    border-color: var(--primary, #6366f1) !important;
}

body.touch-device .student-panel-content input {
    font-size: 16px !important; /* Prevent iOS zoom */
}

body.touch-device .landing-btn {
    min-height: 48px;
    -webkit-tap-highlight-color: transparent;
}

body.touch-device .landing-btn:active {
    transform: scale(0.95) !important;
}


/* ============================================================
   27. LESSON SLIDES PANEL — Touch Thumbnails
   ============================================================ */

body.touch-device .slide-thumb {
    -webkit-tap-highlight-color: transparent;
}

body.touch-device .slide-thumb:active {
    transform: scale(0.95) !important;
    opacity: 0.8;
}


/* ============================================================
   28. INSIGHT WALL — Touch Card Interactions
   ============================================================ */

body.touch-device .iw-note-card {
    -webkit-tap-highlight-color: transparent;
}

body.touch-device .iw-note-card:active {
    transform: scale(0.97) !important;
}

body.touch-device .iw-reaction,
body.touch-device .iw-fab {
    min-width: 44px !important;
    min-height: 44px !important;
    -webkit-tap-highlight-color: transparent;
}


/* ============================================================
   29. PERFORMANCE — GPU Acceleration for Touch Animations
   ============================================================ */

body.touch-device .pinned-bottom-bar,
body.touch-device .side-system,
body.touch-device .nav-system,
body.touch-device .top-ui-layer,
body.touch-device .context-menu,
body.touch-device .pinned-tool-dropdown,
body.touch-device .tool-dropdown-menu {
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}


/* ============================================================
   30. DRAWING & SELECTING MODE — CSS hints only
   ============================================================ */

/* During drawing, just suppress overscroll — do NOT position:fixed
   which destroys all overlays and modals */
body.touch-device.is-drawing {
    overscroll-behavior: none;
}


/* ============================================================
   31. SLIDE PANEL SIDEBAR — Touch/Stylus Optimizations
   ============================================================ */

/* Toggle button — min 44px touch target */
body.touch-device .slide-panel-toggle {
    min-width: 44px;
    min-height: 36px;
    -webkit-tap-highlight-color: transparent;
}

body.touch-device .slide-panel-toggle:active {
    transform: scale(0.9) !important;
    opacity: 0.85;
}

/* Slide panel — GPU acceleration */
body.touch-device .slide-panel-sidebar {
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-user-select: none;
    user-select: none;
}

/* Panel list — momentum scroll + touch-action */
body.touch-device .slide-panel-list {
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overscroll-behavior: contain;
    min-height: 0 !important;
    overflow-y: scroll !important;
}

/* Slide thumbnail cards — touch-friendly */
body.touch-device .sp-thumb-card {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

body.touch-device .sp-thumb-card:active {
    transform: scale(0.97) !important;
    opacity: 0.9;
}

/* Touch-dragging state */
body.touch-device .sp-thumb-card.sp-touch-dragging {
    opacity: 0.7;
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    z-index: 100;
    transition: none !important;
}

/* Close button — large touch target */
body.touch-device .slide-panel-close {
    min-width: 44px;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
}

body.touch-device .slide-panel-close:active {
    transform: scale(0.85) !important;
    opacity: 0.7;
}

/* Footer buttons — large touch targets */
body.touch-device .sp-footer-btn {
    min-width: 44px;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
}

body.touch-device .sp-footer-btn:active {
    transform: scale(0.88) !important;
    opacity: 0.8;
}

/* Context menu items — finger-friendly */
body.touch-device .sp-ctx-item {
    min-height: 44px !important;
    padding: 10px 16px !important;
    -webkit-tap-highlight-color: transparent;
}

body.touch-device .sp-ctx-item:active {
    background: rgba(99, 102, 241, 0.15) !important;
}

/* Wide scrollbar for slide panel list */
body.touch-device .slide-panel-list::-webkit-scrollbar {
    width: 14px;
}

body.touch-device .slide-panel-list::-webkit-scrollbar-track {
    background: rgba(128, 128, 128, 0.08);
    border-radius: 7px;
}

body.touch-device .slide-panel-list::-webkit-scrollbar-thumb {
    background: rgba(128, 128, 128, 0.35);
    border-radius: 7px;
    border: 3px solid transparent;
    background-clip: padding-box;
    min-height: 48px;
}

body.touch-device .slide-panel-list::-webkit-scrollbar-thumb:hover {
    background: rgba(128, 128, 128, 0.55);
    border: 3px solid transparent;
    background-clip: padding-box;
}

/* Disable sticky hover effects on touch */
@media (hover: none) and (pointer: coarse) {
    body.touch-device .sp-thumb-card:hover,
    body.touch-device .sp-footer-btn:hover,
    body.touch-device .slide-panel-toggle:hover {
        transform: none !important;
    }
}