/* BrawlTier Studio: paneles acoplados con scroll independiente. */

@media (min-width: 621px) {
  html:has(body #creator-view:not(.hidden)),
  body:has(#creator-view:not(.hidden)) {
    height: 100% !important;
    overflow: hidden !important;
  }
  body:has(#creator-view:not(.hidden)) { height: 100vh !important; min-height: 0 !important; }
  main:has(#creator-view:not(.hidden)) {
    width: 100% !important; max-width: none !important;
    height: calc(100vh - 122px) !important; min-height: 0 !important; max-height: none !important;
    margin: 0 !important; padding: 0 !important; overflow: hidden !important;
  }
  #creator-view:not(.hidden) {
    display: flex !important; flex-direction: column !important;
    width: 100% !important; height: 100% !important; min-height: 0 !important; max-height: 100% !important;
    padding: 8px 10px 10px !important; overflow: hidden !important;
  }
  #creator-view:not(.hidden) .creator-header { flex: 0 0 auto !important; }
  #creator-view:not(.hidden) .creator-workspace {
    display: grid !important; flex: 1 1 auto !important;
    height: auto !important; min-height: 0 !important; max-height: 100% !important; overflow: hidden !important;
    grid-template-columns: 46px minmax(195px, clamp(205px, 19vw, 290px)) minmax(280px, 1fr) minmax(220px, clamp(225px, 20vw, 315px)) !important;
    grid-template-rows: auto minmax(0, 1fr) minmax(155px, 24vh) !important;
    grid-template-areas:
      "categories assets toolbar layers"
      "categories assets canvas layers"
      "categories assets properties properties" !important;
    align-items: stretch !important; gap: 7px !important; padding-top: 8px !important;
  }
  #creator-view:not(.hidden) .creator-left-panel,
  #creator-view:not(.hidden) .creator-right-panel { display: contents !important; }

  /* Categories, resources and layers scroll internally without changing the grid rows. */
  #creator-view:not(.hidden) .gacha-tabs-bar {
    grid-area: categories !important; align-self: stretch !important; width: 100% !important; height: 100% !important;
    min-height: 0 !important; max-height: 100% !important; overflow-x: hidden !important; overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }
  #creator-view:not(.hidden) .gacha-options-container {
    grid-area: assets !important; display: flex !important; flex-direction: column !important;
    width: 100% !important; height: 100% !important; min-height: 0 !important; max-height: 100% !important; overflow: hidden !important;
  }
  #creator-view:not(.hidden) .options-header-row { flex: 0 0 auto !important; min-height: 34px !important; }
  #creator-view:not(.hidden) .gacha-grid {
    flex: 1 1 0 !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important;
    overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain !important; scrollbar-gutter: stable;
  }
  #creator-view:not(.hidden) .pin-editor-toolbar {
    flex-wrap: nowrap !important; min-width: 0 !important; max-width: 100% !important;
    overflow-x: auto !important; overflow-y: hidden !important; overscroll-behavior-x: contain !important;
    white-space: nowrap !important; scrollbar-width: thin;
  }
  #creator-view:not(.hidden) .canvas-container {
    grid-area: canvas !important; position: relative !important; width: 100% !important; height: 100% !important;
    min-width: 0 !important; min-height: 0 !important; max-height: none !important; overflow: auto !important;
    overscroll-behavior: contain !important; scrollbar-gutter: stable;
  }
  #creator-view:not(.hidden) .layers-manager-container {
    grid-area: layers !important; display: flex !important; flex-direction: column !important;
    height: 100% !important; min-height: 0 !important; max-height: 100% !important; overflow: hidden !important;
  }
  #creator-view:not(.hidden) .layers-list {
    flex: 1 1 0 !important; min-height: 0 !important; max-height: none !important; overflow-y: auto !important; overscroll-behavior: contain !important;
  }
  #creator-view:not(.hidden) .element-properties-box {
    grid-area: properties !important; min-height: 0 !important; max-height: 100% !important;
    overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain !important;
  }
  #creator-view:not(.hidden) .canvas-container::before { top: 47px !important; left: 12px !important; }
}

@media (min-width: 851px) and (max-width: 1250px) {
  main:has(#creator-view:not(.hidden)) { height: calc(100vh - 150px) !important; }
  #creator-view:not(.hidden) .creator-workspace {
    grid-template-columns: 40px minmax(160px, .78fr) minmax(230px, 1.2fr) minmax(190px, .82fr) !important;
    gap: 6px !important;
  }
}
@media (min-width: 621px) and (max-width: 850px) {
  /* En ventanas estrechas dejamos que la página se desplace, pero el diseño del
     editor mantiene una altura fija: abrir una categoría no reubica el lienzo. */
  html:has(body #creator-view:not(.hidden)),
  body:has(#creator-view:not(.hidden)) { height: auto !important; overflow-x: hidden !important; overflow-y: auto !important; }
  main:has(#creator-view:not(.hidden)) { height: auto !important; min-height: 0 !important; overflow: visible !important; }
  #creator-view:not(.hidden) { height: 760px !important; min-height: 760px !important; max-height: none !important; padding: 6px !important; overflow: hidden !important; }
  #creator-view:not(.hidden) .creator-workspace {
    flex: 1 1 auto !important; height: auto !important;
    grid-template-columns: 36px minmax(135px, .72fr) minmax(190px, 1.22fr) minmax(155px, .82fr) !important;
    grid-template-rows: auto minmax(0, 1fr) minmax(150px, 190px) !important; gap: 5px !important;
  }
  #creator-view:not(.hidden) .pin-editor-toolbar { padding: 4px !important; }
  #creator-view:not(.hidden) .pin-editor-toolbar .btn { padding: 4px 6px !important; }
}

/* Teléfonos: el layout puede crecer, pero los paneles largos conservan altura fija. */
@media (max-width: 620px) {
  html:has(body #creator-view:not(.hidden)), body:has(#creator-view:not(.hidden)) {
    height: auto !important; min-height: 100% !important; overflow-x: hidden !important; overflow-y: auto !important;
  }
  body:has(#creator-view:not(.hidden)) { height: auto !important; }
  main:has(#creator-view:not(.hidden)) {
    width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important;
    padding: 0 !important; overflow: visible !important;
  }
  #creator-view:not(.hidden) {
    height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; padding: 6px !important;
  }
  #creator-view:not(.hidden) .creator-workspace {
    display: grid !important; flex: none !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto 240px auto minmax(320px, 56vh) 240px 205px !important;
    grid-template-areas: "categories" "assets" "toolbar" "canvas" "layers" "properties" !important; gap: 7px !important;
  }
  #creator-view:not(.hidden) .gacha-tabs-bar {
    grid-area: categories !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
    justify-content: flex-start !important; width: 100% !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important;
    overflow-x: auto !important; overflow-y: hidden !important; overscroll-behavior-x: contain !important;
  }
  #creator-view:not(.hidden) .gacha-options-container {
    grid-area: assets !important; height: 240px !important; min-height: 240px !important; max-height: 240px !important; overflow: hidden !important;
  }
  #creator-view:not(.hidden) .gacha-grid { min-height: 0 !important; max-height: none !important; overflow-y: auto !important; overscroll-behavior: contain !important; }
  #creator-view:not(.hidden) .pin-editor-toolbar { grid-area: toolbar !important; flex-wrap: nowrap !important; max-width: 100% !important; overflow-x: auto !important; overflow-y: hidden !important; }
  #creator-view:not(.hidden) .canvas-container { grid-area: canvas !important; height: 56vh !important; min-height: 320px !important; max-height: 620px !important; overflow: auto !important; }
  #creator-view:not(.hidden) .layers-manager-container { height: 240px !important; min-height: 240px !important; max-height: 240px !important; }
  #creator-view:not(.hidden) .layers-list { max-height: none !important; min-height: 0 !important; overflow-y: auto !important; }
  #creator-view:not(.hidden) .element-properties-box { min-height: 205px !important; max-height: none !important; overflow-y: auto !important; }
}

/* Control de líneas visible y fuera de la barra superior, que puede desplazarse horizontalmente. */
#creator-view .pin-guides-floating-control {
  position: absolute; z-index: 31; top: 8px; left: 8px; display: flex; align-items: center;
  max-width: calc(100% - 18px); pointer-events: none;
}
#creator-view #pinGuidesBtn {
  pointer-events: auto; min-height: 30px; padding: 6px 10px; color: #f3f7fc;
  background: rgba(37, 62, 91, .96); border: 1px solid #89b8eb; border-radius: 6px;
  box-shadow: 0 4px 13px rgba(0,0,0,.3); font-size: 11px; font-weight: 750; white-space: nowrap;
}
#creator-view #pinGuidesBtn[aria-pressed="false"] { color: #d0d5dc; background: rgba(35, 38, 43, .96); border-color: #666e79; }
#creator-view #pinGuidesBtn:hover { filter: brightness(1.12); }
#creator-view .canvas-container::before { top: 47px; left: 12px; }
@media (max-width: 620px) {
  #creator-view .pin-guides-floating-control { top: 5px; left: 5px; }
  #creator-view .canvas-container::before { top: 44px; }
}


/* Área de trabajo ampliada: el lienzo usa la altura disponible y se presenta
   como un panel casi cuadrado, mientras los docks permanecen a los lados. */
@media (min-width: 851px) {
  #creator-view:not(.hidden) .creator-workspace {
    grid-template-columns: 42px minmax(175px, clamp(190px, 15vw, 250px)) minmax(0, 1fr) minmax(200px, clamp(215px, 16vw, 280px)) !important;
    grid-template-rows: auto minmax(0, 1fr) minmax(135px, 18vh) !important;
    grid-template-areas:
      "categories assets toolbar layers"
      "categories assets canvas layers"
      "categories assets canvas properties" !important;
    gap: 7px !important;
  }
  #creator-view:not(.hidden) .canvas-container {
    width: min(100%, calc(100vh - 260px)) !important;
    height: min(100%, calc(100vh - 260px)) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    justify-self: center !important;
    align-self: center !important;
    padding: 34px !important;
    border-radius: 7px !important;
  }
}

@media (min-width: 621px) and (max-width: 850px) {
  #creator-view:not(.hidden) .creator-workspace {
    grid-template-columns: 32px minmax(112px, .62fr) minmax(220px, 1.4fr) minmax(132px, .70fr) !important;
    grid-template-rows: auto minmax(0, 1fr) minmax(125px, 17vh) !important;
    grid-template-areas:
      "categories assets toolbar layers"
      "categories assets canvas layers"
      "categories assets canvas properties" !important;
    gap: 5px !important;
  }
  #creator-view:not(.hidden) .canvas-container {
    width: min(100%, calc(100vh - 270px)) !important;
    height: min(100%, calc(100vh - 270px)) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    justify-self: center !important;
    align-self: center !important;
    padding: 28px !important;
  }
}

@media (max-width: 620px) {
  /* En pantallas estrechas el panel conserva un área amplia y cercana al cuadrado. */
  #creator-view:not(.hidden) .canvas-container {
    width: 100% !important;
    height: min(72vw, 58vh) !important;
    min-height: 300px !important;
    max-height: 620px !important;
    aspect-ratio: auto !important;
    padding: 28px !important;
    justify-self: stretch !important;
  }
}