.widget-builder-editor {
  --builder-toolbar-height: 130px;
  min-width: 0;
}

.widget-builder-editor .builder-statusbar {
  gap: 0.75rem;
  align-items: flex-start;
}

.widget-builder-editor .builder-statusbar > div,
.widget-builder-editor .builder-grid > *,
.widget-builder-editor .builder-actionbar > * {
  min-width: 0;
}

.builder-secondary-actions,
.builder-primary-actions,
.builder-slide-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  align-items: center;
}

.builder-more-actions {
  position: relative;
}

.builder-more-actions > summary {
  list-style: none;
}

.builder-more-actions > summary::-webkit-details-marker {
  display: none;
}

.builder-more-actions > summary::after {
  display: inline-block;
  margin-left: 0.5rem;
  content: "▾";
}

.builder-more-actions[open] > summary::after {
  content: "▴";
}

.builder-more-actions-menu {
  position: absolute;
  right: 0;
  z-index: 45;
  display: grid;
  gap: 0.625rem;
  width: min(280px, calc(100vw - 3rem));
  padding: 0.75rem;
  margin-top: 0.5rem;
  background: var(--surface-raised);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgb(15 23 42 / 0.16);
}

.builder-more-actions-menu form {
  margin: 0;
}

.builder-more-actions-menu .btn {
  width: 100%;
  text-align: left;
  white-space: normal;
}

.widget-builder-editor .builder-actionbar {
  position: sticky;
  top: calc(var(--header-height, 64px) + 0.5rem);
  z-index: 40;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem 1rem;
  align-items: center;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  background: var(--surface-raised);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 6px 20px rgb(15 23 42 / 0.08);
}

.builder-save-state {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  color: var(--muted-color);
  font-size: 0.875rem;
}

.builder-save-state i {
  color: var(--success-color);
}

.builder-save-state[data-dirty="true"] {
  color: var(--heading-color);
}

.builder-save-state[data-dirty="true"] i {
  color: var(--warning-color);
}

.builder-action-note,
.builder-action-feedback {
  grid-column: 1 / -1;
  font-size: 0.8125rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.builder-action-note {
  color: var(--muted-color);
}

.builder-action-feedback {
  padding: 0.5rem 0.625rem;
  color: var(--heading-color);
  background: var(--warning-color-light);
  border-left: 3px solid var(--warning-color);
  border-radius: var(--radius-sm);
}

.widget-builder-editor .builder-preview-sticky {
  top: calc(var(--header-height, 64px) + var(--builder-toolbar-height) + 1.5rem);
  max-height: calc(100dvh - var(--header-height, 64px) - var(--builder-toolbar-height) - 2.5rem);
}

.widget-builder-editor .builder-grid {
  margin-bottom: 1rem;
}

.widget-builder-editor [data-editor-slide],
.widget-builder-editor [id],
.widget-builder-editor [data-media-control] {
  scroll-margin-top: calc(var(--header-height, 64px) + var(--builder-toolbar-height) + 1.5rem);
}

.widget-builder-editor [data-editor-slide][hidden],
.widget-builder-editor [hidden] {
  display: none !important;
}

.widget-builder-editor .btn {
  min-height: 44px;
}

.widget-builder-editor .widget-settings-panel > summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1rem;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  cursor: pointer;
}

.widget-builder-editor .widget-settings-panel > summary::after {
  content: "＋";
  font-size: 1.25rem;
}

.widget-builder-editor .widget-settings-panel[open] > summary::after {
  content: "−";
}

.widget-builder-editor .widget-settings-panel > summary > .small {
  flex: 1 1 240px;
}

.widget-builder-editor summary:focus-visible,
.widget-builder-editor [tabindex="-1"]:focus-visible {
  outline: 3px solid var(--accent-color);
  outline-offset: 3px;
}

.builder-slide-feedback {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.75rem;
  font-size: 0.875rem;
}

.builder-publication {
  border-color: color-mix(in srgb, var(--success-color), var(--border-color) 50%);
}

.builder-publication h2 {
  color: var(--heading-color);
}

.builder-publication h2 i {
  color: var(--success-color);
}

.builder-public-link {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.builder-public-link input {
  flex: 1 1 100%;
  min-width: 0;
}

.builder-publication .builder-embed {
  margin-top: 1rem;
}

.builder-embed > summary {
  display: list-item;
  min-height: 44px;
  padding-block: 0.5rem;
  cursor: pointer;
  font-weight: 600;
}

.builder-embed-body {
  padding-block: 0.5rem;
}

.builder-embed-body textarea {
  margin-bottom: 0.625rem;
  font-family: monospace;
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}

.builder-publication [data-copy-feedback]:not(:empty) {
  padding-top: 0.75rem;
}

@media (max-width: 991.98px) {
  .widget-builder-editor .builder-preview-column {
    position: static;
    z-index: auto;
    grid-row: 1;
    height: auto;
    max-height: none;
  }

  .widget-builder-editor .builder-preview-sticky {
    position: static;
    height: auto;
    max-height: none;
  }

  .widget-builder-editor .builder-preview-frame {
    max-height: min(55dvh, 480px);
  }

  .widget-builder-editor .builder-preview-toggle {
    width: auto;
    min-width: 44px;
    padding-inline: 0.625rem;
  }

  .widget-builder-editor .builder-preview-toggle span {
    display: inline;
  }
}

@media (max-width: 575.98px) {
  .widget-builder-editor .builder-statusbar {
    flex-direction: row;
    align-items: center;
  }

  .widget-builder-editor .builder-statusbar .text-muted.small {
    display: none;
  }

  .widget-builder-editor .builder-secondary-actions {
    margin-left: auto;
  }

  .widget-builder-editor .builder-secondary-actions summary {
    font-size: 0.8125rem;
  }

  .widget-builder-editor .builder-actionbar {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
    padding: 0.625rem;
  }

  .widget-builder-editor .builder-primary-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .builder-primary-actions .btn {
    padding-inline: 0.375rem;
    font-size: 0.8125rem;
    white-space: normal;
  }

  .builder-primary-actions .btn:only-child {
    grid-column: 1 / -1;
  }

  .builder-save-state {
    font-size: 0.8125rem;
  }

  .builder-secondary-actions {
    gap: 0.5rem;
  }

  .builder-secondary-actions > a,
  .builder-secondary-actions > details {
    flex: 1 1 auto;
  }

  .builder-secondary-actions summary {
    width: 100%;
  }

  .builder-more-actions-menu {
    width: min(280px, calc(100vw - 3rem));
  }

  .widget-builder-editor .builder-preview-header {
    gap: 0.5rem;
  }

  .widget-builder-editor .builder-preview-header h2 {
    font-size: 1rem;
  }

  .widget-builder-editor .builder-preview-header .small {
    font-size: 0.75rem;
  }

  .widget-builder-editor .widget-settings-panel > summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .widget-builder-editor .widget-settings-panel > summary > .small {
    grid-row: 2;
  }

  .widget-builder-editor .widget-settings-panel > summary::after {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .builder-public-link > .btn,
  .builder-embed-body > .btn {
    width: 100%;
  }
}