.wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.panelRoot {
  display: flex;
  flex-direction: column;
  gap: var(--node-editor-inspector-section-gap);
  padding: var(--node-editor-inspector-space-md);
  height: 100%;
  overflow-y: auto;
  background-color: var(--node-editor-control-background);
  border-right: 1px solid var(--node-editor-separator-color);
  box-sizing: border-box;
}

.section {
  background-color: var(--node-editor-surface-secondary);
  border: var(--node-editor-card-border);
  border-radius: var(--node-editor-card-border-radius);
  padding: var(--node-editor-inspector-space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--node-editor-inspector-field-gap);
}

.sectionHeader {
  font-size: var(--node-editor-inspector-font-size-body);
  font-weight: 600;
  color: var(--node-editor-text-color);
}

.sectionDescription {
  font-size: var(--node-editor-inspector-font-size-meta);
  color: var(--node-editor-secondary-label-color);
}

.sectionBody {
  display: flex;
  flex-direction: column;
  gap: var(--node-editor-inspector-field-gap);
}

.checkboxGroup {
  display: flex;
  align-items: center;
  gap: var(--node-editor-inspector-inline-gap);
}

.checkboxGroup label {
  display: flex;
  align-items: center;
  gap: var(--node-editor-inspector-inline-gap);
  font-size: var(--node-editor-inspector-font-size-body);
  color: var(--node-editor-text-color);
}

.inlineControls {
  display: flex;
  align-items: center;
  gap: var(--node-editor-inspector-inline-gap);
  flex-wrap: wrap;
}

.logList {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 140px;
  overflow-y: auto;
  padding: var(--node-editor-inspector-space-sm);
  border-radius: var(--node-editor-control-border-radius);
  border: var(--node-editor-input-border);
  background-color: var(--node-editor-surface-secondary);
  font-size: var(--node-editor-inspector-font-size-meta);
  color: var(--node-editor-secondary-label-color);
}

.logEntry {
  line-height: var(--node-editor-inspector-line-height-meta);
  word-break: break-word;
}

.buttonRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--node-editor-inspector-inline-gap);
}

.buttonRow button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: var(--node-editor-control-border-radius);
  border: var(--node-editor-input-border);
  background-color: var(--node-editor-control-background);
  color: var(--node-editor-text-color);
  font-size: var(--node-editor-inspector-font-size-meta);
  cursor: pointer;
}

.buttonRow button:hover {
  background-color: var(--node-editor-surface-secondary);
}

.mutedText {
  font-size: var(--node-editor-inspector-font-size-meta);
  color: var(--node-editor-secondary-label-color);
}

.sliderRow {
  display: flex;
  align-items: center;
  gap: var(--node-editor-inspector-inline-gap);
}

.sliderRow input[type="number"] {
  width: 72px;
  padding: 4px 6px;
  font-size: var(--node-editor-inspector-font-size-meta);
  border-radius: var(--node-editor-control-border-radius);
  border: var(--node-editor-input-border);
  background-color: var(--node-editor-control-background);
  color: var(--node-editor-input-text-color);
}

.panelFooterNote {
  font-size: var(--node-editor-inspector-font-size-meta);
  color: var(--node-editor-secondary-label-color);
  line-height: var(--node-editor-inspector-line-height-meta);
}