/* PhotoTag v2.03.20 — keep the image editor visually aligned with Tag search. */

/* v2.03.34: only the middle region scrolls; header and actions stay visible. */
#editPanel{overflow:hidden;}
#editPanel .edit-panel-card{
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
  width:min(1420px,calc(100vw - 40px))!important;
  max-width:calc(100vw - 40px)!important;
  height:calc(100vh - 48px);
  height:calc(100dvh - 48px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  max-height:900px!important;
  overflow:hidden!important;
  scrollbar-gutter:auto;
}
#editPanel .edit-panel-head,
#editPanel .edit-rotation-controls,
#editPanel .edit-actions{flex:0 0 auto;}
#editPanel .edit-tag-scroll{
  flex:1 1 auto;
  min-height:0;
  min-width:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior-y:contain;
  touch-action:pan-y;
  -webkit-overflow-scrolling:touch;
}
#editPanel .edit-actions{padding-top:10px;margin-top:8px;border-top:1px solid #e8eaf0;}

#editPanel #editTagBrowser.tag-browser.compact{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-content:start;
  columns:auto;
  column-count:auto;
  max-height:none;
  overflow:visible;
  padding:10px;
  column-gap:14px;
  column-rule:1px solid #eef0f4;
}

#editPanel #editTagBrowser>.tagbranch{
  display:grid;
  grid-template-columns:124px minmax(0,1fr);
  width:100%;
  min-width:0;
  min-height:64px;
  margin:0 0 10px;
  padding:10px 7px 10px 0;
  border:1px solid #eef0f4;
  border-radius:14px;
  background:#fff!important;
  box-shadow:none!important;
  break-inside:avoid-column;
  -webkit-column-break-inside:avoid;
  page-break-inside:avoid;
}

#editPanel #editTagBrowser>.tagbranch+.tagbranch{
  border-top:1px solid #eef0f4;
}

#editPanel #editTagBrowser>.tagbranch:before{
  left:0;
  top:12px;
  bottom:12px;
}

#editPanel #editTagBrowser .rootcell{
  min-width:0;
  padding-left:9px;
  padding-right:8px;
}

#editPanel #editTagBrowser .levels{
  min-width:0;
  padding-left:8px;
  overflow:visible;
}

/* The editor uses the same selected-chip treatment as Tag search. */
body #editPanel #editTagBrowser .tagbranch.pt-selected-tag-branch,
body #editPanel #editTagBrowser .tagbranch:has(.activechip){
  background:#fff!important;
  box-shadow:none!important;
}

body #editPanel #editTagBrowser .tagbranch .chip.activechip{
  outline:3px solid rgba(17,17,17,.18)!important;
  outline-offset:2px!important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)!important;
  transform:translateY(-1px)!important;
}

@media (min-width:1101px){
  #editPanel #editTagBrowser.tag-browser.compact{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (min-width:1101px) and (max-width:1279px){
  #editPanel #editTagBrowser>.tagbranch{
    grid-template-columns:72px minmax(0,1fr);
  }

  #editPanel #editTagBrowser .chip{
    padding-left:8px;
    padding-right:8px;
  }
}

@media (max-width:760px){
  #editPanel .edit-panel-card{padding:16px;border-radius:22px;}
  #editPanel .edit-panel-head{margin-bottom:8px;}
  #editPanel .edit-panel-head h2{font-size:24px;}
  #editPanel .edit-rotation-controls{margin-top:10px;gap:8px;}
  #editPanel .edit-actions{gap:8px;}
  #editPanel .edit-actions .btn,#editPanel .edit-rotation-controls .btn{padding:10px 12px;}

  #editPanel #editTagBrowser>.tagbranch{
    grid-template-columns:72px minmax(0,1fr);
  }
}

@media (max-width:420px){
  #editPanel #editTagBrowser>.tagbranch{
    grid-template-columns:64px minmax(0,1fr);
  }
}

/* v2.03.46: use the same compact Tag cards as upload and Tag maintenance.
   Keep these rules last because older gallery bundles also contain editor rules. */
#editPanel #editTagBrowser.tag-browser.compact{
  gap:10px 12px!important;
  padding:8px!important;
  margin:0!important;
  border-radius:18px!important;
  background:#fff!important;
}
#editPanel #editTagBrowser>.tagbranch{
  grid-template-columns:112px minmax(0,1fr)!important;
  min-height:58px!important;
  margin:0!important;
  padding:8px 7px 8px 0!important;
  border:1px solid #e6e8ee!important;
  border-radius:16px!important;
  box-shadow:0 5px 16px rgba(27,36,55,.025)!important;
}
#editPanel #editTagBrowser>.tagbranch:before{top:10px!important;bottom:10px!important}
#editPanel #editTagBrowser .rootcell{padding-left:9px!important;padding-right:9px!important}
#editPanel #editTagBrowser .levels{padding-left:9px!important}
#editPanel #editTagBrowser .taglevel{min-height:28px!important;gap:6px!important}
#editPanel #editTagBrowser .taglevel+.taglevel{
  margin-top:7px!important;
  padding:7px 7px 5px 20px!important;
}
#editPanel #editTagBrowser .taglevel+.taglevel:before{left:4px!important;top:7px!important}
#editPanel #editTagBrowser .chip{
  padding:5px 9px!important;
  border-radius:8px!important;
  font-size:12px!important;
  line-height:1.25!important;
}
#editPanel #editSelected.selected{gap:6px!important;margin:7px 0 10px!important}

@media (min-width:800px){
  #editPanel #editTagBrowser.tag-browser.compact{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media (min-width:800px) and (max-width:1279px){
  #editPanel #editTagBrowser>.tagbranch{grid-template-columns:72px minmax(0,1fr)!important}
}
@media (max-width:799px){
  #editPanel #editTagBrowser.tag-browser.compact{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
  }
  #editPanel #editTagBrowser>.tagbranch{grid-template-columns:72px minmax(0,1fr)!important}
}
@media (max-width:420px){
  #editPanel #editTagBrowser.tag-browser.compact{padding:6px!important}
  #editPanel #editTagBrowser>.tagbranch{
    grid-template-columns:64px minmax(0,1fr)!important;
    padding-right:5px!important;
  }
  #editPanel #editTagBrowser .rootcell{padding-left:6px!important;padding-right:6px!important}
  #editPanel #editTagBrowser .levels{padding-left:7px!important}
  #editPanel #editTagBrowser .chip{font-size:11px!important;padding:5px 7px!important}
}