/* ================================================================
   MOBILE POLISH — Sky Thumbnails
   ================================================================
   Load order: LAST on all pages (after page-specific CSS).

   This file adds only what the existing CSS does NOT cover:
     1.  Touch UX  (tap highlight, touch-action, hover-none fixes)
     2.  iOS input zoom prevention
     3.  Performance  (reduced blur, hover-none transform guard)
     4.  Overflow safety  (horizontal scroll, images)
     5.  Scroll refinement  (momentum, overscroll containment)
     6.  Typography  (clamp on tiny screens)
     7.  360–375 px safety net
     8.  Admin 480 px icon-sidebar strip
     9.  Admin safe-area compose padding
    10.  Admin prefers-reduced-motion
    11.  Modal bottom-sheet on tiny phones
    12.  Gallery tightening at 480 px
   ================================================================ */


/* ────────────────────────────────────────────────────────────────
   1 · TOUCH UX FOUNDATION
   ────────────────────────────────────────────────────────────── */

/* Remove grey/blue tap flash on iOS & Android */
* {
  -webkit-tap-highlight-color: transparent;
}

/*
  Opt interactive elements into immediate touch response.
  touch-action: manipulation disables double-tap-to-zoom and the
  legacy 300 ms click delay — preserving pinch-zoom on the page.
*/
button,
a,
[role="button"],
.nav-item,
.admin-tab,
.ticket-card,
.ticket-sidebar-card,
.dash-ticket-item,
.admin-ticket-row,
.ticket-filter-pill,
.admin-ticket-filter-pills button,
.dash-stat-card,
.home-stat-pill,
.quick-action-card,
.gallery-thumb,
.admin-gallery-thumb,
.glass-btn,
.lg-btn,
.saved-gallery-card,
.admin-notif-item,
.admin-notif-mark-all,
.settings-tab-btn {
  touch-action: manipulation;
}


/* ────────────────────────────────────────────────────────────────
   2 · IOS INPUT ZOOM PREVENTION
   iOS Safari zooms in whenever an <input>, <textarea>, or <select>
   has font-size < 16px.  `max(16px, 1em)` keeps the design scale
   on desktop while enforcing ≥ 16 px on touch screens.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  input,
  textarea,
  select {
    font-size: max(16px, 1em) !important;
  }
}


/* ────────────────────────────────────────────────────────────────
   3 · PERFORMANCE — Lighter GPU effects on mobile
   Heavy backdrop-filter blur is the #1 cause of scroll jank on
   mid-range Android.  Reducing from 28 px to 18 px makes a
   visible difference on sub-60 fps devices.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Dashboard bottom nav bar */
  body[data-page="dashboard"] .dashboard-sidebar {
    backdrop-filter: blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  }

  /* Glass cards: shallower shadows (fewer layers to composite) */
  .lg-glass-card,
  .glass-card,
  .admin-ticket-row,
  .ticket-sidebar-card,
  .dash-stat-card,
  .home-stat-pill {
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.07) !important;
  }
}

/*
  Touch devices fire :hover on the first tap and hold it until the
  next tap, creating "sticky hover" states.  Guard with (hover: none).
*/
@media (hover: none) {
  .admin-ticket-row:hover,
  .ticket-sidebar-card:hover,
  .dash-ticket-item:hover,
  .admin-notif-item:hover,
  .admin-tab:hover,
  .nav-item:hover,
  .price-card:hover,
  .admin-user-item:hover {
    transform: none !important;
    box-shadow: inherit !important;
  }
}


/* ────────────────────────────────────────────────────────────────
   4 · TOUCH TARGET SIZE — 44 × 44 CSS px (WCAG 2.5.5)
   The existing code already covers .nav-item and .admin-tab.
   These additions cover secondary controls often missed.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Filter pills */
  .ticket-filter-pill,
  .admin-ticket-filter-pills button {
    min-height: 40px;
    padding-block: 8px;
  }

  /* User management action buttons */
  .admin-user-action-btn {
    min-height: 44px;
    padding-inline: 16px;
  }

  /* Mark-all / secondary action buttons in dropdowns */
  .admin-notif-mark-all {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  /* Settings tabs */
  .settings-tab-btn {
    min-height: 40px;
  }
}


/* ────────────────────────────────────────────────────────────────
   5 · IMAGE SAFETY — Prevent bubble/card overflow
   Uploaded images and inline attachments must never exceed their
   container width.  `height: auto` preserves aspect ratio.
   ────────────────────────────────────────────────────────────── */
.ticket-msg img,
.message-bubble img,
.admin-msg-image,
.msg-image,
.news-image-preview-wrap img,
.admin-gallery-thumb img,
.my-gallery-preview img,
.saved-gallery-card__image {
  max-width: 100%;
  height: auto;
  display: block;
}


/* ────────────────────────────────────────────────────────────────
   6 · PREVENT HORIZONTAL OVERFLOW
   ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  body {
    overflow-x: hidden;
  }

  .dashboard-container,
  .admin-container,
  .dashboard-main,
  .admin-content {
    max-width: 100%;
  }
}


/* ────────────────────────────────────────────────────────────────
   7 · SCROLL REFINEMENT
   -webkit-overflow-scrolling: touch gives momentum scrolling on iOS.
   overscroll-behavior: contain stops pull-to-refresh triggering
   inside nested scroll areas (e.g. ticket list inside dashboard).
   ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ticket-sidebar-scroll,
  #ticket-chat-messages,
  #support-chat-messages,
  .admin-ticket-inbox-list,
  #admin-open-groups,
  #admin-support-list,
  #admin-closed-list,
  #admin-chat-messages,
  .admin-users-list,
  .my-gallery-grid,
  .admin-notif-list {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Top-level containers: no rubber-band / bounce */
  .dashboard-container,
  .admin-container {
    overscroll-behavior: none;
  }
}


/* ────────────────────────────────────────────────────────────────
   8 · TYPOGRAPHY — Clamp for very small screens
   Prevents text from becoming unreadably small without forcing
   a full layout reflow.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  /* Topbar page title */
  body[data-page="dashboard"] .topbar-left h2,
  body[data-page="dashboard"] #page-title {
    font-size: clamp(0.85rem, 4.5vw, 1rem) !important;
  }

  /* Ticket / user name labels */
  .admin-ticket-top strong,
  .ticket-card-title,
  .dash-ticket-title {
    font-size: clamp(0.78rem, 3.6vw, 0.9rem);
  }
}


/* ────────────────────────────────────────────────────────────────
   9 · 360–375 PX SAFETY NET  (smallest current Android/iPhone SE)
   ────────────────────────────────────────────────────────────── */
@media (max-width: 375px) {
  /* Stack stats cards to 1-column — 2 columns is too tight at 360 */
  body[data-page="dashboard"] .home-stats-strip {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* Bottom nav items: slightly tighter so 6 items fit on 360 px */
  body[data-page="dashboard"] .sidebar-nav .nav-item {
    max-width: 52px !important;
  }

  /* Topbar: tighter padding */
  body[data-page="dashboard"] .dashboard-topbar {
    padding: 0 8px !important;
  }

  /* Admin: reduce container margin to reclaim space */
  body[data-page="admin"] .admin-container {
    margin-inline: 4px !important;
    gap: 6px !important;
  }
}


/* ────────────────────────────────────────────────────────────────
   10 · ADMIN — Icon-only horizontal sidebar strip at ≤ 480 px
   ──────────────────────────────────────────────────────────────
   The existing code renders the admin sidebar as a 2-column grid
   (900 px) then a 1-column grid (640 px).  On phones ≤ 480 px the
   1-column grid wastes ~220 px of vertical height on navigation.

   This override turns it into a compact, horizontally-scrollable
   icon bar — the same pattern the dashboard uses, so both pages
   feel consistent on phones.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Sidebar: compact horizontal flex row */
  body[data-page="admin"] .admin-sidebar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 4px !important;
    padding: 6px 10px !important;
    height: auto !important;
    max-height: none !important;
    min-height: 54px !important;
    border-radius: 16px !important;
    /* Reset the grid layout from the 900/640 px rules */
    grid-template-columns: unset !important;
  }
  body[data-page="admin"] .admin-sidebar::-webkit-scrollbar {
    display: none;
  }

  /* Hide profile card & section labels — icon-only navigation */
  body[data-page="admin"] .admin-sidebar-profile,
  body[data-page="admin"] .admin-nav-label {
    display: none !important;
  }

  /* Nav groups: horizontal flex rows, no glass tile background */
  body[data-page="admin"] .admin-nav-group {
    display: flex !important;
    flex-direction: row !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
  }

  /* Admin tab: square icon button — 44 × 44 minimum */
  body[data-page="admin"] .admin-tab {
    position: relative;
    flex-shrink: 0 !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 12px !important;
    gap: 0 !important;
  }

  /* Hide text label — show icon only */
  body[data-page="admin"] .admin-tab > span:not(.lg-badge) {
    display: none !important;
  }

  body[data-page="admin"] .admin-tab i {
    font-size: 1.1rem !important;
    width: auto !important;
  }

  /* Badge: absolute over icon */
  body[data-page="admin"] .admin-tab .lg-badge {
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    font-size: 0.6rem !important;
    min-width: 14px !important;
    height: 14px !important;
    padding: 0 3px !important;
  }

  /* Tighter container margin — more room for content */
  body[data-page="admin"] .admin-container {
    margin-top: 72px !important;
    gap: 8px !important;
  }
}


/* ────────────────────────────────────────────────────────────────
   11 · ADMIN — Chat compose: safe-area bottom padding on iPhones
   The iPhone home indicator sits in the bottom ~34 px of the screen.
   env(safe-area-inset-bottom) adds padding only when needed.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  body[data-page="admin"] .admin-chat-input-area,
  body[data-page="admin"] #admin-chat-form,
  body[data-page="admin"] .admin-room-chat-form,
  body[data-page="admin"] .admin-ticket-chat-compose {
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }
}


/* ────────────────────────────────────────────────────────────────
   12 · ADMIN — Notification dropdown: bottom-sheet on tiny phones
   The existing 900 px rule already moves it to bottom: fixed.
   This 480 px rule tightens the inset and ensures safe area.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .admin-notif-dropdown {
    inset: auto 6px max(12px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-height: 65vh !important;
    border-radius: 20px !important;
  }

  @supports (height: 100dvh) {
    .admin-notif-dropdown {
      max-height: 65dvh !important;
    }
  }
}


/* ────────────────────────────────────────────────────────────────
   13 · ADMIN — prefers-reduced-motion support
   dashboard.css already has this for the intro animation.
   Admin panel transitions are unguarded — add them here.
   ────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body[data-page="admin"] .admin-tab,
  body[data-page="admin"] .admin-ticket-row,
  body[data-page="admin"] .admin-notif-item,
  body[data-page="admin"] .admin-notif-btn,
  body[data-page="admin"] .admin-notif-mark-all,
  body[data-page="admin"] .admin-user-item,
  body[data-page="admin"] .admin-user-action-btn {
    transition: none !important;
  }
}


/* ────────────────────────────────────────────────────────────────
   14 · MODALS — Bottom-sheet slide-up on tiny phones
   Centering a modal on a 375 px screen leaves thin side margins
   and forces the user to reach to the middle of the screen.
   A bottom-sheet anchors the action near the thumb zone.

   Only applied to the generic .modal-overlay pattern.
   Page-specific modals that have their own positioning are
   intentionally left alone.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .modal-content {
    border-radius: 20px 20px 0 0 !important;
    width: 100% !important;
    max-width: none !important;
    max-height: 88vh !important;
    margin: 0 !important;
    padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
  }

  @supports (height: 100dvh) {
    .modal-content {
      max-height: 88dvh !important;
    }
  }
}


/* ────────────────────────────────────────────────────────────────
   15 · GALLERY — Tighten on 480 px phones
   ────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Saved gallery: 2 columns fit comfortably at 360 px */
  .saved-gallery-grid,
  .admin-saved-gallery-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Shorter preview images to show more cards on screen */
  .saved-gallery-card__image {
    height: 120px !important;
  }

  .my-gallery-preview {
    height: 120px !important;
  }

  /* Gallery section header: stack label + button vertically */
  .saved-gallery-section__head,
  .admin-saved-gallery-block__head {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
}