/* BUBB — exact compact visual envelope for IA / Paramètres.
   The mobile reference is the already-approved Journal / Mon univers menu cards:
   short card, ~100px visual zone, centered contained artwork. */

@media(min-width:821px){
  html body #lce-v10-journey .lce-v10-stop:is([data-page="ai"],[data-page="settings"]) .lce-v9-visual-wrap,
  html body :is(#ai,#settings) > .lce-v9-hero .lce-v9-visual-wrap{
    width:min(960px,94%)!important;
    max-width:94%!important;
    min-height:360px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

/* The issue shown in the user's iPhone recording is mobile: the old 340–360px
   scene makes these three cards almost twice as tall as Journal / Mon univers.
   Replace that with the same compact menu-card footprint. */
@media(max-width:820px){
  html body #lce-v10-journey .lce-v10-stop:is([data-page="ai"],[data-page="settings"]) > .lce-v9-hero,
  html body :is(#ai,#settings) > .lce-v9-hero{
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    padding-bottom:12px!important;
  }

  html body #lce-v10-journey .lce-v10-stop:is([data-page="ai"],[data-page="settings"]) .lce-v9-visual-wrap,
  html body :is(#ai,#settings) > .lce-v9-hero .lce-v9-visual-wrap{
    width:100%!important;
    max-width:100%!important;
    height:152px!important;
    min-height:152px!important;
    max-height:152px!important;
    margin:12px auto 0!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
  }

  html body #lce-v10-journey .lce-v10-stop:is([data-page="ai"],[data-page="settings"]) .lce-v9-scene,
  html body :is(#ai,#settings) > .lce-v9-hero .lce-v9-scene{
    position:relative!important;
    width:100%!important;
    max-width:100%!important;
    height:152px!important;
    min-height:152px!important;
    max-height:152px!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }

  /* Published image wrapper. It used to inherit 100% of a 340–360px scene. */
  html body #lce-v10-journey .lce-v10-stop:is([data-page="ai"],[data-page="settings"])
    .lce-v9-scene[data-lce-current-visual="1"] > .lce-image-session-frame,
  html body :is(#ai,#settings) > .lce-v9-hero
    .lce-v9-scene[data-lce-current-visual="1"] > .lce-image-session-frame,
  html body #lce-v10-journey .lce-v10-stop:is([data-page="ai"],[data-page="settings"])
    .lce-v9-scene > .lce-custom-visual-frame,
  html body :is(#ai,#settings) > .lce-v9-hero
    .lce-v9-scene > .lce-custom-visual-frame{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    width:62%!important;
    max-width:260px!important;
    height:140px!important;
    max-height:140px!important;
    min-height:0!important;
    transform:translate(-50%,-50%)!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    box-shadow:none!important;
    background:transparent!important;
  }

  html body #lce-v10-journey .lce-v10-stop:is([data-page="ai"],[data-page="settings"])
    .lce-v9-scene :is(.lce-image-session-frame,.lce-custom-visual-frame) > img,
  html body :is(#ai,#settings) > .lce-v9-hero
    .lce-v9-scene :is(.lce-image-session-frame,.lce-custom-visual-frame) > img{
    position:absolute!important;
    inset:0!important;
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    height:100%!important;
    max-height:100%!important;
    margin:0!important;
    padding:0!important;
    object-fit:contain!important;
    object-position:center!important;
    transform:none!important;
  }

  /* Kill the oversized legacy objects if a published image has not attached yet,
     so there is no large flash before the curated image layer finishes. */
  html body #lce-v10-journey .lce-v10-stop[data-page="ai"] .lce-v9-scene-ai .lce-v9-ai-orb,
  html body #lce-v10-journey .lce-v10-stop[data-page="settings"] .lce-v9-scene-settings :is(.lce-v9-settings-panel,.lce-v9-settings-tile),
  html body #ai > .lce-v9-hero .lce-v9-scene-ai .lce-v9-ai-orb,
  html body #settings > .lce-v9-hero .lce-v9-scene-settings :is(.lce-v9-settings-panel,.lce-v9-settings-tile){
    max-height:140px!important;
  }
}