.canvas-viewport {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  background: var(--canvas-bg);
}

.canvas-viewport.is-pan-ready,
.canvas-viewport.is-pan-ready * { cursor: grab !important; }

.canvas-viewport.is-panning,
.canvas-viewport.is-panning * {
  cursor: grabbing !important;
  user-select: none;
}

.canvas {
  position: relative;
  min-width: 100%;
  min-height: 100%;
  padding-bottom: var(--canvas-block-end);
}

.canvas-column {
  position: absolute;
  top: var(--canvas-block-start);
  margin-inline-start: var(--canvas-inline-padding);
  min-width: 0;
}

.object-selection-type-label {
  --object-type-label-background: var(--ui-surface-floating);
  display: none;
  position: absolute;
  top: 0;
  right: 4px;
  z-index: 3;
  max-width: calc(100% - 8px);
  padding: 2px 5px;
  overflow: hidden;
  transform: translateY(-50%);
  border-radius: var(--ui-radius-item-selection-pill);
  background: var(--object-type-label-background);
  color: var(--ui-value-subtle);
  font-family: var(--font-family);
  font-size: var(--ui-font-size-micro);
  font-weight: var(--ui-font-weight-regular);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: ltr;
  unicode-bidi: isolate;
  pointer-events: none;
}

.content-panel.is-selected > .object-selection-type-label,
.content-block.is-selected > .object-selection-type-label,
.list-item.is-selection-root > .object-selection-type-label { display: block; }

.content-panel.is-selected > .object-selection-type-label {
  top: 2px;
  transform: none;
}

[dir="rtl"].content-panel.is-selected > .object-selection-type-label,
[dir="rtl"].content-block.is-selected > .object-selection-type-label,
[dir="rtl"].list-item.is-selection-root > .object-selection-type-label {
  right: auto;
  left: 4px;
}

.panel-drag-ghost .object-selection-type-label,
.item-drag-ghost .object-selection-type-label,
:is(.canvas-column, .content-panel, .content-block, .list-item).has-context-toolbar
  > .object-selection-type-label { display: none; }

.canvas-segment {
  --segment-scrollbar-thumb: color-mix(in srgb, var(--text-color) 8%, var(--canvas-bg));
  --segment-scrollbar-thumb-hover: color-mix(in srgb, var(--text-color) 16%, var(--canvas-bg));
  position: absolute;
  inset-inline: 0;
  overflow: hidden;
}

.segment-scroll-viewport {
  position: absolute;
  inset: 0;
  padding-inline-end: 6px;
  overflow-x: hidden;
  overflow-y: auto;
}
.segment-scroll-viewport.has-custom-scrollbar {
  padding-inline-end: 17px;
  scrollbar-width: none;
}
.segment-scroll-viewport.has-custom-scrollbar::-webkit-scrollbar {
  display: none;
  width: 0;
}
.segment-scroll-viewport::-webkit-scrollbar-thumb {
  border: 1px solid transparent;
  background: var(--segment-scrollbar-thumb);
  background-clip: padding-box;
}
.segment-scroll-viewport::-webkit-scrollbar-thumb:hover {
  background: var(--segment-scrollbar-thumb-hover);
  background-clip: padding-box;
}
@-moz-document url-prefix() {
  .segment-scroll-viewport {
    scrollbar-color: var(--segment-scrollbar-thumb) transparent;
  }
}
.canvas-segment.has-boundary-before > .segment-scroll-viewport { top: 12px; }
.canvas-segment.has-boundary-after > .segment-scroll-viewport { bottom: 12px; }

.segment-scrollbar {
  --segment-scrollbar-line: color-mix(in srgb, var(--text-color) 14%, transparent);
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  z-index: 3;
  display: block;
  width: 7px;
  min-height: 0;
  overflow: hidden;
  cursor: pointer;
  touch-action: none;
}

.segment-scrollbar[hidden] { display: none; }

.segment-scrollbar__line {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: var(--segment-scrollbar-line);
  pointer-events: none;
}

.segment-scrollbar__thumb {
  position: absolute;
  top: 0;
  inset-inline: 0;
  border-radius: var(--ui-radius-scrollbar);
  background: var(--segment-scrollbar-thumb);
  pointer-events: none;
  transition: background 100ms ease;
}

.segment-scrollbar:hover .segment-scrollbar__thumb,
.segment-scrollbar:focus-visible .segment-scrollbar__thumb,
.segment-scrollbar.is-dragging .segment-scrollbar__thumb {
  background: var(--segment-scrollbar-thumb-hover);
}

.segment-scrollbar:focus-visible {
  outline: 1px solid var(--ui-accent);
  outline-offset: 1px;
}

.canvas-segment.has-boundary-before > .segment-scrollbar { top: 12px; }

.segment-control-rail {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.segment-boundary-handle {
  position: absolute;
  inset-inline-start: 12px;
  display: grid;
  place-items: center;
  width: calc(100% - 52px);
  height: 16px;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  color: var(--muted-color);
  background: transparent;
  pointer-events: auto;
}

.segment-boundary-handle {
  cursor: ns-resize;
  touch-action: none;
}

.segment-boundary-handle::before {
  width: 100%;
  height: 1px;
  background: currentColor;
  opacity: .3;
  content: "";
  transition: opacity 100ms ease, transform 100ms ease;
}

.segment-boundary-handle:hover::before,
.segment-boundary-handle.is-resizing::before {
  opacity: .82;
  transform: scaleY(1.5);
}

.segment-boundary-handle.is-resizing { color: var(--ui-accent); }

.segment-boundary-delete {
  position: absolute;
  inset-inline-end: 10px;
  z-index: 1;
  width: 22px;
  height: 22px;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  border-radius: var(--ui-radius-circle);
  color: var(--muted-color);
  background: var(--canvas-bg);
  font-size: var(--ui-font-size-action-glyph);
  line-height: var(--ui-line-height-solid);
  opacity: .3;
  cursor: pointer;
  pointer-events: auto;
}

.segment-boundary-delete:hover { color: var(--ui-danger-muted); opacity: .9; }

.canvas.is-resizing-segment { cursor: ns-resize; user-select: none; }

.segment-split-preview-line {
  position: absolute;
  inset-inline: 0;
  z-index: 5;
  height: 1px;
  background: var(--ui-accent);
  box-shadow: 0 0 0 1px var(--ui-editor-split-preview-halo);
  pointer-events: none;
}

.column-controls {
  position: absolute;
  top: 31px;
  inset-inline: 0;
  z-index: 3;
  height: 24px;
  pointer-events: none;
}

.column-header {
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 24px;
  padding: 0 20px 0 2px;
  border-bottom: 1px solid var(--ui-editor-column-border);
  color: var(--muted-color);
  pointer-events: auto;
}

.column-header.is-selected {
  border-bottom-width: 2px;
  border-bottom-color: var(--ui-editor-column-selected-border);
}

.column-header.is-placed {
  border-bottom-width: 1px;
  border-bottom-color: var(--ui-editor-column-border);
  background: var(--ui-control-bg);
}

.column-header__label {
  height: var(--ui-icon-button-size);
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
}

.column-header__identity {
  display: flex;
  align-items: center;
  min-width: 0;
}

.column-drag-handle {
  flex: 0 0 var(--ui-icon-button-size);
  color: inherit;
  opacity: .18;
  cursor: grab;
  touch-action: none;
}

.column-drag-handle::before {
  content: "••";
  font-size: var(--ui-font-size-drag-glyph);
  line-height: var(--ui-line-height-solid);
  letter-spacing: var(--ui-letter-spacing-drag-glyph);
}

.column-header:hover .column-drag-handle,
.column-drag-handle:focus-visible,
.column-drag-handle.is-dragging { opacity: .7; }
.column-drag-handle:active { cursor: grabbing; }

.column-header__label {
  overflow: hidden;
  font-size: var(--ui-font-size-caption);
  letter-spacing: var(--ui-letter-spacing-label);
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

.column-header__actions { display: flex; align-items: center; gap: var(--ui-action-gap-compact); }

.column-split-drag-handle,
.column-duplicate-button,
.column-delete-button {
  position: relative;
  color: inherit;
  font-size: var(--ui-font-size-body-sm);
  line-height: var(--ui-line-height-solid);
  opacity: .32;
}

.column-duplicate-button { cursor: pointer; }
.column-duplicate-button::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--ui-panel-control-icon-size);
  height: var(--ui-panel-control-icon-size);
  transform: translate(-50%, -50%);
  background: currentColor;
  mask-image: url("../assets/icons/UI/Duplicate-icon.svg?v=1.0.3");
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-image: url("../assets/icons/UI/Duplicate-icon.svg?v=1.0.3");
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  content: "";
}

.column-split-drag-handle { cursor: ns-resize; touch-action: none; }
.column-split-drag-handle::before {
  position: absolute;
  top: 5px;
  left: 50%;
  width: 13px;
  height: 1px;
  transform: translateX(-50%);
  background: currentColor;
  content: "";
}
.column-delete-button:not(:disabled) { cursor: pointer; }
.column-delete-button:disabled { visibility: hidden; }
.column-header:hover .column-split-drag-handle,
.column-header:hover .column-duplicate-button,
.column-header.is-selected:not(.is-placed) .column-duplicate-button,
.column-header:hover .column-delete-button:not(:disabled),
.column-split-drag-handle.is-dragging { opacity: .82; }
.canvas.is-placing-segment-split { cursor: ns-resize; user-select: none; }

.new-column-drop-preview {
  position: absolute;
  top: var(--canvas-block-start);
  padding: 0;
  outline: 1px dashed var(--ui-editor-drop-outline);
  outline-offset: 3px;
  pointer-events: none;
}

.new-column-drop-preview .panel-drop-placeholder { margin-bottom: 0; }

.column-boundary-handle,
.column-gutter-resize-handle,
.add-column-button {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  color: var(--muted-color);
  pointer-events: auto;
}

.column-gutter-resize-handle {
  width: 12px;
  height: 100%;
  cursor: col-resize;
  touch-action: none;
}

.canvas:dir(rtl) .column-gutter-resize-handle { transform: translateX(50%); }

.column-gutter-resize-handle::before {
  position: absolute;
  inset-block: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: var(--ui-accent);
  opacity: 0;
  content: "";
  transition: opacity 100ms ease;
}

.column-gutter-resize-handle:hover::before,
.column-gutter-resize-handle:focus-visible::before,
.column-gutter-resize-handle.is-resizing::before { opacity: .72; }

.column-boundary-handle {
  cursor: ew-resize;
  touch-action: none;
}

.column-boundary-handle::before {
  width: var(--ui-column-boundary-icon-size);
  height: var(--ui-column-boundary-icon-size);
  border-radius: var(--ui-radius-circle);
  background: currentColor;
  opacity: .38;
  content: "";
  transition: opacity 100ms ease, transform 100ms ease;
}

.column-boundary-handle:hover::before,
.column-boundary-handle.is-selected::before,
.column-boundary-handle.is-resizing::before {
  opacity: .9;
  transform: scale(1.35);
}

.column-boundary-handle.is-selected,
.column-boundary-handle.is-resizing {
  color: var(--ui-accent);
}

.column-boundary-handle.is-placed {
  color: var(--muted-color);
}

.add-column-button {
  cursor: pointer;
  font-size: var(--ui-font-size-action-glyph);
  opacity: .45;
}

.add-column-button:hover { opacity: .9; }
.canvas.is-resizing-column { cursor: col-resize; user-select: none; }
.canvas.is-reordering-column { cursor: grabbing; user-select: none; }

.column-drag-source { visibility: hidden; }

.column-reorder-placeholder {
  position: absolute;
  z-index: 2;
  border-radius: var(--ui-radius-drag-preview);
  background: color-mix(in srgb, var(--muted-color) 6%, transparent);
  outline: 1px dashed color-mix(in srgb, var(--muted-color) 28%, transparent);
  outline-offset: -1px;
  pointer-events: none;
}

.column-drag-ghost {
  position: fixed;
  z-index: 1000;
  overflow: hidden;
  background: var(--canvas-bg);
  box-shadow: var(--ui-shadow-drag-preview);
  opacity: .96;
  pointer-events: none;
}

.column-drag-ghost > .column-header {
  top: 0;
  inset-inline-start: 0 !important;
}

.column-drag-ghost > .canvas-column {
  inset-inline-start: 0 !important;
  margin-inline-start: 0;
}

.canvas.debug-base-grid::before,
.canvas.debug-active-grid::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  content: "";
}

.canvas.debug-base-grid::before {
  background-image:
    linear-gradient(to right, rgba(48, 71, 59, .055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(48, 71, 59, .055) 1px, transparent 1px);
  background-size: var(--debug-base-grid-size) var(--debug-base-grid-size);
}

.canvas.debug-active-grid::after {
  background-image:
    linear-gradient(to right, rgba(55, 104, 78, .15) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(55, 104, 78, .15) 1px, transparent 1px);
  background-size: var(--debug-active-grid-size) var(--debug-active-grid-size);
}

.canvas.debug-column-bounds .canvas-column {
  outline: 1px dashed rgba(146, 73, 60, .55);
  outline-offset: 3px;
}

.canvas.debug-segment-bounds .canvas-segment {
  outline: 1px dashed rgba(78, 92, 137, .48);
  outline-offset: -1px;
}