/* 
   Obsidian CSS Snippet: mermaid-scroll-fix.css
   
   Этот CSS-фикс делает схемы Mermaid динамическими и центрирует их по свободному окну 
   (с учетом сайдбаров), используя относительное позиционирование. Текст и другие 
   блоки остаются на своих стандартных местах.
*/

/* 1. Возвращаем стандартное центрирование sizer-контейнеров (текст по центру) */
.markdown-preview-sizer,
.cm-sizer {
    max-width: var(--file-line-width, 700px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 2. Отключаем контейнерную изоляцию для ВСЕХ родительских элементов схем внутри панели, 
   чтобы cqw гарантированно наследовался от ширины всей панели */
.markdown-preview-sizer,
.markdown-rendered,
.cm-sizer,
.markdown-preview-view *:has(.mermaid-zoom-container),
.markdown-preview-view *:has(.block-language-mermaid),
.markdown-source-view *:has(.mermaid-zoom-container),
.markdown-source-view *:has(.cm-embed-block) {
    container-type: normal !important;
}

/* 3. Делаем контейнеры панелей источником контейнерных запросов (Container Query) */
.markdown-source-view,
.markdown-preview-view,
.workspace-leaf,
.workspace-leaf-content {
    container-type: inline-size !important;
}

/* 3. Динамический breakout и центрирование относительно свободного окна (cqw)
   
   WORKAROUND: Мы используем отрицательные внешние отступы margin-left/margin-right вместо 
   свойства left, потому что блочные контейнеры схем (.block-language-mermaid и .cm-embed-block) 
   по умолчанию выравниваются по левой границе текстового контейнера-сайзера (.cm-sizer).
   Использование margin-left со значением (50% - 47.5cqw) позволяет сдвинуть левую границу 
   блока влево ровно на ту величину, которая необходима для центрирования 95%-схемы во всей 
   доступной ширине панели, независимо от открытых боковых панелей Obsidian.
*/
/* Настройки breakout-контейнеров схем во всех режимах (80% от ширины свободной панели) */
.markdown-preview-view .mermaid-zoom-container,
.markdown-preview-view .block-language-mermaid:not(:has(.mermaid-zoom-container)),
.markdown-source-view .cm-embed-block:has(.mermaid),
.markdown-source-view .cm-embed-block:has(.mermaid-zoom-container) {
    width: 80cqw !important;
    max-width: 80cqw !important;
    margin-left: calc(50% - 40cqw) !important;
    margin-right: calc(50% - 40cqw) !important;
    display: block !important;
    position: relative !important;
    left: 0 !important;
}

/* В режиме Live Preview контейнер зума растягивается на 100% без дополнительных отступов, 
   так как breakout уже применился к родительскому блоку .cm-embed-block */
.markdown-source-view .cm-embed-block .mermaid-zoom-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: 0 !important;
}

/* Внутренний контейнер .mermaid растягиваем на 100% только тогда, когда плагин зума НЕ активен */
.markdown-preview-view .block-language-mermaid:not(:has(.mermaid-zoom-container)) .mermaid,
.markdown-source-view .cm-embed-block:not(:has(.mermaid-zoom-container)) .mermaid {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    left: 0 !important;
    position: static !important;
}

/* Настройки отображения SVG (критично для правильной работы плагина зума) */
.markdown-preview-view .mermaid svg,
.markdown-rendered .mermaid svg,
.canvas-node-content .mermaid svg {
    max-width: none !important;
    width: auto !important;
    height: auto !important;
}

/* Поддержка Canvas (холста) */
.canvas-node-content .mermaid {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    left: 0 !important;
    position: static !important;
}

/* 4. Специфичные настройки для экспортированного HTML-сайта (тело имеет класс .publish)
   
   Этот блок подготавливает контейнеры схем для внедренного JS-кода зума и перетаскивания,
   скрывая стандартные полосы прокрутки браузера и красиво стилизуя кнопки управления.
*/
body.publish .mermaid-zoom-container {
    width: 80cqw !important;
    max-width: 80cqw !important;
    margin-left: calc(50% - 40cqw) !important;
    margin-right: calc(50% - 40cqw) !important;
    height: 700px !important; /* Фиксированная высота для удобства интерактивного зума */
    min-height: 300px !important;
    max-height: 85vh !important;
    overflow: hidden !important; /* Отключаем прокрутку браузера, управление берет на себя JS */
    position: relative !important;
    background: var(--background-secondary) !important;
    border: 1px solid var(--background-modifier-border) !important;
    border-radius: 8px !important;
}

body.publish .mermaid-zoom-content {
    /* Не переопределяем transform, чтобы сохранять inline-трансформы от JS */
    transform-origin: 0px 0px !important;
    width: fit-content !important;
    height: fit-content !important;
    cursor: grab !important;
    user-select: none !important;
}

body.publish .mermaid-zoom-content.dragging {
    cursor: grabbing !important;
}

/* Стилизация внедренных кнопок управления зумом */
body.publish .mermaid-zoom-controls {
    display: flex !important;
    position: absolute !important;
    bottom: 15px !important;
    right: 15px !important;
    gap: 6px !important;
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    padding: 6px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    z-index: 1000 !important;
    opacity: 0.85 !important;
    transition: opacity 0.2s ease !important;
}

body.publish .mermaid-zoom-controls:hover {
    opacity: 1.0 !important;
}

body.publish .mermaid-zoom-btn {
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-size: 16px !important;
    font-weight: bold !important;
    transition: background 0.15s ease !important;
}

body.publish .mermaid-zoom-btn:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

/* Стили для полноэкранного режима */
body.publish .mermaid-zoom-container:fullscreen,
body.publish .mermaid-zoom-container.pseudo-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 999999 !important;
    background: var(--background-primary) !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: hidden !important;
}

body.publish .mermaid-zoom-container:-webkit-full-screen {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 999999 !important;
    background: var(--background-primary) !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: hidden !important;
}

body.publish .mermaid-zoom-container:fullscreen .mermaid-zoom-controls,
body.publish .mermaid-zoom-container.pseudo-fullscreen .mermaid-zoom-controls {
    bottom: 25px !important;
    right: 25px !important;
    background: rgba(0, 0, 0, 0.8) !important;
}

body.publish .mermaid-zoom-container:-webkit-full-screen .mermaid-zoom-controls {
    bottom: 25px !important;
    right: 25px !important;
    background: rgba(0, 0, 0, 0.8) !important;
}