/* SwiftShare PRO Platform Mobile Compatibility Layer
   Device-neutral rules for Android/iOS coarse-pointer browsers.
   Goal:
   - keep the global mode control visible;
   - keep chat/action buttons visible;
   - make Android Chrome scroll smooth;
   - avoid device-specific hacks.
*/

@media (pointer: coarse) and (max-width: 920px){

  html.pointer-coarse,
  html.pointer-coarse body{
    min-height:100dvh !important;
    height:100dvh !important;
    overflow:hidden !important;
    touch-action:auto !important;
    overscroll-behavior-y:none !important;
    -webkit-tap-highlight-color:transparent !important;
  }

  html.pointer-coarse,
  html.pointer-coarse body,
  html.pointer-coarse .app-shell,
  html.pointer-coarse .layout,
  html.pointer-coarse .main-content{
    background:
      radial-gradient(circle at top,#0d1b3d 0%,#050816 58%),
      #050816 !important;
  }

  html.pointer-coarse .app-shell{
    height:100dvh !important;
    min-height:100dvh !important;
    overflow:hidden !important;
    display:flex !important;
    flex-direction:column !important;
  }

  html.pointer-coarse .topbar{
    flex:0 0 auto !important;
    height:auto !important;
    min-height:0 !important;

    display:grid !important;
    grid-template-columns:1fr auto !important;
    grid-template-areas:
      "brand settings"
      "mode mode" !important;

    gap:7px !important;

    padding:
      calc(7px + env(safe-area-inset-top))
      10px
      7px !important;

    border-bottom:1px solid rgba(255,255,255,.07) !important;

    background:
      linear-gradient(180deg,rgba(13,27,61,.98),rgba(5,8,22,.94)) !important;

    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;

    box-shadow:none !important;
  }

  html.pointer-coarse .brand-wrap{
    grid-area:brand !important;
    min-width:0 !important;
    gap:1px !important;
  }

  html.pointer-coarse .brand-row{
    gap:7px !important;
  }

  html.pointer-coarse .brand-icon{
    font-size:23px !important;
    filter:none !important;
  }

  html.pointer-coarse .brand-title{
    font-size:18px !important;
    line-height:1.05 !important;
    letter-spacing:-.02em !important;
  }

  html.pointer-coarse .brand-subtitle{
    padding-left:30px !important;
    font-size:10px !important;
    line-height:1.05 !important;
    opacity:.66 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  html.pointer-coarse .topbar-center{
    grid-area:mode !important;
    width:100% !important;
    justify-content:center !important;
    min-width:0 !important;
  }

  html.pointer-coarse .topbar-actions{
    grid-area:settings !important;
    justify-content:flex-end !important;
    align-self:center !important;
  }

  html.pointer-coarse .topbar-btn{
    width:40px !important;
    height:40px !important;
    border-radius:15px !important;
    font-size:20px !important;
    box-shadow:none !important;
  }

  html.pointer-coarse .network-mode-stack{
    width:100% !important;
    max-width:420px !important;

    display:grid !important;
    grid-template-columns:auto 1fr auto !important;
    align-items:center !important;
    gap:6px !important;
  }

  html.pointer-coarse .online-indicator{
    min-height:30px !important;
    padding:0 10px !important;
    font-size:12px !important;
    line-height:1 !important;
    white-space:nowrap !important;
    box-shadow:none !important;
  }

  html.pointer-coarse .mode-switch{
    width:100% !important;
    min-width:0 !important;
    padding:3px !important;
    gap:3px !important;
    box-shadow:none !important;
  }

  html.pointer-coarse .mode-btn{
    flex:1 !important;
    min-height:30px !important;
    padding:0 7px !important;
    font-size:11px !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }

  html.pointer-coarse .mode-status{
    min-height:28px !important;
    padding:0 8px !important;
    font-size:10px !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }

  html.pointer-coarse body:not(:has(#callScreen:not(.hidden))) .layout{
    flex:1 1 auto !important;
    min-height:0 !important;
    height:auto !important;

    display:flex !important;
    flex-direction:column !important;

    overflow:hidden !important;
  }

  html.pointer-coarse body:not(:has(#callScreen:not(.hidden))) .sidebar{
    flex:0 0 auto !important;
    width:100% !important;

    height:clamp(58px,10dvh,74px) !important;
    max-height:clamp(58px,10dvh,74px) !important;
    min-height:0 !important;

    overflow:hidden !important;

    border-right:0 !important;
    border-bottom:1px solid rgba(255,255,255,.07) !important;

    background:rgba(8,17,36,.72) !important;
  }

  html.pointer-coarse body:not(:has(#callScreen:not(.hidden))) .sidebar-title{
    display:none !important;
  }

  html.pointer-coarse body:not(:has(#callScreen:not(.hidden))) .devices-grid{
    height:100% !important;
    min-height:0 !important;

    padding:6px 8px !important;

    display:flex !important;
    flex-direction:row !important;
    gap:7px !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior-x:contain !important;
    touch-action:pan-x !important;
  }

  html.pointer-coarse body:not(:has(#callScreen:not(.hidden))) .device-card{
    flex:0 0 clamp(150px,44vw,210px) !important;

    height:46px !important;
    min-height:46px !important;

    padding:5px 8px !important;

    border-radius:16px !important;
    gap:7px !important;

    display:grid !important;
    grid-template-columns:auto 1fr !important;
    align-items:center !important;

    box-shadow:none !important;
  }

  html.pointer-coarse body:not(:has(#callScreen:not(.hidden))) .device-avatar{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;

    font-size:18px !important;
    border-radius:12px !important;
  }

  html.pointer-coarse body:not(:has(#callScreen:not(.hidden))) .device-body{
    min-width:0 !important;
  }

  html.pointer-coarse body:not(:has(#callScreen:not(.hidden))) .device-title{
    font-size:12px !important;
    line-height:1.1 !important;

    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  html.pointer-coarse body:not(:has(#callScreen:not(.hidden))) .device-meta{
    display:none !important;
  }

  html.pointer-coarse body:not(:has(#callScreen:not(.hidden))) .device-status-badge{
    margin-top:2px !important;
    font-size:9px !important;
    padding:2px 6px !important;
    width:max-content !important;
  }

  html.pointer-coarse body:not(:has(#callScreen:not(.hidden))) .device-actions{
    display:none !important;
  }

  html.pointer-coarse body:not(:has(#callScreen:not(.hidden))) .empty-devices{
    flex:1 0 auto !important;

    height:44px !important;
    min-height:44px !important;

    margin:0 !important;
    padding:6px 10px !important;

    border-radius:16px !important;

    display:grid !important;
    grid-template-columns:auto 1fr !important;
    grid-template-rows:auto auto !important;
    column-gap:8px !important;

    align-items:center !important;
    text-align:left !important;

    box-shadow:none !important;
  }

  html.pointer-coarse body:not(:has(#callScreen:not(.hidden))) .empty-devices-icon{
    grid-row:1 / 3 !important;

    font-size:22px !important;
    margin:0 !important;
  }

  html.pointer-coarse body:not(:has(#callScreen:not(.hidden))) .empty-devices-title{
    font-size:12px !important;
    line-height:1.05 !important;
    margin:0 !important;
  }

  html.pointer-coarse body:not(:has(#callScreen:not(.hidden))) .empty-devices-subtitle{
    font-size:9px !important;
    line-height:1.05 !important;
    margin:0 !important;
  }

  html.pointer-coarse body:not(:has(#callScreen:not(.hidden))) .main-content{
    flex:1 1 auto !important;
    min-height:0 !important;

    padding:8px !important;
    padding-bottom:calc(8px + env(safe-area-inset-bottom)) !important;

    overflow:hidden !important;
  }

  html.pointer-coarse body:not(:has(#callScreen:not(.hidden))) #chatScreen{
    height:100% !important;
    min-height:0 !important;

    display:grid !important;
    grid-template-rows:auto minmax(0,1fr) auto auto auto !important;
    gap:7px !important;

    overflow:hidden !important;
  }

  html.pointer-coarse body:not(:has(#callScreen:not(.hidden))) .chat-header,
  html.pointer-coarse body:not(:has(#callScreen:not(.hidden))) .chat-messages,
  html.pointer-coarse body:not(:has(#callScreen:not(.hidden))) .transfer-progress,
  html.pointer-coarse body:not(:has(#callScreen:not(.hidden))) .chat-input-row,
  html.pointer-coarse body:not(:has(#callScreen:not(.hidden))) .chat-actions-row{
    position:static !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    top:auto !important;
    z-index:auto !important;
    transform:none !important;
  }

  html.pointer-coarse body:not(:has(#callScreen:not(.hidden))) .chat-header{
    min-height:38px !important;

    padding:0 10px !important;

    border-radius:18px !important;

    font-size:14px !important;

    gap:6px !important;

    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  html.pointer-coarse body:not(:has(#callScreen:not(.hidden))) .peer-status-pill,
  html.pointer-coarse body:not(:has(#callScreen:not(.hidden))) .turn-status-pill,
  html.pointer-coarse body:not(:has(#callScreen:not(.hidden))) .trust-status-pill{
    min-height:24px !important;
    padding:0 7px !important;
    font-size:10px !important;
  }

  html.pointer-coarse body:not(:has(#callScreen:not(.hidden))) .chat-messages{
    min-height:0 !important;
    max-height:none !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
    touch-action:pan-y !important;

    will-change:scroll-position !important;
    transform:translateZ(0) !important;

    padding:10px !important;

    border-radius:18px !important;

    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  html.pointer-coarse body:not(:has(#callScreen:not(.hidden))) .msg{
    max-width:86% !important;

    margin-bottom:8px !important;

    padding:10px 12px !important;

    border-radius:17px !important;

    line-height:1.36 !important;
  }

  html.pointer-coarse body:not(:has(#callScreen:not(.hidden))) .transfer-progress{
    flex:0 0 auto !important;

    max-height:52px !important;

    overflow-y:auto !important;

    -webkit-overflow-scrolling:touch !important;
    touch-action:pan-y !important;
  }

  html.pointer-coarse body:not(:has(#callScreen:not(.hidden))) .chat-input-row{
    flex:0 0 auto !important;

    display:flex !important;
    gap:7px !important;

    padding:0 !important;
    margin:0 !important;

    background:transparent !important;
    border:0 !important;

    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  html.pointer-coarse body:not(:has(#callScreen:not(.hidden))) .chat-input{
    min-height:42px !important;
    height:42px !important;

    padding:0 14px !important;

    border-radius:18px !important;

    font-size:15px !important;

    box-shadow:none !important;
  }

  html.pointer-coarse body:not(:has(#callScreen:not(.hidden))) .send-btn{
    width:78px !important;
    min-height:42px !important;
    height:42px !important;

    border-radius:18px !important;

    font-size:15px !important;

    box-shadow:none !important;
  }

  html.pointer-coarse body:not(:has(#callScreen:not(.hidden))) .chat-actions-row{
    flex:0 0 auto !important;

    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:7px !important;

    padding:0 !important;
    margin:0 !important;

    background:transparent !important;
    border:0 !important;

    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  html.pointer-coarse body:not(:has(#callScreen:not(.hidden))) .action-btn{
    min-height:39px !important;

    padding:0 6px !important;

    border-radius:15px !important;

    font-size:13px !important;

    box-shadow:none !important;
  }

  html.pointer-coarse body:not(:has(#callScreen:not(.hidden))) .encrypt-toggle{
    grid-column:1 / -1 !important;

    min-height:34px !important;

    justify-content:center !important;

    padding:0 8px !important;

    border-radius:15px !important;

    font-size:12px !important;
  }

  html.pointer-coarse body:not(:has(#callScreen:not(.hidden))) #mobileScrollGrip{
    display:none !important;
  }
}

@media (pointer: coarse) and (max-width: 380px){

  html.pointer-coarse .brand-title{
    font-size:16px !important;
  }

  html.pointer-coarse .brand-subtitle{
    font-size:9px !important;
  }

  html.pointer-coarse .network-mode-stack{
    grid-template-columns:1fr !important;
    max-width:100% !important;
  }

  html.pointer-coarse .online-indicator,
  html.pointer-coarse .mode-status{
    justify-self:center !important;
  }

  html.pointer-coarse body:not(:has(#callScreen:not(.hidden))) .sidebar{
    height:52px !important;
    max-height:52px !important;
  }

  html.pointer-coarse body:not(:has(#callScreen:not(.hidden))) .device-card{
    flex-basis:142px !important;
    height:42px !important;
    min-height:42px !important;
  }

  html.pointer-coarse body:not(:has(#callScreen:not(.hidden))) .device-avatar{
    width:30px !important;
    height:30px !important;
    min-width:30px !important;

    font-size:16px !important;
  }

  html.pointer-coarse body:not(:has(#callScreen:not(.hidden))) .chat-actions-row{
    gap:6px !important;
  }

  html.pointer-coarse body:not(:has(#callScreen:not(.hidden))) .action-btn{
    font-size:12px !important;
  }
}