/* ═══════════════════════════════════════════════════════════════
   NOTION EDITOR — Componente reutilizavel de blocos
   Prefixo: .ne-*  (nunca colide com CSS existente)
   Usa tokens do design system: --bg, --text, --accent, --border, etc.
   ═══════════════════════════════════════════════════════════════ */

/* ── Editor container ──────────────────────────────────────── */
.ne-editor {
  position: relative;
  min-height: 60px;
  outline: none;
  font-family: var(--ff-b, 'Plus Jakarta Sans', sans-serif);
  font-size: 14px;
  line-height: 1.7;
  color: var(--text, #1A1A1A);
}
.ne-editor.ne-readonly { pointer-events: none; opacity: .85; }

/* ── Status indicator ──────────────────────────────────────── */
.ne-status {
  font-size: 11px;
  color: var(--text-3, #9E9E9E);
  transition: opacity .3s;
  min-height: 16px;
  margin-top: 6px;
  text-align: right;
}
.ne-status.ne-saving { color: var(--warning, #F59E0B); }
.ne-status.ne-saved  { color: var(--success, #22C55E); }
.ne-status.ne-error  { color: var(--accent, #E8384F); }

/* ── Block row ─────────────────────────────────────────────── */
.ne-row {
  display: flex;
  align-items: flex-start;
  position: relative;
  padding: 1px 0;
  border-radius: 4px;
  transition: background .1s;
}
.ne-row:hover > .ne-gutter { opacity: 1; }

/* ── Gutter (handle + add) ─────────────────────────────────── */
.ne-gutter {
  display: flex;
  align-items: center;
  gap: 1px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity .12s;
  margin-top: 2px;
  height: 24px;
}
.ne-handle,
.ne-add-btn {
  width: 20px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3, #9E9E9E);
  font-size: 10px;
  border: none;
  background: none;
  border-radius: 3px;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background .1s, color .1s;
}
.ne-handle:hover,
.ne-add-btn:hover {
  background: var(--bg-subtle, #F0EDE6);
  color: var(--text-2, #6B6B6B);
}
.ne-handle { cursor: grab; }
.ne-handle:active { cursor: grabbing; }

/* ── Content area ──────────────────────────────────────────── */
.ne-content { flex: 1; min-width: 0; }

/* ── Contenteditable base ──────────────────────────────────── */
.ne-ce {
  outline: none;
  word-break: break-word;
  white-space: pre-wrap;
  min-height: 24px;
  padding: 2px 0;
  -webkit-user-modify: read-write-plaintext-only;
}
.ne-ce:empty::before {
  content: attr(data-placeholder);
  color: var(--text-3, #9E9E9E);
  pointer-events: none;
  font-style: normal;
}
/* Allow rich text (not plaintext-only) for formatting */
.ne-ce { -webkit-user-modify: read-write; }
.ne-ce code {
  background: var(--bg-subtle, #F0EDE6);
  border-radius: 3px;
  padding: 1px 4px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.9em;
  color: var(--accent, #E8384F);
}
.ne-ce a {
  color: var(--info, #3B82F6);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Paragraph ─────────────────────────────────────────────── */
.ne-ce-paragraph {
  font-size: 14px;
  line-height: 1.7;
}

/* ── Headings ──────────────────────────────────────────────── */
.ne-ce-heading1 {
  font-family: var(--ff-h, 'Space Grotesk', sans-serif);
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.25;
  padding: 6px 0 2px;
}
.ne-ce-heading2 {
  font-family: var(--ff-h, 'Space Grotesk', sans-serif);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.3;
  padding: 4px 0 2px;
}
.ne-ce-heading3 {
  font-family: var(--ff-h, 'Space Grotesk', sans-serif);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.35;
  padding: 3px 0 1px;
}

/* ── List marker ───────────────────────────────────────────── */
.ne-marker {
  flex-shrink: 0;
  width: 20px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  color: var(--text-2, #6B6B6B);
  font-size: 14px;
  padding-top: 3px;
  user-select: none;
}
.ne-row-bulleted .ne-marker { font-size: 18px; line-height: 1.5; padding-top: 0; }
.ne-row-numbered .ne-marker { font-size: 13px; font-weight: 600; }

/* Indent levels for lists */
.ne-indent-1 { padding-left: 24px; }
.ne-indent-2 { padding-left: 48px; }
.ne-indent-3 { padding-left: 72px; }

/* ── Checkbox ──────────────────────────────────────────────── */
.ne-checkbox-box {
  width: 16px;
  height: 16px;
  border: 2px solid #D1D5DB;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 5px;
  margin-right: 6px;
  transition: background .12s, border-color .12s;
}
.ne-checkbox-box:hover { border-color: var(--accent, #E8384F); }
.ne-row-checkbox[data-checked="true"] .ne-checkbox-box {
  background: var(--accent, #E8384F);
  border-color: var(--accent, #E8384F);
}
.ne-row-checkbox[data-checked="true"] .ne-checkbox-box svg {
  display: block;
}
.ne-checkbox-box svg {
  display: none;
  width: 10px;
  height: 10px;
  stroke: #fff;
  stroke-width: 3;
  fill: none;
}
.ne-row-checkbox[data-checked="true"] .ne-ce {
  text-decoration: line-through;
  color: #9CA3AF;
}

/* ── Toggle ────────────────────────────────────────────────── */
.ne-toggle-header {
  display: flex;
  align-items: flex-start;
  gap: 2px;
}
.ne-toggle-arrow {
  width: 22px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  background: none;
  color: var(--text-2, #6B6B6B);
  font-size: 10px;
  flex-shrink: 0;
  border-radius: 3px;
  transition: transform .15s ease, background .1s;
  padding: 0;
  margin-top: 1px;
}
.ne-toggle-arrow:hover { background: var(--bg-subtle, #F0EDE6); }
.ne-toggle-arrow.ne-open { transform: rotate(90deg); }

.ne-toggle-body {
  margin-left: 24px;
  padding-left: 4px;
  border-left: 2px solid var(--border-lt, #F0EDE6);
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .25s ease, opacity .2s ease, padding .2s ease;
}
.ne-toggle-body.ne-open {
  max-height: 5000px;
  opacity: 1;
  padding-top: 2px;
  padding-bottom: 2px;
}

/* ── Callout ───────────────────────────────────────────────── */
.ne-row-callout .ne-callout-wrap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #FFFBEA;
  border: 1px solid #F59E0B;
  border-radius: 8px;
  padding: 12px 14px;
  width: 100%;
}
.ne-callout-emoji {
  font-size: 20px;
  cursor: pointer;
  line-height: 1.4;
  flex-shrink: 0;
  user-select: none;
}
.ne-callout-emoji:hover { opacity: .7; }
.ne-row-callout .ne-ce {
  flex: 1;
  min-height: 22px;
}

/* ── Quote ─────────────────────────────────────────────────── */
.ne-row-quote .ne-ce {
  border-left: 4px solid var(--accent, #E8384F);
  padding-left: 1rem;
  font-style: italic;
  color: var(--text-2, #6B6B6B);
}

/* ── Divider ───────────────────────────────────────────────── */
.ne-divider-line {
  border: none;
  border-top: 1px solid var(--border, #E8E5DE);
  margin: 8px 0;
  cursor: pointer;
  transition: border-color .1s;
}
.ne-divider-line:hover { border-color: var(--text-3, #9E9E9E); }
.ne-row-divider.ne-selected .ne-divider-line {
  border-color: var(--accent, #E8384F);
}

/* ── Image ─────────────────────────────────────────────────── */
.ne-image-figure {
  width: 100%;
  margin: 0;
}
.ne-image-figure img {
  max-width: 100%;
  border-radius: 8px;
  cursor: pointer;
  display: block;
  transition: opacity .15s;
}
.ne-image-figure img:hover { opacity: .92; }
.ne-image-caption {
  outline: none;
  font-size: 12px;
  color: var(--text-3, #9E9E9E);
  margin-top: 6px;
  min-height: 18px;
  text-align: center;
}
.ne-image-caption:empty::before {
  content: attr(data-placeholder);
  color: var(--text-3, #9E9E9E);
  pointer-events: none;
}

/* Image skeleton / upload placeholder */
.ne-image-skeleton {
  width: 100%;
  height: 140px;
  background: var(--bg-subtle, #F0EDE6);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ne-pulse 1.2s ease-in-out infinite;
}
@keyframes ne-pulse {
  0%, 100% { opacity: .6; }
  50% { opacity: 1; }
}
.ne-image-skeleton .ne-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border, #E8E5DE);
  border-top-color: var(--accent, #E8384F);
  border-radius: 50%;
  animation: ne-spin .65s linear infinite;
}
@keyframes ne-spin { to { transform: rotate(360deg); } }

/* Image toolbar */
.ne-img-toolbar {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  background: rgba(0,0,0,.65);
  border-radius: 6px;
  padding: 4px 6px;
  opacity: 0;
  transition: opacity .15s;
}
.ne-row-image:hover .ne-img-toolbar { opacity: 1; }
.ne-img-toolbar button {
  background: none;
  border: none;
  color: #fff;
  font-size: 11px;
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: var(--ff-b, 'Plus Jakarta Sans', sans-serif);
  transition: background .1s;
}
.ne-img-toolbar button:hover { background: rgba(255,255,255,.2); }

/* ── Drag drop indicator ───────────────────────────────────── */
.ne-drop-line {
  height: 2px;
  background: var(--accent, #E8384F);
  border-radius: 1px;
  margin: -1px 0;
  pointer-events: none;
  transition: opacity .1s;
}
.ne-row.ne-dragging { opacity: .4; }

/* ═══════════════════════════════════════════════════════════════
   SLASH COMMAND MENU
   ═══════════════════════════════════════════════════════════════ */
.ne-cmd-menu {
  position: absolute;
  z-index: 9999;
  background: #FFFFFF;
  border: 1px solid #E5E3DE;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
  max-height: 280px;
  overflow-y: auto;
  min-width: 260px;
  padding: 6px;
  animation: ne-menu-in .14s ease-out;
}
@keyframes ne-menu-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ne-cmd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .08s;
  border-left: 3px solid transparent;
}
.ne-cmd-item:hover,
.ne-cmd-item.ne-active {
  background: #F7F5F0;
  border-left-color: #E8384F;
}
.ne-cmd-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F7F5F0;
  border-radius: 6px;
  flex-shrink: 0;
  color: var(--text-2, #6B6B6B);
}
.ne-cmd-icon svg { width: 18px; height: 18px; }
.ne-cmd-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.ne-cmd-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #1A1A1A);
}
.ne-cmd-desc {
  font-size: 11px;
  color: var(--text-3, #9E9E9E);
}

/* ═══════════════════════════════════════════════════════════════
   FLOATING TOOLBAR
   ═══════════════════════════════════════════════════════════════ */
.ne-toolbar {
  position: absolute;
  z-index: 10000;
  background: #1A1A1A;
  border-radius: 8px;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  animation: ne-tb-in .1s ease-out;
}
@keyframes ne-tb-in {
  from { opacity: 0; transform: scale(.95); }
  to   { opacity: 1; transform: scale(1); }
}
.ne-tb-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: #FFFFFF;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: background .08s;
  padding: 0;
  font-family: var(--ff-b, 'Plus Jakarta Sans', sans-serif);
}
.ne-tb-btn:hover { background: rgba(255,255,255,.15); }
.ne-tb-btn.ne-active { background: #E8384F; }
.ne-tb-sep {
  width: 1px;
  height: 16px;
  background: rgba(255,255,255,.2);
  margin: 0 2px;
}
.ne-tb-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Color panel ───────────────────────────────────────────── */
.ne-color-pop {
  position: absolute;
  z-index: 10001;
  background: #FFFFFF;
  border: 1px solid #E5E3DE;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
  padding: 12px;
  min-width: 220px;
  animation: ne-menu-in .14s ease-out;
}
.ne-color-section-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3, #9E9E9E);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
  margin-top: 8px;
}
.ne-color-section-label:first-child { margin-top: 0; }
.ne-color-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.ne-color-sw {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 1.5px solid #E5E3DE;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .08s, box-shadow .08s;
  padding: 0;
  font-size: 9px;
}
.ne-color-sw:hover { transform: scale(1.15); box-shadow: 0 2px 8px rgba(0,0,0,.15); }

/* ── Link input box ────────────────────────────────────────── */
.ne-link-box {
  display: flex;
  gap: 4px;
  padding: 6px 8px;
  background: #2A2A2A;
  border-radius: 6px;
  margin-left: 4px;
}
.ne-link-box input {
  background: #333;
  border: 1px solid #555;
  color: #fff;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
  width: 180px;
  outline: none;
}
.ne-link-box input:focus { border-color: var(--accent, #E8384F); }
.ne-link-box button {
  background: var(--accent, #E8384F);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  font-weight: 600;
}

/* ── Block context menu ────────────────────────────────────── */
.ne-ctx-menu {
  position: absolute;
  z-index: 9999;
  background: #FFFFFF;
  border: 1px solid #E5E3DE;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
  min-width: 190px;
  padding: 6px;
  animation: ne-menu-in .14s ease-out;
}
.ne-ctx-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  font-size: 12.5px;
  color: var(--text-2, #6B6B6B);
  cursor: pointer;
  border-radius: 5px;
  transition: background .08s, color .08s;
}
.ne-ctx-item:hover {
  background: #F7F5F0;
  color: var(--text, #1A1A1A);
}
.ne-ctx-item.ne-danger:hover {
  background: #FEE2E2;
  color: #B91C1C;
}
.ne-ctx-sep {
  height: 1px;
  background: #E5E3DE;
  margin: 4px 8px;
}
/* Submenu container */
.ne-ctx-sub {
  position: absolute;
  left: 100%;
  top: 0;
  margin-left: 4px;
}

/* ── Toast ─────────────────────────────────────────────────── */
.ne-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 10002;
  background: #E8384F;
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-family: var(--ff-b, 'Plus Jakarta Sans', sans-serif);
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
  animation: ne-toast-in .2s ease-out;
}
@keyframes ne-toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════════════════════════ */
html[data-theme="dark"] .ne-editor {
  color: var(--text, #F0F0F5);
}
html[data-theme="dark"] .ne-handle,
html[data-theme="dark"] .ne-add-btn {
  color: var(--text-3, #55556A);
}
html[data-theme="dark"] .ne-handle:hover,
html[data-theme="dark"] .ne-add-btn:hover {
  background: var(--bg-subtle, #22222E);
  color: var(--text-2, #9898B0);
}
html[data-theme="dark"] .ne-ce:empty::before {
  color: var(--text-3, #55556A);
}
html[data-theme="dark"] .ne-ce code {
  background: var(--bg-subtle, #22222E);
}
html[data-theme="dark"] .ne-marker {
  color: var(--text-2, #9898B0);
}
html[data-theme="dark"] .ne-checkbox-box {
  border-color: #4A4A5A;
}
html[data-theme="dark"] .ne-toggle-arrow {
  color: var(--text-2, #9898B0);
}
html[data-theme="dark"] .ne-toggle-arrow:hover {
  background: var(--bg-subtle, #22222E);
}
html[data-theme="dark"] .ne-toggle-body {
  border-left-color: var(--border, #2A2A3A);
}
html[data-theme="dark"] .ne-row-callout .ne-callout-wrap {
  background: rgba(245,158,11,.1);
  border-color: rgba(245,158,11,.3);
}
html[data-theme="dark"] .ne-row-quote .ne-ce {
  color: var(--text-2, #9898B0);
}
html[data-theme="dark"] .ne-divider-line {
  border-top-color: var(--border, #2A2A3A);
}
html[data-theme="dark"] .ne-image-caption {
  color: var(--text-3, #55556A);
}
html[data-theme="dark"] .ne-image-skeleton {
  background: var(--bg-subtle, #22222E);
}
html[data-theme="dark"] .ne-cmd-menu {
  background: #1C1C26;
  border-color: #2A2A3A;
}
html[data-theme="dark"] .ne-cmd-item:hover,
html[data-theme="dark"] .ne-cmd-item.ne-active {
  background: #22222E;
}
html[data-theme="dark"] .ne-cmd-icon {
  background: #22222E;
  color: var(--text-2, #9898B0);
}
html[data-theme="dark"] .ne-cmd-label {
  color: var(--text, #F0F0F5);
}
html[data-theme="dark"] .ne-color-pop {
  background: #1C1C26;
  border-color: #2A2A3A;
}
html[data-theme="dark"] .ne-color-sw {
  border-color: #3A3A4A;
}
html[data-theme="dark"] .ne-ctx-menu {
  background: #1C1C26;
  border-color: #2A2A3A;
}
html[data-theme="dark"] .ne-ctx-item:hover {
  background: #22222E;
  color: var(--text, #F0F0F5);
}
html[data-theme="dark"] .ne-ctx-sep {
  background: #2A2A3A;
}
html[data-theme="dark"] .ne-drop-line {
  background: var(--accent, #E8384F);
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .ne-gutter { opacity: 1; }
  .ne-handle { display: none; }
  .ne-cmd-menu {
    min-width: 220px;
    max-width: calc(100vw - 32px);
  }
  .ne-toolbar {
    max-width: calc(100vw - 16px);
    flex-wrap: wrap;
  }
  .ne-ctx-menu {
    max-width: calc(100vw - 32px);
  }
  .ne-img-toolbar { opacity: 1; }
}