/* FXCHS V3.28 — SoundCloud drawer: predictable controls and one scroll surface.
   The cooperative room layout itself runs through the existing 360 springs. */
body.fxv2 .fxv318-music-panel{
  width:min(352px,calc(100vw - 20px));
  max-height:min(630px,calc(100dvh - var(--v2-header-height,76px) - var(--v2-footer-height,42px) - 12px));
  border-radius:14px;
  scrollbar-width:thin;
}
body.fxv2 .fxv318-music-heading .fxv328-music-heading-actions{
  display:flex;flex-direction:row;align-items:center;gap:12px;flex-shrink:0;
}
body.fxv2 .fxv318-music-heading .fxv328-music-close{
  appearance:none;display:grid;place-items:center;
  flex:0 0 35px;width:35px;height:35px;padding:0;
  border:1px solid rgba(218,244,226,.32);border-radius:8px;
  background:rgba(255,255,255,.06);color:#fff;
  font:400 25px/1 system-ui,sans-serif;cursor:pointer;
}
body.fxv2 .fxv318-music-heading .fxv328-music-close:hover{background:#294a35}
body.fxv2 .fxv318-music-actions{gap:7px}
body.fxv2 .fxv318-music-actions button{
  min-height:41px;padding:8px 5px;border-radius:8px;font-size:12px;
}
body.fxv2 .fxv318-music-actions button[hidden]{display:none!important}
body.fxv2 .fxv318-music-actions [data-fxv318-play]{flex:1.45}
body.fxv2 .fxv318-music-list{max-height:200px}
body.fxv2 .fxv318-music-list button{min-height:40px}

/* Article SoundCloud embeds are part of the readable article column, not
   full-width cinema frames. One native player, with a real close action. */
body.fxv2 .fxv2-article-page .media-sound{
  box-sizing:border-box;width:min(100%,760px);max-width:100%;min-width:0;
  margin:21px auto 32px;padding:12px;
  border:1px solid #b7d3bf;border-radius:13px;background:#eaf3ec;
}
body.fxv2 .fxv2-article-page .media-sound .sound-player{
  box-sizing:border-box;width:100%;min-width:0;overflow:hidden;
  border-radius:9px;background:#13261c;color:#fff;
}
body.fxv2 .fxv2-article-page .media-sound .media-start{
  display:block;min-width:0;padding:8px;
}
body.fxv2 .fxv2-article-page .media-sound .media-start[hidden]{display:none!important}
body.fxv2 .fxv2-article-page .media-sound .fx41-media-launch{
  appearance:none;display:flex;align-items:center;gap:11px;
  box-sizing:border-box;width:100%;min-height:53px;padding:10px 12px;
  border:1px solid #538966;border-radius:8px;background:#1d3c2a;color:#fff;
  text-align:left;cursor:pointer;font:700 13px/1.35 system-ui,sans-serif;
}
body.fxv2 .fxv2-article-page .media-sound .fx41-play-mark{
  flex:0 0 auto;display:grid;place-items:center;
  padding:7px 10px;border-radius:6px;background:#48b75e;color:#06170b;font-size:11px;
}
body.fxv2 .fxv2-article-page .media-sound .fx41-play-title{
  min-width:0;overflow-wrap:anywhere;
}
body.fxv2 .fxv2-article-page .media-sound .media-notice{
  margin:8px 3px 2px;color:#dce8dc;font-size:11px;line-height:1.5;
}
body.fxv2 .fxv2-article-page .media-sound .media-notice a{color:#b6f2c2}
body.fxv2 .fxv2-article-page .media-sound iframe[data-fxv328-audio-frame]{
  display:block;box-sizing:border-box;width:100%;max-width:100%!important;
  height:120px;margin:0;border:0;
}
body.fxv2 .fxv2-article-page .media-sound .media-caption{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;
  margin-top:10px;color:#254b32;font:600 11px/1.4 system-ui,sans-serif;
}
body.fxv2 .fxv2-article-page .media-sound .media-caption a{color:#245c37;text-underline-offset:3px}
body.fxv2 .fxv2-article-page .media-sound [data-remove-external]{
  border:1px solid #92ae9b;border-radius:7px;background:#f9fefa;color:#163b24;
  padding:7px 11px;cursor:pointer;font:600 11px/1.3 system-ui,sans-serif;
}
body.fxv2 .fxv2-article-page .media-sound [data-remove-external][hidden]{display:none!important}

/* At tablet and phone widths, earlier desktop overrides competed over the
   drawer's left/right coordinates. Attach it to the visual viewport instead. */
@media (max-width:760px), (max-height:500px) and (pointer:coarse){
  /* A transform on the little header button was turning its fixed drawer
     into a button-relative fixed box. Keep the icon aligned without it. */
  body.fxv2 .fxv2-header .fxv318-music{
    top:calc(50% - 21px)!important;transform:none!important;
  }
  body.fxv2 .fxv318-music-panel{
    position:fixed!important;
    left:max(10px,env(safe-area-inset-left,0px))!important;
    right:max(10px,env(safe-area-inset-right,0px))!important;
    top:calc(var(--v2-header-height,76px) + 5px)!important;
    bottom:calc(var(--v2-footer-height,42px) + 5px)!important;
    width:auto!important;max-width:none!important;
    height:auto!important;max-height:none!important;
    padding:15px 14px 13px;
    overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
    border-radius:12px;
  }
  body.fxv2 .fxv318-music-list{max-height:none;overflow:visible}
  body.fxv2 .fxv318-music-actions button{min-height:44px}
  body.fxv2 .fxv318-music-options input{width:clamp(62px,22vw,100px)}
}