/* 1.0.0-beta.5.7.2 — restore the complete Echo workspace on every layout. */
body[data-active-tab]:not([data-active-tab="bestiary"]) #bestiary{display:none!important}
body[data-active-tab="bestiary"] #bestiary:not([hidden]){display:block!important}
#bestiary .beta557-laptop-nav{display:none}
#bestiary .beta554-inline-echo{display:none!important}

/* Wide desktop: canonical three-column grimoire, including the full Echo scene. */
@media(min-width:1280px){
  body.desktop-layout #bestiary .beta52-layout{
    grid-template-columns:minmax(250px,300px) minmax(520px,1fr) minmax(230px,290px)!important;
    grid-template-rows:auto!important
  }
  body.desktop-layout #bestiary .beta52-sidebar,
  body.desktop-layout #bestiary .beta52-dossier,
  body.desktop-layout #bestiary .beta52-right{display:flex!important;grid-row:auto!important}
  body.desktop-layout #bestiary .beta52-sidebar{grid-column:1!important}
  body.desktop-layout #bestiary .beta52-dossier{grid-column:2!important}
  body.desktop-layout #bestiary .beta52-right{grid-column:3!important}
  body.desktop-layout #bestiary .beta52-right-stage{display:block!important}
}

/* Notebook desktop: catalog remains at the left, Dossier and full Echo are two pages of one grimoire. */
@media(min-width:861px) and (max-width:1279px){
  body.desktop-layout #bestiary .beta52-shell{width:min(100%,calc(100vw - 24px))!important;max-width:none!important}
  body.desktop-layout #bestiary .beta52-layout{
    display:grid!important;
    grid-template-columns:minmax(244px,280px) minmax(0,1fr)!important;
    grid-template-rows:auto minmax(620px,auto)!important;
    gap:10px!important;align-items:stretch!important;min-height:0!important
  }
  body.desktop-layout #bestiary .beta52-sidebar{
    display:flex!important;grid-column:1!important;grid-row:1 / span 2!important;min-width:0!important
  }
  body.desktop-layout #bestiary .beta557-laptop-nav{
    grid-column:2!important;grid-row:1!important;display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:7px;
    border:1px solid rgba(202,165,93,.28);border-radius:14px;
    background:radial-gradient(circle at 50% -90%,rgba(161,46,63,.2),transparent 65%),rgba(9,10,15,.96);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.018),0 14px 34px rgba(0,0,0,.25)
  }
  body.desktop-layout #bestiary .beta557-laptop-nav button{
    position:relative;min-height:46px;display:flex;align-items:center;justify-content:center;gap:9px;
    border:1px solid transparent;border-radius:10px;background:transparent;color:#948878;
    font:12px/1 Georgia,serif;letter-spacing:.035em;cursor:pointer;transition:.22s ease
  }
  body.desktop-layout #bestiary .beta557-laptop-nav button::before{
    content:attr(data-rune);width:26px;height:26px;display:grid;place-items:center;
    border:1px solid rgba(202,165,93,.24);border-radius:50%;color:#cda963;background:rgba(202,165,93,.035)
  }
  body.desktop-layout #bestiary .beta557-laptop-nav button:hover{
    color:#eadbbd;border-color:rgba(202,165,93,.25);background:rgba(202,165,93,.045)
  }
  body.desktop-layout #bestiary .beta557-laptop-nav button.is-active{
    color:#f0dfbf;border-color:rgba(202,165,93,.43);
    background:linear-gradient(135deg,rgba(148,42,59,.26),rgba(202,165,93,.065));
    box-shadow:inset 0 -2px 0 rgba(166,48,64,.65),0 0 24px rgba(148,42,59,.08)
  }
  body.desktop-layout #bestiary .beta52-dossier,
  body.desktop-layout #bestiary .beta52-right{
    grid-column:2!important;grid-row:2!important;min-width:0!important;min-height:620px!important
  }
  body.desktop-layout #bestiary .beta52-shell[data-laptop-view="dossier"] .beta52-dossier{display:flex!important}
  body.desktop-layout #bestiary .beta52-shell[data-laptop-view="dossier"] .beta52-right{display:none!important}
  body.desktop-layout #bestiary .beta52-shell[data-laptop-view="echo"] .beta52-dossier{display:none!important}
  body.desktop-layout #bestiary .beta52-shell[data-laptop-view="echo"] .beta52-right{
    display:grid!important;grid-template-columns:minmax(0,1.25fr) minmax(210px,.75fr)!important;
    gap:10px!important;padding:11px!important;align-items:stretch!important
  }
  body.desktop-layout #bestiary .beta52-shell[data-laptop-view="echo"] .beta52-right-stage{
    display:block!important;min-height:598px!important;height:auto!important
  }
  body.desktop-layout #bestiary .beta52-shell[data-laptop-view="echo"] .beta52-side-cards{
    display:grid!important;grid-template-columns:1fr!important;gap:9px!important;
    margin:0!important;align-content:center!important
  }
  body.desktop-layout #bestiary .beta52-shell[data-laptop-view="echo"] .beta52-side-card{
    grid-template-columns:40px minmax(0,1fr)!important;min-height:72px!important;
    padding:10px!important;text-align:left!important
  }
  body.desktop-layout #bestiary .beta52-shell[data-laptop-view="echo"] .beta52-side-icon{
    width:38px!important;height:38px!important;margin:0!important
  }
  body.desktop-layout #bestiary .beta52-filters{grid-template-columns:1fr!important}
  body.desktop-layout #bestiary .beta52-add{grid-column:auto!important}
  body.desktop-layout #bestiary .beta52-filters .select{width:100%!important;min-width:0!important;padding-right:34px!important}
}
@media(min-width:861px) and (max-width:1010px){
  body.desktop-layout #bestiary .beta52-layout{grid-template-columns:minmax(238px,258px) minmax(0,1fr)!important;gap:8px!important}
  body.desktop-layout #bestiary .beta52-shell[data-laptop-view="echo"] .beta52-right{
    grid-template-columns:minmax(0,1.15fr) minmax(196px,.85fr)!important;gap:8px!important;padding:8px!important
  }
  body.desktop-layout #bestiary .beta52-shell[data-laptop-view="echo"] .beta52-right-stage{min-height:590px!important}
  body.desktop-layout #bestiary .beta52-shell[data-laptop-view="echo"] .beta52-side-card{grid-template-columns:34px minmax(0,1fr)!important;padding:8px!important}
  body.desktop-layout #bestiary .beta52-shell[data-laptop-view="echo"] .beta52-side-icon{width:32px!important;height:32px!important}
}

/* Phone portrait already has Catalog / Dossier / Echo. This extends the same logic to a phone in landscape. */
@media (pointer:coarse) and (max-width:920px) and (max-height:600px){
  body.mobile-layout #bestiary .beta521-mobile-nav{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important}
  body.mobile-layout #bestiary .beta52-layout{display:block!important;min-height:0!important}
  body.mobile-layout #bestiary .beta52-panel{width:100%!important;min-width:0!important}
  body.mobile-layout #bestiary .beta52-shell[data-mobile-view="catalog"] .beta52-dossier,
  body.mobile-layout #bestiary .beta52-shell[data-mobile-view="catalog"] .beta52-right{display:none!important}
  body.mobile-layout #bestiary .beta52-shell[data-mobile-view="dossier"] .beta52-sidebar,
  body.mobile-layout #bestiary .beta52-shell[data-mobile-view="dossier"] .beta52-right{display:none!important}
  body.mobile-layout #bestiary .beta52-shell[data-mobile-view="echo"] .beta52-sidebar,
  body.mobile-layout #bestiary .beta52-shell[data-mobile-view="echo"] .beta52-dossier{display:none!important}
  body.mobile-layout #bestiary .beta52-shell[data-mobile-view="echo"] .beta52-right{display:grid!important}
}
@media(max-width:760px){
  body.mobile-layout #bestiary .beta52-right{padding-bottom:calc(104px + env(safe-area-inset-bottom))!important}
}
@media (pointer:coarse) and (max-width:920px) and (max-height:600px){
  body.mobile-layout #bestiary .beta52-right{padding-bottom:calc(88px + env(safe-area-inset-bottom))!important}
}
@media(prefers-reduced-motion:reduce){#bestiary .beta557-laptop-nav button{transition:none!important}}