/* CodeMirror 6 Editor Wrapper Styles */

/* Editor wrapper ensures proper sizing */
.editor-wrapper {
  width: 100%;
  min-height: 4rem; /* ~3 lines minimum */
}

/* Ensure CM6 editor fills container and blends seamlessly */
.editor-wrapper .cm-editor {
  width: 100%;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}

/* Override CM6 focus outline - no border on focus */
.editor-wrapper .cm-editor.cm-focused {
  outline: none !important;
  border: none !important;
}

/* Remove any default CM6 borders */
.editor-wrapper .cm-editor .cm-scroller {
  overflow: visible;
}

/* Drag-over visual feedback */
.editor-wrapper.drag-over {
  background-color: var(--bg-tertiary);
  border: 2px dashed var(--accent);
  border-radius: 0.5rem;
}

/* Mobile textarea improvements */
@media (max-width: 767px) {
  .editor-wrapper textarea {
    font-size: 16px; /* Prevents iOS zoom on focus */
  }
}

/* Preview panel styling - inherits from .memo-content in main.css */
.editor-preview {
  padding: 0.75rem;
  background-color: var(--bg-tertiary);
  border-radius: 0.5rem;
}

/* Smooth transition for preview toggle */
.editor-wrapper,
.memo-content {
  transition: opacity 0.15s ease;
}