/* --- СТРУКТУРА ДОКУМЕНТА --- */

.doc-outline-sidebar {
    position: fixed;
    left: -110%; /* Скрываем полностью */
    background-color: #fff;
    overflow-y: auto;
    padding: 15px 0 30px 0;
    box-shadow: 4px 0 10px rgba(0,0,0,0.15);
    
    /* Анимация (transition) работает ТОЛЬКО по умолчанию (мы отключим её для мобил ниже) */
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    z-index: 100; 
    font-family: 'Roboto', Arial, sans-serif;
    
    /* Мобильная версия (базовая) */
    width: 100%; 
    top: 90px;
    height: calc(100vh - 90px);
}

/* Открытое состояние */
.doc-outline-sidebar.open {
    left: 0;
}

/* --- ОТКЛЮЧЕНИЕ АНИМАЦИИ НА МОБИЛЬНЫХ --- */
@media (max-width: 991px) {
    .doc-outline-sidebar {
        transition: none !important; /* Мгновенное открытие/закрытие */
    }
}

/* ДЕСКТОП ВЕРСИЯ */
@media (min-width: 992px) {
    .doc-outline-sidebar {
        width: 320px;
        top: 34px;
        left: -340px;
        height: calc(100vh - 40px);
        box-shadow: 2px 0 8px rgba(0,0,0,0.1);
        /* Возвращаем анимацию для десктопа, если она была сброшена */
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .doc-outline-sidebar.open {
        left: 0;
    }
}

/* Элемент структуры */
.outline-item {
    position: relative;
    display: block;
    font-size: 15px; 
    padding-top: 8px;
    padding-bottom: 8px;
    padding-right: 20px;
    
    color: #444746;
    text-decoration: none !important;
    cursor: pointer;
    border-left: 4px solid transparent;
    transition: background-color 0.1s, color 0.1s; /* Микро-анимация цвета при наведении осталась (не влияет на движение) */
    
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.outline-item:hover {
    background-color: #f0f1f3;
    color: #202124;
}

.outline-item.active {
    color: #0b57d0;
    background-color: #e8f0fe;
    border-left-color: #0b57d0;
    font-weight: 500;
}

/* Скроллбар */
.doc-outline-sidebar::-webkit-scrollbar {
    width: 8px;
}
.doc-outline-sidebar::-webkit-scrollbar-thumb {
    background-color: #dadce0;
    border-radius: 4px;
    border: 2px solid #fff;
}

/* --- ТУЛТИП --- */
.outline-tooltip {
    position: fixed;
    display: none;
    background-color: #202124;
    color: #ffffff;
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 4px;
    z-index: 10000;
    white-space: nowrap;
    width: max-content;
    max-width: 80vw;
    pointer-events: none;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    font-family: 'Roboto', Arial, sans-serif;
    line-height: 1.4;
}