/* Zhakaw v4.0.9 mobile usability layer.
   Mobile-only viewport, scrolling, keyboard, safe-area and touch fixes.
   Existing colors, icons, spacing language and desktop layout are preserved. */

:root{
  --zh-visual-height:100dvh;
  --zh-visual-offset-top:0px;
  --zh-safe-top:env(safe-area-inset-top,0px);
  --zh-safe-right:env(safe-area-inset-right,0px);
  --zh-safe-bottom:env(safe-area-inset-bottom,0px);
  --zh-safe-left:env(safe-area-inset-left,0px);
}

html,body{max-width:100%;overflow-x:clip}

/* Long standalone pages must remain naturally scrollable on phones. */
@media(max-width:850px){
  html:not(:has(body.classic-chat-page)){min-height:100%;height:auto}
  body:not(.classic-chat-page){min-height:var(--zh-visual-height,100dvh);height:auto;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .page-card{width:calc(100% - 20px);max-width:100%;margin:10px auto;padding:16px;border-radius:16px;overflow:visible}
  .admin-page-v3,.profile-page-v3{padding-bottom:calc(18px + var(--zh-safe-bottom))}
  .admin-titlebar{position:sticky;top:0;z-index:12;padding-top:max(4px,var(--zh-safe-top));background:color-mix(in srgb,var(--panel) 96%,transparent);backdrop-filter:blur(12px)}
  .admin-nav{position:sticky;top:calc(54px + var(--zh-safe-top));z-index:11;max-width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .admin-nav::-webkit-scrollbar{display:none}
  .admin-panel,.admin-layout,.form-grid,.field{min-width:0}
  .admin-panel{overflow:visible}
  .data-table{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
  .data-table th,.data-table td{white-space:nowrap}
  .actions{min-width:190px}
  .admin-content-row{min-width:0;flex-wrap:wrap}
  .admin-content-row>div:last-child{width:100%;justify-content:flex-start}
  .auth-page{min-height:var(--zh-visual-height,100dvh);height:auto}
  .auth-side{min-height:var(--zh-visual-height,100dvh);align-items:start;padding-top:max(18px,calc(var(--zh-safe-top) + 12px));padding-bottom:max(18px,calc(var(--zh-safe-bottom) + 12px))}
  .auth-card{max-width:100%}
  input,select,textarea{font-size:16px!important}
}

/* The chat is an app shell. Keep one controlled scroll area instead of letting
   iOS Safari alternate between body scrolling and inner-panel scrolling. */
@media(max-width:850px), (orientation:landscape) and (max-height:520px) and (max-width:950px){
  body.classic-chat-page{
    position:fixed!important;
    left:0;right:0;
    top:var(--zh-visual-offset-top,0px)!important;
    width:100%;
    height:var(--zh-visual-height,100dvh)!important;
    min-height:0!important;
    overflow:hidden!important;
    overscroll-behavior:none;
    touch-action:manipulation;
  }
  .classic-chat-page{
    --zh-head-total:calc(var(--classic-head) + var(--zh-safe-top));
    --zh-foot-total:calc(var(--classic-foot) + var(--zh-safe-bottom));
  }
  .classic-head{
    inset:var(--zh-visual-offset-top,0px) 0 auto 0!important;
    height:var(--zh-head-total)!important;
    padding-top:var(--zh-safe-top)!important;
    padding-left:var(--zh-safe-left)!important;
    padding-right:var(--zh-safe-right)!important;
  }
  .classic-shell,
  [data-ui-style="glass"] .classic-shell{
    position:fixed!important;
    inset:calc(var(--zh-visual-offset-top,0px) + var(--zh-head-total)) 0 auto 0!important;
    width:100%;
    height:max(0px,calc(var(--zh-visual-height,100dvh) - var(--zh-head-total) - var(--zh-foot-total)))!important;
    min-height:0!important;
    overflow:hidden!important;
    padding:0!important;
    gap:0!important;
  }
  .classic-footer,
  [data-ui-style="glass"] .classic-footer{
    inset:calc(var(--zh-visual-offset-top,0px) + var(--zh-visual-height,100dvh) - var(--zh-foot-total)) 0 auto 0!important;
    height:var(--zh-foot-total)!important;
    padding:0 var(--zh-safe-right) var(--zh-safe-bottom) var(--zh-safe-left)!important;
  }
  .chat-stage{inset:0!important;height:100%!important;min-height:0!important;overflow:hidden!important}
  .chat-stream-wrap{flex:1 1 auto!important;min-height:0!important;overflow:hidden!important}
  .classic-messages{
    flex:1 1 auto!important;
    min-height:0!important;
    height:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-y:contain;
    touch-action:pan-y;
    scroll-behavior:auto!important;
    overflow-anchor:none;
  }
  .classic-composer{flex:0 0 auto!important;min-width:0;position:relative;z-index:30}
  .classic-compose-row{min-width:0}
  .message-input-shell{min-width:0}
  .classic-compose-row .message-input{max-width:100%;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .left-panel,.right-panel{
    top:calc(var(--zh-visual-offset-top,0px) + var(--zh-head-total))!important;
    bottom:auto!important;
    height:max(0px,calc(var(--zh-visual-height,100dvh) - var(--zh-head-total) - var(--zh-foot-total)))!important;
    max-height:none!important;
  }
  .left-panel-body,.right-panel-body,.classic-story-track,.live-space-list,.live-directory-list,.radio-station-list,.gift-history,.emoji-grid,.sticker-grid{
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  .left-panel-body,.right-panel-body{touch-action:pan-y}
  .mobile-overlay.show{
    inset:calc(var(--zh-visual-offset-top,0px) + var(--zh-head-total)) 0 auto 0!important;
    height:max(0px,calc(var(--zh-visual-height,100dvh) - var(--zh-head-total) - var(--zh-foot-total)))!important;
    overscroll-behavior:none;
    touch-action:none;
  }
  .account-menu{max-height:calc(var(--zh-visual-height,100dvh) - var(--zh-head-total) - 8px);overflow-y:auto;-webkit-overflow-scrolling:touch}
  .composer-extension-panel,.classic-chat-page .classic-composer .emoji-panel{
    max-height:min(52vh,calc(var(--zh-visual-height,100dvh) - var(--zh-head-total) - var(--zh-foot-total) - 58px))!important;
    overflow:auto!important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
}

/* Modal header stays visible; only the body scrolls. This prevents the close,
   cancel and join buttons from becoming unreachable after keyboard changes. */
@media(max-width:850px), (orientation:landscape) and (max-height:520px) and (max-width:950px){
  .modal-backdrop,
  .classic-chat-page .modal-backdrop{
    inset:var(--zh-visual-offset-top,0px) 0 auto 0!important;
    width:100%;
    height:var(--zh-visual-height,100dvh)!important;
    padding:max(8px,var(--zh-safe-top)) max(8px,var(--zh-safe-right)) max(8px,var(--zh-safe-bottom)) max(8px,var(--zh-safe-left))!important;
    align-items:flex-end!important;
    justify-content:center!important;
    overflow:hidden!important;
    overscroll-behavior:none;
  }
  .modal,
  .classic-chat-page .modal{
    display:flex!important;
    flex-direction:column!important;
    width:min(100%,720px)!important;
    max-width:100%!important;
    max-height:calc(var(--zh-visual-height,100dvh) - max(16px,var(--zh-safe-top)) - max(16px,var(--zh-safe-bottom)))!important;
    overflow:hidden!important;
    overscroll-behavior:contain;
  }
  .modal-head{flex:0 0 auto;position:relative;z-index:3}
  .modal-body{
    flex:1 1 auto;
    min-height:0;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-y:contain;
    touch-action:pan-y;
    padding-bottom:max(15px,calc(10px + var(--zh-safe-bottom)))!important;
  }
  .modal-body>.primary-btn:last-child,.modal-body>form>.primary-btn:last-child{margin-bottom:2px}
  body.zhakaw-keyboard-open .modal-backdrop{align-items:flex-start!important;padding-top:6px!important;padding-bottom:6px!important}
  body.zhakaw-keyboard-open .modal{max-height:calc(var(--zh-visual-height,100dvh) - 12px)!important}
  .live-spaces-actions,.live-room-actions,.incoming-call-actions,.private-call-controls,.appearance-footer{
    position:sticky;
    bottom:0;
    z-index:4;
    background:color-mix(in srgb,var(--classic-panel,var(--panel)) 96%,transparent);
    padding-bottom:max(2px,var(--zh-safe-bottom));
  }
  .private-call-body,.game3d-body{min-height:0}
  .private-call-stage,.game3d-canvas-wrap{min-height:180px}
  .canvas-wrap canvas{height:min(48vh,360px)}
}

/* Lock the page behind an open modal without losing its scroll position. */
body.zhakaw-modal-locked{position:fixed!important;left:0;right:0;width:100%;overflow:hidden!important}
body.mobile-panel-open{overflow:hidden!important;overscroll-behavior:none}

/* Coarse-pointer reachability and accidental double-tap zoom protection. */
@media(pointer:coarse){
  button,a,.footer-item,.composer-item,.panel-tool,.head-option,.head-user,.rail-item,.modal-close,.mini-btn,.secondary-btn,.primary-btn,.danger-btn{
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }
  .modal-close,.panel-tool{min-width:44px;min-height:44px}
  .footer-item,.composer-item,.head-option,.head-user{min-height:44px}
}

/* Keep transient messages and the legacy mobile navigation clear of the
   home indicator and fixed chat footer. */
@media(max-width:850px), (orientation:landscape) and (max-height:520px) and (max-width:950px){
  body.classic-chat-page .toast-stack{
    right:max(8px,var(--zh-safe-right))!important;
    bottom:calc(var(--zh-foot-total) + 8px)!important;
  }
  body:not(.classic-chat-page) .toast-stack{
    right:max(8px,var(--zh-safe-right))!important;
    bottom:max(8px,var(--zh-safe-bottom))!important;
  }
}
@media(max-width:780px){
  .mobile-nav{
    height:calc(64px + var(--zh-safe-bottom))!important;
    padding-bottom:var(--zh-safe-bottom)!important;
  }
  .app-grid{padding-bottom:calc(68px + var(--zh-safe-bottom))!important}
}

@media(max-width:360px){
  .head-room-mobile{max-width:72px}
  .classic-footer{overflow-x:auto;overflow-y:hidden;justify-content:flex-start;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .classic-footer::-webkit-scrollbar{display:none}
  .footer-spacer{min-width:0;flex:1}
  .admin-titlebar{gap:8px;flex-wrap:wrap}
  .admin-titlebar .secondary-btn{margin-left:auto}
}

@media(orientation:landscape) and (max-height:520px) and (max-width:950px){
  .classic-chat-page{--zh-head-total:calc(42px + var(--zh-safe-top));--zh-foot-total:calc(42px + var(--zh-safe-bottom))}
  .classic-head{height:var(--zh-head-total)!important}
  .classic-shell{display:block!important}
  .left-rail{display:flex!important}
  .left-panel{position:fixed!important;z-index:105;left:0;right:auto;width:min(var(--left-width),88vw);transform:translateX(-104%);box-shadow:12px 0 36px rgba(0,0,0,.24)}
  .left-panel.open{transform:translateX(0)}
  .right-panel{position:fixed!important;z-index:100;left:auto;right:0;width:min(var(--right-width),88vw);transform:translateX(103%)}
  .right-panel.open{transform:translateX(0)}
  .chat-stage{position:absolute!important;inset:0!important}
  .classic-shell.left-collapsed,.classic-shell.right-collapsed,.classic-shell.left-collapsed.right-collapsed{display:block!important}
  .classic-shell.left-collapsed .left-panel{pointer-events:auto}
  .classic-footer{height:var(--zh-foot-total)!important}
  .chat-stage-top{min-height:34px;height:34px}
  .classic-announcement{min-height:29px}
  .modal-backdrop{align-items:center!important}
  .modal{max-height:calc(var(--zh-visual-height,100dvh) - 8px)!important}
}


/* Zhakaw v4.2.5 Mobile Navigation Rewrite */
@media(max-width:850px){
  .left-rail{
    display:none!important;
  }

  .mobile-nav{
    display:flex!important;
    position:fixed!important;
    left:0;
    right:0;
    bottom:0;
    height:calc(64px + env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom);
    z-index:9999;
    align-items:center;
    justify-content:space-around;
    background:var(--classic-panel,#fff);
    border-top:1px solid var(--classic-border,#dfe3eb);
  }

  .mobile-nav button{
    min-width:44px;
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .classic-chat-page .classic-composer{
    padding-bottom:calc(8px + env(safe-area-inset-bottom));
  }
}