u003c!DOCTYPE htmlu003e
u003chtml lang="en"u003e
u003cheadu003e
  u003cmeta charset="UTF-8"u003e
  u003cmeta name="viewport" content="width=device-width, initial-scale=1.0"u003e
  u003ctitleu003eProcessor Option Comparisonu003c/titleu003e

  u003cscript id="lumi-getcssvar"u003e
    window.getCssVar = window.getCssVar || function(name) {
      if (!name) return '';
      try {
        const clean = name.replace(/^var\(/, '').replace(/\)$/, '').trim();
        const prop = clean.startsWith('--') ? clean : `--${clean}`;
        return getComputedStyle(document.documentElement).getPropertyValue(prop).trim();
      } catch {
        return '';
      }
    };
  u003c/scriptu003e

  u003cscript id="lumi-canvas-guard"u003e
    (function() {
      if (window.__lumiCanvasGuard) return;
      window.__lumiCanvasGuard = true;

      const MAX_PX = 4096;
      const MIN_FONT_PX = 12;

      try {
        const CP = HTMLCanvasElement.prototype;
        const BOX = { width: 'clientWidth', height: 'clientHeight' };
        const MAX_STYLE = { width: 'maxWidth', height: 'maxHeight' };
        const PAD = {
          width: ['paddingLeft', 'paddingRight'],
          height: ['paddingTop', 'paddingBottom']
        };
        const descMap = {
          width: Object.getOwnPropertyDescriptor(CP, 'width'),
          height: Object.getOwnPropertyDescriptor(CP, 'height')
        };

        const isTracking = (el, p) =u003e {
          const box = el[BOX[p]];
          return !el.style[p] && box u003e 0 && box === descMap[p]?.get?.call(el) && box === el[`__lumiLast${p}`];
        };

        const getAvail = (el, p) =u003e {
          const pe = el.parentElement;
          if (!pe) return 0;
          const cs = getComputedStyle(pe);
          return pe[BOX[p]] - parseFloat(cs[PAD[p][0]]) - parseFloat(cs[PAD[p][1]]);
        };

        Object.keys(BOX).forEach((p) =u003e {
          const desc = descMap[p];
          if (!desc?.set || !desc?.get) return;

          Object.defineProperty(CP, p, {
            configurable: true,
            enumerable: desc.enumerable,
            get: desc.get,
            set(v) {
              let n = +v;
              const box = this[BOX[p]];

              if (n u003e MAX_PX) n = MAX_PX;
              if (n u003e box && isTracking(this, p)) {
                ['width', 'height'].forEach((q) =u003e {
                  if (isTracking(this, q)) {
                    const pin = getAvail(this, q) || this[`__lumiBox${q}`];
                    this.style[q] = '100%';
                    this.style[MAX_STYLE[q]] = `${pin}px`;
                  }
                });
                n = box;
              }

              this[`__lumiBox${p}`] = box;
              this[`__lumiLast${p}`] = n;
              desc.set.call(this, Number.isNaN(n) ? v : n);
            }
          });
        });
      } catch {}

      try {
        const XP = CanvasRenderingContext2D.prototype;
        const pxRegex = /(\d*\.?\d+)px/;

        const floorFont = (ctx) =u003e {
          const font = ctx.font;
          const match = pxRegex.exec(font);
          if (match && +match[1] u003e= 4 && +match[1] u003c MIN_FONT_PX) {
            ctx.font = font.replace(pxRegex, `${MIN_FONT_PX}px`);
          }
        };

        ['fillText', 'strokeText', 'measureText'].forEach((method) =u003e {
          const original = XP[method];
          if (typeof original !== 'function') return;
          XP[method] = function(...args) {
            floorFont(this);
            return original.apply(this, args);
          };
        });
      } catch {}
    })();
  u003c/scriptu003e

  u003cstyle id="lumi-runtime"u003e
    @import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:ital,wght@0,300..700;1,300..700&family=Google+Sans+Code:ital,wght,MONO@0,300..700,0..1;1,300..700,0..1&display=swap');

    :root {
      --body-bg: transparent;
      --ff-sans: 'Google Sans Flex', 'Google Sans Text', 'Google Sans', sans-serif;
      --ff-mono: 'Google Sans Code', 'Google Sans Mono', monospace;

      --lumi-sys-spacing--xxs: 2px;
      --lumi-sys-spacing--xs: 4px;
      --lumi-sys-spacing--s: 8px;
      --lumi-sys-spacing--m: 12px;
      --lumi-sys-spacing--l: 16px;
      --lumi-sys-spacing--xl: 20px;
      --lumi-sys-spacing--xxl: 24px;
      --lumi-sys-spacing--3xl: 28px;
      --lumi-sys-spacing--4xl: 36px;

      --lumi-sys-shape--small: 8px;
      --lumi-sys-shape--medium: 12px;
      --lumi-sys-shape--large: 16px;
      --lumi-sys-shape--full: 999px;

      --lumi-sys-elevation--level1: 0 0 20px 0 rgba(0, 0, 0, 0.04);

      --lumi-sys-color--surface: #fdfcfc;
      --lumi-sys-color--surface-dim: #f2f0f0;
      --lumi-sys-color--surface-bright: #ffffff;
      --lumi-sys-color--surface-container-high: #e6e6e6;
      --lumi-sys-color--on-surface: #000000;
      --lumi-sys-color--on-surface-variant: rgba(0, 0, 0, 0.55);
      --lumi-sys-color--accent: #9dd2ff;
      --lumi-sys-color--accent-container: #dcf1ff;
      --lumi-sys-color--accent-fixed: #3186ff;
      --lumi-sys-color--primary: #3186ff;
      --lumi-sys-color--stroke-default: #e3e3e3;
      --lumi-sys-color--chart-series-1: #2575fc;

      /* Aliases */
      --surface: var(--lumi-sys-color--surface);
      --surface-dim: var(--lumi-sys-color--surface-dim);
      --surface-bright: var(--lumi-sys-color--surface-bright);
      --surface-container-high: var(--lumi-sys-color--surface-container-high);
      --on-surface: var(--lumi-sys-color--on-surface);
      --on-surface-variant: var(--lumi-sys-color--on-surface-variant);
      --primary: var(--lumi-sys-color--primary);
      --accent: var(--lumi-sys-color--accent);
      --accent-container: var(--lumi-sys-color--accent-container);
      --accent-fixed: var(--lumi-sys-color--accent-fixed);
      --stroke-default: var(--lumi-sys-color--stroke-default);
      --chart-1: var(--lumi-sys-color--chart-series-1);
      --r-full: var(--lumi-sys-shape--full);
    }

    :root[data-theme="dark"],
    body.dark-mode,
    :root[data-theme="dark"] body {
      --body-bg: #0f0f0f;
      --lumi-sys-color--surface: #0f0f0f;
      --lumi-sys-color--surface-dim: #141414;
      --lumi-sys-color--surface-bright: #1c1c1c;
      --lumi-sys-color--surface-container-high: #1c1c1c;
      --lumi-sys-color--on-surface: #e0e0e0;
      --lumi-sys-color--on-surface-variant: rgba(255, 255, 255, 0.55);
      --lumi-sys-color--accent: #1f3b9b;
      --lumi-sys-color--accent-container: #192967;
      --lumi-sys-color--accent-fixed: #3186ff;
      --lumi-sys-color--primary: #9dd2ff;
      --lumi-sys-color--stroke-default: #2d2f38;
      --lumi-sys-color--chart-series-1: #9dd2ff;
    }

    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) {
        --body-bg: #0f0f0f;
        --lumi-sys-color--surface: #0f0f0f;
        --lumi-sys-color--surface-dim: #141414;
        --lumi-sys-color--surface-bright: #1c1c1c;
        --lumi-sys-color--surface-container-high: #1c1c1c;
        --lumi-sys-color--on-surface: #e0e0e0;
        --lumi-sys-color--on-surface-variant: rgba(255, 255, 255, 0.55);
        --lumi-sys-color--accent: #1f3b9b;
        --lumi-sys-color--accent-container: #192967;
        --lumi-sys-color--accent-fixed: #3186ff;
        --lumi-sys-color--primary: #9dd2ff;
        --lumi-sys-color--stroke-default: #2d2f38;
        --lumi-sys-color--chart-series-1: #9dd2ff;
      }
    }

    *, *::before, *::after {
      box-sizing: border-box;
    }

    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      background: var(--body-bg, transparent) !important;
      color: var(--on-surface) !important;
      overflow-x: hidden;
      overflow-y: hidden;
      font-family: var(--ff-sans);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-optical-sizing: auto;
      text-rendering: optimizeLegibility;
    }

    .widget-container {
      width: 100% !important;
      max-width: 100% !important;
      min-height: 280px;
      padding: var(--lumi-sys-spacing--l, 16px) !important;
      display: flex;
      flex-direction: column;
      gap: var(--lumi-sys-spacing--l, 16px);
    }

    .widget-card {
      background: var(--surface-bright);
      border-radius: var(--lumi-sys-shape--large, 16px);
      padding: var(--lumi-sys-spacing--xl, 20px);
      border: 1px solid var(--stroke-default);
      display: flex;
      flex-direction: column;
      gap: var(--lumi-sys-spacing--l, 16px);
    }

    .header-group {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .widget-title {
      margin: 0;
      color: var(--on-surface);
    }

    .widget-subtitle {
      margin: 0;
      color: var(--on-surface-variant);
    }

    .tab-strip-wrapper {
      width: 100%;
      overflow-x: auto;
      padding-bottom: 2px;
    }

    .tab-strip {
      display: flex;
      gap: var(--lumi-sys-spacing--xs, 4px);
      background: var(--surface-dim);
      padding: 4px;
      border-radius: var(--r-full);
      width: fit-content;
      max-width: 100%;
    }

    .tab-btn {
      appearance: none;
      -webkit-appearance: none;
      border: none;
      background: transparent;
      padding: 6px 14px;
      border-radius: var(--r-full);
      font-family: var(--ff-sans);
      font-size: 13px;
      font-weight: 500;
      color: var(--on-surface-variant);
      cursor: pointer;
      white-space: nowrap;
      transition: background-color 0.15s ease, color 0.15s ease;
    }

    .tab-btn:hover {
      color: var(--on-surface);
      background: var(--surface-container-high);
    }

    .tab-btn.is-active {
      background: var(--surface-bright);
      color: var(--on-surface);
      font-weight: 600;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }

    .viewport-container {
      position: relative;
      width: 100%;
      height: 340px;
      min-height: 0;
      overflow: hidden;
      border-radius: var(--lumi-sys-shape--medium, 12px);
    }

    .details-footer {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: var(--lumi-sys-spacing--m, 12px);
      padding-top: var(--lumi-sys-spacing--m, 12px);
      border-top: 1px solid var(--stroke-default);
    }

    .detail-card {
      background: var(--surface-dim);
      border-radius: var(--lumi-sys-shape--small, 8px);
      padding: var(--lumi-sys-spacing--m, 12px);
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .detail-label {
      color: var(--on-surface-variant);
    }

    .detail-val {
      color: var(--on-surface);
      font-weight: 600;
    }

    .nav-footer {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      color: var(--on-surface-variant);
    }

    .nav-link {
      color: var(--primary);
      text-decoration: none;
      font-weight: 500;
    }

    .nav-link:hover {
      text-decoration: underline;
    }

    /* Typography Utilities */
    .lumi-headline-m { font-size: 24px; line-height: 28px; font-weight: 400; }
    .lumi-body-m { font-size: 15px; line-height: 20px; font-weight: 400; }
    .lumi-body-s { font-size: 13px; line-height: 17px; font-weight: 400; }
    .lumi-caption { font-family: var(--ff-mono); font-style: italic; font-size: 13px; line-height: 20px; }
  u003c/styleu003e

  u003cscript src="../libs/Chart.js/dist/chart.umd.js" onerror="let s=document.createElement('script');s.src='libs/Chart.js/dist/chart.umd.min.js';document.head.appendChild(s)"u003eu003c/scriptu003e

  u003cscript id="lumi-os-theme-init"u003e
    (function() {
      const syncBody = () =u003e {
        const dt = document.documentElement.getAttribute('data-theme');
        if (document.body && (dt === 'dark' || dt === 'light')) {
          document.body.classList.toggle('dark-mode', dt === 'dark');
        }
      };

      const syncTheme = (theme) =u003e {
        if (theme !== 'dark' && theme !== 'light') return;
        document.documentElement.setAttribute('data-theme', theme);
        syncBody();
      };

      if (typeof MutationObserver === 'function') {
        new MutationObserver(syncBody).observe(document.documentElement, {
          attributes: true,
          attributeFilter: ['data-theme']
        });
      }

      document.addEventListener('DOMContentLoaded', syncBody);

      try {
        const mq = window.matchMedia?.('(prefers-color-scheme: dark)');
        if (mq) {
          const cur = document.documentElement.getAttribute('data-theme');
          syncTheme(cur || (mq.matches ? 'dark' : 'light'));
          mq.addEventListener?.('change', (e) =u003e syncTheme(e.matches ? 'dark' : 'light'));
        }
      } catch {}

      window.addEventListener('message', (e) =u003e {
        if ((e.data?.type === 'set-theme' || e.data?.type === 'APPLY_THEME') && e.data?.theme) {
          syncTheme(e.data.theme);
        }
      });
    })();
  u003c/scriptu003e
u003c/headu003e
u003cbodyu003e
  u003cmain class="widget-container"u003e
    u003cdiv class="widget-card"u003e
      u003cheader class="header-group"u003e
        u003ch2 class="widget-title lumi-headline-m"u003eWorkstation Processor Limitsu003c/h2u003e
        u003cp class="widget-subtitle lumi-body-s"u003eCompare single-core boost, expansion headroom, and total memory capacityu003c/pu003e
      u003c/headeru003e

      u003cnav class="tab-strip-wrapper" aria-label="Metric Navigation"u003e
        u003cdiv class="tab-strip" role="tablist"u003e
          u003cbutton class="tab-btn is-active" data-metric="turbo_ghz" role="tab" aria-selected="true"u003eSingle-Core Turbo (GHz)u003c/buttonu003e
          u003cbutton class="tab-btn" data-metric="pcie_lanes" role="tab" aria-selected="false"u003ePCIe Gen 5 Lanesu003c/buttonu003e
          u003cbutton class="tab-btn" data-metric="max_ram_gb" role="tab" aria-selected="false"u003eDIMM Slots & Max RAM (GB)u003c/buttonu003e
        u003c/divu003e
      u003c/navu003e

      u003csection id="chart-viewport" class="viewport-container" aria-label="Processor Comparison Chart"u003e
        u003ccanvas id="procChart"u003eu003c/canvasu003e
      u003c/sectionu003e

      u003cfooter id="detailsDeck" class="details-footer"u003e
        u003cdiv class="detail-card"u003e
          u003cspan class="detail-label lumi-caption"u003eFocused Processoru003c/spanu003e
          u003cspan id="metaName" class="detail-val lumi-body-m"u003eCore Ultra 9 285Ku003c/spanu003e
        u003c/divu003e
        u003cdiv class="detail-card"u003e
          u003cspan class="detail-label lumi-caption"u003eTarget Platformu003c/spanu003e
          u003cspan id="metaPlatform" class="detail-val lumi-body-m"u003ePrecision 3680 / Area-51u003c/spanu003e
        u003c/divu003e
        u003cdiv class="detail-card"u003e
          u003cspan class="detail-label lumi-caption"u003eMemory Configurationu003c/spanu003e
          u003cspan id="metaMemory" class="detail-val lumi-body-m"u003e4 Slots (192 GB Max)u003c/spanu003e
        u003c/divu003e
      u003c/footeru003e
    u003c/divu003e

    u003cnav class="nav-footer" aria-label="Breadcrumb"u003e
      u003ca class="nav-link" href="../index.html"u003eHomeu003c/au003e
      u003cspanu003e>>u003c/spanu003e
    u003c/navu003e
  u003c/mainu003e

  u003cscriptu003e
    (() =u003e {
      'use strict';

      const CPU_DATA = [
        { processor: 'Core i9-13900 (Current 3660)', platform: 'Precision 3660', turbo_ghz: 5.6, pcie_lanes: 20, max_ram_gb: 128, dimm_slots: 4 },
        { processor: 'Core Ultra 9 285K', platform: 'Precision 3680 / Area-51', turbo_ghz: 5.7, pcie_lanes: 24, max_ram_gb: 192, dimm_slots: 4 },
        { processor: 'Xeon w3-2423 (6-Core Entry)', platform: 'Precision 5860 / P5', turbo_ghz: 4.2, pcie_lanes: 64, max_ram_gb: 2048, dimm_slots: 8 },
        { processor: 'Xeon w5-2455X (12-Core Sweet Spot)', platform: 'Precision 5860 / P5', turbo_ghz: 4.6, pcie_lanes: 64, max_ram_gb: 2048, dimm_slots: 8 },
        { processor: 'Xeon w5-2545 (12-Core Refresh)', platform: 'Precision 5860 / P5', turbo_ghz: 4.7, pcie_lanes: 64, max_ram_gb: 2048, dimm_slots: 8 },
        { processor: 'Xeon w7-2595X (26-Core High-End)', platform: 'Precision 5860 / P5', turbo_ghz: 4.8, pcie_lanes: 64, max_ram_gb: 2048, dimm_slots: 8 }
      ];

      const METRIC_CONFIGS = {
        turbo_ghz: { label: 'Single-Core Turbo Speed', unit: 'GHz' },
        pcie_lanes: { label: 'CPU PCIe Gen 5 Lanes', unit: 'Lanes' },
        max_ram_gb: { label: 'Maximum Memory Capacity', unit: 'GB' }
      };

      const dom = {
        canvas: document.getElementById('procChart'),
        metaName: document.getElementById('metaName'),
        metaPlatform: document.getElementById('metaPlatform'),
        metaMemory: document.getElementById('metaMemory'),
        tabs: Array.from(document.querySelectorAll('.tab-btn')),
        container: document.querySelector('.widget-container')
      };

      let activeMetric = 'turbo_ghz';
      let focusedIndex = 1;
      let chartInstance = null;

      const getChartTokens = () =u003e {
        const cs = getComputedStyle(document.documentElement);
        return {
          fontFamily: cs.getPropertyValue('--ff-sans').trim() || "'Google Sans Flex', sans-serif",
          monoFamily: cs.getPropertyValue('--ff-mono').trim() || "'Google Sans Code', monospace",
          textColor: cs.getPropertyValue('--on-surface').trim() || '#000000',
          deEmphasisColor: cs.getPropertyValue('--on-surface-variant').trim() || 'rgba(0,0,0,0.55)',
          gridColor: cs.getPropertyValue('--stroke-default').trim() || 'rgba(0,0,0,0.08)',
          surfaceColor: cs.getPropertyValue('--surface-bright').trim() || '#ffffff',
          series: cs.getPropertyValue('--chart-1').trim() || '#2575fc'
        };
      };

      const updateDetailsDeck = (idx) =u003e {
        const item = CPU_DATA[idx];
        if (!item) return;
        dom.metaName.textContent = item.processor;
        dom.metaPlatform.textContent = item.platform;
        dom.metaMemory.textContent = `${item.dimm_slots} Slots (${item.max_ram_gb.toLocaleString()} GB Max)`;
      };

      const applyThemeToChart = (chart, tokens) =u003e {
        chart.options.scales.x.grid.color = tokens.gridColor;
        chart.options.scales.x.ticks.color = tokens.deEmphasisColor;
        chart.options.scales.x.title.color = tokens.deEmphasisColor;
        chart.options.scales.y.ticks.color = tokens.textColor;
        chart.options.plugins.tooltip.backgroundColor = tokens.surfaceColor;
        chart.options.plugins.tooltip.titleColor = tokens.textColor;
        chart.options.plugins.tooltip.bodyColor = tokens.deEmphasisColor;
        chart.options.plugins.tooltip.borderColor = tokens.gridColor;
        chart.data.datasets[0].backgroundColor = tokens.series;
      };

      const createChart = () =u003e {
        if (!dom.canvas || typeof Chart === 'undefined') return;

        const tokens = getChartTokens();
        const cfg = METRIC_CONFIGS[activeMetric];

        Chart.defaults.font.family = tokens.fontFamily;
        Chart.defaults.color = tokens.deEmphasisColor;

        chartInstance = new Chart(dom.canvas, {
          type: 'bar',
          data: {
            labels: CPU_DATA.map(d =u003e d.processor),
            datasets: [{
              label: cfg.label,
              data: CPU_DATA.map(d =u003e d[activeMetric]),
              backgroundColor: tokens.series,
              maxBarThickness: 24,
              categoryPercentage: 0.70,
              barPercentage: 0.85,
              borderRadius: { topRight: 99, bottomRight: 99, topLeft: 0, bottomLeft: 0 }
            }]
          },
          options: {
            indexAxis: 'y',
            responsive: true,
            maintainAspectRatio: false,
            layout: { padding: { top: 8, right: 24, bottom: 8, left: 8 } },
            plugins: {
              legend: { display: false },
              tooltip: {
                backgroundColor: tokens.surfaceColor,
                titleColor: tokens.textColor,
                bodyColor: tokens.deEmphasisColor,
                borderColor: tokens.gridColor,
                borderWidth: 1,
                cornerRadius: 8,
                padding: 12,
                callbacks: {
                  label: (context) =u003e {
                    const item = CPU_DATA[context.dataIndex];
                    return [
                      `${cfg.label}: ${context.parsed.x.toLocaleString()} ${cfg.unit}`,
                      `Platform: ${item.platform}`,
                      `DIMM Slots: ${item.dimm_slots}`
                    ];
                  }
                }
              }
            },
            scales: {
              x: {
                grid: { color: tokens.gridColor, drawBorder: false },
                border: { display: false },
                ticks: {
                  padding: 8,
                  font: { family: tokens.monoFamily, size: 12 },
                  color: tokens.deEmphasisColor
                },
                title: {
                  display: true,
                  text: `${cfg.label} (${cfg.unit})`,
                  color: tokens.deEmphasisColor,
                  font: { family: tokens.fontFamily, size: 12, weight: '500' }
                }
              },
              y: {
                grid: { display: false },
                border: { display: false },
                ticks: {
                  padding: 8,
                  font: { family: tokens.fontFamily, size: 12, weight: '500' },
                  color: tokens.textColor
                }
              }
            },
            onHover: (_, elements) =u003e {
              if (elements?.length) {
                const idx = elements[0].index;
                if (idx !== focusedIndex) {
                  focusedIndex = idx;
                  updateDetailsDeck(idx);
                }
              }
            }
          }
        });
      };

      const setMetric = (metricKey) =u003e {
        if (!METRIC_CONFIGS[metricKey] || activeMetric === metricKey) return;
        activeMetric = metricKey;

        dom.tabs.forEach(btn =u003e {
          const isActive = btn.dataset.metric === metricKey;
          btn.classList.toggle('is-active', isActive);
          btn.setAttribute('aria-selected', String(isActive));
        });

        if (chartInstance) {
          const cfg = METRIC_CONFIGS[metricKey];
          chartInstance.data.datasets[0].data = CPU_DATA.map(d =u003e d[metricKey]);
          chartInstance.data.datasets[0].label = cfg.label;
          chartInstance.options.scales.x.title.text = `${cfg.label} (${cfg.unit})`;
          chartInstance.update();
        }
      };

      const refreshTheme = (themeName) =u003e {
        if (themeName) {
          document.documentElement.setAttribute('data-theme', themeName);
        }
        if (chartInstance) {
          applyThemeToChart(chartInstance, getChartTokens());
          chartInstance.update('none');
        }
        updateDetailsDeck(focusedIndex);
      };

      // Events
      dom.tabs.forEach(btn =u003e {
        btn.addEventListener('click', () =u003e setMetric(btn.dataset.metric));
      });

      const init = async () =u003e {
        while (typeof Chart === 'undefined') {
          await new Promise(r =u003e setTimeout(r, 20));
        }
        await document.fonts?.ready;
        createChart();
        updateDetailsDeck(focusedIndex);
      };

      if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init, { once: true });
      } else {
        init();
      }

      window.addEventListener('message', (e) =u003e {
        if ((e.data?.type === 'set-theme' || e.data?.type === 'APPLY_THEME') && e.data?.theme) {
          refreshTheme(e.data.theme);
        }
      });

      // Auto-resize
      let resizeTimer = null;
      const notifyHeight = () =u003e {
        const el = dom.container || document.body;
        if (!el) return;
        const height = Math.ceil(Math.max(el.getBoundingClientRect().bottom, el.scrollHeight));
        window.parent.postMessage({ type: 'widget-resize', height }, '*');
      };

      const debouncedResize = () =u003e {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(notifyHeight, 16);
      };

      window.addEventListener('load', () =u003e setTimeout(notifyHeight, 60), { once: true });
      if (typeof ResizeObserver !== 'undefined') {
        new ResizeObserver(debouncedResize).observe(dom.container || document.body);
      }
    })();
  u003c/scriptu003e
u003c/bodyu003e
u003c/htmlu003e