/* === Neumorphism (ПОЛНЫЙ: РАМКИ В ТЕКСТЕ И НА ПОЛЯХ) === */
:root {
  --sn-badge-bg: #000000;
  --sn-badge-text: #ffffff;
  --sn-badge-border: #3d3d3d;
  --sn-active-bg: var(--interactive-accent);
  --sn-active-text: #ffffff;
}

/* 1. Общий контейнер */
.sidenote-margin {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: var(--text-normal);
}

/* 2. СТАНДАРТНЫЕ СНОСКИ НА ПОЛЯХ (Черный квадрат) */
.sidenote-margin:not(.margin-note)[data-sidenote-num]::before {
  content: attr(data-sidenote-num) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 1.7em !important;
  height: 1.7em !important;
  margin-right: 15px !important; 
  padding: 0 4px;
  background-color: var(--sn-badge-bg) !important;
  border: 1px solid var(--sn-badge-border) !important;
  border-radius: 4px !important;
  color: var(--sn-badge-text) !important;
  font-family: var(--font-monospace) !important;
  font-size: 0.85em !important;
  font-weight: 600 !important;
  vertical-align: middle;
  line-height: 1;
}

/* 3. MARGIN-NOTE НА ПОЛЯХ (Символ 𝚤 в рамке с фоном) */
.sidenote-margin.margin-note[data-sidenote-num]::before {
  content: "𝚤" !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 1.2em !important;
  height: 1.2em !important;
  margin-right: 10px !important; 
  
  /* Фиолетовое заполнение и рамка */
  background-color: #7b2cbf !important; /* Насыщенный фиолетовый */
  border: 1px solid #9d4edd !important;   /* Светло-фиолетовая кайма */
  border-radius: 4px !important;
  
  color: #ffffff !important; /* Белый символ на фиолетовом фоне */
  font-size: 1.2em !important;
  font-weight: bold !important;
}

/* 4. ОТОБРАЖЕНИЕ В ТЕКСТЕ (Индикаторы внутри заметки) */

/* 4.1. Обычные цифры в тексте (Черный квадрат) */
:is(.sidenote-number, .cm-sidenote-number):not(.margin-note)::after {
  content: attr(data-sidenote-num);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4em !important;
  height: 1.4em !important;
  background-color: var(--sn-badge-bg);
  border: 1px solid var(--sn-badge-border);
  border-radius: 3px;
  color: var(--sn-badge-text);
  font-size: 0.8em !important;
  font-weight: bold;
  transform: translate(3px, -1px);
}

/* 4.2. СИМВОЛ 𝚤 В ТЕКСТЕ (БЕЗОПАСНАЯ РАМКА-НАКЛАДКА) */

/* Основной контейнер оставляем нетронутым для плагина */
:is(.sidenote-number, .cm-sidenote-number).margin-note {
  color: transparent !important; /* Делаем оригинальный текст невидимым */
  font-size: 0.8em !important;   /* Сохраняем масштаб для плагина */
  /* НЕ добавляем позиционирование и флексы сюда! */
}

/* Создаем рамку как независимый слой */
:is(.sidenote-number, .cm-sidenote-number).margin-note::before {
  content: "𝚤" !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  /* РАЗМЕР КВАДРАТА (Миниатюрный) */
  width: 1.5em !important;
  height: 1.5em !important;
  
  /* ЦВЕТ И СТИЛЬ */
  background-color: #5a189a !important;
  border: 1px solid #7b2cbf !important;
  border-radius: 2px !important;
  color: #ffffff !important;
  
  /* ШРИФТ ВНУТРИ */
  font-size: 0.85em !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  /* ПОЗИЦИОНИРОВАНИЕ (ПОДЪЕМ ВВЕРХ) */
  /* Используем вертикальное выравнивание, которое не ломает sidenotes */
  vertical-align: 0.4em !important; 
  margin-left: -0.5em !important; /* Компенсируем ширину, чтобы не раздвигать слова */
  margin-right: 0.2em !important;
  
  visibility: visible !important;
  pointer-events: none !important;
}

/* Полностью отключаем старый ::after */
:is(.sidenote-number, .cm-sidenote-number).margin-note::after {
  display: none !important;
}

/
/* 5. ХОВЕР-ЭФФЕКТЫ */
.sidenote-margin:hover[data-sidenote-num]::before,
.sidenote-number:hover::after,
.sidenote-margin.is-active[data-sidenote-num]::before {
  background-color: var(--sn-active-bg) !important;
  color: var(--sn-active-text) !important;
  border-color: var(--sn-active-bg) !important;
}