/* Another Station v0.10 — mobile navigation safety layer.
   Loaded after styles.css so desktop/video design stays untouched. */
.panel-head-actions{display:flex;align-items:center;gap:6px}
.panel-menu-button,.mobile-backdrop{display:none}

@media(max-width:860px){
  body.mobile-overlay-open{overflow:hidden!important;overscroll-behavior:none}

  /* One navigation control is always reachable, even while a feature panel is open. */
  .mobile-menu{
    display:grid!important;place-items:center;
    position:fixed!important;
    left:max(14px,env(safe-area-inset-left));right:auto!important;
    top:max(14px,env(safe-area-inset-top));
    z-index:90!important;width:42px!important;height:42px!important;
    border:1px solid rgba(255,255,255,.15)!important;border-radius:50%!important;
    background:rgba(7,9,13,.74)!important;color:#f4f1ec!important;
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    box-shadow:0 10px 35px rgba(0,0,0,.24);
    font-size:18px!important;line-height:1;transition:transform .2s ease,background .2s ease
  }
  html[data-theme="light"] .mobile-menu{
    background:rgba(247,242,234,.86)!important;color:#25211d!important;
    border-color:rgba(31,34,40,.14)!important
  }
  body.mobile-sidebar-open .mobile-menu{transform:rotate(90deg)}

  .sidebar{
    z-index:70!important;width:min(84vw,294px)!important;max-width:294px;
    padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);
    box-shadow:18px 0 55px rgba(0,0,0,.36);overscroll-behavior:contain
  }
  .sidebar.open{transform:translateX(0)!important}
  .nav-groups{flex:1;min-height:0;overscroll-behavior:contain}

  /* Feature panels are proper off-canvas sheets instead of dead-end screens. */
  .right-panel{
    z-index:60!important;top:0!important;right:0!important;bottom:0!important;
    width:min(94vw,390px)!important;max-width:100vw!important;border-radius:0!important;
    opacity:1!important;transform:translateX(104%)!important;pointer-events:none!important;
    box-shadow:-18px 0 55px rgba(0,0,0,.32);overscroll-behavior:contain;
    padding-bottom:env(safe-area-inset-bottom);transition:transform .25s ease!important
  }
  .panel-open .right-panel{transform:translateX(0)!important;pointer-events:auto!important}

  .panel-head{
    position:sticky;top:0;z-index:8;align-items:flex-start;
    padding:calc(18px + env(safe-area-inset-top)) 16px 14px;
    background:linear-gradient(180deg,rgba(8,11,16,.98),rgba(8,11,16,.91));
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line)
  }
  html[data-theme="light"] .panel-head{
    background:linear-gradient(180deg,rgba(248,245,239,.98),rgba(242,237,229,.92))
  }
  .panel-head-actions{display:flex;gap:7px;margin-top:-5px}
  .panel-head-actions>button{
    width:38px;height:38px;display:grid;place-items:center;
    border:1px solid var(--line);border-radius:50%;font-size:18px;
    background:rgba(255,255,255,.025)
  }
  .panel-menu-button{display:grid!important}
  #panelContent{padding-bottom:calc(34px + env(safe-area-inset-bottom))}

  /* Tap outside to close the topmost sheet. */
  .mobile-backdrop{
    display:block;position:fixed;inset:0;z-index:55;border:0;
    background:rgba(2,4,7,.50);opacity:0;pointer-events:none;
    transition:opacity .22s ease;-webkit-tap-highlight-color:transparent
  }
  body.mobile-panel-open .mobile-backdrop,
  body.mobile-sidebar-open .mobile-backdrop{opacity:1;pointer-events:auto}
  body.mobile-sidebar-open .mobile-backdrop{z-index:65}

  /* Leave room for the persistent menu control without changing the video itself. */
  .scene-meta{top:74px!important}
  .weather-time{top:18px!important;right:15px!important}
  .clock{margin-right:0!important}
}

@media(max-width:520px){
  .right-panel{width:100vw!important}
  .sidebar{width:min(87vw,300px)!important}
  .panel-head{padding-left:64px}
  .scene-meta{top:76px!important}
}

@media(prefers-reduced-motion:reduce){
  .mobile-menu,.right-panel,.mobile-backdrop{transition:none!important}
}