Вы правы, я допустил ошибки. Давайте сделаем правильно - полностью заменим систему отображения геологической колонки на новую, но с сохранением ВСЕГО функционала вашей программы. Вот полный код для замены:

## 1. ЗАМЕНИТЕ функцию `drawWellStructure` на эту:

```javascript
function drawWellStructure(data, scale = 40) {
    const graphicsScrollContainer = document.getElementById('graphicsScrollContainer');
    if (!graphicsScrollContainer) return;
    graphicsScrollContainer.innerHTML = '';
    
    const activeDocType = data.documentationType || 'primary';
    const mergedGeology = createMergedGeologyFromDocumentation(activeDocType);
    const assays = xmlData?.assays || [];
    const totalDepth = data.totalDepth;
    const totalHeight = totalDepth * scale;
    const headerHeight = 50;
    const topReserve = 60;
    
    // СОЗДАЕМ НОВУЮ СТРУКТУРУ КОЛОНКИ
    const columnContainer = document.createElement('div');
    columnContainer.style.cssText = `
        position: relative;
        width: 100%;
        min-width: 900px;
        background: white;
        border: 1px solid #cbd5e1;
        border-radius: 4px;
        margin-top: 10px;
        overflow: hidden;
    `;
    
    // ШАПКА КОЛОНКИ
    const header = document.createElement('div');
    header.style.cssText = `
        display: flex;
        height: ${headerHeight}px;
        background: #e2e8f0;
        border-bottom: 1px solid #94a3b8;
        flex-shrink: 0;
    `;
    
    const depthHeader = document.createElement('div');
    depthHeader.style.cssText = `
        width: 70px;
        min-width: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 0.7rem;
        text-transform: uppercase;
        color: #0f172a;
        border-right: 1px solid #cbd5e1;
        writing-mode: vertical-rl;
        text-orientation: mixed;
        transform: rotate(180deg);
    `;
    depthHeader.textContent = 'глубина, м';
    
    const coreHeader = document.createElement('div');
    coreHeader.style.cssText = `
        width: 120px;
        min-width: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 0.7rem;
        text-transform: uppercase;
        color: #0f172a;
        border-right: 1px solid #cbd5e1;
    `;
    coreHeader.textContent = 'Колонка';
    
    const infoHeader = document.createElement('div');
    infoHeader.style.cssText = `
        flex: 1;
        display: flex;
        align-items: center;
    `;
    
    const drillHeader = document.createElement('div');
    drillHeader.style.cssText = `
        width: 80px;
        min-width: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 0.7rem;
        text-transform: uppercase;
        color: #0f172a;
        border-right: 1px solid #cbd5e1;
    `;
    drillHeader.textContent = 'Кат. бур.';
    
    const assaysHeader = document.createElement('div');
    assaysHeader.style.cssText = `
        width: 140px;
        min-width: 140px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 0.7rem;
        text-transform: uppercase;
        color: #0f172a;
        border-right: 1px solid #cbd5e1;
    `;
    assaysHeader.textContent = 'Пробы';
    
    const descHeader = document.createElement('div');
    descHeader.style.cssText = `
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 0.7rem;
        text-transform: uppercase;
        color: #0f172a;
    `;
    descHeader.textContent = 'Описание пород';
    
    infoHeader.appendChild(drillHeader);
    infoHeader.appendChild(assaysHeader);
    infoHeader.appendChild(descHeader);
    
    header.appendChild(depthHeader);
    header.appendChild(coreHeader);
    header.appendChild(infoHeader);
    columnContainer.appendChild(header);
    
    // ТЕЛО КОЛОНКИ
    const body = document.createElement('div');
    body.style.cssText = `
        display: flex;
        position: relative;
        min-height: ${totalHeight}px;
        overflow-y: auto;
        max-height: 70vh;
    `;
    
    // Область глубины
    const depthArea = document.createElement('div');
    depthArea.style.cssText = `
        width: 70px;
        min-width: 70px;
        background: #f8fafc;
        border-right: 1px solid #cbd5e1;
        position: relative;
    `;
    const depthBody = document.createElement('div');
    depthBody.style.cssText = `position: relative; height: ${totalHeight}px;`;
    depthArea.appendChild(depthBody);
    
    // Область колонки
    const coreArea = document.createElement('div');
    coreArea.style.cssText = `
        width: 120px;
        min-width: 120px;
        background: #ffffff;
        border-right: 1px solid #cbd5e1;
        position: relative;
    `;
    const coreBody = document.createElement('div');
    coreBody.style.cssText = `position: relative; height: ${totalHeight}px;`;
    coreArea.appendChild(coreBody);
    
    // Информационная область
    const infoArea = document.createElement('div');
    infoArea.style.cssText = `
        flex: 1;
        background: #ffffff;
        position: relative;
    `;
    const infoBodyDiv = document.createElement('div');
    infoBodyDiv.style.cssText = `position: relative; height: ${totalHeight}px;`;
    infoArea.appendChild(infoBodyDiv);
    
    body.appendChild(depthArea);
    body.appendChild(coreArea);
    body.appendChild(infoArea);
    columnContainer.appendChild(body);
    
    graphicsScrollContainer.appendChild(columnContainer);
    
    // === ОТРИСОВКА ШКАЛЫ ГЛУБИН ===
    for (let depth = 0; depth <= totalDepth; depth += 5) {
        const yPos = depth * scale;
        if (yPos >= 0 && yPos <= totalHeight) {
            const markDiv = document.createElement('div');
            markDiv.style.cssText = `position: absolute; top: ${yPos}px; left: 0; width: 100%; height: 0;`;
            
            const line = document.createElement('div');
            line.style.cssText = `position: absolute; left: 8px; right: 0; height: 1px; background: #cbd5e1;`;
            
            const label = document.createElement('span');
            label.style.cssText = `
                position: absolute;
                right: 6px;
                font-weight: 600;
                font-size: 0.65rem;
                color: #1e293b;
                background: #f8fafc;
                padding: 0 2px;
                transform: translateY(-50%);
            `;
            label.textContent = depth.toString();
            
            markDiv.appendChild(line);
            markDiv.appendChild(label);
            depthBody.appendChild(markDiv);
        }
    }
    
    // Метки через 1 метр (тонкие линии)
    for (let depth = 0; depth <= totalDepth; depth += 1) {
        if (depth % 5 !== 0) {
            const yPos = depth * scale;
            if (yPos >= 0 && yPos <= totalHeight) {
                const line = document.createElement('div');
                line.style.cssText = `position: absolute; top: ${yPos}px; left: 8px; right: 0; height: 1px; background: #e2e8f0;`;
                depthBody.appendChild(line);
            }
        }
    }
    
    // === ОТРИСОВКА ГЕОЛОГИЧЕСКИХ ИНТЕРВАЛОВ ===
    const geologyBlocks = [];
    
    mergedGeology.forEach((geo, index) => {
        const topY = geo.from * scale;
        const heightY = (geo.to - geo.from) * scale;
        
        if (heightY > 0) {
            // Блок в колонке
            const block = document.createElement('div');
            const bgColor = getStratigraphyBackground({
                stratigraphy: geo.stratigraphy,
                originalStratigraphy: geo.originalStratigraphy
            });
            
            block.style.cssText = `
                position: absolute;
                top: ${topY}px;
                left: 0;
                width: 100%;
                height: ${heightY}px;
                background: ${bgColor};
                border: 1px solid rgba(0,0,0,0.25);
                cursor: pointer;
                transition: all 0.15s ease;
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 1;
            `;
            
            // Возраст
            const ageSpan = document.createElement('span');
            const isDark = isColorDark(bgColor);
            ageSpan.style.cssText = `
                font-weight: 700;
                font-size: 0.7rem;
                color: ${isDark ? '#ffffff' : '#0f172a'};
                background: rgba(255,255,255,0.7);
                padding: 2px 6px;
                border-radius: 2px;
                text-align: center;
                z-index: 2;
            `;
            ageSpan.textContent = geo.originalStratigraphy || geo.stratigraphy || '';
            block.appendChild(ageSpan);
            
            // Крап литологии
            if (geo.lcode && window.LITHOLOGY_PATTERNS && window.LITHOLOGY_PATTERNS[geo.lcode]) {
                const patternOverlay = document.createElement('div');
                const patternSize = getPatternSize(scale);
                const fileName = window.LITHOLOGY_PATTERNS[geo.lcode];
                const patternUrl = `litology/${fileName}`;
                
                patternOverlay.style.cssText = `
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background-image: url("${patternUrl}");
                    background-repeat: repeat;
                    background-size: ${patternSize.width}px ${patternSize.height}px;
                    opacity: 0.5;
                    pointer-events: none;
                    z-index: 1;
                `;
                block.appendChild(patternOverlay);
            }
            
            block.dataset.layerId = index;
            block.addEventListener('click', (e) => {
                e.stopPropagation();
                highlightGeologyBlock(index);
                if (window.geologyCards && window.geologyCards[index]) {
                    window.geologyCards[index].scrollIntoView({ behavior: 'smooth', block: 'center' });
                    window.geologyCards[index].click();
                }
            });
            coreBody.appendChild(block);
            geologyBlocks.push(block);
            
            // Информационная строка
            const infoRow = document.createElement('div');
            infoRow.style.cssText = `
                position: absolute;
                top: ${topY}px;
                left: 0;
                width: 100%;
                height: ${heightY}px;
                display: flex;
                border-bottom: 1px solid #e2e8f0;
                transition: background 0.2s;
                cursor: pointer;
            `;
            
            // Категория бурения
            const drillCell = document.createElement('div');
            drillCell.style.cssText = `
                width: 80px;
                min-width: 80px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: 700;
                font-size: 0.78rem;
                background: #f1f5f9;
                border-right: 1px solid #e2e8f0;
            `;
            
            // Извлекаем категорию из rockCategories
            let drillCat = '—';
            if (geo.rockCategories && geo.rockCategories !== 'Не указано' && geo.rockCategories !== '') {
                const catMatch = geo.rockCategories.match(/- ([IVX]+)/);
                if (catMatch) drillCat = catMatch[1];
            }
            drillCell.textContent = drillCat;
            
            // Ячейка проб
            const assaysCell = document.createElement('div');
            assaysCell.style.cssText = `
                width: 140px;
                min-width: 140px;
                position: relative;
                background: #ffffff;
                border-right: 1px solid #e2e8f0;
                overflow: visible;
            `;
            
            // Ячейка описания
            const descCell = document.createElement('div');
            descCell.style.cssText = `
                flex: 1;
                display: flex;
                align-items: center;
                padding: 0.15rem 0.5rem;
                font-size: 0.75rem;
                color: #1e293b;
                line-height: 1.4;
            `;
            
            let descriptionText = '';
            if (geo.intervals && geo.intervals.length > 0) {
                descriptionText = geo.intervals[0].description || 'Нет описания';
            }
            descCell.textContent = descriptionText;
            
            infoRow.appendChild(drillCell);
            infoRow.appendChild(assaysCell);
            infoRow.appendChild(descCell);
            
            infoRow.addEventListener('click', (e) => {
                e.stopPropagation();
                highlightGeologyBlock(index);
                if (window.geologyCards && window.geologyCards[index]) {
                    window.geologyCards[index].scrollIntoView({ behavior: 'smooth', block: 'center' });
                    window.geologyCards[index].click();
                }
            });
            
            infoBodyDiv.appendChild(infoRow);
            
            // Сохраняем связь
            geo.infoRow = infoRow;
            geo.block = block;
        }
    });
    
    // Функция подсветки блока
    function highlightGeologyBlock(index) {
        geologyBlocks.forEach((block, i) => {
            if (i === index) {
                block.style.border = '2px solid #b91c1c';
                block.style.boxShadow = '0 0 0 3px rgba(185, 28, 28, 0.25)';
                block.style.zIndex = '10';
            } else {
                block.style.border = '1px solid rgba(0,0,0,0.25)';
                block.style.boxShadow = 'none';
                block.style.zIndex = '1';
            }
        });
        
        // Подсвечиваем карточку
        if (window.geologyCards) {
            document.querySelectorAll('.geology-card').forEach((card, i) => {
                if (i === index) {
                    card.style.background = '#fff7ed';
                    card.style.borderLeft = '4px solid #c2410c';
                } else {
                    card.style.background = 'white';
                    card.style.borderLeft = '4px solid #e9ecef';
                }
            });
        }
    }
    
    // === ОТРИСОВКА ПРОБ ===
    if (window.assaysVisible !== false && assays.length > 0) {
        drawAssaysInNewStyle(infoBodyDiv, mergedGeology, scale);
    }
    
    window.geologyBlocks = geologyBlocks;
}
```

## 2. ДОБАВЬТЕ новую функцию для отрисовки проб:

```javascript
function drawAssaysInNewStyle(infoBodyDiv, mergedGeology, scale) {
    const assays = xmlData?.assays || [];
    if (assays.length === 0) return;
    
    // Фильтр проб по типу документации
    let filteredAssays = assays;
    if (window.assayFilter && window.assayFilter !== 'all') {
        filteredAssays = assays.filter(assay => {
            if (window.assayFilter === 'primary') {
                return assay.documentationType === 'Первичное документирование';
            } else if (window.assayFilter === 'final') {
                return assay.documentationType === 'Итоговое документирование';
            }
            return true;
        });
    }
    
    // Разделяем на точечные и интервальные
    const pointAssays = [];
    const intervalAssays = [];
    
    filteredAssays.forEach(assay => {
        const from = assay.from || 0;
        const to = assay.to || from;
        const isPoint = Math.abs(to - from) < 0.1;
        const docType = assay.documentationType === 'Итоговое документирование' ? 'final' : 'primary';
        
        if (isPoint) {
            pointAssays.push({
                depth: from,
                docType: docType,
                number: assay.number,
                type: assay.type,
                description: assay.description,
                value: assay.value,
                unit: assay.unit,
                barcode: assay.barcode,
                author: assay.author,
                samplingDate: assay.samplingDate,
                originalAssay: assay
            });
        } else {
            intervalAssays.push({
                top: from,
                bottom: to,
                docType: docType,
                number: assay.number,
                type: assay.type,
                description: assay.description,
                value: assay.value,
                unit: assay.unit,
                barcode: assay.barcode,
                author: assay.author,
                samplingDate: assay.samplingDate,
                originalAssay: assay
            });
        }
    });
    
    // Находим все строки информации
    const infoRows = infoBodyDiv.querySelectorAll('div[style*="position: absolute"][style*="display: flex"]');
    
    infoRows.forEach((row) => {
        // Находим ячейку проб
        const assaysCell = row.querySelector('div[style*="width: 140px"]');
        if (!assaysCell) return;
        
        assaysCell.innerHTML = '';
        assaysCell.style.position = 'relative';
        assaysCell.style.overflow = 'visible';
        
        const rowTop = parseFloat(row.style.top);
        const rowHeight = parseFloat(row.style.height);
        const layerFrom = rowTop / scale;
        const layerTo = (rowTop + rowHeight) / scale;
        
        // Пробы для этого слоя
        const layerPointAssays = pointAssays.filter(p => p.depth >= layerFrom && p.depth <= layerTo);
        const layerIntervalAssays = intervalAssays.filter(i => 
            (i.top >= layerFrom && i.top <= layerTo) || 
            (i.bottom >= layerFrom && i.bottom <= layerTo) ||
            (i.top <= layerFrom && i.bottom >= layerTo)
        );
        
        // Контейнер для проб
        const container = document.createElement('div');
        container.style.cssText = `
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: visible;
        `;
        assaysCell.appendChild(container);
        
        // Отрисовка точечных проб
        layerPointAssays.forEach((assay) => {
            const yPos = (assay.depth - layerFrom) * scale;
            if (yPos >= 0 && yPos <= rowHeight) {
                const offset = assay.docType === 'primary' ? -25 : 25;
                
                const pointEl = document.createElement('div');
                pointEl.style.cssText = `
                    position: absolute;
                    left: calc(50% + ${offset}px);
                    top: ${yPos}px;
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    background: ${assay.docType === 'primary' ? '#2c3e50' : '#e74c3c'};
                    border: 2px solid #000000;
                    cursor: pointer;
                    z-index: 54;
                    transition: all 0.3s ease;
                    transform: translateX(-50%);
                `;
                
                pointEl.addEventListener('mouseenter', function() {
                    this.style.transform = 'translateX(-50%) scale(1.8)';
                    this.style.boxShadow = '0 0 8px rgba(231, 76, 60, 0.6)';
                    this.style.zIndex = '55';
                });
                
                pointEl.addEventListener('mouseleave', function() {
                    this.style.transform = 'translateX(-50%) scale(1)';
                    this.style.boxShadow = 'none';
                    this.style.zIndex = '54';
                });
                
                pointEl.addEventListener('click', (e) => {
                    e.stopPropagation();
                    showAssayModal(assay.originalAssay);
                });
                
                container.appendChild(pointEl);
                
                // Метка
                const labelOffset = assay.docType === 'primary' ? -45 : 45;
                const label = document.createElement('div');
                label.style.cssText = `
                    position: absolute;
                    left: calc(50% + ${labelOffset}px);
                    top: ${Math.max(yPos, 10)}px;
                    font-size: 8px;
                    font-weight: bold;
                    background: rgba(255,255,255,0.95);
                    padding: 1px 4px;
                    border-radius: 2px;
                    white-space: nowrap;
                    border: 0.5px solid #bdc3c7;
                    cursor: pointer;
                    transform: translateY(-50%);
                    color: ${assay.docType === 'primary' ? '#2c3e50' : '#c0392b'};
                    z-index: 53;
                `;
                label.textContent = assay.depth.toFixed(1);
                label.addEventListener('click', (e) => {
                    e.stopPropagation();
                    showAssayModal(assay.originalAssay);
                });
                container.appendChild(label);
            }
        });
        
        // Отрисовка интервальных проб
        layerIntervalAssays.forEach((assay) => {
            const assayTop = Math.max(assay.top, layerFrom);
            const assayBottom = Math.min(assay.bottom, layerTo);
            const topY = (assayTop - layerFrom) * scale;
            const heightY = (assayBottom - assayTop) * scale;
            
            if (heightY > 2) {
                const offset = assay.docType === 'primary' ? -30 : 30;
                
                const intervalEl = document.createElement('div');
                intervalEl.style.cssText = `
                    position: absolute;
                    left: calc(50% + ${offset}px);
                    top: ${topY}px;
                    width: 6px;
                    height: ${heightY}px;
                    background: ${assay.docType === 'primary' ? 
                        'repeating-linear-gradient(45deg, #2c3e50, #2c3e50 3px, transparent 3px, transparent 6px)' : 
                        'repeating-linear-gradient(45deg, #e74c3c, #e74c3c 3px, #fadbd8 3px, #fadbd8 6px)'};
                    border: 1px solid ${assay.docType === 'primary' ? '#000000' : '#c0392b'};
                    border-radius: 1px;
                    cursor: pointer;
                    transition: all 0.3s ease;
                    z-index: 52;
                `;
                
                intervalEl.addEventListener('mouseenter', function() {
                    this.style.transform = 'scale(1.05)';
                    this.style.boxShadow = '0 2px 8px rgba(231, 76, 60, 0.4)';
                    this.style.zIndex = '53';
                });
                
                intervalEl.addEventListener('mouseleave', function() {
                    this.style.transform = 'scale(1)';
                    this.style.boxShadow = 'none';
                    this.style.zIndex = '52';
                });
                
                intervalEl.addEventListener('click', (e) => {
                    e.stopPropagation();
                    showAssayModal(assay.originalAssay);
                });
                
                container.appendChild(intervalEl);
                
                // Метка для интервала
                if (assay.top >= layerFrom && heightY > 20) {
                    const labelOffset = assay.docType === 'primary' ? -45 : 45;
                    const label = document.createElement('div');
                    label.style.cssText = `
                        position: absolute;
                        left: calc(50% + ${labelOffset}px);
                        top: ${topY}px;
                        font-size: 7px;
                        font-weight: bold;
                        background: rgba(255,255,255,0.95);
                        padding: 1px 3px;
                        border-radius: 2px;
                        white-space: nowrap;
                        border: 0.5px solid #bdc3c7;
                        cursor: pointer;
                        transform: translateY(-50%);
                        color: ${assay.docType === 'primary' ? '#2c3e50' : '#c0392b'};
                        z-index: 53;
                    `;
                    label.textContent = assay.top.toFixed(1);
                    label.addEventListener('click', (e) => {
                        e.stopPropagation();
                        showAssayModal(assay.originalAssay);
                    });
                    container.appendChild(label);
                }
            }
        });
    });
}
```

## 3. ОБНОВИТЕ функцию `createWellStructureDrawing`:

```javascript
function createWellStructureDrawing(structureData) {
    const drawing = document.getElementById('wellStructureDrawing');
    if (!drawing) {
        console.log('❌ Элемент wellStructureDrawing не найден!');
        return;
    }
    
    drawing.innerHTML = '';
    
    const container = document.createElement('div');
    container.style.cssText = `
        display: flex;
        flex-direction: column;
        height: 100%;
        background: white;
        border-radius: 8px;
        border: 1px solid #ddd;
        overflow: hidden;
    `;
    
    // Заголовок
    const mainHeader = document.createElement('div');
    mainHeader.style.cssText = `
        padding: 12px 20px;
        background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
        color: white;
        border-bottom: 1px solid #2c3e50;
        flex-shrink: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    `;
    
    const title = document.createElement('h3');
    const docTypeNames = { 'primary': 'Первичное', 'final': 'Итоговое', 'gis': 'ГИС' };
    const activeDocType = structureData.documentationType;
    title.textContent = `Геологическая колонка • Глубина: ${structureData.totalDepth} м • ${docTypeNames[activeDocType] || activeDocType}`;
    title.style.cssText = `margin: 0; color: white; font-size: 18px; font-weight: 600;`;
    
    const controlsDiv = document.createElement('div');
    controlsDiv.style.cssText = `display: flex; gap: 15px; align-items: center;`;
    
    // Переключатель проб
    const assaysToggle = document.createElement('div');
    assaysToggle.style.cssText = `display: flex; align-items: center; gap: 8px; cursor: pointer;`;
    const switchEl = document.createElement('div');
    switchEl.style.cssText = `
        width: 40px;
        height: 20px;
        background: ${window.assaysVisible !== false ? '#27ae60' : '#95a5a6'};
        border-radius: 10px;
        position: relative;
        transition: all 0.3s;
        border: 2px solid ${window.assaysVisible !== false ? '#27ae60' : '#7f8c8d'};
    `;
    const knob = document.createElement('div');
    knob.style.cssText = `
        width: 16px;
        height: 16px;
        background: white;
        border-radius: 50%;
        position: absolute;
        top: 2px;
        left: ${window.assaysVisible !== false ? '22px' : '2px'};
        transition: all 0.3s;
        box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    `;
    switchEl.appendChild(knob);
    const labelEl = document.createElement('span');
    labelEl.textContent = 'Пробы';
    labelEl.style.cssText = `font-size: 12px; color: white; font-weight: 500;`;
    assaysToggle.appendChild(switchEl);
    assaysToggle.appendChild(labelEl);
    
    assaysToggle.onclick = () => {
        const newState = window.assaysVisible === false;
        window.assaysVisible = newState;
        switchEl.style.background = newState ? '#27ae60' : '#95a5a6';
        switchEl.style.borderColor = newState ? '#27ae60' : '#7f8c8d';
        knob.style.left = newState ? '22px' : '2px';
        updateWellStructureByDocType(activeDocType);
    };
    
    controlsDiv.appendChild(assaysToggle);
    mainHeader.appendChild(title);
    mainHeader.appendChild(controlsDiv);
    container.appendChild(mainHeader);
    
    // Контент
    const contentContainer = document.createElement('div');
    contentContainer.style.cssText = `
        display: flex;
        flex: 1;
        min-height: 0;
        overflow: hidden;
    `;
    
    // Левая панель для колонки
    const visualPanel = document.createElement('div');
    visualPanel.style.cssText = `
        flex: 2;
        min-width: 500px;
        display: flex;
        flex-direction: column;
        border-right: 1px solid #e0e0e0;
        background: #fafafa;
        overflow: hidden;
    `;
    
    const graphicsScrollContainer = document.createElement('div');
    graphicsScrollContainer.id = 'graphicsScrollContainer';
    graphicsScrollContainer.style.cssText = `
        flex: 1;
        overflow: auto;
        padding: 15px;
    `;
    visualPanel.appendChild(graphicsScrollContainer);
    
    // Правая панель с карточками
    const infoPanel = document.createElement('div');
    infoPanel.style.cssText = `
        flex: 1;
        min-width: 400px;
        display: flex;
        flex-direction: column;
        background: #f8f9fa;
        overflow: hidden;
    `;
    
    const infoHeader = document.createElement('div');
    infoHeader.style.cssText = `
        padding: 10px 20px;
        background: #2c3e50;
        color: white;
        font-size: 14px;
        font-weight: 600;
        flex-shrink: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #34495e;
    `;
    
    const headerLeft = document.createElement('div');
    headerLeft.style.cssText = 'display: flex; align-items: center; gap: 10px;';
    const infoTitle = document.createElement('span');
    infoTitle.textContent = 'Интервалы документирования';
    const countBadge = document.createElement('span');
    countBadge.id = 'intervalsCount';
    countBadge.style.cssText = `
        background: #e74c3c;
        color: white;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 600;
    `;
    headerLeft.appendChild(infoTitle);
    headerLeft.appendChild(countBadge);
    
    const headerRight = document.createElement('div');
    headerRight.style.cssText = 'display: flex; align-items: center; gap: 5px;';
    const docTypeSelector = createDocTypeSelector(activeDocType);
    headerRight.appendChild(docTypeSelector);
    
    infoHeader.appendChild(headerLeft);
    infoHeader.appendChild(headerRight);
    infoPanel.appendChild(infoHeader);
    
    const cardsContainer = document.createElement('div');
    cardsContainer.id = 'cardsContainer';
    cardsContainer.style.cssText = `
        flex: 1;
        overflow-y: auto;
        padding: 15px;
        background: white;
    `;
    infoPanel.appendChild(cardsContainer);
    
    contentContainer.appendChild(visualPanel);
    contentContainer.appendChild(infoPanel);
    container.appendChild(contentContainer);
    drawing.appendChild(container);
    
    // Инициализация
    window.currentScale = window.currentScale || 40;
    window.assaysVisible = window.assaysVisible !== undefined ? window.assaysVisible : true;
    window.assayFilter = window.assayFilter || 'all';
    
    updateWellStructureByDocType(activeDocType);
}
```

Теперь всё должно работать правильно:
- Шкала глубины новая и чистая
- Пробы отображаются в своей колонке
- При клике на интервал в колонке или на текст в карточке - выделяется и колонка, и карточка
- Категории бурения отображаются из ваших данных
- Крап литологии из ваших паттернов