section
{
    overflow: hidden;
}

#editSection {
  height: clamp(150px, 20vh, 500px);
  display: flex;
  flex-direction: column;
  overflow: hidden; /* скрываем прокрутку секции */
}

/* Toolbar вверху секции */
#editSection .wave-row.row-1 {
  flex: 0 0 auto;
  z-index: 1;
}

/* Панель редактора занимает остаток высоты без вертикальной прокрутки */
#waveEditorPanel {
  flex: 1 1 auto;
  min-height: 0;           /* даёт сжиматься */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;              /* уберите/оставьте по дизайну */
}

.editor-toolbar-wrapper {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.08), rgba(14, 165, 233, 0.03));
  border-bottom: 1px solid #1e293b;
  container-type: inline-size;
}

@container (max-width: 800px) {
#qlhide2,  
#qlhide3
  {
    display: none;
  }
}   

@container (max-width: 700px) {
  #qlhide0,
  #qlhide1
  {
    display: none;
  }
}  
#waveEditorPanel .editor-toolbar-wrapper {
  flex: 0 0 auto;
  z-index: 1;
}

.editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
}

.editor-toolbar .ql-formats {
  margin-right: 0.35rem;
}

/* Область под редактор, растягивается и не скроллит */
#waveEditorDropzone {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}




.editor-toolbar__save {
  margin-left: auto;
}

.editor-save-btn {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #0b1220;
  border: none;
  border-radius: 0.5rem;
  padding: 0.45rem 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.editor-save-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(34, 197, 94, 0.35);
}

.editor-surface {
  padding-top: 0.5rem;
  background: #0b1220;
  transition: border-color 160ms ease, box-shadow 160ms ease;
  height:100%;
}

.editor-surface.is-dragover {
  border: 1px dashed #38bdf8;
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.6);
}




/* Сам текстовый редактор: растягивается и скроллит только содержимое */
#waveEditor.editor-area {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}




.ql-container.ql-snow {
  border: 1px solid #1e293b;
  border-radius: 0rem;
  background: #0f172a;
}

.ql-editor {
  min-height: 50px;
  color: #e2e8f0;
  font-family: "Segoe UI", Arial, sans-serif;
}




.ql-editor a {
  color: #38bdf8;
}

.ql-editor.ql-blank::before {
  color: #64748b;
}

.ql-toolbar.ql-snow {
  border: none;
  padding: 0;
  background: transparent;
}

.ql-snow .ql-stroke {
  stroke: #e2e8f0;
}

.ql-snow .ql-fill,
.ql-snow .ql-stroke.ql-fill {
  fill: #e2e8f0;
}

.ql-snow .ql-picker {
  color: #e2e8f0;
}

.ql-snow .ql-picker-options {
  background: #0f172a;
  border: 1px solid #1e293b;
}

.ql-snow .ql-picker-label {
  color: #e2e8f0;
}

.ql-snow .ql-picker-label::before,
.ql-snow .ql-picker-item::before {
  color: #e2e8f0;
}

.ql-editor::-webkit-slider-thumb {
  width: 15px;
  height: 25px;
  background-color: #456fc4;
  appearance: none;

}

.ql-editor::-moz-range-thumb {
  width: 15px;
  height: 25px;
  background-color: #456fc4;
  appearance: none;
  border: 0;
  border-radius: 0;
}

@media (max-width: 720px) {
  .editor-panel {
    margin: 0.5rem 0.75rem 1rem;
  }

  .editor-toolbar {
    gap: 0.2rem;
  }

  .editor-save-btn {
    padding: 0.35rem 0.75rem;
    font-size: 0.95rem;
  }
}