/* GeeLark Bot — unified mobile layout, Patch 25 */
@media (max-width: 820px) {
  :root { --gl-mobile-header: 58px; }
  html, body { width: 100%; max-width: 100%; overflow-x: hidden !important; }
  body { min-width: 0 !important; }
  *, *::before, *::after { box-sizing: border-box; }

  /* Unified mobile header/menu */
  .app-header {
    width: 100% !important;
    min-width: 0 !important;
    height: var(--gl-mobile-header) !important;
    min-height: var(--gl-mobile-header) !important;
    padding: 0 10px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10000 !important;
    overflow: visible !important;
  }
  .app-logo, .app-header .logo, .header-logo {
    min-width: 0 !important;
    max-width: calc(100% - 54px) !important;
    flex: 1 1 auto !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
    border-right: 0 !important;
    overflow: hidden !important;
  }
  .brand-header-lockup { min-width: 0 !important; max-width: 100% !important; }
  .brand-header-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-nav, .app-header .nav, .app-header-right, .app-header .logout, .btn-logout { display: none !important; }
  .hamburger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,.08) !important;
    font-size: 24px !important;
    line-height: 1 !important;
  }
  .mobile-nav {
    display: none !important;
    position: fixed !important;
    top: var(--gl-mobile-header) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-height: calc(100dvh - var(--gl-mobile-header)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    padding: 6px 0 env(safe-area-inset-bottom) !important;
    background: #151d36 !important;
    border: 0 !important;
    z-index: 9999 !important;
    box-shadow: 0 14px 30px rgba(0,0,0,.34) !important;
  }
  .mobile-nav.open { display: block !important; }
  .mobile-nav a {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 12px 16px !important;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
    text-align: left !important;
    white-space: normal !important;
  }
  .mobile-nav .sep { display: none !important; }
  .mobile-nav.open ~ #gnBell { display: none !important; }

  /* Notifications do not cover the menu/content */
  #gnBell {
    width: 42px !important;
    height: 42px !important;
    top: calc(var(--gl-mobile-header) + 8px) !important;
    right: 10px !important;
    z-index: 9400 !important;
  }
  #gnPanel {
    top: calc(var(--gl-mobile-header) + 58px) !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-height: calc(100dvh - 132px) !important;
    z-index: 9400 !important;
  }

  /* Universal content bounds */
  .container, .wrap, .uni-container, .create-container, .main-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .container, .wrap, .uni-container, .create-container { padding-top: 12px !important; padding-bottom: 28px !important; }
  .main-panel { padding-top: 12px !important; padding-bottom: 28px !important; }
  .layout, .grid, .profiles-grid, .tasks-grid, .info-grid, .workflow-steps, .workflow-actions {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .card, .task-card, .profile-card, .device-group, .track-card, .uni-card, .workflow-card, .panel {
    max-width: 100% !important;
    min-width: 0 !important;
  }
  img, video, canvas, svg { max-width: 100%; }
  input, select, textarea { width: 100%; max-width: 100%; min-width: 0 !important; font-size: 16px !important; }
  button, .btn, .action-button, .btn-sm { touch-action: manipulation; }

  /* Main tasks page */
  .toolbar {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 8px !important;
    align-items: stretch !important;
    width: 100% !important;
  }
  .toolbar > * { min-width: 0 !important; max-width: 100% !important; }
  .btn-add { width: 100% !important; min-height: 42px !important; justify-content: center !important; }
  .task-filterbar {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
    gap: 7px !important;
    width: 100% !important;
    margin-left: 0 !important;
  }
  .task-filterbar input { grid-column: 1 / -1; }
  .filter-check { justify-content: center !important; min-width: 0 !important; }
  .grid { gap: 10px !important; }
  .card-top { padding: 11px 12px 9px !important; }
  .card-body { padding: 9px 12px !important; }
  .card-title-row { align-items: flex-start !important; }
  .card-title { font-size: 14px !important; overflow-wrap: anywhere; }
  .card-id-row { gap: 8px !important; align-items: flex-start !important; }
  .card-row {
    display: grid !important;
    grid-template-columns: 82px minmax(0,1fr) !important;
    gap: 6px !important;
    margin-bottom: 6px !important;
  }
  .card-label { min-width: 0 !important; }
  .card-value { min-width: 0 !important; overflow-wrap: anywhere; }
  .card-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 7px !important;
    padding: 9px 12px 12px !important;
  }
  .card-actions button, .card-actions a {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    padding: 7px 5px !important;
    font-size: 11px !important;
    white-space: normal !important;
  }
  .card-actions .btn-detail { grid-column: 1 / -1 !important; }

  /* New task modal */
  .modal-bg { align-items: flex-end !important; padding: 0 !important; }
  .modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 8px) !important;
    border-radius: 16px 16px 0 0 !important;
  }
  .modal-head { padding: 14px 14px 12px !important; }
  .modal-body { padding: 14px !important; }
  .form-row-2 { grid-template-columns: minmax(0,1fr) !important; }
  .check-label { align-items: flex-start !important; }

  /* Profiles */
  .stats-grid, .stats-row, .profile-live-stats {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 6px !important;
    padding-bottom: 4px !important;
  }
  .stat-card, .stat, .profile-live-pill { flex: 0 0 auto !important; }
  .stat-card { min-width: 104px !important; }
  .stat { min-width: 102px !important; }
  .filters {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 8px !important;
    align-items: stretch !important;
  }
  .filter-group, .filter-group.search-profile { grid-column: auto !important; min-width: 0 !important; }
  .filter-check-profile, .refresh-button { width: 100% !important; min-height: 42px !important; }
  .power-manager { display: grid !important; grid-template-columns: minmax(0,1fr) !important; gap: 8px !important; }
  .power-manager-title { width: 100% !important; }
  .tasks-grid, .profiles-grid { gap: 10px !important; }
  .task-header, .pc-header { padding: 11px 12px !important; }
  .task-title-row, .pc-header { min-width: 0 !important; }
  .task-title, .pc-name { overflow-wrap: anywhere; }
  .task-body, .pc-body { padding: 10px 12px !important; }
  .detail-row, .pc-row {
    display: grid !important;
    grid-template-columns: 104px minmax(0,1fr) !important;
    gap: 7px !important;
    align-items: start !important;
  }
  .detail-label, .pc-label { min-width: 0 !important; }
  .detail-value, .pc-value { max-width: none !important; min-width: 0 !important; text-align: right !important; overflow-wrap: anywhere; }
  .task-actions, .task-actions.power-actions, .pc-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 7px !important;
  }
  .action-button, .btn-sm { min-width: 0 !important; min-height: 38px !important; white-space: normal !important; }

  /* Task detail */
  .task-header-actions {
    width: 100% !important;
    margin-left: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 7px !important;
  }
  .task-header-actions button { width: 100% !important; min-height: 38px !important; margin-left: 0 !important; }
  .card-header { flex-wrap: wrap !important; padding: 12px 14px !important; }
  .info-grid { grid-template-columns: minmax(0,1fr) !important; }
  .info-row { padding: 9px 14px !important; }
  .steps { padding: 12px 14px !important; }
  .progress-wrap { padding: 0 14px 14px !important; }
  .screenshots-toolbar { padding: 10px 14px 0 !important; flex-wrap: wrap !important; }
  .shot-carousel { padding: 12px 8px 16px !important; }
  .shot-nav { display: none !important; }
  .screenshots { gap: 9px !important; padding-bottom: 8px !important; }
  .screenshot-card { width: 106px !important; height: 185px !important; }
  .live-log { padding: 10px 12px !important; max-height: 48dvh !important; overflow-wrap: anywhere; white-space: normal !important; }
  .log-entry { word-break: break-word; }
  .lightbox-nav { width: 38px !important; height: 58px !important; font-size: 30px !important; }
  .lightbox-nav.left { left: 5px !important; }
  .lightbox-nav.right { right: 5px !important; }

  /* GPS editor */
  #map {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 40dvh !important;
    min-height: 270px !important;
    max-height: 420px !important;
  }
  .panel {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 12px 10px 28px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .panel .row { display: block !important; margin: 0 0 12px !important; padding: 0 0 12px !important; }
  .panel code { display: block !important; white-space: normal !important; overflow-wrap: anywhere; margin-bottom: 6px !important; }
  .panel button, .panel input, .panel select, .panel textarea { width: 100% !important; min-height: 42px !important; margin: 4px 0 !important; }
  .advanced-options, .noise-control { width: 100% !important; margin-left: 0 !important; }
  #geoWizardBanner { top: calc(var(--gl-mobile-header) + 8px) !important; width: calc(100% - 20px) !important; }

  /* Configs */
  .uni-container { margin-top: 0 !important; }
  .device-header { padding: 11px !important; align-items: flex-start !important; gap: 8px !important; }
  .device-meta { min-width: 0 !important; flex-wrap: wrap !important; }
  .track-card { display: block !important; padding: 11px !important; }
  .track-main, .track-name, .route-summary { min-width: 0 !important; overflow-wrap: anywhere; }
  .track-coords { display: grid !important; grid-template-columns: minmax(0,1fr) !important; gap: 5px !important; }
  .track-times { text-align: left !important; margin-top: 8px !important; }
  .settings-tags, .tags { flex-wrap: wrap !important; }

  /* Create phone workflow */
  .workflow-steps, .workflow-actions { gap: 8px !important; }
  .workflow-btn, .uni-btn { width: 100% !important; min-height: 42px !important; }
  .uni-card-header { padding: 12px 14px !important; }
  .uni-card { border-radius: 12px !important; }

  /* Admin tables */
  .top, .title { display: block !important; }
  .table-wrap, .table-container { width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  table { min-width: 760px; }
  .details { max-width: 280px !important; }

  /* Notification settings page */
  .wrap .grid { grid-template-columns: minmax(0,1fr) !important; }
  .sms-form, .btns { flex-direction: column !important; align-items: stretch !important; }
  .btns .btn, .sms-form .btn { width: 100% !important; }
  .item-head { flex-direction: column !important; }
  .item-head .btn { width: 100% !important; }
}

@media (max-width: 380px) {
  .brand-header-name { font-size: 13px !important; }
  .brand-header-mark { width: 27px !important; height: 27px !important; }
  .card-row { grid-template-columns: 74px minmax(0,1fr) !important; }
  .detail-row, .pc-row { grid-template-columns: 92px minmax(0,1fr) !important; }
}