/* Espaço de trabalho do Tier Constructor: banco e rows simultâneos, sem toolbar fixa.
   Esta folha complementa os estilos do construtor sem alterar a exportação do canvas. */

.tier-constructor-app{max-width:1820px}
.tier-constructor-app .topbar{
  position:static;
  top:auto;
  z-index:12;
  box-shadow:none;
  backdrop-filter:none;
  background:#0c1424;
}
.tier-workspace-controls{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  padding:12px 15px;
  background:#0d1322;
  border:1px solid #21324f;
  border-radius:12px;
}
.tier-bank-layout-control{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.tier-workspace-label{font-weight:800;color:#adc5e8;font-size:11px;letter-spacing:.07em}
.tier-bank-layout-control .segmented{display:flex;gap:4px;border:1px solid #2d3c58;padding:4px;border-radius:9px;background:#080e1b}
.tier-bank-layout-control .segmented button{border:0;border-radius:6px;background:transparent;color:#a8b7d5;font-size:12px;font-weight:700;padding:8px 13px}
.tier-bank-layout-control .segmented button[aria-pressed="true"]{background:#6e7cff;color:#fff}
.tier-clean-toggle{border-color:#354665;background:transparent;color:#dbe3f7;padding:10px 14px;font-size:12px;font-weight:750;margin-left:auto}
.tier-clean-toggle[aria-pressed="true"]{background:#d1daff;border-color:#d1daff;color:#10192b}
.tier-layout-help{font-size:12px;color:#98a9c7;display:none}

.tier-editor-layout{
  display:grid;
  grid-template-columns:clamp(230px,23vw,320px) minmax(0,1fr);
  align-items:start;
  gap:12px;
  min-width:0;
}
.tier-editor-layout>.panel{min-width:0}
.tier-board-panel{grid-column:2;grid-row:1;overflow-x:auto;overscroll-behavior-x:contain}
.tier-bank-panel{
  grid-column:1;
  grid-row:1;
  display:flex;
  flex-direction:column;
  gap:0;
  align-self:start;
  position:sticky;
  top:70px;
  z-index:19;
  max-height:calc(100dvh - 84px);
  padding:12px;
}
.tier-bank-panel .bank-title{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:5px;margin-bottom:10px}
.tier-bank-panel .bank-title h2{font-size:14px;line-height:1.3}
.tier-bank-panel .count{font-size:11px;white-space:nowrap}
.tier-bank-panel #imageBank{
  display:flex;
  flex-wrap:wrap;
  align-content:flex-start;
  gap:8px;
  padding:8px;
  min-height:110px;
  max-height:calc(100dvh - 220px);
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  border-color:#31415f;
  background:#0a1020;
}
.tier-editor-layout[data-bank-layout="left"] #imageBank .image-card{
  flex:0 0 calc((100% - 8px)/2);
  width:calc((100% - 8px)/2);
  max-width:112px;
  height:auto;
  aspect-ratio:1;
}
.tier-editor-layout[data-bank-layout="left"] #imageBank .image-card img{width:100%;height:100%}
.tier-bank-panel .empty-hint{font-size:12px;line-height:1.5;text-align:left}
.tier-bank-panel .trash-panel{flex:none;margin-top:10px}
.tier-editor-layout[data-bank-layout="bottom"]{grid-template-columns:minmax(0,1fr)}
.tier-editor-layout[data-bank-layout="bottom"] .tier-board-panel{grid-column:1;grid-row:1}
.tier-editor-layout[data-bank-layout="bottom"] .tier-bank-panel{grid-column:1;grid-row:2;position:static;max-height:none}
.tier-editor-layout[data-bank-layout="bottom"] #imageBank{max-height:260px}
.tier-editor-layout[data-bank-layout="bottom"] #imageBank .image-card{flex:0 0 var(--image-size);width:var(--image-size);height:var(--image-size);max-width:none;aspect-ratio:auto}
.tier-editor-layout .tier-board-panel .tier-export{margin:0 auto}
.tier-clean-mode .row-delete-button,
.tier-clean-mode .row-tools,
.tier-clean-mode .row-color,
.tier-clean-mode .image-card .card-actions,
.tier-clean-mode .row-height-control{display:none!important}
.tier-clean-mode .row-name{cursor:default;outline:none}
.tier-clean-mode .row-label:hover,.tier-clean-mode .image-card:hover{filter:none}

@media(max-width:960px){
  .tier-constructor-app .topbar{position:static}
  .tier-workspace-controls{padding:10px;gap:10px}
  .tier-bank-layout-control{display:none}
  .tier-layout-help{display:block;flex:1 1 100%;order:3}
  .tier-clean-toggle{margin-left:0;width:100%}
  .tier-editor-layout,.tier-editor-layout[data-bank-layout="bottom"]{display:flex;flex-direction:column;gap:8px}
  .tier-editor-layout .tier-bank-panel,
  .tier-editor-layout[data-bank-layout="bottom"] .tier-bank-panel{
    order:0;
    width:100%;
    position:sticky;
    top:58px;
    z-index:28;
    max-height:none;
    padding:9px;
    border-radius:10px;
    background:#0c172a;
    box-shadow:0 10px 22px rgba(0,0,0,.45);
  }
  .tier-editor-layout .tier-board-panel,
  .tier-editor-layout[data-bank-layout="bottom"] .tier-board-panel{order:1;width:100%;min-width:0}
  .tier-bank-panel .bank-title{margin-bottom:5px}
  .tier-bank-panel .bank-title h2{font-size:13px}
  .tier-editor-layout .tier-bank-panel #imageBank{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    align-items:center;
    align-content:center;
    max-height:104px;
    min-height:96px;
    height:96px;
    padding:8px;
    gap:10px;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:thin;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x;
  }
  .tier-editor-layout #imageBank .image-card,
  .tier-editor-layout[data-bank-layout="bottom"] #imageBank .image-card{
    flex:0 0 76px;
    width:76px;
    height:76px;
    max-width:76px;
    aspect-ratio:1;
  }
  .tier-bank-panel .trash-panel{margin-top:5px}
  .tier-bank-panel .trash-panel>summary{padding:5px 9px;font-size:11px}
  .tier-bank-panel .mobile-drag-tip{display:none}
  .tier-board-panel .tier-board{overflow:visible}
  .tier-board-panel .tier-row>.row-label{position:sticky;left:0;z-index:4}
  .tier-board-panel{scrollbar-width:thin}
  body.settings-open .tier-constructor-app{padding-right:10px}
}
@media(max-width:600px){
  .tier-constructor-app{padding:8px}
  .tier-constructor-app .topbar{margin-bottom:8px}
  .tier-constructor-app .brand{font-size:14px}
  .tier-constructor-app .topbar-group{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tier-constructor-app .topbar-group>#addImagesBtn,
  .tier-constructor-app .topbar-group>#addRowBtn,
  .tier-constructor-app .topbar-group>#undoBtn,
  .tier-constructor-app .topbar-group>#redoBtn{grid-column:auto;width:100%}
  .tier-constructor-app .topbar-group>#undoBtn,
  .tier-constructor-app .topbar-group>#redoBtn{min-height:38px}
  .tier-constructor-app .topbar-group>.quick-position{padding:6px 8px}
  .tier-constructor-app .topbar-group>.project-menu{width:100%}
  .tier-constructor-app .caption-panel{padding:10px}
  .tier-workspace-controls{padding:9px}
  .tier-workspace-controls .tier-clean-toggle{padding:9px}
  .tier-board-panel{padding:8px 8px 12px}
  .tier-board-panel .tier-export{max-width:none}
  .tier-editor-layout .tier-bank-panel,
  .tier-editor-layout[data-bank-layout="bottom"] .tier-bank-panel{top:56px}
  #settingsDialog.settings-drawer{width:100vw;max-width:100vw}
}
@media(prefers-reduced-motion:reduce){
  .tier-editor-layout .image-card,.tier-workspace-controls button{transition:none}
}

/* Legendas independentes das fotos: mesma proporção na tier e na imagem exportada. */
.tier-row .image-card.has-nameplate{
  height:calc(var(--image-size) + var(--nameplate-height, 28px));
  overflow:hidden;
  display:flex;
  flex-direction:column;
  background:transparent;
}
.tier-row .image-card.has-nameplate>img{
  display:block;
  width:100%;
  height:var(--image-size);
  min-height:var(--image-size);
  flex:0 0 var(--image-size);
  object-fit:contain;
}
.tier-row .image-card .tier-image-nameplate{
  display:block;
  width:100%;
  flex:0 0 var(--nameplate-height, 28px);
  height:var(--nameplate-height, 28px);
  line-height:var(--nameplate-height, 28px);
  padding:0 3px;
  box-sizing:border-box;
  text-align:center;
  font-family:Inter,Arial,sans-serif;
  font-size:clamp(9px, calc(var(--image-size) * .135), 15px);
  font-weight:900;
  letter-spacing:.005em;
  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
  user-select:none;
  pointer-events:none;
}
.tier-nameplate-help{font-size:12px;line-height:1.55;color:#a8b7d5;margin:10px 0}
#editorNameplateText{min-width:0;max-width:100%;width:100%;padding:10px}
#editorNameplateOwnColors{width:20px;height:20px;accent-color:#697cfc;cursor:pointer}
#editorNameplateBg:disabled,#editorNameplateColor:disabled{opacity:.4;cursor:not-allowed}
.tier-editor-nameplate-sample{min-height:32px;max-width:100%;padding:8px 12px;border-radius:6px;box-sizing:border-box;text-align:center;font-size:15px;font-weight:900;line-height:1.4;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
@media(max-width:960px){
  .tier-row .image-card.has-nameplate{height:calc(var(--image-size) + var(--nameplate-height, 28px))}
  .tier-row .image-card.has-nameplate>img{height:var(--image-size)}
  .tier-editor-layout #imageBank .image-card.has-nameplate{height:76px}
}

/* Editor de imagem: header e ações fixas no drawer; só a área de opções rola.
   Impede que o preview ou o rodapé cubram campos, tanto no desktop quanto no mobile. */
#imageEditorDialog.editor-drawer{
  box-sizing:border-box;
  overflow:hidden;
  height:100dvh;
  max-height:100dvh;
  overscroll-behavior:contain;
}
#imageEditorDialog.editor-drawer .dialog-inner{
  min-height:0;
  height:100%;
  box-sizing:border-box;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:8px;
  padding:12px;
}
#imageEditorDialog.editor-drawer .dialog-header{
  position:relative;
  top:auto;
}
#imageEditorDialog.editor-drawer .editor-layout{
  display:flex;
  flex-direction:column;
  min-height:0;
  min-width:0;
  overflow:hidden;
  gap:8px;
}
#imageEditorDialog.editor-drawer .editor-preview-panel{
  position:relative;
  top:auto;
  display:grid;
  grid-template-columns:minmax(0,170px) minmax(0,1fr);
  align-items:center;
  gap:12px;
  min-width:0;
  min-height:0;
  flex:0 0 auto;
  padding:8px;
}
#imageEditorDialog.editor-drawer .editor-preview-panel canvas{
  display:block;
  width:100%;
  max-width:170px;
  height:auto;
  max-height:170px;
  object-fit:contain;
}
#imageEditorDialog.editor-drawer .editor-preview-help{
  margin:0;
  max-height:170px;
  overflow:auto;
  font-size:11px;
  line-height:1.5;
}
#imageEditorDialog.editor-drawer .editor-controls{
  display:block;
  flex:1 1 0;
  height:0;
  max-height:none;
  min-height:0;
  min-width:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#526584 #131b2d;
  padding:0 6px 22px 0;
}
#imageEditorDialog.editor-drawer .editor-tabbar{
  position:sticky;
  top:0;
  z-index:8;
  display:flex;
  flex-wrap:nowrap;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
  background:#15171c;
  padding:6px 0;
}
#imageEditorDialog.editor-drawer .editor-tabbar button{
  flex:0 0 auto;
  white-space:nowrap;
}
#imageEditorDialog.editor-drawer .editor-section{
  min-width:0;
  padding-bottom:10px;
}
#imageEditorDialog.editor-drawer .editor-section .setting,
#imageEditorDialog.editor-drawer .editor-section .setting-control{
  min-width:0;
}
#imageEditorDialog.editor-drawer .modal-actions{
  position:relative;
  bottom:auto;
  z-index:9;
  flex:none;
  margin:0;
  padding:10px 0 2px;
  border-top:1px solid #2e3749;
  background:#15171c;
}
.tier-editor-advanced{
  margin-top:16px;
  padding:0;
  border:1px solid #303b54;
  border-radius:9px;
  overflow:visible;
}
.tier-editor-advanced>summary{
  padding:12px;
  cursor:pointer;
  color:#d5dff4;
  background:#20283a;
  font-weight:750;
  line-height:1.5;
  font-size:13px;
  border-radius:8px;
}
.tier-editor-advanced[open]>summary{border-radius:8px 8px 0 0}
.tier-editor-advanced .tier-editor-advanced-body{
  padding:12px 10px;
  display:grid;
  gap:12px;
}
.tier-editor-advanced .tier-editor-advanced-body .setting{
  min-width:0;
}
@media(max-width:760px){
  #imageEditorDialog.editor-drawer .dialog-inner{padding:10px;gap:6px}
  #imageEditorDialog.editor-drawer .editor-preview-panel{
    grid-template-columns:minmax(0,115px) minmax(0,1fr);
    padding:6px;
    gap:9px;
  }
  #imageEditorDialog.editor-drawer .editor-preview-panel canvas{
    max-width:115px;
    max-height:115px;
  }
  #imageEditorDialog.editor-drawer .editor-preview-help{
    max-height:115px;
    font-size:10px;
  }
  #imageEditorDialog.editor-drawer .editor-controls{
    overflow-y:auto;
    max-height:none;
  }
}
@media(max-height:590px){
  #imageEditorDialog.editor-drawer .editor-preview-panel{
    grid-template-columns:minmax(0,88px) minmax(0,1fr);
    padding:4px;
  }
  #imageEditorDialog.editor-drawer .editor-preview-panel canvas{
    max-width:88px;
    max-height:88px;
  }
}

/* Tipografia ajustável por imagem com foco em nomes longos. */
.tier-editor-nameplate-sample{
  min-height:28px;
  line-height:1.4;
  transition:font-size .1s ease;
}
.tier-nameplate-default-btn{
  justify-self:start;
  width:max-content;
  max-width:100%;
  margin:4px 0 0;
  padding:7px 10px;
  border:1px solid #3b4d6c;
  border-radius:7px;
  background:#1b253a;
  color:#c6d9ff;
  font-size:12px;
}
.tier-nameplate-default-btn:disabled{
  opacity:.55;
  cursor:default;
}
#editorNameplateFontSizeRange, #editorNameplateFontSizeNumber{
  min-width:0;
}