/* layout-editor.css */

/* Developer Panel Toggle */
#dev-toggle-btn {
  position: absolute;
  top: 1cqh;
  left: 1cqw;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  border-radius: 50%;
  width: 3cqw;
  height: 3cqw;
  min-width: 30px;
  min-height: 30px;
  font-size: clamp(1.5cqh, 1.5cqw, 2cqh);
  z-index: calc(var(--z-editor) + 20);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0.5cqh 1cqh rgba(0,0,0,0.5);
  transition: transform 0.2s, background 0.2s;
}

#dev-toggle-btn:hover {
  transform: scale(1.1);
  background: rgba(0, 0, 0, 0.8);
}

/* Developer Panel */
#developer-panel {
  position: absolute;
  top: 5cqh; /* offset below the toggle button */
  left: 1cqw;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  color: white;
  padding: 1.5cqh 1cqw;
  border-radius: 1cqh;
  font-family: monospace;
  font-size: clamp(1cqh, 1cqw, 1.5cqh);
  z-index: calc(var(--z-editor) + 10);
  box-shadow: 0 0.5cqh 1cqh rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  gap: 1cqh;
  min-width: 15cqw;
}

#developer-panel.hidden, #dev-toggle-btn.hidden {
  display: none;
}

.dev-header {
  font-weight: bold;
  color: #ffeb3b;
  text-align: center;
  margin-bottom: 0.5cqh;
}

.dev-row {
  display: flex;
  justify-content: space-between;
  gap: 0.5cqw;
}

.dev-divider {
  border-color: rgba(255,255,255,0.2);
  margin: 0.5cqh 0;
}

#developer-panel button {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: 1px solid rgba(255,255,255,0.3);
  padding: 0.5cqh;
  border-radius: 0.5cqh;
  font-family: monospace;
  font-size: inherit;
  flex: 1;
}

#developer-panel button:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Edit Layout Overlays */
body.layout-editor-active .layout-editable:hover {
  outline: max(0.08cqw, 1px) dotted rgba(255, 255, 255, 0.75);
}

body.layout-editor-active .layout-editable.is-selected {
  outline: max(0.1cqw, 1px) dashed rgba(255, 236, 90, 0.95);
  outline-offset: 0.25cqh;
  z-index: calc(var(--z-editor) + 5) !important;
}

body.layout-editor-active .scene.active {
  pointer-events: auto !important; /* ensure everything is clickable for selection */
}

/* Resize Handles */
.resize-handle {
  position: absolute;
  width: 1.5cqw;
  height: 1.5cqw;
  background: #ffeb3b;
  border: max(0.1cqw, 1px) solid #000;
  border-radius: 50%;
  z-index: 100;
  display: none;
}

.layout-editable.is-selected .resize-handle {
  display: block;
}

.resize-handle.nw { top: -0.75cqw; left: -0.75cqw; cursor: nwse-resize; }
.resize-handle.ne { top: -0.75cqw; right: -0.75cqw; cursor: nesw-resize; }
.resize-handle.sw { bottom: -0.75cqw; left: -0.75cqw; cursor: nesw-resize; }
.resize-handle.se { bottom: -0.75cqw; right: -0.75cqw; cursor: nwse-resize; }

/* Info Panel */
#editor-info-panel {
  position: absolute;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 1cqh 1cqw;
  border-radius: 0.5cqh;
  font-family: monospace;
  font-size: clamp(1cqh, 1cqw, 1.2cqh);
  z-index: var(--z-editor);
  pointer-events: auto;
  border: 1px solid #555;
  white-space: nowrap;
}

#editor-info-panel.hidden {
  display: none;
}

#editor-info-panel button {
  background: #444;
  color: white;
  border: none;
  padding: 0.2cqh 0.5cqw;
  margin: 0.2cqh 0.2cqw;
  cursor: pointer;
  font-size: inherit;
}

#editor-info-panel button:hover {
  background: #666;
}

/* Editor Grid Overlay */
#editor-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--z-editor);
  background-image: 
    linear-gradient(to right, rgba(255,255,255,0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.1) 1px, transparent 1px);
  background-size: 5cqw 10cqh; /* approx 20 cols, 10 rows */
}

#editor-grid::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  border-top: 1px solid rgba(255,0,0,0.3);
}

#editor-grid::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  border-left: 1px solid rgba(255,0,0,0.3);
}

#editor-grid.hidden {
  display: none;
}

/* Editor Safe Area Overlay */
#editor-safe-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--z-editor);
}

#editor-safe-area.hidden {
  display: none;
}

.safe-area-box {
  position: absolute;
  border: 2px dashed rgba(0, 255, 0, 0.5);
  background: rgba(0, 255, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 255, 0, 0.8);
  font-family: monospace;
  font-size: 1cqw;
  text-align: center;
}

.dev-controls-area { top: 1cqh; left: 1cqw; width: 16cqw; height: 35cqh; }
.logo-area { top: 2cqh; right: 2cqw; width: 10cqw; height: 12cqh; }
.central-area { top: 20cqh; left: 20cqw; right: 20cqw; bottom: 20cqh; }
.bottom-area { bottom: 2cqh; left: 20cqw; right: 20cqw; height: 10cqh; }

/* Anchor markers for thought clouds (only visible in edit mode) */
.anchor-marker {
  position: absolute;
  width: 1cqw;
  height: 1cqw;
  background: #ff5722;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: pointer;
  z-index: 101;
  display: none;
}

body.layout-editor-active .anchor-marker {
  display: block;
}