'use strict';
/* ══════════════════════════════════════════════════════════════
   OpticsBenchSim — unified optical bench simulation
   Merges: ThinLensSim (thinlens.js) + MirrorSim (mirror.js) + RefractionSim (refraction.js)

   Modes:
     'lens'      — thin lens: 1/f = 1/d + 1/d', M = -d'/d
     'mirror'    — curved / flat mirrors, same formula
     'refraction'— Snell's law: n₁sin θ₁ = n₂sin θ₂, TIR, dispersion

   Physics preserved verbatim from original sims.
   ══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   0.  WAVELENGTH UTILITIES
───────────────────────────────────────────────────────────────*/

/**
 * Convert wavelength (nm, 380–780) to an sRGB CSS color string.
 * Well-known approximation by Dan Bruton (adjusted for alpha at edges).
 */
function wavelengthToRGB(nm) {
  let R = 0, G = 0, B = 0, a = 1;
  if      (nm >= 380 && nm < 440) { R = -(nm - 440) / (440 - 380); G = 0; B = 1; }
  else if (nm < 490) { R = 0; G = (nm - 440) / (490 - 440); B = 1; }
  else if (nm < 510) { R = 0; G = 1; B = -(nm - 510) / (510 - 490); }
  else if (nm < 580) { R = (nm - 510) / (580 - 510); G = 1; B = 0; }
  else if (nm < 645) { R = 1; G = -(nm - 645) / (645 - 580); B = 0; }
  else if (nm < 781) { R = 1; G = 0; B = 0; }
  if      (nm >= 700) a = 0.3 + 0.7 * (780 - nm) / (780 - 700);
  else if (nm < 420)  a = 0.3 + 0.7 * (nm - 380) / (420 - 380);
  return `rgba(${Math.round(R * 255 * a)},${Math.round(G * 255 * a)},${Math.round(B * 255 * a)},1)`;
}

/**
 * Wavelength-dependent index of refraction — simple linear model.
 * n(550nm) = n0 (glass baseline), with normal dispersion (blue > red).
 * Formula: n(λ) = n0 - 0.0002*(λ - 550)
 */
function _nAtWavelength(n0, nm) {
  return n0 - 0.0002 * (nm - 550);
}

/**
 * Return the ray color for the current global wavelength setting.
 * If white-light mode: returns null (caller must draw multi-spectral bundles).
 * Otherwise returns a CSS color string.
 */
function _obRayColor(fallback) {
  if (window._obWhiteLight) return null;
  return wavelengthToRGB(window._obWavelength || 550);
}

/** Spectral samples used for white-light / prism dispersion */
const OB_SPECTRAL = [
  { nm: 405, label: 'violet' },
  { nm: 450, label: 'blue'   },
  { nm: 510, label: 'green'  },
  { nm: 550, label: 'yellow' },
  { nm: 610, label: 'orange' },
  { nm: 660, label: 'red'    },
];

/* ─────────────────────────────────────────────────────────────
   0b.  OB_FX — VISUAL DEPTH TOGGLES (A-agent)
   Five optional visual layers controlled by checkboxes.
   State persisted in localStorage as 'ob_fx_state'.
───────────────────────────────────────────────────────────────*/

function _obFXLoad() {
  try {
    const raw = localStorage.getItem('ob_fx_state');
    if (raw) Object.assign(window.OB_FX, JSON.parse(raw));
  } catch (_e) { /* ignore */ }
}

function _obFXSave() {
  try { localStorage.setItem('ob_fx_state', JSON.stringify(window.OB_FX)); } catch (_e) { /* ignore */ }
}

/** Called by each toggle checkbox */
function obFXToggle(key, val) {
  window.OB_FX[key] = !!val;
  _obFXSave();
  _obRedraw();
}

window.OB_FX = { wavefronts: false, mist: false, flare: false, huygens: false, caustics: false };
_obFXLoad();

/* ── Mist: background smoke-particle emitter ── */
let _obMistRaf = 0, _obMistCtx = null, _obMistFrame = 0;

function _obMistTick() {
  if (!window.OB_FX.mist) { _obMistRaf = 0; return; }
  const ctx = _obMistCtx;
  if (!ctx || !window.LabFX) { _obMistRaf = 0; return; }
  _obMistFrame++;
  if (_obMistFrame % 2 === 0) {
    const W = ctx.canvas.width, H = ctx.canvas.height;
    LabFX.particles.emit({
      ctx, x: Math.random() * W, y: Math.random() * H,
      count: 1, color: 'rgba(180,200,255,0.06)', speed: 3,
      spread: Math.PI * 2, life: 3000, shape: 'smoke', size: 30, glow: false,
    });
  }
  _obMistRaf = requestAnimationFrame(_obMistTick);
}

function _obStartMist(ctx) {
  _obMistCtx = ctx;
  if (!_obMistRaf && window.OB_FX.mist && window.LabFX) {
    _obMistRaf = requestAnimationFrame(_obMistTick);
  }
}

/* ── Shared wavefront phase clock ── */
let _obWFPhase = 0, _obWFLastT = 0;

/**
 * Draw animated sinusoidal wavefront ticks along a ray segment.
 * Ticks march along the ray to simulate a travelling wave.
 * In-glass spacing compresses by 1/nMed (shows refraction at boundary).
 */
function _obDrawWavefrontTicks(ctx, x1, y1, x2, y2, nm, nMed) {
  nMed = nMed || 1;
  const dx = x2 - x1, dy = y2 - y1;
  const len = Math.hypot(dx, dy);
  if (len < 4) return;
  const lambdaPx = Math.max(8, (nm * 0.45) / nMed);
  const ux = dx / len, uy = dy / len;
  const qx = -uy, qy = ux;   // perpendicular unit vector
  const tickLen = 5;
  const col = wavelengthToRGB(nm || 550);
  const phaseOff = (_obWFPhase * lambdaPx * 2) % lambdaPx;
  ctx.save();
  ctx.globalAlpha = 0.52;
  ctx.strokeStyle = col; ctx.lineWidth = 1;
  let t = phaseOff;
  while (t < len) {
    const cx = x1 + ux * t, cy = y1 + uy * t;
    ctx.beginPath();
    ctx.moveTo(cx - qx * tickLen, cy - qy * tickLen);
    ctx.lineTo(cx + qx * tickLen, cy + qy * tickLen);
    ctx.stroke();
    t += lambdaPx;
  }
  ctx.restore();
}

/**
 * Draw lens flare: starburst + ghost reflections + chromatic ring.
 * Uses additive blending for the glow effect.
 */
function _obDrawLensFlare(ctx, srcX, srcY, W, H) {
  ctx.save();
  ctx.globalCompositeOperation = 'lighter';
  const spikes = 6, spikeLen = 40;
  for (let i = 0; i < spikes; i++) {
    const angle = (i / spikes) * Math.PI + _obWFPhase * 0.3;
    const grad = ctx.createLinearGradient(srcX, srcY,
      srcX + Math.cos(angle) * spikeLen, srcY + Math.sin(angle) * spikeLen);
    grad.addColorStop(0, 'rgba(255,255,200,0.32)');
    grad.addColorStop(1, 'rgba(255,255,200,0)');
    ctx.strokeStyle = grad; ctx.lineWidth = 1.5;
    ctx.beginPath(); ctx.moveTo(srcX, srcY);
    ctx.lineTo(srcX + Math.cos(angle) * spikeLen, srcY + Math.sin(angle) * spikeLen);
    ctx.stroke();
    ctx.beginPath(); ctx.moveTo(srcX, srcY);
    ctx.lineTo(srcX - Math.cos(angle) * spikeLen, srcY - Math.sin(angle) * spikeLen);
    ctx.stroke();
  }
  const cg = ctx.createRadialGradient(srcX, srcY, 0, srcX, srcY, 14);
  cg.addColorStop(0, 'rgba(255,255,240,0.55)');
  cg.addColorStop(1, 'rgba(255,255,240,0)');
  ctx.fillStyle = cg; ctx.beginPath(); ctx.arc(srcX, srcY, 14, 0, Math.PI * 2); ctx.fill();
  const gx = W / 2 - srcX, gy = H / 2 - srcY;
  [
    { t: 0.3, r: 18, col: 'rgba(100,80,255,0.12)' },
    { t: 0.6, r: 11, col: 'rgba(255,60,60,0.10)'  },
    { t: 1.1, r: 7,  col: 'rgba(60,220,255,0.09)' },
  ].forEach(function(g) {
    const gX = srcX + gx * g.t, gY = srcY + gy * g.t;
    const gg = ctx.createRadialGradient(gX, gY, 0, gX, gY, g.r);
    gg.addColorStop(0, g.col); gg.addColorStop(1, 'rgba(0,0,0,0)');
    ctx.fillStyle = gg; ctx.beginPath(); ctx.arc(gX, gY, g.r, 0, Math.PI * 2); ctx.fill();
  });
  ctx.globalAlpha = 0.07 + 0.04 * Math.sin(_obWFPhase);
  ctx.strokeStyle = 'rgba(200,150,255,0.5)'; ctx.lineWidth = 2;
  ctx.beginPath(); ctx.arc(srcX, srcY, 22 + 4 * Math.sin(_obWFPhase * 0.5), 0, Math.PI * 2); ctx.stroke();
  ctx.restore();
}

/**
 * Draw Huygens wavelets at a refraction/reflection boundary.
 * 5 sample points along wavefront emit expanding semi-circular arcs.
 */
function _obDrawHuygens(ctx, bx, by, normalAngle, kind) {
  const t = _obWFPhase % 1;
  const maxR = 28, nSamples = 5;
  ctx.save();
  ctx.globalAlpha = 0.22;
  for (let i = 0; i < nSamples; i++) {
    const offset = (i - (nSamples - 1) / 2) * 12;
    const wx = bx + Math.cos(normalAngle + Math.PI / 2) * offset;
    const wy = by + Math.sin(normalAngle + Math.PI / 2) * offset;
    const r = t * maxR;
    const sa = kind === 'reflection'
      ? normalAngle - Math.PI / 2
      : normalAngle + Math.PI / 2;
    ctx.strokeStyle = 'rgba(180,220,255,0.7)'; ctx.lineWidth = 1.2;
    ctx.beginPath();
    ctx.arc(wx, wy, r, sa - Math.PI / 2, sa + Math.PI / 2);
    ctx.stroke();
  }
  ctx.restore();
}

/**
 * Draw caustic curve under a lens by tracing ~20 parallel rays from infinity.
 * Each ray is slightly shifted by spherical aberration creating an extended caustic.
 */
function _obDrawCausticCurve(ctx, lx, ay, f, H) {
  if (!isFinite(f) || f <= 0) return;
  const lensH = Math.min(H * 0.38, 140);
  const nRays = 20;
  const pts = [];
  for (let i = 0; i < nRays; i++) {
    const yIn = -lensH + (2 * lensH * i) / (nRays - 1);
    const abFac = 1 - 0.0008 * (yIn / lensH) * (yIn / lensH) * Math.min(Math.abs(f), 150);
    const fEff = f * abFac;
    const sl = -yIn / fEff;
    if (Math.abs(sl) < 0.0001) continue;
    const tCross = -yIn / sl;
    if (tCross < 0 || tCross > 600) continue;
    pts.push({ x: lx + tCross, y: ay });
  }
  if (pts.length < 2) return;
  const pulse = 0.55 + 0.35 * Math.sin(_obWFPhase * Math.PI * 2);
  ctx.save();
  ctx.globalAlpha = pulse;
  ctx.globalCompositeOperation = 'lighter';
  ctx.strokeStyle = '#FFD166'; ctx.lineWidth = 2;
  ctx.shadowColor = '#FFD166'; ctx.shadowBlur = 6;
  ctx.beginPath();
  pts.forEach(function(p, idx) { idx === 0 ? ctx.moveTo(p.x, p.y) : ctx.lineTo(p.x, p.y); });
  ctx.stroke();
  ctx.restore();
}

/**
 * Unified OB_FX layer — called at end of each sim draw() BEFORE particles.draw().
 * @param {CanvasRenderingContext2D} ctx
 * @param {string} simType  'lens'|'mirror'|'refraction'|'prism'|'freebuild'
 * @param {object} [extras] {rays[], srcX, srcY, boundary, causticParams}
 */
function _drawOBFXLayer(ctx, simType, extras) {
  const now = performance.now();
  if (_obWFLastT) _obWFPhase += (now - _obWFLastT) / 1000 * 0.5;
  _obWFLastT = now;

  if (window.OB_FX.mist) _obStartMist(ctx);
  if (!extras) return;

  if (window.OB_FX.wavefronts && extras.rays) {
    const nm = window._obWavelength || 550;
    extras.rays.forEach(function(r) {
      _obDrawWavefrontTicks(ctx, r.x1, r.y1, r.x2, r.y2, nm, r.n || 1);
    });
  }
  if (window.OB_FX.flare && extras.srcX !== undefined) {
    _obDrawLensFlare(ctx, extras.srcX, extras.srcY, ctx.canvas.width, ctx.canvas.height);
  }
  if (window.OB_FX.huygens && extras.boundary) {
    const b = extras.boundary;
    _obDrawHuygens(ctx, b.bx, b.by, b.normalAngle, b.kind);
  }
  if (window.OB_FX.caustics && extras.causticParams) {
    const cp = extras.causticParams;
    _obDrawCausticCurve(ctx, cp.lx, cp.ay, cp.f, ctx.canvas.height);
  }
}

/* ─────────────────────────────────────────────────────────────
   1.  THIN LENS ENGINE  (from thinlens.js)
───────────────────────────────────────────────────────────────*/
class ThinLensSim {
  constructor(canvas) {
    this.canvas = canvas;
    this.ctx    = canvas.getContext('2d');
    this.W = 0; this.H = 0;

    this.f = 100;
    this.d = 200;
    this.h = 50;

    this._drag = null;
    this.onUpdate = null;

    /* aberration toggles (Agent OB-A3) */
    this._aberrSpherical  = false;
    this._aberrChromatic  = false;

    /* ── Lens-maker formula params (Feature 3) ── */
    this._lmSimple = true;   // true = simple f-slider mode; false = R1/R2/n mode
    this._lmR1 =  100;       // front surface radius (mm)
    this._lmR2 = -100;       // back surface radius (mm)
    this._lmN  =  1.5;       // refractive index

    /* ── Animated ray construction (Feature 1) ── */
    this._rayAnimT   = [1, 1, 1];   // progress of each of the 3 rays [0..1]
    this._rayTweens  = [];           // active tween handles

    this._bindEvents();
    new ResizeObserver(() => { this.fit(); this.draw(); }).observe(canvas.parentElement);
  }

  fit() {
    const dpr = window.devicePixelRatio || 1;
    const w = this.canvas.offsetWidth || 600;
    const h = this.canvas.offsetHeight || 400;
    this.canvas.width  = w * dpr;
    this.canvas.height = h * dpr;
    this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    this.W = w; this.H = h;
  }

  getParams() { return { f: this.f, d: this.d, h: this.h }; }
  setParams({ f, d, h } = {}) {
    if (f !== undefined) this.f = Math.max(-200, Math.min(200, +f));
    if (d !== undefined) this.d = Math.max(30, Math.min(400, +d));
    if (h !== undefined) this.h = Math.max(20, Math.min(80, +h));
    this.draw();
    this._emit();
  }

  reset() {
    this.f = 100; this.d = 200; this.h = 50;
    this.draw();
    this._emit();
  }

  /* toggle aberration modes (Agent OB-A3) */
  setAberration(type, on) {
    if (type === 'spherical') this._aberrSpherical = !!on;
    if (type === 'chromatic') this._aberrChromatic = !!on;
    this.draw();
    this._emit();
  }


  /* ═══ Lens-maker formula (Feature 3) ════════════════════════════ */
  _lmCalcF() {
    const R1 = this._lmR1, R2 = this._lmR2, n = this._lmN;
    const inv1 = Math.abs(R1) > 0.5 ? 1 / R1 : 0;
    const inv2 = Math.abs(R2) > 0.5 ? 1 / R2 : 0;
    const invF = (n - 1) * (inv1 - inv2);
    if (Math.abs(invF) < 1e-6) return 9999;
    return 1 / invF;
  }

  setLensMode(simple) {
    this._lmSimple = !!simple;
    if (!simple) {
      const k = this.f * (this._lmN - 1);
      if (Math.abs(k) > 1) { this._lmR1 = k * 2; this._lmR2 = -k * 2; }
    }
    this.draw(); this._emit();
  }

  setLMParam(name, val) {
    const v = +val;
    if (name === 'R1') this._lmR1 = Math.max(-300, Math.min(300, v));
    else if (name === 'R2') this._lmR2 = Math.max(-300, Math.min(300, v));
    else if (name === 'n') this._lmN = Math.max(1.3, Math.min(2.4, v));
    if (!this._lmSimple) this.f = Math.max(-200, Math.min(200, this._lmCalcF()));
    this.draw(); this._emit();
  }

  _lmShapeName() {
    const R1 = this._lmR1, R2 = this._lmR2;
    const flat1 = Math.abs(R1) > 280, flat2 = Math.abs(R2) > 280;
    if (flat1 && flat2) return 'плоскопараллельная';
    if (R1 > 0 && R2 < 0) return 'двояковыпуклая';
    if (R1 < 0 && R2 > 0) return 'двояковогнутая';
    if (flat1 || flat2) return 'плоско-выпуклая / вогнутая';
    return 'мениск';
  }

  _drawLensLM(ctx, lx, ay) {
    const lensH = Math.min(this.H * 0.38, 140);
    const R1 = this._lmR1, R2 = this._lmR2;
    const flat1 = Math.abs(R1) > 280, flat2 = Math.abs(R2) > 280;
    const b1 = flat1 ? 0 : Math.max(-20, Math.min(20, lensH * lensH / (2 * R1)));
    const b2 = flat2 ? 0 : Math.max(-20, Math.min(20, lensH * lensH / (2 * -R2)));
    ctx.strokeStyle = 'rgba(155,93,229,0.85)'; ctx.lineWidth = 2.5;
    ctx.beginPath(); ctx.moveTo(lx + b1, ay - lensH); ctx.quadraticCurveTo(lx + b1 * 2, ay, lx + b1, ay + lensH); ctx.stroke();
    ctx.beginPath(); ctx.moveTo(lx + b2, ay - lensH); ctx.quadraticCurveTo(lx + b2 * 2, ay, lx + b2, ay + lensH); ctx.stroke();
    ctx.strokeStyle = 'rgba(155,93,229,0.4)'; ctx.lineWidth = 1.2;
    ctx.beginPath(); ctx.moveTo(lx + b1, ay - lensH); ctx.lineTo(lx + b2, ay - lensH); ctx.stroke();
    ctx.beginPath(); ctx.moveTo(lx + b1, ay + lensH); ctx.lineTo(lx + b2, ay + lensH); ctx.stroke();
    ctx.strokeStyle = 'rgba(155,93,229,0.2)'; ctx.lineWidth = 1;
    ctx.beginPath(); ctx.moveTo(lx, ay - lensH); ctx.lineTo(lx, ay + lensH); ctx.stroke();
    if (this.f > 0) { this._lensArrow(ctx, lx, ay - lensH, -1); this._lensArrow(ctx, lx, ay + lensH, 1); }
    else { this._lensArrowDiv(ctx, lx, ay - lensH, -1); this._lensArrowDiv(ctx, lx, ay + lensH, 1); }
  }

  _drawLMInfo(ctx, lx, ay) {
    if (this._lmSimple) return;
    const f = this.f, D = Math.abs(f) > 0.5 ? (1000 / f).toFixed(2) : '---';
    const n = this._lmN.toFixed(2);
    const R1s = Math.abs(this._lmR1) > 280 ? 'inf' : this._lmR1.toFixed(0);
    const R2s = Math.abs(this._lmR2) > 280 ? 'inf' : this._lmR2.toFixed(0);
    const shape = this._lmShapeName();
    const bx = lx + 20, by = 12, bw = 200, bh = 72;
    ctx.fillStyle = 'rgba(13,13,26,0.88)';
    ctx.beginPath(); ctx.roundRect(bx, by, bw, bh, 8); ctx.fill();
    ctx.strokeStyle = 'rgba(155,93,229,0.3)'; ctx.lineWidth = 1;
    ctx.beginPath(); ctx.roundRect(bx, by, bw, bh, 8); ctx.stroke();
    ctx.font = '10px Manrope, system-ui, sans-serif'; ctx.textAlign = 'left'; ctx.textBaseline = 'top';
    ctx.fillStyle = 'rgba(155,93,229,0.9)'; ctx.fillText('Lensmaker', bx + 8, by + 7);
    ctx.fillStyle = 'rgba(255,255,255,0.55)'; ctx.fillText('R1=' + R1s + '  R2=' + R2s + '  n=' + n, bx + 8, by + 22);
    ctx.fillStyle = '#06D6E0'; ctx.fillText('f = ' + (isFinite(f) ? f.toFixed(1) : '---') + ' mm', bx + 8, by + 38);
    ctx.fillStyle = '#FFD166'; ctx.fillText('D = ' + D + ' dptr', bx + 104, by + 38);
    ctx.fillStyle = 'rgba(255,255,255,0.4)'; ctx.fillText(shape, bx + 8, by + 54);
  }

  /* ═══ Animated 3-ray construction (Feature 1) ═══════════════════ */
  buildRays() {
    this._rayTweens.forEach(h => h && h.cancel && h.cancel());
    this._rayTweens = [];
    this._rayAnimT = [0, 0, 0];
    const animate = (idx, onDone) => {
      if (!window.LabFX) { this._rayAnimT[idx] = 1; this.draw(); if (onDone) onDone(); return; }
      const h = LabFX.motion.tween(0, 1, 500, 'easeOutCubic',
        t => { this._rayAnimT[idx] = t; this.draw(); }, onDone);
      this._rayTweens[idx] = h;
    };
    animate(0, () => animate(1, () => animate(2, () => { if (window.LabFX) LabFX.sound.play('chime'); })));
  }

  resetRays() {
    this._rayTweens.forEach(h => h && h.cancel && h.cancel());
    this._rayTweens = [];
    this._rayAnimT = [1, 1, 1];
    this.draw();
  }

  info() {
    const { f, d, h } = this;
    const denom = d - f;
    const dPrime = Math.abs(denom) < 0.01 ? Infinity : (f * d) / denom;
    const M = Math.abs(denom) < 0.01 ? Infinity : -dPrime / d;
    const hPrime = M === Infinity ? Infinity : M * h;
    const isVirtual = dPrime < 0;
    return {
      f:    +f.toFixed(1),
      d:    +d.toFixed(1),
      dPrime: dPrime === Infinity ? Infinity : +dPrime.toFixed(1),
      M:      M === Infinity ? Infinity : +M.toFixed(3),
      imageType: isVirtual ? 'мнимое' : 'действительное',
      h:    +h.toFixed(1),
      hPrime: hPrime === Infinity ? Infinity : +Math.abs(hPrime).toFixed(1),
    };
  }

  _emit() { if (this.onUpdate) this.onUpdate(this.info()); }

  _toCanvas(sx, sy) { return { cx: this.W / 2 + sx, cy: this.H / 2 - sy }; }
  _fromCanvas(cx, cy) { return { sx: cx - this.W / 2, sy: this.H / 2 - cy }; }

  draw() {
    const ctx = this.ctx, W = this.W, H = this.H;
    if (!W || !H) return;

    const { f, d, h } = this;
    const lensX = W / 2;
    const axisY = H / 2;

    ctx.fillStyle = '#0D0D1A';
    ctx.fillRect(0, 0, W, H);

    ctx.strokeStyle = 'rgba(255,255,255,0.15)';
    ctx.lineWidth = 1;
    ctx.setLineDash([6, 4]);
    ctx.beginPath(); ctx.moveTo(0, axisY); ctx.lineTo(W, axisY); ctx.stroke();
    ctx.setLineDash([]);

    // Lens silhouette: detailed (LM) or simple mode
    if (!this._lmSimple) this._drawLensLM(ctx, lensX, axisY);
    else this._drawLens(ctx, lensX, axisY, f);
    this._drawFocalPoints(ctx, lensX, axisY, f);

    const objX = lensX - d;
    this._drawArrow(ctx, objX, axisY, objX, axisY - h, '#9B5DE5', false);

    const denom = d - f;
    let dPrime, hPrime;
    if (Math.abs(denom) < 0.5) {
      dPrime = null; hPrime = null;
    } else {
      dPrime = (f * d) / denom;
      hPrime = (-dPrime / d) * h;
    }

    /* aberrations override standard rays (Agent OB-A3) */
    if (this._aberrSpherical) {
      this._drawSphericalAberration(ctx, lensX, axisY, d, h, f);
    } else if (this._aberrChromatic) {
      this._drawChromaticAberration(ctx, lensX, axisY, d, h, f);
    } else {
      this._drawRaysAnimated(ctx, lensX, axisY, d, h, f, dPrime, hPrime);
    }

    if (!this._aberrSpherical && !this._aberrChromatic && dPrime !== null && isFinite(dPrime)) {
      const isVirtual = dPrime < 0;
      const imgX = lensX + dPrime;
      // Feature 1: real=cyan, virtual=pink/dashed
      this._drawArrow(ctx, imgX, axisY, imgX, axisY - hPrime,
        isVirtual ? 'rgba(255,133,162,0.9)' : '#06D6E0', isVirtual);
    }

    this._drawLabels(ctx, lensX, axisY, d, f, dPrime, hPrime);
    this._drawArrowLabels(ctx, lensX, axisY, d, h, dPrime, hPrime);
    this._drawLMInfo(ctx, lensX, axisY);

    // Lens caustics: emit dust near focal point when image exists (only when OB_FX.caustics is off)
    if (!window.OB_FX.caustics && window.LabFX && dPrime !== null && isFinite(dPrime) && dPrime > 0) {
      const imgX = lensX + dPrime;
      if (!this._causticFrame) this._causticFrame = 0;
      this._causticFrame++;
      if (this._causticFrame % 4 === 0) {
        LabFX.particles.emit({ ctx, x: imgX + (Math.random() - 0.5) * 10, y: axisY + (Math.random() - 0.5) * 10, count: 3, color: '#FFD166', speed: 8, spread: Math.PI * 2, life: 500, shape: 'dust', glow: true });
      }
    }
    // OB_FX visual depth layer
    {
      const objX = lensX - d;
      const fxExtras = {
        srcX: objX, srcY: axisY - h,
        causticParams: { lx: lensX, ay: axisY, f },
        rays: [
          { x1: objX, y1: axisY - h, x2: lensX, y2: axisY - h },
          { x1: lensX, y1: axisY - h, x2: lensX + (dPrime || 200), y2: dPrime ? axisY - ((-dPrime / d) * h) : axisY },
        ],
      };
      _drawOBFXLayer(ctx, 'lens', fxExtras);
    }
    if (window.LabFX) { LabFX.particles.update(1 / 60); LabFX.particles.draw(ctx); }
  }

  _drawLens(ctx, lx, ay, f) {
    const lensH = Math.min(this.H * 0.38, 140);
    const converging = f > 0;
    ctx.strokeStyle = 'rgba(155,93,229,0.8)';
    ctx.lineWidth = 2.5;
    if (converging) {
      const bulge = Math.min(18, Math.abs(f) * 0.12);
      ctx.beginPath(); ctx.moveTo(lx, ay - lensH); ctx.quadraticCurveTo(lx + bulge, ay, lx, ay + lensH); ctx.stroke();
      ctx.beginPath(); ctx.moveTo(lx, ay - lensH); ctx.quadraticCurveTo(lx - bulge, ay, lx, ay + lensH); ctx.stroke();
      this._lensArrow(ctx, lx, ay - lensH, -1);
      this._lensArrow(ctx, lx, ay + lensH, 1);
    } else {
      const bulge = Math.min(14, Math.abs(f) * 0.1);
      ctx.beginPath(); ctx.moveTo(lx, ay - lensH); ctx.quadraticCurveTo(lx - bulge, ay, lx, ay + lensH); ctx.stroke();
      ctx.beginPath(); ctx.moveTo(lx, ay - lensH); ctx.quadraticCurveTo(lx + bulge, ay, lx, ay + lensH); ctx.stroke();
      this._lensArrowDiv(ctx, lx, ay - lensH, -1);
      this._lensArrowDiv(ctx, lx, ay + lensH, 1);
    }
    ctx.strokeStyle = 'rgba(155,93,229,0.3)';
    ctx.lineWidth = 1;
    ctx.beginPath(); ctx.moveTo(lx, ay - lensH); ctx.lineTo(lx, ay + lensH); ctx.stroke();
  }

  _lensArrow(ctx, x, y, dir) {
    const sz = 7;
    ctx.fillStyle = 'rgba(155,93,229,0.8)';
    ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x - sz, y + dir * sz * 1.2); ctx.lineTo(x + sz, y + dir * sz * 1.2); ctx.closePath(); ctx.fill();
  }

  _lensArrowDiv(ctx, x, y, dir) {
    const sz = 6;
    ctx.fillStyle = 'rgba(155,93,229,0.8)';
    ctx.beginPath(); ctx.moveTo(x - sz, y); ctx.lineTo(x, y - dir * sz); ctx.lineTo(x + sz, y); ctx.closePath(); ctx.fill();
  }

  _drawFocalPoints(ctx, lx, ay, f) {
    const pts = [{ sx: f, label: "F'" }, { sx: -f, label: 'F' }, { sx: 2 * f, label: "2F'" }, { sx: -2 * f, label: '2F' }];
    for (const p of pts) {
      const px = lx + p.sx;
      if (px < 10 || px > this.W - 10) continue;
      const isFocal = !p.label.startsWith('2');
      const r = isFocal ? 5 : 3.5;
      const col = isFocal ? '#06D6E0' : 'rgba(6,214,224,0.5)';
      ctx.fillStyle = col;
      ctx.beginPath(); ctx.arc(px, ay, r, 0, Math.PI * 2); ctx.fill();
      ctx.font = '11px Manrope, system-ui, sans-serif';
      ctx.fillStyle = col; ctx.textAlign = 'center'; ctx.textBaseline = 'top';
      ctx.fillText(p.label, px, ay + 10);
    }
  }

  _drawArrow(ctx, x1, y1, x2, y2, color, dashed) {
    ctx.strokeStyle = color; ctx.fillStyle = color; ctx.lineWidth = 2.5;
    if (dashed) ctx.setLineDash([6, 4]);
    ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke();
    if (dashed) ctx.setLineDash([]);
    const angle = Math.atan2(y2 - y1, x2 - x1), aLen = 10;
    ctx.beginPath();
    ctx.moveTo(x2, y2);
    ctx.lineTo(x2 - aLen * Math.cos(angle - 0.35), y2 - aLen * Math.sin(angle - 0.35));
    ctx.lineTo(x2 - aLen * Math.cos(angle + 0.35), y2 - aLen * Math.sin(angle + 0.35));
    ctx.closePath(); ctx.fill();
  }

  _drawRays(ctx, lx, ay, d, h, f, dPrime, hPrime) {
    // Wavelength-aware coloring
    const _wl = window._obWhiteLight;
    const _wlNm = window._obWavelength || 550;
    if (_wl) {
      // White-light mode: draw 3 spectral bundles (R/G/B) with offset for chromatic spread
      const bundles = [{ nm: 660, dOff: 0 }, { nm: 550, dOff: 0 }, { nm: 450, dOff: 0 }];
      const n0 = 1.5; // default glass
      bundles.forEach(b => {
        const nc = _nAtWavelength(n0, b.nm);
        // focal length shifts with n — thin lens: f ~ (n-1)*C → f(λ) = f * (n0-1)/(nc-1)
        const fC = f * (n0 - 1) / (nc - 1);
        const denomC = d - fC;
        const dPC = Math.abs(denomC) < 0.5 ? null : (fC * d) / denomC;
        const hPC = dPC !== null ? (-dPC / d) * h : null;
        const col = wavelengthToRGB(b.nm);
        ctx.save(); ctx.globalAlpha = 0.65;
        this._drawRaysSingle(ctx, lx, ay, d, h, fC, dPC, hPC, col);
        ctx.restore();
      });
      return;
    }
    const _monoColor = wavelengthToRGB(_wlNm);
    const objX = lx - d, objY = ay - h;
    const colors = [_monoColor, _monoColor, _monoColor];
    const hasImage = dPrime !== null && isFinite(dPrime);
    const isVirtual = hasImage && dPrime < 0;
    ctx.lineWidth = 1.5;
    const _doGlow = (color, fn) => {
      if (window.LabFX) LabFX.glow.drawGlow(ctx, fn, { color, intensity: 8 });
      else fn();
    };

    // Ray 1: parallel to axis
    _doGlow(colors[0], () => {
      ctx.strokeStyle = colors[0]; ctx.setLineDash([]);
      ctx.beginPath(); ctx.moveTo(objX, objY); ctx.lineTo(lx, objY); ctx.stroke();
      if (hasImage) {
        const imgX = lx + dPrime, imgY = ay - hPrime;
        if (!isVirtual) {
          ctx.beginPath(); ctx.moveTo(lx, objY); ctx.lineTo(imgX, imgY); ctx.stroke();
          this._extendRay(ctx, lx, objY, imgX, imgY, colors[0]);
        } else {
          const outSlope = (objY - ay) / f;
          ctx.beginPath(); ctx.moveTo(lx, objY); ctx.lineTo(lx + 300, objY + outSlope * 300); ctx.stroke();
          ctx.setLineDash([4, 4]);
          ctx.beginPath(); ctx.moveTo(lx, objY); ctx.lineTo(imgX, imgY); ctx.stroke();
          ctx.setLineDash([]);
        }
      }
    });

    // Ray 2: through center
    _doGlow(colors[1], () => {
      ctx.strokeStyle = colors[1]; ctx.setLineDash([]);
      const slope = (objY - ay) / (objX - lx);
      const farX = lx + 350, farY = ay + slope * 350;
      ctx.beginPath(); ctx.moveTo(objX, objY); ctx.lineTo(farX, farY); ctx.stroke();
      if (isVirtual) {
        const backX = lx - 350, backY = ay - slope * 350;
        ctx.setLineDash([4, 4]);
        ctx.beginPath(); ctx.moveTo(lx, ay); ctx.lineTo(backX, backY); ctx.stroke();
        ctx.setLineDash([]);
      }
    });

    // Ray 3: through F
    _doGlow(colors[2], () => {
      ctx.strokeStyle = colors[2]; ctx.setLineDash([]);
      const fx = lx - f, slope = (objY - ay) / (objX - fx);
      const hitY = objY + slope * (lx - objX);
      ctx.beginPath(); ctx.moveTo(objX, objY); ctx.lineTo(lx, hitY); ctx.stroke();
      const endX = hasImage && !isVirtual ? Math.max(lx + dPrime + 60, lx + 300) : lx + 300;
      ctx.beginPath(); ctx.moveTo(lx, hitY); ctx.lineTo(endX, hitY); ctx.stroke();
      if (hasImage && isVirtual) {
        ctx.setLineDash([4, 4]);
        ctx.beginPath(); ctx.moveTo(lx, hitY); ctx.lineTo(lx + dPrime, ay - hPrime); ctx.stroke();
        ctx.setLineDash([]);
      }
    });
  }

  /** Single-color version of _drawRays used internally for white-light chromatic bundles */
  _drawRaysSingle(ctx, lx, ay, d, h, f, dPrime, hPrime, color) {
    const objX = lx - d, objY = ay - h;
    const hasImage = dPrime !== null && isFinite(dPrime);
    const isVirtual = hasImage && dPrime < 0;
    ctx.lineWidth = 1.5; ctx.strokeStyle = color; ctx.setLineDash([]);
    // Ray 1: parallel to axis
    ctx.beginPath(); ctx.moveTo(objX, objY); ctx.lineTo(lx, objY); ctx.stroke();
    if (hasImage) {
      const imgX = lx + dPrime, imgY = ay - hPrime;
      if (!isVirtual) {
        ctx.beginPath(); ctx.moveTo(lx, objY); ctx.lineTo(imgX, imgY); ctx.stroke();
      } else {
        const outSlope = (objY - ay) / f;
        ctx.beginPath(); ctx.moveTo(lx, objY); ctx.lineTo(lx + 200, objY + outSlope * 200); ctx.stroke();
      }
    }
    // Ray 2: through center
    const slope2 = (objY - ay) / (objX - lx);
    ctx.beginPath(); ctx.moveTo(objX, objY); ctx.lineTo(lx + 250, ay + slope2 * 250); ctx.stroke();
    // Ray 3: through F (brief version)
    const fxOff = lx - f, slope3 = (objY - ay) / (objX - fxOff);
    const hitY3 = objY + slope3 * (lx - objX);
    ctx.beginPath(); ctx.moveTo(objX, objY); ctx.lineTo(lx, hitY3); ctx.stroke();
    ctx.beginPath(); ctx.moveTo(lx, hitY3); ctx.lineTo(lx + 250, hitY3); ctx.stroke();
    ctx.setLineDash([]);
  }

  _extendRay(ctx, x1, y1, x2, y2, color) {
    const dx = x2 - x1, dy = y2 - y1, len = Math.hypot(dx, dy);
    if (len < 1) return;
    ctx.globalAlpha = 0.3; ctx.strokeStyle = color;
    ctx.beginPath(); ctx.moveTo(x2, y2); ctx.lineTo(x2 + (dx / len) * 80, y2 + (dy / len) * 80); ctx.stroke();
    ctx.globalAlpha = 1;
  }

  /* ── Spherical aberration (Agent OB-A3) ──────────────────────
     5 parallel rays at different heights; f_eff(h) = f - h²/(2f).
     Marginal rays focus closer than paraxial for a converging lens.
  ─────────────────────────────────────────────────────────────── */
  _drawSphericalAberration(ctx, lx, ay, d, h, f) {
    if (Math.abs(f) < 1) return;
    const lensH  = Math.min(this.H * 0.36, 130);
    const fracs  = [-0.9, -0.5, 0, 0.5, 0.9];
    const pal    = ['#FF6B6B', '#FFD166', '#7BF5A4', '#06D6E0', '#B8A4FF'];
    const objX   = lx - d;
    ctx.save();
    ctx.lineWidth = 1.4;
    const focusPts = [];
    fracs.forEach((fr, i) => {
      const rayH   = fr * lensH;
      const fEff   = f > 0 ? f - (rayH * rayH) / (2 * f) : f + (rayH * rayH) / (2 * Math.abs(f));
      const denom  = d - fEff;
      if (Math.abs(denom) < 0.5) return;
      const dPrEff = (fEff * d) / denom;
      ctx.strokeStyle = pal[i];
      ctx.globalAlpha = 0.8;
      ctx.setLineDash([]);
      const startY = ay - rayH;
      ctx.beginPath(); ctx.moveTo(objX, startY); ctx.lineTo(lx, startY); ctx.stroke();
      if (f > 0 && isFinite(dPrEff) && dPrEff > 0) {
        const focX = lx + dPrEff;
        ctx.beginPath(); ctx.moveTo(lx, startY); ctx.lineTo(focX, ay);
        ctx.lineTo(focX + 70, ay + (startY - ay) * 0.5); ctx.stroke();
        focusPts.push({ fEff, label: i === 2 ? 'парак.' : 'краев.' });
      } else {
        ctx.beginPath(); ctx.moveTo(lx, startY);
        ctx.lineTo(lx + 280, startY + (ay - startY) * 0.6); ctx.stroke();
      }
    });
    ctx.globalAlpha = 1;
    ctx.restore();
    if (focusPts.length >= 2) {
      const fMin = Math.min(...focusPts.map(p => p.fEff)).toFixed(0);
      const fMax = Math.max(...focusPts.map(p => p.fEff)).toFixed(0);
      ctx.save();
      const bx = 12, by = 70;
      ctx.fillStyle = 'rgba(22,22,38,0.88)';
      ctx.beginPath(); ctx.roundRect(bx, by, 224, 44, 8); ctx.fill();
      ctx.font = '11px Manrope, system-ui, sans-serif';
      ctx.textAlign = 'left'; ctx.textBaseline = 'top';
      ctx.fillStyle = '#FF6B6B'; ctx.fillText('Сферическая аберрация', bx + 8, by + 6);
      ctx.fillStyle = 'rgba(255,255,255,0.55)';
      ctx.fillText('f парак.=' + fMax + '  f краев.=' + fMin, bx + 8, by + 24);
      ctx.restore();
    }
  }

  /* ── Chromatic aberration (Agent OB-A3) ──────────────────────
     f_R = f×1.02,  f_G = f,  f_B = f×0.98
     Three ray bundles drawn in R/G/B colours converging to different points.
  ─────────────────────────────────────────────────────────────── */
  _drawChromaticAberration(ctx, lx, ay, d, h, f) {
    if (Math.abs(f) < 1) return;
    const channels = [
      { scale: 1.02, color: '#FF4444', label: 'R' },
      { scale: 1.00, color: '#7BF5A4', label: 'G' },
      { scale: 0.98, color: '#4488FF', label: 'B' },
    ];
    const objX = lx - d;
    ctx.save();
    ctx.lineWidth = 1.6;
    const focusPts = [];
    channels.forEach(ch => {
      const fc     = f * ch.scale;
      const denom  = d - fc;
      if (Math.abs(denom) < 0.5) return;
      const dPrEff = (fc * d) / denom;
      const hPrEff = (-dPrEff / d) * h;
      const hasImg = isFinite(dPrEff) && dPrEff > 0;
      ctx.strokeStyle = ch.color;
      ctx.globalAlpha = 0.78;
      ctx.setLineDash([]);
      // Ray 1: parallel to axis
      ctx.beginPath(); ctx.moveTo(objX, ay - h); ctx.lineTo(lx, ay - h);
      if (hasImg) { ctx.lineTo(lx + dPrEff, ay - hPrEff); }
      ctx.stroke();
      // Ray 2: through centre
      const slopeC = h / d;
      ctx.beginPath(); ctx.moveTo(objX, ay - h); ctx.lineTo(lx, ay);
      if (hasImg) { ctx.lineTo(lx + dPrEff, ay - hPrEff); }
      else { ctx.lineTo(lx + 280, ay - slopeC * 280); }
      ctx.stroke();
      if (hasImg) focusPts.push({ x: lx + dPrEff, label: ch.label, color: ch.color, f: fc });
    });
    ctx.globalAlpha = 1;
    ctx.setLineDash([]);
    // focal markers
    focusPts.forEach(fp => {
      ctx.fillStyle = fp.color;
      ctx.beginPath(); ctx.arc(fp.x, ay, 5, 0, Math.PI * 2); ctx.fill();
      ctx.font = '10px Manrope, system-ui, sans-serif';
      ctx.fillStyle = fp.color; ctx.textAlign = 'center'; ctx.textBaseline = 'bottom';
      ctx.fillText(fp.label + ' f=' + fp.f.toFixed(0), fp.x, ay - 10);
    });
    ctx.restore();
    // info box
    ctx.save();
    const bx = 12, by = 70;
    ctx.fillStyle = 'rgba(22,22,38,0.88)';
    ctx.beginPath(); ctx.roundRect(bx, by, 224, 56, 8); ctx.fill();
    ctx.font = '11px Manrope, system-ui, sans-serif';
    ctx.textAlign = 'left'; ctx.textBaseline = 'top';
    ctx.fillStyle = '#4488FF'; ctx.fillText('Хроматическая аберрация', bx + 8, by + 6);
    if (focusPts.length >= 2) {
      const spread = Math.abs(focusPts[focusPts.length - 1].x - focusPts[0].x).toFixed(0);
      ctx.fillStyle = 'rgba(255,255,255,0.55)';
      ctx.fillText('Разброс фокусов: ' + spread + ' px', bx + 8, by + 22);
      ctx.fillText('fR > fG > fB  (красный фокус дальше)', bx + 8, by + 38);
    }
    ctx.restore();
  }

  _drawLabels(ctx, lx, ay, d, f, dPrime, hPrime) {
    ctx.font = '12px Manrope, system-ui, sans-serif'; ctx.textBaseline = 'top';
    const objX = lx - d;
    ctx.fillStyle = '#9B5DE5'; ctx.textAlign = 'center';
    ctx.fillText('d = ' + d.toFixed(0), (objX + lx) / 2, ay + 26);
    ctx.fillStyle = '#06D6E0';
    ctx.fillText('f = ' + f.toFixed(0), lx, ay + 42);
    if (dPrime !== null && isFinite(dPrime)) {
      const imgX = lx + dPrime;
      ctx.fillStyle = dPrime > 0 ? '#EF476F' : '#FFD166'; ctx.textAlign = 'center';
      ctx.fillText("d' = " + dPrime.toFixed(1), (lx + imgX) / 2, ay + 26);
    }
    const info = this.info();
    const boxW = 200, boxH = 52, bx = 12, by = 12;
    ctx.fillStyle = 'rgba(22,22,38,0.85)';
    ctx.beginPath(); ctx.roundRect(bx, by, boxW, boxH, 8); ctx.fill();
    ctx.font = '11px Manrope, system-ui, sans-serif'; ctx.fillStyle = 'rgba(255,255,255,0.7)';
    ctx.textAlign = 'left'; ctx.textBaseline = 'top';
    ctx.fillText("1/f = 1/d + 1/d'", bx + 10, by + 10);
    ctx.fillStyle = 'rgba(255,255,255,0.5)';
    const mStr = info.M === Infinity ? '---' : info.M.toFixed(2);
    const dpStr = info.dPrime === Infinity ? '---' : info.dPrime.toFixed(1);
    ctx.fillText('M = ' + mStr + "   d' = " + dpStr + '   ' + info.imageType, bx + 10, by + 30);
  }

  /* === _drawRaysAnimated: principal rays with per-ray progress === */
  _drawRaysAnimated(ctx, lx, ay, d, h, f, dPrime, hPrime) {
    const T = this._rayAnimT;
    if (T[0] >= 1 && T[1] >= 1 && T[2] >= 1) { this._drawRays(ctx, lx, ay, d, h, f, dPrime, hPrime); return; }
    const objX = lx - d, objY = ay - h;
    const hasImage = dPrime !== null && isFinite(dPrime);
    const isVirtual = hasImage && dPrime < 0;
    // Wavelength-aware colors for animation
    const _wlNm = window._obWavelength || 550;
    const _wl   = window._obWhiteLight;
    const _mc   = wavelengthToRGB(_wlNm);
    const COLORS = _wl ? [wavelengthToRGB(660), wavelengthToRGB(550), wavelengthToRGB(450)] : [_mc, _mc, _mc];
    ctx.lineWidth = 1.8;
    const lerp = (a, b, t) => a + (b - a) * Math.min(1, Math.max(0, t));
    const drawPts = (color, pts, t) => {
      if (t <= 0 || pts.length < 2) return;
      const totalLen = pts.reduce((s, p, i) => i === 0 ? 0 : s + Math.hypot(p[0]-pts[i-1][0], p[1]-pts[i-1][1]), 0);
      const target = totalLen * t;
      const draw = () => {
        ctx.strokeStyle = color; ctx.setLineDash([]);
        ctx.beginPath(); ctx.moveTo(pts[0][0], pts[0][1]);
        let drawn = 0;
        for (let i = 1; i < pts.length; i++) {
          const segLen = Math.hypot(pts[i][0]-pts[i-1][0], pts[i][1]-pts[i-1][1]);
          if (drawn + segLen <= target) { ctx.lineTo(pts[i][0], pts[i][1]); drawn += segLen; }
          else { const fr = segLen > 0 ? (target - drawn) / segLen : 0; ctx.lineTo(lerp(pts[i-1][0], pts[i][0], fr), lerp(pts[i-1][1], pts[i][1], fr)); break; }
        }
        ctx.stroke();
      };
      if (window.LabFX) LabFX.glow.drawGlow(ctx, draw, { color, intensity: 10 });
      else draw();
    };
    const FAR = lx + 360;
    const imgX = hasImage ? lx + dPrime : null, imgY = hasImage ? ay - hPrime : null;
    // Ray 1: parallel to axis -> through F'
    if (T[0] > 0) {
      let pts;
      if (!hasImage) { pts = [[objX, objY], [lx, objY], [FAR, objY]]; }
      else if (!isVirtual) { pts = [[objX, objY], [lx, objY], [imgX, imgY]]; }
      else { const s = (objY - ay) / f; pts = [[objX, objY], [lx, objY], [FAR, objY + s*(FAR-lx)]]; }
      drawPts(COLORS[0], pts, T[0]);
    }
    // Ray 2: through optical center (straight)
    if (T[1] > 0) {
      const s = (objY - ay) / (objX - lx);
      drawPts(COLORS[1], [[objX, objY], [FAR, ay + s*(FAR-lx)]], T[1]);
    }
    // Ray 3: through front focus F -> parallel after lens
    if (T[2] > 0) {
      const fx = lx - f, s = (objY - ay) / (objX - fx);
      const hitY = objY + s * (lx - objX);
      const endX = hasImage && !isVirtual ? Math.max(imgX + 60, FAR) : FAR;
      drawPts(COLORS[2], [[objX, objY], [lx, hitY], [endX, hitY]], T[2]);
    }
  }

  /* === Arrow labels: h_o, h_i, magnification Gamma === */
  _drawArrowLabels(ctx, lx, ay, d, h, dPrime, hPrime) {
    const objX = lx - d;
    ctx.font = '11px Manrope, system-ui, sans-serif'; ctx.textBaseline = 'middle';
    ctx.fillStyle = 'rgba(155,93,229,0.85)'; ctx.textAlign = 'right';
    ctx.fillText('ho=' + h.toFixed(0), objX - 6, ay - h / 2);
    if (dPrime !== null && isFinite(dPrime)) {
      const imgX = lx + dPrime, isVirtual = dPrime < 0;
      const M = -dPrime / d;
      const Gstr = isFinite(M) ? (M >= 0 ? '+' : '') + M.toFixed(2) : '---';
      const imgColor = isVirtual ? 'rgba(255,133,162,0.85)' : 'rgba(6,214,224,0.85)';
      ctx.fillStyle = imgColor; ctx.textAlign = 'left';
      ctx.fillText("hi=" + Math.abs(hPrime).toFixed(0), imgX + 6, ay - hPrime / 2);
      ctx.fillStyle = '#FFD166'; ctx.textAlign = 'center';
      ctx.fillText('G=' + Gstr, (lx + imgX) / 2, ay + 60);
    }
  }

  _bindEvents() {
    const cv = this.canvas;
    const getPos = (e) => {
      const r = cv.getBoundingClientRect();
      const t = e.touches ? e.touches[0] : e;
      return { mx: (t.clientX - r.left) * (this.W / r.width), my: (t.clientY - r.top) * (this.H / r.height) };
    };
    const hitTest = (mx, my) => {
      const lx = this.W / 2, ay = this.H / 2;
      if (Math.hypot(mx - (lx - this.d), my - (ay - this.h)) < 20) return 'object';
      if (Math.hypot(mx - (lx - this.f), my - ay) < 16) return 'focus';
      return null;
    };
    const onDown = (e) => { const { mx, my } = getPos(e); this._drag = hitTest(mx, my); };
    const onMove = (e) => {
      if (!this._drag) return;
      if (e.cancelable) e.preventDefault();
      const { mx } = getPos(e), lx = this.W / 2;
      if (this._drag === 'object') this.d = Math.max(30, Math.min(400, lx - mx));
      else if (this._drag === 'focus') this.f = Math.max(-200, Math.min(200, lx - mx));
      this.draw(); this._emit();
    };
    const onUp = () => { if (this._drag && window.LabFX) LabFX.sound.play('click'); this._drag = null; };
    cv.addEventListener('mousedown', onDown);
    window.addEventListener('mousemove', onMove);
    window.addEventListener('mouseup', onUp);
    cv.addEventListener('touchstart', e => { if (e.touches.length === 1) onDown(e); }, { passive: true });
    cv.addEventListener('touchmove', e => onMove(e), { passive: false });
    cv.addEventListener('touchend', onUp);
    cv.addEventListener('mousemove', e => {
      if (this._drag) { cv.style.cursor = 'grabbing'; return; }
      const { mx, my } = getPos(e);
      cv.style.cursor = hitTest(mx, my) ? 'grab' : 'default';
    });
  }
}

/* ─────────────────────────────────────────────────────────────
   2.  MIRROR ENGINE  (from mirror.js)
───────────────────────────────────────────────────────────────*/
class MirrorSim {
  constructor(canvas) {
    this.canvas = canvas;
    this.ctx    = canvas.getContext('2d');
    this.W = 0; this.H = 0;

    this.type = 'concave';
    this.f    = 120;
    this.d    = 240;
    this.h    = 60;

    this._playing   = false;
    this._animT     = 1.4;
    this._animSpeed = 1;
    this._raf       = null;

    this._step = -1;

    this._showGrid       = false;
    this._showZones      = true;
    this._showNormals    = true;
    this._showDims       = true;
    this._showAngles     = true;
    this._showPhotons    = true;
    this._pointMode      = false;
    this._showSpherical  = false; /* spherical aberration toggle (Agent OB-A3) */

    this._photons       = [];
    this._photonRaf     = null;
    this._photonTimer   = 0;
    this._lastPhoTime   = 0;
    this._photonPaths   = [];

    this._prevType = 'concave';
    this._transT   = 1.0;
    this._transRaf = null;

    this._drag   = null;
    this._hoverX = -999;
    this._hoverY = -999;

    this.onUpdate  = null;
    this.onAnimate = null;

    /* Feature 2: R slider + spherical aberration toggle */
    this._R           = 240;    // radius of curvature (positive=concave, negative=convex)
    this._useR        = false;  // true = R-slider mode; false = classic type+f mode
    this._parabolic   = false;  // false = spherical mirror; true = perfect parabolic

    this._bindEvents();
    new ResizeObserver(() => { this.fit(); this.draw(); }).observe(canvas.parentElement);
  }

  fit() {
    const dpr = window.devicePixelRatio || 1;
    const w = this.canvas.offsetWidth  || 600;
    const h = this.canvas.offsetHeight || 400;
    this.canvas.width  = w * dpr;
    this.canvas.height = h * dpr;
    this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    this.W = w; this.H = h;
  }

  setType(type) {
    if (type === this.type) return;
    this._prevType = this.type;
    this.type = type;
    if (this._playing) this._stopAnim();
    this._startTransition();
    this.draw(); this._emit();
  }

  getParams() { return { f: this.f, d: this.d, h: this.h }; }
  setParams({ f, d, h } = {}) {
    if (f !== undefined) this.f = Math.max(30, Math.min(300, +f));
    if (d !== undefined) this.d = Math.max(30, Math.min(490, +d));
    if (h !== undefined) this.h = Math.max(20, Math.min(80,  +h));
    this.draw(); this._emit();
  }

  setAnimSpeed(s)  { this._animSpeed = +s || 1; }
  togglePlay()     { this._playing ? this._stopAnim() : this._startAnim(); }
  stepNext()       { this._step = Math.min(3, this._step + 1); this.draw(); }
  stepReset()      { this._step = -1; this.draw(); }
  setPointMode(on) { this._pointMode = !!on; this.draw(); this._emit(); }

  setToggle(name, val) {
    const map = { grid:'_showGrid', zones:'_showZones', normals:'_showNormals', dims:'_showDims', angles:'_showAngles', photons:'_showPhotons', spherical:'_showSpherical' };
    if (map[name]) this[map[name]] = !!val;
    if (name === 'photons') { val ? this._startPhotons() : this._stopPhotons(); }
    this.draw();
  }

  exportPng() {
    const a = document.createElement('a');
    a.href = this.canvas.toDataURL('image/png');
    a.download = 'mirror_' + this.type + '_d' + Math.round(this.d) + '.png';
    a.click();
  }

  _fSigned() {
    if (this.type === 'flat') return Infinity;
    return this.type === 'convex' ? -this.f : this.f;
  }

  info() {
    const { type, d, h } = this;
    const f = this._fSigned();
    let dPrime, M;
    if (type === 'flat') { dPrime = -d; M = 1; }
    else {
      const den = d - f;
      if (Math.abs(den) < 0.5) { dPrime = Infinity; M = Infinity; }
      else { dPrime = f * d / den; M = -dPrime / d; }
    }
    const hPrime   = M === Infinity ? Infinity : M * h;
    const isReal   = dPrime > 0 && dPrime !== Infinity;
    const imageType = dPrime === Infinity ? '∞' : isReal ? 'действительное' : 'мнимое';
    const orient   = (M === Infinity || M === 1) ? 'прямое' : M < 0 ? 'перевёрнутое' : 'прямое';
    const sizeStr  = M === Infinity ? '' : Math.abs(M) > 1.05 ? 'увеличенное' : Math.abs(M) < 0.95 ? 'уменьшенное' : 'равное';
    return {
      f:      type === 'flat' ? '∞' : (type === 'convex' ? -this.f : +this.f).toFixed(0),
      d:      +d.toFixed(1),
      dPrime: dPrime === Infinity ? Infinity : +dPrime.toFixed(1),
      M:      M === Infinity ? Infinity : +M.toFixed(3),
      imageType, orient, sizeStr,
      hPrime: hPrime === Infinity ? Infinity : +Math.abs(hPrime).toFixed(1),
      isReal,
    };
  }

  _emit() { if (this.onUpdate) this.onUpdate(this.info()); }

  _getBulge(type) {
    if (type === 'flat')    return 0;
    if (type === 'concave') return -Math.min(30, this.f * 0.18);
    return Math.min(24, this.f * 0.16);
  }

  _startTransition() {
    this._transT = 0;
    if (this._transRaf) cancelAnimationFrame(this._transRaf);
    const step = () => {
      this._transT = Math.min(1, this._transT + 0.07);
      this.draw();
      if (this._transT < 1) this._transRaf = requestAnimationFrame(step);
      else this._transRaf = null;
    };
    this._transRaf = requestAnimationFrame(step);
  }

  _startAnim() { this._playing = true; this._animLoop(); }
  _stopAnim() {
    this._playing = false;
    if (this._raf) { cancelAnimationFrame(this._raf); this._raf = null; }
  }

  _animLoop() {
    if (!this._playing) return;
    this._animT += 0.013 * this._animSpeed;
    const t = 0.5 - 0.5 * Math.cos(this._animT);
    if (this.type === 'concave') this.d = Math.max(30, Math.min(490, this.f * (0.35 + 2.75 * t)));
    else                         this.d = 40 + 400 * t;
    if (this.onAnimate) this.onAnimate(this.d);
    this.draw(); this._emit();
    this._raf = requestAnimationFrame(() => this._animLoop());
  }

  _getRayPaths(mx, ay, f, dPrime, hPrime) {
    const { d, h, type } = this;
    const hasImage = dPrime !== null && isFinite(dPrime);
    const isReal   = hasImage && dPrime > 0;
    const imgX     = hasImage ? mx - dPrime : null;
    const imgY     = hasImage ? ay - (this._pointMode ? 0 : hPrime) : null;
    const objX     = mx - d;
    const objY     = ay - (this._pointMode ? 0 : h);
    const COLORS   = ['#06D6E0', '#7BF5A4', '#FFD166'];
    if (type === 'flat') {
      return [objY, ay, ay - h * 0.5].map((hy, i) => ({
        pts: [[objX, objY], [mx, hy], ...(hasImage ? [[imgX, imgY]] : [])],
        color: COLORS[i],
      }));
    }
    const hit1Y = ay - (this._pointMode ? 0 : h);
    const hit2Y = ay;
    const denom3 = d - f;
    const hit3Y  = Math.abs(denom3) < 0.5 ? null : ay + (this._pointMode ? 0 : h) * f / denom3;
    const rays = [];
    const add = (hitY, color) => {
      if (hitY === null || !isFinite(hitY) || hitY < -this.H || hitY > 2 * this.H) return;
      const pts = [[objX, objY], [mx, hitY]];
      if (hasImage) {
        if (isReal) {
          pts.push([imgX, imgY]);
          const dx = imgX - mx, dy = imgY - hitY, l = Math.hypot(dx, dy);
          if (l > 1) pts.push([imgX + dx / l * 60, imgY + dy / l * 60]);
        } else {
          const dx = imgX - mx, dy = imgY - hitY;
          if (Math.abs(dx) > 1) {
            const tL = (mx - 5) / dx;
            let endX = 5, endY = hitY - dy * tL;
            if (endY < 5 || endY > this.H - 5) {
              endY = endY < 5 ? 5 : this.H - 5;
              const tE = (hitY - endY) / dy;
              endX = Math.max(5, mx - dx * tE);
            }
            pts.push([endX, endY]);
          }
        }
      }
      rays.push({ pts, color });
    };
    add(hit1Y, COLORS[0]); add(hit2Y, COLORS[1]); add(hit3Y, COLORS[2]);
    return rays;
  }

  _startPhotons() {
    if (this._photonRaf) return;
    this._lastPhoTime = performance.now();
    this._photonLoop();
  }

  _stopPhotons() {
    if (this._photonRaf) { cancelAnimationFrame(this._photonRaf); this._photonRaf = null; }
    this._photons = [];
    this.draw();
  }

  _photonLoop() {
    const now = performance.now();
    const dt  = Math.min((now - this._lastPhoTime) / 1000, 0.1);
    this._lastPhoTime = now;
    const spd = 200;
    for (const p of this._photons) p.t = Math.min(1, p.t + dt * spd / p.len);
    this._photons = this._photons.filter(p => p.t < 1);
    this._photonTimer += dt;
    if (this._photonTimer > 0.75 && this._photonPaths.length) {
      this._photonTimer = 0;
      for (const path of this._photonPaths) {
        if (path.pts.length < 2) continue;
        let len = 0;
        for (let i = 1; i < path.pts.length; i++)
          len += Math.hypot(path.pts[i][0] - path.pts[i-1][0], path.pts[i][1] - path.pts[i-1][1]);
        if (len > 20) this._photons.push({ pts: path.pts, color: path.color, t: 0, len });
      }
    }
    if (!this._playing) this.draw();
    this._photonRaf = requestAnimationFrame(() => this._photonLoop());
  }

  draw() {
    const { ctx, W, H } = this;
    if (!W || !H) return;
    const f  = this._fSigned();
    const mx = Math.round(W * 0.62);
    const ay = H / 2;
    let dPrime = null, hPrime = null;
    if (this.type === 'flat') { dPrime = -this.d; hPrime = this._pointMode ? 0 : this.h; }
    else {
      const den = this.d - f;
      if (Math.abs(den) >= 0.5) {
        dPrime = f * this.d / den;
        hPrime = this._pointMode ? 0 : (-dPrime / this.d) * this.h;
      }
    }
    const step    = this._step;
    const showRay  = i => step === -1 || i <= step;
    const showFill = step === -1 || step >= 3;
    this._photonPaths = this._getRayPaths(mx, ay, f, dPrime, hPrime);
    ctx.fillStyle = '#0D0D1A'; ctx.fillRect(0, 0, W, H);
    if (this._showGrid)  this._drawGrid(ctx);
    if (this._showZones) this._drawZones(ctx, mx);
    ctx.strokeStyle = 'rgba(255,255,255,0.12)'; ctx.lineWidth = 1; ctx.setLineDash([6, 4]);
    ctx.beginPath(); ctx.moveTo(0, ay); ctx.lineTo(W, ay); ctx.stroke();
    ctx.setLineDash([]);
    this._drawFanRays(ctx, mx, ay, f, dPrime, hPrime, showRay, showFill);
    /* spherical aberration overlay (Agent OB-A3) */
    if (this._showSpherical && this.type !== 'flat' && isFinite(f))
      this._drawMirrorSphericalAberration(ctx, mx, ay, f);
    /* Feature 2: parabolic/spherical aberration fan */
    if (this._useR && this.type !== 'flat' && isFinite(f))
      this._drawAberrationFan(ctx, mx, ay, f);
    this._drawMirror(ctx, mx, ay);
    /* Feature 2: R and f labels on mirror */
    if (this._useR && this.type !== 'flat' && isFinite(f)) {
      ctx.save();
      ctx.font = 'bold 11px Manrope, system-ui, sans-serif';
      ctx.fillStyle = 'rgba(6,214,224,0.9)';
      ctx.textAlign = 'right'; ctx.textBaseline = 'bottom';
      ctx.fillText('R=' + this._R.toFixed(0) + '  f=' + f.toFixed(0), mx - 4, ay - 6);
      ctx.restore();
    }
    if (this.type !== 'flat') {
      this._drawFocalPoints(ctx, mx, ay, f);
      this._drawCenterC(ctx, mx, ay, f);
    }
    if (this._showNormals && this.type !== 'flat' && (step === -1 || step >= 3))
      this._drawNormals(ctx, mx, ay, f);
    if (this._showAngles && this.type !== 'flat' && step === -1)
      this._drawAngleArcs(ctx, mx, ay, f);
    if (step === -1 || step >= 1) this._drawRayLabels(ctx, mx, ay, f, step);
    const objX = mx - this.d;
    if (this._pointMode) {
      ctx.save(); ctx.shadowColor = '#9B5DE5'; ctx.shadowBlur = 10;
      ctx.fillStyle = '#9B5DE5'; ctx.beginPath(); ctx.arc(objX, ay, 5, 0, Math.PI*2); ctx.fill(); ctx.restore();
    } else { this._drawArrow(ctx, objX, ay, objX, ay - this.h, '#9B5DE5', false); }
    if (dPrime !== null && isFinite(dPrime)) {
      const imgX = mx - dPrime, imgY = ay - (this._pointMode ? 0 : hPrime);
      if (this._pointMode) {
        ctx.save(); ctx.fillStyle = dPrime > 0 ? '#EF476F' : '#FFD166';
        if (dPrime < 0) { ctx.globalAlpha = 0.55; ctx.setLineDash([4,3]); }
        ctx.beginPath(); ctx.arc(imgX, ay, 5, 0, Math.PI*2);
        dPrime > 0 ? ctx.fill() : (() => { ctx.stroke(); })();
        ctx.restore();
      } else {
        this._drawArrow(ctx, imgX, ay, imgX, imgY, dPrime > 0 ? '#EF476F' : '#FFD166', dPrime <= 0);
      }
    }
    if (this._showDims && (step === -1 || step >= 3))
      this._drawDimensions(ctx, mx, ay, f, dPrime, hPrime);
    this._drawInfoBox(ctx, f, dPrime);
    if ((step === -1 || step >= 3) && dPrime !== null) this._drawImageBadge(ctx, dPrime, hPrime);
    this._drawCriticalMarker(ctx, f);
    if (this._showDims) this._drawLegend(ctx);
    if (this._showPhotons && this._photons.length) this._drawPhotons(ctx);
    this._drawTooltip(ctx, mx, ay, f, dPrime, hPrime);
    if (step >= 0) this._drawStepOverlay(ctx, step);

    // Mirror caustics near focal point when real image exists (only when OB_FX.caustics is off)
    if (!window.OB_FX.caustics && window.LabFX && dPrime !== null && isFinite(dPrime) && dPrime > 0) {
      const focX = mx - dPrime, focY = ay - (this._pointMode ? 0 : hPrime);
      if (!this._mCausticFrame) this._mCausticFrame = 0;
      this._mCausticFrame++;
      if (this._mCausticFrame % 4 === 0) {
        LabFX.particles.emit({ ctx, x: focX + (Math.random()-0.5)*10, y: focY + (Math.random()-0.5)*10, count: 2, color: '#FFD166', speed: 6, spread: Math.PI*2, life: 500, shape: 'dust', glow: true });
      }
    }
    // OB_FX visual depth layer
    {
      const objX = mx - this.d;
      const fxExtras = {
        srcX: objX, srcY: ay - this.h,
        causticParams: f > 0 ? { lx: mx, ay, f } : null,
        rays: [
          { x1: objX, y1: ay - this.h, x2: mx, y2: ay },
        ],
        boundary: { bx: mx, by: ay, normalAngle: 0, kind: 'reflection' },
      };
      if (!fxExtras.causticParams) delete fxExtras.causticParams;
      _drawOBFXLayer(ctx, 'mirror', fxExtras);
    }
    if (window.LabFX) { LabFX.particles.update(1/60); LabFX.particles.draw(ctx); }
  }

  _drawGrid(ctx) {
    ctx.strokeStyle = 'rgba(255,255,255,0.03)'; ctx.lineWidth = 1; ctx.beginPath();
    for (let x = 0; x < this.W; x += 40) { ctx.moveTo(x,0); ctx.lineTo(x,this.H); }
    for (let y = 0; y < this.H; y += 40) { ctx.moveTo(0,y); ctx.lineTo(this.W,y); }
    ctx.stroke();
  }

  _drawZones(ctx, mx) {
    const g1 = ctx.createLinearGradient(0,0,mx,0);
    g1.addColorStop(0, 'rgba(6,214,224,0.0)'); g1.addColorStop(1, 'rgba(6,214,224,0.03)');
    ctx.fillStyle = g1; ctx.fillRect(0, 0, mx, this.H);
    const g2 = ctx.createLinearGradient(mx,0,this.W,0);
    g2.addColorStop(0, 'rgba(239,71,111,0.04)'); g2.addColorStop(1, 'rgba(239,71,111,0.0)');
    ctx.fillStyle = g2; ctx.fillRect(mx, 0, this.W-mx, this.H);
  }

  _drawMirror(ctx, mx, ay) {
    const mH = Math.min(this.H * 0.4, 150);
    ctx.save();
    const ease   = t => t < 0.5 ? 2*t*t : -1+(4-2*t)*t;
    const bulge  = this._getBulge(this._prevType) + (this._getBulge(this.type) - this._getBulge(this._prevType)) * ease(this._transT);
    ctx.strokeStyle = 'rgba(6,214,224,0.92)'; ctx.lineWidth = 3;
    ctx.shadowColor = 'rgba(6,214,224,0.45)'; ctx.shadowBlur = 8;
    ctx.beginPath(); ctx.moveTo(mx, ay - mH); ctx.quadraticCurveTo(mx + bulge, ay, mx, ay + mH); ctx.stroke();
    ctx.shadowBlur = 0;
    ctx.strokeStyle = 'rgba(6,214,224,0.15)'; ctx.lineWidth = 1.5;
    for (let i = 0; i <= 10; i++) {
      const y = ay - mH + i * mH * 2 / 10;
      ctx.beginPath(); ctx.moveTo(mx, y); ctx.lineTo(mx+14, y+10); ctx.stroke();
    }
    ctx.restore();
  }

  _drawFocalPoints(ctx, mx, ay, f) {
    const pts = [{ px: mx-f, lbl:'F', r:5 }, { px: mx-2*f, lbl:'2F', r:3.5 }];
    ctx.font = '11px Manrope, system-ui, sans-serif';
    for (const p of pts) {
      if (p.px < 4 || p.px > this.W-4) continue;
      const col = f < 0 ? 'rgba(255,209,102,0.7)' : '#06D6E0';
      ctx.fillStyle = col; ctx.beginPath(); ctx.arc(p.px, ay, p.r, 0, Math.PI*2); ctx.fill();
      ctx.fillStyle = col; ctx.textAlign = 'center'; ctx.textBaseline = 'top'; ctx.fillText(p.lbl, p.px, ay+9);
    }
  }

  _drawCenterC(ctx, mx, ay, f) {
    if (!isFinite(f)) return;
    const cx = mx - 2*f;
    if (cx < 4 || cx > this.W-4) return;
    const pulse = Math.abs(this.d - 2*Math.abs(f)) < Math.abs(f)*0.06;
    ctx.save();
    if (pulse) { ctx.shadowColor='rgba(255,152,0,0.9)'; ctx.shadowBlur=14; }
    ctx.fillStyle = pulse ? '#FF9800' : 'rgba(255,152,0,0.5)';
    ctx.beginPath(); ctx.arc(cx, ay, pulse ? 5 : 3.5, 0, Math.PI*2); ctx.fill();
    ctx.shadowBlur = 0;
    ctx.font = '11px Manrope, system-ui, sans-serif';
    ctx.fillStyle = pulse ? '#FF9800' : 'rgba(255,152,0,0.6)';
    ctx.textAlign = 'center'; ctx.textBaseline = 'top'; ctx.fillText('C', cx, ay+9);
    ctx.restore();
  }

  _drawFanRays(ctx, mx, ay, f, dPrime, hPrime, showRay, showFill) {
    const { d, h, type } = this;
    const hasImg = dPrime !== null && isFinite(dPrime);
    const isReal = hasImg && dPrime > 0;
    const imgX   = hasImg ? mx - dPrime : null;
    const imgY   = hasImg ? ay - (this._pointMode ? 0 : hPrime) : null;
    const objX   = mx - d, objY = ay - (this._pointMode ? 0 : h);
    // Wavelength-aware color
    const _wl = window._obWhiteLight;
    const _wlNm = window._obWavelength || 550;
    const _mc = wavelengthToRGB(_wlNm);
    const COLS   = _wl ? [wavelengthToRGB(660), wavelengthToRGB(550), wavelengthToRGB(450)] : [_mc, _mc, _mc];
    const FAN    = _wl ? 'rgba(255,255,255,0.12)' : `rgba(255,255,255,0.18)`;
    if (type === 'flat') {
      const hits = [objY, ay, ay - (this._pointMode ? 0 : h)*0.5];
      hits.forEach((hy, i) => {
        if (!showRay(i)) return;
        this._flatRay(ctx, mx, ay, d, h, objX, objY, hy, COLS[i], imgX, imgY, hasImg);
      });
      return;
    }
    const hit1 = ay - (this._pointMode ? 0 : h);
    const hit2 = ay;
    const den3  = d - f;
    const hit3  = Math.abs(den3) < 0.5 ? null : ay + (this._pointMode ? 0 : h)*f/den3;
    if (showFill) {
      const fills = [(hit1+hit2)/2];
      if (hit3 !== null && isFinite(hit3)) fills.push((hit2+hit3)/2);
      for (const hy of fills) this._oneRay(ctx, mx, objX, objY, hy, FAN, 0.6, hasImg, isReal, imgX, imgY);
    }
    if (showRay(0)) this._oneRay(ctx, mx, objX, objY, hit1, COLS[0], 1.0, hasImg, isReal, imgX, imgY);
    if (showRay(1)) this._oneRay(ctx, mx, objX, objY, hit2, COLS[1], 1.0, hasImg, isReal, imgX, imgY);
    if (showRay(2)) this._oneRay(ctx, mx, objX, objY, hit3, COLS[2], 1.0, hasImg, isReal, imgX, imgY);
  }

  _oneRay(ctx, mx, ox, oy, hitY, color, alpha, hasImg, isReal, imgX, imgY) {
    if (hitY === null || !isFinite(hitY) || hitY < -this.H || hitY > 2*this.H) return;
    ctx.save(); ctx.globalAlpha = alpha;
    if (window.LabFX && alpha > 0.5) { ctx.shadowColor = color; ctx.shadowBlur = 8; }
    ctx.strokeStyle = color; ctx.lineWidth = 1.5; ctx.setLineDash([]);
    ctx.beginPath(); ctx.moveTo(ox, oy); ctx.lineTo(mx, hitY); ctx.stroke();
    if (!hasImg) { ctx.restore(); return; }
    if (isReal) {
      ctx.beginPath(); ctx.moveTo(mx, hitY); ctx.lineTo(imgX, imgY); ctx.stroke();
      const dx = imgX-mx, dy = imgY-hitY, l = Math.hypot(dx,dy);
      if (l > 1) { ctx.globalAlpha = alpha * 0.22; ctx.beginPath(); ctx.moveTo(imgX,imgY); ctx.lineTo(imgX+dx/l*60, imgY+dy/l*60); ctx.stroke(); }
    } else {
      const dx = imgX-mx, dy = imgY-hitY;
      if (Math.abs(dx) < 1) { ctx.restore(); return; }
      const tL = (mx-5)/dx;
      let ex = 5, ey = hitY - dy*tL;
      if (ey < 5 || ey > this.H-5) { ey = ey < 5 ? 5 : this.H-5; ex = Math.max(5, mx - dx*(hitY-ey)/dy); }
      ctx.beginPath(); ctx.moveTo(mx, hitY); ctx.lineTo(ex, ey); ctx.stroke();
      ctx.globalAlpha = alpha * 0.4; ctx.setLineDash([4,4]);
      ctx.beginPath(); ctx.moveTo(mx, hitY); ctx.lineTo(imgX, imgY); ctx.stroke();
      ctx.setLineDash([]);
    }
    ctx.restore();
  }

  _flatRay(ctx, mx, ay, d, h, ox, oy, hitY, color, imgX, imgY, hasImg) {
    ctx.save(); ctx.strokeStyle = color; ctx.lineWidth = 1.5; ctx.setLineDash([]);
    ctx.beginPath(); ctx.moveTo(ox, oy); ctx.lineTo(mx, hitY); ctx.stroke();
    const slope = (hitY-oy)/(mx-ox);
    const farX  = Math.max(5, ox-50);
    const farY  = hitY - slope*(mx-farX);
    ctx.globalAlpha = 0.3;
    ctx.beginPath(); ctx.moveTo(mx, hitY); ctx.lineTo(farX, Math.max(5, Math.min(this.H-5, farY))); ctx.stroke();
    ctx.globalAlpha = 1;
    if (hasImg) { ctx.setLineDash([4,4]); ctx.beginPath(); ctx.moveTo(mx, hitY); ctx.lineTo(imgX, imgY); ctx.stroke(); ctx.setLineDash([]); }
    ctx.restore();
  }

  /* ── Mirror spherical aberration (Agent OB-A3) ────────────────
     For a spherical concave mirror, paraxial focal length = f.
     Marginal rays: f_eff(h) = f - h²/(4f)  (simplified).
     Draw 5 incoming parallel rays at different heights; show they
     focus at slightly different points along the axis.
  ─────────────────────────────────────────────────────────────── */
  _drawMirrorSphericalAberration(ctx, mx, ay, f) {
    const mH   = Math.min(this.H * 0.38, 140);
    const fracs = [-0.85, -0.5, 0, 0.5, 0.85];
    const pal   = ['#FF6B6B', '#FFD166', '#7BF5A4', '#06D6E0', '#B8A4FF'];
    ctx.save();
    ctx.lineWidth = 1.3;
    const focusPts = [];
    fracs.forEach((fr, i) => {
      const rayH   = fr * mH;
      const fEff   = f > 0 ? f - (rayH * rayH) / (4 * f) : f;
      const focX   = mx - fEff;
      ctx.strokeStyle = pal[i];
      ctx.globalAlpha = 0.7;
      ctx.setLineDash([]);
      const startY = ay - rayH;
      // incoming parallel ray from left
      ctx.beginPath(); ctx.moveTo(0, startY); ctx.lineTo(mx, startY); ctx.stroke();
      // reflected ray toward (approximate) focus
      if (focX > 5 && focX < mx) {
        ctx.beginPath(); ctx.moveTo(mx, startY); ctx.lineTo(focX, ay);
        ctx.lineTo(focX - 60, ay + (startY - ay) * 0.4); ctx.stroke();
        focusPts.push({ fEff, x: focX });
      }
    });
    ctx.globalAlpha = 1;
    ctx.restore();
    // info box
    if (focusPts.length >= 2) {
      const fMin = Math.min(...focusPts.map(p => p.fEff)).toFixed(0);
      const fMax = Math.max(...focusPts.map(p => p.fEff)).toFixed(0);
      ctx.save();
      const bx = 12, by = 70;
      ctx.fillStyle = 'rgba(22,22,38,0.88)';
      ctx.beginPath(); ctx.roundRect(bx, by, 224, 44, 8); ctx.fill();
      ctx.font = '11px Manrope, system-ui, sans-serif';
      ctx.textAlign = 'left'; ctx.textBaseline = 'top';
      ctx.fillStyle = '#FF6B6B'; ctx.fillText('Сферическая аберрация (зеркало)', bx + 8, by + 6);
      ctx.fillStyle = 'rgba(255,255,255,0.55)';
      ctx.fillText('f парак.=' + fMax + '  f краев.=' + fMin, bx + 8, by + 24);
      ctx.restore();
    }
  }

  _drawNormals(ctx, mx, ay, f) {
    if (!isFinite(f)) return;
    const { d, h } = this;
    const cX = mx - 2*f;
    const hits = [ay-h, ay];
    const d3 = d-f;
    if (Math.abs(d3) >= 0.5) { const y3 = ay + h*f/d3; if (isFinite(y3)) hits.push(y3); }
    ctx.save(); ctx.strokeStyle='rgba(255,255,255,0.14)'; ctx.lineWidth=1; ctx.setLineDash([4,4]);
    for (const hy of hits) {
      if (hy < -this.H || hy > 2*this.H) continue;
      const nx=cX-mx, ny=ay-hy, nl=Math.hypot(nx,ny);
      if (nl < 1) continue;
      const ux=nx/nl*28, uy=ny/nl*28;
      ctx.beginPath(); ctx.moveTo(mx-ux,hy-uy); ctx.lineTo(mx+ux,hy+uy); ctx.stroke();
    }
    ctx.setLineDash([]); ctx.restore();
  }

  _drawAngleArcs(ctx, mx, ay, f) {
    if (!isFinite(f)) return;
    const { d, h } = this;
    const hitY = ay - h;
    if (hitY < 5 || hitY > this.H-5) return;
    const cX = mx - 2*f;
    const nx = cX-mx, ny = ay-hitY, nl = Math.hypot(nx, ny);
    if (nl < 1) return;
    const normInward = Math.atan2(ny, nx);
    const normOuter  = normInward + Math.PI;
    const incDir     = Math.atan2(hitY-(ay-h), mx-(mx-d));
    const incFrom    = incDir + Math.PI;
    const r = 14;
    ctx.save(); ctx.lineWidth = 1;
    ctx.strokeStyle = 'rgba(6,214,224,0.45)';
    ctx.beginPath(); ctx.arc(mx, hitY, r, normOuter, incFrom, false); ctx.stroke();
    ctx.fillStyle = 'rgba(6,214,224,0.7)'; ctx.font = '9px Manrope, system-ui, sans-serif';
    ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
    const mid = (normOuter+incFrom)/2;
    ctx.fillText('θ', mx+Math.cos(mid)*(r+9), hitY+Math.sin(mid)*(r+9));
    ctx.restore();
  }

  _drawRayLabels(ctx, mx, ay, f, step) {
    if (this.type === 'flat' || !isFinite(f)) return;
    const { d, h } = this;
    const hits = [ay-h, ay, null];
    const den3 = d-f;
    if (Math.abs(den3) >= 0.5) { const y3 = ay+h*f/den3; if (isFinite(y3)) hits[2] = y3; }
    const COLS = ['#06D6E0','#7BF5A4','#FFD166'];
    const LBLS = ['①','②','③'];
    ctx.font = 'bold 11px Manrope, system-ui, sans-serif'; ctx.textAlign = 'left';
    hits.forEach((hy, i) => {
      if (hy === null || !isFinite(hy) || hy < -50 || hy > this.H+50) return;
      if (step !== -1 && i > step) return;
      ctx.fillStyle = COLS[i]; ctx.textBaseline = 'middle'; ctx.fillText(LBLS[i], mx+8, hy);
    });
  }

  _drawArrow(ctx, x1, y1, x2, y2, color, dashed) {
    ctx.strokeStyle = color; ctx.fillStyle = color; ctx.lineWidth = 2.5;
    if (dashed) ctx.setLineDash([6,4]);
    ctx.beginPath(); ctx.moveTo(x1,y1); ctx.lineTo(x2,y2); ctx.stroke();
    if (dashed) ctx.setLineDash([]);
    const a = Math.atan2(y2-y1, x2-x1), s=10;
    ctx.beginPath(); ctx.moveTo(x2,y2);
    ctx.lineTo(x2-s*Math.cos(a-0.35), y2-s*Math.sin(a-0.35));
    ctx.lineTo(x2-s*Math.cos(a+0.35), y2-s*Math.sin(a+0.35));
    ctx.closePath(); ctx.fill();
  }

  _drawDimensions(ctx, mx, ay, f, dPrime, hPrime) {
    const { d, h } = this;
    const objX  = mx - d;
    const yBase = ay + Math.min(this.H*0.22, 60);
    ctx.font = '11px Manrope, system-ui, sans-serif'; ctx.lineWidth = 1;
    const bracket = (x1, x2, y, lbl, col) => {
      if (x1 === x2 || x1 < 4 || x2 > this.W-4) return;
      ctx.strokeStyle = col; ctx.fillStyle = col; ctx.setLineDash([]);
      ctx.beginPath();
      ctx.moveTo(x1, y-5); ctx.lineTo(x1, y+5); ctx.moveTo(x1, y); ctx.lineTo(x2, y);
      ctx.moveTo(x2, y-5); ctx.lineTo(x2, y+5); ctx.stroke();
      ctx.textAlign='center'; ctx.textBaseline='top'; ctx.fillText(lbl, (x1+x2)/2, y+3);
    };
    bracket(objX, mx, yBase, 'd=' + d.toFixed(0), 'rgba(155,93,229,0.65)');
    if (isFinite(f) && Math.abs(f) > 5) {
      const fX = mx-f;
      if (fX > 4 && fX < this.W-4)
        bracket(Math.min(fX,mx), Math.max(fX,mx), yBase+20, 'f=' + Math.abs(f).toFixed(0), 'rgba(6,214,224,0.55)');
    }
    if (dPrime !== null && isFinite(dPrime)) {
      const ix = mx-dPrime;
      if (ix > 4 && ix < this.W-4)
        bracket(Math.min(ix,mx), Math.max(ix,mx), yBase, "d'=" + Math.abs(dPrime).toFixed(0),
          dPrime > 0 ? 'rgba(239,71,111,0.65)' : 'rgba(255,209,102,0.65)');
    }
    const xl = objX-18;
    if (xl > 4 && h > 6 && !this._pointMode) {
      ctx.strokeStyle='rgba(155,93,229,0.4)';
      ctx.beginPath(); ctx.moveTo(xl,ay); ctx.lineTo(xl,ay-h); ctx.stroke();
      ctx.fillStyle='rgba(155,93,229,0.7)'; ctx.textAlign='right'; ctx.textBaseline='middle';
      ctx.fillText('h=' + h.toFixed(0), xl-3, ay-h/2);
    }
    if (dPrime !== null && isFinite(dPrime) && !this._pointMode && Math.abs(hPrime) > 6) {
      const ix  = mx-dPrime;
      const xil = ix + (dPrime > 0 ? -18 : 18);
      if (xil > 4 && xil < this.W-4) {
        const col = dPrime > 0 ? 'rgba(239,71,111,' : 'rgba(255,209,102,';
        ctx.strokeStyle = col+'0.4)'; ctx.beginPath(); ctx.moveTo(ix,ay); ctx.lineTo(ix,ay-hPrime); ctx.stroke();
        ctx.fillStyle  = col+'0.7)';
        ctx.textAlign  = dPrime > 0 ? 'right' : 'left'; ctx.textBaseline='middle';
        ctx.fillText("h'=" + Math.abs(hPrime).toFixed(0), ix+(dPrime>0?-3:3), ay-hPrime/2);
      }
    }
  }

  _drawInfoBox(ctx, f, dPrime) {
    const info = this.info();
    const bx=12, by=12, bw=230, bh=76;
    ctx.fillStyle='rgba(13,13,26,0.9)'; ctx.beginPath(); ctx.roundRect(bx,by,bw,bh,8); ctx.fill();
    ctx.strokeStyle='rgba(255,255,255,0.06)'; ctx.lineWidth=1;
    ctx.beginPath(); ctx.roundRect(bx,by,bw,bh,8); ctx.stroke();
    ctx.font='11px Manrope, system-ui, sans-serif'; ctx.textAlign='left'; ctx.textBaseline='top';
    ctx.fillStyle='rgba(255,255,255,0.42)';
    ctx.fillText("1/f  =  1/d  +  1/d'", bx+10, by+8);
    if (isFinite(f) && dPrime !== null && isFinite(dPrime)) {
      ctx.fillStyle='rgba(6,214,224,0.88)';  ctx.fillText('1/' + Math.abs(+info.f), bx+10, by+28);
      ctx.fillStyle='rgba(255,255,255,0.28)';ctx.fillText('=',bx+60,by+28);
      ctx.fillStyle='rgba(155,93,229,0.88)'; ctx.fillText('1/' + info.d, bx+78, by+28);
      ctx.fillStyle='rgba(255,255,255,0.28)';ctx.fillText('+',bx+120,by+28);
      ctx.fillStyle= dPrime>0 ? 'rgba(239,71,111,0.88)' : 'rgba(255,209,102,0.88)';
      ctx.fillText((dPrime>0?'':'−') + '1/' + Math.abs(+info.dPrime).toFixed(0), bx+136, by+28);
    } else {
      ctx.fillStyle='rgba(255,209,102,0.75)';
      ctx.fillText('d = f  →  изображение на ∞', bx+10, by+28);
    }
    if (info.M !== Infinity) {
      ctx.fillStyle='rgba(255,255,255,0.28)'; ctx.fillText('M = ' + info.M, bx+10, by+48);
      if (isFinite(dPrime)) {
        ctx.fillStyle = dPrime > 0 ? '#EF476F' : '#FFD166';
        ctx.textAlign = 'right'; ctx.fillText(info.imageType + '  ' + info.orient, bx+bw-10, by+48);
        ctx.textAlign = 'left';
      }
    }
  }

  _drawImageBadge(ctx, dPrime, hPrime) {
    const info = this.info();
    const bw=160, bh=58, bx=this.W-bw-12, by=12;
    ctx.fillStyle='rgba(13,13,26,0.88)'; ctx.beginPath(); ctx.roundRect(bx,by,bw,bh,8); ctx.fill();
    ctx.strokeStyle='rgba(255,255,255,0.06)'; ctx.lineWidth=1;
    ctx.beginPath(); ctx.roundRect(bx,by,bw,bh,8); ctx.stroke();
    const isInf = !isFinite(dPrime);
    ctx.font='10px Manrope, system-ui, sans-serif'; ctx.textAlign='left'; ctx.textBaseline='top';
    const tc = isInf ? '#FFD166' : dPrime>0 ? '#EF476F' : '#FFD166';
    ctx.fillStyle='rgba(255,255,255,0.3)'; ctx.fillText('Тип:',    bx+10, by+8);
    ctx.fillStyle=tc;                       ctx.fillText(isInf?'∞':info.imageType, bx+44, by+8);
    if (!isInf) {
      ctx.fillStyle='rgba(255,255,255,0.3)'; ctx.fillText('Ориент.:', bx+10, by+26);
      ctx.fillStyle = info.M<0 ? 'rgba(239,71,111,0.9)' : 'rgba(123,245,164,0.9)';
      ctx.fillText(info.orient, bx+62, by+26);
      if (info.sizeStr) {
        const sc = Math.abs(+info.M)>1.05 ? '#9B5DE5' : Math.abs(+info.M)<0.95 ? '#06D6E0' : 'rgba(255,255,255,0.6)';
        ctx.fillStyle='rgba(255,255,255,0.3)'; ctx.fillText('Размер:', bx+10, by+42);
        ctx.fillStyle=sc; ctx.fillText(info.sizeStr + '  x' + Math.abs(+info.M).toFixed(2), bx+57, by+42);
      }
    }
  }

  _drawCriticalMarker(ctx, f) {
    if (!isFinite(f) || f <= 0) return;
    const eps = f*0.06;
    let text = null;
    if (Math.abs(this.d-f) < eps)     text = 'd = f : лучи параллельны, изображения нет';
    else if (Math.abs(this.d-2*f)<eps) text = 'd = 2f : изображение равное, M = −1';
    if (!text) return;
    ctx.save(); ctx.font='bold 11px Manrope, system-ui, sans-serif';
    ctx.textAlign='center'; ctx.textBaseline='top';
    const tw=ctx.measureText(text).width, bx=this.W/2-tw/2-10, by=4;
    ctx.fillStyle='rgba(255,209,102,0.15)'; ctx.beginPath(); ctx.roundRect(bx,by,tw+20,22,6); ctx.fill();
    ctx.strokeStyle='rgba(255,209,102,0.35)'; ctx.lineWidth=1;
    ctx.beginPath(); ctx.roundRect(bx,by,tw+20,22,6); ctx.stroke();
    ctx.fillStyle='#FFD166'; ctx.fillText(text, this.W/2, by+5);
    ctx.restore();
  }

  _drawLegend(ctx) {
    const items = [
      { c:'rgba(155,93,229,0.8)', t:'d > 0 — предмет перед зеркалом' },
      { c:'rgba(239,71,111,0.8)', t:"d' > 0 — действительное" },
      { c:'rgba(255,209,102,0.8)',t:"d' < 0 — мнимое" },
    ];
    const bx=12, lh=14, by=this.H - items.length*lh - 16;
    ctx.save(); ctx.font='9px Manrope, system-ui, sans-serif'; ctx.textBaseline='top';
    items.forEach(({ c, t }, i) => {
      const y = by+i*lh;
      ctx.fillStyle=c; ctx.fillRect(bx, y+3, 8, 8);
      ctx.fillStyle='rgba(255,255,255,0.32)'; ctx.textAlign='left'; ctx.fillText(t, bx+13, y);
    });
    ctx.restore();
  }

  _drawPhotons(ctx) {
    for (const p of this._photons) {
      const pos = this._photonPos(p.pts, p.t);
      if (!pos) continue;
      ctx.save(); ctx.shadowColor = p.color; ctx.shadowBlur = 8;
      ctx.fillStyle = p.color; ctx.beginPath(); ctx.arc(pos[0], pos[1], 3, 0, Math.PI*2); ctx.fill();
      ctx.restore();
    }
  }

  _photonPos(pts, t) {
    if (pts.length < 2) return null;
    let total = 0;
    const lens = [];
    for (let i=1; i<pts.length; i++) {
      const l = Math.hypot(pts[i][0]-pts[i-1][0], pts[i][1]-pts[i-1][1]);
      lens.push(l); total += l;
    }
    let dist = t * total;
    for (let i=0; i<lens.length; i++) {
      if (dist <= lens[i]) { const k = dist/lens[i]; return [pts[i][0]+(pts[i+1][0]-pts[i][0])*k, pts[i][1]+(pts[i+1][1]-pts[i][1])*k]; }
      dist -= lens[i];
    }
    return pts[pts.length-1];
  }

  _drawTooltip(ctx, mx, ay, f, dPrime, hPrime) {
    const { _hoverX:hx, _hoverY:hy } = this;
    if (hx < 0) return;
    let tip = null;
    const chk = (px, py, lbl, sub) => { if (!tip && Math.hypot(hx-px, hy-py) < 15) tip = { lbl, sub }; };
    if (isFinite(f)) {
      chk(mx-f, ay, 'Главный фокус F', 'f = ' + Math.abs(f).toFixed(0));
      chk(mx-2*f, ay, 'Центр кривизны C', 'R = 2f = ' + (2*Math.abs(f)).toFixed(0));
    }
    chk(mx-this.d, ay-(this._pointMode?0:this.h), 'Предмет', 'd = ' + this.d.toFixed(0) + ', h = ' + this.h.toFixed(0));
    if (dPrime !== null && isFinite(dPrime)) {
      const ix=mx-dPrime, iy=ay-(this._pointMode?0:hPrime);
      chk(ix, iy, 'Изображение', "d' = " + Math.abs(dPrime).toFixed(0) + ', M = ' + this.info().M);
    }
    if (!tip) return;
    ctx.save();
    ctx.font = 'bold 11px Manrope, system-ui, sans-serif';
    const tw = Math.max(ctx.measureText(tip.lbl).width, ctx.measureText(tip.sub).width);
    const bw=tw+20, bh=34;
    let tx=hx+14, ty=hy-bh-6;
    if (tx+bw > this.W-4) tx = hx-bw-14;
    if (ty < 4) ty = hy+10;
    ctx.fillStyle='rgba(13,13,26,0.95)'; ctx.strokeStyle='rgba(6,214,224,0.45)'; ctx.lineWidth=1;
    ctx.beginPath(); ctx.roundRect(tx,ty,bw,bh,6); ctx.fill(); ctx.stroke();
    ctx.fillStyle='#fff'; ctx.textAlign='left'; ctx.textBaseline='top'; ctx.fillText(tip.lbl, tx+10, ty+6);
    ctx.font='10px Manrope, system-ui, sans-serif';
    ctx.fillStyle='rgba(255,255,255,0.5)'; ctx.fillText(tip.sub, tx+10, ty+20);
    ctx.restore();
  }

  _drawStepOverlay(ctx, step) {
    const lbls = [
      '① Луч параллельно оси → отражается через F',
      '② Луч через вершину → отражается симметрично',
      '③ Луч через F → отражается параллельно',
      '   Изображение — пересечение всех отражённых лучей',
    ];
    const text = lbls[Math.min(step, lbls.length-1)];
    ctx.save(); ctx.font = '11px Manrope, system-ui, sans-serif';
    const tw = ctx.measureText(text).width;
    const bx = this.W/2-tw/2-12, by = this.H-34;
    ctx.fillStyle='rgba(13,13,26,0.9)'; ctx.beginPath(); ctx.roundRect(bx,by,tw+24,24,6); ctx.fill();
    ctx.fillStyle='#7BF5A4'; ctx.textAlign='center'; ctx.textBaseline='middle';
    ctx.fillText(text, this.W/2, by+12);
    ctx.restore();
  }

  /* === Feature 2: R-slider mode for MirrorSim === */
  setMirrorR(R) {
    this._useR = true;
    this._R = +R;
    // Derive type and f from R
    const absR = Math.abs(this._R);
    if (absR < 5) { this.type = 'flat'; }
    else if (this._R > 0) { this.type = 'concave'; this.f = absR / 2; }
    else { this.type = 'convex'; this.f = absR / 2; }
    this.draw(); this._emit();
  }

  setMirrorParabolic(on) {
    this._parabolic = !!on;
    this.draw();
  }

  /* Draw 5 parallel rays showing spherical vs parabolic aberration */
  _drawAberrationFan(ctx, mx, ay, f) {
    if (!isFinite(f) || Math.abs(f) < 5) return;
    const mH = Math.min(this.H * 0.38, 140);
    const heights = [-0.85, -0.45, 0, 0.45, 0.85];
    const COLORS = ['#FF6B6B', '#FFD166', '#7BF5A4', '#06D6E0', '#B8A4FF'];
    ctx.save(); ctx.lineWidth = 1.4;
    heights.forEach((fr, i) => {
      const rayH = fr * mH;
      // For parabolic mirror: all parallel rays focus exactly at f
      // For spherical: marginal rays (fr != 0) focus closer by h^2/(2R) approx
      const fEff = this._parabolic ? f : f - (rayH * rayH) / (2 * Math.abs(f) * 2);
      const startX = mx - this.d - 40;
      const hitY   = ay - rayH; // hits mirror at height rayH
      // Incident ray: horizontal from left to mirror
      ctx.strokeStyle = COLORS[i]; ctx.globalAlpha = 0.75;
      ctx.setLineDash([]);
      ctx.beginPath(); ctx.moveTo(startX, ay - rayH); ctx.lineTo(mx, hitY); ctx.stroke();
      // Reflected ray: goes toward focal point fEff
      const focX = mx - fEff;
      if (focX > 0 && focX < this.W) {
        ctx.beginPath(); ctx.moveTo(mx, hitY); ctx.lineTo(focX, ay);
        // extend a bit past focus
        const dx = focX - mx, dy = ay - hitY, len = Math.hypot(dx, dy);
        if (len > 1) ctx.lineTo(focX + dx/len*50, ay + dy/len*50);
        ctx.stroke();
      }
    });
    ctx.globalAlpha = 1;
    // label
    const label = this._parabolic ? 'Параболическое (идеальный фокус)' : 'Сферическое (аберрация)';
    const col   = this._parabolic ? '#7BF5A4' : '#FF6B6B';
    const bx = 12, by = this.H - 36;
    ctx.fillStyle = 'rgba(13,13,26,0.85)';
    ctx.beginPath(); ctx.roundRect(bx, by, 250, 24, 6); ctx.fill();
    ctx.font = 'bold 11px Manrope, system-ui, sans-serif';
    ctx.textAlign = 'left'; ctx.textBaseline = 'middle';
    ctx.fillStyle = col;
    ctx.fillText(label, bx + 8, by + 12);
    ctx.restore();
  }

  _bindEvents() {
    const cv = this.canvas;
    const getPos = e => {
      const r = cv.getBoundingClientRect();
      const t = e.touches ? e.touches[0] : e;
      return { px: (t.clientX-r.left)*(this.W/r.width), py: (t.clientY-r.top)*(this.H/r.height) };
    };
    const mX  = () => Math.round(this.W*0.62);
    const aY  = () => this.H/2;
    const hitTest = (px, py) => {
      if (this._playing) return null;
      const mx=mX(), ay=aY(), f=this._fSigned();
      if (Math.hypot(px-(mx-this.d), py-(ay-(this._pointMode?0:this.h))) < 20) return 'object';
      if (this.type !== 'flat' && isFinite(f) && Math.hypot(px-(mx-f), py-ay) < 16) return 'focus';
      const info = this.info();
      if (info.dPrime !== Infinity && isFinite(info.dPrime)) {
        const ix=mx-info.dPrime, iy=ay-(this._pointMode?0:(info.hPrime||0));
        if (Math.hypot(px-ix, py-iy) < 18) return 'image';
      }
      return null;
    };
    cv.addEventListener('mousedown', e => { const {px,py}=getPos(e); this._drag=hitTest(px,py); });
    window.addEventListener('mousemove', e => {
      const {px,py} = getPos(e);
      this._hoverX = px; this._hoverY = py;
      if (this._drag) {
        if (e.cancelable) e.preventDefault();
        const mx=mX(), f=this._fSigned();
        if (this._drag === 'object') this.d = Math.max(30, Math.min(490, mx-px));
        else if (this._drag === 'focus') this.f = Math.max(30, Math.min(300, Math.abs(mx-px)));
        else if (this._drag === 'image' && isFinite(f) && this.type !== 'flat') {
          const dp = mx-px; if (Math.abs(dp-f) > 5) this.d = Math.max(30, Math.min(490, f*dp/(dp-f)));
        }
        if (this.onAnimate) this.onAnimate(this.d);
        this.draw(); this._emit();
      } else if (!this._photonRaf && !this._playing) { this.draw(); }
    });
    window.addEventListener('mouseup', () => { if (this._drag && window.LabFX) LabFX.sound.play('click'); this._drag = null; });
    cv.addEventListener('mousemove', e => {
      if (this._drag) { cv.style.cursor='grabbing'; return; }
      const {px,py}=getPos(e);
      cv.style.cursor = (hitTest(px,py) && !this._playing) ? 'grab' : 'default';
    });
    cv.addEventListener('touchstart', e => {
      if (e.touches.length===1) { const {px,py}=getPos(e); this._drag=hitTest(px,py); }
    }, { passive: true });
    cv.addEventListener('touchmove', e => {
      if (!this._drag) return;
      if (e.cancelable) e.preventDefault();
      const {px}=getPos(e), mx=mX(), f=this._fSigned();
      if (this._drag==='object') this.d=Math.max(30,Math.min(490,mx-px));
      else if (this._drag==='focus') this.f=Math.max(30,Math.min(300,Math.abs(mx-px)));
      else if (this._drag==='image' && isFinite(f) && this.type!=='flat') {
        const dp=mx-px; if (Math.abs(dp-f)>5) this.d=Math.max(30,Math.min(490,f*dp/(dp-f)));
      }
      if (this.onAnimate) this.onAnimate(this.d);
      this.draw(); this._emit();
    }, { passive: false });
    cv.addEventListener('touchend', () => { this._drag=null; });
  }
}

/* ─────────────────────────────────────────────────────────────
   3.  REFRACTION ENGINE  (from refraction.js)
───────────────────────────────────────────────────────────────*/
class RefractionSim {
  constructor(canvas) {
    this.canvas = canvas;
    this.ctx    = canvas.getContext('2d');
    this.W = 0; this.H = 0;

    this.n1    = 1.0;
    this.n2    = 1.5;
    this.angle = 30;
    this.dispersion = false;

    this._drag = false;
    this.onUpdate = null;

    this._bindEvents();
    new ResizeObserver(() => { this.fit(); this.draw(); }).observe(canvas.parentElement);
  }

  fit() {
    const dpr = window.devicePixelRatio || 1;
    const w = this.canvas.offsetWidth || 600;
    const h = this.canvas.offsetHeight || 400;
    this.canvas.width  = w * dpr;
    this.canvas.height = h * dpr;
    this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    this.W = w; this.H = h;
  }

  getParams() { return { n1: this.n1, n2: this.n2, angle: this.angle, dispersion: this.dispersion }; }
  setParams({ n1, n2, angle, dispersion } = {}) {
    if (n1    !== undefined) this.n1    = Math.max(1.0, Math.min(3.0, +n1));
    if (n2    !== undefined) this.n2    = Math.max(1.0, Math.min(3.0, +n2));
    if (angle !== undefined) this.angle = Math.max(0, Math.min(89, +angle));
    if (dispersion !== undefined) this.dispersion = !!dispersion;
    this.draw(); this._emit();
  }

  reset() { this.n1 = 1.0; this.n2 = 1.5; this.angle = 30; this.dispersion = false; this.draw(); this._emit(); }

  info() {
    const { n1, n2, angle } = this;
    const theta1Rad = angle * Math.PI / 180;
    const sinTheta2 = (n1 / n2) * Math.sin(theta1Rad);
    const isTIR = Math.abs(sinTheta2) > 1;
    const criticalAngle = n1 > n2 ? +(Math.asin(n2 / n1) * 180 / Math.PI).toFixed(1) : null;
    let angle2;
    if (isTIR) angle2 = 'ПВО';
    else angle2 = +(Math.asin(sinTheta2) * 180 / Math.PI).toFixed(1);
    return { n1: +n1.toFixed(2), n2: +n2.toFixed(2), angle1: +angle.toFixed(1), angle2, criticalAngle, isTIR };
  }

  _emit() { if (this.onUpdate) this.onUpdate(this.info()); }

  draw() {
    const ctx = this.ctx, W = this.W, H = this.H;
    if (!W || !H) return;
    const midY = H / 2, hitX = W / 2, hitY = midY;
    const gradTop = ctx.createLinearGradient(0, 0, 0, midY);
    gradTop.addColorStop(0, '#131328'); gradTop.addColorStop(1, '#1a1a3a');
    ctx.fillStyle = gradTop; ctx.fillRect(0, 0, W, midY);
    const gradBot = ctx.createLinearGradient(0, midY, 0, H);
    gradBot.addColorStop(0, '#0e1a2e'); gradBot.addColorStop(1, '#0D0D1A');
    ctx.fillStyle = gradBot; ctx.fillRect(0, midY, W, H - midY);
    ctx.save();
    ctx.shadowColor = 'rgba(155, 93, 229, 0.4)'; ctx.shadowBlur = 12;
    ctx.strokeStyle = 'rgba(155, 93, 229, 0.5)'; ctx.lineWidth = 2;
    ctx.beginPath(); ctx.moveTo(0, midY); ctx.lineTo(W, midY); ctx.stroke();
    ctx.restore();
    ctx.strokeStyle = 'rgba(255,255,255,0.15)'; ctx.lineWidth = 1; ctx.setLineDash([6, 4]);
    ctx.beginPath(); ctx.moveTo(hitX, 0); ctx.lineTo(hitX, H); ctx.stroke();
    ctx.setLineDash([]);
    const theta1Rad = this.angle * Math.PI / 180;
    const sinTheta2 = (this.n1 / this.n2) * Math.sin(theta1Rad);
    const isTIR = Math.abs(sinTheta2) > 1;
    let R = 1;
    if (!isTIR) {
      const theta2Rad = Math.asin(sinTheta2);
      const cosT1 = Math.cos(theta1Rad), cosT2 = Math.cos(theta2Rad);
      const rs = (this.n1 * cosT1 - this.n2 * cosT2) / (this.n1 * cosT1 + this.n2 * cosT2);
      R = rs * rs;
    }
    const rayLen = Math.max(W, H) * 0.6;
    if (this.n1 > this.n2) {
      const critRad = Math.asin(this.n2 / this.n1);
      const critDx = Math.sin(critRad), critDy = Math.cos(critRad);
      ctx.strokeStyle = 'rgba(255,209,102,0.25)'; ctx.lineWidth = 1; ctx.setLineDash([4, 4]);
      ctx.beginPath(); ctx.moveTo(hitX, hitY); ctx.lineTo(hitX - critDx * rayLen * 0.5, hitY - critDy * rayLen * 0.5); ctx.stroke();
      ctx.setLineDash([]);
      ctx.font = '10px Manrope, system-ui, sans-serif'; ctx.fillStyle = 'rgba(255,209,102,0.5)';
      ctx.textAlign = 'left'; ctx.textBaseline = 'middle';
      ctx.fillText('θc=' + (critRad * 180 / Math.PI).toFixed(1) + '°', hitX - critDx * rayLen * 0.35 + 6, hitY - critDy * rayLen * 0.35);
    }
    if (this.dispersion && !isTIR) this._drawDispersion(ctx, hitX, hitY, midY, theta1Rad, rayLen);
    else this._drawMainRays(ctx, hitX, hitY, midY, theta1Rad, sinTheta2, isTIR, R, rayLen);
    this._drawAngleArcs(ctx, hitX, hitY, theta1Rad, sinTheta2, isTIR);
    this._drawMediumLabels(ctx, W, H, midY);
    this._drawInfoBox(ctx, isTIR, R);
    const incDx = Math.sin(theta1Rad), incDy = Math.cos(theta1Rad);
    const handleX = hitX - incDx * rayLen * 0.55, handleY = hitY - incDy * rayLen * 0.55;
    const grad = ctx.createRadialGradient(handleX, handleY, 0, handleX, handleY, 10);
    grad.addColorStop(0, 'rgba(155,93,229,0.4)'); grad.addColorStop(1, 'rgba(155,93,229,0)');
    ctx.fillStyle = grad; ctx.beginPath(); ctx.arc(handleX, handleY, 10, 0, Math.PI * 2); ctx.fill();

    // TIR one-shot sound
    if (window.LabFX) {
      if (isTIR && !this._wasTIR) {
        LabFX.sound.play('spark', { volume: 0.2 });
      }
      this._wasTIR = isTIR;

      // Brewster angle: R ≈ 0 (reflected intensity near zero for s-pol)
      const _isBrew = !isTIR && R < 0.005 && this.angle > 0;
      if (_isBrew && !this._wasBrewster) {
        LabFX.sound.play('chime', { pitch: 1.5, volume: 0.3 });
      }
      this._wasBrewster = _isBrew;
    }
    // OB_FX visual depth layer
    {
      const incDx2 = Math.sin(theta1Rad), incDy2 = Math.cos(theta1Rad);
      const incStartX = hitX - incDx2 * rayLen, incStartY = hitY - incDy2 * rayLen;
      // Normal at boundary points upward (angle = -PI/2 in canvas coords)
      const normalAngle = -Math.PI / 2;
      const kind = isTIR ? 'reflection' : 'refraction';
      const fxExtras = {
        srcX: incStartX, srcY: incStartY,
        rays: [
          { x1: incStartX, y1: incStartY, x2: hitX, y2: hitY, n: this.n1 },
        ],
        boundary: { bx: hitX, by: hitY, normalAngle, kind },
      };
      _drawOBFXLayer(ctx, 'refraction', fxExtras);
    }
    if (window.LabFX) {
      LabFX.particles.update(1 / 60);
      LabFX.particles.draw(ctx);
    }
  }

  _drawMainRays(ctx, hitX, hitY, midY, theta1Rad, sinTheta2, isTIR, R, rayLen) {
    // Use wavelength color if set, otherwise fall back to purple/red/cyan scheme
    const _wl = window._obWhiteLight;
    const _wlNm = window._obWavelength || 550;
    const incColor = _wl ? '#FFFFFF' : wavelengthToRGB(_wlNm);
    const incDx = Math.sin(theta1Rad), incDy = Math.cos(theta1Rad);
    const incStartX = hitX - incDx * rayLen, incStartY = hitY - incDy * rayLen;
    if (_wl) {
      // White-light: draw spectral fan using physical n(λ) model
      this._drawRay(ctx, incStartX, incStartY, hitX, hitY, '#FFFFFF', 2.5);
      this._drawArrowhead(ctx, hitX, hitY, Math.atan2(hitY - incStartY, hitX - incStartX), '#FFFFFF');
      for (const s of OB_SPECTRAL) {
        const n2w = _nAtWavelength(this.n2, s.nm);
        const sinT2w = (this.n1 / n2w) * Math.sin(theta1Rad);
        if (Math.abs(sinT2w) > 1) continue;
        const t2w = Math.asin(sinT2w);
        const col = wavelengthToRGB(s.nm);
        ctx.globalAlpha = 0.8;
        this._drawRay(ctx, hitX, hitY, hitX + Math.sin(t2w) * rayLen, hitY + Math.cos(t2w) * rayLen, col, 1.8);
        ctx.globalAlpha = 1;
      }
      // Reflected ray (partial, semi-transparent)
      ctx.globalAlpha = 0.3;
      this._drawRay(ctx, hitX, hitY, hitX + incDx * rayLen * 0.7, hitY - incDy * rayLen * 0.7, '#FFFFFF', 1.5);
      ctx.globalAlpha = 1;
      return;
    }
    this._drawRay(ctx, incStartX, incStartY, hitX, hitY, incColor, 2.5);
    this._drawArrowhead(ctx, hitX, hitY, Math.atan2(hitY - incStartY, hitX - incStartX), incColor);
    const refDx = incDx, refDy = -incDy;
    const refEndX = hitX + refDx * rayLen, refEndY = hitY + refDy * rayLen;
    const refAlpha = isTIR ? 1.0 : Math.max(0.3, Math.sqrt(R));
    ctx.globalAlpha = refAlpha;
    this._drawRay(ctx, hitX, hitY, refEndX, refEndY, '#EF476F', 2.5);
    this._drawArrowhead(ctx, refEndX, refEndY, Math.atan2(refEndY - hitY, refEndX - hitX), '#EF476F');
    ctx.globalAlpha = 1;
    if (!isTIR) {
      const theta2Rad = Math.asin(sinTheta2);
      const refracDx = Math.sin(theta2Rad), refracDy = Math.cos(theta2Rad);
      const refracEndX = hitX + refracDx * rayLen, refracEndY = hitY + refracDy * rayLen;
      const T = 1 - R;
      ctx.globalAlpha = Math.max(0.3, Math.sqrt(T));
      // Refracted ray: use wavelength color with slight shift for refracted
      this._drawRay(ctx, hitX, hitY, refracEndX, refracEndY, incColor, 2.5);
      this._drawArrowhead(ctx, refracEndX, refracEndY, Math.atan2(refracEndY - hitY, refracEndX - hitX), incColor);
      ctx.globalAlpha = 1;
    }
  }

  _drawDispersion(ctx, hitX, hitY, midY, theta1Rad, rayLen) {
    const spectral = [
      { color: '#FF0000', wave: 656 }, { color: '#FF7F00', wave: 589 }, { color: '#FFFF00', wave: 550 },
      { color: '#00FF00', wave: 510 }, { color: '#00FFFF', wave: 475 }, { color: '#0000FF', wave: 450 },
      { color: '#8B00FF', wave: 400 },
    ];
    const incDx = Math.sin(theta1Rad), incDy = Math.cos(theta1Rad);
    const incStartX = hitX - incDx * rayLen, incStartY = hitY - incDy * rayLen;
    this._drawRay(ctx, incStartX, incStartY, hitX, hitY, '#FFFFFF', 2.5);
    this._drawArrowhead(ctx, hitX, hitY, Math.atan2(hitY - incStartY, hitX - incStartX), '#FFFFFF');
    const A = this.n2 - 4500 / (550 * 550), B = 4500;
    for (const s of spectral) {
      const n2w = A + B / (s.wave * s.wave);
      const sinT2 = (this.n1 / n2w) * Math.sin(theta1Rad);
      if (Math.abs(sinT2) > 1) continue;
      const t2 = Math.asin(sinT2), dx = Math.sin(t2), dy = Math.cos(t2);
      ctx.globalAlpha = 0.85;
      this._drawRay(ctx, hitX, hitY, hitX + dx * rayLen, hitY + dy * rayLen, s.color, 1.5);
      ctx.globalAlpha = 1;
    }
    const refDx = incDx, refDy = -incDy;
    ctx.globalAlpha = 0.35;
    this._drawRay(ctx, hitX, hitY, hitX + refDx * rayLen * 0.7, hitY + refDy * rayLen * 0.7, '#FFFFFF', 1.5);
    ctx.globalAlpha = 1;
  }

  _drawRay(ctx, x1, y1, x2, y2, color, width) {
    const drawFn = () => {
      ctx.strokeStyle = color; ctx.lineWidth = width; ctx.lineCap = 'round';
      ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke();
      ctx.save(); ctx.shadowColor = color; ctx.shadowBlur = 8; ctx.globalAlpha = 0.3;
      ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke();
      ctx.restore();
    };
    if (window.LabFX) LabFX.glow.drawGlow(ctx, drawFn, { color, intensity: 8 });
    else drawFn();
  }

  _drawArrowhead(ctx, x, y, angle, color) {
    const aLen = 10;
    ctx.fillStyle = color;
    ctx.beginPath(); ctx.moveTo(x, y);
    ctx.lineTo(x - aLen * Math.cos(angle - 0.3), y - aLen * Math.sin(angle - 0.3));
    ctx.lineTo(x - aLen * Math.cos(angle + 0.3), y - aLen * Math.sin(angle + 0.3));
    ctx.closePath(); ctx.fill();
  }

  _drawAngleArcs(ctx, hitX, hitY, theta1Rad, sinTheta2, isTIR) {
    const arcR = 50, font = '12px Manrope, system-ui, sans-serif';
    if (this.angle > 1) {
      ctx.strokeStyle = 'rgba(155,93,229,0.6)'; ctx.lineWidth = 1.5;
      ctx.beginPath();
      const normAngle = -Math.PI / 2, incAngle = -Math.PI / 2 - theta1Rad;
      ctx.arc(hitX, hitY, arcR, Math.min(incAngle, normAngle), Math.max(incAngle, normAngle)); ctx.stroke();
      ctx.font = font; ctx.fillStyle = '#9B5DE5'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
      const midA = normAngle - theta1Rad / 2;
      ctx.fillText('θ₁=' + this.angle.toFixed(1) + '°', hitX + (arcR + 20) * Math.cos(midA), hitY + (arcR + 20) * Math.sin(midA));
    }
    if (!isTIR && Math.abs(sinTheta2) <= 1) {
      const theta2Rad = Math.asin(sinTheta2);
      if (theta2Rad > 0.02) {
        ctx.strokeStyle = 'rgba(6,214,224,0.6)'; ctx.lineWidth = 1.5;
        ctx.beginPath();
        const normDown = Math.PI / 2, refAngle = Math.PI / 2 + theta2Rad;
        ctx.arc(hitX, hitY, arcR * 0.8, Math.min(normDown, refAngle), Math.max(normDown, refAngle)); ctx.stroke();
        const angle2Deg = theta2Rad * 180 / Math.PI;
        ctx.font = font; ctx.fillStyle = '#06D6E0'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
        const midA2 = normDown + theta2Rad / 2;
        ctx.fillText('θ₂=' + angle2Deg.toFixed(1) + '°', hitX + (arcR * 0.8 + 20) * Math.cos(midA2), hitY + (arcR * 0.8 + 20) * Math.sin(midA2));
      }
    }
  }

  _drawMediumLabels(ctx, W, H, midY) {
    ctx.font = '13px Manrope, system-ui, sans-serif'; ctx.textBaseline = 'middle';
    ctx.fillStyle = 'rgba(155,93,229,0.6)'; ctx.textAlign = 'left';
    ctx.fillText('n₁ = ' + this.n1.toFixed(2), 16, midY - 30);
    ctx.fillStyle = 'rgba(6,214,224,0.6)';
    ctx.fillText('n₂ = ' + this.n2.toFixed(2), 16, midY + 30);
    const theta1Rad = this.angle * Math.PI / 180;
    const sinT2 = (this.n1 / this.n2) * Math.sin(theta1Rad);
    if (Math.abs(sinT2) > 1) {
      ctx.font = 'bold 14px Manrope, system-ui, sans-serif'; ctx.fillStyle = '#EF476F'; ctx.textAlign = 'center';
      ctx.fillText('Полное внутреннее отражение (ПВО)', W / 2, midY + 60);
    }
  }

  _drawInfoBox(ctx, isTIR, R) {
    const boxW = 220, boxH = 72, bx = this.W - boxW - 12, by = 12;
    ctx.fillStyle = 'rgba(22,22,38,0.85)'; ctx.beginPath(); ctx.roundRect(bx, by, boxW, boxH, 8); ctx.fill();
    ctx.font = '11px Manrope, system-ui, sans-serif'; ctx.textAlign = 'left'; ctx.textBaseline = 'top';
    ctx.fillStyle = 'rgba(255,255,255,0.7)'; ctx.fillText('n₁·sin(θ₁) = n₂·sin(θ₂)', bx + 10, by + 10);
    const info = this.info();
    ctx.fillStyle = 'rgba(255,255,255,0.5)';
    ctx.fillText('θ₁ = ' + info.angle1 + '°   θ₂ = ' + (info.isTIR ? 'ПВО' : info.angle2 + '°'), bx + 10, by + 28);
    const rPct = (R * 100).toFixed(1), tPct = ((1 - R) * 100).toFixed(1);
    ctx.fillStyle = '#EF476F'; ctx.fillText('R = ' + rPct + '%', bx + 10, by + 46);
    ctx.fillStyle = '#06D6E0'; ctx.fillText('T = ' + (isTIR ? '0' : tPct) + '%', bx + 90, by + 46);
    if (info.criticalAngle !== null) { ctx.fillStyle = '#FFD166'; ctx.fillText('θc = ' + info.criticalAngle + '°', bx + 160, by + 46); }
  }

  _bindEvents() {
    const cv = this.canvas;
    const getPos = (e) => {
      const r = cv.getBoundingClientRect();
      const t = e.touches ? e.touches[0] : e;
      return { mx: (t.clientX - r.left) * (this.W / r.width), my: (t.clientY - r.top) * (this.H / r.height) };
    };
    const hitTest = (mx, my) => {
      const hitX = this.W / 2, hitY = this.H / 2;
      if (my >= hitY) return false;
      const dist = Math.hypot(mx - hitX, my - hitY);
      return dist > 20 && dist < Math.max(this.W, this.H) * 0.6;
    };
    const angleFromMouse = (mx, my) => {
      const hitX = this.W / 2, hitY = this.H / 2;
      const dx = mx - hitX, dy = hitY - my;
      return Math.max(0, Math.min(89, Math.atan2(Math.abs(dx), dy) * 180 / Math.PI));
    };
    const onDown = (e) => { const { mx, my } = getPos(e); if (hitTest(mx, my)) this._drag = true; };
    const onMove = (e) => {
      if (!this._drag) return;
      if (e.cancelable) e.preventDefault();
      const { mx, my } = getPos(e);
      this.angle = angleFromMouse(mx, my);
      this.draw(); this._emit();
    };
    const onUp = () => { if (this._drag && window.LabFX) LabFX.sound.play('click'); this._drag = false; };
    cv.addEventListener('mousedown', onDown);
    window.addEventListener('mousemove', onMove);
    window.addEventListener('mouseup', onUp);
    cv.addEventListener('touchstart', e => { if (e.touches.length === 1) onDown(e); }, { passive: true });
    cv.addEventListener('touchmove', e => onMove(e), { passive: false });
    cv.addEventListener('touchend', onUp);
    cv.addEventListener('mousemove', e => {
      if (this._drag) { cv.style.cursor = 'grabbing'; return; }
      const { mx, my } = getPos(e);
      cv.style.cursor = hitTest(mx, my) ? 'grab' : 'default';
    });
  }
}

/* ─────────────────────────────────────────────────────────────
   4.  FREE-BUILD MULTI-LENS SIM  (Agent OB-A3)
       Cascaded image formation — each lens treats the previous
       image as its object. Two-lens effective focal length is
       F = f1*f2 / (f1+f2-d).
───────────────────────────────────────────────────────────────*/
class FreeBuildSim {
  constructor(canvas) {
    this.canvas = canvas;
    this.ctx    = canvas.getContext('2d');
    this.W = 0; this.H = 0;
    /* elements: { x_frac, f, id } sorted left→right at draw time */
    this.elements = [
      { x_frac: 0.30, f: 120, id: 1 },
      { x_frac: 0.65, f: 90,  id: 2 },
    ];
    this.objFrac  = 0.10;
    this.objH     = 60;
    this._drag    = null;
    this.onUpdate = null;
    this._bindEvents();
    new ResizeObserver(() => { this.fit(); this.draw(); }).observe(canvas.parentElement);
  }

  fit() {
    const dpr = window.devicePixelRatio || 1;
    const w = this.canvas.offsetWidth  || 600;
    const h = this.canvas.offsetHeight || 400;
    this.canvas.width  = w * dpr;
    this.canvas.height = h * dpr;
    this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    this.W = w; this.H = h;
  }

  /* Returns { stages, totalM, sysFocal, elems } */
  _computeChain() {
    const W    = this.W;
    const elems = [...this.elements].sort((a, b) => a.x_frac - b.x_frac);
    let curX = this.objFrac * W;
    let curH = this.objH;
    const stages = [];
    let totalM = 1;
    for (const el of elems) {
      const lensX = el.x_frac * W;
      const dO    = lensX - curX;
      if (Math.abs(dO) < 1) continue;
      const f     = el.f;
      const denom = dO - f;
      let dI, imgH, M;
      if (Math.abs(denom) < 0.5) {
        dI = Infinity; imgH = Infinity; M = Infinity;
      } else {
        dI   = (f * dO) / denom;
        M    = -(dI / dO);
        imgH = M * curH;
      }
      const imgX  = lensX + dI;
      const isVirt = isFinite(dI) && dI < 0;
      stages.push({ objX: curX, objH: curH, lensX, f, imgX, imgH, dO, dI, M, isVirt, el });
      totalM *= (isFinite(M) ? M : 1);
      curX = isFinite(imgX) ? imgX : lensX + 1;
      curH = isFinite(imgH) ? imgH : curH;
    }
    let sysFocal = null;
    if (elems.length === 2) {
      const f1 = elems[0].f, f2 = elems[1].f;
      const d  = (elems[1].x_frac - elems[0].x_frac) * W;
      const dn = f1 + f2 - d;
      if (Math.abs(dn) > 0.5) sysFocal = (f1 * f2) / dn;
    }
    return { stages, totalM, sysFocal, elems };
  }

  draw() {
    const { ctx, W, H } = this;
    if (!W || !H) return;
    const ay = H / 2;
    ctx.fillStyle = '#0D0D1A'; ctx.fillRect(0, 0, W, H);
    // axis
    ctx.strokeStyle = 'rgba(255,255,255,0.12)'; ctx.lineWidth = 1; ctx.setLineDash([6, 4]);
    ctx.beginPath(); ctx.moveTo(0, ay); ctx.lineTo(W, ay); ctx.stroke();
    ctx.setLineDash([]);

    const { stages, totalM, sysFocal, elems } = this._computeChain();
    const objX = this.objFrac * W;
    // object arrow
    this._fbArrow(ctx, objX, ay, objX, ay - this.objH, '#9B5DE5', false);
    // lenses + focal markers
    elems.forEach(el => {
      const lx = el.x_frac * W;
      this._fbLens(ctx, lx, ay, el.f);
      const fp = lx + el.f;
      if (fp > 10 && fp < W - 10) {
        ctx.fillStyle = 'rgba(6,214,224,0.5)'; ctx.beginPath(); ctx.arc(fp, ay, 3.5, 0, Math.PI * 2); ctx.fill();
      }
    });
    // chain rays
    this._drawChainRays(ctx, ay, stages);
    // intermediate image arrows
    const imgPal = ['#EF476F', '#FFD166', '#7BF5A4', '#06D6E0'];
    stages.forEach((s, i) => {
      if (!isFinite(s.dI)) return;
      const col = imgPal[i % imgPal.length];
      this._fbArrow(ctx, s.imgX, ay, s.imgX, ay - s.imgH, col, s.isVirt);
      ctx.font = '10px Manrope, system-ui, sans-serif';
      ctx.fillStyle = col; ctx.textAlign = 'center'; ctx.textBaseline = 'bottom';
      ctx.fillText('Изобр.' + (i + 1), s.imgX, ay - Math.abs(s.imgH) - 6);
    });
    this._drawInfoPanel(ctx, stages, totalM, sysFocal);
    // OB_FX visual depth layer
    {
      const objX = this.objFrac * this.W;
      _drawOBFXLayer(ctx, 'freebuild', { srcX: objX, srcY: ay - this.objH });
    }
  }

  /* Trace 3 characteristic rays through all lenses (thin-lens matrix method) */
  _drawChainRays(ctx, ay, stages) {
    if (!stages.length) return;
    const colors = ['#06D6E0', '#7BF5A4', '#FFD166'];
    const s0 = stages[0];
    const W  = this.W;
    const rays = [
      { curY: ay - s0.objH, slope: 0 },                                  // parallel to axis
      { curY: ay - s0.objH, slope: (ay - (ay - s0.objH)) / (s0.lensX - s0.objX) }, // through lens centre
      { curY: ay - s0.objH, slope: (ay - (ay - s0.objH)) / ((s0.lensX - s0.f) - s0.objX) }, // through F
    ];
    rays.forEach((ray, ri) => {
      const col = colors[ri];
      const doGlow = (fn) => {
        if (window.LabFX) LabFX.glow.drawGlow(ctx, fn, { color: col, intensity: 6 });
        else fn();
      };
      doGlow(() => {
        ctx.strokeStyle = col; ctx.lineWidth = 1.4; ctx.setLineDash([]);
        let curX = s0.objX;
        let curY = ray.curY;
        let slope = isFinite(ray.slope) ? ray.slope : 0;
        ctx.beginPath(); ctx.moveTo(curX, curY);
        stages.forEach(st => {
          const lx   = st.lensX;
          const hitY = curY + slope * (lx - curX);
          ctx.lineTo(lx, hitY);
          // thin-lens refraction: slope_out = slope_in - (hitY - ay) / f
          const hRel  = hitY - ay;
          slope = slope - hRel / st.f;
          curX  = lx;
          curY  = hitY;
        });
        const extX = Math.min(W + 10, curX + 400);
        ctx.lineTo(extX, curY + slope * (extX - curX));
        ctx.stroke();
      });
    });
  }

  _fbLens(ctx, lx, ay, f) {
    const lh   = Math.min(this.H * 0.36, 130);
    const conv = f > 0;
    ctx.strokeStyle = 'rgba(155,93,229,0.8)'; ctx.lineWidth = 2.5;
    if (conv) {
      const b = Math.min(16, Math.abs(f) * 0.1);
      ctx.beginPath(); ctx.moveTo(lx, ay - lh); ctx.quadraticCurveTo(lx + b, ay, lx, ay + lh); ctx.stroke();
      ctx.beginPath(); ctx.moveTo(lx, ay - lh); ctx.quadraticCurveTo(lx - b, ay, lx, ay + lh); ctx.stroke();
    } else {
      const b = Math.min(12, Math.abs(f) * 0.08);
      ctx.beginPath(); ctx.moveTo(lx, ay - lh); ctx.quadraticCurveTo(lx - b, ay, lx, ay + lh); ctx.stroke();
      ctx.beginPath(); ctx.moveTo(lx, ay - lh); ctx.quadraticCurveTo(lx + b, ay, lx, ay + lh); ctx.stroke();
    }
    ctx.strokeStyle = 'rgba(155,93,229,0.25)'; ctx.lineWidth = 1;
    ctx.beginPath(); ctx.moveTo(lx, ay - lh); ctx.lineTo(lx, ay + lh); ctx.stroke();
    // label f value
    ctx.font = '11px Manrope, system-ui, sans-serif'; ctx.fillStyle = 'rgba(155,93,229,0.9)';
    ctx.textAlign = 'center'; ctx.textBaseline = 'top';
    ctx.fillText('f=' + f.toFixed(0), lx, ay + lh + 4);
  }

  _fbArrow(ctx, x1, y1, x2, y2, color, dashed) {
    ctx.strokeStyle = color; ctx.fillStyle = color; ctx.lineWidth = 2.5;
    if (dashed) ctx.setLineDash([5, 4]);
    ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke();
    ctx.setLineDash([]);
    if (Math.abs(y2 - y1) < 2) return;
    const angle = Math.atan2(y2 - y1, x2 - x1), aLen = 9;
    ctx.beginPath();
    ctx.moveTo(x2, y2);
    ctx.lineTo(x2 - aLen * Math.cos(angle - 0.35), y2 - aLen * Math.sin(angle - 0.35));
    ctx.lineTo(x2 - aLen * Math.cos(angle + 0.35), y2 - aLen * Math.sin(angle + 0.35));
    ctx.closePath(); ctx.fill();
  }

  _drawInfoPanel(ctx, stages, totalM, sysFocal) {
    const bx = 8, by = 8, bw = 192, lh = 16;
    const rows = [{ text: 'Объект', col: '#9B5DE5' }];
    stages.forEach((s, i) => {
      rows.push({ text: 'Лин.' + (i + 1) + ' f=' + s.f.toFixed(0), col: 'rgba(155,93,229,0.85)' });
      const dpStr = isFinite(s.dI)  ? s.dI.toFixed(0)  : '∞';
      const mStr  = isFinite(s.M)   ? s.M.toFixed(2)   : '∞';
      rows.push({ text: "  Изобр." + (i + 1) + "  d'=" + dpStr + ' M=' + mStr, col: isFinite(s.M) ? (s.isVirt ? '#FFD166' : '#EF476F') : '#888' });
    });
    const bh = rows.length * lh + 46;
    ctx.save();
    ctx.fillStyle = 'rgba(22,22,38,0.88)';
    ctx.beginPath(); ctx.roundRect(bx, by, bw, bh, 8); ctx.fill();
    ctx.font = '11px Manrope, system-ui, sans-serif'; ctx.textAlign = 'left'; ctx.textBaseline = 'top';
    let cy = by + 8;
    rows.forEach(r => { ctx.fillStyle = r.col; ctx.fillText(r.text, bx + 8, cy); cy += lh; });
    cy += 4;
    ctx.fillStyle = 'rgba(255,255,255,0.75)';
    ctx.fillText('Г = ' + (isFinite(totalM) ? totalM.toFixed(3) : '∞'), bx + 8, cy); cy += lh;
    if (sysFocal !== null) {
      ctx.fillStyle = '#06D6E0';
      ctx.fillText('F сист. = ' + sysFocal.toFixed(0) + ' px', bx + 8, cy);
    }
    ctx.restore();
  }

  _bindEvents() {
    const cv = this.canvas;
    const getPos = (e) => {
      const r = cv.getBoundingClientRect();
      const t = e.touches ? e.touches[0] : e;
      return { mx: (t.clientX - r.left) * (this.W / r.width), my: (t.clientY - r.top) * (this.H / r.height) };
    };
    const hitTest = (mx, my) => {
      const ay = this.H / 2;
      for (let i = 0; i < this.elements.length; i++) {
        const lx = this.elements[i].x_frac * this.W;
        if (Math.abs(mx - lx) < 14 && Math.abs(my - ay) < 100) return { what: 'lens', idx: i };
      }
      const ox = this.objFrac * this.W;
      if (Math.hypot(mx - ox, my - (ay - this.objH)) < 18) return { what: 'object' };
      return null;
    };
    cv.addEventListener('mousedown', e => { const p = getPos(e); this._drag = hitTest(p.mx, p.my); });
    window.addEventListener('mousemove', e => {
      if (!this._drag) return;
      if (e.cancelable) e.preventDefault();
      const { mx } = getPos(e);
      const frac = Math.max(0.02, Math.min(0.98, mx / this.W));
      if (this._drag.what === 'object') { this.objFrac = frac; }
      else if (this._drag.what === 'lens') { this.elements[this._drag.idx].x_frac = frac; }
      this.draw();
      if (this.onUpdate) this.onUpdate(this._computeChain());
    });
    window.addEventListener('mouseup', () => { if (this._drag && window.LabFX) LabFX.sound.play('click'); this._drag = null; });
    cv.addEventListener('mousemove', e => {
      if (this._drag) { cv.style.cursor = 'grabbing'; return; }
      const { mx, my } = getPos(e);
      cv.style.cursor = hitTest(mx, my) ? 'grab' : 'default';
    });
    cv.addEventListener('touchstart', e => {
      if (e.touches.length === 1) { const p = getPos(e); this._drag = hitTest(p.mx, p.my); }
    }, { passive: true });
    cv.addEventListener('touchmove', e => {
      if (!this._drag) return;
      if (e.cancelable) e.preventDefault();
      const { mx } = getPos(e);
      const frac = Math.max(0.02, Math.min(0.98, mx / this.W));
      if (this._drag.what === 'object') this.objFrac = frac;
      else if (this._drag.what === 'lens') this.elements[this._drag.idx].x_frac = frac;
      this.draw();
    }, { passive: false });
    cv.addEventListener('touchend', () => { this._drag = null; });
  }

  addLens(f) {
    const lastFrac = this.elements.length ? Math.max(...this.elements.map(e => e.x_frac)) : 0.5;
    const newFrac  = Math.min(0.92, lastFrac + 0.18);
    const id       = (this.elements.reduce((m, e) => Math.max(m, e.id), 0)) + 1;
    this.elements.push({ x_frac: newFrac, f: +f || 100, id });
    this.draw();
  }
  removeLens() {
    if (this.elements.length > 1) this.elements.pop();
    this.draw();
  }
  setLensF(idx, f) {
    if (this.elements[idx]) { this.elements[idx].f = Math.max(-300, Math.min(300, +f || 100)); this.draw(); }
  }
}

/* ─────────────────────────────────────────────────────────────
   4a-BIS. OPTICAL BENCH CONSTRUCTOR — general 2D ray tracer
   Mixed elements (lens, mirror, aperture, screen, prism) + sources.
───────────────────────────────────────────────────────────────*/
class BenchSim {
  constructor(canvas) {
    this.canvas = canvas;
    this.ctx    = canvas.getContext('2d');
    this.W = 0; this.H = 0;
    this.onUpdate = null;
    this._drag = null;
    this._nextId = 1;
    // source: object arrow by default. `ang` (deg) aims point/single/laser/parallel.
    this.source = { kind: 'object', xf: 0.07, yf: 0, h: 70, spread: 0.32, rays: 9, ang: 0, rayMode: 'char' };
    // elements along the bench, positioned by x-fraction; centred on the axis
    this.elements = [
      this._mk('lens',   { xf: 0.40, f: 130, ap: 95 }),
      this._mk('screen', { xf: 0.86 }),
    ];
    this.selectedId = '__src';   // source selected by default so its controls show on open
    this._bindEvents();
    this._ro = new ResizeObserver(() => { this.fit(); this.draw(); });
    this._ro.observe(canvas.parentElement || canvas);
  }

  _mk(type, p) {
    const id = this._nextId++;
    const base = { id, type, xf: p.xf != null ? p.xf : 0.5 };
    if (type === 'lens')     return { ...base, f: p.f != null ? p.f : 130, ap: p.ap || 95 };
    if (type === 'mirror')   return { ...base, kind: p.kind || 'concave', R: p.R != null ? p.R : 320, ap: p.ap || 95 };
    if (type === 'aperture') return { ...base, gap: p.gap != null ? p.gap : 40 };
    if (type === 'screen')   return { ...base };
    if (type === 'prism')    return { ...base, apex: p.apex != null ? p.apex : 50, n: p.n != null ? p.n : 1.52, size: p.size || 90 };
    if (type === 'interface') return { ...base, n1: p.n1 != null ? p.n1 : 1, n2: p.n2 != null ? p.n2 : 1.5, ap: p.ap || 110 };
    if (type === 'slab')      return { ...base, n: p.n != null ? p.n : 1.5, t: p.t != null ? p.t : 60, ap: p.ap || 95 };
    return base;
  }

  fit() {
    const dpr = window.devicePixelRatio || 1;
    const w = this.canvas.offsetWidth  || 600;
    const h = this.canvas.offsetHeight || 400;
    this.canvas.width  = w * dpr;
    this.canvas.height = h * dpr;
    this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    this.W = w; this.H = h;
  }

  /* ── element API (used by the inspector) ── */
  addElement(type) {
    const xf = Math.min(0.92, (this.elements.length ? Math.max(...this.elements.map(e => e.xf)) : 0.4) + 0.14);
    const el = this._mk(type, { xf });
    this.elements.push(el);
    this.selectedId = el.id;
    this._changed();
    return el;
  }
  removeElement(id) {
    this.elements = this.elements.filter(e => e.id !== id);
    if (this.selectedId === id) this.selectedId = null;
    this._changed();
  }
  selectElement(id) { this.selectedId = id; this._changed(); }
  updateElement(id, key, val) {
    const el = this.elements.find(e => e.id === id);
    if (!el) return;
    el[key] = (key === 'kind') ? val : +val;
    this._redraw();          // canvas only — never rebuild the inspector mid-slider-drag
  }
  setSource(key, val) {
    this.source[key] = (key === 'kind' || key === 'rayMode') ? val : +val;  // string keys vs numeric
    this._redraw();
  }
  getSelected() { return this.elements.find(e => e.id === this.selectedId) || null; }
  _redraw() { this.draw(); }
  _changed() { this.draw(); if (this.onUpdate) this.onUpdate(); }  // draw + rebuild inspector

  /* ── geometry helpers ── */
  _ex(el) { return el.xf * this.W; }
  _ay() { return this.H / 2; }
  _sy() { return this._ay() + (this.source.yf || 0) * (this.H / 2 - 14); } // source y (vertical position)

  /* Emit the initial rays from the source. */
  _emitRays() {
    const ay = this._sy();          // emission height respects the source vertical position
    const sx = this.source.xf * this.W;
    const rays = [];
    // white light → one sub-ray per spectral sample (they coincide until a prism disperses them)
    const wls = window._obWhiteLight ? OB_SPECTRAL.map(s => s.nm) : [window._obWavelength || 540];
    const push = (x, y, ang, role) => {
      for (const wl of wls) rays.push({ x, y, dx: Math.cos(ang), dy: Math.sin(ang), wl, role: role || null, pts: [{ x, y }], alive: true, bounces: 0 });
    };
    const aim = (this.source.ang || 0) * Math.PI / 180;
    if (this.source.kind === 'single') {
      push(sx, ay, aim);                                   // one aimable ray
    } else if (this.source.kind === 'laser') {
      const n = 3, hh = 7;                                 // narrow collimated beam
      const px = -Math.sin(aim), py = Math.cos(aim);       // perpendicular to aim
      for (let i = 0; i < n; i++) {
        const o = (i - (n - 1) / 2) * hh;
        push(sx + px * o, ay + py * o, aim);
      }
    } else if (this.source.kind === 'parallel') {
      const n = 9, hh = 90;
      const px = -Math.sin(aim), py = Math.cos(aim);
      for (let i = 0; i < n; i++) {
        const o = -hh + (2 * hh) * (i / (n - 1));
        push(sx + px * o, ay + py * o, aim);
      }
    } else if (this.source.kind === 'point') {
      const n = this.source.rays, A = this.source.spread;
      for (let i = 0; i < n; i++) push(sx, ay, aim - A + 2 * A * (i / (n - 1)));
    } else { // object arrow
      const axis = this._ay();                 // optical axis (lens centre / focus sit here)
      const tipY = ay - this.source.h, baseY = ay;
      const firstLens = this.elements.filter(e => e.type === 'lens').sort((a, b) => a.xf - b.xf)[0];
      if (this.source.rayMode === 'char' && firstLens) {
        // textbook construction: 2–3 characteristic rays from the tip + axial ray from the base
        const lensX = firstLens.xf * this.W, f = firstLens.f;
        const aimAt = (tx, ty) => Math.atan2(ty - tipY, tx - sx);
        push(sx, tipY, 0, 'char1');                       // 1) parallel to axis → through far focus F'
        push(sx, tipY, aimAt(lensX, axis), 'char2');      // 2) through the optical centre → straight
        const Fx = lensX - f;                             // front focal point
        if (f > 0 && Fx > sx + 5) push(sx, tipY, aimAt(Fx, axis), 'char3'); // 3) through F → emerges parallel
        push(sx, baseY, 0, 'base');                       // base lies on the axis
      } else {
        // physical bundle: a fan from tip and base
        const n = Math.max(2, this.source.rays | 0), A = this.source.spread;
        [tipY, baseY].forEach(y0 => {
          for (let i = 0; i < n; i++) push(sx, y0, -A + 2 * A * (i / (n - 1)));
        });
      }
    }
    return rays;
  }

  /* Trace one ray through the system, filling ray.pts. */
  _traceRay(ray) {
    const eps = 0.5, maxSteps = 40;
    const elems = this.elements;
    for (let step = 0; step < maxSteps && ray.alive; step++) {
      // find nearest element plane ahead
      let best = null;
      for (const el of elems) {
        const ex = this._ex(el);
        if (Math.abs(ray.dx) < 1e-6) continue;
        const t = (ex - ray.x) / ray.dx;
        if (t > eps && (!best || t < best.t)) best = { t, el, ex };
      }
      // boundary intersection
      const tBound = this._boundT(ray);
      if (!best || tBound < best.t) {
        const hx = ray.x + ray.dx * tBound, hy = ray.y + ray.dy * tBound;
        ray.pts.push({ x: hx, y: hy }); ray.alive = false; break;
      }
      // advance to element
      const hx = ray.x + ray.dx * best.t, hy = ray.y + ray.dy * best.t;
      ray.x = hx; ray.y = hy;
      const interacted = this._interact(ray, best.el, hy - this._ay());
      ray.pts.push({ x: ray.x, y: ray.y });
      if (!interacted) { ray.x += ray.dx * eps; ray.y += ray.dy * eps; } // missed → step past
      if (ray.bounces > 16) ray.alive = false;
    }
    return ray;
  }

  _boundT(ray) {
    const ts = [];
    if (ray.dx > 1e-9) ts.push((this.W - ray.x) / ray.dx);
    else if (ray.dx < -1e-9) ts.push((0 - ray.x) / ray.dx);
    if (ray.dy > 1e-9) ts.push((this.H - ray.y) / ray.dy);
    else if (ray.dy < -1e-9) ts.push((0 - ray.y) / ray.dy);
    return ts.length ? Math.min(...ts.filter(t => t > 0)) : 1e6;
  }

  /* Apply an element. Returns true if it interacted (false = ray missed it). */
  _interact(ray, el, yRel) {
    const norm = (x, y) => { const l = Math.hypot(x, y) || 1; ray.dx = x / l; ray.dy = y / l; };
    if (el.type === 'lens') {
      if (Math.abs(yRel) > el.ap) { ray.alive = false; return true; }  // mount blocks outside aperture
      const sgn = Math.sign(ray.dx) || 1;
      const w = ray.dy / Math.abs(ray.dx);
      norm(sgn, w - yRel / el.f);
      return true;
    }
    if (el.type === 'interface') {
      if (Math.abs(yRel) > el.ap) return false;
      // Snell at a vertical plane (normal = x). Tangential (y) component scales by n_i/n_t.
      const goingRight = ray.dx > 0;
      const ni = goingRight ? el.n1 : el.n2;
      const nt = goingRight ? el.n2 : el.n1;
      const dyT = (ni / nt) * ray.dy;                  // sinθ_t (tangential preserved)
      if (Math.abs(dyT) >= 1) { ray.dx = -ray.dx; ray.bounces++; return true; } // total internal reflection
      const sgn = Math.sign(ray.dx) || 1;
      ray.dy = dyT; ray.dx = sgn * Math.sqrt(Math.max(0, 1 - dyT * dyT));
      return true;
    }
    if (el.type === 'slab') {
      if (Math.abs(yRel) > el.ap) return false;
      // parallel plate: ray exits parallel but laterally shifted (refract in, travel t, refract out)
      const sinI = ray.dy;                              // |d|=1 → y-comp is sinθ from axis
      const sinT = sinI / el.n;
      const tanT = sinT / Math.sqrt(Math.max(1e-6, 1 - sinT * sinT));
      const sgn = Math.sign(ray.dx) || 1;
      ray.pts.push({ x: ray.x, y: ray.y });             // entry on the front face
      ray.x += sgn * el.t;                              // emerge on the far face
      ray.y += tanT * el.t;                             // inside-the-glass vertical travel
      return true;                                      // direction unchanged (parallel faces); tracer pushes exit
    }
    if (el.type === 'mirror') {
      if (Math.abs(yRel) > el.ap) { ray.alive = false; return true; }
      ray.dx = -ray.dx;                                // reflect about the vertical plane
      ray.bounces++;
      if (el.kind !== 'plane') {
        const fM = (el.kind === 'concave' ? 1 : -1) * el.R / 2;
        const sgn = Math.sign(ray.dx) || 1;
        const w = ray.dy / Math.abs(ray.dx);
        norm(sgn, w - yRel / fM);
      }
      return true;
    }
    if (el.type === 'aperture') {
      if (Math.abs(yRel) > el.gap) ray.alive = false;  // blocked by the stop
      return true;
    }
    if (el.type === 'screen') {
      ray.hitY = ray.y; ray.hitEl = el.id; ray.alive = false;  // absorbed, hit recorded
      return true;
    }
    if (el.type === 'prism') {
      return this._prismInteract(ray, el, yRel);
    }
    return true;
  }

  // Thin-prism deviation δ = (n−1)·A toward the base, with chromatic dispersion
  // via n(λ) — different wavelengths bend differently → spectrum fan.
  _prismInteract(ray, el, yRel) {
    if (Math.abs(yRel) > el.size) return false;
    const n   = (typeof _nAtWavelength === 'function') ? _nAtWavelength(el.n, ray.wl) : el.n;
    const A   = el.apex * Math.PI / 180;
    const dev = (n - 1) * A;                            // radians, toward the base (+y)
    const sgn = Math.sign(ray.dx) || 1;
    const ang = Math.atan2(ray.dy, ray.dx) + sgn * dev;
    ray.dx = Math.cos(ang); ray.dy = Math.sin(ang);
    return true;
  }

  draw() {
    const { ctx, W, H } = this;
    if (!W || !H) return;
    const ay = this._ay();
    ctx.fillStyle = '#0D0D1A'; ctx.fillRect(0, 0, W, H);
    // optical axis
    ctx.strokeStyle = 'rgba(255,255,255,0.12)'; ctx.lineWidth = 1; ctx.setLineDash([6, 4]);
    ctx.beginPath(); ctx.moveTo(0, ay); ctx.lineTo(W, ay); ctx.stroke(); ctx.setLineDash([]);

    // trace rays — colour each by its wavelength (so dispersion shows as a fan)
    const rays = this._emitRays();
    const white = !!window._obWhiteLight;
    ctx.lineWidth = 1.1;
    for (const ray of rays) {
      this._traceRay(ray);
      ctx.strokeStyle = (typeof wavelengthToRGB === 'function') ? wavelengthToRGB(ray.wl) : '#06D6E0';
      ctx.globalAlpha = white ? 0.5 : 0.82;
      ctx.beginPath();
      ray.pts.forEach((p, i) => i ? ctx.lineTo(p.x, p.y) : ctx.moveTo(p.x, p.y));
      ctx.stroke();
    }
    ctx.globalAlpha = 1;

    // source + elements
    this._drawSource(ctx, ay);
    for (const el of this.elements) this._drawElement(ctx, el, ay);

    // image formed on screens (where rays land)
    this._drawScreenHits(ctx, rays);

    // textbook construction overlay (labels, image arrow, dashed extensions)
    if (this.source.kind === 'object' && (this.source.rayMode || 'char') === 'char') {
      this._drawCharConstruction(ctx, rays, ay);
    }

    if (typeof _drawOBFXLayer === 'function') {
      // FX anchored at the actual source point (only the object arrow has a raised tip)
      const fxY = this._sy() - (this.source.kind === 'object' ? this.source.h : 0);
      _drawOBFXLayer(ctx, 'freebuild', { srcX: this.source.xf * W, srcY: fxY });
    }
  }

  // Glowing spots on each screen where rays land → the image becomes visible.
  _drawScreenHits(ctx, rays) {
    const screens = this.elements.filter(e => e.type === 'screen');
    if (!screens.length) return;
    ctx.save();
    ctx.globalCompositeOperation = 'lighter';   // additive → overlapping rays brighten
    for (const sc of screens) {
      const x = this._ex(sc);
      for (const r of rays) {
        if (r.hitEl !== sc.id) continue;
        const col = (typeof wavelengthToRGB === 'function') ? wavelengthToRGB(r.wl) : '#fff';
        const g = ctx.createRadialGradient(x, r.hitY, 0, x, r.hitY, 9);
        g.addColorStop(0, col); g.addColorStop(1, 'rgba(0,0,0,0)');
        ctx.fillStyle = g; ctx.globalAlpha = 0.5;
        ctx.beginPath(); ctx.arc(x, r.hitY, 9, 0, Math.PI * 2); ctx.fill();
      }
    }
    ctx.restore();
  }

  _lineIntersect(a, b) {
    const den = a.dx * b.dy - a.dy * b.dx;
    if (Math.abs(den) < 1e-9) return null;          // parallel → no finite intersection
    const t = ((b.x - a.x) * b.dy - (b.y - a.y) * b.dx) / den;
    return { x: a.x + t * a.dx, y: a.y + t * a.dy };
  }

  // Textbook overlay for single-lens characteristic construction:
  // labels 1/2/3, the image arrow, and dashed back-extensions for a virtual image.
  _drawCharConstruction(ctx, rays, axis) {
    const lenses = this.elements.filter(e => e.type === 'lens');
    if (lenses.length !== 1) return;                // construction is only clean for one lens
    const lensX = this._ex(lenses[0]);

    ctx.save();
    // ── ray labels 1/2/3 near the object ──
    ctx.font = 'bold 11px Manrope, system-ui, sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
    const labelRay = (role, txt) => {
      const r = rays.find(x => x.role === role); if (!r || r.pts.length < 2) return;
      const p0 = r.pts[0], p1 = r.pts[1];
      const d = Math.hypot(p1.x - p0.x, p1.y - p0.y) || 1;
      const k = Math.min(40, d * 0.45);
      const lx = p0.x + (p1.x - p0.x) / d * k, ly = p0.y + (p1.y - p0.y) / d * k;
      ctx.fillStyle = 'rgba(13,13,26,0.7)'; ctx.beginPath(); ctx.arc(lx, ly, 8, 0, Math.PI * 2); ctx.fill();
      ctx.fillStyle = '#7BF5A4'; ctx.fillText(txt, lx, ly);
    };
    labelRay('char1', '1'); labelRay('char2', '2'); labelRay('char3', '3');

    // ── image point = intersection of the final segments of rays 1 and 2 ──
    const finalLine = (role) => {
      const r = rays.find(x => x.role === role); if (!r || r.pts.length < 2) return null;
      const b = r.pts[r.pts.length - 1], a = r.pts[r.pts.length - 2];
      return { x: a.x, y: a.y, dx: b.x - a.x, dy: b.y - a.y };
    };
    const L1 = finalLine('char1'), L2 = finalLine('char2');
    const P = (L1 && L2) ? this._lineIntersect(L1, L2) : null;
    if (P && isFinite(P.x) && isFinite(P.y)) {
      const real = P.x > lensX + 2;                 // real image forms to the right of the lens
      const col = real ? '#EF476F' : '#FFD166';
      if (!real) {
        // virtual image: extend the diverging rays backward (dashed) to the apparent source P
        ctx.strokeStyle = col; ctx.setLineDash([5, 4]); ctx.lineWidth = 1;
        [L1, L2].forEach(L => { if (!L) return; ctx.beginPath(); ctx.moveTo(L.x, L.y); ctx.lineTo(P.x, P.y); ctx.stroke(); });
        ctx.setLineDash([]);
      }
      this._arrow(ctx, P.x, axis, P.x, P.y, col);   // image arrow: base (axis) → tip (P)
      ctx.fillStyle = col; ctx.beginPath(); ctx.arc(P.x, P.y, 3.5, 0, Math.PI * 2); ctx.fill();
      ctx.font = '10px Manrope, system-ui, sans-serif';
      ctx.fillText(real ? 'изображение' : 'мнимое изобр.', P.x, P.y + (P.y < axis ? -14 : 16));
    }
    ctx.restore();
  }

  _drawSource(ctx, _ayIgnored) {
    const ay = this._sy();          // draw at the source vertical position
    const sx = this.source.xf * this.W;
    const aim = (this.source.ang || 0) * Math.PI / 180;
    ctx.save();
    if (this.source.kind === 'object') {
      this._arrow(ctx, sx, ay, sx, ay - this.source.h, '#9B5DE5');
    } else {
      const isLaser = this.source.kind === 'laser', isSingle = this.source.kind === 'single';
      ctx.fillStyle = (this.source.kind === 'point' || isSingle) ? '#FFD166' : '#9B5DE5';
      ctx.beginPath(); ctx.arc(sx, ay, isLaser ? 4 : 5, 0, Math.PI * 2); ctx.fill();
      if (this.source.kind === 'parallel' || isLaser) {
        const px = -Math.sin(aim), py = Math.cos(aim), hh = isLaser ? 10 : 90;
        ctx.strokeStyle = isLaser ? '#FF5B5B' : '#9B5DE5'; ctx.lineWidth = 2;
        ctx.beginPath(); ctx.moveTo(sx - px * hh, ay - py * hh); ctx.lineTo(sx + px * hh, ay + py * hh); ctx.stroke();
      }
      // aim arrow for single / laser / point
      if (isSingle || isLaser || this.source.kind === 'point') {
        this._arrow(ctx, sx, ay, sx + 22 * Math.cos(aim), ay + 22 * Math.sin(aim), isLaser ? '#FF5B5B' : '#FFD166');
      }
    }
    const sel = this.selectedId === '__src';
    ctx.fillStyle = sel ? '#fff' : 'rgba(155,93,229,0.9)';
    ctx.font = '10px Manrope, system-ui, sans-serif'; ctx.textAlign = 'center';
    ctx.fillText('источник', sx, ay + 16);
    ctx.restore();
  }

  _drawElement(ctx, el, ay) {
    const x = this._ex(el);
    const sel = el.id === this.selectedId;
    ctx.save();
    ctx.lineWidth = sel ? 3 : 2;
    if (el.type === 'lens') {
      const conv = el.f >= 0;
      ctx.strokeStyle = sel ? '#fff' : '#06D6E0';
      ctx.beginPath(); ctx.moveTo(x, ay - el.ap); ctx.lineTo(x, ay + el.ap); ctx.stroke();
      // arrow tips to denote converging/diverging
      const tip = conv ? 7 : -7;
      [[ay - el.ap, 1], [ay + el.ap, -1]].forEach(([yy, s]) => {
        ctx.beginPath(); ctx.moveTo(x, yy); ctx.lineTo(x - tip, yy + s * 7); ctx.moveTo(x, yy); ctx.lineTo(x + tip, yy + s * 7); ctx.stroke();
      });
      // focal markers F and 2F on both sides of the lens
      if (conv) {
        ctx.fillStyle = 'rgba(6,214,224,0.6)';
        [el.f, -el.f, 2 * el.f, -2 * el.f].forEach((d, i) => {
          const fx = x + d; if (fx < 6 || fx > this.W - 6) return;
          ctx.beginPath(); ctx.arc(fx, ay, 3, 0, Math.PI * 2); ctx.fill();
          this._elLabel(ctx, fx, ay - 16, i < 2 ? 'F' : '2F');
        });
      }
      this._elLabel(ctx, x, ay + el.ap + 14, (conv ? 'линза +' : 'линза −') + Math.abs(el.f).toFixed(0));
    } else if (el.type === 'interface') {
      ctx.fillStyle = 'rgba(96,165,250,0.10)'; ctx.fillRect(x, ay - el.ap, this.W - x, 2 * el.ap);
      ctx.strokeStyle = sel ? '#fff' : '#60a5fa';
      ctx.beginPath(); ctx.moveTo(x, ay - el.ap); ctx.lineTo(x, ay + el.ap); ctx.stroke();
      this._elLabel(ctx, x, ay + el.ap + 14, 'граница ' + el.n1.toFixed(2) + ' | ' + el.n2.toFixed(2));
    } else if (el.type === 'slab') {
      ctx.fillStyle = 'rgba(123,245,164,0.10)'; ctx.fillRect(x, ay - el.ap, el.t, 2 * el.ap);
      ctx.strokeStyle = sel ? '#fff' : '#7BF5A4';
      ctx.strokeRect(x, ay - el.ap, el.t, 2 * el.ap);
      this._elLabel(ctx, x + el.t / 2, ay + el.ap + 14, 'пластина n=' + el.n.toFixed(2));
    } else if (el.type === 'mirror') {
      ctx.strokeStyle = sel ? '#fff' : '#A8E063';
      ctx.beginPath();
      if (el.kind === 'plane') { ctx.moveTo(x, ay - el.ap); ctx.lineTo(x, ay + el.ap); }
      else {
        const bow = (el.kind === 'concave' ? -1 : 1) * 14;
        ctx.moveTo(x, ay - el.ap);
        ctx.quadraticCurveTo(x + bow, ay, x, ay + el.ap);
      }
      ctx.stroke();
      // hatch backside
      ctx.strokeStyle = 'rgba(168,224,99,0.4)'; ctx.lineWidth = 1;
      for (let yy = -el.ap; yy < el.ap; yy += 12) { ctx.beginPath(); ctx.moveTo(x, ay + yy); ctx.lineTo(x + 6, ay + yy + 6); ctx.stroke(); }
      this._elLabel(ctx, x, ay + el.ap + 14, 'зеркало ' + ({ plane: 'плоск', concave: 'вогн', convex: 'выпукл' }[el.kind]));
    } else if (el.type === 'aperture') {
      ctx.strokeStyle = sel ? '#fff' : '#EF476F'; ctx.lineWidth = sel ? 5 : 4;
      ctx.beginPath(); ctx.moveTo(x, ay - 110); ctx.lineTo(x, ay - el.gap); ctx.moveTo(x, ay + el.gap); ctx.lineTo(x, ay + 110); ctx.stroke();
      this._elLabel(ctx, x, ay + 124, 'диафрагма');
    } else if (el.type === 'screen') {
      ctx.strokeStyle = sel ? '#fff' : 'rgba(255,255,255,0.7)'; ctx.lineWidth = sel ? 5 : 4;
      ctx.beginPath(); ctx.moveTo(x, ay - 110); ctx.lineTo(x, ay + 110); ctx.stroke();
      this._elLabel(ctx, x, ay + 124, 'экран');
    } else if (el.type === 'prism') {
      ctx.strokeStyle = sel ? '#fff' : '#FFD166'; ctx.fillStyle = 'rgba(255,209,102,0.12)';
      ctx.beginPath(); ctx.moveTo(x, ay - el.size); ctx.lineTo(x + el.size * 0.7, ay + el.size); ctx.lineTo(x - el.size * 0.7, ay + el.size); ctx.closePath();
      ctx.fill(); ctx.stroke();
      this._elLabel(ctx, x, ay + el.size + 14, 'призма');
    }
    ctx.restore();
  }

  _elLabel(ctx, x, y, text) {
    ctx.fillStyle = 'rgba(255,255,255,0.6)'; ctx.font = '10px Manrope, system-ui, sans-serif';
    ctx.textAlign = 'center'; ctx.textBaseline = 'top'; ctx.fillText(text, x, y);
  }

  _arrow(ctx, x0, y0, x1, y1, color) {
    ctx.strokeStyle = color; ctx.fillStyle = color; ctx.lineWidth = 2.5;
    ctx.beginPath(); ctx.moveTo(x0, y0); ctx.lineTo(x1, y1); ctx.stroke();
    const a = Math.atan2(y1 - y0, x1 - x0);
    ctx.beginPath(); ctx.moveTo(x1, y1);
    ctx.lineTo(x1 - 9 * Math.cos(a - 0.4), y1 - 9 * Math.sin(a - 0.4));
    ctx.lineTo(x1 - 9 * Math.cos(a + 0.4), y1 - 9 * Math.sin(a + 0.4));
    ctx.closePath(); ctx.fill();
  }

  /* ── interaction: drag + select ── */
  _bindEvents() {
    const cv = this.canvas;
    this._listeners = [];
    const on = (t, ty, fn, o) => { t.addEventListener(ty, fn, o); this._listeners.push([t, ty, fn, o]); };
    const pos = (e) => {
      const r = cv.getBoundingClientRect();
      const t = e.touches ? e.touches[0] : e;
      return { mx: (t.clientX - r.left) * (this.W / r.width), my: (t.clientY - r.top) * (this.H / r.height) };
    };
    const hit = (mx, my) => {
      const ay = this._ay();
      // source first (it can sit off-axis), grab around its actual vertical position
      const sx = this.source.xf * this.W, sy = this._sy();
      if (Math.abs(mx - sx) < 16 && Math.abs(my - sy) < 70) return { kind: 'src' };
      for (const el of this.elements) {
        if (Math.abs(mx - this._ex(el)) < 14 && Math.abs(my - ay) < 120) return { kind: 'el', id: el.id };
      }
      return null;
    };
    on(cv, 'pointerdown', e => {
      const { mx, my } = pos(e);
      const h = hit(mx, my);
      this._drag = h;
      if (h) {
        this.selectedId = h.kind === 'src' ? '__src' : h.id;
        try { cv.setPointerCapture(e.pointerId); } catch (_) {}
        this._changed();
      } else { this.selectedId = null; this._changed(); }
    });
    on(cv, 'pointermove', e => {
      if (!this._drag) { const { mx, my } = pos(e); cv.style.cursor = hit(mx, my) ? 'grab' : 'default'; return; }
      const { mx, my } = pos(e);
      const xf = Math.max(0.02, Math.min(0.98, mx / this.W));
      if (this._drag.kind === 'src') {
        this.source.xf = xf;
        // vertical drag too → move the source up/down off the axis
        const yf = (my - this._ay()) / (this.H / 2 - 14);
        this.source.yf = Math.max(-0.95, Math.min(0.95, yf));
      } else { const el = this.elements.find(x => x.id === this._drag.id); if (el) el.xf = xf; }
      this._redraw();          // position drag → redraw canvas, keep inspector intact
    });
    on(cv, 'pointerup', e => { this._drag = null; try { cv.releasePointerCapture(e.pointerId); } catch (_) {} });
  }

  exportPng() {
    try { return this.canvas.toDataURL('image/png'); } catch (_) { return null; }
  }

  dispose() {
    if (this._ro) { this._ro.disconnect(); this._ro = null; }
    if (this._listeners) { for (const [t, ty, fn, o] of this._listeners) t.removeEventListener(ty, fn, o); this._listeners = []; }
  }

  /* ── state (for snapshot / embed) ── */
  getState() { return { source: { ...this.source }, elements: this.elements.map(e => ({ ...e })) }; }
  setState(st) {
    if (!st) return;
    if (st.source) this.source = { ...this.source, ...st.source };
    if (Array.isArray(st.elements)) {
      this.elements = st.elements.map(e => ({ ...e }));
      this._nextId = this.elements.reduce((m, e) => Math.max(m, e.id || 0), 0) + 1;
    }
    this._changed();
  }
}

/* ─────────────────────────────────────────────────────────────
   4b. PRISM ENGINE
───────────────────────────────────────────────────────────────*/
class PrismSim {
  constructor(canvas) {
    this.canvas = canvas;
    this.ctx    = canvas.getContext('2d');
    this.W = 0; this.H = 0;
    this.apexAngle = 60;
    this.n0        = 1.5;
    this.rotation  = 0;
    this.incAngle  = 30;
    this._drag    = null;
    this.onUpdate = null;
    this._bindEvents();
    new ResizeObserver(() => { this.fit(); this.draw(); }).observe(canvas.parentElement);
  }

  fit() {
    const dpr = window.devicePixelRatio || 1;
    const w = this.canvas.offsetWidth || 600;
    const h = this.canvas.offsetHeight || 400;
    this.canvas.width  = w * dpr;
    this.canvas.height = h * dpr;
    this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    this.W = w; this.H = h;
  }

  getParams() { return { apexAngle: this.apexAngle, n0: this.n0, rotation: this.rotation, incAngle: this.incAngle }; }
  setParams({ apexAngle, n0, rotation, incAngle } = {}) {
    if (apexAngle !== undefined) this.apexAngle = Math.max(20, Math.min(80, +apexAngle));
    if (n0        !== undefined) this.n0        = Math.max(1.3, Math.min(2.5, +n0));
    if (rotation  !== undefined) this.rotation  = +rotation % 360;
    if (incAngle  !== undefined) this.incAngle  = Math.max(0, Math.min(80, +incAngle));
    this.draw(); this._emit();
  }

  reset() { this.apexAngle = 60; this.n0 = 1.5; this.rotation = 0; this.incAngle = 30; this.draw(); this._emit(); }
  _emit() { if (this.onUpdate) this.onUpdate(this.getParams()); }

  draw() {
    const ctx = this.ctx, W = this.W, H = this.H;
    if (!W || !H) return;

    ctx.fillStyle = '#0D0D1A'; ctx.fillRect(0, 0, W, H);
    ctx.strokeStyle = 'rgba(255,255,255,0.1)'; ctx.lineWidth = 1; ctx.setLineDash([6,4]);
    ctx.beginPath(); ctx.moveTo(0, H/2); ctx.lineTo(W, H/2); ctx.stroke();
    ctx.setLineDash([]);

    const cx = W / 2, cy = H / 2;
    const size = Math.min(W, H) * 0.30;
    const rotRad = this.rotation * Math.PI / 180;
    const topA   = -Math.PI / 2 + rotRad;
    const v = [0, 1, 2].map(i => ({
      x: cx + size * Math.cos(topA + i * (2 * Math.PI / 3)),
      y: cy + size * Math.sin(topA + i * (2 * Math.PI / 3)),
    }));

    // Prism body
    const prismGrad = ctx.createLinearGradient(v[0].x, v[0].y, v[1].x, v[1].y);
    prismGrad.addColorStop(0, 'rgba(100,180,255,0.07)');
    prismGrad.addColorStop(0.5, 'rgba(100,180,255,0.16)');
    prismGrad.addColorStop(1, 'rgba(100,180,255,0.07)');
    ctx.beginPath(); ctx.moveTo(v[0].x, v[0].y); ctx.lineTo(v[1].x, v[1].y); ctx.lineTo(v[2].x, v[2].y); ctx.closePath();
    ctx.fillStyle = prismGrad; ctx.fill();
    ctx.strokeStyle = 'rgba(100,180,255,0.5)'; ctx.lineWidth = 2; ctx.stroke();
    ctx.font = '11px Manrope, system-ui, sans-serif'; ctx.fillStyle = 'rgba(100,180,255,0.7)';
    ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
    ctx.fillText('n = ' + this.n0.toFixed(2), cx, cy + 4);

    const isWhite  = window._obWhiteLight;
    const monoNm   = window._obWavelength || 550;
    const spectral = isWhite ? OB_SPECTRAL : [{ nm: monoNm }];

    // Entry face: v[0] → v[2]; inward normal toward center
    const efVec = { x: v[2].x - v[0].x, y: v[2].y - v[0].y };
    const efLen = Math.hypot(efVec.x, efVec.y);
    let efNorm  = { x: -efVec.y / efLen, y: efVec.x / efLen };
    if (efNorm.x * (cx - v[0].x) + efNorm.y * (cy - v[0].y) < 0) {
      efNorm = { x: -efNorm.x, y: -efNorm.y };
    }
    const eX = (v[0].x + v[2].x) / 2, eY = (v[0].y + v[2].y) / 2;
    /* tangDir = 90° CW rotation of efNorm so that positive incAngle
       tilts the ray toward the apex side (natural source-from-left setup) */
    const tangDir = { x: efNorm.y, y: -efNorm.x };
    const incRad  = this.incAngle * Math.PI / 180;
    /* incDir = propagation direction (INTO the prism) */
    const incDir  = {
      x: Math.cos(incRad) * efNorm.x + Math.sin(incRad) * tangDir.x,
      y: Math.cos(incRad) * efNorm.y + Math.sin(incRad) * tangDir.y,
    };
    const incDLen = Math.hypot(incDir.x, incDir.y);
    incDir.x /= incDLen; incDir.y /= incDLen;

    const rayLen = W * 0.45;
    /* draw incoming ray from outside (source side) to entry midpoint */
    this._drawRayLine(ctx, eX - incDir.x * rayLen, eY - incDir.y * rayLen, eX, eY,
      isWhite ? '#FFFFFF' : wavelengthToRGB(monoNm), 2.5);

    // Exit face: v[0] → v[1]; outward normal
    const exfVec = { x: v[1].x - v[0].x, y: v[1].y - v[0].y };
    const exfLen = Math.hypot(exfVec.x, exfVec.y);
    let exfNorm = { x: -exfVec.y / exfLen, y: exfVec.x / exfLen };
    if (exfNorm.x * (cx - v[0].x) + exfNorm.y * (cy - v[0].y) > 0) {
      exfNorm = { x: -exfNorm.x, y: -exfNorm.y };
    }

    const exitPts = [];
    for (const s of spectral) {
      const nP  = _nAtWavelength(this.n0, s.nm);
      const col = wavelengthToRGB(s.nm);
      /* Snell vector form: l = incDir (propagation), n = -efNorm (toward incident medium)
         cosθ_i = -n·l = efNorm·l;  r = μl + (μcosθ_i - cosθ_t)·n */
      const cosI = (incDir.x * efNorm.x + incDir.y * efNorm.y);
      const sinR = Math.sqrt(Math.max(0, 1 - cosI * cosI)) / nP;
      if (sinR > 1) continue;
      const cosR = Math.sqrt(1 - sinR * sinR);
      const rDir = {
        x: (1/nP) * incDir.x + (cosR - (1/nP) * cosI) * efNorm.x,
        y: (1/nP) * incDir.y + (cosR - (1/nP) * cosI) * efNorm.y,
      };
      const rDLen = Math.hypot(rDir.x, rDir.y);
      rDir.x /= rDLen; rDir.y /= rDLen;

      // Intersect with exit face segment v[0]→v[1]
      const det = rDir.x * exfVec.y - rDir.y * exfVec.x;
      if (Math.abs(det) < 0.001) continue;
      const d0x = v[0].x - eX, d0y = v[0].y - eY;
      const tRay  = (d0x * exfVec.y - d0y * exfVec.x) / det;
      const sFace = (d0x * rDir.y - d0y * rDir.x) / det;
      if (tRay < 0 || sFace < -0.01 || sFace > 1.01) continue;
      const exitX = eX + tRay * rDir.x, exitY = eY + tRay * rDir.y;

      ctx.globalAlpha = isWhite ? 0.65 : 1;
      this._drawRayLine(ctx, eX, eY, exitX, exitY, col, isWhite ? 1.5 : 2);
      ctx.globalAlpha = 1;

      // Snell at exit face: n1=nP, n2=1 (vector form)
      const inward = { x: -exfNorm.x, y: -exfNorm.y };
      const cosEx  = -(rDir.x * inward.x + rDir.y * inward.y);
      const sinEx2 = nP * Math.sqrt(Math.max(0, 1 - cosEx * cosEx));
      if (sinEx2 > 1) continue; // TIR
      const cosEx2 = Math.sqrt(1 - sinEx2 * sinEx2);
      const eDir = {
        x: nP * rDir.x + (nP * cosEx - cosEx2) * inward.x,
        y: nP * rDir.y + (nP * cosEx - cosEx2) * inward.y,
      };
      const eDLen = Math.hypot(eDir.x, eDir.y);
      eDir.x /= eDLen; eDir.y /= eDLen;

      ctx.globalAlpha = isWhite ? 0.85 : 1;
      this._drawRayLine(ctx, exitX, exitY, exitX + eDir.x * rayLen, exitY + eDir.y * rayLen, col, isWhite ? 2 : 2.5);
      ctx.globalAlpha = 1;
      exitPts.push({ nm: s.nm, col });
    }

    // Drag hint ring
    ctx.strokeStyle = 'rgba(100,180,255,0.12)'; ctx.lineWidth = 1; ctx.setLineDash([3,4]);
    ctx.beginPath(); ctx.arc(cx, cy, size * 1.18, 0, Math.PI * 2); ctx.stroke();
    ctx.setLineDash([]);

    // Info box
    ctx.fillStyle = 'rgba(22,22,38,0.88)'; ctx.beginPath(); ctx.roundRect(12, 12, 224, 52, 8); ctx.fill();
    ctx.font = '11px Manrope, system-ui, sans-serif'; ctx.textAlign = 'left'; ctx.textBaseline = 'top';
    ctx.fillStyle = 'rgba(255,255,255,0.7)'; ctx.fillText('Призма: A = ' + this.apexAngle + '°', 22, 22);
    ctx.fillStyle = 'rgba(100,180,255,0.8)'; ctx.fillText('n(λ) = ' + this.n0.toFixed(2) + ' − 0.0002·(λ−550)', 22, 40);

    _obUpdateSpectrometer(exitPts);
    // OB_FX visual depth layer (prism: source flare + wavefronts)
    _drawOBFXLayer(ctx, 'prism', { srcX: this.W * 0.1, srcY: this.H / 2 });
    if (window.LabFX) { LabFX.particles.update(1/60); LabFX.particles.draw(ctx); }
  }

  _drawRayLine(ctx, x1, y1, x2, y2, color, width) {
    const fn = () => {
      ctx.strokeStyle = color; ctx.lineWidth = width; ctx.lineCap = 'round';
      ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke();
    };
    if (window.LabFX) LabFX.glow.drawGlow(ctx, fn, { color, intensity: 6 });
    else fn();
  }

  _bindEvents() {
    const cv = this.canvas;
    const getPos = (e) => {
      const r = cv.getBoundingClientRect();
      const t = e.touches ? e.touches[0] : e;
      return { mx: (t.clientX - r.left) * (this.W / r.width), my: (t.clientY - r.top) * (this.H / r.height) };
    };
    const hitTest = (mx, my) => Math.hypot(mx - this.W/2, my - this.H/2) < Math.min(this.W, this.H) * 0.35;
    const onDown = (e) => {
      const { mx, my } = getPos(e);
      if (hitTest(mx, my)) this._drag = { sx: mx, sy: my, sRot: this.rotation, sInc: this.incAngle };
    };
    const onMove = (e) => {
      if (!this._drag) return;
      if (e.cancelable) e.preventDefault();
      const { mx, my } = getPos(e);
      this.rotation = this._drag.sRot + (mx - this._drag.sx) * 0.4;
      this.incAngle = Math.max(0, Math.min(80, this._drag.sInc + (my - this._drag.sy) * 0.3));
      this.draw(); this._emit();
    };
    const onUp = () => { if (this._drag && window.LabFX) LabFX.sound.play('click'); this._drag = null; };
    cv.addEventListener('mousedown', onDown);
    window.addEventListener('mousemove', onMove);
    window.addEventListener('mouseup', onUp);
    cv.addEventListener('touchstart', e => { if (e.touches.length === 1) onDown(e); }, { passive: true });
    cv.addEventListener('touchmove', e => onMove(e), { passive: false });
    cv.addEventListener('touchend', onUp);
    cv.addEventListener('mousemove', e => {
      if (this._drag) { cv.style.cursor = 'grabbing'; return; }
      const { mx, my } = getPos(e);
      cv.style.cursor = hitTest(mx, my) ? 'grab' : 'default';
    });
  }
}

/* ─────────────────────────────────────────────────────────────
   4d. INTERFERENCE SIM — Newton's rings / Thin film / Polarization
   Agent C — additive only, class InterferenceSim
─────────────────────────────────────────────────────────────*/
class InterferenceSim {
  constructor(canvas) {
    this.canvas  = canvas;
    this.ctx     = canvas.getContext('2d');
    this.W = 0; this.H = 0;
    this.subMode = 'newton';
    // Newton rings
    this.nR    = 200;
    this.nNmax = 12;
    // Thin film
    this.tfT      = 400;
    this.tfN      = 1.33;
    this.tfTheta  = 0;
    this.tfPreset = 'soap';
    // Polarization
    this.polTheta = 45;
    this.polSrc   = 'unpolarized';
    this._polTick = 0;
    this._polRaf  = null;
    this.onUpdate = null;
    new ResizeObserver(() => { this.fit(); this.draw(); }).observe(canvas.parentElement || canvas);
  }

  fit() {
    const p = this.canvas.parentElement;
    if (!p) return;
    const r = p.getBoundingClientRect();
    this.W = this.canvas.width  = r.width  || p.offsetWidth  || 600;
    this.H = this.canvas.height = r.height || p.offsetHeight || 400;
  }

  setSubMode(sm) {
    this.subMode = sm;
    if (sm === 'polarization') {
      this._polStart();
    } else {
      this._polStop();
    }
    this.draw();
    if (this.onUpdate) this.onUpdate();
  }

  /* ── Newton Rings ──────────────────────────────────────── */
  _drawNewton() {
    const { ctx, W, H } = this;
    const nm    = window._obWavelength || 550;
    const R     = this.nR;
    const nMax  = this.nNmax;
    const white = window._obWhiteLight;

    ctx.clearRect(0, 0, W, H);
    ctx.fillStyle = '#08081a';
    ctx.fillRect(0, 0, W, H);

    const topH = Math.floor(H * 0.60);
    const cx = W / 2, cy = topH / 2;
    const maxR_mm = Math.sqrt(nMax * nm * 1e-6 * R);
    const scale   = Math.min(cx * 0.85, cy * 0.85) / (maxR_mm || 1);

    for (let n = nMax; n >= 0; n--) {
      const lambdas = white ? [420, 470, 510, 550, 590, 620, 680] : [nm];
      for (const lam of lambdas) {
        const rDark   = Math.sqrt(n * lam * 1e-6 * R) * scale;
        const rBright = Math.sqrt((n + 0.5) * lam * 1e-6 * R) * scale;
        if (rDark > 0.5) {
          ctx.beginPath();
          ctx.arc(cx, cy, rDark, 0, Math.PI * 2);
          ctx.strokeStyle = white
            ? wavelengthToRGB(lam).replace(')', ',0.5)').replace('rgb', 'rgba')
            : '#000000';
          ctx.lineWidth = white ? 1.2 : 1.5;
          ctx.stroke();
        }
        if (rBright > 0.5) {
          const al = white ? 0.22 : 0.55;
          ctx.beginPath();
          ctx.arc(cx, cy, rBright, 0, Math.PI * 2);
          ctx.strokeStyle = wavelengthToRGB(lam).replace(')', ',' + al + ')').replace('rgb', 'rgba');
          ctx.lineWidth = 2.5;
          ctx.stroke();
        }
      }
    }

    ctx.beginPath(); ctx.arc(cx, cy, 4, 0, Math.PI * 2);
    ctx.fillStyle = '#000000'; ctx.fill();

    if (window.LabFX && LabFX.glow && !white) {
      const r1b = Math.sqrt(0.5 * nm * 1e-6 * R) * scale;
      const ringColor = wavelengthToRGB(nm);
      LabFX.glow.drawGlow(ctx, function() {
        ctx.beginPath();
        ctx.arc(cx, cy, r1b, 0, Math.PI * 2);
        ctx.strokeStyle = ringColor;
        ctx.lineWidth = 2;
        ctx.stroke();
      }, { color: ringColor, intensity: 18 });
    }

    ctx.beginPath(); ctx.arc(cx, cy, maxR_mm * scale * 1.05, 0, Math.PI * 2);
    ctx.strokeStyle = '#334455'; ctx.lineWidth = 1; ctx.stroke();

    const crossY0 = topH + 8;
    const crossH  = H - crossY0 - 40;
    if (crossH < 30) return;

    ctx.fillStyle = '#0d0d20';
    ctx.fillRect(0, crossY0, W, crossH + 36);

    const glassY  = crossY0 + crossH - 10;
    ctx.fillStyle = '#1a3a5c';
    ctx.fillRect(cx - maxR_mm * scale * 1.1, glassY, maxR_mm * scale * 2.2, 10);

    const sagitta = (maxR_mm * maxR_mm) / (2 * R);
    const sagPx   = sagitta * scale;
    ctx.beginPath();
    ctx.ellipse(cx, glassY - 1 - sagPx, maxR_mm * scale * 1.1, sagPx + 6, 0, 0, Math.PI);
    ctx.fillStyle = 'rgba(100,180,255,0.15)'; ctx.fill();
    ctx.strokeStyle = '#4499cc'; ctx.lineWidth = 1.5; ctx.stroke();

    for (let n = 0; n <= nMax; n++) {
      const rD = Math.sqrt(n * nm * 1e-6 * R) * scale;
      if (rD < 1) continue;
      ctx.beginPath();
      ctx.moveTo(cx + rD, glassY); ctx.lineTo(cx + rD, glassY + 8);
      ctx.moveTo(cx - rD, glassY); ctx.lineTo(cx - rD, glassY + 8);
      ctx.strokeStyle = 'rgba(255,255,255,0.25)'; ctx.lineWidth = 1; ctx.stroke();
    }

    ctx.font = '600 11px monospace'; ctx.fillStyle = '#667788'; ctx.textAlign = 'center';
    ctx.fillText('Cross-section', cx, crossY0 + 14);

    const r1d = Math.sqrt(nm * 1e-6 * R).toFixed(3);
    this._drawHUD(ctx, W, H,
      'r1 = sqrt(lam*R) = ' + r1d + ' mm  |  R=' + R + 'mm  |  lam=' + nm + 'nm');
  }

  /* ── Thin Film ─────────────────────────────────────────── */
  _thinFilmColor(t_nm, n_film, theta_deg) {
    const sinR = Math.sin(theta_deg * Math.PI / 180) / n_film;
    const cosR = Math.sqrt(Math.max(0, 1 - sinR * sinR));
    const opd  = 2 * n_film * t_nm * cosR;
    let rS = 0, gS = 0, bS = 0;
    for (let lam = 380; lam <= 780; lam += 5) {
      const phase = Math.PI * opd / lam;
      const I = Math.cos(phase) * Math.cos(phase);
      const rgb = wavelengthToRGB(lam);
      const m = rgb.match(/d+/g);
      if (!m) continue;
      rS += I * +m[0]; gS += I * +m[1]; bS += I * +m[2];
    }
    const sc = 255 / Math.max(rS, gS, bS, 1);
    return 'rgb(' + Math.round(rS * sc) + ',' + Math.round(gS * sc) + ',' + Math.round(bS * sc) + ')';
  }

  _drawThinFilm() {
    const { ctx, W, H } = this;
    const t     = this.tfT;
    const nf    = this.tfN;
    const theta = this.tfTheta;

    ctx.clearRect(0, 0, W, H);
    ctx.fillStyle = '#08081a';
    ctx.fillRect(0, 0, W, H);

    const midY   = H * 0.40;
    const filmH  = Math.max(28, H * 0.12);
    const margin = W * 0.10;
    const ang    = theta * Math.PI / 180;
    const skew   = Math.tan(ang) * filmH * 0.5;

    const grad = ctx.createLinearGradient(margin, 0, W - margin, 0);
    for (let i = 0; i <= 20; i++) {
      const frac = i / 20;
      grad.addColorStop(frac, this._thinFilmColor(t * (0.3 + 0.7 * frac), nf, theta));
    }

    ctx.save();
    ctx.beginPath();
    ctx.moveTo(margin - skew,     midY - filmH / 2);
    ctx.lineTo(W - margin - skew, midY - filmH / 2);
    ctx.lineTo(W - margin + skew, midY + filmH / 2);
    ctx.lineTo(margin + skew,     midY + filmH / 2);
    ctx.closePath();
    ctx.fillStyle = grad; ctx.fill();
    ctx.strokeStyle = 'rgba(255,255,255,0.3)'; ctx.lineWidth = 1; ctx.stroke();
    ctx.restore();

    ctx.font = '700 11px sans-serif'; ctx.fillStyle = 'rgba(255,255,255,0.7)';
    ctx.textAlign = 'center';
    ctx.fillText('t=' + t + 'nm  n=' + nf.toFixed(2), W / 2, midY);

    const ax2 = W * 0.25, ay2 = midY - filmH / 2;
    const ax1 = ax2 - Math.cos(ang) * 40, ay1 = ay2 - Math.sin(ang) * 40 - 20;
    ctx.beginPath(); ctx.moveTo(ax1, ay1); ctx.lineTo(ax2, ay2);
    ctx.strokeStyle = '#8ab4e8'; ctx.lineWidth = 1.5; ctx.stroke();

    const col = this._thinFilmColor(t, nf, theta);
    ctx.beginPath(); ctx.moveTo(ax2, ay2); ctx.lineTo(ax2 - Math.cos(ang) * 40, ay1);
    ctx.strokeStyle = col; ctx.lineWidth = 2; ctx.stroke();

    const dx2 = Math.sin(ang) * filmH / nf;
    ctx.beginPath();
    ctx.moveTo(ax2 + dx2, ay2 + filmH);
    ctx.lineTo(ax2 + dx2 - Math.cos(ang) * 40, ay1 + filmH - 20);
    ctx.strokeStyle = col; ctx.lineWidth = 2;
    ctx.setLineDash([4, 3]); ctx.stroke(); ctx.setLineDash([]);

    const tvX0 = W * 0.55, tvW2 = W * 0.38;
    const tvY0 = H * 0.05, tvH2 = H * 0.60;
    ctx.fillStyle = '#0d0d22'; ctx.strokeStyle = '#2a2a4a'; ctx.lineWidth = 1;
    ctx.beginPath();
    if (ctx.roundRect) ctx.roundRect(tvX0, tvY0, tvW2, tvH2, 8);
    else ctx.rect(tvX0, tvY0, tvW2, tvH2);
    ctx.fill(); ctx.stroke();
    ctx.font = '600 10px sans-serif'; ctx.fillStyle = '#555'; ctx.textAlign = 'center';
    ctx.fillText('Top view', tvX0 + tvW2 / 2, tvY0 + 14);

    const tvRows = 28, tvCols = 36;
    const cW = tvW2 / tvCols, cH = (tvH2 - 20) / tvRows;
    for (let r = 0; r < tvRows; r++) {
      for (let c = 0; c < tvCols; c++) {
        ctx.fillStyle = this._thinFilmColor(t * (0.5 + c / tvCols), nf, theta * (r / tvRows));
        ctx.fillRect(tvX0 + c * cW, tvY0 + 20 + r * cH, cW + 0.5, cH + 0.5);
      }
    }

    const sinR2 = Math.sin(ang) / nf;
    const cosR2 = Math.sqrt(Math.max(0, 1 - sinR2 * sinR2));
    const opd2  = (2 * nf * t * cosR2).toFixed(0);
    this._drawHUD(ctx, W, H,
      '2nt*cos(th_r)=' + opd2 + 'nm  |  t=' + t + 'nm  n=' + nf.toFixed(2) + '  th=' + theta + 'deg');
  }

  /* ── Polarization ──────────────────────────────────────── */
  _polStart() {
    if (this._polRaf) return;
    const loop = () => { this._polTick++; this.draw(); this._polRaf = requestAnimationFrame(loop); };
    this._polRaf = requestAnimationFrame(loop);
  }

  _polStop() {
    if (this._polRaf) { cancelAnimationFrame(this._polRaf); this._polRaf = null; }
  }

  _drawPolarization() {
    const { ctx, W, H } = this;
    const theta   = this.polTheta * Math.PI / 180;
    const I_rel   = Math.cos(theta) * Math.cos(theta);
    const tick    = this._polTick;
    const white   = window._obWhiteLight;
    const nm      = window._obWavelength || 550;
    const beamCol = white ? '#ffffff' : wavelengthToRGB(nm);

    ctx.clearRect(0, 0, W, H);
    ctx.fillStyle = '#08081a';
    ctx.fillRect(0, 0, W, H);

    const axisY = H * 0.45;
    const stH   = H * 0.38;
    const st    = [
      { x: W * 0.12, label: 'Источник',       isFilter: false                    },
      { x: W * 0.38, label: 'Поляризатор P1',  isFilter: true,  angle: 0          },
      { x: W * 0.64, label: 'Анализатор P2',   isFilter: true,  angle: this.polTheta },
      { x: W * 0.88, label: 'Детектор',        isFilter: false                    },
    ];

    ctx.beginPath();
    ctx.moveTo(st[0].x - 20, axisY); ctx.lineTo(st[3].x + 20, axisY);
    ctx.strokeStyle = '#1a1a35'; ctx.lineWidth = 1; ctx.stroke();

    const segs = [
      { x0: st[0].x, x1: st[1].x, amp: 1,     unpol: this.polSrc === 'unpolarized', ang: 0           },
      { x0: st[1].x, x1: st[2].x, amp: 1,     unpol: false,                          ang: 0           },
      { x0: st[2].x, x1: st[3].x, amp: I_rel, unpol: false,                          ang: this.polTheta },
    ];

    for (const seg of segs) {
      const nA = 20;
      const sdx = (seg.x1 - seg.x0) / nA;
      for (let i = 0; i <= nA; i++) {
        const bx    = seg.x0 + i * sdx;
        const phase = (bx * 0.08 - tick * 0.04) % (Math.PI * 2);
        const bAmp  = stH * 0.28 * seg.amp;
        if (seg.unpol) {
          for (let d = 0; d < 4; d++) {
            const a  = d * Math.PI / 4;
            const oy = Math.sin(phase + d * 0.7) * bAmp;
            ctx.beginPath(); ctx.moveTo(bx, axisY);
            ctx.lineTo(bx + oy * Math.sin(a) * 0.25, axisY + oy * Math.cos(a));
            ctx.strokeStyle = 'rgba(200,200,255,0.22)'; ctx.lineWidth = 1; ctx.stroke();
          }
        } else {
          const oy = Math.sin(phase) * bAmp;
          const a  = seg.ang * Math.PI / 180;
          const py = oy * Math.cos(a), px = oy * Math.sin(a) * 0.35;
          ctx.beginPath();
          ctx.moveTo(bx - px, axisY - py); ctx.lineTo(bx + px, axisY + py);
          ctx.strokeStyle = (I_rel < 0.01 && seg.amp < 0.5)
            ? 'rgba(80,80,120,0.5)'
            : beamCol.replace(')', ',0.75)').replace('rgb', 'rgba');
          ctx.lineWidth = 1.5; ctx.stroke();
          if (i % 3 === 0 && bAmp > 2) {
            ctx.beginPath(); ctx.arc(bx + px, axisY + py, 2, 0, Math.PI * 2);
            ctx.fillStyle = beamCol; ctx.fill();
          }
        }
      }
    }

    for (const s of st) {
      if (!s.isFilter) continue;
      const a = s.angle * Math.PI / 180;
      ctx.save(); ctx.translate(s.x, axisY);
      ctx.fillStyle = 'rgba(80,120,200,0.18)';
      ctx.fillRect(-4, -stH / 2, 8, stH);
      ctx.strokeStyle = '#4466aa'; ctx.lineWidth = 1.5; ctx.strokeRect(-4, -stH / 2, 8, stH);
      const axLen = stH * 0.45;
      ctx.beginPath();
      ctx.moveTo(-Math.sin(a) * axLen, -Math.cos(a) * axLen);
      ctx.lineTo( Math.sin(a) * axLen,  Math.cos(a) * axLen);
      ctx.strokeStyle = '#7aaeff'; ctx.lineWidth = 2; ctx.stroke();
      ctx.restore();
      ctx.font = '700 10px monospace'; ctx.fillStyle = '#7aaeff'; ctx.textAlign = 'center';
      ctx.fillText(s.angle + 'deg', s.x, axisY + stH / 2 + 14);
    }

    for (const s of st) {
      ctx.font = '600 10px sans-serif'; ctx.fillStyle = '#667788'; ctx.textAlign = 'center';
      ctx.fillText(s.label, s.x, axisY - stH / 2 - 8);
    }

    const barX = W * 0.91, barW = 16;
    const barY0 = axisY - stH / 2;
    ctx.fillStyle = '#111122'; ctx.fillRect(barX, barY0, barW, stH);
    const fillH2 = stH * I_rel;
    if (fillH2 > 0) {
      const bg = ctx.createLinearGradient(barX, barY0 + stH - fillH2, barX, barY0 + stH);
      bg.addColorStop(0, beamCol); bg.addColorStop(1, 'rgba(0,0,0,0.2)');
      ctx.fillStyle = bg; ctx.fillRect(barX, barY0 + stH - fillH2, barW, fillH2);
    }
    ctx.strokeStyle = '#334455'; ctx.lineWidth = 1; ctx.strokeRect(barX, barY0, barW, stH);
    ctx.font = '600 9px monospace'; ctx.fillStyle = '#aaaaaa'; ctx.textAlign = 'center';
    ctx.fillText('I', barX + barW / 2, barY0 - 5);

    if (this.polTheta >= 88) {
      ctx.font = '700 13px sans-serif'; ctx.fillStyle = '#EF476F'; ctx.textAlign = 'center';
      ctx.fillText('Полное гашение', W / 2, H * 0.85);
    }

    ctx.font = '10px sans-serif'; ctx.fillStyle = '#444466'; ctx.textAlign = 'right';
    ctx.fillText('Угол Брюстера: отражённый свет поляризован (см. Преломление)', W - 10, H - 10);

    const pct = (I_rel * 100).toFixed(1);
    this._drawHUD(ctx, W, H,
      'I/I0=cos2(th)=cos2(' + this.polTheta + 'deg)=' + I_rel.toFixed(3) + '  (' + pct + '%)');
  }

  _drawHUD(ctx, W, H, text) {
    const pad = 8, fs = 11;
    ctx.font = '600 ' + fs + 'px monospace';
    const tw = ctx.measureText(text).width;
    const bx = (W - tw) / 2 - pad, by = H - 32;
    const bw = tw + pad * 2, bh = fs + pad * 2;
    ctx.fillStyle = 'rgba(10,10,30,0.82)';
    ctx.beginPath();
    if (ctx.roundRect) ctx.roundRect(bx, by, bw, bh, 5);
    else ctx.rect(bx, by, bw, bh);
    ctx.fill();
    ctx.fillStyle = '#c8d8ff';
    ctx.textAlign = 'left'; ctx.textBaseline = 'middle';
    ctx.fillText(text, bx + pad, by + bh / 2);
    ctx.textBaseline = 'alphabetic';
  }

  draw() {
    if (this.subMode === 'newton')            this._drawNewton();
    else if (this.subMode === 'thinfilm')     this._drawThinFilm();
    else if (this.subMode === 'polarization') this._drawPolarization();
  }
}

/* ─────────────────────────────────────────────────────────────
   4c. SPECTROMETER PANEL
───────────────────────────────────────────────────────────────*/
function _obDrawSpectrometer() {
  const canvas = document.getElementById('ob-spectrometer-canvas');
  if (!canvas) return;
  const ctx = canvas.getContext('2d');
  const W = canvas.offsetWidth || 360, H = canvas.offsetHeight || 72;
  const dpr = window.devicePixelRatio || 1;
  canvas.width = W * dpr; canvas.height = H * dpr;
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  ctx.fillStyle = '#0a0a18'; ctx.fillRect(0, 0, W, H);
  const barX1 = 24, barX2 = W - 24, barY = 22, barH = 20;
  const grad = ctx.createLinearGradient(barX1, 0, barX2, 0);
  for (let nm = 380; nm <= 780; nm += 10) {
    grad.addColorStop((nm - 380) / 400, wavelengthToRGB(nm));
  }
  ctx.fillStyle = grad; ctx.fillRect(barX1, barY, barX2 - barX1, barH);
  ctx.strokeStyle = 'rgba(255,255,255,0.18)'; ctx.lineWidth = 1;
  ctx.strokeRect(barX1, barY, barX2 - barX1, barH);
  ctx.font = '8px Manrope, system-ui, sans-serif'; ctx.textBaseline = 'top'; ctx.textAlign = 'center';
  [400, 450, 500, 550, 600, 650, 700, 750].forEach(nm => {
    const x = barX1 + (nm - 380) / 400 * (barX2 - barX1);
    ctx.fillStyle = 'rgba(255,255,255,0.45)'; ctx.fillText(nm, x, barY + barH + 3);
    ctx.strokeStyle = 'rgba(255,255,255,0.2)'; ctx.lineWidth = 0.5;
    ctx.beginPath(); ctx.moveTo(x, barY + barH); ctx.lineTo(x, barY + barH + 2.5); ctx.stroke();
  });
  const wlNm = window._obWavelength || 550;
  const wlX  = barX1 + (wlNm - 380) / 400 * (barX2 - barX1);
  ctx.strokeStyle = '#FFFFFF'; ctx.lineWidth = 1.5;
  ctx.beginPath(); ctx.moveTo(wlX, barY - 5); ctx.lineTo(wlX, barY + barH + 5); ctx.stroke();
  ctx.font = 'bold 9px Manrope, system-ui, sans-serif'; ctx.textBaseline = 'bottom'; ctx.textAlign = 'center';
  ctx.fillStyle = '#FFFFFF'; ctx.fillText(wlNm + ' нм', wlX, barY - 6);
  if (window._obSpectrometerDots) {
    for (const dot of window._obSpectrometerDots) {
      const x = barX1 + (dot.nm - 380) / 400 * (barX2 - barX1);
      ctx.fillStyle = dot.col;
      ctx.beginPath(); ctx.arc(x, barY - 9, 4, 0, Math.PI * 2); ctx.fill();
      ctx.strokeStyle = 'rgba(255,255,255,0.3)'; ctx.lineWidth = 0.8;
      ctx.beginPath(); ctx.arc(x, barY - 9, 4, 0, Math.PI * 2); ctx.stroke();
    }
  }
}

function _obUpdateSpectrometer(exitPts) {
  window._obSpectrometerDots = exitPts || [];
  _obDrawSpectrometer();
}

/* ─────────────────────────────────────────────────────────────
   5.  LAB UI INIT — Оптическая скамья
───────────────────────────────────────────────────────────────*/

var lensSim    = null;
var mirrorSim  = null;
var refrSim    = null;
var prismSim   = null;
var freeSim    = null; /* multi-lens free-build (legacy, superseded by benchSim) */
var benchSim   = null; /* optical bench constructor (general ray tracer) */
var ifSim      = null; /* interference/polarization (Agent C) */
var _obMode    = 'lens'; // current active mode within opticsbench

/* Wavelength state — shared across all modes */
window._obWavelength  = 550;  // default 550 nm (green/yellow)
window._obWhiteLight  = false; // monochromatic by default

/* Open opticsbench, optionally setting a mode ('lens'|'mirror'|'refraction') */
function _openOpticsBench(mode) {
  mode = mode || 'lens';
  _obMode = mode;
  document.getElementById('sim-topbar-title').textContent = 'Оптическая скамья';
  _simShow('sim-opticsbench');
  _registerSimState('opticsbench', () => _obGetState(), st => _obApplyState(st));
  if (_embedMode) _startStateEmit('opticsbench');
  // Sync OB_FX checkboxes with persisted state
  ['wavefronts', 'mist', 'flare', 'huygens', 'caustics'].forEach(function(k) {
    const el = document.getElementById('obfx-' + k);
    if (el) el.checked = !!window.OB_FX[k];
  });
  requestAnimationFrame(() => requestAnimationFrame(() => {
    obSwitchMode(mode, true);
  }));
}

function _obGetState() {
  if (_obMode === 'lens')       return { mode: 'lens',       ...(lensSim   ? lensSim.getParams()   : {}) };
  if (_obMode === 'mirror')     return { mode: 'mirror',     ...(mirrorSim ? mirrorSim.getParams()  : {}) };
  if (_obMode === 'refraction') return { mode: 'refraction', ...(refrSim   ? refrSim.getParams()    : {}) };
  if (_obMode === 'freebuild')  return { mode: 'freebuild',  bench: benchSim ? benchSim.getState() : null };
  if (_obMode === 'waves')      return { mode: 'waves' };
  return { mode: _obMode };
}

function _obApplyState(st) {
  if (!st) return;
  const m = st.mode || _obMode;
  obSwitchMode(m, true);
  const { mode: _m, ...params } = st;
  if (m === 'lens'       && lensSim)   lensSim.setParams(params);
  if (m === 'mirror'     && mirrorSim) mirrorSim.setParams(params);
  if (m === 'refraction' && refrSim)   refrSim.setParams(params);
  if (m === 'freebuild'  && benchSim && st.bench) { benchSim.setState(st.bench); _benchUpdateUI(); }
}

/* Switch between modes — mirrors emSwitchMode pattern */
function obSwitchMode(mode, silent) {
  if (!silent && window.LabFX) LabFX.sound.play('whoosh', { pitch: 1.3, volume: 0.3 });
  _obMode = mode;

  /* tab button styling */
  ['lens', 'mirror', 'refraction', 'prism', 'freebuild', 'waves', 'interf'].forEach(m => {
    const btn = document.getElementById('ob-tab-' + m);
    if (btn) btn.classList.toggle('active', m === mode);
  });

  /* show/hide per-mode control panels */
  ['ob-ctrl-lens', 'ob-ctrl-mirror', 'ob-ctrl-refraction', 'ob-ctrl-prism', 'ob-ctrl-freebuild', 'ob-ctrl-waves', 'ob-ctrl-interf'].forEach(id => {
    const el = document.getElementById(id);
    if (el) el.style.display = 'none';
  });
  const activeCtrl = document.getElementById('ob-ctrl-' + mode);
  if (activeCtrl) activeCtrl.style.display = '';

  /* show/hide stats bar sections */
  ['ob-stats-lens', 'ob-stats-mirror', 'ob-stats-refr', 'ob-stats-prism', 'ob-stats-freebuild', 'ob-stats-waves', 'ob-stats-interf'].forEach(id => {
    const el = document.getElementById(id);
    if (el) el.style.display = 'none';
  });
  const statsSuffix = mode === 'refraction' ? 'refr' : mode;
  const activeStats = document.getElementById('ob-stats-' + statsSuffix);
  if (activeStats) activeStats.style.display = 'flex';

  /* canvas visibility */
  const canvasIds = ['ob-lens-canvas', 'ob-mirror-canvas', 'ob-refr-canvas', 'ob-prism-canvas', 'ob-free-canvas', 'ob-waves-canvas', 'ob-interf-canvas'];
  const modeCanvas = { lens: 'ob-lens-canvas', mirror: 'ob-mirror-canvas', refraction: 'ob-refr-canvas', prism: 'ob-prism-canvas', freebuild: 'ob-free-canvas', waves: 'ob-waves-canvas', interf: 'ob-interf-canvas' };
  canvasIds.forEach(id => { const el = document.getElementById(id); if (el) el.style.display = 'none'; });
  const activeCanvas = document.getElementById(modeCanvas[mode] || '');
  if (activeCanvas) activeCanvas.style.display = '';

  /* spectrometer panel: show for prism mode */
  const specPanel = document.getElementById('ob-spectrometer-panel');
  if (specPanel) specPanel.style.display = (mode === 'prism') ? '' : 'none';

  /* init engine if not yet done, then (re-)draw */
  if (mode === 'lens') {
    if (!lensSim) {
      const cv = document.getElementById('ob-lens-canvas');
      lensSim = new ThinLensSim(cv);
      lensSim.onUpdate = _lensUpdateUI;
    }
    lensSim.fit(); lensSim.draw(); lensSim._emit();
  } else if (mode === 'mirror') {
    if (!mirrorSim) {
      const cv = document.getElementById('ob-mirror-canvas');
      mirrorSim = new MirrorSim(cv);
      mirrorSim.onUpdate = _mirrorUpdateUI;
      mirrorSim.onAnimate = (d) => {
        const sl = document.getElementById('sl-mirror-d');
        const lbl = document.getElementById('mirror-d-val');
        if (sl) sl.value = Math.round(d);
        if (lbl) lbl.textContent = Math.round(d);
      };
    }
    mirrorSim.fit(); mirrorSim.draw(); mirrorSim._emit();
    if (mirrorSim._showPhotons && !mirrorSim._photonRaf) mirrorSim._startPhotons();
  } else if (mode === 'refraction') {
    if (!refrSim) {
      const cv = document.getElementById('ob-refr-canvas');
      refrSim = new RefractionSim(cv);
      refrSim.onUpdate = _refrUpdateUI;
    }
    refrSim.fit(); refrSim.draw(); refrSim._emit();
  } else if (mode === 'prism') {
    if (!prismSim) {
      const cv = document.getElementById('ob-prism-canvas');
      if (cv) prismSim = new PrismSim(cv);
      /* enable white-light dispersion by default on first prism entry */
      if (window._obWhiteLight === false) {
        window._obWhiteLight = true;
        const wlBtn = document.getElementById('ob-prism-white-btn');
        if (wlBtn) wlBtn.classList.add('active');
      }
    }
    if (prismSim) { prismSim.fit(); prismSim.draw(); }
    _obDrawSpectrometer();
  } else if (mode === 'freebuild') {  /* Optical bench constructor (BenchSim) */
    if (!benchSim) {
      const cv = document.getElementById('ob-free-canvas');
      if (cv) {
        benchSim = new BenchSim(cv);
        benchSim.onUpdate = _benchUpdateUI;
      }
    }
    if (benchSim) { benchSim.fit(); benchSim.draw(); _benchUpdateUI(); }
  } else if (mode === 'waves') {  /* Agent B1 — diffraction & interference */
    if (!diffrSim) {
      const cv = document.getElementById('ob-waves-canvas');
      if (cv) diffrSim = new DiffractionSim(cv);
    }
    if (diffrSim) {
      diffrSim.fit();
      diffrSim.draw();
      diffrSim._updateHUD();
    }
  } else if (mode === 'interf') {  /* Agent C — interference / polarization */
    if (!ifSim) {
      const cv = document.getElementById('ob-interf-canvas');
      if (cv) { ifSim = new InterferenceSim(cv); ifSim.onUpdate = _ifUpdateUI; }
    }
    if (ifSim) { ifSim.fit(); ifSim.draw(); }
    _ifUpdateUI();
  }
}

/* ── Wavelength controls ── */
function obSetWavelength(nm) {
  window._obWavelength = Math.max(380, Math.min(780, +nm));
  const lbl = document.getElementById('ob-wl-val');
  if (lbl) lbl.textContent = window._obWavelength + ' нм';
  _obRedraw();
}

function obToggleWhiteLight(on) {
  window._obWhiteLight = !!on;
  const slRow = document.getElementById('ob-wl-slider-row');
  if (slRow) slRow.style.opacity = on ? '0.4' : '1';
  _obRedraw();
}


/* ── Interference mode UI callbacks (Agent C) ── */
function _ifUpdateUI() {
  if (!ifSim) return;
  const subMode = ifSim.subMode;
  ['if-ctrl-newton', 'if-ctrl-thinfilm', 'if-ctrl-polarization'].forEach(id => {
    const el = document.getElementById(id);
    if (el) el.style.display = 'none';
  });
  const active = document.getElementById('if-ctrl-' + subMode);
  if (active) active.style.display = '';
  ['if-sub-newton', 'if-sub-thinfilm', 'if-sub-polarization'].forEach(id => {
    const el = document.getElementById(id);
    if (el) el.classList.toggle('active', id === 'if-sub-' + subMode);
  });
}

function ifSwitchSub(sub) {
  if (window.LabFX) LabFX.sound.play('chime');
  if (!ifSim) return;
  ifSim.setSubMode(sub);
  _ifUpdateUI();
}

function ifNewtParam(key, val) {
  if (!ifSim) return;
  const v = parseFloat(val);
  if (key === 'R') { ifSim.nR = v; document.getElementById('if-newton-r-val').textContent = v; }
  else if (key === 'nmax') { ifSim.nNmax = Math.round(v); document.getElementById('if-newton-n-val').textContent = Math.round(v); }
  ifSim.draw();
}

function ifThinFilmParam(key, val) {
  if (!ifSim) return;
  const v = parseFloat(val);
  if (key === 't')     { ifSim.tfT = v;     document.getElementById('if-tf-t-val').textContent = v; }
  else if (key === 'n') { ifSim.tfN = v;     document.getElementById('if-tf-n-val').textContent = v.toFixed(2); }
  else if (key === 'theta') { ifSim.tfTheta = v; document.getElementById('if-tf-th-val').textContent = v; }
  ifSim.draw();
}

function ifThinFilmPreset(name) {
  if (!ifSim) return;
  const presets = {
    soap:    { n: 1.33, label: 'Мыльная плёнка' },
    oil:     { n: 1.50, label: 'Масло на воде'  },
    coating: { n: 1.38, label: 'Антибликовое покрытие' },
  };
  const p = presets[name];
  if (!p) return;
  ifSim.tfN = p.n;
  ifSim.tfPreset = name;
  const slN = document.getElementById('sl-if-tf-n');
  if (slN) slN.value = p.n;
  const lbN = document.getElementById('if-tf-n-val');
  if (lbN) lbN.textContent = p.n.toFixed(2);
  ifSim.draw();
  if (window.LabFX) LabFX.sound.play('chime');
}

function ifPolParam(key, val) {
  if (!ifSim) return;
  const v = parseFloat(val);
  if (key === 'theta') { ifSim.polTheta = v; document.getElementById('if-pol-th-val').textContent = v; }
  ifSim.draw();
}

function ifPolSrc(val) {
  if (!ifSim) return;
  ifSim.polSrc = val;
  ifSim.draw();
}

function _obRedraw() {
  if (_obMode === 'lens'       && lensSim)   { lensSim.draw(); }
  if (_obMode === 'mirror'     && mirrorSim)  { mirrorSim.draw(); }
  if (_obMode === 'refraction' && refrSim)    { refrSim.draw(); }
  if (_obMode === 'prism'      && prismSim)   { prismSim.draw(); }
  if (_obMode === 'freebuild'  && benchSim)   { benchSim.draw(); }
  if (_obMode === 'waves'      && diffrSim)   { diffrSim.draw(); diffrSim._updateHUD(); }
  if (_obMode === 'interf'     && ifSim)      { ifSim.draw(); }
  _obDrawSpectrometer();
  // Update prism stats bar
  const el = (id, txt) => { const e = document.getElementById(id); if (e) e.textContent = txt; };
  el('prismbar-wl', (window._obWavelength || 550) + ' нм');
  el('prismbar-mode', window._obWhiteLight ? 'Белый' : 'Моно');
  if (prismSim) el('prismbar-n', prismSim.n0.toFixed(2));
}

/* ── Prism controls ── */
function prismParam(name, val) {
  const v = parseFloat(val);
  const ids = { n0: 'prism-n0-val', incAngle: 'prism-inc-val' };
  const el = document.getElementById(ids[name]);
  if (el) el.textContent = name === 'n0' ? v.toFixed(2) : v;
  if (prismSim) prismSim.setParams({ [name]: v });
}

function prismPreset(n0, incAngle) {
  document.getElementById('sl-prism-n0').value = n0;
  document.getElementById('prism-n0-val').textContent = n0.toFixed(2);
  document.getElementById('sl-prism-inc').value = incAngle;
  document.getElementById('prism-inc-val').textContent = incAngle;
  if (prismSim) prismSim.setParams({ n0, incAngle });
}

function prismToggleWhite(on, btn) {
  window._obWhiteLight = !!on;
  const wb = document.getElementById('ob-prism-white-btn');
  const mb = document.getElementById('ob-prism-mono-btn');
  if (wb) wb.classList.toggle('active', !!on);
  if (mb) mb.classList.toggle('active', !on);
  if (prismSim) prismSim.draw();
  _obDrawSpectrometer();
}

/* ── Thin Lens controls ── */
function lensParam(name, val) {
  const v = parseFloat(val);
  const ids = { f: 'lens-f-val', d: 'lens-d-val', h: 'lens-h-val' };
  const el = document.getElementById(ids[name]);
  if (el) el.textContent = v;
  if (lensSim) lensSim.setParams({ [name]: v });
}

function lensPreset(f, d, h) {
  document.getElementById('sl-lens-f').value = f; document.getElementById('lens-f-val').textContent = f;
  document.getElementById('sl-lens-d').value = d; document.getElementById('lens-d-val').textContent = d;
  document.getElementById('sl-lens-h').value = h; document.getElementById('lens-h-val').textContent = h;
  if (lensSim) lensSim.setParams({ f, d, h });
}

/* ── Lens animated ray + LM controls (Feature 1 & 3) ── */
function lensToggleLM(on) {
  const sliders = document.getElementById('ob-lm-sliders');
  const fRow    = document.querySelector('#ob-ctrl-lens .proj-slider-row');
  if (sliders) sliders.style.display = on ? '' : 'none';
  // hide/show simple f slider
  const fSlRow = document.getElementById('sl-lens-f');
  if (fSlRow && fSlRow.parentElement) fSlRow.parentElement.style.display = on ? 'none' : '';
  if (lensSim) lensSim.setLensMode(!on);
  if (on && lensSim) {
    // sync sliders to current LM params
    const r1 = lensSim._lmR1, r2 = lensSim._lmR2, n = lensSim._lmN;
    const s1 = document.getElementById('sl-lm-r1'), l1 = document.getElementById('lm-r1-val');
    const s2 = document.getElementById('sl-lm-r2'), l2 = document.getElementById('lm-r2-val');
    const sn = document.getElementById('sl-lm-n'),  ln = document.getElementById('lm-n-val');
    if (s1) s1.value = r1; if (l1) l1.textContent = r1.toFixed(0);
    if (s2) s2.value = r2; if (l2) l2.textContent = r2.toFixed(0);
    if (sn) sn.value = n;  if (ln) ln.textContent = n.toFixed(2);
  }
}

function lensLMParam(name, val) {
  const v = parseFloat(val);
  const lblMap = { R1: 'lm-r1-val', R2: 'lm-r2-val', n: 'lm-n-val' };
  const el = document.getElementById(lblMap[name]);
  if (el) el.textContent = name === 'n' ? v.toFixed(2) : v.toFixed(0);
  if (lensSim) {
    lensSim.setLMParam(name, v);
    // update f display
    const fl = document.getElementById('lens-f-val');
    if (fl) fl.textContent = lensSim.f.toFixed(0);
  }
}

/* ── Mirror R-slider + parabolic controls (Feature 2) ── */
function mirrorToggleR(on) {
  const rRow = document.getElementById('ob-mirror-R-row');
  if (rRow) rRow.style.display = on ? '' : 'none';
  const pbtn = document.getElementById('mirror-parab-btn');
  if (pbtn) pbtn.style.display = on ? '' : 'none';
  if (mirrorSim) mirrorSim._useR = !!on;
  if (on && mirrorSim) {
    const sv = document.getElementById('sl-mirror-R');
    const lv = document.getElementById('mirror-R-val');
    if (sv) sv.value = mirrorSim._R;
    if (lv) lv.textContent = mirrorSim._R;
    mirrorSim.setMirrorR(mirrorSim._R);
  } else if (mirrorSim) { mirrorSim.draw(); }
}

function mirrorRParam(val) {
  const v = parseFloat(val);
  const el = document.getElementById('mirror-R-val');
  if (el) el.textContent = v;
  if (mirrorSim) mirrorSim.setMirrorR(v);
}

function mirrorToggleParabolic(btn) {
  if (!mirrorSim) return;
  mirrorSim._parabolic = !mirrorSim._parabolic;
  if (btn) btn.textContent = mirrorSim._parabolic ? 'Параболическое' : 'Сферическое';
  if (btn) btn.style.color = mirrorSim._parabolic ? '#7BF5A4' : '#888';
  mirrorSim.draw();
}

function _lensUpdateUI(info) {
  const v = (id, val) => { const el = document.getElementById(id); if (el) el.textContent = val; };
  v('lensbar-v1', info.f);
  v('lensbar-v2', info.dPrime === Infinity ? '∞' : info.dPrime);
  v('lensbar-v3', info.M === Infinity ? '∞' : info.M);
  v('lensbar-v4', info.imageType);
}

/* ── Mirror controls ── */
function mirrorType(type, el) {
  document.querySelectorAll('.mirror-type-btn').forEach(b => b.classList.remove('active'));
  if (el) el.classList.add('active');
  const fRow = document.getElementById('mirror-f-row');
  if (fRow) fRow.style.display = type === 'flat' ? 'none' : 'flex';
  if (mirrorSim) mirrorSim.setType(type);
  const pb = document.getElementById('mirror-play-btn');
  if (pb) { pb.textContent = 'Анимация'; }
  const sl = document.getElementById('sl-mirror-d');
  if (sl) sl.disabled = false;
}

function mirrorParam(name, val) {
  const v = parseFloat(val);
  const ids = { f: 'mirror-f-val', d: 'mirror-d-val', h: 'mirror-h-val' };
  const el = document.getElementById(ids[name]);
  if (el) el.textContent = v;
  if (mirrorSim) mirrorSim.setParams({ [name]: v });
}

function mirrorPreset(name) {
  const P = {
    flat:    { type: 'flat',    f: 120, d: 200, h: 60 },
    far:     { type: 'concave', f: 100, d: 280, h: 60 },
    '2f':    { type: 'concave', f: 100, d: 200, h: 60 },
    between: { type: 'concave', f: 100, d: 140, h: 60 },
    near:    { type: 'concave', f: 100, d: 60,  h: 60 },
    convex:  { type: 'convex',  f: 100, d: 200, h: 60 },
  };
  const p = P[name]; if (!p) return;
  document.querySelectorAll('.mirror-type-btn').forEach(b => b.classList.remove('active'));
  const tb = document.getElementById('mtype-' + p.type);
  if (tb) tb.classList.add('active');
  const fRow = document.getElementById('mirror-f-row');
  if (fRow) fRow.style.display = p.type === 'flat' ? 'none' : 'flex';
  document.getElementById('sl-mirror-f').value = p.f; document.getElementById('mirror-f-val').textContent = p.f;
  document.getElementById('sl-mirror-d').value = p.d; document.getElementById('mirror-d-val').textContent = p.d;
  document.getElementById('sl-mirror-h').value = p.h; document.getElementById('mirror-h-val').textContent = p.h;
  if (mirrorSim) { mirrorSim.setType(p.type); mirrorSim.setParams({ f: p.f, d: p.d, h: p.h }); }
}

function mirrorTogglePlay(btn) {
  if (!mirrorSim) return;
  mirrorSim.togglePlay();
  const playing = mirrorSim._playing;
  if (btn) btn.textContent = playing ? 'Стоп' : 'Анимация';
  const sl = document.getElementById('sl-mirror-d');
  if (sl) sl.disabled = playing;
}

function mirrorSetSpeed(val)     { if (mirrorSim) mirrorSim.setAnimSpeed(parseFloat(val)); }
function mirrorToggle(name, val) { if (mirrorSim) mirrorSim.setToggle(name, val); }
function mirrorStepNext()        { if (mirrorSim) mirrorSim.stepNext(); }
function mirrorStepReset()       { if (mirrorSim) mirrorSim.stepReset(); }
function mirrorSetPointMode(val) { if (mirrorSim) mirrorSim.setPointMode(val); }

function _mirrorUpdateUI(info) {
  const v = (id, val) => { const el = document.getElementById(id); if (el) el.textContent = val; };
  v('mirrorbar-v1', info.f);
  v('mirrorbar-v5', Math.round(info.d));
  v('mirrorbar-v2', info.dPrime === Infinity ? '∞' : info.dPrime);
  v('mirrorbar-v3', info.M === Infinity ? '∞' : info.M);
  v('mirrorbar-v4', info.imageType);
}

/* ── Refraction controls ── */
function refrParam(name, val) {
  const v = parseFloat(val);
  const ids = { n1: 'refr-n1-val', n2: 'refr-n2-val', angle: 'refr-angle-val' };
  const el = document.getElementById(ids[name]);
  if (el) el.textContent = name === 'angle' ? v : v.toFixed(2);
  if (refrSim) refrSim.setParams({ [name]: v });
}

function refrPreset(n1, n2, angle) {
  document.getElementById('sl-refr-n1').value = n1; document.getElementById('refr-n1-val').textContent = n1.toFixed(2);
  document.getElementById('sl-refr-n2').value = n2; document.getElementById('refr-n2-val').textContent = n2.toFixed(2);
  document.getElementById('sl-refr-angle').value = angle; document.getElementById('refr-angle-val').textContent = angle;
  if (refrSim) refrSim.setParams({ n1, n2, angle });
}

function _refrUpdateUI(info) {
  const v = (id, val) => { const el = document.getElementById(id); if (el) el.textContent = val; };
  v('refrbar-v1', info.angle1 + '°');
  v('refrbar-v2', info.isTIR ? 'ПВО' : info.angle2 + '°');
  v('refrbar-v3', info.criticalAngle !== null ? info.criticalAngle + '°' : '—');
  v('refrbar-v4', info.isTIR ? 'Да' : 'Нет');
}

/* ── dispersion toggle ── */
function refrDispersion(on) {
  if (refrSim) refrSim.setParams({ dispersion: on });
}

/* ─────────────────────────────────────────────────────────────
   5.  PRE-BUILT INSTRUMENT SCENES  (obLoadPreset / OB_PRESETS)
───────────────────────────────────────────────────────────────*/

/* Each preset: { label, desc, mode, build(sim) }
   build() receives the already-initialised sim object for the target mode.
   Supported modes: 'lens' | 'mirror' | 'refraction' */
var OB_PRESETS = {

  /* ── 1. Лупа ─────────────────────────────────────────────── */
  magnifier: {
    label: 'Лупа',
    desc:  'Объект ближе фокуса (d < f). Мнимое увеличенное прямое изображение.',
    mode:  'lens',
    build: function(sim) {
      sim.setParams({ f: 50, d: 30, h: 50 });
      _obSyncLensUI(50, 30, 50);
    }
  },

  /* ── 2. Микроскоп ─────────────────────────────────────────── */
  microscope: {
    label: 'Микроскоп',
    desc:  'Объектив f = 10, предмет чуть дальше F. Действительное изображение увеличено.',
    mode:  'lens',
    build: function(sim) {
      /* Show the objective stage: object just outside F of objective */
      sim.setParams({ f: 10, d: 14, h: 30 });
      _obSyncLensUI(10, 14, 30);
    }
  },

  /* ── 3. Телескоп Кеплера ──────────────────────────────────── */
  keplerian: {
    label: 'Телескоп Кеплера',
    desc:  'Две собирающие линзы конфокально (fуб = 200, fок = 30). Объект на ∞.',
    mode:  'lens',
    build: function(sim) {
      /* Show the eyepiece stage receiving collimated light: f_ok = 30,
         "parallel-ray" object simulated by placing d very large (390 max) */
      sim.setParams({ f: 30, d: 390, h: 55 });
      _obSyncLensUI(30, 390, 55);
    }
  },

  /* ── 4. Телескоп Галилея ──────────────────────────────────── */
  galilean: {
    label: 'Телескоп Галилея',
    desc:  'Собирающий объектив f = 200 + рассеивающий окуляр f = −40. Прямое изображение.',
    mode:  'lens',
    build: function(sim) {
      /* Diverging eyepiece: f = -40, object at 390 (parallel rays) */
      sim.setParams({ f: -40, d: 390, h: 55 });
      _obSyncLensUI(-40, 390, 55);
    }
  },

  /* ── 5. Камера / Глаз ─────────────────────────────────────── */
  camera: {
    label: 'Камера / Глаз',
    desc:  'Линза f = 40, предмет d = 120. Действительное уменьшенное изображение на матрице.',
    mode:  'lens',
    build: function(sim) {
      sim.setParams({ f: 40, d: 120, h: 60 });
      _obSyncLensUI(40, 120, 60);
    }
  },

  /* ── 6. Перископ ─────────────────────────────────────────────
     Uses MirrorSim with flat mirror to show 45° reflection concept.
     A true two-mirror periscope can't be drawn in the single-mirror
     engine, so we show one flat mirror at 45° (flat type, d large). */
  periscope: {
    label: 'Перископ',
    desc:  'Плоское зеркало под 45°. Луч отражается под прямым углом.',
    mode:  'mirror',
    build: function(sim) {
      sim.setType('flat');
      sim.setParams({ d: 300, h: 60 });
      _obSyncMirrorUI('flat', 120, 300, 60);
    }
  },

  /* ── 7. Слайд-проектор ─────────────────────────────────────── */
  projector: {
    label: 'Слайд-проектор',
    desc:  'Объектив f = 80, слайд d = 100 (чуть дальше F). Действительное увеличенное изображение.',
    mode:  'lens',
    build: function(sim) {
      sim.setParams({ f: 80, d: 100, h: 40 });
      _obSyncLensUI(80, 100, 40);
    }
  },

  /* ── 8. Световод (ПВО) ──────────────────────────────────────
     Shows TIR inside a dense medium (n2 > n1).
     Use refraction mode: n1=1.5 (glass), n2=1.0 (air), angle > critical. */
  fiber: {
    label: 'Световод (ПВО)',
    desc:  'Стекло n = 1.5 → воздух n = 1. Угол > критического — полное внутреннее отражение.',
    mode:  'refraction',
    build: function(sim) {
      /* critical angle = arcsin(1/1.5) ≈ 41.8°; use 50° to clearly show TIR */
      sim.setParams({ n1: 1.5, n2: 1.0, angle: 50, dispersion: false });
      _obSyncRefrUI(1.5, 1.0, 50);
    }
  },

  /* ── 9. Ложка в воде ────────────────────────────────────────
     Shows apparent-depth illusion: light from object in water (n=1.33)
     refracts at boundary going into air. Observer sees virtual image. */
  spoon: {
    label: 'Ложка в воде',
    desc:  'Свет от предмета в воде (n = 1.33) преломляется в воздух. Мнимое изображение кажется ближе.',
    mode:  'refraction',
    build: function(sim) {
      sim.setParams({ n1: 1.33, n2: 1.0, angle: 30, dispersion: false });
      _obSyncRefrUI(1.33, 1.0, 30);
    }
  }
};

/* ── UI sync helpers (keep sliders in sync after preset load) ── */
function _obSyncLensUI(f, d, h) {
  var sl;
  sl = document.getElementById('sl-lens-f'); if (sl) sl.value = f;
  sl = document.getElementById('sl-lens-d'); if (sl) sl.value = d;
  sl = document.getElementById('sl-lens-h'); if (sl) sl.value = h;
  var el;
  el = document.getElementById('lens-f-val'); if (el) el.textContent = f;
  el = document.getElementById('lens-d-val'); if (el) el.textContent = d;
  el = document.getElementById('lens-h-val'); if (el) el.textContent = h;
}

function _obSyncMirrorUI(type, f, d, h) {
  document.querySelectorAll('.mirror-type-btn').forEach(function(b) { b.classList.remove('active'); });
  var tb = document.getElementById('mtype-' + type);
  if (tb) tb.classList.add('active');
  var fRow = document.getElementById('mirror-f-row');
  if (fRow) fRow.style.display = type === 'flat' ? 'none' : 'flex';
  var sl;
  sl = document.getElementById('sl-mirror-f'); if (sl) sl.value = f;
  sl = document.getElementById('sl-mirror-d'); if (sl) sl.value = d;
  sl = document.getElementById('sl-mirror-h'); if (sl) sl.value = h;
  var el;
  el = document.getElementById('mirror-f-val'); if (el) el.textContent = f;
  el = document.getElementById('mirror-d-val'); if (el) el.textContent = d;
  el = document.getElementById('mirror-h-val'); if (el) el.textContent = h;
}

function _obSyncRefrUI(n1, n2, angle) {
  var sl;
  sl = document.getElementById('sl-refr-n1');    if (sl) sl.value = n1;
  sl = document.getElementById('sl-refr-n2');    if (sl) sl.value = n2;
  sl = document.getElementById('sl-refr-angle'); if (sl) sl.value = angle;
  var el;
  el = document.getElementById('refr-n1-val');    if (el) el.textContent = n1.toFixed(2);
  el = document.getElementById('refr-n2-val');    if (el) el.textContent = n2.toFixed(2);
  el = document.getElementById('refr-angle-val'); if (el) el.textContent = angle;
}

/* ── HUD toast shown for 5 s after preset load ── */
function _obShowPresetHUD(label, desc) {
  var existing = document.getElementById('ob-preset-hud');
  if (existing) existing.remove();

  var hud = document.createElement('div');
  hud.id = 'ob-preset-hud';
  hud.style.cssText = [
    'position:absolute', 'top:10px', 'left:50%', 'transform:translateX(-50%)',
    'background:rgba(18,18,30,.92)', 'border:1px solid rgba(100,220,255,.35)',
    'border-radius:10px', 'padding:8px 16px', 'z-index:99',
    'pointer-events:none', 'text-align:center',
    'box-shadow:0 4px 20px rgba(0,0,0,.5)',
    'transition:opacity .4s'
  ].join(';');
  hud.innerHTML = '<div style="font-size:.85rem;font-weight:700;color:var(--cyan,#67e8f9);margin-bottom:2px">' +
    label + '</div>' +
    '<div style="font-size:.73rem;color:#aaa;max-width:320px;line-height:1.35">' + desc + '</div>';

  /* Attach to the canvas wrapper so it overlays correctly */
  var wrap = document.querySelector('#sim-opticsbench .proj-canvas-outer');
  if (wrap) { wrap.style.position = 'relative'; wrap.appendChild(hud); }

  /* Fade out after 5 s */
  var timer = setTimeout(function() {
    hud.style.opacity = '0';
    setTimeout(function() { if (hud.parentNode) hud.remove(); }, 420);
  }, 5000);
  hud._timer = timer;
}

/* ── Main entry point called from HTML buttons ── */
function obLoadPreset(name) {
  var preset = OB_PRESETS[name];
  if (!preset) return;

  /* Switch to the correct mode first, then build */
  obSwitchMode(preset.mode, true);

  /* Give the canvas time to initialise if it was just created */
  requestAnimationFrame(function() {
    var sim = preset.mode === 'lens'       ? lensSim
            : preset.mode === 'mirror'     ? mirrorSim
            : preset.mode === 'refraction' ? refrSim
            : null;
    if (!sim) return;
    preset.build(sim);

    /* Sound */
    if (window.LabFX) LabFX.sound.play('chime');

    /* Tab highlight */
    ['lens', 'mirror', 'refraction'].forEach(function(m) {
      var btn = document.getElementById('ob-tab-' + m);
      if (btn) btn.classList.toggle('active', m === preset.mode);
    });

    /* HUD */
    _obShowPresetHUD(preset.label, preset.desc);

    /* Highlight the active preset chip */
    document.querySelectorAll('.ob-preset-chip').forEach(function(c) {
      c.classList.toggle('active', c.dataset.preset === name);
    });
  });
}

/* ── Clear: reset current mode to defaults ── */
function obClearPreset() {
  /* Deactivate all chips */
  document.querySelectorAll('.ob-preset-chip').forEach(function(c) {
    c.classList.remove('active');
  });
  /* Remove HUD if visible */
  var hud = document.getElementById('ob-preset-hud');
  if (hud) hud.remove();
  /* Reset active sim */
  if (_obMode === 'lens'       && lensSim)   lensSim.reset();
  if (_obMode === 'mirror'     && mirrorSim) { mirrorSim.setType('concave'); mirrorSim.reset(); }
  if (_obMode === 'refraction' && refrSim)   refrSim.reset();
  /* Re-sync UI sliders to defaults */
  if (_obMode === 'lens')       _obSyncLensUI(100, 200, 50);
  if (_obMode === 'mirror')     _obSyncMirrorUI('concave', 120, 240, 60);
  if (_obMode === 'refraction') _obSyncRefrUI(1.0, 1.5, 30);
  if (window.LabFX) LabFX.sound.play('whoosh', { pitch: 0.9, volume: 0.25 });
}

/* ── Aberration toggles for ThinLensSim (Agent OB-A3) ── */
function lensAberration(type, on) {
  if (lensSim) lensSim.setAberration(type, on);
}

/* ── Mirror spherical aberration toggle (Agent OB-A3) ── */
function mirrorAberration(on) {
  if (mirrorSim) mirrorSim.setToggle('spherical', on);
}

/* ── Free-build multi-lens controls (Agent OB-A3) ── */
function freeAddLens() {
  if (freeSim) freeSim.addLens(100);
}
function freeRemoveLens() {
  if (freeSim) freeSim.removeLens();
}
function freeLensF(idx, val) {
  const v = parseFloat(val);
  const el = document.getElementById('free-lens' + idx + '-fval');
  if (el) el.textContent = v;
  if (freeSim) freeSim.setLensF(idx, v);
}
function freePreset(name) {
  const presets = {
    microscope:  { els: [{ x_frac: 0.30, f: 40 }, { x_frac: 0.70, f: 80 }], obj: 0.10 },
    telescope:   { els: [{ x_frac: 0.25, f: 160 }, { x_frac: 0.78, f: 50 }], obj: 0.05 },
    relay:       { els: [{ x_frac: 0.28, f: 100 }, { x_frac: 0.55, f: 100 }, { x_frac: 0.80, f: 100 }], obj: 0.08 },
  };
  const p = presets[name];
  if (!p || !freeSim) return;
  freeSim.elements = p.els.map((e, i) => ({ ...e, id: i + 1 }));
  freeSim.objFrac  = p.obj;
  freeSim.draw();
  if (freeSim.onUpdate) freeSim.onUpdate(freeSim._computeChain());
}
function _freeUpdateUI(chain) {
  const el = document.getElementById('freebar-mag');
  if (el) el.textContent = isFinite(chain.totalM) ? chain.totalM.toFixed(3) : '∞';
  const el2 = document.getElementById('freebar-sys');
  if (el2) el2.textContent = chain.sysFocal !== null ? chain.sysFocal.toFixed(0) : '—';
}

/* ── Optical bench constructor (BenchSim) UI ── */
function _benchElName(e) {
  if (e.type === 'lens')      return (e.f >= 0 ? 'Линза +' : 'Линза −') + Math.abs(e.f).toFixed(0);
  if (e.type === 'mirror')    return 'Зеркало ' + ({ plane: 'плоск', concave: 'вогн', convex: 'выпукл' }[e.kind] || '');
  if (e.type === 'aperture')  return 'Диафрагма';
  if (e.type === 'screen')    return 'Экран';
  if (e.type === 'prism')     return 'Призма';
  if (e.type === 'interface') return 'Граница сред';
  if (e.type === 'slab')      return 'Пластина';
  return e.type;
}
// Labelled slider with a live numeric value (no panel rebuild → drag stays smooth).
function _benchCtl(label, id, key, min, max, step, val, isSource) {
  const vid = 'bv_' + (isSource ? 's' : id) + '_' + key;
  const call = isSource ? "benchSourceParam('" + key + "',this.value)" : "benchUpdate(" + id + ",'" + key + "',this.value)";
  return '<div class="proj-slider-row" style="margin-bottom:6px">' +
    '<label style="font-size:.72rem;color:#ccc;width:104px">' + label + ' <b id="' + vid + '" style="color:var(--cyan)">' + val + '</b></label>' +
    '<input type="range" min="' + min + '" max="' + max + '" step="' + step + '" value="' + val +
    '" oninput="' + call + ';var b=document.getElementById(\'' + vid + '\');if(b)b.textContent=this.value" style="flex:1"></div>';
}
function _benchBtnRow(opts, isActive, onClick) {
  return '<div style="display:flex;flex-wrap:wrap;gap:3px;margin-bottom:6px">' +
    opts.map(o => { const [k, lbl] = o.split(':');
      return '<button class="preset-btn' + (isActive(k) ? ' active' : '') + '" style="flex:1;font-size:.66rem" onclick="' + onClick(k) + '">' + lbl + '</button>';
    }).join('') + '</div>';
}
function _benchPropsHTML() {
  if (!benchSim) return '';
  if (benchSim.selectedId === '__src') {
    const s = benchSim.source;
    let h = '<div class="gp-section-title" style="margin:4px 0 6px">Источник</div>';
    h += _benchBtnRow(['object:Предмет', 'point:Точка', 'parallel:Параллель', 'single:Луч', 'laser:Лазер'],
      k => s.kind === k, k => "benchSourceKind('" + k + "')");
    h += _benchCtl('Положение ↕', 0, 'yf', -0.9, 0.9, 0.02, +(s.yf || 0).toFixed(2), true);  // vertical position (any kind)
    if (s.kind === 'object') {
      h += _benchCtl('Размер стрелки', 0, 'h', 20, 120, 2, s.h, true);
      // ray mode: textbook characteristic rays vs physical bundle
      h += _benchBtnRow(['char:Характ. лучи', 'bundle:Пучок'],
        k => (s.rayMode || 'char') === k, k => "benchSourceParam('rayMode','" + k + "');_benchUpdateUI()");
      if ((s.rayMode || 'char') === 'bundle') {
        h += _benchCtl('Лучей', 0, 'rays', 3, 15, 1, s.rays, true);
        h += _benchCtl('Раствор', 0, 'spread', 0.1, 0.6, 0.02, s.spread, true);
      } else {
        h += '<div class="pp-hint">2–3 характеристических луча от вершины + осевой от основания (как в учебнике).</div>';
      }
    }
    if (s.kind === 'point') h += _benchCtl('Раствор', 0, 'spread', 0.1, 0.6, 0.02, s.spread, true);
    if (s.kind !== 'object') h += _benchCtl('Угол°', 0, 'ang', -60, 60, 1, s.ang || 0, true);
    return h;
  }
  const e = benchSim.getSelected();
  if (!e) return '<div class="pp-hint">Выберите элемент или источник (клик по схеме)</div>';
  let h = '<div class="gp-section-title" style="margin:4px 0 6px">' + _benchElName(e) + '</div>';
  if (e.type === 'lens') {
    h += _benchCtl('f, px', e.id, 'f', -300, 300, 5, e.f);
    h += _benchCtl('Апертура', e.id, 'ap', 30, 130, 5, e.ap);
  } else if (e.type === 'mirror') {
    h += _benchBtnRow(['plane:Плоск', 'concave:Вогн', 'convex:Выпукл'],
      k => e.kind === k, k => "benchUpdate(" + e.id + ",'kind','" + k + "');_benchUpdateUI()");
    if (e.kind !== 'plane') h += _benchCtl('R, px', e.id, 'R', 100, 600, 10, e.R);
    h += _benchCtl('Апертура', e.id, 'ap', 30, 130, 5, e.ap);
  } else if (e.type === 'aperture') {
    h += _benchCtl('Зазор', e.id, 'gap', 5, 110, 2, e.gap);
  } else if (e.type === 'prism') {
    h += _benchCtl('Угол', e.id, 'apex', 20, 70, 1, e.apex);
    h += _benchCtl('n', e.id, 'n', 1.3, 1.9, 0.01, e.n);
    h += _benchCtl('Размер', e.id, 'size', 50, 130, 5, e.size);
  } else if (e.type === 'interface') {
    h += _benchCtl('n слева', e.id, 'n1', 1.0, 2.4, 0.01, e.n1);
    h += _benchCtl('n справа', e.id, 'n2', 1.0, 2.4, 0.01, e.n2);
  } else if (e.type === 'slab') {
    h += _benchCtl('n', e.id, 'n', 1.1, 2.0, 0.01, e.n);
    h += _benchCtl('Толщина', e.id, 't', 20, 140, 5, e.t);
  } else if (e.type === 'screen') {
    h += '<div class="pp-hint">Экран ловит изображение.</div>';
  }
  h += '<button class="preset-btn" style="width:100%;margin-top:6px;color:#EF476F" onclick="benchRemove(' + e.id + ')">Удалить элемент</button>';
  return h;
}
function _benchUpdateUI() {
  if (!benchSim) return;
  const listEl = document.getElementById('bench-list');
  if (listEl) {
    // permanent "Источник" chip so the source is always selectable (not only via canvas)
    const srcChip = '<button class="preset-btn' + (benchSim.selectedId === '__src' ? ' active' : '') +
      '" style="font-size:.68rem" onclick="benchSelect(\'__src\')">Источник</button>';
    listEl.innerHTML = srcChip + benchSim.elements.map(e =>
      '<button class="preset-btn' + (e.id === benchSim.selectedId ? ' active' : '') +
      '" style="font-size:.68rem" onclick="benchSelect(' + e.id + ')">' + _benchElName(e) + '</button>'
    ).join('');
  }
  const propsEl = document.getElementById('bench-props');
  if (propsEl) propsEl.innerHTML = _benchPropsHTML();
}
function benchAdd(type)        { if (benchSim) { benchSim.addElement(type); _benchUpdateUI(); } }
function benchRemove(id)       { if (benchSim) { benchSim.removeElement(id); _benchUpdateUI(); } }
function benchSelect(id)       { if (benchSim) { benchSim.selectElement(id); _benchUpdateUI(); } }
function benchUpdate(id, k, v) { if (benchSim) benchSim.updateElement(id, k, v); }
function benchSourceKind(k)    { if (benchSim) { benchSim.setSource('kind', k); _benchUpdateUI(); } }
function benchSourceParam(k, v){ if (benchSim) benchSim.setSource(k, v); }
function benchClear() {
  if (!benchSim) return;
  benchSim.elements = []; benchSim.selectedId = null; benchSim._changed(); _benchUpdateUI();
}
function benchExportPng() {
  if (!benchSim) return;
  const url = benchSim.exportPng();
  if (!url) return;
  const a = document.createElement('a');
  a.href = url; a.download = 'optical-bench.png';
  document.body.appendChild(a); a.click(); document.body.removeChild(a);
}
function benchPreset(name) {
  if (!benchSim) return;
  const P = {
    microscope: { source: { kind: 'object', xf: 0.06, h: 40, spread: 0.32, rays: 9 },
      elements: [{ type: 'lens', xf: 0.30, f: 45, ap: 90 }, { type: 'lens', xf: 0.66, f: 90, ap: 95 }, { type: 'screen', xf: 0.92 }] },
    telescope:  { source: { kind: 'parallel', xf: 0.05, h: 0, spread: 0.2, rays: 9 },
      elements: [{ type: 'lens', xf: 0.28, f: 200, ap: 95 }, { type: 'lens', xf: 0.74, f: 60, ap: 80 }] },
    projector:  { source: { kind: 'object', xf: 0.10, h: 80, spread: 0.34, rays: 9 },
      elements: [{ type: 'lens', xf: 0.40, f: 120, ap: 100 }, { type: 'screen', xf: 0.92 }] },
    folded:     { source: { kind: 'object', xf: 0.08, h: 60, spread: 0.3, rays: 9 },
      elements: [{ type: 'lens', xf: 0.34, f: 150, ap: 90 }, { type: 'mirror', xf: 0.82, kind: 'concave', R: 320, ap: 100 }, { type: 'screen', xf: 0.50 }] },
  };
  const p = P[name]; if (!p) return;
  let id = 1;
  benchSim.source = { ...p.source };
  benchSim.elements = p.elements.map(e => ({ id: id++, ...e }));
  benchSim._nextId = id;
  benchSim.selectedId = null;
  benchSim._changed();
  _benchUpdateUI();
}

/* ─────────────────────────────────────────────────────────────
   6.  DIFFRACTION SIM — Волновая оптика (Юнг / Однощелевая / Решётка)
───────────────────────────────────────────────────────────────*/

/**
 * DiffractionSim — handles 3 wave-optics sub-experiments on a single canvas.
 * Sub-modes:
 *   'young'   — Young double-slit interference
 *   'single'  — Single-slit diffraction
 *   'grating' — Diffraction grating (N slits)
 */
class DiffractionSim {
  constructor(canvas) {
    this._cv  = canvas;
    this._ctx = canvas.getContext('2d');
    this._sub = 'young';   // active sub-experiment
    this._raf = null;

    /* Young params */
    this._d_young  = 40;   // slit separation µm
    this._L_young  = 1.0;  // screen distance m

    /* Single-slit params */
    this._a_single = 80;   // slit width µm

    /* Grating params */
    this._N_grating = 10;  // number of slits
    this._d_grating = 2.0; // grating period µm
    this._a_grating = 0.5; // slit width µm (for envelope)

    this.fit();
  }

  fit() {
    const cv = this._cv;
    const pr = window.devicePixelRatio || 1;
    const w  = cv.offsetWidth  || 700;
    const h  = cv.offsetHeight || 380;
    cv.width  = Math.round(w * pr);
    cv.height = Math.round(h * pr);
    this._ctx.setTransform(pr, 0, 0, pr, 0, 0);
    this._W = w;
    this._H = h;
  }

  setSub(sub) {
    this._sub = sub;
    this.draw();
  }

  /* ── public setters called from HTML controls ── */
  setParam(name, val) {
    const v = parseFloat(val);
    if (name === 'd_young')   this._d_young   = v;
    if (name === 'L_young')   this._L_young   = v;
    if (name === 'a_single')  this._a_single  = v;
    if (name === 'N_grating') this._N_grating = Math.round(v);
    if (name === 'd_grating') this._d_grating = v;
    if (name === 'a_grating') this._a_grating = v;
    this.draw();
    this._updateHUD();
  }

  /* ── main draw dispatcher ── */
  draw() {
    const ctx = this._ctx;
    const W = this._W, H = this._H;
    ctx.clearRect(0, 0, W, H);

    /* dark background */
    ctx.fillStyle = '#0a0a16';
    ctx.fillRect(0, 0, W, H);

    if (this._sub === 'young')   this._drawYoung();
    else if (this._sub === 'single') this._drawSingle();
    else if (this._sub === 'grating') this._drawGrating();
  }

  /* ─────────────────────────────────────────────
     Young double-slit
  ─────────────────────────────────────────────── */
  _drawYoung() {
    const ctx = this._ctx;
    const W = this._W, H = this._H;
    const λ_nm = window._obWavelength || 550;
    const λ    = λ_nm * 1e-9;           // m
    const d    = this._d_young  * 1e-6; // m
    const L    = this._L_young;         // m
    const wl   = window._obWhiteLight;

    /* layout */
    const slitX  = Math.round(W * 0.22);
    const screenX = Math.round(W * 0.75);
    const graphH  = Math.round(H * 0.26);
    const simH    = H - graphH - 1;
    const cy      = Math.round(simH / 2);

    /* source (left) */
    this._drawSource(slitX - Math.round(W * 0.15), cy);

    /* draw incoming beam */
    ctx.save();
    ctx.strokeStyle = wl ? 'rgba(255,255,220,0.35)' : this._wlColor(λ_nm, 0.35);
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.moveTo(0, cy);
    ctx.lineTo(slitX - 2, cy);
    ctx.stroke();
    ctx.restore();

    /* slit barrier */
    const slitGapPx = 18; // visual gap per slit
    const sepPx = Math.round(Math.max(12, Math.min(60, this._d_young * 0.8)));
    this._drawSlitBarrier(slitX, cy, simH, sepPx, slitGapPx, 2);

    /* wavefronts from two slits */
    const slit1Y = cy - sepPx / 2;
    const slit2Y = cy + sepPx / 2;
    this._drawWavefronts(slitX, slit1Y, slitX, slit2Y, screenX - slitX, λ_nm, wl, simH);

    /* intensity screen */
    const screenPoints = this._youngIntensity(λ, d, L, W, simH);
    this._drawScreen(screenX, simH, screenPoints, λ_nm, wl);

    /* graph */
    this._drawGraph(0, simH, W, graphH, screenPoints, λ_nm, wl);

    /* fringe spacing label */
    const dy_mm = (λ * L / d * 1e3).toFixed(2);
    this._drawHUDLine(ctx, W, H, `Δy = λL/d = ${dy_mm} мм`);

    /* axis labels */
    this._drawLabel(ctx, slitX, simH - 10, 'Щели');
    this._drawLabel(ctx, screenX, simH - 10, 'Экран');
  }

  _youngIntensity(λ, d, L, W, simH) {
    const N = 300;
    const halfH = simH * 0.46;
    const pts = [];
    for (let i = 0; i <= N; i++) {
      const y_px = (i / N) * simH - simH / 2; // px, centred
      const y_m  = y_px / (simH / 2) * 0.05;  // map ±simH/2 → ±50mm
      const sinT = y_m / Math.sqrt(y_m * y_m + L * L);
      const phi  = Math.PI * d * sinT / λ;
      const I    = Math.cos(phi) * Math.cos(phi);
      pts.push({ y_px, I });
    }
    return pts;
  }

  /* ─────────────────────────────────────────────
     Single-slit diffraction
  ─────────────────────────────────────────────── */
  _drawSingle() {
    const ctx = this._ctx;
    const W = this._W, H = this._H;
    const λ_nm = window._obWavelength || 550;
    const λ    = λ_nm * 1e-9;
    const a    = this._a_single * 1e-6;
    const L    = 1.0; // fixed 1 m
    const wl   = window._obWhiteLight;

    const slitX  = Math.round(W * 0.22);
    const screenX = Math.round(W * 0.75);
    const graphH  = Math.round(H * 0.26);
    const simH    = H - graphH - 1;
    const cy      = Math.round(simH / 2);
    const slitGapPx = Math.round(Math.max(6, Math.min(30, this._a_single * 0.18)));

    this._drawSource(slitX - Math.round(W * 0.15), cy);

    ctx.save();
    ctx.strokeStyle = wl ? 'rgba(255,255,220,0.35)' : this._wlColor(λ_nm, 0.35);
    ctx.lineWidth = 2;
    ctx.beginPath(); ctx.moveTo(0, cy); ctx.lineTo(slitX - 2, cy); ctx.stroke();
    ctx.restore();

    /* single slit barrier */
    this._drawSingleSlitBarrier(slitX, cy, simH, slitGapPx);

    /* wavefronts — single source */
    this._drawWavefronts(slitX, cy, slitX, cy, screenX - slitX, λ_nm, wl, simH);

    const screenPoints = this._singleIntensity(λ, a, L, simH);
    this._drawScreen(screenX, simH, screenPoints, λ_nm, wl);
    this._drawGraph(0, simH, W, graphH, screenPoints, λ_nm, wl);

    /* angular width of central maximum */
    const ang_rad  = (2 * λ / a);
    const ang_deg  = (ang_rad * 180 / Math.PI).toFixed(2);
    this._drawHUDLine(ctx, W, H, `Центр. макс: 2λ/a = ${ang_deg}°`);

    this._drawLabel(ctx, slitX, simH - 10, 'Щель');
    this._drawLabel(ctx, screenX, simH - 10, 'Экран');
  }

  _singleIntensity(λ, a, L, simH) {
    const N = 300;
    const pts = [];
    for (let i = 0; i <= N; i++) {
      const y_px = (i / N) * simH - simH / 2;
      const y_m  = y_px / (simH / 2) * 0.05;
      const sinT = y_m / Math.sqrt(y_m * y_m + L * L);
      const alpha = Math.PI * a * sinT / λ;
      const I = alpha === 0 ? 1 : Math.pow(Math.sin(alpha) / alpha, 2);
      pts.push({ y_px, I });
    }
    return pts;
  }

  /* ─────────────────────────────────────────────
     Diffraction grating
  ─────────────────────────────────────────────── */
  _drawGrating() {
    const ctx = this._ctx;
    const W = this._W, H = this._H;
    const λ_nm = window._obWavelength || 550;
    const λ    = λ_nm * 1e-9;
    const d    = this._d_grating * 1e-6;
    const a    = this._a_grating * 1e-6;
    const N    = this._N_grating;
    const L    = 1.0;
    const wl   = window._obWhiteLight;

    const slitX  = Math.round(W * 0.22);
    const screenX = Math.round(W * 0.75);
    const graphH  = Math.round(H * 0.26);
    const simH    = H - graphH - 1;
    const cy      = Math.round(simH / 2);

    this._drawSource(slitX - Math.round(W * 0.15), cy);

    ctx.save();
    ctx.strokeStyle = wl ? 'rgba(255,255,220,0.35)' : this._wlColor(λ_nm, 0.35);
    ctx.lineWidth = 2;
    ctx.beginPath(); ctx.moveTo(0, cy); ctx.lineTo(slitX - 2, cy); ctx.stroke();
    ctx.restore();

    /* grating barrier — multiple slits */
    this._drawGratingBarrier(slitX, cy, simH, N);

    const screenPoints = wl
      ? this._gratingIntensityWhite(d, a, N, L, simH)
      : this._gratingIntensity(λ, d, a, N, L, simH, λ_nm);

    this._drawScreen(screenX, simH, screenPoints, λ_nm, wl);
    this._drawGraph(0, simH, W, graphH, screenPoints, λ_nm, wl);

    /* order labels on screen */
    this._drawGratingOrders(ctx, screenX, cy, d, λ, L, simH);

    /* resolving power at order 1 */
    const R = N * 1;
    this._drawHUDLine(ctx, W, H, `R = Nn = ${R} (порядок 1)  d·sinθ = nλ`);

    this._drawLabel(ctx, slitX, simH - 10, 'Решётка');
    this._drawLabel(ctx, screenX, simH - 10, 'Экран');
  }

  _gratingIntensity(λ, d, a, N, L, simH, λ_nm) {
    const pts = [];
    for (let i = 0; i <= 300; i++) {
      const y_px = (i / 300) * simH - simH / 2;
      const y_m  = y_px / (simH / 2) * 0.05;
      const sinT = y_m / Math.sqrt(y_m * y_m + L * L);
      /* multi-slit principal maxima */
      const psi  = Math.PI * d * sinT / λ;
      const Imulti = psi === 0 ? 1 : Math.pow(Math.sin(N * psi) / (N * Math.sin(psi)), 2);
      /* single-slit envelope */
      const alpha  = Math.PI * a * sinT / λ;
      const Ienv   = alpha === 0 ? 1 : Math.pow(Math.sin(alpha) / alpha, 2);
      const I = Imulti * Ienv;
      pts.push({ y_px, I, color: this._wlColor(λ_nm, I) });
    }
    return pts;
  }

  _gratingIntensityWhite(d, a, N, L, simH) {
    /* Combine 7 wavelengths for white-light display */
    const wls = [400, 450, 490, 530, 570, 620, 680];
    const pts = [];
    for (let i = 0; i <= 300; i++) {
      const y_px = (i / 300) * simH - simH / 2;
      const y_m  = y_px / (simH / 2) * 0.05;
      const sinT = y_m / Math.sqrt(y_m * y_m + L * L);
      /* blend colors from all wavelengths */
      let r = 0, g = 0, b = 0, maxI = 0;
      wls.forEach(nm => {
        const λ_w = nm * 1e-9;
        const psi = Math.PI * d * sinT / λ_w;
        const Im  = psi === 0 ? 1 : Math.pow(Math.sin(N * psi) / (N * Math.sin(psi)), 2);
        const alpha = Math.PI * a * sinT / λ_w;
        const Ie  = alpha === 0 ? 1 : Math.pow(Math.sin(alpha) / alpha, 2);
        const I   = Im * Ie;
        if (I > maxI) maxI = I;
        const rgb = this._wlRGB(nm);
        r += rgb[0] * I; g += rgb[1] * I; b += rgb[2] * I;
      });
      const sc = maxI > 0 ? 1 / (wls.length * maxI + 0.01) * maxI * wls.length : 0;
      pts.push({
        y_px,
        I: maxI,
        color: `rgba(${Math.round(Math.min(255, r / wls.length))},${Math.round(Math.min(255, g / wls.length))},${Math.round(Math.min(255, b / wls.length))},${Math.min(1, maxI + 0.02)})`
      });
    }
    return pts;
  }

  _drawGratingOrders(ctx, screenX, cy, d, λ, L, simH) {
    const maxOrder = 3;
    ctx.save();
    ctx.font = '10px sans-serif';
    ctx.fillStyle = 'rgba(255,255,150,0.85)';
    ctx.textAlign = 'center';
    for (let n = -maxOrder; n <= maxOrder; n++) {
      const sinT = n * λ / d;
      if (Math.abs(sinT) >= 1) continue;
      const y_m  = Math.tan(Math.asin(sinT)) * L;
      const y_px = y_m / 0.05 * (simH / 2) + cy;
      if (y_px < 4 || y_px > simH - 4) continue;
      ctx.fillText(`${n >= 0 ? '+' : ''}${n}`, screenX + 18, y_px + 4);
    }
    ctx.restore();
  }

  /* ─────────────────────────────────────────────
     Common drawing helpers
  ─────────────────────────────────────────────── */

  _drawSource(x, cy) {
    const ctx = this._ctx;
    ctx.save();
    ctx.beginPath();
    ctx.arc(x, cy, 7, 0, Math.PI * 2);
    ctx.fillStyle = '#fff9c0';
    ctx.shadowColor = '#fff5a0';
    ctx.shadowBlur = 16;
    ctx.fill();
    ctx.shadowBlur = 0;
    ctx.restore();
    /* label */
    ctx.save();
    ctx.font = '10px sans-serif';
    ctx.fillStyle = '#aaa';
    ctx.textAlign = 'center';
    ctx.fillText('Источник', x, cy + 20);
    ctx.restore();
  }

  _drawSlitBarrier(x, cy, simH, sepPx, gapPx, slitCount) {
    const ctx = this._ctx;
    const half = sepPx / 2;
    const hw   = 6;
    ctx.save();
    ctx.fillStyle = '#3a3a5a';
    /* top block */
    ctx.fillRect(x - hw, 0, hw * 2, cy - half - gapPx / 2);
    /* middle block (between slits) */
    if (slitCount === 2) {
      ctx.fillRect(x - hw, cy - half + gapPx / 2, hw * 2, sepPx - gapPx);
    }
    /* bottom block */
    ctx.fillRect(x - hw, cy + half + gapPx / 2, hw * 2, simH - (cy + half + gapPx / 2));
    /* slit highlight lines */
    ctx.strokeStyle = 'rgba(255,255,200,0.5)';
    ctx.lineWidth = 1;
    [cy - half - gapPx / 2, cy - half + gapPx / 2, cy + half - gapPx / 2, cy + half + gapPx / 2].forEach(yy => {
      ctx.beginPath(); ctx.moveTo(x - hw - 2, yy); ctx.lineTo(x + hw + 2, yy); ctx.stroke();
    });
    ctx.restore();
  }

  _drawSingleSlitBarrier(x, cy, simH, gapPx) {
    const ctx = this._ctx;
    const hw = 6;
    ctx.save();
    ctx.fillStyle = '#3a3a5a';
    ctx.fillRect(x - hw, 0, hw * 2, cy - gapPx / 2);
    ctx.fillRect(x - hw, cy + gapPx / 2, hw * 2, simH - cy - gapPx / 2);
    ctx.strokeStyle = 'rgba(255,255,200,0.5)';
    ctx.lineWidth = 1;
    [cy - gapPx / 2, cy + gapPx / 2].forEach(yy => {
      ctx.beginPath(); ctx.moveTo(x - hw - 2, yy); ctx.lineTo(x + hw + 2, yy); ctx.stroke();
    });
    ctx.restore();
  }

  _drawGratingBarrier(x, cy, simH, N) {
    const ctx = this._ctx;
    const hw = 6;
    const totalH = simH * 0.7;
    const startY = cy - totalH / 2;
    ctx.save();
    ctx.fillStyle = '#3a3a5a';
    ctx.fillRect(x - hw, 0, hw * 2, simH);
    /* punch slit holes */
    const slitH = Math.max(2, Math.floor(totalH / (N * 2.5)));
    const step  = totalH / N;
    ctx.fillStyle = '#0a0a16';
    for (let i = 0; i < N; i++) {
      const sy = startY + i * step + (step - slitH) / 2;
      ctx.fillRect(x - hw, sy, hw * 2, slitH);
    }
    ctx.restore();
  }

  _drawWavefronts(slitX, s1y, slitX2, s2y, maxR, λ_nm, wl, simH) {
    const ctx = this._ctx;
    const baseColor = wl ? 'rgba(255,255,200,' : null;
    const nArcs = 7;
    const srcPts = s1y === s2y ? [{ x: slitX, y: s1y }] : [{ x: slitX, y: s1y }, { x: slitX2, y: s2y }];

    srcPts.forEach(src => {
      ctx.save();
      for (let i = 1; i <= nArcs; i++) {
        const r   = (i / nArcs) * maxR * 0.92;
        const a   = wl ? (0.4 - i * 0.04) : (0.45 - i * 0.05);
        ctx.strokeStyle = wl ? `rgba(255,255,180,${Math.max(0.04, a)})` : this._wlColor(λ_nm, Math.max(0.04, a));
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.arc(src.x, src.y, r, -Math.PI / 2, Math.PI / 2);
        ctx.stroke();
      }
      ctx.restore();
    });
  }

  _drawScreen(screenX, simH, pts, λ_nm, wl) {
    const ctx = this._ctx;
    const bw = 16; // bar width

    /* glow pass for bright fringes */
    if (window.LabFX && window.LabFX.glow) {
      /* simple manual glow: shadow blur */
    }

    ctx.save();
    /* background of screen area */
    ctx.fillStyle = '#08080f';
    ctx.fillRect(screenX - 1, 0, bw + 2, simH);

    pts.forEach(({ y_px, I, color }) => {
      const yy = Math.round(y_px + simH / 2);
      const col = color || (wl ? `rgba(255,255,200,${I.toFixed(3)})` : this._wlColor(λ_nm, I));
      ctx.fillStyle = col;
      ctx.fillRect(screenX, yy, bw, 2);

      /* glow for bright pixels */
      if (I > 0.55) {
        ctx.save();
        ctx.shadowColor = color || this._wlColor(λ_nm, 1);
        ctx.shadowBlur  = 8 + I * 10;
        ctx.fillStyle = col;
        ctx.fillRect(screenX + 1, yy, bw - 2, 2);
        ctx.restore();
      }
    });
    ctx.restore();
  }

  _drawGraph(x0, y0, W, H, pts, λ_nm, wl) {
    const ctx = this._ctx;
    const padL = 38, padR = 20, padT = 8, padB = 18;
    const gx = x0 + padL, gy = y0 + padT;
    const gw = W - padL - padR, gh = H - padT - padB;

    /* graph background */
    ctx.save();
    ctx.fillStyle = '#080810';
    ctx.fillRect(x0, y0, W, H);
    ctx.fillStyle = '#0d0d1e';
    ctx.fillRect(gx, gy, gw, gh);

    /* axes */
    ctx.strokeStyle = '#2a2a50';
    ctx.lineWidth = 1;
    ctx.beginPath(); ctx.moveTo(gx, gy); ctx.lineTo(gx, gy + gh); ctx.lineTo(gx + gw, gy + gh); ctx.stroke();
    /* y-axis label */
    ctx.save();
    ctx.translate(x0 + 12, gy + gh / 2);
    ctx.rotate(-Math.PI / 2);
    ctx.fillStyle = '#666';
    ctx.font = '9px sans-serif';
    ctx.textAlign = 'center';
    ctx.fillText('I(y)', 0, 0);
    ctx.restore();

    /* intensity curve */
    const maxI = pts.reduce((m, p) => Math.max(m, p.I), 0) || 1;
    ctx.beginPath();
    let first = true;
    pts.forEach(({ y_px, I }) => {
      const px = gx + (y_px / (this._H / 2) + 1) / 2 * gw;
      const py = gy + gh - (I / maxI) * gh * 0.92;
      if (first) { ctx.moveTo(px, py); first = false; } else ctx.lineTo(px, py);
    });
    ctx.strokeStyle = wl ? '#ffe066' : this._wlColor(λ_nm, 0.9);
    ctx.lineWidth = 1.5;
    ctx.stroke();

    /* axis label */
    ctx.fillStyle = '#555';
    ctx.font = '9px sans-serif';
    ctx.textAlign = 'center';
    ctx.fillText('y', gx + gw / 2, gy + gh + padB - 4);
    ctx.textAlign = 'right';
    ctx.fillText('1', gx - 3, gy + gh * 0.08);
    ctx.restore();
  }

  _drawHUDLine(ctx, W, H, text) {
    ctx.save();
    ctx.fillStyle = 'rgba(10,10,22,0.7)';
    ctx.fillRect(4, H - 22, W - 8, 18);
    ctx.fillStyle = '#9ad8ff';
    ctx.font = '11px monospace';
    ctx.textAlign = 'left';
    ctx.fillText(text, 10, H - 7);
    ctx.restore();
  }

  _drawLabel(ctx, x, y, text) {
    ctx.save();
    ctx.fillStyle = '#666';
    ctx.font = '10px sans-serif';
    ctx.textAlign = 'center';
    ctx.fillText(text, x, y);
    ctx.restore();
  }

  /* color helpers */
  _wlColor(nm, alpha) {
    const [r, g, b] = this._wlRGB(nm);
    return `rgba(${r},${g},${b},${(alpha || 1).toFixed(3)})`;
  }

  _wlRGB(nm) {
    const c = wavelengthToRGB(nm);
    /* wavelengthToRGB returns 'rgb(r,g,b)' — parse it */
    const m = c.match(/(\d+),\s*(\d+),\s*(\d+)/);
    if (m) return [+m[1], +m[2], +m[3]];
    return [200, 200, 200];
  }

  _updateHUD() {
    /* update stats bar */
    const λ_nm = window._obWavelength || 550;
    const λ    = λ_nm * 1e-9;
    const el = id => document.getElementById(id);
    if (this._sub === 'young') {
      const d = this._d_young * 1e-6, L = this._L_young;
      const dy = (λ * L / d * 1e3).toFixed(3);
      if (el('diffbar-info')) el('diffbar-info').textContent = `Δy = ${dy} мм`;
    } else if (this._sub === 'single') {
      const a = this._a_single * 1e-6;
      const ang = (2 * λ / a * 180 / Math.PI).toFixed(2);
      if (el('diffbar-info')) el('diffbar-info').textContent = `2λ/a = ${ang}°`;
    } else if (this._sub === 'grating') {
      const R = this._N_grating * 1;
      if (el('diffbar-info')) el('diffbar-info').textContent = `R = Nn = ${R}`;
    }
    if (el('diffbar-sub')) el('diffbar-sub').textContent = {
      young: 'Юнг',
      single: 'Однощелевая',
      grating: 'Решётка'
    }[this._sub] || '';
    if (el('diffbar-wl')) el('diffbar-wl').textContent = (window._obWhiteLight ? 'Белый' : λ_nm + ' нм');
  }
}

/* ── DiffractionSim singleton + UI wiring ── */

var diffrSim = null;

function diffrSwitchSub(sub) {
  if (window.LabFX) LabFX.sound.play('chime', { volume: 0.4 });
  /* button styling */
  ['young', 'single', 'grating'].forEach(s => {
    const btn = document.getElementById('diffr-sub-' + s);
    if (btn) btn.classList.toggle('active', s === sub);
  });
  /* param panel visibility */
  ['young', 'single', 'grating'].forEach(s => {
    const pnl = document.getElementById('ob-diffr-' + s + '-params');
    if (pnl) pnl.style.display = s === sub ? '' : 'none';
  });
  if (diffrSim) {
    diffrSim.setSub(sub);
    diffrSim._updateHUD();
  }
}

function diffrParam(name, val) {
  /* update value label */
  const labelId = 'diffr-' + name.replace('_', '-') + '-val';
  const lbl = document.getElementById(labelId);
  if (lbl) {
    const v = parseFloat(val);
    /* N_grating → integer; L/d_grating/a_grating → 1 decimal; others → 0 */
    const decimals = name.includes('N_') ? -1 : (name === 'L_young' || name === 'd_grating' || name === 'a_grating') ? 1 : 0;
    lbl.textContent = decimals < 0 ? Math.round(v) : v.toFixed(decimals);
  }
  if (diffrSim) diffrSim.setParam(name, val);
}

function diffrReset() {
  if (!diffrSim) return;
  diffrSim._d_young   = 40;
  diffrSim._L_young   = 1.0;
  diffrSim._a_single  = 80;
  diffrSim._N_grating = 10;
  diffrSim._d_grating = 2.0;
  diffrSim._a_grating = 0.5;
  /* reset sliders */
  ['d-young', 'L-young', 'a-single', 'N-grating', 'd-grating', 'a-grating'].forEach(k => {
    const sl = document.getElementById('sl-diffr-' + k);
    if (sl) {
      const defaults = {
        'd-young': 40, 'L-young': 10, 'a-single': 80,
        'N-grating': 10, 'd-grating': 20, 'a-grating': 5
      };
      if (defaults[k] !== undefined) sl.value = defaults[k];
    }
    const lbl = document.getElementById('diffr-' + k + '-val');
    if (lbl) {
      const dv = { 'd-young': 40, 'L-young': '1.0', 'a-single': 80, 'N-grating': 10, 'd-grating': '2.0', 'a-grating': '0.5' };
      if (dv[k] !== undefined) lbl.textContent = dv[k];
    }
  });
  diffrSim.draw();
  diffrSim._updateHUD();
}