/* BOM v5.3 — mobile-only layout isolation; desktop unchanged */
@media (max-width:780px) {
  html,body{max-width:100%;overflow-x:hidden}
  :root{--rail-w:0px}
  body:not(.bom-is-panel) .shell{display:block!important;padding-right:0!important;min-width:0!important}
  body:not(.bom-is-panel) .sidebar{display:none!important}
  body:not(.bom-is-panel) .main{min-width:0!important;width:100%!important;max-width:100%!important;margin:0!important;padding:15px 12px calc(154px + env(safe-area-inset-bottom))!important}
  body:not(.bom-is-panel) .main>*{max-width:100%}
  .top{flex-wrap:wrap;min-width:0}
  .top>.row{max-width:100%;overflow-x:auto}
  .grid,.bom36-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .bom36-main-grid,.work-layout-32,.bom37-form{grid-template-columns:minmax(0,1fr)!important}
  .mono-panel,.card{min-width:0;max-width:100%}
  .timeline-scroller,.kanban-board,.tabs{max-width:100%;overflow-x:auto}
  .mobilebar{display:flex!important;position:fixed!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;z-index:90!important;min-height:64px;box-sizing:border-box;background:#fff}
  /* Secondary navigation is a horizontal strip, never a desktop rail. */
  body:not(.bom-is-panel) .bom-rail{position:fixed!important;left:0!important;right:0!important;top:auto!important;bottom:calc(64px + env(safe-area-inset-bottom))!important;display:flex!important;flex-direction:row!important;align-items:center!important;width:100%!important;height:51px!important;min-height:51px!important;max-height:51px!important;overflow-x:auto!important;overflow-y:hidden!important;padding:5px 8px!important;gap:5px!important;border-left:0!important;border-top:1px solid #3a4556!important;z-index:88!important;box-sizing:border-box}
  .bom-rail button{flex:0 0 39px!important;width:39px!important;min-width:39px!important;height:39px!important;min-height:39px!important;padding:4px!important;font-size:18px!important}
  .bom-rail button span{font-size:8px!important}
  /* The sub-menu strip lives above the right rail. */
  #bomSubRail{position:fixed!important;left:0!important;right:0!important;top:auto!important;bottom:calc(115px + env(safe-area-inset-bottom))!important;width:100%!important;max-width:100%!important;height:49px!important;z-index:87!important;padding:4px 9px!important;transform:translateY(100%)}
  #bomSubRail.show{transform:none!important}
  /* Right drawer remains within the viewport. No persisted desktop pixel width. */
  body:not(.bom-is-panel) .bom-drawer,body.bom-sub-open .bom-drawer{position:fixed!important;left:0!important;right:0!important;top:8px!important;bottom:calc(117px + env(safe-area-inset-bottom))!important;width:100vw!important;max-width:100vw!important;height:auto!important;min-width:0!important;border-radius:13px 13px 0 0!important;box-sizing:border-box!important;z-index:89!important}
  body.bom-sub-open .bom-drawer{bottom:calc(166px + env(safe-area-inset-bottom))!important}
  .bom-drawer-resize{display:none!important}
  .bom-drawer-head{padding:11px 13px!important;flex:none!important}
  .bom-drawer-content,.bom-panel-frame{min-width:0!important;max-width:100%!important}
  /* Dock icons: small circular pictograms, positioned above navigation. */
  body:not(.bom-is-panel) #bom-music-button,
  body:not(.bom-is-panel) #assistantDock .assistant-launch{
    position:fixed!important;top:auto!important;left:auto!important;bottom:calc(125px + env(safe-area-inset-bottom))!important;
    width:39px!important;min-width:39px!important;height:39px!important;min-height:39px!important;
    padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;
    border-radius:50%!important;background:#182b44!important;color:white!important;border:1px solid #6b819f!important;
    font-size:0!important;line-height:1!important;box-shadow:0 3px 12px #0003!important;z-index:96!important;
  }
  body:not(.bom-is-panel) #bom-music-button{right:61px!important}
  body:not(.bom-is-panel) #assistantDock .assistant-launch{right:13px!important}
  body:not(.bom-is-panel) #bom-music-button::before{content:'♫';font-size:22px!important}
  body:not(.bom-is-panel) #assistantDock .assistant-launch::before{content:'✧';font-size:22px!important}
  body.bom-sub-open #bom-music-button,body.bom-sub-open #assistantDock .assistant-launch{bottom:calc(173px + env(safe-area-inset-bottom))!important}
  /* Both floating panels fit narrow phones and remain independently scrollable. */
  body:not(.bom-is-panel) #bom-music-panel,
  body:not(.bom-is-panel) #assistantDock .assistant-panel{
    position:fixed!important;left:8px!important;right:8px!important;top:8px!important;
    bottom:calc(176px + env(safe-area-inset-bottom))!important;
    width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important;
    height:auto!important;max-height:none!important;min-height:0!important;
    overflow-y:auto!important;overflow-x:hidden!important;box-sizing:border-box!important;z-index:97!important;
  }
  body.bom-sub-open #bom-music-panel,body.bom-sub-open #assistantDock .assistant-panel{bottom:calc(224px + env(safe-area-inset-bottom))!important}
  #bom-music-panel{padding:12px!important;border-radius:14px!important}
  #bom-music-panel .bom-music-row{flex-wrap:wrap!important;min-width:0}
  #bom-music-panel input{width:100%;min-width:0!important}
  #bom-music-panel .bom-music-tabs{overflow-x:auto;max-width:100%}
  #bom-music-screen{max-width:100%}
  #bom-music-screen audio{max-width:100%}
  #bom-music-panel .bom-favs{max-height:none!important}
  #bom-music-panel .bom-radio-art{width:43px;height:43px}
  #bom-music-panel .bom-radio-details{min-width:0!important}
  #assistantDock .assistant-panel>*{max-width:100%}
  .modalbg{z-index:120!important}
}
@media (max-width:420px){
  .bom36-metrics{gap:7px!important}
  .bom36-metric{padding:12px!important}
  .bom36-metric b{font-size:25px!important}
  .top h1{font-size:21px!important}
  #bom-music-panel .bom-favs .bom-radio-card{padding:5px}
}