diff --git a/package-lock.json b/package-lock.json
index 878fd2b..caa4d2e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,9 @@
             "dependencies": {
                 "@primeuix/themes": "^1.0.0",
                 "chart.js": "3.3.2",
+                "katex": "^0.16.27",
                 "marked": "^17.0.1",
+                "marked-katex-extension": "^5.1.6",
                 "primeicons": "^7.0.0",
                 "primevue": "^4.3.1",
                 "tailwindcss-primeui": "^0.5.0",
@@ -2271,6 +2273,31 @@
             "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
             "dev": true
         },
+        "node_modules/katex": {
+            "version": "0.16.27",
+            "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.27.tgz",
+            "integrity": "sha512-aeQoDkuRWSqQN6nSvVCEFvfXdqo1OQiCmmW1kc9xSdjutPv7BGO7pqY9sQRJpMOGrEdfDgF2TfRXe5eUAD2Waw==",
+            "funding": [
+                "https://opencollective.com/katex",
+                "https://github.com/sponsors/katex"
+            ],
+            "license": "MIT",
+            "dependencies": {
+                "commander": "^8.3.0"
+            },
+            "bin": {
+                "katex": "cli.js"
+            }
+        },
+        "node_modules/katex/node_modules/commander": {
+            "version": "8.3.0",
+            "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+            "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 12"
+            }
+        },
         "node_modules/keyv": {
             "version": "4.5.4",
             "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -2374,6 +2401,16 @@
                 "node": ">= 20"
             }
         },
+        "node_modules/marked-katex-extension": {
+            "version": "5.1.6",
+            "resolved": "https://registry.npmjs.org/marked-katex-extension/-/marked-katex-extension-5.1.6.tgz",
+            "integrity": "sha512-vYpLXwmlIDKILIhJtiRTgdyZRn5sEYdFBuTmbpjD7lbCIzg0/DWyK3HXIntN3Tp8zV6hvOUgpZNLWRCgWVc24A==",
+            "license": "MIT",
+            "peerDependencies": {
+                "katex": ">=0.16 <0.17",
+                "marked": ">=4 <18"
+            }
+        },
         "node_modules/merge2": {
             "version": "1.4.1",
             "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
diff --git a/package.json b/package.json
index 86e982d..074987a 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,9 @@
     "dependencies": {
         "@primeuix/themes": "^1.0.0",
         "chart.js": "3.3.2",
+        "katex": "^0.16.27",
         "marked": "^17.0.1",
+        "marked-katex-extension": "^5.1.6",
         "primeicons": "^7.0.0",
         "primevue": "^4.3.1",
         "tailwindcss-primeui": "^0.5.0",
diff --git a/src/main.js b/src/main.js
index 7e17e16..590dab7 100644
--- a/src/main.js
+++ b/src/main.js
@@ -8,6 +8,7 @@ import ConfirmationService from 'primevue/confirmationservice';
 import ToastService from 'primevue/toastservice';
 
 import '@/assets/styles.scss';
+import 'katex/dist/katex.min.css';
 
 const app = createApp(App);
 
diff --git a/src/views/pages/marketing/MarketingAnalysis.vue b/src/views/pages/marketing/MarketingAnalysis.vue
index 67c404f..b7e98da 100644
--- a/src/views/pages/marketing/MarketingAnalysis.vue
+++ b/src/views/pages/marketing/MarketingAnalysis.vue
@@ -200,83 +200,149 @@
                         <div class="space-y-6">
                             <div v-for="(segment, index) in displayContent" :key="index">
                                 <!-- Two-column pair: paragraph text + adjacent json-chart/table -->
-                                <div
-                                    v-if="segment.type === 'paired'"
-                                    class="report-pair"
-                                    :class="{
-                                        'report-pair--mobile-chart-first': segment.mobileOrder === 'chart-first',
-                                        'report-pair--mobile-text-first': segment.mobileOrder === 'text-first'
-                                    }"
-                                >
-                                    <!-- IMPORTANT: media first so text can wrap around float -->
-                                    <div class="report-pair__media">
-                                        <div v-if="segment.media.type === 'chart'">
-                                            <div class="mb-2" v-if="segment.media.title">
-                                                <h3 class="text-xl font-semibold text-surface-900 dark:text-surface-0">{{ segment.media.title }}</h3>
+                                <div v-if="segment.type === 'paired'" class="report-pair">
+                                    <!-- IMPORTANT: preserve original markdown order in DOM -->
+                                    <template v-if="segment.order === 'text-media'">
+                                        <div class="report-pair__text">
+                                            <div class="report-pair__textStack">
+                                                <div v-for="(t, tIdx) in segment.texts || []" :key="tIdx" class="markdown-content" v-html="t.html"></div>
                                             </div>
-                                            <div class="report-pair__mediaChart">
-                                                <div class="chart-container report-pair__chart-container">
-                                                    <Chart :type="segment.media.chartType" :data="segment.media.data" :options="toCompactChartOptions(segment.media.options)" />
-                                                </div>
-                                            </div>
-                                            <div v-if="segment.media.key === 'channelsPotential' && segment.media.channels?.length" class="mt-4 space-y-2">
-                                                <div v-for="channel in segment.media.channels" :key="channel.name" class="p-3 border-round bg-surface-50 dark:bg-surface-800">
-                                                    <div class="flex justify-content-between align-items-center mb-2">
-                                                        <span class="font-semibold text-surface-900 dark:text-surface-0">{{ channel.name }}</span>
-                                                        <Tag :value="`Потенциал: ${channel.potential}`" :severity="channel.potential >= 80 ? 'success' : channel.potential >= 60 ? 'warning' : 'info'" />
+                                        </div>
+
+                                        <div class="report-pair__media">
+                                            <div v-if="segment.media.type === 'chart'">
+                                                <div class="report-pair__mediaChart">
+                                                    <div class="chart-container report-pair__chart-container">
+                                                        <Chart v-if="hasRenderableChartData(segment.media.data)" :type="segment.media.chartType" :data="segment.media.data" :options="toCompactChartOptions(segment.media.options)" />
+                                                        <div v-else class="p-3 border-round text-center text-surface-500 dark:text-surface-400">Нет данных для отображения</div>
                                                     </div>
-                                                    <p class="text-sm text-surface-600 dark:text-surface-400">{{ channel.justification }}</p>
+                                                    <div v-if="segment.media.title" class="chart-caption text-surface-700 dark:text-surface-300">{{ segment.media.title }}</div>
+                                                </div>
+                                                <div v-if="segment.media.key === 'channelsPotential' && segment.media.channels?.length" class="mt-4 space-y-2">
+                                                    <div v-for="channel in segment.media.channels" :key="channel.name" class="p-3 border-round bg-surface-50 dark:bg-surface-800">
+                                                        <div class="flex justify-content-between align-items-center mb-2">
+                                                            <span class="font-semibold text-surface-900 dark:text-surface-0">{{ channel.name }}</span>
+                                                            <Tag :value="`Потенциал: ${channel.potential}`" :severity="channel.potential >= 80 ? 'success' : channel.potential >= 60 ? 'warning' : 'info'" />
+                                                        </div>
+                                                        <p class="text-sm text-surface-600 dark:text-surface-400">{{ channel.justification }}</p>
+                                                    </div>
+                                                </div>
+                                            </div>
+
+                                            <div v-else-if="segment.media.type === 'marketShareChart'">
+                                                <div class="report-pair__mediaChart">
+                                                    <div class="chart-container report-pair__chart-container">
+                                                        <Chart v-if="hasRenderableChartData(segment.media.data)" :type="segment.media.chartType" :data="segment.media.data" :options="toCompactChartOptions(segment.media.options)" />
+                                                        <div v-else class="p-3 border-round text-center text-surface-500 dark:text-surface-400">Нет данных для отображения</div>
+                                                    </div>
+                                                    <div v-if="segment.media.title" class="chart-caption text-surface-700 dark:text-surface-300">{{ segment.media.title }}</div>
+                                                </div>
+                                            </div>
+
+                                            <div v-else-if="segment.media.type === 'comparisonTable'">
+                                                <div class="mb-4">
+                                                    <h3 class="text-xl font-semibold text-surface-900 dark:text-surface-0"><i class="pi pi-table mr-2"></i>Сравнительная таблица</h3>
+                                                </div>
+                                                <div class="overflow-x-auto border-round" style="border: 1px solid var(--surface-border)">
+                                                    <table class="comparison-table w-full border-collapse">
+                                                        <thead>
+                                                            <tr>
+                                                                <th class="comparison-table-th">Характеристика</th>
+                                                                <th class="comparison-table-th text-center">Мы</th>
+                                                                <th class="comparison-table-th text-center">Конкурент A</th>
+                                                                <th class="comparison-table-th text-center">Конкурент B</th>
+                                                            </tr>
+                                                        </thead>
+                                                        <tbody>
+                                                            <tr v-for="(row, idx) in segment.media.data" :key="idx" class="comparison-table-tr">
+                                                                <td class="comparison-table-td font-semibold">{{ row.feature }}</td>
+                                                                <td class="comparison-table-td text-center">
+                                                                    <Tag :value="row.us" severity="info" />
+                                                                </td>
+                                                                <td class="comparison-table-td text-center">
+                                                                    <Tag :value="row.compA" :severity="row.compA === 'Высокая' || row.compA === 'Премиум' ? 'danger' : row.compA === 'Низкая' ? 'success' : 'warning'" />
+                                                                </td>
+                                                                <td class="comparison-table-td text-center">
+                                                                    <Tag :value="row.compB" :severity="row.compB === 'Высокая' || row.compB === 'Премиум' ? 'danger' : row.compB === 'Низкая' ? 'success' : 'warning'" />
+                                                                </td>
+                                                            </tr>
+                                                        </tbody>
+                                                    </table>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </template>
+
+                                    <template v-else>
+                                        <div class="report-pair__media">
+                                            <div v-if="segment.media.type === 'chart'">
+                                                <div class="report-pair__mediaChart">
+                                                    <div class="chart-container report-pair__chart-container">
+                                                        <Chart v-if="hasRenderableChartData(segment.media.data)" :type="segment.media.chartType" :data="segment.media.data" :options="toCompactChartOptions(segment.media.options)" />
+                                                        <div v-else class="p-3 border-round text-center text-surface-500 dark:text-surface-400">Нет данных для отображения</div>
+                                                    </div>
+                                                    <div v-if="segment.media.title" class="chart-caption text-surface-700 dark:text-surface-300">{{ segment.media.title }}</div>
+                                                </div>
+                                                <div v-if="segment.media.key === 'channelsPotential' && segment.media.channels?.length" class="mt-4 space-y-2">
+                                                    <div v-for="channel in segment.media.channels" :key="channel.name" class="p-3 border-round bg-surface-50 dark:bg-surface-800">
+                                                        <div class="flex justify-content-between align-items-center mb-2">
+                                                            <span class="font-semibold text-surface-900 dark:text-surface-0">{{ channel.name }}</span>
+                                                            <Tag :value="`Потенциал: ${channel.potential}`" :severity="channel.potential >= 80 ? 'success' : channel.potential >= 60 ? 'warning' : 'info'" />
+                                                        </div>
+                                                        <p class="text-sm text-surface-600 dark:text-surface-400">{{ channel.justification }}</p>
+                                                    </div>
+                                                </div>
+                                            </div>
+
+                                            <div v-else-if="segment.media.type === 'marketShareChart'">
+                                                <div class="report-pair__mediaChart">
+                                                    <div class="chart-container report-pair__chart-container">
+                                                        <Chart v-if="hasRenderableChartData(segment.media.data)" :type="segment.media.chartType" :data="segment.media.data" :options="toCompactChartOptions(segment.media.options)" />
+                                                        <div v-else class="p-3 border-round text-center text-surface-500 dark:text-surface-400">Нет данных для отображения</div>
+                                                    </div>
+                                                    <div v-if="segment.media.title" class="chart-caption text-surface-700 dark:text-surface-300">{{ segment.media.title }}</div>
+                                                </div>
+                                            </div>
+
+                                            <div v-else-if="segment.media.type === 'comparisonTable'">
+                                                <div class="mb-4">
+                                                    <h3 class="text-xl font-semibold text-surface-900 dark:text-surface-0"><i class="pi pi-table mr-2"></i>Сравнительная таблица</h3>
+                                                </div>
+                                                <div class="overflow-x-auto border-round" style="border: 1px solid var(--surface-border)">
+                                                    <table class="comparison-table w-full border-collapse">
+                                                        <thead>
+                                                            <tr>
+                                                                <th class="comparison-table-th">Характеристика</th>
+                                                                <th class="comparison-table-th text-center">Мы</th>
+                                                                <th class="comparison-table-th text-center">Конкурент A</th>
+                                                                <th class="comparison-table-th text-center">Конкурент B</th>
+                                                            </tr>
+                                                        </thead>
+                                                        <tbody>
+                                                            <tr v-for="(row, idx) in segment.media.data" :key="idx" class="comparison-table-tr">
+                                                                <td class="comparison-table-td font-semibold">{{ row.feature }}</td>
+                                                                <td class="comparison-table-td text-center">
+                                                                    <Tag :value="row.us" severity="info" />
+                                                                </td>
+                                                                <td class="comparison-table-td text-center">
+                                                                    <Tag :value="row.compA" :severity="row.compA === 'Высокая' || row.compA === 'Премиум' ? 'danger' : row.compA === 'Низкая' ? 'success' : 'warning'" />
+                                                                </td>
+                                                                <td class="comparison-table-td text-center">
+                                                                    <Tag :value="row.compB" :severity="row.compB === 'Высокая' || row.compB === 'Премиум' ? 'danger' : row.compB === 'Низкая' ? 'success' : 'warning'" />
+                                                                </td>
+                                                            </tr>
+                                                        </tbody>
+                                                    </table>
                                                 </div>
                                             </div>
                                         </div>
 
-                                        <div v-else-if="segment.media.type === 'marketShareChart'">
-                                            <div class="mb-2" v-if="segment.media.title">
-                                                <h3 class="text-xl font-semibold text-surface-900 dark:text-surface-0"><i class="pi pi-chart-pie mr-2"></i>{{ segment.media.title }}</h3>
-                                            </div>
-                                            <div class="report-pair__mediaChart">
-                                                <div class="chart-container report-pair__chart-container">
-                                                    <Chart :type="segment.media.chartType" :data="segment.media.data" :options="toCompactChartOptions(segment.media.options)" />
-                                                </div>
+                                        <div class="report-pair__text">
+                                            <div class="report-pair__textStack">
+                                                <div v-for="(t, tIdx) in segment.texts || []" :key="tIdx" class="markdown-content" v-html="t.html"></div>
                                             </div>
                                         </div>
-
-                                        <div v-else-if="segment.media.type === 'comparisonTable'">
-                                            <div class="mb-4">
-                                                <h3 class="text-xl font-semibold text-surface-900 dark:text-surface-0"><i class="pi pi-table mr-2"></i>Сравнительная таблица</h3>
-                                            </div>
-                                            <div class="overflow-x-auto border-round" style="border: 1px solid var(--surface-border)">
-                                                <table class="comparison-table w-full border-collapse">
-                                                    <thead>
-                                                        <tr>
-                                                            <th class="comparison-table-th">Характеристика</th>
-                                                            <th class="comparison-table-th text-center">Мы</th>
-                                                            <th class="comparison-table-th text-center">Конкурент A</th>
-                                                            <th class="comparison-table-th text-center">Конкурент B</th>
-                                                        </tr>
-                                                    </thead>
-                                                    <tbody>
-                                                        <tr v-for="(row, idx) in segment.media.data" :key="idx" class="comparison-table-tr">
-                                                            <td class="comparison-table-td font-semibold">{{ row.feature }}</td>
-                                                            <td class="comparison-table-td text-center">
-                                                                <Tag :value="row.us" severity="info" />
-                                                            </td>
-                                                            <td class="comparison-table-td text-center">
-                                                                <Tag :value="row.compA" :severity="row.compA === 'Высокая' || row.compA === 'Премиум' ? 'danger' : row.compA === 'Низкая' ? 'success' : 'warning'" />
-                                                            </td>
-                                                            <td class="comparison-table-td text-center">
-                                                                <Tag :value="row.compB" :severity="row.compB === 'Высокая' || row.compB === 'Премиум' ? 'danger' : row.compB === 'Низкая' ? 'success' : 'warning'" />
-                                                            </td>
-                                                        </tr>
-                                                    </tbody>
-                                                </table>
-                                            </div>
-                                        </div>
-                                    </div>
-
-                                    <div class="report-pair__text">
-                                        <div class="markdown-content" v-html="segment.text.html"></div>
-                                    </div>
+                                    </template>
                                 </div>
 
                                 <div v-else-if="segment.type === 'markdown'">
@@ -284,12 +350,11 @@
                                 </div>
 
                                 <div v-else-if="segment.type === 'chart'">
-                                    <div class="mb-4" v-if="segment.title">
-                                        <h3 class="text-xl font-semibold text-surface-900 dark:text-surface-0">{{ segment.title }}</h3>
-                                    </div>
                                     <div class="chart-container" :style="segment.chartHeight">
-                                        <Chart :type="segment.chartType" :data="segment.data" :options="segment.options" />
+                                        <Chart v-if="hasRenderableChartData(segment.data)" :type="segment.chartType" :data="segment.data" :options="segment.options" />
+                                        <div v-else class="p-3 border-round text-center text-surface-500 dark:text-surface-400">Нет данных для отображения</div>
                                     </div>
+                                    <div v-if="segment.title" class="chart-caption text-surface-700 dark:text-surface-300">{{ segment.title }}</div>
                                     <div v-if="segment.key === 'channelsPotential' && segment.channels?.length" class="mt-4 space-y-2">
                                         <div v-for="channel in segment.channels" :key="channel.name" class="p-3 border-round bg-surface-50 dark:bg-surface-800">
                                             <div class="flex justify-content-between align-items-center mb-2">
@@ -384,7 +449,8 @@
                                             <h4 class="text-lg font-semibold text-surface-700 dark:text-surface-300 m-0">{{ segment.marketShareChart.title }}</h4>
                                         </div>
                                         <div class="chart-container" :style="segment.marketShareChart.chartHeight">
-                                            <Chart :type="segment.marketShareChart.chartType" :data="segment.marketShareChart.data" :options="segment.marketShareChart.options" />
+                                            <Chart v-if="hasRenderableChartData(segment.marketShareChart.data)" :type="segment.marketShareChart.chartType" :data="segment.marketShareChart.data" :options="segment.marketShareChart.options" />
+                                            <div v-else class="p-3 border-round text-center text-surface-500 dark:text-surface-400">Нет данных для отображения</div>
                                         </div>
                                     </div>
 
@@ -505,7 +571,8 @@
                                         <h3 class="text-xl font-semibold text-surface-900 dark:text-surface-0"><i class="pi pi-chart-pie mr-2"></i>{{ segment.title }}</h3>
                                     </div>
                                     <div class="chart-container" :style="segment.chartHeight">
-                                        <Chart :type="segment.chartType" :data="segment.data" :options="segment.options" />
+                                        <Chart v-if="hasRenderableChartData(segment.data)" :type="segment.chartType" :data="segment.data" :options="segment.options" />
+                                        <div v-else class="p-3 border-round text-center text-surface-500 dark:text-surface-400">Нет данных для отображения</div>
                                     </div>
                                 </div>
 
@@ -718,6 +785,7 @@
 <script setup>
 import MarketingService from '@/service/MarketingService';
 import { marked } from 'marked';
+import markedKatex from 'marked-katex-extension';
 import Button from 'primevue/button';
 import Chart from 'primevue/chart';
 import Checkbox from 'primevue/checkbox';
@@ -736,6 +804,8 @@ const toast = useToast();
 const router = useRouter();
 const route = useRoute();
 
+let isKatexMarkedConfigured = false;
+
 // Constants
 const VALID_REGIONS = [
     'Алматы',
@@ -1243,7 +1313,7 @@ const extractJsonFromMarkdown = (markdown) => {
 
     // Find all code blocks that might contain JSON
     // Match ```json, ```json:identifier, or plain ``` blocks
-    const codeBlockRegex = /```(?:json(?::(\w+))?)?\n([\s\S]*?)\n```/g;
+    const codeBlockRegex = /```(?:json(?::(\w+))?)?\r?\n([\s\S]*?)\r?\n```/g;
     let match;
 
     while ((match = codeBlockRegex.exec(markdown)) !== null) {
@@ -1364,8 +1434,52 @@ const renderMarkdown = (markdown) => {
         return '';
     }
     try {
+        // Support LaTeX blocks written as \[ ... \] by normalizing to $$ ... $$ (what KaTeX/marked extension expects).
+        // We apply this only outside fenced code blocks to avoid mangling JSON/code.
+        const normalizeLatexMathDelimiters = (input) => {
+            if (!input || typeof input !== 'string') return input;
+
+            // Split into "fenced code blocks" and "everything else".
+            // Fence pattern: ```lang?\n ... \n```
+            const fenceRe = /```[^\n]*\n[\s\S]*?\n```/g;
+            let out = '';
+            let lastIndex = 0;
+            let m;
+
+            const normalizeChunk = (chunk) => {
+                // Block math: \[ ... \]  ->  $$ ... $$
+                // Use non-greedy match across newlines.
+                let s = chunk.replace(/\\\[([\s\S]*?)\\\]/g, (_full, body) => `\n\n$$\n${body.trim()}\n$$\n\n`);
+                // Inline math: \( ... \) -> $ ... $ (optional but useful)
+                s = s.replace(/\\\(([\s\S]*?)\\\)/g, (_full, body) => `$${body.trim()}$`);
+                return s;
+            };
+
+            while ((m = fenceRe.exec(input)) !== null) {
+                const before = input.slice(lastIndex, m.index);
+                out += normalizeChunk(before);
+                out += m[0]; // keep fenced code blocks unchanged
+                lastIndex = m.index + m[0].length;
+            }
+            out += normalizeChunk(input.slice(lastIndex));
+            return out;
+        };
+
+        // Register KaTeX extension once (idempotent-ish in practice, but we guard to be safe).
+        // We avoid throwing on invalid LaTeX so markdown rendering never crashes the report.
+        if (!isKatexMarkedConfigured) {
+            marked.use(
+                markedKatex({
+                    throwOnError: false,
+                    strict: 'ignore'
+                })
+            );
+            isKatexMarkedConfigured = true;
+        }
+
         // В marked v17 используется marked.parse() с опциями вторым параметром
-        return marked.parse(markdown, { breaks: true, gfm: true });
+        const normalized = normalizeLatexMathDelimiters(markdown);
+        return marked.parse(normalized, { breaks: true, gfm: true });
     } catch (error) {
         console.error('Error rendering markdown:', error);
         // В случае ошибки возвращаем исходный текст
@@ -1373,13 +1487,48 @@ const renderMarkdown = (markdown) => {
     }
 };
 
+/**
+ * Split markdown into block-level segments so charts/code blocks can be rendered strictly in-flow
+ * between the exact neighboring blocks (paragraphs, lists, headings, etc.).
+ *
+ * Important: we keep rendering via `renderMarkdown()` for compatibility, but use `marked.lexer()`
+ * to determine block boundaries and to mark token type for safer pairing logic.
+ */
+const pushMarkdownTokens = (segments, markdownChunk) => {
+    if (!markdownChunk || typeof markdownChunk !== 'string') return;
+
+    const trimmed = markdownChunk.trim();
+    if (!trimmed) return;
+
+    let tokens = [];
+    try {
+        tokens = marked.lexer(markdownChunk, { breaks: true, gfm: true }) || [];
+    } catch (e) {
+        // If lexer fails, fall back to a single segment (still in-flow, just less granular).
+        segments.push({ type: 'markdown', html: renderMarkdown(markdownChunk), mdTokenType: 'raw' });
+        return;
+    }
+
+    for (const token of tokens) {
+        if (!token || token.type === 'space') continue;
+        const raw = typeof token.raw === 'string' ? token.raw : '';
+        if (!raw.trim()) continue;
+        segments.push({
+            type: 'markdown',
+            html: renderMarkdown(raw),
+            mdTokenType: token.type
+        });
+    }
+};
+
 const seasonalityChartOptions = {
     responsive: true,
     maintainAspectRatio: false,
     plugins: {
         legend: {
             display: true,
-            position: 'top'
+            position: 'bottom',
+            align: 'center'
         }
     },
     scales: {
@@ -1401,7 +1550,8 @@ const conversionFunnelChartOptions = {
     plugins: {
         legend: {
             display: true,
-            position: 'top'
+            position: 'bottom',
+            align: 'center'
         }
     },
     scales: {
@@ -1442,7 +1592,8 @@ const competitorsBarChartOptions = {
     plugins: {
         legend: {
             display: true,
-            position: 'top'
+            position: 'bottom',
+            align: 'center'
         }
     },
     scales: {
@@ -1457,8 +1608,31 @@ const competitorsBarChartOptions = {
     }
 };
 
+// Marketing-friendly color palette (cycled as needed)
+const MARKETING_COLORS = ['#4F46E5', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899'];
+
+const getMarketingColors = (count, offset = 0) => {
+    const safeCount = Math.max(0, Number(count) || 0);
+    if (safeCount === 0) return [];
+    const base = MARKETING_COLORS.length ? MARKETING_COLORS : ['#3B82F6'];
+    return Array.from({ length: safeCount }, (_, i) => base[(i + offset) % base.length]);
+};
+
 const buildSeasonalityChartData = (seasonality) => {
     if (!seasonality || typeof seasonality !== 'object') return null;
+
+    // New backend format: Chart.js data shape { labels: [...], datasets: [...] }
+    if (isChartJsData(seasonality)) return normalizeChartJsData(seasonality, 'line');
+
+    // Chart.js-like (labels exist) but datasets missing/empty -> return safe shape so UI can show placeholder
+    if (Array.isArray(seasonality.labels)) {
+        return {
+            labels: seasonality.labels,
+            datasets: Array.isArray(seasonality.datasets) ? seasonality.datasets : []
+        };
+    }
+
+    // Legacy format: object map { "Январь": 80, ... }
     return {
         labels: Object.keys(seasonality),
         datasets: [
@@ -1482,7 +1656,9 @@ const buildConversionFunnelChartData = (funnel) => {
             {
                 label: 'Пользователей',
                 data: funnel.map((item) => item.value),
-                backgroundColor: '#3B82F6',
+                backgroundColor: getMarketingColors(funnel.length),
+                borderColor: '#ffffff',
+                borderWidth: 2,
                 borderRadius: 4
             }
         ]
@@ -1520,8 +1696,9 @@ const buildAudienceSegmentationChartData = (segmentation) => {
         datasets: [
             {
                 data: ageValues,
-                backgroundColor: ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6'],
-                borderWidth: 0
+                backgroundColor: getMarketingColors(ageValues.length),
+                borderColor: '#ffffff',
+                borderWidth: 2
             }
         ]
     };
@@ -1537,8 +1714,9 @@ const buildAudienceSegmentationChartData = (segmentation) => {
                               const value = g?.value;
                               return value != null ? parseFloat(value) : 0;
                           }),
-                          backgroundColor: segmentation.genders.map((_, idx) => ['#EC4899', '#3B82F6'][idx % 2]),
-                          borderWidth: 0
+                          backgroundColor: getMarketingColors(segmentation.genders.length),
+                          borderColor: '#ffffff',
+                          borderWidth: 2
                       }
                   ]
               }
@@ -1571,15 +1749,13 @@ const buildSegmentsChannelMatrix = (matrix) => {
 // Build market share chart data
 const buildMarketShareChartData = (marketShareChart) => {
     if (!Array.isArray(marketShareChart) || marketShareChart.length === 0) return null;
-    const colors = ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899', '#F97316', '#06B6D4'];
-
     return {
         labels: marketShareChart.map((item) => item.name),
         datasets: [
             {
                 data: marketShareChart.map((item) => item.value),
-                backgroundColor: marketShareChart.map((_, idx) => colors[idx % colors.length]),
-                borderColor: '#fff',
+                backgroundColor: getMarketingColors(marketShareChart.length),
+                borderColor: '#ffffff',
                 borderWidth: 2
             }
         ]
@@ -1597,7 +1773,9 @@ const buildCompetitorsBarChartData = (competitors, metricType = 'reach') => {
                 label: metricType === 'reach' ? 'Охват аудитории' : 'Подписчики',
                 // Check nested structure digitalMetrics!
                 data: competitors.map((comp) => (comp.digitalMetrics ? comp.digitalMetrics[metricType] || 0 : comp[metricType] || 0)),
-                backgroundColor: metricType === 'reach' ? '#6366F1' : '#3B82F6', // Purple for reach, blue for followers
+                backgroundColor: getMarketingColors(competitors.length, metricType === 'reach' ? 0 : 1),
+                borderColor: '#ffffff',
+                borderWidth: 2,
                 borderRadius: 4
             }
         ]
@@ -1650,25 +1828,52 @@ const isChartJsData = (value) => {
 };
 
 // Helper: normalize Chart.js datasets to have sane colors
-const normalizeChartJsData = (raw) => {
+// - For pie/doughnut/bar we default to per-item colors (arrays) + white borders
+// - If backgroundColor is already an array or function, we keep it (custom colors)
+const normalizeChartJsData = (raw, chartType) => {
     if (!isChartJsData(raw)) return null;
-    const colors = ['#6366F1', '#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899', '#06B6D4'];
+    const type = String(chartType || raw.chartType || '').toLowerCase();
+    const wantsPerItemColors = type === 'pie' || type === 'doughnut' || type === 'bar';
 
     return {
-        labels: raw.labels,
+        labels: Array.isArray(raw.labels) ? raw.labels : [],
         datasets: raw.datasets.map((dataset, idx) => {
-            const fallback = colors[idx % colors.length];
-            const bg = dataset.backgroundColor || dataset.borderColor || fallback;
+            const data = Array.isArray(dataset?.data) ? dataset.data : [];
+
+            const hasCustomBgArray = Array.isArray(dataset?.backgroundColor);
+            const hasCustomBgFn = typeof dataset?.backgroundColor === 'function';
+
+            const backgroundColor = wantsPerItemColors && !hasCustomBgArray && !hasCustomBgFn ? getMarketingColors(data.length, idx) : dataset?.backgroundColor;
+
+            // Keep existing borderColor if provided; otherwise apply white borders for separation on partitioned charts
+            const borderColor = dataset?.borderColor ?? (wantsPerItemColors ? '#ffffff' : undefined);
+            const borderWidth = dataset?.borderWidth ?? (wantsPerItemColors ? 2 : undefined);
+
+            // For non-partitioned charts, keep old behavior: if colors are missing, use a reasonable fallback
+            const fallbackColor = getMarketingColors(1, idx)[0];
+            const resolvedBg = typeof backgroundColor === 'undefined' ? dataset?.borderColor || fallbackColor : backgroundColor;
+            const resolvedBorder = typeof borderColor === 'undefined' ? dataset?.borderColor || resolvedBg : borderColor;
+
             return {
                 ...dataset,
-                backgroundColor: dataset.backgroundColor || bg,
-                borderColor: dataset.borderColor || bg,
+                data,
+                backgroundColor: resolvedBg,
+                borderColor: resolvedBorder,
+                ...(typeof borderWidth !== 'undefined' ? { borderWidth } : {}),
                 borderRadius: dataset.borderRadius ?? 4
             };
         })
     };
 };
 
+// Helper: check if chart has any renderable data (avoid crashing when datasets is missing/empty)
+const hasRenderableChartData = (chartData) => {
+    if (!chartData || typeof chartData !== 'object') return false;
+    const datasets = Array.isArray(chartData.datasets) ? chartData.datasets : [];
+    if (datasets.length === 0) return false;
+    return datasets.some((ds) => Array.isArray(ds?.data) && ds.data.length > 0);
+};
+
 // Main function to map chartsData to segments
 const mapChartsDataToSegments = (chartsData) => {
     if (!chartsData || typeof chartsData !== 'object') return [];
@@ -1741,7 +1946,7 @@ const mapChartsDataToSegments = (chartsData) => {
 
     // 2. Market Share Chart (in root of chartsData)
     if (chartsData.marketShareChart) {
-        const marketShareChartData = Array.isArray(chartsData.marketShareChart) ? buildMarketShareChartData(chartsData.marketShareChart) : normalizeChartJsData(chartsData.marketShareChart);
+        const marketShareChartData = Array.isArray(chartsData.marketShareChart) ? buildMarketShareChartData(chartsData.marketShareChart) : normalizeChartJsData(chartsData.marketShareChart, 'pie');
 
         if (marketShareChartData) {
             segments.push({
@@ -1851,9 +2056,9 @@ const mapChartsDataToSegments = (chartsData) => {
         });
     }
 
-    // 8. Conversion Funnel (if exists for backward compatibility)
-    if (chartsData.conversionFunnel && Array.isArray(chartsData.conversionFunnel)) {
-        const chartData = buildConversionFunnelChartData(chartsData.conversionFunnel);
+    // 8. Conversion Funnel (supports Chart.js format too)
+    if (chartsData.conversionFunnel) {
+        const chartData = isChartJsData(chartsData.conversionFunnel) ? normalizeChartJsData(chartsData.conversionFunnel, 'bar') : buildConversionFunnelChartData(chartsData.conversionFunnel);
         if (chartData) {
             segments.push({
                 type: 'chart',
@@ -1867,9 +2072,9 @@ const mapChartsDataToSegments = (chartsData) => {
         }
     }
 
-    // 9. Channels Potential (if exists for backward compatibility)
-    if (chartsData.channelsPotential && Array.isArray(chartsData.channelsPotential)) {
-        const chartData = buildChannelsPotentialChartData(chartsData.channelsPotential);
+    // 9. Channels Potential (supports Chart.js format too)
+    if (chartsData.channelsPotential) {
+        const chartData = isChartJsData(chartsData.channelsPotential) ? normalizeChartJsData(chartsData.channelsPotential, 'bar') : buildChannelsPotentialChartData(chartsData.channelsPotential);
         if (chartData) {
             segments.push({
                 type: 'chart',
@@ -1879,14 +2084,14 @@ const mapChartsDataToSegments = (chartsData) => {
                 data: chartData,
                 options: channelsPotentialChartOptions,
                 chartHeight: 'height: 300px',
-                channels: chartsData.channelsPotential
+                channels: Array.isArray(chartsData.channelsPotential) ? chartsData.channelsPotential : []
             });
         }
     }
 
     // 11. Audience charts (Chart.js config)
     if (chartsData.audienceAge) {
-        const chartData = normalizeChartJsData(chartsData.audienceAge);
+        const chartData = normalizeChartJsData(chartsData.audienceAge, 'bar');
         if (chartData) {
             segments.push({
                 type: 'chart',
@@ -1900,7 +2105,7 @@ const mapChartsDataToSegments = (chartsData) => {
         }
     }
     if (chartsData.audienceGender) {
-        const chartData = normalizeChartJsData(chartsData.audienceGender);
+        const chartData = normalizeChartJsData(chartsData.audienceGender, 'pie');
         if (chartData) {
             segments.push({
                 type: 'chart',
@@ -1934,7 +2139,7 @@ const mapJsonBlockToSegment = (identifier, data, rawText) => {
     const key = identifier?.toLowerCase();
     switch (key) {
         case 'audienceage': {
-            const chartData = normalizeChartJsData(data);
+            const chartData = normalizeChartJsData(data, 'bar');
             if (!chartData) return null;
             return {
                 type: 'chart',
@@ -1947,7 +2152,7 @@ const mapJsonBlockToSegment = (identifier, data, rawText) => {
             };
         }
         case 'audiencegender': {
-            const chartData = normalizeChartJsData(data);
+            const chartData = normalizeChartJsData(data, 'pie');
             if (!chartData) return null;
             return {
                 type: 'chart',
@@ -1960,7 +2165,7 @@ const mapJsonBlockToSegment = (identifier, data, rawText) => {
             };
         }
         case 'seasonality': {
-            const chartData = isChartJsData(data) ? normalizeChartJsData(data) : buildSeasonalityChartData(data);
+            const chartData = isChartJsData(data) ? normalizeChartJsData(data, 'line') : buildSeasonalityChartData(data);
             if (!chartData) return null;
             return {
                 type: 'chart',
@@ -1974,7 +2179,7 @@ const mapJsonBlockToSegment = (identifier, data, rawText) => {
         }
         case 'funnel':
         case 'conversionfunnel': {
-            const chartData = isChartJsData(data) ? normalizeChartJsData(data) : buildConversionFunnelChartData(data);
+            const chartData = isChartJsData(data) ? normalizeChartJsData(data, 'bar') : buildConversionFunnelChartData(data);
             if (!chartData) return null;
             return {
                 type: 'chart',
@@ -1987,7 +2192,7 @@ const mapJsonBlockToSegment = (identifier, data, rawText) => {
             };
         }
         case 'channelspotential': {
-            const chartData = isChartJsData(data) ? normalizeChartJsData(data) : buildChannelsPotentialChartData(data);
+            const chartData = isChartJsData(data) ? normalizeChartJsData(data, 'bar') : buildChannelsPotentialChartData(data);
             if (!chartData) return null;
             return {
                 type: 'chart',
@@ -2001,7 +2206,7 @@ const mapJsonBlockToSegment = (identifier, data, rawText) => {
             };
         }
         case 'marketsharechart': {
-            const chartData = isChartJsData(data) ? normalizeChartJsData(data) : null;
+            const chartData = isChartJsData(data) ? normalizeChartJsData(data, 'pie') : null;
             if (!chartData) return null;
             return {
                 type: 'marketShareChart',
@@ -2224,7 +2429,7 @@ const getChartSegmentByIdentifier = (identifier, chartsData) => {
 
     switch (key) {
         case 'audienceage': {
-            const chartData = normalizeChartJsData(chartsData.audienceAge);
+            const chartData = normalizeChartJsData(chartsData.audienceAge, 'bar');
             if (!chartData) return null;
             return {
                 type: 'chart',
@@ -2237,7 +2442,7 @@ const getChartSegmentByIdentifier = (identifier, chartsData) => {
             };
         }
         case 'audiencegender': {
-            const chartData = normalizeChartJsData(chartsData.audienceGender);
+            const chartData = normalizeChartJsData(chartsData.audienceGender, 'pie');
             if (!chartData) return null;
             return {
                 type: 'chart',
@@ -2345,7 +2550,7 @@ const getChartSegmentByIdentifier = (identifier, chartsData) => {
             return null;
 
         case 'marketsharechart': {
-            const marketShareChartData = Array.isArray(chartsData.marketShareChart) ? buildMarketShareChartData(chartsData.marketShareChart) : normalizeChartJsData(chartsData.marketShareChart);
+            const marketShareChartData = Array.isArray(chartsData.marketShareChart) ? buildMarketShareChartData(chartsData.marketShareChart) : normalizeChartJsData(chartsData.marketShareChart, 'pie');
             if (!marketShareChartData) return null;
             return {
                 type: 'marketShareChart',
@@ -2367,8 +2572,8 @@ const getChartSegmentByIdentifier = (identifier, chartsData) => {
         }
         case 'channelspotential':
         case 'channels':
-            if (chartsData.channelsPotential && Array.isArray(chartsData.channelsPotential)) {
-                const chartData = buildChannelsPotentialChartData(chartsData.channelsPotential);
+            if (chartsData.channelsPotential) {
+                const chartData = isChartJsData(chartsData.channelsPotential) ? normalizeChartJsData(chartsData.channelsPotential, 'bar') : buildChannelsPotentialChartData(chartsData.channelsPotential);
                 if (chartData) {
                     return {
                         type: 'chart',
@@ -2378,7 +2583,7 @@ const getChartSegmentByIdentifier = (identifier, chartsData) => {
                         data: chartData,
                         options: channelsPotentialChartOptions,
                         chartHeight: 'height: 300px',
-                        channels: chartsData.channelsPotential
+                        channels: Array.isArray(chartsData.channelsPotential) ? chartsData.channelsPotential : []
                     };
                 }
             }
@@ -2386,8 +2591,8 @@ const getChartSegmentByIdentifier = (identifier, chartsData) => {
 
         case 'funnel':
         case 'conversionfunnel':
-            if (chartsData.conversionFunnel && Array.isArray(chartsData.conversionFunnel)) {
-                const chartData = buildConversionFunnelChartData(chartsData.conversionFunnel);
+            if (chartsData.conversionFunnel) {
+                const chartData = isChartJsData(chartsData.conversionFunnel) ? normalizeChartJsData(chartsData.conversionFunnel, 'bar') : buildConversionFunnelChartData(chartsData.conversionFunnel);
                 if (chartData) {
                     return {
                         type: 'chart',
@@ -2481,28 +2686,15 @@ const tryParseJsonSegment = (text) => {
         // Check if it's Chart.js format (datasets and labels)
         if (parsedJson && typeof parsedJson === 'object' && !Array.isArray(parsedJson)) {
             if (parsedJson.datasets && Array.isArray(parsedJson.datasets) && parsedJson.labels && Array.isArray(parsedJson.labels)) {
-                // Prepare chart data with proper formatting
-                const chartData = {
-                    labels: parsedJson.labels,
-                    datasets: parsedJson.datasets.map((dataset, index) => {
-                        // Add default colors if not provided
-                        const colors = ['#6366F1', '#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6'];
-                        const color = dataset.backgroundColor || dataset.borderColor || colors[index % colors.length];
-
-                        return {
-                            ...dataset,
-                            backgroundColor: dataset.backgroundColor || color,
-                            borderColor: dataset.borderColor || color,
-                            borderRadius: dataset.borderRadius || 4
-                        };
-                    })
-                };
-
                 // Determine chart type based on dataset type or default to bar
                 const chartType = parsedJson.chartType || 'bar';
 
                 // Use appropriate options based on chart type
-                const options = chartType === 'pie' ? pieChartOptions : competitorsBarChartOptions;
+                const options = chartType === 'pie' || chartType === 'doughnut' ? pieChartOptions : chartType === 'line' ? seasonalityChartOptions : competitorsBarChartOptions;
+
+                // Normalize chart data (colors/borders, safety)
+                const chartData = normalizeChartJsData(parsedJson, chartType);
+                if (!chartData) return null;
 
                 // Get title from label or use default
                 const title = parsedJson.datasets[0]?.label || 'График';
@@ -2546,7 +2738,7 @@ const parseFullAnalysisWithCharts = (fullAnalysis, chartsData) => {
 
     const segments = [];
     // Combined regex for both placeholders [[CHART_*]], JSON blocks ```json:identifier, and plain ```json blocks
-    const combinedRegex = /(\[\[CHART_(\w+)\]\]|```json:(\w+)\n([\s\S]*?)\n```|```json\n([\s\S]*?)\n```|```\n([\s\S]*?)\n```)/g;
+    const combinedRegex = /(\[\[CHART_(\w+)\]\]|```json:(\w+)\r?\n([\s\S]*?)\r?\n```|```json\r?\n([\s\S]*?)\r?\n```|```\r?\n([\s\S]*?)\r?\n```)/g;
     let lastIndex = 0;
     let match;
 
@@ -2557,26 +2749,9 @@ const parseFullAnalysisWithCharts = (fullAnalysis, chartsData) => {
         if (match.index > lastIndex) {
             const textBefore = fullAnalysis.slice(lastIndex, match.index);
             if (textBefore.trim()) {
-                // Extract JSON from markdown before rendering
-                const { processedText, jsonSegments: extractedSegments } = extractJsonFromMarkdown(textBefore);
-
-                // Add extracted JSON segments
-                extractedSegments.forEach((seg) => segments.push(seg));
-
-                // Add remaining markdown (without JSON blocks)
-                if (processedText.trim() && !processedText.match(/^__JSON_SEGMENT_\d+__$/)) {
-                    const renderedHtml = renderMarkdown(processedText);
-                    // Process rendered HTML to extract JSON from code blocks
-                    const { htmlSegments, chartSegments } = extractJsonFromRenderedHtml(renderedHtml);
-                    // Add chart segments first
-                    chartSegments.forEach((seg) => segments.push(seg));
-                    // Add remaining HTML
-                    if (htmlSegments.length > 0) {
-                        htmlSegments.forEach((html) => segments.push({ type: 'markdown', html }));
-                    } else if (renderedHtml.trim()) {
-                        segments.push({ type: 'markdown', html: renderedHtml });
-                    }
-                }
+                // IMPORTANT: keep markdown strictly in-flow.
+                // JSON/Chart blocks are handled by the main regex loop and must appear exactly where they are in fullAnalysis.
+                pushMarkdownTokens(segments, textBefore);
             }
         }
 
@@ -2589,7 +2764,7 @@ const parseFullAnalysisWithCharts = (fullAnalysis, chartsData) => {
                 segments.push(jsonSegment);
             } else {
                 // If not JSON, add as markdown code block
-                segments.push({ type: 'markdown', html: renderMarkdown(fullMatch) });
+                segments.push({ type: 'markdown', html: renderMarkdown(fullMatch), mdTokenType: 'code' });
             }
             lastIndex = combinedRegex.lastIndex;
             continue;
@@ -2632,26 +2807,8 @@ const parseFullAnalysisWithCharts = (fullAnalysis, chartsData) => {
     // Add remaining markdown
     const remaining = fullAnalysis.slice(lastIndex);
     if (remaining.trim()) {
-        // Extract JSON from markdown before rendering
-        const { processedText, jsonSegments: extractedSegments } = extractJsonFromMarkdown(remaining);
-
-        // Add extracted JSON segments
-        extractedSegments.forEach((seg) => segments.push(seg));
-
-        // Add remaining markdown (without JSON blocks)
-        if (processedText.trim() && !processedText.match(/^__JSON_SEGMENT_\d+__$/)) {
-            const renderedHtml = renderMarkdown(processedText);
-            // Process rendered HTML to extract JSON from code blocks
-            const { htmlSegments, chartSegments } = extractJsonFromRenderedHtml(renderedHtml);
-            // Add chart segments first
-            chartSegments.forEach((seg) => segments.push(seg));
-            // Add remaining HTML
-            if (htmlSegments.length > 0) {
-                htmlSegments.forEach((html) => segments.push({ type: 'markdown', html }));
-            } else if (renderedHtml.trim()) {
-                segments.push({ type: 'markdown', html: renderedHtml });
-            }
-        }
+        // Keep tail markdown in-flow; chart blocks already handled by regex matches above.
+        pushMarkdownTokens(segments, remaining);
     }
 
     return segments;
@@ -2748,7 +2905,7 @@ const parsedContent = computed(() => {
     else if (report.value?.fullAnalysis) {
         const content = report.value.fullAnalysis;
         // Regex for both ```json:identifier and plain ```json or ``` code blocks
-        const regex = /```json:(\w+)\n([\s\S]*?)\n```|```json\n([\s\S]*?)\n```|```\n([\s\S]*?)\n```/g;
+        const regex = /```json:(\w+)\r?\n([\s\S]*?)\r?\n```|```json\r?\n([\s\S]*?)\r?\n```|```\r?\n([\s\S]*?)\r?\n```/g;
         let lastIndex = 0;
         let match;
 
@@ -2758,16 +2915,8 @@ const parsedContent = computed(() => {
             if (match.index > lastIndex) {
                 const textBefore = content.slice(lastIndex, match.index);
                 if (textBefore.trim()) {
-                    // Extract JSON from markdown before rendering
-                    const { processedText, jsonSegments: extractedSegments } = extractJsonFromMarkdown(textBefore);
-
-                    // Add extracted JSON segments
-                    extractedSegments.forEach((seg) => segments.push(seg));
-
-                    // Add remaining markdown (without JSON blocks)
-                    if (processedText.trim() && !processedText.match(/^__JSON_SEGMENT_\d+__$/)) {
-                        segments.push({ type: 'markdown', html: renderMarkdown(processedText) });
-                    }
+                    // Keep text strictly in place; JSON blocks are handled by the regex loop.
+                    pushMarkdownTokens(segments, textBefore);
                 }
             }
 
@@ -2780,7 +2929,7 @@ const parsedContent = computed(() => {
                     segments.push(jsonSegment);
                 } else {
                     // If not JSON, add as markdown code block
-                    segments.push({ type: 'markdown', html: renderMarkdown(fullMatch) });
+                    segments.push({ type: 'markdown', html: renderMarkdown(fullMatch), mdTokenType: 'code' });
                 }
                 lastIndex = regex.lastIndex;
                 continue;
@@ -2806,16 +2955,7 @@ const parsedContent = computed(() => {
 
         const remaining = content.slice(lastIndex);
         if (remaining.trim()) {
-            // Extract JSON from markdown before rendering
-            const { processedText, jsonSegments: extractedSegments } = extractJsonFromMarkdown(remaining);
-
-            // Add extracted JSON segments
-            extractedSegments.forEach((seg) => segments.push(seg));
-
-            // Add remaining markdown (without JSON blocks)
-            if (processedText.trim() && !processedText.match(/^__JSON_SEGMENT_\d+__$/)) {
-                segments.push({ type: 'markdown', html: renderMarkdown(processedText) });
-            }
+            pushMarkdownTokens(segments, remaining);
         }
     }
 
@@ -2856,7 +2996,7 @@ const parsedContent = computed(() => {
 
 // Layout segments: group adjacent "paragraph markdown" + (chart/marketShareChart/comparisonTable) into a two-column container.
 const isParagraphMarkdownSegment = (segment) => {
-    return segment?.type === 'markdown' && typeof segment.html === 'string' && /<p[\s>]/i.test(segment.html);
+    return segment?.type === 'markdown' && segment?.mdTokenType === 'paragraph';
 };
 
 const isPairableMediaSegment = (segment) => {
@@ -2873,27 +3013,37 @@ const displayContent = computed(() => {
 
         // Text then media
         if (isParagraphMarkdownSegment(cur) && isPairableMediaSegment(next)) {
+            // Pull subsequent paragraph tokens into the same left column so text can continue
+            // alongside a tall right-column chart/table (no float, still strictly in-flow).
+            const texts = [cur];
+            let j = i + 2;
+            while (j < input.length && isParagraphMarkdownSegment(input[j])) {
+                texts.push(input[j]);
+                j++;
+            }
             out.push({
                 type: 'paired',
-                text: cur,
+                texts,
                 media: next,
-                // on desktop we still keep text left; on mobile we can keep original (text first)
-                mobileOrder: 'text-first'
+                order: 'text-media'
             });
-            i++; // skip next
+            i = j - 1; // consumed media + following paragraph(s)
             continue;
         }
 
         // Media then text
         if (isPairableMediaSegment(cur) && isParagraphMarkdownSegment(next)) {
+            // IMPORTANT: do NOT pull many paragraphs when media is on the left.
+            // Otherwise right column grows tall and leaves a visible blank area under left media (table/chart).
+            const texts = [next];
+            const j = i + 2;
             out.push({
                 type: 'paired',
-                text: next,
+                texts,
                 media: cur,
-                // keep original order on mobile (chart first)
-                mobileOrder: 'chart-first'
+                order: 'media-text'
             });
-            i++; // skip next
+            i = j - 1; // consumed media + single adjacent paragraph
             continue;
         }
 
@@ -2929,7 +3079,8 @@ const toCompactChartOptions = (options) => {
                 ...baseLegend,
                 display: legendDisplay,
                 // Avoid legend eating vertical space in compact mode
-                position: baseLegend.position || 'bottom',
+                position: 'bottom',
+                align: 'center',
                 labels: {
                     ...baseLegendLabels,
                     padding: 6,
@@ -2988,7 +3139,8 @@ const pieChartOptions = {
     plugins: {
         legend: {
             display: true,
-            position: 'bottom'
+            position: 'bottom',
+            align: 'center'
         },
         tooltip: {
             callbacks: {
@@ -3271,8 +3423,11 @@ onBeforeUnmount(() => {
 }
 
 .report-pair {
-    /* Use text wrapping around the chart to avoid empty whitespace under the chart */
-    display: block;
+    /* Keep everything strictly in normal flow; no float/absolute positioning */
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(260px, 40%);
+    gap: 1.5rem;
+    align-items: start;
 }
 
 .report-pair__text,
@@ -3280,14 +3435,15 @@ onBeforeUnmount(() => {
     min-width: 0;
 }
 
-/* .report-pair__text: text wraps around floated media (no extra styling needed) */
+.report-pair__textStack {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
 
 .report-pair__media {
-    float: right;
-    width: 40%;
-    max-width: 40%;
-    margin-left: 1.5rem; /* gap between text and chart */
-    margin-bottom: 0.75rem; /* let text wrap under after chart ends */
+    width: 100%;
+    align-self: start;
 }
 
 .report-pair__mediaChart {
@@ -3302,13 +3458,6 @@ onBeforeUnmount(() => {
     overflow: hidden;
 }
 
-/* clearfix for floated media */
-.report-pair::after {
-    content: '';
-    display: block;
-    clear: both;
-}
-
 /* Remove top/bottom margins inside paired markdown so text starts flush with chart title/area */
 .report-pair__text .markdown-content :deep(> *:first-child) {
     margin-top: 0 !important;
@@ -3325,40 +3474,17 @@ onBeforeUnmount(() => {
     display: block;
 }
 
+.chart-caption {
+    margin-top: 0.5rem;
+    text-align: center;
+    font-size: 0.95rem;
+    font-weight: 600;
+    line-height: 1.25rem;
+}
+
 @media (max-width: 768px) {
     .report-pair {
-        display: flex;
-        flex-direction: column;
-    }
-
-    /* Preserve original order when the report had chart before text */
-    .report-pair--mobile-chart-first .report-pair__media {
-        order: 1;
-    }
-    .report-pair--mobile-chart-first .report-pair__text {
-        order: 2;
-    }
-
-    .report-pair__media {
-        float: none;
-        width: 100%;
-        max-width: none;
-        margin-left: 0;
-        margin-bottom: 0.75rem;
-    }
-
-    /* Preserve original order on mobile */
-    .report-pair--mobile-text-first .report-pair__text {
-        order: 1;
-    }
-    .report-pair--mobile-text-first .report-pair__media {
-        order: 2;
-    }
-    .report-pair--mobile-chart-first .report-pair__media {
-        order: 1;
-    }
-    .report-pair--mobile-chart-first .report-pair__text {
-        order: 2;
+        grid-template-columns: 1fr;
     }
 }