/* Editor-specific styles - using outline to prevent conflicts with user box-shadow */
.ycode-selected {
  outline: 1px solid #0b7efd !important;
  outline-offset: -1px;
}

.ycode-selected-purple {
  outline: 2px solid #a855f7 !important;
  outline-offset: -2px;
}

.ycode-hover {
  outline: 1px solid #0b7efd !important;
  outline-offset: -1px;
}

.ycode-hover-purple {
  outline: 1px solid rgba(168, 85, 247, 0.3) !important;
  outline-offset: -1px;
}

.ycode-component-hover {
  outline: 2px solid rgba(168, 85, 247, 0.5) !important;
  outline-offset: -2px;
}

.ycode-editing {
  outline: 1px solid #0b7efd !important;
  outline-offset: -1px;
}

.ycode-drop-target {
  outline: 2px solid #3b82f6 !important;
  outline-offset: -2px;
  background-color: rgba(59, 130, 246, 0.05) !important;
}


/* Force default cursor on all elements in canvas edit mode */
#canvas-body,
#canvas-body *,
.ycode-layer,
.ycode-layer * {
  cursor: default !important;
}

/* Empty element styling (exclude void/form elements and layers with visible border/background) */
.ycode-layer:empty:not(input):not(select):not(textarea):not(img):not(br):not(hr):not([data-has-visual])::before {
  content: ' ';
  display: block;
  background-color: rgb(191 219 254 / 0.1);
  border: 1px dashed rgb(59 130 246 / 0.5);
  border-radius: 0.125rem;
  color: rgb(59 130 246);
  font-size: 0.75rem;
  padding: 2rem;
  text-align: center;
  width: 100%;
  height: 100%;
  min-height: 3rem;
}

/* Icon SVG styling */
[data-icon] {
  display: inline-block;
}

[data-icon] svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
}

/* GSAP animation hidden state */
[data-gsap-hidden] {
  display: none !important;
}

/* Body layer fills canvas height */
#canvas-body {
  height: 100%;
  min-height: 100%;
}

/* Gap indicator styles */
.gap-indicator-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}

.gap-indicator {
  position: fixed;
  pointer-events: auto;
  cursor: ns-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.gap-indicator-marker {
  width: 20px;
  height: 2px;
  background-color: #ec4899;
  border-radius: 20px;
  pointer-events: none;
}

/* Text editing input */
.ycode-text-editor {
  width: 100%;
  outline: 1px solid #0b7efd !important;
  outline-offset: 0 !important;
  cursor: text !important;
}

.ycode-text-editor * {
  cursor: text !important;
}

/* Hide ProseMirror trailing breaks in text editor */
.ycode-text-editor img.ProseMirror-separator,
.ycode-text-editor br.ProseMirror-trailingBreak {
  display: inline !important;
}

/* Strip native browser appearance from form elements so Tailwind classes apply */
input,
select,
textarea {
  appearance: none;
  -webkit-appearance: none;
}

/* Checked state for custom-styled checkboxes and radios */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background-color: currentColor;
  border-color: transparent;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

input[type="radio"]:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}

/* Remove browser focus outline from form elements in canvas */
input:focus,
textarea:focus,
select:focus,
button:focus {
  outline: none !important;
}
