/* CSS Custom Properties for theming */
:root {
  --editable-accent-color: #007cba;
  --editable-accent-active: #28a745;
  --editable-rotate-color: #ff6600;
  --editable-handle-size: 10px;
  --editable-handle-offset: -6px;
  --editable-handle-border-color: #fff;
  --editable-border-width: 2px;
  --editable-transition: 0.2s;
  --editable-font-controls-gap: 5px;
  --editable-button-border-radius: 3px;
  --editable-button-margin: 10px;
  --editable-rotate-handle-size: 12px;
  --editable-rotate-handle-offset: -20px;

  /* Toolbar theming */
  --editable-toolbar-bg: rgba(255, 255, 255, 0.95);
  --editable-toolbar-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  --editable-toolbar-border-radius: 8px;
  --editable-toolbar-padding: 8px;
  --editable-toolbar-gap: 4px;
  --editable-toolbar-button-padding: 8px 12px;
  --editable-toolbar-save-color: #007cba;
  --editable-toolbar-copy-color: #6c757d;
  --editable-toolbar-add-text-color: #28a745;
  --editable-toolbar-add-slide-color: #17a2b8;
  --editable-toolbar-add-color: #28a745;
  --editable-toolbar-modify-color: #fd7e14;
  --editable-modify-valid-shadow: 0 0 0 3px #28a745, 0 0 8px rgba(40, 167, 69, 0.5);
  --editable-modify-valid-hover-shadow: 0 0 0 4px #28a745, 0 0 16px rgba(40, 167, 69, 0.7);
  --editable-modify-warn-shadow: 0 0 0 3px #fd7e14, 0 0 8px rgba(253, 126, 20, 0.5);
  --editable-modify-activated-shadow: 0 0 0 2px #fd7e14, 0 0 6px rgba(253, 126, 20, 0.4);

  /* Arrow theming */
  --editable-arrow-start-color: #007cba;
  --editable-arrow-end-color: #28a745;
  --editable-arrow-control1-color: #ff6600;
  --editable-arrow-control2-color: #9933ff;
  --editable-arrow-waypoint-color: #f59e0b;
  --editable-arrow-handle-size: 12px;
  --editable-arrow-control-handle-size: 10px;
  --editable-arrow-waypoint-handle-size: 10px;
  --editable-toolbar-add-arrow-color: #6f42c1;
  --editable-toolbar-add-shape-color: #d63384;
}

/* Container for editable elements */
.editable-container {
  position: absolute;
  display: inline-block;
  border: var(--editable-border-width) solid transparent;
  transform-origin: center center;
}

.editable-container:hover,
.editable-container.active {
  border-color: var(--editable-accent-color);
}

/* Resize handles */
.resize-handle {
  position: absolute;
  width: var(--editable-handle-size);
  height: var(--editable-handle-size);
  background-color: var(--editable-accent-color);
  border: 1px solid var(--editable-handle-border-color);
  opacity: 0;
  transition: opacity var(--editable-transition);
}

.editable-container:hover .resize-handle,
.editable-container:focus .resize-handle,
.editable-container.active .resize-handle {
  opacity: 1;
}

.resize-handle.handle-nw {
  top: var(--editable-handle-offset);
  left: var(--editable-handle-offset);
  cursor: nw-resize;
}

.resize-handle.handle-ne {
  top: var(--editable-handle-offset);
  right: var(--editable-handle-offset);
  cursor: ne-resize;
}

.resize-handle.handle-sw {
  bottom: var(--editable-handle-offset);
  left: var(--editable-handle-offset);
  cursor: sw-resize;
}

.resize-handle.handle-se {
  bottom: var(--editable-handle-offset);
  right: var(--editable-handle-offset);
  cursor: se-resize;
}

/* Rotation handle */
.rotate-handle {
  position: absolute;
  width: var(--editable-rotate-handle-size);
  height: var(--editable-rotate-handle-size);
  background-color: var(--editable-rotate-color);
  border: 1px solid var(--editable-handle-border-color);
  border-radius: 50%;
  cursor: grab;
  opacity: 0;
  transition: opacity var(--editable-transition);
  top: var(--editable-rotate-handle-offset);
  left: 50%;
  transform: translateX(-50%);
}

.rotate-handle:active {
  cursor: grabbing;
}

.editable-container:hover .rotate-handle,
.editable-container:focus .rotate-handle,
.editable-container.active .rotate-handle {
  opacity: 1;
}

/* Font controls for text divs */
.editable-font-controls {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 8px;
  opacity: 0;
  transition: opacity var(--editable-transition);
  display: flex;
  gap: var(--editable-font-controls-gap);
}

.editable-container:hover .editable-font-controls,
.editable-container:focus .editable-font-controls,
.editable-container.active .editable-font-controls {
  opacity: 1;
}

/* Buttons */
.editable-button {
  background-color: var(--editable-accent-color);
  color: white;
  border: none;
  cursor: pointer;
  border-radius: var(--editable-button-border-radius);
}

.editable-button:hover {
  filter: brightness(1.1);
}

.editable-button.active {
  background-color: var(--editable-accent-active);
}

.editable-button-font {
  font-size: 24px;
  padding: 4px 12px;
}

.editable-button-align {
  font-size: 20px;
  padding: 4px 12px;
}

.editable-button-edit {
  font-size: 20px;
  padding: 8px 16px;
  margin-left: var(--editable-button-margin);
  height: 48px;
  min-width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.editable-button-decrease {
  margin-right: 0;
}

.editable-button-increase {
  margin-right: var(--editable-button-margin);
}

/* =============================================================================
   Top Bar Toolbar
   ============================================================================= */

.editable-toolbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  z-index: 1000001;
  background: var(--editable-toolbar-bg);
  box-shadow: var(--editable-toolbar-shadow);
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 16px;
  gap: 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Push reveal.js viewport below the top bar (only when toolbar is present) */
.has-editable-toolbar .reveal {
  top: 100px !important;
  height: calc(100vh - 100px) !important;
}

/* Left zone: title + persistent actions (save, copy) */
.editable-toolbar-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--editable-toolbar-gap);
  flex-shrink: 0;
}

/* Right zone: contextual panels (default, arrow, image…) */
.editable-toolbar-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: auto;
  min-width: 0;
  flex: 1;
}

/* Individual context panels inside the right zone */
.toolbar-panel {
  display: flex;
  flex-direction: row;
  align-items: center;
  min-width: 0;
  flex: 1;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
}

.toolbar-panel-text {
  overflow: visible;
  justify-content: center;
}

.quill-toolbar-separator {
  display: inline-block;
  width: 0;
  margin: 0 10px;
  flex-shrink: 0;
}

.toolbar-panel::-webkit-scrollbar {
  display: none;
}

/* Stacked button group (save + copy in left zone) */
.editable-toolbar-button-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.editable-toolbar-button-stack .toolbar-button {
  font-size: 11px;
  padding: 2px 8px;
  height: auto;
}

/* Vertical divider between left zone and any section */
.editable-toolbar-divider {
  width: 1px;
  height: 32px;
  background: #ddd;
  margin: 0 12px;
  flex-shrink: 0;
}

.editable-toolbar-title {
  font-size: 13px;
  font-weight: 700;
  color: #555;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .editable-toolbar-title,
  .editable-toolbar-divider {
    display: none;
  }
  /* Collapse label text on toolbar buttons to icon-only on small screens */
  .editable-toolbar-button .toolbar-label {
    display: none;
  }
  /* Stack the toolbar panels vertically so controls remain accessible */
  .editable-toolbar {
    flex-wrap: wrap;
    height: auto;
    min-height: var(--editable-toolbar-height);
  }
  .editable-toolbar-right {
    flex: 1 1 100%;
    overflow-x: auto;
  }
}

/* Disabled toolbar button (e.g. Modify placeholder) */
.editable-toolbar-button.toolbar-button-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.editable-toolbar-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--editable-toolbar-button-padding);
  border: none;
  border-radius: var(--editable-button-border-radius);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: white;
  transition: all var(--editable-transition);
  white-space: nowrap;
  min-width: 40px;
  box-sizing: border-box;
}

.editable-toolbar-button:hover {
  filter: brightness(1.1);
}

.editable-toolbar-button:active {
  filter: brightness(0.95);
}

.editable-toolbar-button .toolbar-icon {
  font-size: 16px;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

.editable-toolbar-button .toolbar-label {
  opacity: 1;
  width: auto;
}

/* Toolbar button colors */
.editable-toolbar-button.toolbar-save {
  background-color: var(--editable-toolbar-save-color);
}

.editable-toolbar-button.toolbar-copy {
  background-color: var(--editable-toolbar-copy-color);
}

.editable-toolbar-button.toolbar-add {
  background-color: var(--editable-toolbar-add-color);
}

.editable-toolbar-button.toolbar-modify {
  background-color: var(--editable-toolbar-modify-color);
}

.editable-toolbar-button.toolbar-modify.active {
  outline: 2px solid var(--editable-toolbar-modify-color);
  outline-offset: 2px;
  opacity: 0.85;
}

/* Modify mode: valid elements get a persistent green outline */
.modify-mode img.modify-mode-valid,
.modify-mode video.modify-mode-valid,
.modify-mode div.absolute.modify-mode-valid,
.modify-mode div.modify-mode-valid,
.modify-mode h2.modify-mode-valid,
.modify-mode p.modify-mode-valid,
.modify-mode ul.modify-mode-valid,
.modify-mode ol.modify-mode-valid,
.modify-mode blockquote.modify-mode-valid,
.modify-mode pre.modify-mode-valid,
.modify-mode table.modify-mode-valid {
  box-shadow: var(--editable-modify-valid-shadow);
  cursor: pointer;
  transition: box-shadow var(--editable-transition);
}

.modify-mode img.modify-mode-valid:hover,
.modify-mode video.modify-mode-valid:hover,
.modify-mode div.absolute.modify-mode-valid:hover,
.modify-mode div.modify-mode-valid:hover,
.modify-mode h2.modify-mode-valid:hover,
.modify-mode p.modify-mode-valid:hover,
.modify-mode ul.modify-mode-valid:hover,
.modify-mode ol.modify-mode-valid:hover,
.modify-mode blockquote.modify-mode-valid:hover,
.modify-mode pre.modify-mode-valid:hover,
.modify-mode table.modify-mode-valid:hover {
  box-shadow: var(--editable-modify-valid-hover-shadow);
}

/* Modify mode: elements that cannot be targeted get an amber warning ring (not clickable) */
.modify-mode img.modify-mode-warn,
.modify-mode video.modify-mode-warn,
.modify-mode div.absolute.modify-mode-warn,
.modify-mode div.modify-mode-warn,
.modify-mode h2.modify-mode-warn,
.modify-mode p.modify-mode-warn {
  box-shadow: var(--editable-modify-warn-shadow);
  cursor: not-allowed;
  transition: box-shadow var(--editable-transition);
}

/* Post-activation: elements added via modify mode keep a subtle amber outline */
.editable-container img[data-editable-modified="true"],
.editable-container div.absolute[data-editable-modified="true"] {
  box-shadow: var(--editable-modify-activated-shadow);
}

/* Active heading editor */
h2.editable-heading-active {
  outline: 2px solid var(--editable-highlight-color, #4A90D9);
  outline-offset: 3px;
  cursor: text;
}

/* Modify mode panel */
.toolbar-panel-modify {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 8px;
}


/* Submenu wrapper */
.editable-toolbar-submenu-wrapper {
  position: relative;
}

/* Submenu container */
.editable-toolbar-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  right: auto;
  margin-top: 4px;
  display: none;
  flex-direction: column;
  gap: var(--editable-toolbar-gap);
  background: var(--editable-toolbar-bg);
  padding: var(--editable-toolbar-padding);
  border-radius: var(--editable-toolbar-border-radius);
  box-shadow: var(--editable-toolbar-shadow);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000;
}

.editable-toolbar-submenu.open {
  display: flex;
}

/* Submenu items */
.editable-toolbar-submenu-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: var(--editable-toolbar-button-padding);
  border: none;
  border-radius: var(--editable-button-border-radius);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: white;
  transition: all var(--editable-transition);
  white-space: nowrap;
  min-width: 80px;
  box-sizing: border-box;
}

.editable-toolbar-submenu-item:hover {
  filter: brightness(1.1);
}

.editable-toolbar-submenu-item .toolbar-icon {
  font-size: 16px;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

.editable-toolbar-submenu-item .toolbar-label {
  opacity: 1;
  flex-grow: 1;
}

/* Submenu item colors */
.editable-toolbar-submenu-item.toolbar-add-text {
  background-color: var(--editable-toolbar-add-text-color);
}

.editable-toolbar-submenu-item.toolbar-add-slide {
  background-color: var(--editable-toolbar-add-slide-color);
}

/* New element indicators */
.editable-new {
  border: 2px dashed var(--editable-accent-active) !important;
}

.editable-new-slide {
  min-height: 200px;
}

/* =============================================================================
   Quill Editor Integration
   ============================================================================= */

/* Ensure text doesn't shift when entering edit mode */
.editable-container > div.editable,
.editable-container > .editable {
  position: relative !important;
}

/* Toolbar - Quill generates .ql-toolbar.ql-snow */
.editable-container .ql-toolbar.ql-snow {
  position: absolute !important;
  bottom: 100% !important;
  top: auto !important;
  /* Position after edit button with gap */
  left: 70px !important;
  margin-bottom: 8px !important;
  background: #1a1a1a !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  z-index: 10000 !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
  border: 1px solid #333 !important;
  width: max-content !important;
  /* Note: display is controlled via inline style in JS, don't use !important here */
}

/* Show toolbar when editing */
.editable-container .ql-toolbar.ql-snow.editing {
  display: flex !important;
}

/* Hide toolbar when not editing */
.editable-container .ql-toolbar.ql-snow:not(.editing) {
  display: none !important;
}

/* Quill toolbar hosted in the top-bar text panel */
/* Heading format toolbar buttons (bold/italic/etc. for modify-mode heading editing) */
.toolbar-panel-text .heading-edit-toolbar button {
  background: none;
  border: none;
  color: #333;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1;
}

.toolbar-panel-text .heading-edit-toolbar button:hover {
  background: rgba(0, 0, 0, 0.08);
}

.toolbar-panel-text .ql-toolbar.ql-snow {
  position: static !important;
  bottom: auto !important;
  left: auto !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: flex !important;
}

.quill-toolbar-container .ql-formats {
  margin-right: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* All SVG icons - make them visible */
.quill-toolbar-container svg {
  width: 18px !important;
  height: 18px !important;
}

.quill-toolbar-container .ql-stroke {
  stroke: #ffffff !important;
  stroke-width: 2 !important;
}

.quill-toolbar-container .ql-fill {
  fill: #ffffff !important;
}

.quill-toolbar-container .ql-thin {
  stroke-width: 1 !important;
}

.quill-toolbar-container .ql-even {
  stroke-width: 1 !important;
}

/* Toolbar buttons */
.quill-toolbar-container button {
  width: 32px !important;
  height: 32px !important;
  padding: 4px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.quill-toolbar-container button:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

.quill-toolbar-container button:hover .ql-stroke,
.quill-toolbar-container button.ql-active .ql-stroke {
  stroke: var(--editable-accent-color) !important;
}

.quill-toolbar-container button:hover .ql-fill,
.quill-toolbar-container button.ql-active .ql-fill {
  fill: var(--editable-accent-color) !important;
}

.quill-toolbar-container button.ql-active {
  background: rgba(0, 124, 186, 0.2) !important;
}

/* Dropdown pickers (color, size, etc.) */
.quill-toolbar-container .ql-picker {
  color: #ffffff !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
}

.quill-toolbar-container .ql-picker-label {
  border: 1px solid #444 !important;
  border-radius: 4px !important;
  padding: 4px 8px !important;
  background: transparent !important;
  color: #ffffff !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
}

.quill-toolbar-container .ql-picker-label:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

.quill-toolbar-container .ql-picker-label svg {
  width: 14px !important;
  height: 14px !important;
}

.quill-toolbar-container .ql-picker-label .ql-stroke {
  stroke: #ffffff !important;
}

/* Dark icons/text for Quill toolbar on white top bar */
.toolbar-panel-text .quill-toolbar-container .ql-stroke {
  stroke: #333333 !important;
}
.toolbar-panel-text .quill-toolbar-container .ql-fill {
  fill: #333333 !important;
}
.toolbar-panel-text .quill-toolbar-container button,
.toolbar-panel-text .quill-toolbar-container .ql-picker-label {
  color: #333333 !important;
}
.toolbar-panel-text .quill-toolbar-container button:hover .ql-stroke,
.toolbar-panel-text .quill-toolbar-container button.ql-active .ql-stroke {
  stroke: #007cba !important;
}
.toolbar-panel-text .quill-toolbar-container button:hover .ql-fill,
.toolbar-panel-text .quill-toolbar-container button.ql-active .ql-fill {
  fill: #007cba !important;
}
.toolbar-panel-text .quill-toolbar-container button:hover,
.toolbar-panel-text .quill-toolbar-container button.ql-active {
  color: #007cba !important;
}
.toolbar-panel-text .quill-toolbar-container .ql-picker-label .ql-stroke {
  stroke: #333333 !important;
}

/* Dropdown options panel */
.quill-toolbar-container .ql-picker-options {
  background: #1a1a1a !important;
  border: 1px solid #444 !important;
  border-radius: 4px !important;
  padding: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
  z-index: 10001 !important;
}

.quill-toolbar-container .ql-picker-item {
  color: #ffffff !important;
  padding: 4px 8px !important;
  border-radius: 3px !important;
}

.quill-toolbar-container .ql-picker-item:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--editable-accent-color) !important;
}

/* Color picker specific styles */
.quill-toolbar-container .ql-color-picker .ql-picker-label,
.quill-toolbar-container .ql-background .ql-picker-label {
  padding: 2px !important;
  width: 28px !important;
}

.quill-toolbar-container .ql-color-picker .ql-picker-options,
.quill-toolbar-container .ql-background .ql-picker-options {
  width: auto !important;
  min-width: 130px !important;
  max-width: 200px !important;
  flex-wrap: wrap !important;
  padding: 6px !important;
}

/* Only show as flex when expanded */
.quill-toolbar-container .ql-color-picker.ql-expanded .ql-picker-options,
.quill-toolbar-container .ql-background.ql-expanded .ql-picker-options {
  display: flex !important;
}

.quill-toolbar-container .ql-color-picker .ql-picker-item,
.quill-toolbar-container .ql-background .ql-picker-item {
  width: 20px !important;
  height: 20px !important;
  border-radius: 3px !important;
  margin: 2px !important;
  padding: 0 !important;
}

/* Unset color option */
.quill-toolbar-container .ql-picker-item[data-value="unset"] {
  width: 100% !important;
  height: auto !important;
  padding: 4px 8px !important;
  margin-bottom: 4px !important;
  border-bottom: 1px solid #444 !important;
  background: repeating-linear-gradient(
    45deg,
    #444,
    #444 4px,
    #333 4px,
    #333 8px
  ) !important;
}

.quill-toolbar-container .ql-picker-item[data-value="unset"]::before {
  content: "Unset" !important;
  color: #fff !important;
}

.quill-toolbar-container .ql-picker-item[data-value="unset"]:hover {
  filter: brightness(1.2) !important;
}

/* Custom color picker option */
.quill-toolbar-container .ql-picker-item[data-value="custom"] {
  width: 100% !important;
  height: auto !important;
  padding: 4px 8px !important;
  margin-top: 4px !important;
  border-top: 1px solid #444 !important;
  background: linear-gradient(to right,
    #ff0000, #ff8000, #ffff00, #00ff00, #00ffff, #0000ff, #8000ff, #ff0080
  ) !important;
  color: #000 !important;
  text-shadow: 0 0 2px #fff, 0 0 2px #fff !important;
  font-size: 12px !important;
  text-align: center !important;
}

.quill-toolbar-container .ql-picker-item[data-value="custom"]::before {
  content: "Custom..." !important;
  color: #fff !important;
  text-shadow: 0 0 3px #000, 0 0 3px #000 !important;
}

.quill-toolbar-container .ql-picker-item[data-value="custom"]:hover {
  filter: brightness(1.2) !important;
}

/* Size picker */
.quill-toolbar-container .ql-size .ql-picker-label {
  width: auto !important;
  min-width: 60px !important;
}

.quill-toolbar-container .ql-size .ql-picker-label::before,
.quill-toolbar-container .ql-size .ql-picker-item::before {
  color: #ffffff !important;
}

.quill-toolbar-container .ql-size .ql-picker-item:hover::before {
  color: var(--editable-accent-color) !important;
}

/* Make the Quill wrapper fill the container - no extra space */
.quill-wrapper {
  width: 100%;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  display: block !important;
  line-height: inherit !important;
  vertical-align: top !important;
  box-sizing: border-box !important;
}

/* Ensure Quill container doesn't shift text vertically */
.quill-wrapper .ql-container,
.editable-container .ql-container {
  line-height: inherit !important;
  vertical-align: top !important;
  display: block !important;
}

.quill-wrapper .ql-editor,
.editable-container .ql-editor {
  line-height: inherit !important;
  vertical-align: top !important;
}


/* Remove Quill's default border on container */
.quill-wrapper .ql-container.ql-snow,
.editable-container .ql-container.ql-snow {
  border: none !important;
  font-size: inherit !important;
  font-family: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Style the Quill editor area - inherit all styles from parent */
.quill-wrapper .ql-editor,
.editable-container .ql-editor {
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  min-height: auto !important;
  font-size: inherit !important;
  font-family: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

/* Ensure paragraphs in Quill don't add extra margins or change size */
.quill-wrapper .ql-editor p,
.editable-container .ql-editor p,
.reveal .ql-editor p {
  margin: 0 !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  padding: 0 !important;
  font-size: inherit !important;
  line-height: inherit !important;
  vertical-align: top !important;
  display: block !important;
}

/* Quill size classes - override to use relative sizing */
.ql-editor .ql-size-small {
  font-size: 0.75em !important;
}

.ql-editor .ql-size-large {
  font-size: 1.5em !important;
}

.ql-editor .ql-size-huge {
  font-size: 2em !important;
}

/* Ensure Quill doesn't override text alignment */
.quill-wrapper .ql-editor.ql-blank::before {
  font-style: normal !important;
  color: inherit !important;
  opacity: 0.5;
}

/* Make sure bold and other formatting shows - high specificity to override reveal.js */
.reveal .ql-editor strong,
.reveal .ql-editor b,
.reveal section .ql-editor strong,
.reveal section .ql-editor b {
  font-weight: bold !important;
}

.reveal .ql-editor em,
.reveal .ql-editor i,
.reveal section .ql-editor em,
.reveal section .ql-editor i {
  font-style: italic !important;
}

.reveal .ql-editor u,
.reveal section .ql-editor u {
  text-decoration: underline !important;
}

.reveal .ql-editor s,
.reveal .ql-editor strike,
.reveal section .ql-editor s,
.reveal section .ql-editor strike {
  text-decoration: line-through !important;
}

/* Ensure color spans work */
.reveal .ql-editor span[style*="color"],
.reveal .ql-editor span[style*="background"] {
  /* Allow inline styles to work */
}

/* Style the editable element when in edit mode */
.editable-container [contenteditable="true"] {
  outline: none;
  cursor: text;
}

/* Ensure text selection is visible */
.editable-container [contenteditable="true"]::selection,
.ql-editor::selection,
.ql-editor *::selection {
  background: var(--editable-accent-color);
  color: white;
}

/* Color picker improvements */
.ql-color-picker,
.ql-icon-picker {
  width: 28px !important;
}

.ql-color-picker .ql-picker-label,
.ql-background .ql-picker-label {
  padding: 2px 4px !important;
}

/* Ensure dropdowns appear above everything */
.ql-picker-options {
  z-index: 10001 !important;
}

/* Size dropdown styling */
.quill-toolbar-container .ql-size .ql-picker-label::before,
.quill-toolbar-container .ql-size .ql-picker-item::before {
  content: 'Normal' !important;
}

.quill-toolbar-container .ql-size .ql-picker-label[data-value="small"]::before,
.quill-toolbar-container .ql-size .ql-picker-item[data-value="small"]::before {
  content: 'Small' !important;
}

.quill-toolbar-container .ql-size .ql-picker-label[data-value="large"]::before,
.quill-toolbar-container .ql-size .ql-picker-item[data-value="large"]::before {
  content: 'Large' !important;
}

.quill-toolbar-container .ql-size .ql-picker-label[data-value="huge"]::before,
.quill-toolbar-container .ql-size .ql-picker-item[data-value="huge"]::before {
  content: 'Huge' !important;
}

/* =============================================================================
   Arrow Elements
   ============================================================================= */

/* Arrow container */
.editable-arrow-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 100;
}

.editable-arrow-container.editable-new {
  border: none !important;
}

/* Arrow handles */
.editable-arrow-handle {
  position: absolute;
  width: var(--editable-arrow-handle-size);
  height: var(--editable-arrow-handle-size);
  border-radius: 50%;
  border: 2px solid white;
  cursor: move;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  z-index: 101;
}

.editable-arrow-handle:hover {
  transform: translate(-50%, -50%) scale(1.2);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}

.editable-arrow-handle:active {
  transform: translate(-50%, -50%) scale(1.1);
}

.editable-arrow-handle-start {
  background-color: var(--editable-arrow-start-color);
}

.editable-arrow-handle-end {
  background-color: var(--editable-arrow-end-color);
}

.editable-arrow-handle-control1 {
  background-color: var(--editable-arrow-control1-color);
}

.editable-arrow-handle-control2 {
  background-color: var(--editable-arrow-control2-color);
}

.editable-arrow-handle-waypoint {
  background-color: var(--editable-arrow-waypoint-color);
  width: var(--editable-arrow-waypoint-handle-size);
  height: var(--editable-arrow-waypoint-handle-size);
}

/* Curve mode toggle button */
.editable-arrow-curve-toggle {
  display: none;
}

.editable-arrow-container.active .editable-arrow-curve-toggle {
  display: flex;
}

.editable-arrow-curve-toggle:hover {
  transform: scale(1.1);
}

/* Arrow handles - hidden by default, shown when active */
.editable-arrow-handle {
  display: none;
}

.editable-arrow-container.active .editable-arrow-handle {
  display: block;
}

/* Control point handles only shown in curve mode */
.editable-arrow-handle-control1,
.editable-arrow-handle-control2 {
  display: none !important;
}

.editable-arrow-container.active.curve-mode .editable-arrow-handle-control1,
.editable-arrow-container.active.curve-mode .editable-arrow-handle-control2 {
  display: block !important;
}

/* Arrow submenu item color */
.editable-toolbar-submenu-item.toolbar-add-arrow {
  background-color: var(--editable-toolbar-add-arrow-color);
}

.editable-toolbar-submenu-item.toolbar-add-shape {
  background-color: var(--editable-toolbar-add-shape-color);
}

/* =============================================================================
   Arrow Style Controls (inline in toolbar)
   ============================================================================= */

.arrow-style-controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 0;
  flex-wrap: nowrap;
  min-width: 0;
  flex: 1;
}

.arrow-center-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin: 0 auto;
}

.arrow-controls-wrap {
  display: grid;
  grid-template-rows: auto auto;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.arrow-controls-wrap::-webkit-scrollbar {
  display: none;
}

/* Uniform height for all arrow toolbar controls */
:root {
  --arrow-ctrl-h: 40px;
}

/* Base style for all native arrow toolbar buttons and inputs */
.arrow-toolbar-btn,
.arrow-icon-select-btn,
.arrow-controls-wrap input[type="number"],
.arrow-controls-wrap input[type="text"] {
  height: var(--arrow-ctrl-h);
  min-height: var(--arrow-ctrl-h);
  box-sizing: border-box;
  border-radius: 4px;
  border: 1px solid #ccc;
  background: white;
  color: #333;
  font-size: 13px;
  cursor: pointer;
  padding: 0 8px;
  font-family: inherit;
}

.arrow-toolbar-btn:hover,
.arrow-icon-select-btn:hover {
  background: #f0f0f0;
  border-color: #999;
}

.arrow-toolbar-btn:focus,
.arrow-icon-select-btn:focus,
.arrow-controls-wrap input:focus {
  outline: 2px solid var(--editable-accent-color, #007cba);
  outline-offset: -1px;
}

.arrow-color-btn {
  border-radius: 4px;
}

/* Two stacked color buttons */
.arrow-color-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  grid-row: 1 / 3;
}

.arrow-color-btn {
  width: var(--arrow-ctrl-h);
  height: var(--arrow-ctrl-h);
  padding: 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  box-sizing: border-box;
}

.arrow-color-btn:hover {
  border-color: #999;
}

/* Presets toggle button: conic gradient to indicate "palette" */
.arrow-color-presets-toggle {
  background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);
}

/* Floating presets popover */
.arrow-color-presets-popover {
  position: fixed;
  z-index: 10000;
  background: white;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.arrow-color-presets {
  display: grid;
  grid-template-rows: repeat(3, 20px);
  grid-auto-flow: column;
  gap: 4px;
}

.arrow-color-swatch {
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  border-radius: 3px;
  cursor: pointer;
  padding: 0;
  box-sizing: border-box;
}

.arrow-color-swatch:hover {
  border-color: #999;
  transform: scale(1.1);
}

.arrow-color-swatch.selected {
  border: 2px solid var(--editable-accent-color, #007cba);
  box-shadow: 0 0 0 1px white inset;
}


/* Icon-select: single button showing active icon, dropdown with icon+label */
.arrow-icon-select {
  flex-shrink: 0;
}

.arrow-icon-select-btn {
  width: 52px;
  padding: 0 6px;
  text-align: center;
}

.arrow-icon-select-dropdown {
  position: fixed;
  z-index: 10000;
  background: white;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 120px;
}

.arrow-icon-select-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border: none;
  background: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  text-align: left;
  white-space: nowrap;
  color: #333;
}

.arrow-icon-select-item:hover {
  background: #f0f0f0;
  color: #333;
}

.arrow-icon-select-item.active {
  background: var(--editable-accent-color, #007cba);
  color: white;
}

.arrow-icon-select-icon {
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

/* Opacity range input */
.arrow-toolbar-opacity {
  --arrow-opacity-color: #000000;
  width: 80px;
  height: var(--arrow-ctrl-h);
  cursor: pointer;
  box-sizing: border-box;
  flex-shrink: 0;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 10px;
  border: 1px solid #ccc;
  padding: 0;
  background:
    linear-gradient(to right, transparent, var(--arrow-opacity-color)),
    repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 0 0 / 10px 10px;
}

.arrow-toolbar-opacity::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid white;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

.arrow-toolbar-opacity::-moz-range-track {
  height: 40px;
  border-radius: 10px;
  background:
    linear-gradient(to right, transparent, var(--arrow-opacity-color)),
    repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 0 0 / 10px 10px;
}

.arrow-toolbar-opacity::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid white;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

/* Width / label-offset number inputs */
.arrow-toolbar-width {
  width: 52px;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

.arrow-toolbar-width::-webkit-outer-spin-button,
.arrow-toolbar-width::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Label section: text input on row 1, position + offset on row 2 */
.arrow-label-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  grid-row: 1 / 3;
  flex-shrink: 0;
}

.arrow-label-subrow {
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
}

.arrow-toolbar-label {
  width: 108px; /* 52px + 4px gap + 52px */
}

/* Waypoint count badge */
.arrow-toolbar-waypoint-badge {
  display: inline-block;
  height: var(--arrow-ctrl-h);
  line-height: var(--arrow-ctrl-h);
  padding: 0 8px;
  background: var(--editable-arrow-waypoint-color);
  color: white;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  box-sizing: border-box;
  flex-shrink: 0;
}

/* Active state for curve/smooth toggles */
button.arrow-toolbar-curve.active,
button.arrow-toolbar-smooth.active {
  background-color: var(--editable-accent-color, #007cba);
  border-color: var(--editable-accent-color, #007cba);
  color: white;
}

button.arrow-toolbar-smooth {
  color: var(--editable-arrow-waypoint-color);
  border-color: var(--editable-arrow-waypoint-color);
}

button.arrow-toolbar-smooth.active {
  background-color: var(--editable-arrow-waypoint-color);
  border-color: var(--editable-arrow-waypoint-color);
  color: white;
}

/* ── Image context panel ─────────────────────────────────────────────────── */

.image-style-controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 0;
  flex-wrap: nowrap;
  min-width: 0;
  flex: 1;
}

/* Centering wrapper — mirrors .arrow-center-wrap */
.image-center-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin: 0 auto;
}

/* Two-row grid — mirrors .arrow-controls-wrap */
.image-controls-wrap {
  display: grid;
  grid-template-rows: auto auto;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Row 1: small muted labels */
.image-ctrl-label {
  font-size: 11px;
  color: #888;
  white-space: nowrap;
  user-select: none;
  text-align: center;
}

/* Row 2: control containers */
.image-ctrl-cell {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  position: relative;
}

/* Base style for all image toolbar buttons and inputs — mirrors arrow-toolbar-btn */
.image-toolbar-btn {
  height: var(--arrow-ctrl-h);
  min-height: var(--arrow-ctrl-h);
  box-sizing: border-box;
  border-radius: 4px;
  border: 1px solid #ccc;
  background: white;
  color: #333;
  font-size: 13px;
  cursor: pointer;
  padding: 0 8px;
  font-family: inherit;
}

.image-toolbar-btn:hover {
  background: #f0f0f0;
  border-color: #999;
}

.image-toolbar-btn:focus {
  outline: 2px solid var(--editable-accent-color, #007cba);
  outline-offset: -1px;
}

.image-toolbar-btn.active {
  background: var(--editable-accent-color, #007cba);
  border-color: var(--editable-accent-color, #007cba);
  color: white;
}

/* Grouped buttons (fit, flip) — joined pill style */
.image-btn-group {
  display: flex;
  flex-direction: row;
}

.image-btn-group .image-toolbar-btn {
  border-radius: 0;
  border-right-width: 0;
}

.image-btn-group .image-toolbar-btn:first-child {
  border-radius: 4px 0 0 4px;
}

.image-btn-group .image-toolbar-btn:last-child {
  border-radius: 0 4px 4px 0;
  border-right-width: 1px;
}

/* Opacity slider — mirrors .arrow-toolbar-opacity */
.image-toolbar-opacity {
  width: 80px;
  height: var(--arrow-ctrl-h);
  cursor: pointer;
  box-sizing: border-box;
  flex-shrink: 0;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 10px;
  border: 1px solid #ccc;
  padding: 0;
  background:
    linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1)),
    repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 0 0 / 10px 10px;
}

.image-toolbar-opacity::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid white;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

.image-toolbar-opacity::-moz-range-track {
  height: 40px;
  border-radius: 10px;
  background:
    linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1)),
    repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 0 0 / 10px 10px;
}

.image-toolbar-opacity::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid white;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

.image-opacity-label {
  font-size: 12px;
  color: #555;
  min-width: 34px;
  text-align: right;
  user-select: none;
}

/* Border radius number input */
.image-toolbar-radius {
  width: 52px;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

.image-toolbar-radius::-webkit-outer-spin-button,
.image-toolbar-radius::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Reset button — red tint to signal destructive */
.image-toolbar-reset {
  color: #dc3545;
  border-color: #dc3545;
}

.image-toolbar-reset:hover {
  background: #dc3545;
  border-color: #dc3545;
  color: white;
}

/* ── Replace warning popup ───────────────────────────────────────────────── */

.image-replace-warning {
  position: fixed;
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffc107;
  border-radius: 6px;
  font-size: 12px;
  padding: 6px 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  z-index: 1000002;
  cursor: pointer;
  white-space: nowrap;
}

/* ── Crop mode ───────────────────────────────────────────────────────────── */

.editable-container.crop-mode .resize-handle {
  cursor: crosshair;
  background-color: var(--editable-accent-color, #007cba);
  opacity: 0.9;
}

/* ── Arrow extension modal ───────────────────────────────────────────────── */

.editable-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000003;
}

.editable-modal {
  background: white;
  border-radius: 8px;
  padding: 24px;
  max-width: 450px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  font-family: system-ui, -apple-system, sans-serif;
}

.editable-modal-title {
  margin: 0 0 16px 0;
  font-size: 18px;
  color: #333;
}

.editable-modal-body {
  margin: 0 0 12px 0;
  color: #555;
  line-height: 1.5;
}

.editable-modal-body-small {
  color: #666;
  font-size: 14px;
  margin-bottom: 20px;
}

.editable-modal-code {
  background: #f0f0f0;
  padding: 2px 6px;
  border-radius: 3px;
}

.editable-modal-code-block {
  display: inline-block;
  padding: 4px 8px;
  margin-top: 4px;
}

.editable-modal-link {
  color: var(--editable-accent-color, #007cba);
}

.editable-modal-buttons {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.editable-modal-cancel {
  padding: 8px 16px;
  border: 1px solid #ccc;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.editable-modal-confirm {
  padding: 8px 16px;
  border: none;
  background: var(--editable-accent-color, #007cba);
  color: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

/* ── Shape panel ──────────────────────────────────────────────────────────── */
/* Mirrors the image panel's label/cell grid layout. */
.shape-center-wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin: 0 auto;
}

.shape-controls-wrap {
  display: grid;
  grid-template-rows: auto auto;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.shape-ctrl-label {
  font-size: 11px;
  color: #888;
  white-space: nowrap;
  user-select: none;
  text-align: center;
}

.shape-ctrl-cell {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  position: relative;
}

.shape-toolbar-select {
  height: var(--arrow-ctrl-h);
  box-sizing: border-box;
  border-radius: 4px;
  border: 1px solid #ccc;
  background: white;
  color: #333;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  padding: 0 4px;
}

.shape-toolbar-color {
  height: var(--arrow-ctrl-h);
  width: 32px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px 0 0 4px;
  background: white;
  cursor: pointer;
  padding: 1px;
}

.shape-toolbar-btn {
  height: var(--arrow-ctrl-h);
  min-height: var(--arrow-ctrl-h);
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-left-width: 0;
  border-radius: 0 4px 4px 0;
  background: white;
  color: #333;
  font-size: 13px;
  cursor: pointer;
  padding: 0 8px;
  font-family: inherit;
}

.shape-toolbar-btn:hover {
  background: #f0f0f0;
  border-color: #999;
}

/* Standalone edit-text button — full border, unlike the appended color clear */
.shape-toolbar-text {
  border-left-width: 1px;
  border-radius: 4px;
}

.shape-btn-group {
  display: flex;
  flex-direction: row;
}

/* Plain-text editing of a shape's content (double-click to edit) */
.shape-content-editing {
  outline: 2px dashed var(--editable-accent-color, #007cba);
  outline-offset: 2px;
  cursor: text;
  min-width: 1ch;
}

/* Draggable pointer-direction handle for callout shapes */
.shape-direction-handle {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: 0;
  border-radius: 50%;
  background: var(--editable-accent-color, #007cba);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  transform: translate(-50%, -50%);
  cursor: grab;
  z-index: 30;
  touch-action: none;
}

.shape-direction-handle:active {
  cursor: grabbing;
}

/* ── Shape picker popover ─────────────────────────────────────────────────── */
.shape-picker-popover {
  position: fixed;
  top: 104px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  max-height: 70vh;
  overflow-y: auto;
  padding: 10px 12px;
  background: white;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
  width: min(420px, 90vw);
}

.shape-picker-group {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #888;
  margin: 8px 2px 4px;
}

.shape-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 6px;
}

.shape-picker-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  padding: 6px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  background: white;
  cursor: pointer;
  color: #42526C;
}

.shape-picker-item:hover {
  border-color: var(--editable-accent-color, #007cba);
  background: #f4f9fc;
}

.shape-picker-item .shape-svg {
  width: 100%;
  height: 100%;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --editable-transition: 0s;
  }

  .editable-toolbar-button,
  .editable-toolbar-submenu-item,
  .editable-button {
    transition: none !important;
  }
}