/* ============================================================
   ДОК-ПАНЕЛИ: перетаскивание, стыковка слева/справа, плавающий режим
   ============================================================ */
.side.dock{position:relative;width:246px;transition:width .12s ease}
.side.dock.right{border-right:0;border-left:1px solid var(--border)}
.side.dock.empty{display:none}
body.dragging .side.dock.empty{
  display:flex;width:64px;background:transparent;border-color:transparent;
}

/* Раскладка палитр внутри дока.
   Одна палитра занимает всю высоту; если их несколько, верхние делят
   место поровну. Проверяем именно наличие следующей палитры: в конце
   дока лежит ещё и полоска изменения ширины, поэтому :last-child здесь
   обманывает. */
.side.dock > .pal{flex:1;min-height:0;max-height:none}
.side.dock > .pal:has(~ .pal){flex:none;max-height:52%}

/* Заголовок-ручка */
.palette-head{cursor:grab;touch-action:none;user-select:none;gap:6px}
.pal.dragging .palette-head{cursor:grabbing}
.pal-title{
  display:flex;align-items:center;gap:5px;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pal-title .grip{color:var(--muted);opacity:.7;font-size:11px;letter-spacing:-1px}

/* Плавающая палитра */
.pal.floating{
  position:fixed;z-index:90;
  min-width:210px;min-height:150px;max-height:none;
  background:var(--palette-bg);
  border:1px solid var(--border);border-radius:6px;
  box-shadow:0 10px 30px rgba(0,0,0,.34);
  overflow:hidden;
}
.pal.floating .palette-head{border-radius:5px 5px 0 0}
.pal.dragging{opacity:.92}
.pal.hidden{display:none}

/* Уголок изменения размера */
.pal-resize{display:none}
.pal.floating .pal-resize{
  display:block;position:absolute;right:0;bottom:0;width:15px;height:15px;
  cursor:nwse-resize;z-index:3;
  background:
    linear-gradient(135deg,transparent 46%,var(--muted) 46%,var(--muted) 54%,transparent 54%),
    linear-gradient(135deg,transparent 70%,var(--muted) 70%,var(--muted) 78%,transparent 78%);
  opacity:.65;
}

/* Граница дока — изменение ширины */
.dock-edge{position:absolute;top:0;bottom:0;width:6px;z-index:6;cursor:col-resize}
.side.dock.left .dock-edge{right:-3px}
.side.dock.right .dock-edge{left:-3px}
.dock-edge:hover,.dock-edge.on{background:var(--accent);opacity:.4}

/* Подсветка зоны стыковки */
#dropHint{
  position:fixed;z-index:88;display:none;pointer-events:none;
  border:2px dashed var(--accent);border-radius:6px;
  background:rgba(20,130,128,.16);
}
#dropHint.on{display:block}

/* Файл тянут на окно: рамка по всей рабочей области */
#dropHint.drop{
  display:block;inset:8px;left:8px;top:8px;width:auto;height:auto;
  border:2px dashed var(--m-primary);border-radius:18px;
  background:color-mix(in srgb, var(--m-primary) 8%, transparent);
}

/* Переключатели видимости палитр в строке вкладок */
.pal-toggle{
  height:19px;padding:0 9px;border-radius:10px;font-size:11px;cursor:pointer;
  display:flex;align-items:center;white-space:nowrap;user-select:none;
  background:var(--ribbon-bg);border:1px solid var(--border);color:var(--muted);
}
.pal-toggle:hover{background:var(--hover)}
.pal-toggle.on{color:var(--text);border-color:var(--accent);background:var(--accent-soft)}

@media (max-width:760px){
  /* На телефоне доки снова превращаются в выдвижную панель слева */
  .side.dock{
    position:fixed;top:0;bottom:0;left:0;z-index:80;
    width:min(330px,86vw);transform:translateX(-102%);
  }
  #drawer:checked ~ .app .side.dock{transform:none}
  .side.dock.left.empty{display:flex}
  .pal-toggle{display:none}
  .dock-edge{display:none}
  .side.dock.right{display:none}
  .palette-head{cursor:default}
  .pal.floating{
    position:static;width:auto !important;height:auto !important;
    border:0;border-radius:0;box-shadow:none;
  }
}