/* Ayster proprietary software. Copyright © 2026 Ayster. All rights reserved. */
/* Ayster v86 — iPhone safe-area + no-horizontal-overflow master patch */
:root{
  --ayster-safe-top: env(safe-area-inset-top, 0px);
  --ayster-safe-right: env(safe-area-inset-right, 0px);
  --ayster-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ayster-safe-left: env(safe-area-inset-left, 0px);
}
html,body{width:100%;max-width:100%;margin:0;overflow-x:hidden!important;-webkit-text-size-adjust:100%}
*,*::before,*::after{box-sizing:border-box}
img,video,canvas,svg,iframe{max-width:100%}
input,textarea,select,button{max-width:100%;min-width:0}

/* Never let common page shells widen the WKWebView. */
.music-shell,.layout,.main,.page,.page-content,.app,.app-shell,.container,.content,.content-wrap,.topbar,.top-bar,.app-header,.wallet-header{
  max-width:100%!important;
  min-width:0!important;
}

/* Horizontal content may scroll itself; the whole page must not. */
.stories,.story-row,.story-strip,.reels,.reel-row,.horizontal-scroll,.chips{max-width:100%!important;-webkit-overflow-scrolling:touch}

/* Modals and floating panels stay inside the visible iPhone width. */
.modal-card,.watch-card,.ayster-chat,.chat-widget,.floating-chat,[role="dialog"]{
  max-width:calc(100vw - 24px)!important;
}

@media (max-width: 700px){
  /* Music page: move controls below Dynamic Island/status bar and let search shrink. */
  .music-top{
    top:0!important;
    width:100%!important;
    max-width:100vw!important;
    min-width:0!important;
    height:auto!important;
    min-height:calc(58px + var(--ayster-safe-top))!important;
    padding-top:calc(var(--ayster-safe-top) + 6px)!important;
    padding-right:calc(var(--ayster-safe-right) + 10px)!important;
    padding-bottom:6px!important;
    padding-left:calc(var(--ayster-safe-left) + 10px)!important;
    gap:7px!important;
    overflow:hidden!important;
    align-items:center!important;
  }
  .music-top > *{min-width:0!important;flex-shrink:0}
  .music-top .top-search{
    flex:1 1 0!important;
    width:0!important;
    max-width:none!important;
    min-width:0!important;
    margin:0!important;
    overflow:hidden!important;
  }
  .music-top .top-search input{
    flex:1 1 0!important;
    width:0!important;
    min-width:0!important;
    padding-left:12px!important;
    padding-right:8px!important;
    text-overflow:ellipsis!important;
  }
  .music-top .top-search button{width:42px!important;min-width:42px!important;flex:0 0 42px!important}
  .music-top .menu-btn{width:40px!important;min-width:40px!important;flex:0 0 40px!important}
  .music-top .brand{flex:0 0 auto!important;min-width:0!important}
  .music-top .brandmark{width:34px!important;min-width:34px!important;flex:0 0 34px!important}
  .music-top .voice{display:none!important}
  .music-top .top-actions{flex:0 0 auto!important;min-width:0!important;gap:4px!important}
  .music-top .top-actions .pill-upload,.music-top .avatar{display:none!important}
  .music-top .icon-btn{width:38px!important;height:38px!important;min-width:38px!important;flex:0 0 38px!important}

  /* Sticky content below the taller safe-area header. */
  .music-shell .chips{top:calc(58px + var(--ayster-safe-top))!important}
  .music-shell .sidebar{top:calc(58px + var(--ayster-safe-top))!important;height:calc(100vh - 58px - var(--ayster-safe-top))!important}

  .section-head{min-width:0!important;flex-wrap:wrap!important}
  .section-head>div{min-width:0!important;flex:1 1 220px}
  .section-head h1,.section-head p{overflow-wrap:anywhere}
  .hero-banner{width:100%!important;max-width:100%!important}
  .hero-actions>*{min-width:0!important;max-width:100%!important}

  /* Generic top bars that sit beneath iOS status area. */
  body > .topbar, body > .top-bar, body > .app-header, body > .wallet-header,
  .app > .topbar, .app-shell > .topbar{
    padding-left:calc(var(--ayster-safe-left) + 10px)!important;
    padding-right:calc(var(--ayster-safe-right) + 10px)!important;
    max-width:100vw!important;
    min-width:0!important;
  }

  #aysterV69BottomNav{
    left:calc(10px + var(--ayster-safe-left))!important;
    right:calc(10px + var(--ayster-safe-right))!important;
    max-width:calc(100vw - 20px - var(--ayster-safe-left) - var(--ayster-safe-right))!important;
  }
}

@media (max-width: 430px){
  /* Keep useful controls on very narrow iPhones. */
  .music-top{gap:5px!important;padding-left:calc(var(--ayster-safe-left) + 8px)!important;padding-right:calc(var(--ayster-safe-right) + 8px)!important}
  .music-top .brandmark{width:32px!important;height:32px!important;min-width:32px!important;flex-basis:32px!important}
  .music-top .menu-btn{width:36px!important;min-width:36px!important;flex-basis:36px!important}
  .music-top .icon-btn{width:36px!important;height:36px!important;min-width:36px!important;flex-basis:36px!important}
  .music-top .top-search button{width:38px!important;min-width:38px!important;flex-basis:38px!important}
}

/* Ayster v87 FORCE iPhone header safe-area repair.
   Some Capacitor/WKWebView builds report env(safe-area-inset-top) as 0.
   Use a real minimum top reserve on iPhone-sized screens so app controls can never sit under iOS status UI. */
@media (max-width: 700px) {
  .music-shell { padding-top: 0 !important; }
  .music-top {
    position: sticky !important;
    top: 0 !important;
    min-height: 112px !important;
    padding-top: max(env(safe-area-inset-top, 0px), 54px) !important;
    padding-bottom: 8px !important;
    padding-left: max(env(safe-area-inset-left, 0px), 10px) !important;
    padding-right: max(env(safe-area-inset-right, 0px), 10px) !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .music-top .brand { min-width: 0 !important; }
  .music-top .brand > span:last-child { display: none !important; }
  .music-top .top-search { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; }
  .music-top .top-search input { width: 100% !important; min-width: 0 !important; }
  .music-top .voice, .music-top .pill-upload, .music-top .avatar { display: none !important; }
  .music-shell .chips { top: 112px !important; }
  body { padding-top: 0 !important; }
}
@media (max-width: 430px) {
  .music-top {
    min-height: 108px !important;
    padding-top: max(env(safe-area-inset-top, 0px), 52px) !important;
    gap: 6px !important;
  }
  .music-top .menu-btn { width: 38px !important; min-width: 38px !important; flex: 0 0 38px !important; }
  .music-top .brandmark { width: 32px !important; height: 32px !important; min-width: 32px !important; flex: 0 0 32px !important; }
  .music-top .icon-btn { width: 36px !important; height: 36px !important; min-width: 36px !important; flex: 0 0 36px !important; }
  .music-top .top-search button { width: 36px !important; min-width: 36px !important; flex: 0 0 36px !important; }
  .music-shell .chips { top: 108px !important; }
}