/* Панелі шарів */

.panel{

  position:fixed; bottom:16px; width:44px; background:#fff; 

  border:2px solid #ffcc00; border-radius:6px; box-shadow:0 2px 6px rgba(0,0,0,.3);

  overflow:hidden; transition:width .3s ease, max-height .3s ease, transform .3s ease; z-index:1200;

  display: flex; flex-direction: column;

  max-height: 160px; /* Висота для ~3 елементів */

}

.panel[hidden]{display:none!important}



/* Клас для розкритої панелі */

.panel.expanded {

  width:300px;

  max-height: calc(100vh - 100px); 

  overflow: visible;

}



.panel.left{left:16px}

.panel.right{right:16px}



.panel-header{

  height:40px; min-height: 40px; display:flex; align-items:center; justify-content:space-between;

  padding:0 8px; background:#fffbe6; font-weight:700; z-index: 2;

}

.panel-title{display:flex;align-items:center;justify-content:center;min-width:20px;line-height:1}

.panel-title .layer-title-icon{width:20px;height:20px;fill:currentColor}

.panel-controls{display:flex;gap:4px;align-items:center}



/* Список шарів */

.overlay-list {

  padding:6px; flex: 1;

  overflow-y: hidden; 

  overflow-x: hidden; 

  display: flex;

  flex-direction: column;

}



/* Елемент списку (Контейнер) */

.overlay-item {

  display: flex; 

  flex-direction: column;

  margin-bottom: 6px; 

  padding: 4px; 

  border-radius: 4px; 

  transition: background 0.2s;

  border: 1px solid transparent;

}

.overlay-item.highlight{background:#fff3bf}

.overlay-item.user-measure-item{
  background:#f6f7f9;
  border-color:transparent;
}

.overlay-item.user-measure-item .grip{
  color:#8aa9c2;
}

.overlay-item.user-measure-item.is-active{
  background:#eef8ff;
  border-color:#b8ddff;
}

.user-layer-separator{
  border-top:1px solid #b8ddff;
  margin:2px 0 6px;
  min-height:0;
}

.user-layer-separator[hidden]{display:none!important}

.overlay-item.dragging { opacity: 0.5; background: #eee; }



/* Заголовок елемента (верхній рядок) */

.overlay-header {

  display: flex;

  align-items: center;

  gap: 8px;

  width: 100%;

}



/* Стиль для назви шару - обрізання тексту */

.overlay-label {

  flex: 1;

  font-size: 12px;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  cursor: pointer;

}



/* Налаштування (нижній рядок, прихований) */

.overlay-settings {

  display: none;

  padding: 8px 0 4px 28px;

  width: 100%;

  box-sizing: border-box;

}

.overlay-settings.visible { display: block; }



.grip{cursor:grab;font-size:14px;user-select:none;color:#888; min-width: 10px; touch-action:none;}

.grip:hover{cursor:move;color:#000}



.layer-symbol {

  width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.2); flex-shrink: 0;

}

.layer-symbol[hidden] { display:none!important; }



.overlay-item input[type=checkbox] { cursor: pointer; margin: 0; }

.overlay-item input[type=range]{width: 100%; cursor:pointer; height: 6px;}



.opacity-toggle-btn {

  margin-left: auto;

  cursor: pointer;

  background: none;

  border: none;

  color: #aaa;

  padding: 4px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 4px;

  flex-shrink: 0;

}

.opacity-toggle-btn:hover { color: #000; background: #f0f0f0; }

.opacity-toggle-btn svg { width: 16px; height: 16px; fill: currentColor; }

.opacity-toggle-btn.active { color: #d4a000; background: #fffbe6; }

.user-layer-download-btn,
.user-layer-delete-btn {
  margin-left: auto;
  cursor: pointer;
  background: none;
  border: none;
  color: #777;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  flex-shrink: 0;
}

.user-layer-download-btn { margin-left: 0; }

.user-layer-download-btn:hover { color:#006bb6; background:#e7f3ff; }

.user-layer-delete-btn:hover { color:#ff4d4f; background:#fff0f0; }

.user-layer-download-btn svg,
.user-layer-delete-btn svg { width:16px; height:16px; fill:currentColor; }



/* Loader */

.layer-loader {

  width: 14px; height: 14px; border: 2px solid #f3f3f3; border-top: 2px solid #ffcc00; border-radius: 50%;

  animation: spin 1s linear infinite; display: none;

  flex-shrink: 0;

}

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }



/* Кнопки в хедері панелі */

.panel-btn{width:28px;height:28px;border:1px solid #ffcc00;border-radius:4px;cursor:pointer;background:#fff;display:flex;align-items:center;justify-content:center;font-weight:bold;color:#d4a000;padding: 0;position:relative;}

.panel-btn:hover{background:#fffbe6;color:#000}

.panel-btn svg {width: 18px; height: 18px; fill: currentColor;}

.layer-panel-pin.active{background:#fffbe6;color:#000}

.layer-download-all[hidden]{display:none!important}

.panel:not(.has-scrollable-content):not(.pin-available) .layer-panel-pin{display:none!important}

.layer-panel-close{font-size:16px;line-height:1}

.layer-panel-close:hover{color:#ff4d4f;border-color:#ff4d4f;background:#fff0f0}

.panel:not(.expanded) .panel-btn{display:none} 

.panel:not(.expanded) .panel-header{justify-content:center}

.panel.pinned,
.panel.pinned.expanded{
  width:300px;
  max-height:calc(100vh - 100px);
  overflow:visible;
}

body.curtain-mode-disabled .panel.right{
  width:300px;
  max-height:40px;
  overflow:hidden;
}

body.curtain-mode-disabled .panel.right.expanded,
body.curtain-mode-disabled .panel.right.pinned{
  max-height:calc(100vh - 100px);
  overflow:visible;
}

.panel.pinned .panel-btn,
body.curtain-mode-disabled .panel.right .panel-btn{
  display:flex;
}

.panel.pinned .panel-header,
body.curtain-mode-disabled .panel.right .panel-header{
  justify-content:space-between;
}

.panel.pinned .overlay-list,
body.curtain-mode-disabled .panel.right.expanded .overlay-list,
body.curtain-mode-disabled .panel.right.pinned .overlay-list{
  overflow-y:auto;
}

body.curtain-mode-disabled .panel.right:not(.expanded):not(.pinned) .overlay-list{
  display:none;
  overflow-y:hidden;
}

@media (max-width: 700px) {
  body.curtain-mode-disabled .panel.right:not(.expanded){
    width:38px;
    height:38px;
    max-height:38px;
    overflow:hidden;
  }

  body.curtain-mode-disabled .panel.right.expanded{
    width:300px;
    max-width:calc(100vw - 24px);
    max-height:calc(100vh - 96px);
    overflow:visible;
  }

  body.curtain-mode-disabled .panel.right:not(.expanded) .panel-btn{
    display:none;
  }

  body.curtain-mode-disabled .panel.right:not(.expanded) .panel-header{
    justify-content:center;
  }

  body.curtain-mode-disabled .panel.right:not(.expanded) .overlay-list{
    display:none;
  }
}

body.compact-layer-panels.curtain-mode-disabled .panel.right:not(.expanded){
  width:38px;
  height:38px;
  max-height:38px;
  overflow:hidden;
}

body.compact-layer-panels.curtain-mode-disabled .panel.right.expanded{
  width:300px;
  max-width:calc(100vw - 24px);
  max-height:calc(100vh - 96px);
  overflow:visible;
}

body.compact-layer-panels.curtain-mode-disabled .panel.right:not(.expanded) .panel-btn{
  display:none;
}

body.compact-layer-panels.curtain-mode-disabled .panel.right:not(.expanded) .panel-header{
  justify-content:center;
}

body.compact-layer-panels.curtain-mode-disabled .panel.right:not(.expanded) .overlay-list{
  display:none;
}

body.compact-layer-panels .panel:not(.expanded){
  bottom:12px;
  width:38px;
  height:38px;
  max-height:38px;
  overflow:hidden;
}

body.compact-layer-panels .panel.expanded{
  bottom:12px;
  width:300px;
  max-width:calc(100vw - 24px);
  max-height:calc(100vh - 96px);
  overflow:visible;
}

@media (min-width: 701px) and (hover: hover) and (pointer: fine) {
  body.curtain-mode-active .panel.expanded .layer-panel-pin,
  body.curtain-mode-active .panel.pinned .layer-panel-pin{
    display:flex!important;
  }
}