{% extends "base.html" %}

{% block title %}3D-Viewer{% endblock %}
{% block heading %}3D-CAD-Viewer{% endblock %}
{% block topbar_actions %}
  <span class="text-xs text-neutral-500">STL · OBJ · 3MF · STEP · IGES · max 30 MB · Drag &amp; Drop</span>
{% endblock %}

{% block content %}
<div class="card" id="viewer-card">
  <div class="card-header"><div>
    <h2>Modell anzeigen</h2>
    <p class="sub">
      Lade eine STL/OBJ/3MF/STEP/IGES-Datei lokal — wird nicht hochgeladen, nur im Browser gerendert.
      Maus zum Drehen · Mausrad zum Zoomen · Rechtsklick zum Verschieben.
    </p>
  </div></div>
  <div class="p-5">
    <div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap;">
      <input type="file" id="model-file" accept=".stl,.obj,.3mf,.step,.stp,.iges,.igs" class="input" style="flex:1;min-width:220px;">
      <button type="button" id="model-clear" class="btn-secondary" style="display:none;">Modell entfernen</button>
      <span class="text-xs text-neutral-500">oder Datei einfach in den Viewer ziehen</span>
    </div>

    <div id="viewer-container" style="margin-top:16px;width:100%;height:580px;
         background:
           radial-gradient(ellipse at 50% 30%, #e8e6e2 0%, #d2cfca 70%, #b8b5b0 100%);
         border-radius:14px;position:relative;overflow:hidden;
         transition:outline-color 120ms, box-shadow 120ms;
         outline:2px dashed transparent; outline-offset:-6px;">

      <!-- Viewer-Toolbar (vertikale Sidebar links): View / Render / Mess-Tools / Actions -->
      <div id="viewer-toolbar" class="v3d-panel v3d-sidebar" style="position:absolute;top:12px;left:12px;z-index:4;
           display:none;flex-direction:column;gap:0;padding:8px 6px;width:110px;
           max-height:calc(100% - 24px);overflow-y:auto;overflow-x:hidden;">
        <!-- Sektion 1: Standard-Ansichten (kompaktes 2×4-Grid) -->
        <div class="vtb-section">
          <div class="vtb-section-title">Ansicht</div>
          <div class="vtb-grid-2">
            <button data-view="iso"    class="vtb-btn vtb-grid-btn" title="Iso (1)">ISO</button>
            <button id="vtb-fit"       class="vtb-btn vtb-grid-btn" title="Auto-Fit (F)">Fit</button>
            <button data-view="front"  class="vtb-btn vtb-grid-btn" title="Vorne (2)">Vo</button>
            <button data-view="back"   class="vtb-btn vtb-grid-btn" title="Hinten (3)">Hi</button>
            <button data-view="left"   class="vtb-btn vtb-grid-btn" title="Links (4)">Li</button>
            <button data-view="right"  class="vtb-btn vtb-grid-btn" title="Rechts (5)">Re</button>
            <button data-view="top"    class="vtb-btn vtb-grid-btn" title="Oben (6)">Ob</button>
            <button data-view="bottom" class="vtb-btn vtb-grid-btn" title="Unten (7)">Un</button>
          </div>
        </div>
        <!-- Sektion 2: Render / Schnitt — 3 Buttons in einer Zeile, nur Icons -->
        <div class="vtb-section">
          <div class="vtb-section-title">Darstellung</div>
          <div class="vtb-row-3">
            <button id="vtb-mode" class="vtb-btn vtb-mini-btn" title="Solid / Wireframe / X-Ray (W)">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/></svg>
              <span class="vtb-mini-label">Solid</span>
            </button>
            <button id="vtb-section" class="vtb-btn vtb-mini-btn" title="Schnittebene (C)">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12h18"/><path d="M3 12l4-4"/><path d="M3 12l4 4"/></svg>
              <span class="vtb-mini-label">Schnitt</span>
            </button>
            <button id="vtb-bg" class="vtb-btn vtb-mini-btn" title="Hintergrund wechseln">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 3a9 9 0 0 0 0 18"/></svg>
              <span class="vtb-mini-label">BG</span>
            </button>
          </div>
        </div>
        <!-- Sektion 3: Mess-Tools — 2-spaltiges Grid -->
        <div class="vtb-section">
          <div class="vtb-section-title">Messen</div>
          <div class="vtb-grid-2 vtb-grid-tools">
            <button id="vtb-measure" class="vtb-btn vtb-tool-btn" title="Punkt-zu-Punkt (M) — snappt an Ecken/Kanten">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 5l14 14"/><circle cx="5" cy="5" r="2"/><circle cx="19" cy="19" r="2"/></svg>
              <span class="vtb-tool-label">Maß</span>
            </button>
            <button id="vtb-hole" class="vtb-btn vtb-tool-btn" title="Bohrung (B) — Ø + Tiefe + Typ. Senkung automatisch erkannt.">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="4"/></svg>
              <span class="vtb-tool-label">Bohrung</span>
            </button>
            <button id="vtb-radius" class="vtb-btn vtb-tool-btn" title="Radius (R) — Kugel-Fit auf gekrümmter Fläche">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21 A18 18 0 0 1 21 3"/><circle cx="3" cy="21" r="1.5"/></svg>
              <span class="vtb-tool-label">Radius</span>
            </button>
            <button id="vtb-angle" class="vtb-btn vtb-tool-btn" title="Winkel (A) — Klick 1 + Klick 2 zwischen 2 Flächen">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20 L20 20 L20 8"/><path d="M7 20 A13 13 0 0 1 16 13" stroke-dasharray="2 2"/></svg>
              <span class="vtb-tool-label">Winkel</span>
            </button>
            <button id="vtb-chamfer" class="vtb-btn vtb-tool-btn" title="Fase (K) — Breite × Länge × Winkel">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 18 L9 18 L18 9 L18 3"/></svg>
              <span class="vtb-tool-label">Fase</span>
            </button>
            <button id="vtb-pocket" class="vtb-btn vtb-tool-btn" title="Tasche (T) — L × B × Tiefe per Region-Growing">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="1"/><rect x="8" y="8" width="8" height="8" rx="0.5" fill="currentColor" fill-opacity="0.20"/></svg>
              <span class="vtb-tool-label">Tasche</span>
            </button>
            <button id="vtb-depth" class="vtb-btn vtb-tool-btn" title="Tiefe (D) — Bezugsfläche → Zielfläche entlang Normale">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 4 L18 4"/><path d="M6 20 L18 20"/><path d="M12 4 L12 20"/><polyline points="9 8 12 4 15 8"/><polyline points="9 16 12 20 15 16"/></svg>
              <span class="vtb-tool-label">Tiefe</span>
            </button>
            <button id="vtb-edge" class="vtb-btn vtb-tool-btn" title="Kante (E) — folgt Kanten-Loop, summiert Länge">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 20 L10 6 L20 14"/><circle cx="3" cy="20" r="1.5"/><circle cx="10" cy="6" r="1.5"/><circle cx="20" cy="14" r="1.5"/></svg>
              <span class="vtb-tool-label">Kante</span>
            </button>
            <button id="vtb-holespan" class="vtb-btn vtb-tool-btn" title="Lochabstand (H) — Achse → Achse zwischen 2 Bohrungen" style="grid-column:1/-1;">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="12" r="3"/><circle cx="18" cy="12" r="3"/><path d="M9 12 L15 12" stroke-dasharray="2 2"/></svg>
              <span class="vtb-tool-label">Loch-Abstand</span>
            </button>
          </div>
        </div>
        <!-- Sektion 4: Actions — PNG + Save nebeneinander -->
        <div class="vtb-section">
          <div class="vtb-section-title">Export</div>
          <div class="vtb-row-2">
            <button id="vtb-screenshot" class="vtb-btn vtb-mini-btn" title="PNG-Screenshot (P)">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
              <span class="vtb-mini-label">PNG</span>
            </button>
            <button id="vtb-save" class="vtb-btn vtb-mini-btn vtb-side-btn-primary" title="Speichern (S) — Protokoll, PNG, Session, Beleg">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
              <span class="vtb-mini-label">Save</span>
            </button>
          </div>
        </div>
        <!-- Cross-Section-Slider (initial versteckt) -->
        <div id="vtb-section-controls" style="display:none;flex-direction:column;gap:6px;padding:8px 4px 4px;
             border-top:1px solid var(--v3d-border-2);margin-top:6px;">
          <select id="vtb-section-axis" class="vtb-select" style="width:100%;font-size:11px;">
            <option value="x">X</option>
            <option value="y">Y</option>
            <option value="z" selected>Z</option>
          </select>
          <input type="range" id="vtb-section-slider" min="0" max="100" value="50" style="width:100%;">
          <button id="vtb-section-flip" class="vtb-btn vtb-side-btn" title="Schnitt-Richtung umkehren">
            <span style="font-size:14px;">⇄</span>
            <span class="vtb-side-label">Flip</span>
          </button>
        </div>
      </div>

      <!-- Material + Volumen/Gewicht-Panel (rechts unten) -->
      <div id="viewer-material" class="v3d-panel" style="position:absolute;bottom:14px;right:14px;z-index:4;
           display:none;flex-direction:column;gap:4px;font-size:11px;
           color:var(--v3d-text);padding:12px 14px;min-width:240px;">
        <div style="display:flex;justify-content:space-between;align-items:center;gap:10px;
                    padding-bottom:8px;margin-bottom:4px;border-bottom:1px solid var(--v3d-border-2);">
          <span style="color:var(--v3d-text-mute);font-size:10px;text-transform:uppercase;letter-spacing:0.08em;font-weight:700;">Werkstoff</span>
          <select id="vtb-material" class="vtb-select" style="flex:1;font-size:11px;">
            <option value="7.85" data-name="Baustahl S235">S235 · 7,85 g/cm³</option>
            <option value="7.85" data-name="C45 / 1.0503">C45 · 7,85 g/cm³</option>
            <option value="7.85" data-name="42CrMo4 / 1.7225">42CrMo4 · 7,85 g/cm³</option>
            <option value="7.90" data-name="V2A / 1.4301">V2A 1.4301 · 7,90 g/cm³</option>
            <option value="8.00" data-name="V4A / 1.4571">V4A 1.4571 · 8,00 g/cm³</option>
            <option value="2.70" data-name="Aluminium EN-AW-6082">AlMgSi · 2,70 g/cm³</option>
            <option value="2.80" data-name="Aluminium EN-AW-7075">7075 · 2,80 g/cm³</option>
            <option value="7.70" data-name="Werkzeugstahl 1.2379">1.2379 · 7,70 g/cm³</option>
            <option value="8.50" data-name="Messing CuZn39Pb3">Messing · 8,50 g/cm³</option>
            <option value="8.94" data-name="Kupfer Cu-DHP">Kupfer · 8,94 g/cm³</option>
            <option value="4.43" data-name="Titan Grade 5">Titan · 4,43 g/cm³</option>
            <option value="1.41" data-name="POM-C">POM-C · 1,41 g/cm³</option>
            <option value="1.13" data-name="PA6">PA6 · 1,13 g/cm³</option>
          </select>
        </div>
        <div class="stat-row"><span class="stat-label">Volumen</span>    <span id="vtb-volume" class="stat-value">—</span></div>
        <div class="stat-row"><span class="stat-label">Oberfläche</span> <span id="vtb-surface" class="stat-value">—</span></div>
        <div class="stat-row"><span class="stat-label">Gewicht</span>    <span id="vtb-weight" class="stat-value is-weight">—</span></div>
        <div class="stat-row"><span class="stat-label">Rohteil-BBox</span><span id="vtb-rawweight" class="stat-value" style="opacity:0.7;">—</span></div>
      </div>

      <!-- Hint (Drag&Drop) — auf hellem Hintergrund: dunkler Text -->
      <div id="viewer-hint" style="position:absolute;inset:0;display:flex;
           flex-direction:column;align-items:center;justify-content:center;
           color:rgba(20,28,46,0.55);font-size:14px;text-align:center;padding:0 20px;
           pointer-events:none;">
        <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor"
             stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" style="opacity:0.60;margin-bottom:10px;">
          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
          <polyline points="17 8 12 3 7 8"/>
          <line x1="12" y1="3" x2="12" y2="15"/>
        </svg>
        <div style="font-weight:600;color:rgba(20,28,46,0.85);margin-bottom:4px;">
          Datei hier ablegen
        </div>
        <div style="font-size:12px;opacity:0.70;">
          STL · OBJ · 3MF · STEP · IGES — läuft komplett lokal
        </div>
      </div>

      <!-- Drop-Overlay -->
      <div id="viewer-drop-overlay" style="position:absolute;inset:0;display:none;
           align-items:center;justify-content:center;flex-direction:column;
           background:rgba(242,88,27,0.18);
           border:3px dashed #f2581b;border-radius:10px;
           color:white;font-size:16px;font-weight:600;text-align:center;
           pointer-events:none;z-index:5;backdrop-filter:blur(2px);">
        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor"
             stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" style="margin-bottom:8px;">
          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
          <polyline points="17 8 12 3 7 8"/>
          <line x1="12" y1="3" x2="12" y2="15"/>
        </svg>
        Loslassen zum Öffnen
      </div>

      <!-- Stats (oben rechts) -->
      <div id="viewer-stats" class="v3d-panel" style="position:absolute;top:14px;right:14px;
           font-size:10.5px;color:var(--v3d-text);
           font-family:'JetBrains Mono', ui-monospace, monospace;
           text-align:right;line-height:1.7;display:none;
           padding:8px 12px;font-variant-numeric:tabular-nums;"></div>

      <!-- Mess-Status Toast (unten links, neben Toolbar) -->
      <div id="viewer-measure-hint" class="v3d-panel" style="position:absolute;bottom:14px;left:14px;z-index:4;
           font-size:11.5px;color:var(--v3d-yellow);
           border-color:rgba(250,204,21,0.40) !important;
           display:none;
           font-family:'Inter', system-ui, sans-serif;line-height:1.5;
           max-width:480px;"></div>

      <!-- Error -->
      <div id="viewer-error" style="position:absolute;bottom:12px;left:14px;right:14px;
           font-size:12px;color:#fff;background:rgba(180,30,30,0.85);
           padding:8px 12px;border-radius:6px;display:none;z-index:7;"></div>

      <!-- Save-Menu (Modal) -->
      <div id="viewer-save-menu" class="v3d-modal-bg">
        <div class="v3d-modal-card" style="min-width:380px;max-width:90%;">
          <div class="v3d-modal-header">
            <span class="v3d-modal-title">Speichern</span>
            <button id="vtb-save-close" class="vtb-btn vtb-icon-btn" title="Schließen">✕</button>
          </div>
          <div style="display:flex;flex-direction:column;gap:8px;">
            <button id="save-txt" class="save-action">
              <strong>Mess-Protokoll (TXT)</strong>
              <span class="save-sub">Liste aller Maße + Bohrungen als Datei</span>
            </button>
            <button id="save-csv" class="save-action">
              <strong>Mess-Protokoll (CSV)</strong>
              <span class="save-sub">Für Excel — Spalten Typ, Wert, Einheit, Details</span>
            </button>
            <button id="save-png-annotated" class="save-action">
              <strong>Annotiertes PNG</strong>
              <span class="save-sub">Screenshot + Mess-Tabelle eingebrannt</span>
            </button>
            <button id="save-pdf" class="save-action">
              <strong>QS-Mess-Protokoll (PDF)</strong>
              <span class="save-sub">A4 mit Bauteil-Screenshot + Mess-Tabelle für Qualitätssicherung</span>
            </button>
            <button id="save-session-local" class="save-action">
              <strong>Session lokal speichern</strong>
              <span class="save-sub">Datei + Messungen + Ansicht — beim nächsten Öffnen wiederhergestellt</span>
            </button>
            <button id="save-attach" class="save-action">
              <strong>An Auftrag/Anfrage anhängen</strong>
              <span class="save-sub">In Takoma-Beleg speichern (Anfrage, Angebot, Auftrag)</span>
            </button>
          </div>
          <div id="save-status" style="margin-top:12px;font-size:11px;color:var(--v3d-text-mute);min-height:14px;"></div>
        </div>
      </div>

      <!-- Werkzeug-Analyse-Modal -->
      <div id="viewer-tools-modal" class="v3d-modal-bg" style="align-items:flex-start;overflow-y:auto;padding:30px;">
        <div class="v3d-modal-card" style="min-width:720px;max-width:92%;">
          <div class="v3d-modal-header">
            <span class="v3d-modal-title">Werkzeug-Analyse</span>
            <button id="tools-close" class="vtb-btn vtb-icon-btn" title="Schließen">✕</button>
          </div>
          <div id="tools-summary" style="display:flex;gap:14px;margin-bottom:14px;font-size:11px;
               flex-wrap:wrap;padding:10px 12px;background:rgba(255,255,255,0.04);border-radius:6px;
               border:1px solid rgba(255,255,255,0.06);">
            <span>Werkstoff: <strong id="tools-mat">—</strong></span>
            <span style="opacity:0.4;">|</span>
            <span><strong id="tools-unique">0</strong> Werkzeuge benötigt</span>
            <span style="opacity:0.4;">|</span>
            <span style="color:#86efac;"><strong id="tools-avail">0</strong> verfügbar</span>
            <span style="opacity:0.4;">|</span>
            <span style="color:#fca5a5;"><strong id="tools-missing">0</strong> fehlen</span>
          </div>
          <div id="tools-table-wrap" style="max-height:420px;overflow-y:auto;
               border:1px solid rgba(255,255,255,0.08);border-radius:6px;">
            <table id="tools-table" style="width:100%;font-size:11px;border-collapse:collapse;">
              <thead>
                <tr style="background:rgba(0,0,0,0.40);position:sticky;top:0;z-index:1;">
                  <th style="text-align:left;padding:8px 10px;font-weight:600;color:rgba(255,255,255,0.55);font-size:10px;text-transform:uppercase;letter-spacing:0.06em;">Werkzeug</th>
                  <th style="text-align:right;padding:8px 10px;font-weight:600;color:rgba(255,255,255,0.55);font-size:10px;text-transform:uppercase;letter-spacing:0.06em;">Ø / M</th>
                  <th style="text-align:center;padding:8px 10px;font-weight:600;color:rgba(255,255,255,0.55);font-size:10px;text-transform:uppercase;letter-spacing:0.06em;">Empf. Mat.</th>
                  <th style="text-align:center;padding:8px 10px;font-weight:600;color:rgba(255,255,255,0.55);font-size:10px;text-transform:uppercase;letter-spacing:0.06em;">Bedarf</th>
                  <th style="text-align:center;padding:8px 10px;font-weight:600;color:rgba(255,255,255,0.55);font-size:10px;text-transform:uppercase;letter-spacing:0.06em;">Lager</th>
                  <th style="text-align:left;padding:8px 10px;font-weight:600;color:rgba(255,255,255,0.55);font-size:10px;text-transform:uppercase;letter-spacing:0.06em;">Verfügbar / Lagerort</th>
                </tr>
              </thead>
              <tbody id="tools-tbody"></tbody>
            </table>
          </div>
          <div id="tools-status" style="margin-top:10px;font-size:11px;color:rgba(255,255,255,0.65);min-height:14px;"></div>
        </div>
      </div>

      <!-- Attach-Modal (Beleg-Auswahl) — zweite Ebene über Save-Menu -->
      <div id="viewer-attach-modal" class="v3d-modal-bg" style="z-index:9;background:rgba(6,11,28,0.85);">
        <div class="v3d-modal-card" style="min-width:480px;max-width:92%;">
          <div class="v3d-modal-header">
            <span class="v3d-modal-title">An Beleg anhängen</span>
            <button id="attach-close" class="vtb-btn vtb-icon-btn" title="Schließen">✕</button>
          </div>
          <div style="display:flex;gap:6px;margin-bottom:8px;">
            <select id="attach-kind" class="vtb-select" style="font-size:12px;">
              <option value="inquiry">Anfrage</option>
              <option value="quote">Angebot</option>
              <option value="sales_order">Auftrag</option>
            </select>
            <input type="text" id="attach-search" class="vtb-select" placeholder="Nummer oder Kunde suchen …"
                   style="flex:1;font-size:12px;padding:4px 8px;">
          </div>
          <div id="attach-results" style="max-height:240px;overflow-y:auto;
               background:rgba(0,0,0,0.30);border-radius:6px;
               font-size:12px;font-family:ui-monospace,monospace;
               border:1px solid rgba(255,255,255,0.08);"></div>
          <div id="attach-status" style="margin-top:8px;font-size:11px;color:rgba(255,255,255,0.65);min-height:14px;"></div>
        </div>
      </div>

      <!-- Session-restore-Banner — erscheint wenn lokale Session gefunden.
           pointer-events explizit nur auf Buttons, damit Drag&Drop nicht blockiert wird. -->
      <div id="viewer-restore" style="position:absolute;top:12px;left:50%;transform:translateX(-50%);
           display:none;align-items:center;gap:10px;z-index:4;
           background:rgba(15,23,42,0.95);border:1px solid #fef3c7;
           border-radius:6px;padding:6px 12px;color:#fef3c7;font-size:12px;
           backdrop-filter:blur(8px);pointer-events:none;">
        <span id="viewer-restore-text">Letzte Session vom — gefunden</span>
        <button id="restore-load" class="vtb-btn" style="background:rgba(254,243,199,0.20);">Wiederherstellen</button>
        <button id="restore-dismiss" class="vtb-btn">Ignorieren</button>
      </div>

      <!-- Loading -->
      <div id="viewer-loading" style="position:absolute;inset:0;display:none;
           flex-direction:column;align-items:center;justify-content:center;
           background:rgba(10,16,32,0.85);color:white;font-size:14px;
           backdrop-filter:blur(4px);z-index:6;">
        <svg width="48" height="48" viewBox="0 0 50 50" style="margin-bottom:12px;">
          <circle cx="25" cy="25" r="20" fill="none" stroke="rgba(242,88,27,0.25)" stroke-width="4"/>
          <circle cx="25" cy="25" r="20" fill="none" stroke="#f2581b" stroke-width="4"
                  stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="31.4 94.2"
                  transform="rotate(-90 25 25)">
            <animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25"
                              dur="1.1s" repeatCount="indefinite"/>
          </circle>
        </svg>
        <div id="viewer-loading-text" style="font-weight:600;margin-bottom:4px;">STEP wird verarbeitet…</div>
        <div id="viewer-loading-sub" style="font-size:11px;opacity:0.65;">Das passiert lokal im Browser.</div>
        <button id="loading-cancel" style="margin-top:18px;padding:6px 14px;font-size:11px;
                background:rgba(248,113,113,0.20);color:#fca5a5;
                border:1px solid rgba(248,113,113,0.40);border-radius:6px;cursor:pointer;
                font-family:'Inter',system-ui,sans-serif;">
          Abbrechen / Reset
        </button>
      </div>
    </div>

    <!-- Mess-Protokoll-Panel: Tabelle mit allen erfassten / manuell ergänzten Maßen -->
    <div id="protocol-card" style="margin-top:18px;overflow:hidden;">
      <div class="proto-header">
        <span class="proto-title">Mess-Protokoll</span>
        <span id="protocol-count" class="proto-count">0 Einträge</span>
        <div style="flex:1;"></div>
        <button id="proto-pattern" class="vtb-btn" title="Bohrbild-Erkennung — Lochmuster aus erfassten Bohrungen ableiten"
                style="background:rgba(96,165,250,0.10);border-color:rgba(96,165,250,0.40);color:#3b82f6;margin-right:6px;">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:13px;height:13px;">
            <circle cx="6" cy="6" r="2"/><circle cx="18" cy="6" r="2"/><circle cx="6" cy="18" r="2"/><circle cx="18" cy="18" r="2"/>
          </svg>
          Bohrbild
        </button>
        <button id="proto-tools" class="vtb-btn" title="Werkzeug-Bedarf analysieren + Lager-Abgleich"
                style="background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.25);color:var(--v3d-text);">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:13px;height:13px;">
            <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>
          </svg>
          Werkzeuge prüfen
        </button>
        <button id="proto-undo" class="vtb-btn" title="Letzte Messung rückgängig (⌘Z)">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:12px;height:12px;">
            <path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-15-6.7L3 13"/>
          </svg>
          Undo
        </button>
        <button id="proto-add" class="vtb-btn" title="Manuell hinzufügen">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width:12px;height:12px;">
            <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
          </svg>
          Eintrag
        </button>
        <button id="proto-clear" class="vtb-btn" title="Protokoll leeren"
                style="border-color:rgba(248,113,113,0.40);color:#fca5a5;">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:12px;height:12px;">
            <polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/>
          </svg>
          Leeren
        </button>
      </div>
      <!-- Add-Form (initial versteckt — JS setzt display:flex zum Öffnen) -->
      <div id="proto-form" style="display:none;padding:10px 14px;
           border-bottom:1px solid var(--card-border-2);background:rgba(255,255,255,0.03);
           gap:8px;flex-wrap:wrap;align-items:center;">
        <select id="proto-type" class="vtb-select" style="font-size:11px;padding:4px 8px;min-width:120px;">
          <option value="bohrung">Bohrung</option>
          <option value="senkung">Senkung</option>
          <option value="fase">Fase</option>
          <option value="radius">Radius</option>
          <option value="tasche">Tasche</option>
          <option value="tiefe">Tiefe</option>
          <option value="kante">Kantenlänge</option>
          <option value="lochabstand">Loch-Abstand</option>
          <option value="gewinde">Gewinde</option>
          <option value="aussenmass">Außenmaß</option>
          <option value="innenmass">Innenmaß</option>
          <option value="winkel">Winkel</option>
          <option value="sonstige">Sonstiges</option>
        </select>
        <input type="text" id="proto-value" placeholder="Wert (z.B. Ø 12,5 × 25,0)" class="vtb-select" style="font-size:11px;padding:4px 8px;flex:1;min-width:140px;">
        <input type="text" id="proto-tol"   placeholder="Toleranz (H7, ±0.05)"      class="vtb-select" style="font-size:11px;padding:4px 8px;width:120px;">
        <input type="text" id="proto-note"  placeholder="Notiz"                      class="vtb-select" style="font-size:11px;padding:4px 8px;flex:2;min-width:140px;">
        <button id="proto-save"   class="vtb-btn" style="background:rgba(242,88,27,0.30);">Übernehmen</button>
        <button id="proto-cancel" class="vtb-btn">Abbrechen</button>
      </div>
      <!-- Tabelle -->
      <div id="proto-table-wrap" style="max-height:280px;overflow-y:auto;">
        <table id="proto-table" style="width:100%;font-size:11px;border-collapse:collapse;">
          <thead>
            <tr style="background:rgba(0,0,0,0.30);position:sticky;top:0;z-index:1;">
              <th style="text-align:left;padding:6px 10px;font-weight:600;color:var(--card-text-muted,#aaa);font-size:10px;text-transform:uppercase;letter-spacing:0.06em;width:36px;">#</th>
              <th style="text-align:left;padding:6px 10px;font-weight:600;color:var(--card-text-muted,#aaa);font-size:10px;text-transform:uppercase;letter-spacing:0.06em;width:96px;">Typ</th>
              <th style="text-align:left;padding:6px 10px;font-weight:600;color:var(--card-text-muted,#aaa);font-size:10px;text-transform:uppercase;letter-spacing:0.06em;">Wert</th>
              <th style="text-align:left;padding:6px 10px;font-weight:600;color:var(--card-text-muted,#aaa);font-size:10px;text-transform:uppercase;letter-spacing:0.06em;width:100px;">Toleranz</th>
              <th style="text-align:left;padding:6px 10px;font-weight:600;color:var(--card-text-muted,#aaa);font-size:10px;text-transform:uppercase;letter-spacing:0.06em;">Notiz / Detail</th>
              <th style="text-align:right;padding:6px 10px;font-weight:600;color:var(--card-text-muted,#aaa);font-size:10px;text-transform:uppercase;letter-spacing:0.06em;width:90px;">Aktion</th>
            </tr>
          </thead>
          <tbody id="proto-tbody">
            <tr id="proto-empty"><td colspan="6" style="padding:24px;text-align:center;color:var(--card-text-muted,rgba(255,255,255,0.40));font-style:italic;">
              Keine Messungen erfasst. Tools: <kbd>M</kbd> Maß · <kbd>B</kbd> Bohrung · <kbd>R</kbd> Radius · <kbd>A</kbd> Winkel · <kbd>K</kbd> Fase · <kbd>T</kbd> Tasche · <kbd>D</kbd> Tiefe · <kbd>E</kbd> Kante · <kbd>H</kbd> Loch-Abstand — oder „+ Eintrag" für manuelle Werte.
            </td></tr>
          </tbody>
        </table>
      </div>
    </div>

    <details class="viewer-shortcuts" style="margin-top:10px;font-size:11px;">
      <summary style="cursor:pointer;text-transform:uppercase;letter-spacing:0.06em;font-size:10px;opacity:0.55;user-select:none;list-style:none;">
        Tastatur-Shortcuts anzeigen
      </summary>
      <div style="margin-top:8px;line-height:2;">
        <kbd>F</kbd> Fit &nbsp;·&nbsp;
        <kbd>W</kbd> Render &nbsp;·&nbsp;
        <kbd>C</kbd> Schnitt &nbsp;·&nbsp;
        <kbd>M</kbd> Messen &nbsp;·&nbsp;
        <kbd>B</kbd> Bohrung &nbsp;·&nbsp;
        <kbd>R</kbd> Radius &nbsp;·&nbsp;
        <kbd>A</kbd> Winkel &nbsp;·&nbsp;
        <kbd>K</kbd> Fase &nbsp;·&nbsp;
        <kbd>T</kbd> Tasche &nbsp;·&nbsp;
        <kbd>D</kbd> Tiefe &nbsp;·&nbsp;
        <kbd>E</kbd> Kante &nbsp;·&nbsp;
        <kbd>H</kbd> Loch-Abstand &nbsp;·&nbsp;
        <kbd>P</kbd> PNG &nbsp;·&nbsp;
        <kbd>S</kbd> Speichern &nbsp;·&nbsp;
        <kbd>⌘Z</kbd> Letzte Messung zurück &nbsp;·&nbsp;
        <kbd>1</kbd>–<kbd>7</kbd> Ansichten &nbsp;·&nbsp;
        <kbd>Esc</kbd> Zurück
      </div>
    </details>
  </div>
</div>

<style>
  /* === Takoma 3D-Viewer · Design-System ====================================== */
  :root {
    --v3d-bg-deep:     #0a0f1a;
    --v3d-bg-surface:  rgba(24, 28, 38, 0.85);
    --v3d-bg-elevated: rgba(32, 38, 48, 0.95);
    --v3d-border:      rgba(255, 255, 255, 0.10);
    --v3d-border-2:    rgba(255, 255, 255, 0.06);
    --v3d-border-hi:   rgba(255, 255, 255, 0.22);
    --v3d-text:        rgba(255, 255, 255, 0.96);
    --v3d-text-mute:   rgba(255, 255, 255, 0.55);
    --v3d-text-faint:  rgba(255, 255, 255, 0.35);
    --v3d-orange:      #FF6B35;
    --v3d-orange-bg:   rgba(255, 107, 53, 0.16);
    --v3d-violet:      #A78BFA;
    --v3d-violet-bg:   rgba(167, 139, 250, 0.16);
    --v3d-yellow:      #FACC15;
    --v3d-yellow-bg:   rgba(250, 204, 21, 0.14);
    --v3d-green:       #34D399;
    --v3d-red:         #F87171;
    --v3d-shadow:      0 10px 30px rgba(0, 0, 0, 0.40);
    --v3d-radius:      10px;
    --v3d-radius-sm:   6px;
  }

  /* Toolbar-Buttons */
  .vtb-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    font-size: 10.5px; font-weight: 600; letter-spacing: 0.01em;
    padding: 5px 10px; min-width: 34px; min-height: 26px;
    background: rgba(255,255,255,0.05);
    color: var(--v3d-text);
    border: 1px solid var(--v3d-border);
    border-radius: var(--v3d-radius-sm);
    cursor: pointer;
    font-family: 'Inter', -apple-system, system-ui, sans-serif;
    transition: all 120ms cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
  }
  .vtb-btn:hover {
    background: var(--v3d-orange-bg);
    border-color: var(--v3d-orange);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.25);
  }
  .vtb-btn:active { transform: translateY(0); box-shadow: none; }
  .vtb-btn.is-active {
    background: var(--v3d-orange);
    border-color: var(--v3d-orange);
    color: #fff;
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.20);
  }
  .vtb-btn.vtb-icon-btn { padding: 5px 7px; }
  .vtb-btn svg { width: 14px; height: 14px; }

  /* Toolbar-Sektion mit Separator (legacy für horizontale Layouts) */
  .vtb-row {
    display: flex; gap: 3px; align-items: center;
  }
  .vtb-row + .vtb-row {
    border-top: 1px solid var(--v3d-border-2);
    padding-top: 6px;
    margin-top: 1px;
  }

  /* === Vertikale Sidebar-Toolbar ============================================ */
  .v3d-sidebar { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.15) transparent; }
  .v3d-sidebar::-webkit-scrollbar { width: 4px; }
  .v3d-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }
  .vtb-section { display: flex; flex-direction: column; gap: 4px; padding: 6px 0; }
  .vtb-section + .vtb-section { border-top: 1px solid var(--v3d-border-2); }
  .vtb-section-title {
    font-size: 9px; font-weight: 700;
    color: var(--v3d-text-faint);
    text-transform: uppercase; letter-spacing: 0.10em;
    padding: 0 4px 2px;
  }
  .vtb-grid-2 {
    display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
  }
  .vtb-grid-btn {
    width: 100%; min-width: 0; padding: 6px 4px;
    font-size: 10.5px;
  }
  .vtb-stack { display: flex; flex-direction: column; gap: 3px; }
  .vtb-side-btn {
    width: 100%; min-width: 0;
    justify-content: flex-start;
    padding: 7px 8px; gap: 7px;
    text-align: left;
    font-size: 10.5px;
  }
  .vtb-side-btn svg { flex: 0 0 13px; }
  .vtb-side-label { line-height: 1; font-weight: 600; }
  .vtb-side-btn-primary {
    background: rgba(255,107,53,0.18);
    border-color: rgba(255,107,53,0.45);
  }
  .vtb-side-btn-primary:hover {
    background: var(--v3d-orange);
    border-color: var(--v3d-orange);
  }
  /* Mini-Buttons (Icon oben, Label klein darunter — für Darstellung + Export) */
  .vtb-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3px; }
  .vtb-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
  .vtb-mini-btn {
    width: 100%; min-width: 0;
    flex-direction: column; gap: 2px;
    padding: 5px 2px;
    font-size: 9px;
  }
  .vtb-mini-btn svg { width: 13px; height: 13px; }
  .vtb-mini-label { line-height: 1; font-weight: 600; font-size: 9px; }
  /* Tool-Buttons im 2-spaltigen Grid (Mess-Sektion) */
  .vtb-grid-tools { gap: 3px; }
  .vtb-tool-btn {
    width: 100%; min-width: 0;
    flex-direction: column; gap: 3px;
    padding: 6px 3px;
    font-size: 9.5px;
  }
  .vtb-tool-btn svg { width: 14px; height: 14px; }
  .vtb-tool-label { line-height: 1; font-weight: 600; font-size: 9.5px; }

  /* Selects */
  .vtb-select {
    font-size: 11px;
    padding: 4px 8px;
    background: rgba(0,0,0,0.30);
    color: var(--v3d-text);
    border: 1px solid var(--v3d-border);
    border-radius: 5px;
    transition: border-color 120ms;
    font-family: 'Inter', system-ui, sans-serif;
  }
  .vtb-select:focus, .vtb-select:hover { border-color: var(--v3d-orange); outline: none; }

  /* Slider */
  input[type="range"]#vtb-section-slider {
    height: 4px;
    background: rgba(255,255,255,0.10);
    border-radius: 2px;
    accent-color: var(--v3d-orange);
  }
  .save-action {
    text-align: left;
    display: flex; flex-direction: column; gap: 2px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--v3d-border);
    border-radius: 8px;
    padding: 12px 14px;
    color: var(--v3d-text);
    cursor: pointer;
    font-size: 12px;
    transition: all 120ms cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Inter', system-ui, sans-serif;
  }
  .save-action:hover {
    background: var(--v3d-orange-bg);
    border-color: var(--v3d-orange);
    transform: translateX(2px);
    box-shadow: 0 4px 14px rgba(255, 107, 53, 0.20);
  }
  .save-action .save-sub {
    font-size: 10.5px;
    color: var(--v3d-text-mute);
    font-weight: normal;
    letter-spacing: 0.01em;
  }
  .attach-result-item {
    padding: 8px 12px;
    border-bottom: 1px solid var(--v3d-border-2);
    cursor: pointer;
    transition: background 100ms;
  }
  .attach-result-item:hover { background: var(--v3d-orange-bg); }
  .attach-result-item:last-child { border-bottom: 0; }
  .viewer-shortcuts {
    color: var(--v3d-text-mute);
  }
  body.theme-light .viewer-shortcuts {
    color: rgba(0,0,0,0.55);
  }

  /* === Viewer-Container Optik =============================================== */
  #viewer-container {
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.30), inset 0 0 0 1px rgba(255,255,255,0.04);
  }

  /* === Floating Panels (Toolbar, Material, Stats, Mess-Hint) ================ */
  .v3d-panel {
    background: var(--v3d-bg-surface) !important;
    border: 1px solid var(--v3d-border) !important;
    border-radius: var(--v3d-radius) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: var(--v3d-shadow);
  }

  /* === Material-Panel: Stat-Style ========================================== */
  #viewer-material .stat-row {
    display: flex; align-items: baseline; gap: 8px;
    padding: 4px 0;
    border-top: 1px solid var(--v3d-border-2);
  }
  #viewer-material .stat-row:first-child { border-top: 0; }
  #viewer-material .stat-label {
    color: var(--v3d-text-mute);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    min-width: 84px;
  }
  #viewer-material .stat-value {
    flex: 1;
    text-align: right;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
  }
  #viewer-material .stat-value.is-weight {
    color: var(--v3d-yellow);
    font-weight: 700;
    font-size: 12.5px;
  }

  /* === Mess-Protokoll-Card ================================================= */
  #protocol-card {
    background: linear-gradient(180deg, var(--v3d-bg-elevated) 0%, var(--v3d-bg-surface) 100%);
    border: 1px solid var(--v3d-border) !important;
    box-shadow: var(--v3d-shadow);
    border-radius: var(--v3d-radius) !important;
  }
  #protocol-card .proto-header {
    padding: 14px 18px;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid var(--v3d-border);
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  }
  #protocol-card .proto-title {
    color: var(--v3d-text);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
  }
  #protocol-card .proto-count {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--v3d-text-mute);
    padding: 2px 8px;
    background: rgba(255,255,255,0.06);
    border-radius: 99px;
    font-weight: 600;
  }
  #proto-table thead tr {
    background: rgba(0,0,0,0.30);
    backdrop-filter: blur(8px);
  }
  #proto-table tbody tr {
    transition: background 100ms;
  }
  #proto-table tbody tr:hover { background: rgba(255,255,255,0.04); }
  #proto-table th {
    padding: 10px 12px !important;
    color: var(--v3d-text-mute) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  #proto-table td {
    padding: 10px 12px !important;
    font-size: 12px;
    color: var(--v3d-text);
  }
  #proto-table .type-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px;
    border-radius: 99px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  #proto-table input.proto-cell {
    background: transparent;
    border: 1px solid transparent;
    color: var(--v3d-text);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    padding: 3px 6px;
    border-radius: 4px;
    transition: all 100ms;
    width: 100%;
  }
  #proto-table input.proto-cell:focus {
    background: rgba(0,0,0,0.30);
    border-color: var(--v3d-orange);
    outline: none;
  }
  #proto-table input.proto-cell:hover { background: rgba(255,255,255,0.04); }

  /* === Empty-State der Protokoll-Tabelle ==================================== */
  #proto-empty td {
    padding: 36px 24px !important;
    text-align: center !important;
    color: var(--v3d-text-faint) !important;
    font-style: italic;
    font-size: 12px !important;
  }

  /* === Modals (Save / Attach / Tools) ====================================== */
  .v3d-modal-bg {
    position: absolute; inset: 0;
    display: none;
    align-items: center; justify-content: center;
    background: rgba(8, 10, 16, 0.74);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 8;
    animation: v3d-fade-in 180ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .v3d-modal-card {
    background: var(--v3d-bg-elevated);
    border: 1px solid var(--v3d-border-hi);
    border-radius: 14px;
    padding: 22px;
    color: var(--v3d-text);
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.55);
    animation: v3d-slide-up 220ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .v3d-modal-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 16px;
  }
  .v3d-modal-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
  }
  @keyframes v3d-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes v3d-slide-up {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* === Mess-Hint Toast (unten links) ======================================= */
  #viewer-measure-hint {
    border-radius: 10px !important;
    padding: 10px 14px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.40);
    animation: v3d-toast-in 200ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  @keyframes v3d-toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* === Stats-Box (oben rechts) ============================================== */
  #viewer-stats {
    border-radius: 8px !important;
    padding: 8px 12px !important;
  }
  /* Spezifischere Selektoren — base.html hat ein globales kbd { color: #1a1a1a }
     das sonst meine Tags überschreibt. */
  .viewer-shortcuts kbd,
  #viewer-card kbd {
    font-family: ui-monospace, SFMono-Regular, monospace !important;
    display: inline-block !important;
    min-width: 20px !important;
    text-align: center !important;
    background: rgba(255,255,255,0.22) !important;
    border: 1px solid rgba(255,255,255,0.45) !important;
    color: #fff !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    box-shadow: inset 0 -1.5px 0 rgba(0,0,0,0.25) !important;
    line-height: 1.4 !important;
  }
  body.theme-light .viewer-shortcuts kbd,
  body.theme-light #viewer-card kbd {
    background: #fff !important;
    border-color: rgba(0,0,0,0.30) !important;
    color: #1a1a1a !important;
    box-shadow: inset 0 -1.5px 0 rgba(0,0,0,0.12), 0 1px 0 rgba(0,0,0,0.05) !important;
  }
  /* Material-Panel Light-Mode Override: weiße Texte wären auf hellem Bg unsichtbar */
  body.theme-light #viewer-material {
    background: rgba(15,23,42,0.96) !important;   /* solider dunkler Hintergrund — bleibt lesbar in beiden Themes */
    color: rgba(255,255,255,0.95) !important;
    border-color: rgba(255,255,255,0.15) !important;
  }
  body.theme-light #viewer-material * { color: inherit; }
  body.theme-light #viewer-material .vtb-select {
    background: rgba(0,0,0,0.30);
    color: #fafafa;
    border-color: rgba(255,255,255,0.20);
  }
  /* Gleiches für Toolbar + Mess-Hint + Save-Menü + Stats — alles dark-glass-Panels */
  body.theme-light #viewer-toolbar,
  body.theme-light #viewer-measure-hint,
  body.theme-light #viewer-stats {
    background: rgba(15,23,42,0.92) !important;
    color: rgba(255,255,255,0.95) !important;
    border-color: rgba(255,255,255,0.15) !important;
  }
  body.theme-light #viewer-toolbar *,
  body.theme-light #viewer-measure-hint *,
  body.theme-light #viewer-stats * { color: inherit; }
</style>

<script type="importmap">
{
  "imports": {
    "three":          "/static/vendor/three/build/three.module.js",
    "three/addons/":  "/static/vendor/three/addons/"
  }
}
</script>
<script>
// v1.18.0: Debug-Overlay nur bei ?debug=1 in URL — sonst nur stiller window.error-Handler
(function() {
  const isDebug = new URLSearchParams(location.search).has('debug');
  // Window-Error immer fangen (auch ohne Debug-Mode), damit JS-Init-Crashes als rote Meldung im UI auftauchen
  window.addEventListener('error', e => {
    console.error('[3D-VIEWER FATAL]', e.message, 'at', (e.filename || '?').split('/').pop() + ':' + e.lineno);
    const hint = document.getElementById('viewer-hint');
    if (hint && hint.style.display !== 'none') {
      hint.innerHTML = '<div style="color:#fca5a5;font-weight:600;font-size:13px;padding:20px;text-align:center;max-width:600px;">' +
        '⚠ JS-Fehler: <code style="background:rgba(0,0,0,0.20);padding:2px 6px;border-radius:3px;font-size:11px;">' +
        (e.message || 'unknown') + '</code><br><span style="opacity:0.7;font-size:11px;">bei ' +
        (e.filename || '?').split('/').pop() + ':' + (e.lineno || '?') + '</span></div>';
    }
  });
  if (!isDebug) return;   // Kein Overlay im Normalbetrieb
  const logs = [];
  function addLog(level, args) {
    const msg = Array.from(args).map(a => {
      if (a instanceof Error) return a.message + ' @ ' + (a.stack || '').split('\n')[1];
      if (typeof a === 'object') { try { return JSON.stringify(a); } catch { return String(a); } }
      return String(a);
    }).join(' ');
    logs.push({ level, msg, t: new Date().toLocaleTimeString('de-DE') });
    if (logs.length > 80) logs.shift();
    renderOverlay();
  }
  function renderOverlay() {
    let el = document.getElementById('debug-log-overlay');
    if (!el) {
      el = document.createElement('div');
      el.id = 'debug-log-overlay';
      el.style.cssText = 'position:fixed;bottom:8px;left:8px;width:520px;max-height:240px;' +
        'background:rgba(0,0,0,0.92);color:#fafafa;font-family:ui-monospace,monospace;' +
        'font-size:10.5px;line-height:1.5;padding:8px 10px;border:1px solid rgba(255,255,255,0.20);' +
        'border-radius:6px;z-index:99999;overflow-y:auto;backdrop-filter:blur(8px);';
      el.innerHTML = '<div style="display:flex;justify-content:space-between;margin-bottom:4px;">' +
        '<strong style="color:#fef3c7;">DEBUG-LOG (3D-Viewer) — ?debug=1 aktiv</strong>' +
        '<a href="?" style="color:#aaa;text-decoration:none;">✕</a></div>' +
        '<div id="debug-log-body"></div>';
      document.body.appendChild(el);
    }
    const body = document.getElementById('debug-log-body');
    body.innerHTML = logs.map(l => {
      const col = l.level === 'err' ? '#fca5a5' : (l.level === 'warn' ? '#fef3c7' : '#86efac');
      return '<div style="color:' + col + ';"><span style="opacity:0.5;">' + l.t + '</span> ' +
             l.msg.replace(/[<>]/g, c => c === '<' ? '&lt;' : '&gt;') + '</div>';
    }).join('');
    body.scrollTop = body.scrollHeight;
  }
  const origLog = console.log, origWarn = console.warn, origErr = console.error;
  console.log = function() { origLog.apply(console, arguments); addLog('log', arguments); };
  console.warn = function() { origWarn.apply(console, arguments); addLog('warn', arguments); };
  console.error = function() { origErr.apply(console, arguments); addLog('err', arguments); };
  console.log('[debug] overlay aktiv (?debug=1)');
})();
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { STLLoader }     from 'three/addons/loaders/STLLoader.js';
import { OBJLoader }     from 'three/addons/loaders/OBJLoader.js';
import { ThreeMFLoader } from 'three/addons/loaders/3MFLoader.js';

// ---------- DOM refs ----------
const container   = document.getElementById('viewer-container');
const hint        = document.getElementById('viewer-hint');
const stats       = document.getElementById('viewer-stats');
const fileInput   = document.getElementById('model-file');
const dropOverlay = document.getElementById('viewer-drop-overlay');
const errorBox    = document.getElementById('viewer-error');
const clearBtn    = document.getElementById('model-clear');
const loadingBox  = document.getElementById('viewer-loading');
const loadingText = document.getElementById('viewer-loading-text');
const loadingSub  = document.getElementById('viewer-loading-sub');
const toolbar     = document.getElementById('viewer-toolbar');
const materialPanel = document.getElementById('viewer-material');
const measureHint = document.getElementById('viewer-measure-hint');

// ---------- State ----------
let renderer, scene, camera, controls, currentMesh;
let modelBBox = null;
let modelVolumeCm3 = 0;
let modelSurfaceCm2 = 0;
let modelBBoxVolumeCm3 = 0;
let renderMode = 'solid';      // 'solid' | 'wireframe' | 'xray'
let bgMode = 'light';          // 'light' | 'dark' | 'warm'
let sectionEnabled = false;
let sectionAxis = 'z';
let sectionT = 0.5;
let sectionFlipped = false;
let sectionPlane = null;
let sectionHelper = null;
let measureMode = false;
let measurePoints = [];
let measureGroup = null;
let holeMode = false;
let holeGroup = null;
let radiusMode = false;
let radiusGroup = null;
let hoverGroup = null;
let hoverThrottle = false;
let orbiting = false;   // unterdrückt Hover während aktivem Maus-Drag
let angleMode = false;
let anglePoints = [];   // [{point, normal}]
let angleGroup = null;
let chamferMode = false;
let chamferGroup = null;
// Neue Mess-Tools (v1.19): Tasche, Tiefe, Kante, Lochabstand
let pocketMode = false;
let pocketGroup = null;
let depthMode = false;
let depthGroup = null;
let depthFirst = null;     // { point:Vec3, normal:Vec3 } — Bezugsfläche-Klick 1
let edgeMode = false;
let edgeGroup = null;
let holespanMode = false;
let holespanGroup = null;
let holespanFirst = null;  // detectHole-Result von Bohrung 1
// 3D-Labels (Mess-Nummern am Bauteil)
let labelGroup = null;
// Snap-Daten — beim Modell-Laden extrahiert
let snapEdges = [];      // Array von {a:Vec3, b:Vec3, mid:Vec3, len:number}
let snapVertices = [];   // Array von Vec3 (dedupliziert)
let snapHintGroup = null;  // visueller Snap-Indikator (kleine Markierung am Cursor)

// v1.18.0: History für Speicher-Funktion
let measurementHistory = [];   // Array von {type:'measure'|'hole', label, value, data, ts}
let currentFileName = '';
let currentFileBuffer = null;  // ArrayBuffer für Session-Restore (max ~10 MB)
const STORAGE_KEY = 'takoma-3d-viewer-session-v1';
const STORAGE_MAX_BYTES = 8 * 1024 * 1024;  // 8 MB Limit für localStorage

const SUPPORTED_EXT = ['stl', 'obj', '3mf', 'step', 'stp', 'iges', 'igs'];
const CAD_EXT       = ['step', 'stp', 'iges', 'igs'];

// ---------- Helpers ----------
function showError(msg) {
  errorBox.textContent = msg;
  errorBox.style.display = 'block';
  clearTimeout(showError._t);
  showError._t = setTimeout(() => { errorBox.style.display = 'none'; }, 8000);
}
function hideError() { errorBox.style.display = 'none'; }
function showLoading(title, sub) {
  loadingText.textContent = title;
  loadingSub.textContent  = sub || 'Das passiert lokal im Browser.';
  loadingBox.style.display = 'flex';
}
function hideLoading() { loadingBox.style.display = 'none'; }

// ===== OpenCascade.js (WASM) — lazy geladen für STEP/IGES =====
// v1.18.0: per <script>-Tag laden statt dynamic import(). occt-import-js ist ein
// UMD-Build (kein echtes ESM). Per Script-Tag wird `window.occtimportjs` global.
let occtModulePromise = null;
function loadOcct() {
  if (occtModulePromise) return occtModulePromise;
  showLoading('OpenCascade-WASM laden…', 'Einmaliger Download (~7.4 MB), wird danach gecacht.');
  occtModulePromise = new Promise((resolve, reject) => {
    if (window.occtimportjs) return resolve(window.occtimportjs);
    const s = document.createElement('script');
    s.src = '/static/vendor/occt/occt-import-js.js';
    s.async = true;
    s.onload = () => {
      if (typeof window.occtimportjs === 'function') {
        resolve(window.occtimportjs);
      } else {
        reject(new Error('occtimportjs global wurde nach Script-Load nicht gefunden'));
      }
    };
    s.onerror = () => reject(new Error('Script konnte nicht geladen werden: ' + s.src));
    document.head.appendChild(s);
  })
    .then(occtFn => occtFn({
      locateFile: (file) => '/static/vendor/occt/' + file,
    }))
    .catch(err => { occtModulePromise = null; throw err; });
  return occtModulePromise;
}

async function loadCadFile(name, ab) {
  const ext = (name.split('.').pop() || '').toLowerCase();
  showLoading('OpenCascade-WASM laden…', 'Einmaliger Download (~7.4 MB), wird danach gecacht.');
  let occt;
  try {
    occt = await loadOcct();
  } catch (e) {
    hideLoading();
    showError('WASM-Modul konnte nicht geladen werden: ' + (e.message || e) +
              ' — Internet-Verbindung beim ersten Start nötig.');
    return;
  }
  showLoading(ext.toUpperCase() + ' wird verarbeitet…', 'Datei wird tessuliert in 3D-Mesh.');
  await new Promise(r => setTimeout(r, 30));

  const buf = new Uint8Array(ab);
  let result;
  try {
    if (ext === 'step' || ext === 'stp')      result = occt.ReadStepFile(buf, null);
    else if (ext === 'iges' || ext === 'igs') result = occt.ReadIgesFile(buf, null);
  } catch (e) {
    hideLoading();
    showError('Datei konnte nicht geparsed werden: ' + (e.message || e));
    return;
  }
  if (!result || !result.success) {
    hideLoading();
    showError('OpenCascade konnte die Datei nicht lesen.');
    return;
  }

  // Defensive: ensure result.meshes exists
  if (!result.meshes || result.meshes.length === 0) {
    hideLoading();
    showError('OCCT hat keine Meshes geliefert — Datei vermutlich leer oder Strukturfehler.');
    return;
  }
  const t0 = performance.now();
  let totalTris = 0;
  for (const m of result.meshes) {
    if (m.index && m.index.array) totalTris += m.index.array.length / 3;
  }
  console.log('[3D] STEP→meshes:', result.meshes.length, 'Teile,', totalTris, 'Tris');
  showLoading('Mesh aufbauen…', `${result.meshes.length} Teile · ${totalTris.toLocaleString('de-DE')} Triangles`);
  await new Promise(r => setTimeout(r, 30));

  // Watchdog: nach 20 Sek "Mesh aufbauen..." auf Fehler umschalten
  const watchdog = setTimeout(() => {
    hideLoading();
    showError(`Mesh-Aufbau hängt seit 20s (${result.meshes.length} Teile, ${totalTris} Triangles). ` +
              `Modell vermutlich zu komplex für Browser-WebGL. Versuche kleinere Datei.`);
  }, 20000);

  try {
    console.log('[3D] clearModel start');
    clearModel();
    console.log('[3D] clearModel done', (performance.now()-t0).toFixed(0)+'ms');

    const group = new THREE.Group();
    for (let mi = 0; mi < result.meshes.length; mi++) {
      const m = result.meshes[mi];
      const tm = performance.now();
      const geom = new THREE.BufferGeometry();
      if (m.attributes && m.attributes.position && m.attributes.position.array) {
        geom.setAttribute('position', new THREE.BufferAttribute(new Float32Array(m.attributes.position.array), 3));
      }
      if (m.attributes && m.attributes.normal && m.attributes.normal.array) {
        geom.setAttribute('normal', new THREE.BufferAttribute(new Float32Array(m.attributes.normal.array), 3));
      } else {
        geom.computeVertexNormals();
      }
      if (m.index && m.index.array) {
        geom.setIndex(new THREE.BufferAttribute(new Uint32Array(m.index.array), 1));
      }
      let color = 0xb0bec5;
      if (m.color && m.color.length >= 3) {
        color = new THREE.Color(m.color[0], m.color[1], m.color[2]).getHex();
      }
      const mat = makeMaterial(color);
      group.add(new THREE.Mesh(geom, mat));
      console.log('[3D]  Part', mi+1, 'built in', (performance.now()-tm).toFixed(0)+'ms');
    }
    console.log('[3D] mesh-build done', (performance.now()-t0).toFixed(0)+'ms');

    scene.add(group);
    currentMesh = group;
    console.log('[3D] scene.add done', (performance.now()-t0).toFixed(0)+'ms');

    finalizeLoad();
    console.log('[3D] finalizeLoad done', (performance.now()-t0).toFixed(0)+'ms');
    clearTimeout(watchdog);
  } catch (e) {
    clearTimeout(watchdog);
    console.error('[3D] LOAD CRASHED:', e);
    hideLoading();
    showError('Mesh-Aufbau fehlgeschlagen: ' + (e.message || e));
  }
}

// ---------- Material Factory (für Render-Mode-Wechsel) ----------
function makeMaterial(color) {
  if (renderMode === 'wireframe') {
    return new THREE.MeshBasicMaterial({ color: 0xf2581b, wireframe: true });
  }
  if (renderMode === 'xray') {
    return new THREE.MeshPhongMaterial({
      color: color || 0xb0bec5, specular: 0xf2581b, shininess: 50,
      transparent: true, opacity: 0.35, depthWrite: false, side: THREE.DoubleSide,
    });
  }
  // solid (default)
  return new THREE.MeshPhongMaterial({
    color: color || 0xb0bec5, specular: 0xf2581b, shininess: 50, flatShading: false,
    clippingPlanes: sectionEnabled && sectionPlane ? [sectionPlane] : [],
    side: THREE.DoubleSide,
  });
}

// ---------- Scene init ----------
function initScene() {
  scene = new THREE.Scene();
  applyBackground();

  // Drei-Punkt-Beleuchtung (Key/Fill/Rim) + Ambient via Hemisphere
  // Lichter für hellen Hintergrund — Hemisphere mit Boden-Bounce, stärkerer Key
  scene.add(new THREE.HemisphereLight(0xffffff, 0xc0c0c8, 0.65));
  const key  = new THREE.DirectionalLight(0xffffff, 0.75);
  key.position.set(5, 8, 6); scene.add(key);
  const fill = new THREE.DirectionalLight(0xfff5e8, 0.25);
  fill.position.set(-6, 2, -4); scene.add(fill);
  const rim  = new THREE.DirectionalLight(0xff6b35, 0.15);
  rim.position.set(0, 4, -8); scene.add(rim);

  // Grid auf Studio-Grau: weiches Grau + sehr helles Sub-Grid (soft contrast)
  const grid = new THREE.GridHelper(400, 80, 0x707070, 0xb5b3ad);
  grid.position.y = -0.01;
  scene.add(grid);

  // Achsen-Helper (klein, links unten)
  const axes = new THREE.AxesHelper(20);
  scene.add(axes);

  const w = container.clientWidth, h = container.clientHeight;
  camera = new THREE.PerspectiveCamera(45, w / h, 0.1, 10000);
  camera.position.set(80, 60, 80);

  renderer = new THREE.WebGLRenderer({
    antialias: true,
    powerPreference: 'high-performance',
    preserveDrawingBuffer: true,    // für Screenshot
  });
  renderer.setSize(w, h);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
  renderer.localClippingEnabled = true;   // für Cross-Section
  container.appendChild(renderer.domElement);

  controls = new OrbitControls(camera, renderer.domElement);
  controls.enableDamping = true; controls.dampingFactor = 0.08;
  // Hover-Preview soll während aktivem Maus-Drag NICHT updaten — sonst flackert es
  controls.addEventListener('start', () => { orbiting = true; clearHoverHighlight(); });
  controls.addEventListener('end',   () => { orbiting = false; });

  window.addEventListener('resize', () => {
    camera.aspect = container.clientWidth / container.clientHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(container.clientWidth, container.clientHeight);
  });
  animate();
}

function applyBackground() {
  if (bgMode === 'dark')       scene.background = new THREE.Color(0x0a0f24);
  else if (bgMode === 'warm')  scene.background = new THREE.Color(0xf6f0e0);
  else                          scene.background = new THREE.Color(0xdcd9d4);  // light / studio-grau
}

function animate() {
  requestAnimationFrame(animate);
  controls.update();
  if (sectionEnabled && sectionPlane && modelBBox) updateSectionPlane();
  renderer.render(scene, camera);
}

// ---------- Volume / Surface / BBox-Volume berechnen (in cm³ / cm²) ----------
// Annahme: Modell-Einheiten sind mm (Standard STEP/STL aus CAD)
function computeVolumeMm3(obj) {
  let vol = 0;
  const tmp = { a: new THREE.Vector3(), b: new THREE.Vector3(), c: new THREE.Vector3() };
  obj.traverse(child => {
    if (!child.isMesh || !child.geometry) return;
    const geo = child.geometry;
    const pos = geo.attributes.position;
    const idx = geo.index;
    if (!pos) return;
    const m = child.matrixWorld;
    const get = (i) => new THREE.Vector3().fromBufferAttribute(pos, i).applyMatrix4(m);
    if (idx) {
      for (let i = 0; i < idx.count; i += 3) {
        tmp.a.copy(get(idx.getX(i)));
        tmp.b.copy(get(idx.getX(i + 1)));
        tmp.c.copy(get(idx.getX(i + 2)));
        vol += tmp.a.dot(tmp.b.clone().cross(tmp.c)) / 6;
      }
    } else {
      for (let i = 0; i < pos.count; i += 3) {
        tmp.a.copy(get(i));
        tmp.b.copy(get(i + 1));
        tmp.c.copy(get(i + 2));
        vol += tmp.a.dot(tmp.b.clone().cross(tmp.c)) / 6;
      }
    }
  });
  return Math.abs(vol);
}
function computeSurfaceMm2(obj) {
  let surf = 0;
  obj.traverse(child => {
    if (!child.isMesh || !child.geometry) return;
    const geo = child.geometry;
    const pos = geo.attributes.position;
    const idx = geo.index;
    if (!pos) return;
    const m = child.matrixWorld;
    const get = (i) => new THREE.Vector3().fromBufferAttribute(pos, i).applyMatrix4(m);
    const ab = new THREE.Vector3(), ac = new THREE.Vector3();
    if (idx) {
      for (let i = 0; i < idx.count; i += 3) {
        const a = get(idx.getX(i));
        const b = get(idx.getX(i + 1));
        const c = get(idx.getX(i + 2));
        ab.subVectors(b, a); ac.subVectors(c, a);
        surf += ab.cross(ac).length() / 2;
      }
    } else {
      for (let i = 0; i < pos.count; i += 3) {
        const a = get(i);
        const b = get(i + 1);
        const c = get(i + 2);
        ab.subVectors(b, a); ac.subVectors(c, a);
        surf += ab.cross(ac).length() / 2;
      }
    }
  });
  return surf;
}

function updateMaterialPanel() {
  if (!currentMesh) return;
  materialPanel.style.display = 'flex';
  const density = parseFloat(document.getElementById('vtb-material').value) || 7.85;
  const volCm3 = modelVolumeCm3;
  const bboxCm3 = modelBBoxVolumeCm3;
  const weightG = volCm3 * density;
  const rawG    = bboxCm3 * density;
  document.getElementById('vtb-volume').textContent  = volCm3.toFixed(1) + ' cm³';
  document.getElementById('vtb-surface').textContent = modelSurfaceCm2.toFixed(1) + ' cm²';
  document.getElementById('vtb-weight').textContent  = (weightG >= 1000 ? (weightG / 1000).toFixed(2) + ' kg' : weightG.toFixed(0) + ' g');
  document.getElementById('vtb-rawweight').textContent = (rawG >= 1000 ? (rawG / 1000).toFixed(2) + ' kg' : rawG.toFixed(0) + ' g');
}

function finalizeLoad() {
  hint.style.display = 'none';
  clearBtn.style.display = 'inline-flex';
  toolbar.style.display = 'flex';

  currentMesh.updateMatrixWorld(true);
  modelVolumeCm3  = computeVolumeMm3(currentMesh) / 1000;
  modelSurfaceCm2 = computeSurfaceMm2(currentMesh) / 100;
  modelBBox = new THREE.Box3().setFromObject(currentMesh);
  const size = modelBBox.getSize(new THREE.Vector3());
  modelBBoxVolumeCm3 = (size.x * size.y * size.z) / 1000;

  // Snap-Daten lazy beim ersten Klick auf Mess-Tool
  snapEdges = [];
  snapVertices = [];

  frameMesh(currentMesh);
  updateMaterialPanel();
  hideLoading();
  hideError();
}

// ---------- Snap-Daten extrahieren (für Edge-/Vertex-/Midpoint-Snap) ----------
function buildSnapData(group) {
  snapEdges = [];
  const vertSet = new Map();   // key="x,y,z" → Vec3, deduplizierung
  const round = v => v.toFixed(3);
  group.traverse(child => {
    if (!child.isMesh || !child.geometry) return;
    const eg = new THREE.EdgesGeometry(child.geometry, 20);  // 20° = scharfe Kanten
    const pos = eg.attributes.position.array;
    const m = child.matrixWorld;
    for (let i = 0; i < pos.length; i += 6) {
      const a = new THREE.Vector3(pos[i],   pos[i+1], pos[i+2]).applyMatrix4(m);
      const b = new THREE.Vector3(pos[i+3], pos[i+4], pos[i+5]).applyMatrix4(m);
      const mid = a.clone().add(b).multiplyScalar(0.5);
      snapEdges.push({ a, b, mid, len: a.distanceTo(b) });
      // Vertices dedupliziert sammeln (3 Nachkommastellen reichen für mm-Modelle)
      const ka = `${round(a.x)},${round(a.y)},${round(a.z)}`;
      const kb = `${round(b.x)},${round(b.y)},${round(b.z)}`;
      if (!vertSet.has(ka)) vertSet.set(ka, a);
      if (!vertSet.has(kb)) vertSet.set(kb, b);
    }
    eg.dispose();
  });
  snapVertices = Array.from(vertSet.values());
}

// ---------- Snap: World-Point → nearest Vertex / Edge / Midpoint within screen-tolerance ----------
function snapPoint(worldPoint, mouseScreen) {
  // Priorität: Vertex > Edge-Midpoint > Edge > Surface (fallback)
  // Schwellenwert in Pixeln — relativ zur Bildschirm-Distanz
  const TOL_VERT_PX = 14;
  const TOL_MID_PX  = 12;
  const TOL_EDGE_PX = 10;

  const w = renderer.domElement.clientWidth;
  const h = renderer.domElement.clientHeight;
  const toScreen = (v) => {
    const p = v.clone().project(camera);
    return new THREE.Vector2((p.x + 1) * 0.5 * w, (1 - (p.y + 1) * 0.5) * h);
  };

  // Vertices
  let bestVert = { dist: Infinity, pt: null };
  for (const v of snapVertices) {
    const s = toScreen(v);
    const d = s.distanceTo(mouseScreen);
    if (d < bestVert.dist) { bestVert.dist = d; bestVert.pt = v; }
  }
  if (bestVert.dist < TOL_VERT_PX) return { type: 'vertex', point: bestVert.pt };

  // Edge-Midpoints
  let bestMid = { dist: Infinity, pt: null };
  for (const e of snapEdges) {
    const s = toScreen(e.mid);
    const d = s.distanceTo(mouseScreen);
    if (d < bestMid.dist) { bestMid.dist = d; bestMid.pt = e.mid; }
  }
  if (bestMid.dist < TOL_MID_PX) return { type: 'midpoint', point: bestMid.pt };

  // Edges — Punkt-zu-Linie-Abstand im Screen-Space
  let bestEdge = { dist: Infinity, pt: null };
  for (const e of snapEdges) {
    const sa = toScreen(e.a);
    const sb = toScreen(e.b);
    // Parameter t auf der Edge, geclamped [0,1]
    const ab = sb.clone().sub(sa);
    const lenSq = ab.lengthSq();
    if (lenSq < 0.0001) continue;
    const t = Math.max(0, Math.min(1, mouseScreen.clone().sub(sa).dot(ab) / lenSq));
    const projScreen = sa.clone().add(ab.multiplyScalar(t));
    const d = projScreen.distanceTo(mouseScreen);
    if (d < bestEdge.dist) {
      bestEdge.dist = d;
      // Projection auf Edge im 3D-Raum (gleicher Parameter t)
      bestEdge.pt = e.a.clone().lerp(e.b, t);
    }
  }
  if (bestEdge.dist < TOL_EDGE_PX) return { type: 'edge', point: bestEdge.pt };

  // Fallback: Surface (original Raycaster-Hit)
  return { type: 'surface', point: worldPoint };
}

function frameMesh(obj) {
  const box = new THREE.Box3().setFromObject(obj);
  const size = box.getSize(new THREE.Vector3());
  const center = box.getCenter(new THREE.Vector3());
  obj.position.sub(center);
  obj.updateMatrixWorld(true);
  modelBBox = new THREE.Box3().setFromObject(obj);
  const max = Math.max(size.x, size.y, size.z);
  camera.position.set(max * 1.5, max * 1.0, max * 1.5);
  camera.lookAt(0, 0, 0);
  controls.target.set(0, 0, 0);
  controls.update();

  let triCount = 0;
  obj.traverse(c => {
    if (c.isMesh && c.geometry) {
      triCount += (c.geometry.index ? c.geometry.index.count / 3 : c.geometry.attributes.position.count / 3);
    }
  });
  stats.innerHTML = `Größe: ${size.x.toFixed(1)} × ${size.y.toFixed(1)} × ${size.z.toFixed(1)} mm<br>` +
                    `Dreiecke: ${Math.round(triCount).toLocaleString('de-DE')}`;
  stats.style.display = 'block';
}

function clearModel() {
  if (currentMesh) {
    scene.remove(currentMesh);
    currentMesh.traverse(c => { if (c.geometry) c.geometry.dispose(); if (c.material) { if (Array.isArray(c.material)) c.material.forEach(m => m.dispose()); else c.material.dispose(); } });
    currentMesh = null;
  }
  clearMeasurements();
  clearHoleViz();
  clearRadiusViz();
  clearAngleViz();
  clearChamferViz();
  clearHoverHighlight();
  if (sectionHelper) { scene.remove(sectionHelper); sectionHelper = null; }
  snapEdges = [];
  snapVertices = [];
  modelBBox = null;
  modelVolumeCm3 = modelSurfaceCm2 = modelBBoxVolumeCm3 = 0;
}

function loadFromArrayBuffer(name, ab) {
  hideError();
  const ext = (name.split('.').pop() || '').toLowerCase();
  if (CAD_EXT.includes(ext)) {
    loadCadFile(name, ab);
    return;
  }
  clearModel();
  let mesh;
  try {
    if (ext === 'stl') {
      const geom = new STLLoader().parse(ab);
      geom.computeVertexNormals();
      mesh = new THREE.Mesh(geom, makeMaterial(0xb0bec5));
    } else if (ext === 'obj') {
      mesh = new OBJLoader().parse(new TextDecoder().decode(ab));
      mesh.traverse(c => { if (c.isMesh) c.material = makeMaterial(0xb0bec5); });
    } else if (ext === '3mf') {
      mesh = new ThreeMFLoader().parse(ab);
      mesh.traverse(c => { if (c.isMesh) c.material = makeMaterial(0xb0bec5); });
    } else {
      showError('Format „.' + ext + '" nicht unterstützt. Erlaubt: STL · OBJ · 3MF · STEP · IGES.');
      return;
    }
  } catch (e) {
    showError('Datei konnte nicht gelesen werden: ' + (e.message || e));
    return;
  }
  scene.add(mesh);
  currentMesh = mesh;
  finalizeLoad();
}

function readFile(file) {
  hideError();
  if (!file) return;
  const ext = (file.name.split('.').pop() || '').toLowerCase();
  if (!SUPPORTED_EXT.includes(ext)) {
    showError('Format „.' + ext + '" nicht unterstützt. Erlaubt: STL · OBJ · 3MF · STEP · IGES.');
    return;
  }
  const maxMb = CAD_EXT.includes(ext) ? 80 : 30;
  if (file.size > maxMb * 1024 * 1024) {
    showError('Datei zu groß: ' + (file.size / 1024 / 1024).toFixed(1) + ' MB. Maximum ' + maxMb + ' MB für ' + ext.toUpperCase() + '.');
    return;
  }
  const r = new FileReader();
  r.onerror = () => showError('Datei konnte nicht gelesen werden.');
  r.onload  = () => {
    currentFileName = file.name;
    currentFileBuffer = r.result;   // für Session-Restore + Beleg-Anhang
    measurementHistory = [];        // Neue Datei → History leeren
    renderProtocolTable();
    clearLabels();
    loadFromArrayBuffer(file.name, r.result);
  };
  r.readAsArrayBuffer(file);
}

function resetViewer() {
  clearModel();
  hint.style.display = 'flex';
  stats.style.display = 'none';
  clearBtn.style.display = 'none';
  toolbar.style.display = 'none';
  materialPanel.style.display = 'none';
  measureHint.style.display = 'none';
  measureMode = false;
  holeMode = false;
  radiusMode = false;
  angleMode = false;
  chamferMode = false;
  pocketMode = false; depthMode = false; edgeMode = false; holespanMode = false;
  depthFirst = null; holespanFirst = null;
  document.getElementById('vtb-measure').classList.remove('is-active');
  document.getElementById('vtb-hole').classList.remove('is-active');
  document.getElementById('vtb-radius').classList.remove('is-active');
  document.getElementById('vtb-angle').classList.remove('is-active');
  document.getElementById('vtb-chamfer').classList.remove('is-active');
  ['vtb-pocket','vtb-depth','vtb-edge','vtb-holespan'].forEach(id => {
    const b = document.getElementById(id); if (b) b.classList.remove('is-active');
  });
  measurementHistory = [];
  renderProtocolTable();
  clearLabels();
  fileInput.value = '';
  hideError();
}

// ---------- Standard-Ansichten ----------
function setView(view) {
  if (!modelBBox) return;
  const size = modelBBox.getSize(new THREE.Vector3());
  const max = Math.max(size.x, size.y, size.z) || 100;
  const d = max * 1.8;
  const positions = {
    iso:    [ d * 0.9,  d * 0.7,  d * 0.9],
    front:  [ 0,        0,        d * 1.4],
    back:   [ 0,        0,       -d * 1.4],
    left:   [-d * 1.4,  0,        0],
    right:  [ d * 1.4,  0,        0],
    top:    [ 0,        d * 1.4,  0.01],
    bottom: [ 0,       -d * 1.4,  0.01],
  };
  const p = positions[view] || positions.iso;
  camera.position.set(p[0], p[1], p[2]);
  camera.up.set(0, 1, 0);
  camera.lookAt(0, 0, 0);
  controls.target.set(0, 0, 0);
  controls.update();
}

// ---------- Render-Mode Toggle ----------
function cycleRenderMode() {
  const order = ['solid', 'wireframe', 'xray'];
  renderMode = order[(order.indexOf(renderMode) + 1) % order.length];
  document.getElementById('vtb-mode').textContent =
    renderMode === 'solid' ? 'Solid' : (renderMode === 'wireframe' ? 'Wire' : 'X-Ray');
  reapplyMaterials();
}
function reapplyMaterials() {
  if (!currentMesh) return;
  currentMesh.traverse(c => {
    if (c.isMesh) {
      const oldColor = (c.material && c.material.color) ? c.material.color.getHex() : 0xb0bec5;
      if (c.material) {
        if (Array.isArray(c.material)) c.material.forEach(m => m.dispose());
        else c.material.dispose();
      }
      c.material = makeMaterial(oldColor);
    }
  });
}

// ---------- Hintergrund ----------
function cycleBackground() {
  // 3 Modi: light Studio-Grau (default) → dunkel → warm cream
  const order = ['light', 'dark', 'warm'];
  bgMode = order[(order.indexOf(bgMode) + 1) % order.length];
  if (bgMode === 'light') {
    container.style.background =
      'radial-gradient(ellipse at 50% 30%, #e8e6e2 0%, #d2cfca 70%, #b8b5b0 100%)';
    scene.background = new THREE.Color(0xdcd9d4);
  } else if (bgMode === 'dark') {
    container.style.background = '#0a0f24';
    scene.background = new THREE.Color(0x0a0f24);
  } else { // warm cream
    container.style.background =
      'radial-gradient(ellipse at 50% 30%, #fbf6ea 0%, #ede4cf 70%, #ddd3bc 100%)';
    scene.background = new THREE.Color(0xf6f0e0);
  }
}

// ---------- Cross-Section ----------
function toggleSection() {
  sectionEnabled = !sectionEnabled;
  document.getElementById('vtb-section').classList.toggle('is-active', sectionEnabled);
  document.getElementById('vtb-section-controls').style.display = sectionEnabled ? 'flex' : 'none';
  if (sectionEnabled) {
    sectionPlane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
    sectionHelper = new THREE.PlaneHelper(sectionPlane, 1, 0xf2581b);
    scene.add(sectionHelper);
    updateSectionPlane();
  } else {
    if (sectionHelper) { scene.remove(sectionHelper); sectionHelper = null; }
    sectionPlane = null;
  }
  reapplyMaterials();
}
function updateSectionPlane() {
  if (!sectionPlane || !modelBBox) return;
  const min = modelBBox.min, max = modelBBox.max;
  const axisMap = { x: ['x', new THREE.Vector3(1,0,0)],
                    y: ['y', new THREE.Vector3(0,1,0)],
                    z: ['z', new THREE.Vector3(0,0,1)] };
  const [k, normal] = axisMap[sectionAxis];
  const range = max[k] - min[k];
  const cutAt = min[k] + range * sectionT;
  const finalNormal = normal.clone().multiplyScalar(sectionFlipped ? -1 : 1);
  sectionPlane.normal.copy(finalNormal);
  sectionPlane.constant = sectionFlipped ? cutAt : -cutAt;
  if (sectionHelper) {
    sectionHelper.size = Math.max(modelBBox.getSize(new THREE.Vector3()).length() * 0.7, 50);
  }
}

// ---------- Screenshot ----------
function takeScreenshot() {
  renderer.render(scene, camera);
  const data = renderer.domElement.toDataURL('image/png');
  const a = document.createElement('a');
  const fname = (currentMesh && currentMesh.userData && currentMesh.userData.name) || 'modell';
  a.download = `${fname}-${new Date().toISOString().slice(0,16).replace(/[:T]/g,'-')}.png`;
  a.href = data;
  a.click();
}

// ---------- Click-to-Measure ----------
function ensureSnapData() {
  if (snapEdges.length > 0 || !currentMesh) return;
  buildSnapData(currentMesh);
}
function toggleMeasure() {
  const enable = !measureMode;
  disableAllAnalysisModes();
  measureMode = enable;
  document.getElementById('vtb-measure').classList.toggle('is-active', measureMode);
  measureHint.style.display = measureMode ? 'block' : 'none';
  if (measureMode) {
    measurePoints = [];
    measureHint.innerHTML = '<strong>Mess-Modus:</strong> Snap-Daten werden vorbereitet …';
    container.style.cursor = 'crosshair';
    // Async damit der Toggle-Button visuell sofort reagiert
    setTimeout(() => {
      ensureSnapData();
      if (measureMode) {
        measureHint.innerHTML = '<strong>Mess-Modus:</strong> 1. Punkt klicken … <span style="opacity:0.55;font-size:10px;">snappt an Ecken (gelb), Kanten (orange), Mittelpunkten (lila)</span>';
      }
    }, 50);
  } else {
    container.style.cursor = '';
  }
}
function toggleHole() {
  const enable = !holeMode;
  disableAllAnalysisModes();
  holeMode = enable;
  document.getElementById('vtb-hole').classList.toggle('is-active', holeMode);
  measureHint.style.display = holeMode ? 'block' : 'none';
  if (holeMode) {
    measureHint.innerHTML = '<strong>Bohrungs-Modus:</strong> Maus über Fläche bewegen — orange markiert = erkannt. Klick analysiert.';
    container.style.cursor = 'crosshair';
  } else {
    container.style.cursor = '';
  }
}
function toggleRadius() {
  const enable = !radiusMode;
  disableAllAnalysisModes();
  radiusMode = enable;
  document.getElementById('vtb-radius').classList.toggle('is-active', radiusMode);
  measureHint.style.display = radiusMode ? 'block' : 'none';
  if (radiusMode) {
    measureHint.innerHTML = '<strong>Radius-Modus:</strong> Maus über gekrümmte Fläche bewegen — lila markiert = erkannt. Klick analysiert.';
    container.style.cursor = 'crosshair';
  } else {
    container.style.cursor = '';
  }
}
function clearRadiusViz() {
  if (radiusGroup) { scene.remove(radiusGroup); radiusGroup.traverse(c => {
    if (c.geometry) c.geometry.dispose();
    if (c.material) c.material.dispose && c.material.dispose();
  }); radiusGroup = null; }
}
function clearMeasurements() {
  if (measureGroup) { scene.remove(measureGroup); measureGroup.traverse(c => {
    if (c.geometry) c.geometry.dispose();
    if (c.material) c.material.dispose && c.material.dispose();
  }); measureGroup = null; }
  measurePoints = [];
}
function clearHoleViz() {
  if (holeGroup) { scene.remove(holeGroup); holeGroup.traverse(c => {
    if (c.geometry) c.geometry.dispose();
    if (c.material) c.material.dispose && c.material.dispose();
  }); holeGroup = null; }
}
function clearAngleViz() {
  if (angleGroup) { scene.remove(angleGroup); angleGroup.traverse(c => {
    if (c.geometry) c.geometry.dispose();
    if (c.material) c.material.dispose && c.material.dispose();
  }); angleGroup = null; }
  anglePoints = [];
}
function clearChamferViz() {
  if (chamferGroup) { scene.remove(chamferGroup); chamferGroup.traverse(c => {
    if (c.geometry) c.geometry.dispose();
    if (c.material) c.material.dispose && c.material.dispose();
  }); chamferGroup = null; }
}

function clearPocketViz() {
  if (pocketGroup) { scene.remove(pocketGroup); pocketGroup.traverse(c => {
    if (c.geometry) c.geometry.dispose();
    if (c.material) c.material.dispose && c.material.dispose();
  }); pocketGroup = null; }
}
function clearDepthViz() {
  if (depthGroup) { scene.remove(depthGroup); depthGroup.traverse(c => {
    if (c.geometry) c.geometry.dispose();
    if (c.material) c.material.dispose && c.material.dispose();
  }); depthGroup = null; }
  depthFirst = null;
}
function clearEdgeViz() {
  if (edgeGroup) { scene.remove(edgeGroup); edgeGroup.traverse(c => {
    if (c.geometry) c.geometry.dispose();
    if (c.material) c.material.dispose && c.material.dispose();
  }); edgeGroup = null; }
}
function clearHolespanViz() {
  if (holespanGroup) { scene.remove(holespanGroup); holespanGroup.traverse(c => {
    if (c.geometry) c.geometry.dispose();
    if (c.material) c.material.dispose && c.material.dispose();
  }); holespanGroup = null; }
  holespanFirst = null;
}

function disableAllAnalysisModes() {
  if (measureMode)  { measureMode  = false; document.getElementById('vtb-measure').classList.remove('is-active'); clearMeasurements(); }
  if (holeMode)     { holeMode     = false; document.getElementById('vtb-hole').classList.remove('is-active');    clearHoleViz(); }
  if (radiusMode)   { radiusMode   = false; document.getElementById('vtb-radius').classList.remove('is-active');  clearRadiusViz(); }
  if (angleMode)    { angleMode    = false; document.getElementById('vtb-angle').classList.remove('is-active');   clearAngleViz(); }
  if (chamferMode)  { chamferMode  = false; document.getElementById('vtb-chamfer').classList.remove('is-active'); clearChamferViz(); }
  if (pocketMode)   { pocketMode   = false; const b=document.getElementById('vtb-pocket');   if (b) b.classList.remove('is-active'); clearPocketViz(); }
  if (depthMode)    { depthMode    = false; const b=document.getElementById('vtb-depth');    if (b) b.classList.remove('is-active'); clearDepthViz(); }
  if (edgeMode)     { edgeMode     = false; const b=document.getElementById('vtb-edge');     if (b) b.classList.remove('is-active'); clearEdgeViz(); }
  if (holespanMode) { holespanMode = false; const b=document.getElementById('vtb-holespan'); if (b) b.classList.remove('is-active'); clearHolespanViz(); }
  clearHoverHighlight();
}

// === 3D-Labels (Mess-Nummern am Bauteil) ====================================
// Jeder History-Eintrag mit `anchor` (THREE.Vector3-like) bekommt einen
// Sprite mit seiner laufenden Nummer. Sprites sind immer kamera-aligned.
function makeNumberSprite(number, hexColor) {
  const sz = 128;
  const c = document.createElement('canvas');
  c.width = c.height = sz;
  const ctx = c.getContext('2d');
  // Schatten
  ctx.fillStyle = 'rgba(0,0,0,0.45)';
  ctx.beginPath(); ctx.arc(sz/2 + 2, sz/2 + 4, sz*0.42, 0, Math.PI*2); ctx.fill();
  // Kreis-Hintergrund
  ctx.fillStyle = hexColor || '#FF6B35';
  ctx.beginPath(); ctx.arc(sz/2, sz/2, sz*0.40, 0, Math.PI*2); ctx.fill();
  // weißer Ring
  ctx.strokeStyle = 'rgba(255,255,255,0.95)';
  ctx.lineWidth = sz*0.05;
  ctx.beginPath(); ctx.arc(sz/2, sz/2, sz*0.40, 0, Math.PI*2); ctx.stroke();
  // Nummer
  ctx.fillStyle = '#fff';
  const txt = String(number);
  const fs = txt.length <= 2 ? sz*0.50 : sz*0.36;
  ctx.font = `bold ${fs}px ui-sans-serif, system-ui, -apple-system, sans-serif`;
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillText(txt, sz/2, sz*0.55);
  const tex = new THREE.CanvasTexture(c);
  tex.minFilter = THREE.LinearFilter;
  tex.needsUpdate = true;
  const mat = new THREE.SpriteMaterial({ map: tex, depthTest: false, transparent: true });
  const sprite = new THREE.Sprite(mat);
  const diag = modelBBox ? modelBBox.getSize(new THREE.Vector3()).length() : 100;
  const s = diag * 0.05;
  sprite.scale.set(s, s, 1);
  sprite.renderOrder = 9999;
  return sprite;
}
function rebuildLabels() {
  if (!scene) return;
  if (!labelGroup) { labelGroup = new THREE.Group(); scene.add(labelGroup); }
  // Alte Sprites entsorgen
  while (labelGroup.children.length) {
    const s = labelGroup.children.pop();
    if (s.material) { if (s.material.map) s.material.map.dispose(); s.material.dispose(); }
  }
  if (!measurementHistory || measurementHistory.length === 0) return;
  const colorByType = {
    'measure':  '#FF6B35',
    'hole':     '#FACC15',
    'radius':   '#A78BFA',
    'angle':    '#34D399',
    'chamfer':  '#FB923C',
    'pocket':   '#60A5FA',
    'depth':    '#22D3EE',
    'edge':     '#F472B6',
    'holespan': '#FCD34D',
    'counterbore': '#FBBF24',
    'manual':   '#A3A3A3',
  };
  measurementHistory.forEach((h, i) => {
    if (!h.anchor || h.anchor.x == null) return;
    const color = colorByType[h.type] || '#FF6B35';
    const sprite = makeNumberSprite(i + 1, color);
    sprite.position.set(h.anchor.x, h.anchor.y, h.anchor.z);
    labelGroup.add(sprite);
  });
}
function clearLabels() {
  if (!labelGroup) return;
  while (labelGroup.children.length) {
    const s = labelGroup.children.pop();
    if (s.material) { if (s.material.map) s.material.map.dispose(); s.material.dispose(); }
  }
}
function toggleAngle() {
  const enable = !angleMode;
  disableAllAnalysisModes();
  angleMode = enable;
  document.getElementById('vtb-angle').classList.toggle('is-active', angleMode);
  measureHint.style.display = angleMode ? 'block' : 'none';
  if (angleMode) {
    anglePoints = [];
    measureHint.innerHTML = '<strong>Winkel-Modus:</strong> 1. Fläche klicken …';
    container.style.cursor = 'crosshair';
  } else {
    container.style.cursor = '';
  }
}
function toggleChamfer() {
  const enable = !chamferMode;
  disableAllAnalysisModes();
  chamferMode = enable;
  document.getElementById('vtb-chamfer').classList.toggle('is-active', chamferMode);
  measureHint.style.display = chamferMode ? 'block' : 'none';
  if (chamferMode) {
    measureHint.innerHTML = '<strong>Fasen-Modus:</strong> Auf eine Fase klicken — Breite + Winkel werden erkannt.';
    container.style.cursor = 'crosshair';
  } else {
    container.style.cursor = '';
  }
}
function togglePocket() {
  const enable = !pocketMode;
  disableAllAnalysisModes();
  pocketMode = enable;
  const b = document.getElementById('vtb-pocket'); if (b) b.classList.toggle('is-active', pocketMode);
  measureHint.style.display = pocketMode ? 'block' : 'none';
  if (pocketMode) {
    measureHint.innerHTML = '<strong>Taschen-Modus:</strong> In den Taschen-<em>Boden</em> klicken — L × B × Tiefe wird erkannt.';
    container.style.cursor = 'crosshair';
  } else { container.style.cursor = ''; }
}
function toggleDepth() {
  const enable = !depthMode;
  disableAllAnalysisModes();
  depthMode = enable;
  const b = document.getElementById('vtb-depth'); if (b) b.classList.toggle('is-active', depthMode);
  measureHint.style.display = depthMode ? 'block' : 'none';
  if (depthMode) {
    depthFirst = null;
    measureHint.innerHTML = '<strong>Tiefen-Modus:</strong> 1. <em>Bezugsfläche</em> klicken (z.B. Oberseite) …';
    container.style.cursor = 'crosshair';
  } else { container.style.cursor = ''; }
}
function toggleEdge() {
  const enable = !edgeMode;
  disableAllAnalysisModes();
  edgeMode = enable;
  const b = document.getElementById('vtb-edge'); if (b) b.classList.toggle('is-active', edgeMode);
  measureHint.style.display = edgeMode ? 'block' : 'none';
  if (edgeMode) {
    measureHint.innerHTML = '<strong>Kanten-Modus:</strong> Auf eine Kante klicken — Länge des Kanten-Loops wird summiert.';
    container.style.cursor = 'crosshair';
  } else { container.style.cursor = ''; }
}
function toggleHolespan() {
  const enable = !holespanMode;
  disableAllAnalysisModes();
  holespanMode = enable;
  const b = document.getElementById('vtb-holespan'); if (b) b.classList.toggle('is-active', holespanMode);
  measureHint.style.display = holespanMode ? 'block' : 'none';
  if (holespanMode) {
    holespanFirst = null;
    measureHint.innerHTML = '<strong>Lochabstand-Modus:</strong> 1. <em>Bohrung</em> anklicken …';
    container.style.cursor = 'crosshair';
  } else { container.style.cursor = ''; }
}
function clearHoverHighlight() {
  if (hoverGroup) { scene.remove(hoverGroup); hoverGroup.traverse(c => {
    if (c.geometry) c.geometry.dispose();
    if (c.material) c.material.dispose && c.material.dispose();
  }); hoverGroup = null; }
}

// ===== Bohrungs-Erkennung — robust mit BBox-Hauptachsen-Hypothesen ============
// Statt PCA aus zufälligen Nachbar-Triangles (instabil bei kleinen Bohrungen)
// testen wir mehrere Achsen-Kandidaten (X/Y/Z + Hit-Normal-Senkrechte) und
// nehmen die Achse mit dem größten zylindrischen Cluster.
//
// Output: { axis, centroid, radius, cluster, axialMin, axialMax } oder null.

function detectHole(hit, opts) {
  const lightweight = !!(opts && opts.lightweight);
  const mesh = hit.object;
  const geo = mesh.geometry;
  const pos = geo.attributes.position;
  const idx = geo.index;
  if (!pos) return null;
  const m = mesh.matrixWorld;
  const triIdx = hit.faceIndex;
  if (triIdx == null) return null;

  const getTri = (i) => {
    let ia, ib, ic;
    if (idx) { ia = idx.getX(i*3); ib = idx.getX(i*3+1); ic = idx.getX(i*3+2); }
    else { ia = i*3; ib = i*3+1; ic = i*3+2; }
    const a = new THREE.Vector3().fromBufferAttribute(pos, ia).applyMatrix4(m);
    const b = new THREE.Vector3().fromBufferAttribute(pos, ib).applyMatrix4(m);
    const c = new THREE.Vector3().fromBufferAttribute(pos, ic).applyMatrix4(m);
    const center = a.clone().add(b).add(c).multiplyScalar(1/3);
    const normal = new THREE.Vector3().subVectors(b, a).cross(new THREE.Vector3().subVectors(c, a)).normalize();
    return { i, a, b, c, center, normal };
  };

  const triCount = idx ? idx.count / 3 : pos.count / 3;
  const hitTri = getTri(triIdx);
  const BBOX_DIAG = modelBBox ? modelBBox.getSize(new THREE.Vector3()).length() : 100;

  // 1. Sammle Triangles im 3D-Umkreis vom Hit
  //    Hover: kleiner Radius (für schnelle Reaktion). Klick: größerer Radius.
  //    Performance: Vor-Filter via Bounding-Sphere-Distance ohne Vector3-Allokation.
  const SEARCH_R = BBOX_DIAG * (lightweight ? 0.06 : 0.12);
  const MAX_TRIS = lightweight ? 100 : 400;
  const SEARCH_R_SQ = SEARCH_R * SEARCH_R;
  const hx = hitTri.center.x, hy = hitTri.center.y, hz = hitTri.center.z;
  const nearby = [hitTri];
  // Schneller Pre-Filter: nur Triangle-Centers ohne volles getTri() ausrechnen
  for (let i = 0; i < triCount; i++) {
    if (i === triIdx) continue;
    // Read 3 vertices direkt und compute center inline (kein Vector3-Allocation)
    let ia, ib, ic;
    if (idx) { ia = idx.getX(i*3); ib = idx.getX(i*3+1); ic = idx.getX(i*3+2); }
    else { ia = i*3; ib = i*3+1; ic = i*3+2; }
    // Vertices direkt holen (skip matrix-transform vorerst — assume identity matrix
    // wenn dieses Triangle gar nicht in der Nähe ist, machen wir keine Transform)
    const ax = pos.getX(ia), ay = pos.getY(ia), az = pos.getZ(ia);
    const bx = pos.getX(ib), by = pos.getY(ib), bz = pos.getZ(ib);
    const cx = pos.getX(ic), cy = pos.getY(ic), cz = pos.getZ(ic);
    // Center in mesh-local space — approximation OK, exakte Distanz wird gleich geprüft
    const lcx = (ax+bx+cx) / 3, lcy = (ay+by+cy) / 3, lcz = (az+bz+cz) / 3;
    // Transform to world (matrix-mult)
    const me = m.elements;
    const wcx = me[0]*lcx + me[4]*lcy + me[8]*lcz + me[12];
    const wcy = me[1]*lcx + me[5]*lcy + me[9]*lcz + me[13];
    const wcz = me[2]*lcx + me[6]*lcy + me[10]*lcz + me[14];
    const dx = wcx - hx, dy = wcy - hy, dz = wcz - hz;
    if (dx*dx + dy*dy + dz*dz > SEARCH_R_SQ) continue;
    // Nur jetzt komplettes Triangle-Objekt aufbauen
    const t = getTri(i);
    nearby.push(t);
    if (nearby.length >= MAX_TRIS) break;
  }
  if (nearby.length < 5) return null;

  // 2. Kandidaten-Achsen sammeln:
  //    a) 3 BBox-Hauptachsen (X, Y, Z) — meiste Bohrungen sind parallel dazu
  //    b) 2 Achsen senkrecht zur Hit-Normale (in der Hit-Tangentialebene)
  //    c) PCA-Kleinste-Eigenwert-Achse aus den Nachbar-Normalen
  const candidates = [
    new THREE.Vector3(1, 0, 0),
    new THREE.Vector3(0, 1, 0),
    new THREE.Vector3(0, 0, 1),
  ];
  const hN = hitTri.normal.clone().normalize();
  const refA = Math.abs(hN.y) < 0.9 ? new THREE.Vector3(0, 1, 0) : new THREE.Vector3(1, 0, 0);
  const perp1 = new THREE.Vector3().crossVectors(hN, refA).normalize();
  if (perp1.length() > 0.1) candidates.push(perp1);
  const perp2 = new THREE.Vector3().crossVectors(hN, perp1).normalize();
  if (perp2.length() > 0.1) candidates.push(perp2);
  // PCA aus Nachbar-Normalen
  {
    const cov = [[0,0,0],[0,0,0],[0,0,0]];
    for (const t of nearby) {
      const n = t.normal;
      cov[0][0]+=n.x*n.x; cov[0][1]+=n.x*n.y; cov[0][2]+=n.x*n.z;
      cov[1][1]+=n.y*n.y; cov[1][2]+=n.y*n.z;
      cov[2][2]+=n.z*n.z;
    }
    cov[1][0]=cov[0][1]; cov[2][0]=cov[0][2]; cov[2][1]=cov[1][2];
    for (let r=0;r<3;r++) for (let cc=0;cc<3;cc++) cov[r][cc] /= nearby.length;
    const eig = jacobi3(cov);
    let mi = 0;
    if (eig.values[1] < eig.values[mi]) mi = 1;
    if (eig.values[2] < eig.values[mi]) mi = 2;
    candidates.push(new THREE.Vector3(eig.vectors[0][mi], eig.vectors[1][mi], eig.vectors[2][mi]).normalize());
  }

  // 3. Für jede Achse: scoring
  //    Score = Anzahl Triangles die: (a) radial zur Achse (|n·axis| < 0.40)
  //                                   (b) Distance-to-axis nahe Hit-Triangle-Distance
  let best = null;
  for (const axRaw of candidates) {
    if (axRaw.length() < 0.5) continue;
    const ax = axRaw.clone().normalize();
    // Hit-Triangle muss auch radial sein zur Achse, sonst macht Achse keinen Sinn
    if (Math.abs(hitTri.normal.dot(ax)) > 0.45) continue;
    // Filter: radial-orientierte Triangles
    const radial = nearby.filter(t => Math.abs(t.normal.dot(ax)) < 0.40);
    if (radial.length < 5) continue;
    // Centroid auf Achse (Mittel der Radial-Centers)
    const centroidGuess = new THREE.Vector3();
    for (const t of radial) centroidGuess.add(t.center);
    centroidGuess.divideScalar(radial.length);
    // Distance-Funktion zur Achse durch centroidGuess
    const dToAxis = (p) => {
      const v = p.clone().sub(centroidGuess);
      const along = ax.clone().multiplyScalar(v.dot(ax));
      return v.sub(along).length();
    };
    const hitR = dToAxis(hitTri.center);
    if (hitR < 0.1) continue;
    // Cluster: Triangles innerhalb ±25% vom Hit-Radius
    const cluster = radial.filter(t => {
      const r = dToAxis(t.center);
      return Math.abs(r - hitR) / hitR < 0.25;
    });
    if (cluster.length < 4) continue;
    if (!best || cluster.length > best.cluster.length) {
      best = { axis: ax, centroidGuess, hitR, cluster };
    }
  }

  if (!best || best.cluster.length < 4) return null;

  // 4. Verfeinerung: Achse + Centroid via PCA des Clusters
  let axis = best.axis;
  let centroid = new THREE.Vector3();
  for (const t of best.cluster) centroid.add(t.center);
  centroid.divideScalar(best.cluster.length);
  // PCA-Refine
  {
    const cov = [[0,0,0],[0,0,0],[0,0,0]];
    for (const t of best.cluster) {
      const n = t.normal;
      cov[0][0]+=n.x*n.x; cov[0][1]+=n.x*n.y; cov[0][2]+=n.x*n.z;
      cov[1][1]+=n.y*n.y; cov[1][2]+=n.y*n.z;
      cov[2][2]+=n.z*n.z;
    }
    cov[1][0]=cov[0][1]; cov[2][0]=cov[0][2]; cov[2][1]=cov[1][2];
    for (let r=0;r<3;r++) for (let cc=0;cc<3;cc++) cov[r][cc] /= best.cluster.length;
    const eig = jacobi3(cov);
    let mi = 0;
    if (eig.values[1] < eig.values[mi]) mi = 1;
    if (eig.values[2] < eig.values[mi]) mi = 2;
    const refined = new THREE.Vector3(eig.vectors[0][mi], eig.vectors[1][mi], eig.vectors[2][mi]).normalize();
    // Achse nur übernehmen wenn nicht extrem weit weg von initialer Hypothese
    if (Math.abs(refined.dot(axis)) > 0.8) axis = refined;
  }

  // 5. Radius (Median der Distance-to-axis) + Tiefe (Spread along axis)
  const dToAxis = (p) => {
    const v = p.clone().sub(centroid);
    const along = axis.clone().multiplyScalar(v.dot(axis));
    return v.sub(along).length();
  };
  const radii = best.cluster.map(t => dToAxis(t.center)).sort((a,b) => a-b);
  const radius = radii[Math.floor(radii.length / 2)];
  if (radius < 0.1) return null;
  // Final cluster: nur Triangles ±15% Median (clean trim)
  const finalCluster = best.cluster.filter(t => Math.abs(dToAxis(t.center) - radius) / radius < 0.15);
  if (finalCluster.length < 4) return null;
  const ts = finalCluster.map(t => t.center.clone().sub(centroid).dot(axis));
  const axialMin = Math.min(...ts);
  const axialMax = Math.max(...ts);
  const depth = axialMax - axialMin;
  if (depth < 0.1) return null;

  return {
    axis, centroid, radius, depth,
    cluster: finalCluster,
    axialMin, axialMax,
    hitTri,
  };
}

// Hover-Highlight: nutzt detectHole(lightweight) und zeigt das Cluster orange.
function lightRegionGrow(hit, kind) {
  if (kind === 'bohrung') {
    const r = detectHole(hit, { lightweight: true });
    return r ? r.cluster : [];
  }
  // Radius: bleibt simpler (siehe analyzeRadius — nutzt Kugel-Fit)
  return [];
}

// Klick-Handler: nutzt detectHole(full), berechnet Klassifikation + Visualisierung.
function analyzeHole(hit) {
  clearHoleViz();
  const detected = detectHole(hit, { lightweight: false });
  if (!detected) {
    showError('Keine Bohrung erkannt — bitte mittig in eine zylindrische Innenwand klicken.');
    return;
  }
  const { axis: axisDir, centroid: rawCentroid, radius: rawRadius, depth, cluster, axialMin: tMin, axialMax: tMax } = detected;
  // Refine: 2D-Kreisfit auf Tangentialebene + Material-Oberkanten-Snap
  const ref = refineHole(detected, hit.object);
  // Refine ist Bonus — wenn fehlgeschlagen, nutzen wir die rohe Detection
  const centroid = ref ? ref.centerOnAxis.clone() : rawCentroid.clone();
  const radius = ref ? ref.radius : rawRadius;
  const diameter = radius * 2;
  const pStart = centroid.clone().add(axisDir.clone().multiplyScalar(tMin));
  const pEnd   = centroid.clone().add(axisDir.clone().multiplyScalar(tMax));
  const BBOX_DIAG = modelBBox ? modelBBox.getSize(new THREE.Vector3()).length() : 100;

  // Visualisierung: Zylinder-Drahtgitter + Achsen-Linie
  holeGroup = new THREE.Group();
  // Verfeinerter Bohrungs-Kreis am Material-Eintritt — visualisiert was erkannt wurde
  if (ref) drawHoleRing(holeGroup, ref, 0xfacc15);
  const ext = depth * 0.1;
  const lineA = pStart.clone().sub(axisDir.clone().multiplyScalar(ext));
  const lineB = pEnd.clone().add(axisDir.clone().multiplyScalar(ext));
  holeGroup.add(new THREE.Line(
    new THREE.BufferGeometry().setFromPoints([lineA, lineB]),
    new THREE.LineBasicMaterial({ color: 0xfacc15, depthTest: false })
  ));
  const cyl = new THREE.Mesh(
    new THREE.CylinderGeometry(radius, radius, depth, 32, 1, true),
    new THREE.MeshBasicMaterial({ color: 0xfacc15, wireframe: true, depthTest: false, transparent: true, opacity: 0.85 })
  );
  cyl.quaternion.setFromUnitVectors(new THREE.Vector3(0,1,0), axisDir);
  cyl.position.copy(centroid).add(axisDir.clone().multiplyScalar((tMin + tMax) / 2));
  cyl.renderOrder = 998;
  holeGroup.add(cyl);
  for (const p of [pStart, pEnd]) {
    const dot = new THREE.Mesh(
      new THREE.SphereGeometry(BBOX_DIAG * 0.005, 10, 10),
      new THREE.MeshBasicMaterial({ color: 0xfacc15, depthTest: false })
    );
    dot.position.copy(p);
    dot.renderOrder = 999;
    holeGroup.add(dot);
  }
  scene.add(holeGroup);

  // Klassifikation: Durchgang vs. Sackloch via Material-Dicke-Ray
  let kind = 'Bohrung';
  let kindNote = '';
  const meshes = []; currentMesh.traverse(c => { if (c.isMesh) meshes.push(c); });
  const rayUp = new THREE.Raycaster(centroid, axisDir, 0.01, BBOX_DIAG);
  const rayDown = new THREE.Raycaster(centroid, axisDir.clone().multiplyScalar(-1), 0.01, BBOX_DIAG);
  const upHits = rayUp.intersectObjects(meshes, true);
  const downHits = rayDown.intersectObjects(meshes, true);
  const materialThickness = (upHits[0]?.distance || 0) + (downHits[0]?.distance || 0);
  if (materialThickness > 0.1) {
    const ratio = depth / materialThickness;
    if (ratio > 0.92) {
      kind = 'Durchgangsbohrung';
      kindNote = `geht durch ganzes Material (${materialThickness.toFixed(1)} mm)`;
    } else if (ratio > 0.05) {
      kind = 'Sackloch';
      kindNote = `Tiefe ${depth.toFixed(1)} mm in ${materialThickness.toFixed(1)} mm Material`;
    }
  }

  // Counterbore-Erkennung: 2. koaxialer Zylinder mit deutlich anderem Radius?
  const counterbore = detectCoaxialSecondCylinder(hit.object, centroid, axisDir, radius, BBOX_DIAG);
  let recordType = 'hole';
  let recordKind = kind;
  let valueStr = `Ø ${diameter.toFixed(2)} × T ${depth.toFixed(2)} mm`;
  let detailStr = kindNote;
  if (counterbore) {
    const dOuter = Math.max(diameter, counterbore.diameter);
    const dInner = Math.min(diameter, counterbore.diameter);
    recordType = 'counterbore';
    recordKind = 'Senkung';
    valueStr = `Ø ${dInner.toFixed(2)} → Ø ${dOuter.toFixed(2)} mm`;
    detailStr = `Stufen-Tiefe ${counterbore.stepDepth.toFixed(2)} mm · Gesamttiefe ${(depth + counterbore.depth).toFixed(2)} mm`;
    // Visualisierung 2. Zylinder
    const cyl2 = new THREE.Mesh(
      new THREE.CylinderGeometry(counterbore.radius, counterbore.radius, counterbore.depth, 32, 1, true),
      new THREE.MeshBasicMaterial({ color: 0xFBBF24, wireframe: true, depthTest: false, transparent: true, opacity: 0.85 })
    );
    cyl2.quaternion.setFromUnitVectors(new THREE.Vector3(0,1,0), axisDir);
    cyl2.position.copy(counterbore.center);
    cyl2.renderOrder = 998;
    holeGroup.add(cyl2);
  }

  measureHint.innerHTML = counterbore
    ? `<strong>Senkung / Counterbore erkannt</strong><br>` +
      `Ø innen <strong>${Math.min(diameter, counterbore.diameter).toFixed(2)} mm</strong> &nbsp;→&nbsp; ` +
      `Ø außen <strong>${Math.max(diameter, counterbore.diameter).toFixed(2)} mm</strong><br>` +
      `<span style="opacity:0.75;font-size:11px;">${detailStr}</span>`
    : `<strong>${kind} erkannt</strong><br>` +
      `Ø <strong>${diameter.toFixed(2)} mm</strong> &nbsp; · &nbsp; ` +
      `Tiefe <strong>${depth.toFixed(2)} mm</strong><br>` +
      (kindNote ? `<span style="opacity:0.75;font-size:11px;">${kindNote}</span><br>` : '') +
      `<span style="opacity:0.55;font-size:10px;">${cluster.length} Triangles im Zylinder-Fit</span>`;
  measureHint.style.display = 'block';

  // Anker: bevorzugt Material-Oberkante (deterministisch), sonst pStart-Fallback
  const anchorPt = (ref && ref.center) ? ref.center : pStart;
  pushHistory({
    type: recordType,
    kind: recordKind,
    label: `${recordKind} #${measurementHistory.filter(h=>h.type===recordType).length + 1}`,
    value: valueStr,
    detail: detailStr,
    anchor: { x: anchorPt.x, y: anchorPt.y, z: anchorPt.z },
    data: {
      diameter, depth, materialThickness, kind: recordKind,
      axis: { x: axisDir.x, y: axisDir.y, z: axisDir.z },
      start: { x: pStart.x, y: pStart.y, z: pStart.z },
      end:   { x: pEnd.x,   y: pEnd.y,   z: pEnd.z },
      triangles: cluster.length,
      counterbore: counterbore ? {
        diameter: counterbore.diameter,
        depth: counterbore.depth,
        stepDepth: counterbore.stepDepth,
      } : null,
    },
  });
}

// Sucht entlang der Bohrungsachse nach einem 2. koaxialen Zylinder mit
// deutlich anderem Radius. Nutzt selbe BBox-Achse, sammelt Triangles deren
// Normale senkrecht zur Achse steht und deren Distance-to-Axis ≠ Hauptradius.
function detectCoaxialSecondCylinder(mesh, centroid, axisDir, mainRadius, BBOX_DIAG) {
  const geo = mesh.geometry;
  const pos = geo.attributes.position;
  const idx = geo.index;
  if (!pos) return null;
  const m = mesh.matrixWorld;
  const getTri = (i) => {
    let ia, ib, ic;
    if (idx) { ia = idx.getX(i*3); ib = idx.getX(i*3+1); ic = idx.getX(i*3+2); }
    else { ia = i*3; ib = i*3+1; ic = i*3+2; }
    const a = new THREE.Vector3().fromBufferAttribute(pos, ia).applyMatrix4(m);
    const b = new THREE.Vector3().fromBufferAttribute(pos, ib).applyMatrix4(m);
    const c = new THREE.Vector3().fromBufferAttribute(pos, ic).applyMatrix4(m);
    const cen = a.clone().add(b).add(c).multiplyScalar(1/3);
    const n = new THREE.Vector3().subVectors(b, a).cross(new THREE.Vector3().subVectors(c, a)).normalize();
    return { center: cen, normal: n };
  };
  const triCount = idx ? idx.count / 3 : pos.count / 3;
  const dToAxis = (p) => {
    const v = p.clone().sub(centroid);
    const along = axisDir.clone().multiplyScalar(v.dot(axisDir));
    return v.sub(along).length();
  };
  // Sammle Kandidaten: nur INNENWÄNDE (Normale zeigt zur Achse, nicht weg),
  // Normale senkrecht zur Achse, Radius im Bereich 0.5..3.0 × main.
  // Eine Außenkontur (Bauteil-Rand) hat eine Normale die VON der Achse WEG zeigt
  // — die schließen wir hier explizit aus, damit z.B. eine runde Scheibe nicht
  // als Senkung um eine zentrale Bohrung interpretiert wird.
  const candidates = [];
  for (let i = 0; i < triCount; i++) {
    const t = getTri(i);
    if (Math.abs(t.normal.dot(axisDir)) > 0.20) continue;
    // Radialer Vektor: vom Triangle-Center zur Achse (projizierte Position auf Achse)
    const v = t.center.clone().sub(centroid);
    const along = axisDir.dot(v);
    const radialOut = v.sub(axisDir.clone().multiplyScalar(along));   // zeigt VON Achse WEG
    const r = radialOut.length();
    if (r < BBOX_DIAG * 0.0005) continue;
    if (r < mainRadius * 0.45 || r > mainRadius * 3.0) continue;
    if (Math.abs(r - mainRadius) / mainRadius < 0.20) continue;   // gehört zum Haupt-Zylinder
    // Normale muss ZUR Achse zeigen (= Innenwand). Außenwand → skip.
    const radialDir = radialOut.normalize();
    if (t.normal.dot(radialDir) > -0.5) continue;   // -1 = perfekt nach innen, +1 = nach außen
    candidates.push({ r, along });
  }
  if (candidates.length < 8) return null;
  // Histogramm 30 Bins über Radius-Range, finde dichtesten Cluster
  const rMin = candidates.reduce((m,c) => Math.min(m, c.r), Infinity);
  const rMax = candidates.reduce((m,c) => Math.max(m, c.r), -Infinity);
  const NBINS = 30;
  const bins = new Array(NBINS).fill(0);
  for (const c of candidates) {
    const b = Math.min(NBINS-1, Math.floor((c.r - rMin) / Math.max(rMax-rMin, 1e-6) * NBINS));
    bins[b]++;
  }
  let peakBin = 0;
  for (let i = 0; i < NBINS; i++) if (bins[i] > bins[peakBin]) peakBin = i;
  // Höhere Mindest-Cluster-Größe — verhindert Fehl-Treffer aus Außenkontur-Resten
  if (bins[peakBin] < 12) return null;
  const peakR = rMin + (peakBin + 0.5) / NBINS * (rMax - rMin);
  // Cluster: alle Kandidaten ±15% peakR
  const cluster = candidates.filter(c => Math.abs(c.r - peakR) / peakR < 0.18);
  if (cluster.length < 12) return null;
  const radii = cluster.map(c => c.r).sort((a,b)=>a-b);
  const r2 = radii[Math.floor(radii.length/2)];
  const alongs = cluster.map(c => c.along).sort((a,b)=>a-b);
  const aMin = alongs[0];
  const aMax = alongs[alongs.length-1];
  const len = aMax - aMin;
  // Stufen-Zylinder muss eine "echte" Tiefe haben — mind. 1% der BBox-Diagonale
  if (len < BBOX_DIAG * 0.01) return null;
  // Sanity: Counterbore-Stufentiefe darf nicht winzig (Tessellation-Artefakt)
  // und nicht riesig (Außenkontur-Treffer) sein. Akzeptabel: 0.2–4× Haupt-Bohrung-Tiefe.
  const center = centroid.clone().add(axisDir.clone().multiplyScalar((aMin + aMax) / 2));
  const stepDepth = Math.abs((aMin + aMax) / 2);
  return {
    radius: r2,
    diameter: r2 * 2,
    depth: len,
    center,
    stepDepth,
    cluster: cluster.length,
  };
}


// ===== Radius-Analyse =========================================================
// Bei Klick auf eine konvex/konkav gekrümmte Fläche: Region-Growing auf Triangles
// mit ähnlich-orientierten Normalen, dann Kugel-Fit per Least-Squares auf die
// Triangle-Center. Output: Krümmungsradius + konvex/konkav.
function analyzeRadius(hit) {
  clearRadiusViz();
  const mesh = hit.object;
  const geo = mesh.geometry;
  const pos = geo.attributes.position;
  const idx = geo.index;
  if (!pos) { showError('Keine Geometrie unter Klick.'); return; }
  const BBOX_DIAG = modelBBox ? modelBBox.getSize(new THREE.Vector3()).length() : 100;
  const m = mesh.matrixWorld;
  const getTri = (i) => {
    let ia, ib, ic;
    if (idx) { ia = idx.getX(i*3); ib = idx.getX(i*3+1); ic = idx.getX(i*3+2); }
    else { ia = i*3; ib = i*3+1; ic = i*3+2; }
    const a = new THREE.Vector3().fromBufferAttribute(pos, ia).applyMatrix4(m);
    const b = new THREE.Vector3().fromBufferAttribute(pos, ib).applyMatrix4(m);
    const c = new THREE.Vector3().fromBufferAttribute(pos, ic).applyMatrix4(m);
    const center = a.clone().add(b).add(c).multiplyScalar(1/3);
    const normal = new THREE.Vector3().subVectors(b, a).cross(new THREE.Vector3().subVectors(c, a)).normalize();
    return { ia, ib, ic, a, b, c, center, normal };
  };
  const triCount = idx ? idx.count / 3 : pos.count / 3;
  const hitTriIdx = hit.faceIndex;
  if (hitTriIdx == null) { showError('Keine Triangle-Auswahl.'); return; }
  const hitTri = getTri(hitTriIdx);

  // Sammle benachbarte Triangles im Umkreis. Auto-Retry mit gelockerten Schwellen
  // falls die strenge Variante zu wenig findet.
  function collectCurved(searchR, minDot) {
    const out = [hitTri];
    const seen = new Set([hitTriIdx]);
    for (let i = 0; i < triCount; i++) {
      if (seen.has(i)) continue;
      const t = getTri(i);
      if (t.center.distanceTo(hitTri.center) > searchR) continue;
      const dot = t.normal.dot(hitTri.normal);
      if (dot < minDot) continue;
      out.push(t);
      seen.add(i);
      if (out.length > 600) break;
    }
    return out;
  }
  let collected = collectCurved(BBOX_DIAG * 0.20, 0.50);
  if (collected.length < 8) {
    collected = collectCurved(BBOX_DIAG * 0.30, 0.30);
  }
  if (collected.length < 5) {
    showError(`Keine gekrümmte Fläche erkannt — nur ${collected.length} Triangles im Umkreis. ` +
              `Mittiger auf die gekrümmte Fläche klicken.`);
    return;
  }

  // Kugel-Fit per Least-Squares auf Triangle-Center (Algorithm: linear 4-param fit)
  // (x-x₀)² + (y-y₀)² + (z-z₀)² = r²
  // ⇒ x² + y² + z² - 2x₀x - 2y₀y - 2z₀z + (x₀²+y₀²+z₀²-r²) = 0
  // Unknowns: x₀, y₀, z₀, k=x₀²+y₀²+z₀²-r²
  // Linear in unknowns. A·p = b mit A = [-2x_i, -2y_i, -2z_i, 1], b = -[x_i²+y_i²+z_i²]
  const N = collected.length;
  // Normal equations: AᵀA · p = Aᵀb (4x4-System)
  let s_x=0,s_y=0,s_z=0,s_xx=0,s_yy=0,s_zz=0,s_xy=0,s_xz=0,s_yz=0;
  let s_xt=0,s_yt=0,s_zt=0,s_t=0;
  const pts = collected.map(t => t.center);
  for (const p of pts) {
    const x=p.x, y=p.y, z=p.z, q=x*x+y*y+z*z;
    s_x += x; s_y += y; s_z += z;
    s_xx += x*x; s_yy += y*y; s_zz += z*z;
    s_xy += x*y; s_xz += x*z; s_yz += y*z;
    s_xt += x*q; s_yt += y*q; s_zt += z*q; s_t += q;
  }
  // Matrix A (4x4): symmetric
  const A = [
    [4*s_xx, 4*s_xy, 4*s_xz, -2*s_x],
    [4*s_xy, 4*s_yy, 4*s_yz, -2*s_y],
    [4*s_xz, 4*s_yz, 4*s_zz, -2*s_z],
    [-2*s_x, -2*s_y, -2*s_z, N],
  ];
  const bv = [-2*s_xt, -2*s_yt, -2*s_zt, -s_t];
  const sol = solveLinear4(A, bv);
  if (!sol) {
    showError('Kugel-Fit fehlgeschlagen — Fläche zu eben für sinnvollen Radius?');
    return;
  }
  const [cx, cy, cz, k] = sol;
  const r2 = cx*cx + cy*cy + cz*cz - k;
  if (!isFinite(r2) || r2 <= 0) {
    showError('Kugel-Fit lieferte ungültigen Radius — wahrscheinlich keine Krümmung.');
    return;
  }
  const radius = Math.sqrt(r2);
  // Plausibilität: Radius muss kleiner als BBox sein
  if (radius > BBOX_DIAG * 5) {
    showError(`Fläche ist fast eben — Radius wäre ${radius.toFixed(0)} mm (außerhalb sinnvoller Werte).`);
    return;
  }
  // RMS-Error
  const center = new THREE.Vector3(cx, cy, cz);
  let ssr = 0;
  for (const p of pts) ssr += Math.pow(p.distanceTo(center) - radius, 2);
  const rms = Math.sqrt(ssr / N);
  // Konvex vs Konkav: wenn Hit-Normal vom Zentrum weg zeigt → konvex, sonst konkav
  const fromCenterToHit = hitTri.center.clone().sub(center).normalize();
  const isConvex = fromCenterToHit.dot(hitTri.normal) > 0;
  const kind = isConvex ? 'Außenradius' : 'Innenradius (Verrundung/Fillet)';

  // Visualisierung: Kugel-Drahtgitter mit Radius (Violet — komplementär zu Orange)
  radiusGroup = new THREE.Group();
  const sphereGeom = new THREE.SphereGeometry(radius, 24, 16);
  const sphere = new THREE.Mesh(sphereGeom, new THREE.MeshBasicMaterial({
    color: 0xa78bfa, wireframe: true, depthTest: false, transparent: true, opacity: 0.30,
  }));
  sphere.position.copy(center);
  sphere.renderOrder = 998;
  radiusGroup.add(sphere);
  const dot = new THREE.Mesh(
    new THREE.SphereGeometry(BBOX_DIAG * 0.005, 10, 10),
    new THREE.MeshBasicMaterial({ color: 0xa78bfa, depthTest: false })
  );
  dot.position.copy(center);
  dot.renderOrder = 999;
  radiusGroup.add(dot);
  const lineG = new THREE.BufferGeometry().setFromPoints([center, hitTri.center]);
  radiusGroup.add(new THREE.Line(lineG, new THREE.LineBasicMaterial({ color: 0xa78bfa, depthTest: false })));
  scene.add(radiusGroup);

  measureHint.innerHTML =
    `<strong>${kind}</strong><br>` +
    `R = <strong>${radius.toFixed(2)} mm</strong> &nbsp; (Ø ${(radius*2).toFixed(2)} mm)<br>` +
    `<span style="opacity:0.55;font-size:10px;">Fit-Fehler RMS ${rms.toFixed(3)} mm · ${N} Triangles</span>`;
  measureHint.style.display = 'block';

  pushHistory({
    type: 'radius',
    kind: kind,
    label: `${isConvex ? 'R außen' : 'R innen'} #${measurementHistory.filter(h=>h.type==='radius').length + 1}`,
    value: `R ${radius.toFixed(2)} mm`,
    detail: `${kind} · RMS ${rms.toFixed(3)} mm · ${N} Tris`,
    anchor: { x: hit.point.x, y: hit.point.y, z: hit.point.z },
    data: {
      radius,
      isConvex,
      center: { x: cx, y: cy, z: cz },
      rms,
      triangles: N,
    },
  });
}

// ===== Winkel-Tool ============================================================
// Klick auf Fläche A → speichere Normale + Punkt.
// Klick auf Fläche B → berechne Winkel zwischen Normalen (= Außenwinkel)
// Innenwinkel zwischen den Flächen = 180° - Außenwinkel.
function analyzeAngle(hit) {
  const meshNormal = hit.face.normal.clone()
    .transformDirection(hit.object.matrixWorld).normalize();
  anglePoints.push({ point: hit.point.clone(), normal: meshNormal });
  if (anglePoints.length === 1) {
    // Marker für Punkt 1
    if (!angleGroup) { angleGroup = new THREE.Group(); scene.add(angleGroup); }
    const dot = new THREE.Mesh(
      new THREE.SphereGeometry((modelBBox ? modelBBox.getSize(new THREE.Vector3()).length() * 0.008 : 1), 12, 12),
      new THREE.MeshBasicMaterial({ color: 0x34d399, depthTest: false })
    );
    dot.position.copy(hit.point);
    dot.renderOrder = 999;
    angleGroup.add(dot);
    measureHint.innerHTML = '<strong>Winkel-Modus:</strong> 2. Fläche klicken …';
    return;
  }
  // Zweiter Klick: Winkel berechnen
  const [a, b] = anglePoints;
  const cos = Math.max(-1, Math.min(1, a.normal.dot(b.normal)));
  const outerDeg = Math.acos(cos) * 180 / Math.PI;
  const innerDeg = 180 - outerDeg;
  // Marker für Punkt 2 + Linie
  const dot2 = new THREE.Mesh(
    new THREE.SphereGeometry((modelBBox ? modelBBox.getSize(new THREE.Vector3()).length() * 0.008 : 1), 12, 12),
    new THREE.MeshBasicMaterial({ color: 0x34d399, depthTest: false })
  );
  dot2.position.copy(b.point);
  dot2.renderOrder = 999;
  angleGroup.add(dot2);
  // Verbindungslinie + kurze Normal-Indikatoren
  const lineG = new THREE.BufferGeometry().setFromPoints([a.point, b.point]);
  angleGroup.add(new THREE.Line(lineG, new THREE.LineBasicMaterial({ color: 0x34d399, depthTest: false })));
  const arrowLen = modelBBox ? modelBBox.getSize(new THREE.Vector3()).length() * 0.06 : 8;
  for (const ap of [a, b]) {
    const tipG = new THREE.BufferGeometry().setFromPoints([ap.point, ap.point.clone().add(ap.normal.clone().multiplyScalar(arrowLen))]);
    angleGroup.add(new THREE.Line(tipG, new THREE.LineBasicMaterial({ color: 0xfacc15, depthTest: false })));
  }
  measureHint.innerHTML =
    `<strong>Winkel zwischen Flächen</strong><br>` +
    `<strong>${innerDeg.toFixed(2)}°</strong> &nbsp; <span style="opacity:0.65;">(Außenwinkel ${outerDeg.toFixed(2)}°)</span>`;
  const midPt = a.point.clone().add(b.point).multiplyScalar(0.5);
  pushHistory({
    type: 'angle',
    kind: 'Winkel',
    label: `Winkel #${measurementHistory.filter(h=>h.type==='angle').length + 1}`,
    value: `${innerDeg.toFixed(2)}°`,
    detail: `Außenwinkel ${outerDeg.toFixed(2)}° · ${innerDeg < 95 && innerDeg > 85 ? 'rechtwinklig' : (innerDeg < 45 ? 'spitz' : (innerDeg > 135 ? 'stumpf' : 'normal'))}`,
    anchor: { x: midPt.x, y: midPt.y, z: midPt.z },
    data: {
      innerDeg, outerDeg,
      a: { point: { x:a.point.x, y:a.point.y, z:a.point.z }, normal: { x:a.normal.x, y:a.normal.y, z:a.normal.z }},
      b: { point: { x:b.point.x, y:b.point.y, z:b.point.z }, normal: { x:b.normal.x, y:b.normal.y, z:b.normal.z }},
    },
  });
  anglePoints = [];   // Reset für nächste Messung
}

// ===== Fasen-Tool =============================================================
// Klick auf eine Fase → Auto-Erkennung:
//   1. Sammle alle koplanaren Triangles (dot > 0.97) als Fasen-Fläche
//   2. Bestimme Fasen-BBox (mit lokalen Tangenten der Fasen-Fläche)
//   3. Schmale Dimension = Fasen-Breite, lange = Fasen-Länge
//   4. Winkel: zwischen Fasen-Normale und der nächstliegenden Bauteil-Hauptachse
function analyzeChamfer(hit) {
  clearChamferViz();
  const mesh = hit.object;
  const geo = mesh.geometry;
  const pos = geo.attributes.position;
  const idx = geo.index;
  if (!pos) { showError('Keine Geometrie unter Klick.'); return; }
  const m = mesh.matrixWorld;
  const getTri = (i) => {
    let ia, ib, ic;
    if (idx) { ia = idx.getX(i*3); ib = idx.getX(i*3+1); ic = idx.getX(i*3+2); }
    else { ia = i*3; ib = i*3+1; ic = i*3+2; }
    const a = new THREE.Vector3().fromBufferAttribute(pos, ia).applyMatrix4(m);
    const b = new THREE.Vector3().fromBufferAttribute(pos, ib).applyMatrix4(m);
    const c = new THREE.Vector3().fromBufferAttribute(pos, ic).applyMatrix4(m);
    const center = a.clone().add(b).add(c).multiplyScalar(1/3);
    const normal = new THREE.Vector3().subVectors(b, a).cross(new THREE.Vector3().subVectors(c, a)).normalize();
    return { a, b, c, center, normal };
  };
  const triCount = idx ? idx.count / 3 : pos.count / 3;
  const triIdx = hit.faceIndex;
  if (triIdx == null) { showError('Keine Triangle-Auswahl.'); return; }
  const hitTri = getTri(triIdx);
  const BBOX_DIAG = modelBBox ? modelBBox.getSize(new THREE.Vector3()).length() : 100;
  const SEARCH_R = BBOX_DIAG * 0.20;

  // Sammle koplanare Triangles (Normalen-Drift sehr klein = exakt diese Fläche)
  const coplanar = [hitTri];
  for (let i = 0; i < triCount; i++) {
    if (i === triIdx) continue;
    const t = getTri(i);
    if (t.center.distanceTo(hitTri.center) > SEARCH_R) continue;
    if (t.normal.dot(hitTri.normal) < 0.97) continue;   // exakt koplanar
    coplanar.push(t);
    if (coplanar.length > 400) break;
  }
  if (coplanar.length < 3) {
    showError(`Keine zusammenhängende Fasen-Fläche erkannt (${coplanar.length} Triangles).`);
    return;
  }

  // Hit-Normale = Fasen-Normale
  const fN = hitTri.normal.clone();
  // Berechne lokale Tangentialachsen (in der Fasen-Ebene)
  const refUp = Math.abs(fN.y) < 0.9 ? new THREE.Vector3(0,1,0) : new THREE.Vector3(1,0,0);
  const u = new THREE.Vector3().crossVectors(fN, refUp).normalize();
  const v = new THREE.Vector3().crossVectors(fN, u).normalize();
  // Projiziere alle Vertices der koplanaren Triangles in (u, v)-Koords
  let uMin = Infinity, uMax = -Infinity, vMin = Infinity, vMax = -Infinity;
  const centerSum = new THREE.Vector3();
  for (const t of coplanar) {
    for (const p of [t.a, t.b, t.c]) {
      const du = p.dot(u), dv = p.dot(v);
      if (du < uMin) uMin = du;
      if (du > uMax) uMax = du;
      if (dv < vMin) vMin = dv;
      if (dv > vMax) vMax = dv;
    }
    centerSum.add(t.center);
  }
  const centroid = centerSum.divideScalar(coplanar.length);
  const dimU = uMax - uMin;
  const dimV = vMax - vMin;
  const width = Math.min(dimU, dimV);
  const length = Math.max(dimU, dimV);
  if (width < 0.05) {
    showError('Fasen-Fläche zu schmal — keine sinnvolle Messung.');
    return;
  }

  // Winkel zur nächsten Bauteil-Hauptachse
  const axes = [
    { v: new THREE.Vector3(1,0,0), name: 'X' },
    { v: new THREE.Vector3(0,1,0), name: 'Y' },
    { v: new THREE.Vector3(0,0,1), name: 'Z' },
  ];
  // Für jede Achse: Winkel zwischen Normale und Achse, Min-Winkel = nächste
  let best = null;
  for (const ax of axes) {
    const dot = Math.abs(fN.dot(ax.v));
    const angDeg = Math.acos(Math.min(1, dot)) * 180 / Math.PI;
    if (!best || angDeg < best.angDeg) best = { ...ax, angDeg };
  }
  // Fasen-Winkel klassisch: zwischen Fasen-Fläche und der nächsten Plane
  // Standardwerte: 30°, 45°, 60° für klassische Fasen
  const chamferAngle = 90 - best.angDeg;   // gegen die Plane gemessen
  let classifyNote = '';
  for (const ref of [15, 30, 45, 60, 75]) {
    if (Math.abs(chamferAngle - ref) < 3) { classifyNote = `≈ ${ref}°-Fase`; break; }
  }
  if (!classifyNote && chamferAngle > 80) classifyNote = '~rechtwinklig (keine Fase?)';

  // Visualisierung: Fasen-Fläche orange-transparent + Normal-Pfeil + BBox-Wireframe
  chamferGroup = new THREE.Group();
  // Mesh-Overlay
  const positions = new Float32Array(coplanar.length * 9);
  let off = 0;
  for (const t of coplanar) {
    positions[off++]=t.a.x; positions[off++]=t.a.y; positions[off++]=t.a.z;
    positions[off++]=t.b.x; positions[off++]=t.b.y; positions[off++]=t.b.z;
    positions[off++]=t.c.x; positions[off++]=t.c.y; positions[off++]=t.c.z;
  }
  const geom = new THREE.BufferGeometry();
  geom.setAttribute('position', new THREE.BufferAttribute(positions, 3));
  chamferGroup.add(new THREE.Mesh(geom, new THREE.MeshBasicMaterial({
    color: 0xff6b35, transparent: true, opacity: 0.45,
    depthTest: false, side: THREE.DoubleSide,
  })));
  // Normal-Pfeil
  const arrowLen = BBOX_DIAG * 0.05;
  const normalLine = new THREE.BufferGeometry().setFromPoints([centroid, centroid.clone().add(fN.clone().multiplyScalar(arrowLen))]);
  chamferGroup.add(new THREE.Line(normalLine, new THREE.LineBasicMaterial({ color: 0xfacc15, depthTest: false })));
  scene.add(chamferGroup);

  measureHint.innerHTML =
    `<strong>Fase erkannt</strong><br>` +
    `Breite <strong>${width.toFixed(2)} mm</strong> · ` +
    `Länge <strong>${length.toFixed(2)} mm</strong><br>` +
    `Winkel zur ${best.name}-Achse: <strong>${chamferAngle.toFixed(1)}°</strong> ` +
    (classifyNote ? `<span style="color:#facc15;">${classifyNote}</span>` : '') +
    `<br><span style="opacity:0.55;font-size:10px;">${coplanar.length} koplanare Triangles</span>`;
  measureHint.style.display = 'block';

  pushHistory({
    type: 'chamfer',
    kind: 'Fase',
    label: `Fase #${measurementHistory.filter(h=>h.type==='chamfer').length + 1}`,
    value: `${width.toFixed(2)} × ${length.toFixed(1)} mm @ ${chamferAngle.toFixed(1)}°`,
    detail: classifyNote || `Fasen-Normale zur ${best.name}-Achse`,
    anchor: { x: centroid.x, y: centroid.y, z: centroid.z },
    data: {
      width, length, angleDeg: chamferAngle,
      classify: classifyNote,
      normal: { x: fN.x, y: fN.y, z: fN.z },
      centroid: { x: centroid.x, y: centroid.y, z: centroid.z },
      triangles: coplanar.length,
    },
  });
}

// ===== Tasche / Pocket-Detection ==============================================
// Klick auf Pocket-Boden: Region-Growing über koplanare Triangles (selbe Normale),
// dann projizierte BBox in Tangentialebene → L × B. Tiefe = vertikaler Abstand
// von Pocket-Ebene zur nächst-höheren Material-Ebene mit gleicher Normalen-Achse,
// die den Pocket-XY-Footprint überlappt.
function analyzePocket(hit) {
  clearPocketViz();
  if (!pocketGroup) { pocketGroup = new THREE.Group(); scene.add(pocketGroup); }
  const mesh = hit.object;
  const geo = mesh.geometry;
  const pos = geo.attributes.position;
  const idx = geo.index;
  if (!pos) { showError('Keine Geometrie unter Klick.'); return; }
  const BBOX_DIAG = modelBBox ? modelBBox.getSize(new THREE.Vector3()).length() : 100;
  const m = mesh.matrixWorld;
  const getTri = (i) => {
    let ia, ib, ic;
    if (idx) { ia = idx.getX(i*3); ib = idx.getX(i*3+1); ic = idx.getX(i*3+2); }
    else { ia = i*3; ib = i*3+1; ic = i*3+2; }
    const a = new THREE.Vector3().fromBufferAttribute(pos, ia).applyMatrix4(m);
    const b = new THREE.Vector3().fromBufferAttribute(pos, ib).applyMatrix4(m);
    const c = new THREE.Vector3().fromBufferAttribute(pos, ic).applyMatrix4(m);
    const center = a.clone().add(b).add(c).multiplyScalar(1/3);
    const n = new THREE.Vector3().subVectors(b, a).cross(new THREE.Vector3().subVectors(c, a));
    const area = n.length() * 0.5;
    n.normalize();
    return { a, b, c, center, normal: n, area };
  };
  const triCount = idx ? idx.count / 3 : pos.count / 3;
  const hitTriIdx = hit.faceIndex;
  if (hitTriIdx == null) { showError('Keine Triangle-Auswahl.'); return; }
  const hitTri = getTri(hitTriIdx);
  // Pocket-Bodennormale (zeigt aus Material heraus — also nach oben aus Sicht des Pockets)
  const N = hitTri.normal.clone();
  // 1. Region-Growing über koplanare Triangles (gleiche Normale, gleicher Höhen-Offset)
  const planeD = N.dot(hitTri.center);
  const COPLANAR_DOT = 0.985;
  const COPLANAR_DIST = BBOX_DIAG * 0.002;
  const coplanar = [];
  for (let i = 0; i < triCount; i++) {
    const t = getTri(i);
    if (t.normal.dot(N) < COPLANAR_DOT) continue;
    if (Math.abs(N.dot(t.center) - planeD) > COPLANAR_DIST) continue;
    coplanar.push(t);
    if (coplanar.length > 2000) break;
  }
  if (coplanar.length < 3) {
    showError(`Keine koplanare Boden-Fläche erkannt (nur ${coplanar.length} Tri). Mittiger klicken.`);
    return;
  }
  // 2. Tangentenebene (2D-Basis u, v senkrecht zu N)
  const up = Math.abs(N.y) < 0.9 ? new THREE.Vector3(0,1,0) : new THREE.Vector3(1,0,0);
  const u = new THREE.Vector3().crossVectors(N, up).normalize();
  const v = new THREE.Vector3().crossVectors(N, u).normalize();
  // 3. BBox aller Pocket-Vertices in (u,v)
  let umin =  Infinity, umax = -Infinity, vmin =  Infinity, vmax = -Infinity;
  let usum = 0, vsum = 0;
  for (const t of coplanar) {
    for (const p of [t.a, t.b, t.c]) {
      const uu = u.dot(p), vv = v.dot(p);
      if (uu < umin) umin = uu;
      if (uu > umax) umax = uu;
      if (vv < vmin) vmin = vv;
      if (vv > vmax) vmax = vv;
    }
    usum += u.dot(t.center) * t.area;
    vsum += v.dot(t.center) * t.area;
  }
  const totalArea = coplanar.reduce((s,t) => s + t.area, 0);
  const uc = usum / totalArea, vc = vsum / totalArea;
  const pocketLen = umax - umin;
  const pocketWid = vmax - vmin;
  // sortiert: lang × breit
  const L = Math.max(pocketLen, pocketWid);
  const W = Math.min(pocketLen, pocketWid);
  // Pocket-Boden-Center in Welt
  const pocketCenter = new THREE.Vector3()
    .addScaledVector(u, uc)
    .addScaledVector(v, vc)
    .addScaledVector(N, planeD);
  // 4. Tiefe: höhere koplanare Ebenen in N-Richtung, die im (u,v)-Footprint liegen
  //    Suche Triangles mit ähnlicher Normalen-Achse (egal ob ±N) deren N-Projektion > planeD+ε
  let bestUpper = null;
  const STEP_MIN = BBOX_DIAG * 0.003;
  for (let i = 0; i < triCount; i++) {
    const t = getTri(i);
    const ax = Math.abs(t.normal.dot(N));
    if (ax < 0.92) continue;   // muss parallel zur Pocket-Normale sein
    const offset = N.dot(t.center) - planeD;
    if (offset < STEP_MIN) continue;
    // muss im Footprint liegen (mit Toleranz)
    const uu = u.dot(t.center), vv = v.dot(t.center);
    if (uu < umin - W*0.1 || uu > umax + W*0.1) continue;
    if (vv < vmin - L*0.1 || vv > vmax + L*0.1) continue;
    if (bestUpper == null || offset < bestUpper.offset) {
      bestUpper = { offset, tri: t };
    }
  }
  const depth = bestUpper ? bestUpper.offset : 0;
  // 5. Visualisierung: 4 Eckpunkte der Pocket-BBox auf Bodenebene + Rahmen
  const corners = [
    new THREE.Vector3().addScaledVector(u, umin).addScaledVector(v, vmin).addScaledVector(N, planeD),
    new THREE.Vector3().addScaledVector(u, umax).addScaledVector(v, vmin).addScaledVector(N, planeD),
    new THREE.Vector3().addScaledVector(u, umax).addScaledVector(v, vmax).addScaledVector(N, planeD),
    new THREE.Vector3().addScaledVector(u, umin).addScaledVector(v, vmax).addScaledVector(N, planeD),
    new THREE.Vector3().addScaledVector(u, umin).addScaledVector(v, vmin).addScaledVector(N, planeD),
  ];
  const ringG = new THREE.BufferGeometry().setFromPoints(corners);
  pocketGroup.add(new THREE.Line(ringG, new THREE.LineBasicMaterial({ color: 0x60A5FA, depthTest: false, linewidth: 2 })));
  // Boden-Highlight
  const fillPositions = new Float32Array(coplanar.length * 9);
  let off = 0;
  for (const t of coplanar) {
    fillPositions[off++]=t.a.x; fillPositions[off++]=t.a.y; fillPositions[off++]=t.a.z;
    fillPositions[off++]=t.b.x; fillPositions[off++]=t.b.y; fillPositions[off++]=t.b.z;
    fillPositions[off++]=t.c.x; fillPositions[off++]=t.c.y; fillPositions[off++]=t.c.z;
  }
  const fillGeo = new THREE.BufferGeometry();
  fillGeo.setAttribute('position', new THREE.BufferAttribute(fillPositions, 3));
  fillGeo.computeVertexNormals();
  pocketGroup.add(new THREE.Mesh(fillGeo, new THREE.MeshBasicMaterial({
    color: 0x60A5FA, transparent: true, opacity: 0.35, side: THREE.DoubleSide,
    depthTest: false, polygonOffset: true, polygonOffsetFactor: -1,
  })));
  // Tiefen-Pfeil
  if (depth > 0) {
    const tip = pocketCenter.clone().addScaledVector(N, depth);
    const arrG = new THREE.BufferGeometry().setFromPoints([pocketCenter, tip]);
    pocketGroup.add(new THREE.Line(arrG, new THREE.LineBasicMaterial({ color: 0x22D3EE, depthTest: false })));
  }
  measureHint.innerHTML =
    `<strong>Tasche</strong><br>` +
    `<strong>${L.toFixed(2)} × ${W.toFixed(2)} mm</strong> &nbsp;·&nbsp; ` +
    `Tiefe <strong>${depth.toFixed(2)} mm</strong><br>` +
    `<span style="opacity:0.55;font-size:10px;">${coplanar.length} Bodentris${bestUpper ? ' · Tiefen-Referenz erkannt' : ' · keine Material-Oberkante gefunden'}</span>`;
  measureHint.style.display = 'block';
  pushHistory({
    type: 'pocket',
    kind: 'Tasche',
    label: `Tasche #${measurementHistory.filter(h=>h.type==='pocket').length + 1}`,
    value: `${L.toFixed(2)} × ${W.toFixed(2)} × T ${depth.toFixed(2)} mm`,
    detail: bestUpper ? 'L × B × Tiefe (autom.)' : 'Boden erkannt — keine Oberkante (Tiefe = 0)',
    anchor: { x: pocketCenter.x, y: pocketCenter.y, z: pocketCenter.z },
    data: {
      length: L, width: W, depth,
      center: { x: pocketCenter.x, y: pocketCenter.y, z: pocketCenter.z },
      normal: { x: N.x, y: N.y, z: N.z },
      triangles: coplanar.length,
    },
  });
}

// ===== Tiefe (Fläche ↔ Fläche entlang Bezugs-Normale) =========================
// Klick 1 = Bezugsfläche (definiert Mess-Richtung = Normale).
// Klick 2 = Zielfläche. Tiefe = Projektion (P2 - P1) · N1.
function analyzeDepthClick(hit) {
  const meshNormal = hit.face.normal.clone()
    .transformDirection(hit.object.matrixWorld).normalize();
  if (!depthGroup) { depthGroup = new THREE.Group(); scene.add(depthGroup); }
  const BBOX_DIAG = modelBBox ? modelBBox.getSize(new THREE.Vector3()).length() : 100;
  if (!depthFirst) {
    depthFirst = { point: hit.point.clone(), normal: meshNormal };
    // Marker + Normal-Pfeil
    const dot = new THREE.Mesh(
      new THREE.SphereGeometry(BBOX_DIAG * 0.008, 12, 12),
      new THREE.MeshBasicMaterial({ color: 0x22D3EE, depthTest: false })
    );
    dot.position.copy(hit.point); dot.renderOrder = 999;
    depthGroup.add(dot);
    const tip = hit.point.clone().addScaledVector(meshNormal, BBOX_DIAG * 0.08);
    const arr = new THREE.BufferGeometry().setFromPoints([hit.point, tip]);
    depthGroup.add(new THREE.Line(arr, new THREE.LineBasicMaterial({ color: 0xFCD34D, depthTest: false })));
    measureHint.innerHTML = '<strong>Tiefen-Modus:</strong> 2. <em>Zielfläche</em> klicken — Tiefe entlang Bezugsnormale.';
    return;
  }
  // 2. Klick — Tiefe berechnen
  const diff = hit.point.clone().sub(depthFirst.point);
  const signedDepth = diff.dot(depthFirst.normal);
  const depth = Math.abs(signedDepth);
  // Visualisierung
  const dot2 = new THREE.Mesh(
    new THREE.SphereGeometry(BBOX_DIAG * 0.008, 12, 12),
    new THREE.MeshBasicMaterial({ color: 0x22D3EE, depthTest: false })
  );
  dot2.position.copy(hit.point); dot2.renderOrder = 999;
  depthGroup.add(dot2);
  // Projektion von Klick 2 auf Bezugsebene
  const proj = hit.point.clone().sub(depthFirst.normal.clone().multiplyScalar(signedDepth));
  const lineG = new THREE.BufferGeometry().setFromPoints([proj, hit.point]);
  depthGroup.add(new THREE.Line(lineG, new THREE.LineBasicMaterial({ color: 0x22D3EE, depthTest: false })));
  const projG = new THREE.BufferGeometry().setFromPoints([depthFirst.point, proj]);
  depthGroup.add(new THREE.Line(projG, new THREE.LineDashedMaterial({ color: 0xFCD34D, dashSize: BBOX_DIAG*0.01, gapSize: BBOX_DIAG*0.008, depthTest: false })));
  // Dashed Line braucht computeLineDistances
  const dashedLine = depthGroup.children[depthGroup.children.length-1];
  dashedLine.computeLineDistances && dashedLine.computeLineDistances();
  const mid = depthFirst.point.clone().add(hit.point).multiplyScalar(0.5);
  measureHint.innerHTML =
    `<strong>Tiefe entlang Normale</strong><br>` +
    `<strong>${depth.toFixed(2)} mm</strong> &nbsp;` +
    `<span style="opacity:0.65;font-size:11px;">(${signedDepth >= 0 ? 'mit Normale' : 'gegen Normale'})</span><br>` +
    `<span style="opacity:0.55;font-size:10px;">Direkte Distanz ${diff.length().toFixed(2)} mm</span>`;
  measureHint.style.display = 'block';
  pushHistory({
    type: 'depth',
    kind: 'Tiefe',
    label: `Tiefe #${measurementHistory.filter(h=>h.type==='depth').length + 1}`,
    value: `${depth.toFixed(2)} mm`,
    detail: `Projektion entlang Bezugs-Normale · direkt ${diff.length().toFixed(2)} mm`,
    anchor: { x: mid.x, y: mid.y, z: mid.z },
    data: {
      depth, signedDepth, directDistance: diff.length(),
      from: { x: depthFirst.point.x, y: depthFirst.point.y, z: depthFirst.point.z },
      to:   { x: hit.point.x, y: hit.point.y, z: hit.point.z },
      refNormal: { x: depthFirst.normal.x, y: depthFirst.normal.y, z: depthFirst.normal.z },
    },
  });
  depthFirst = null;   // Reset für nächste Messung
}

// ===== Kantenlänge (Edge-Loop folgen) =========================================
// Klick: snappe an die nächste Kante, dann folge dem Loop solange Nachfolger
// am Endpunkt eindeutig sind (genau eine weitere Kante in Toleranz und ähnlicher
// Richtung). Summiere alle Segment-Längen.
function analyzeEdgeClick(hit) {
  clearEdgeViz();
  if (!edgeGroup) { edgeGroup = new THREE.Group(); scene.add(edgeGroup); }
  const BBOX_DIAG = modelBBox ? modelBBox.getSize(new THREE.Vector3()).length() : 100;
  if (!snapEdges || snapEdges.length === 0) {
    showError('Keine Kanten-Daten extrahiert — Modell neu laden?');
    return;
  }
  // Finde nächste Kante zum Klick-Punkt (Distanz Punkt zu Segment)
  const P = hit.point.clone();
  let bestIdx = -1, bestDist = Infinity;
  for (let i = 0; i < snapEdges.length; i++) {
    const e = snapEdges[i];
    const ab = new THREE.Vector3().subVectors(e.b, e.a);
    const t = Math.max(0, Math.min(1, ab.dot(new THREE.Vector3().subVectors(P, e.a)) / ab.lengthSq()));
    const proj = e.a.clone().addScaledVector(ab, t);
    const d = proj.distanceTo(P);
    if (d < bestDist) { bestDist = d; bestIdx = i; }
  }
  if (bestIdx < 0 || bestDist > BBOX_DIAG * 0.08) {
    showError(`Keine Kante in Klick-Nähe gefunden (${bestDist.toFixed(2)} mm Abstand).`);
    return;
  }
  // Loop-Following
  const TOL = BBOX_DIAG * 0.0008;   // Vertex-Toleranz
  const TANG_DOT = 0.97;              // ähnliche Richtung
  const visited = new Set([bestIdx]);
  const loop = [snapEdges[bestIdx]];
  let total = snapEdges[bestIdx].len;
  // Forward + Backward
  for (const startVertex of ['b', 'a']) {
    let currentEdge = snapEdges[bestIdx];
    let endpoint = currentEdge[startVertex].clone();
    let lastDir = (startVertex === 'b')
      ? new THREE.Vector3().subVectors(currentEdge.b, currentEdge.a).normalize()
      : new THREE.Vector3().subVectors(currentEdge.a, currentEdge.b).normalize();
    let safety = 0;
    while (safety++ < 5000) {
      let nextIdx = -1, nextEndpoint = null, nextDir = null;
      for (let i = 0; i < snapEdges.length; i++) {
        if (visited.has(i)) continue;
        const e = snapEdges[i];
        // Schließt eine seiner Enden an endpoint?
        if (e.a.distanceTo(endpoint) < TOL) {
          const dir = new THREE.Vector3().subVectors(e.b, e.a).normalize();
          if (Math.abs(dir.dot(lastDir)) < TANG_DOT) continue;
          if (nextIdx === -1 || e.len > snapEdges[nextIdx].len) {
            nextIdx = i; nextEndpoint = e.b.clone(); nextDir = dir;
          }
        } else if (e.b.distanceTo(endpoint) < TOL) {
          const dir = new THREE.Vector3().subVectors(e.a, e.b).normalize();
          if (Math.abs(dir.dot(lastDir)) < TANG_DOT) continue;
          if (nextIdx === -1 || e.len > snapEdges[nextIdx].len) {
            nextIdx = i; nextEndpoint = e.a.clone(); nextDir = dir;
          }
        }
      }
      if (nextIdx === -1) break;
      visited.add(nextIdx);
      loop.push(snapEdges[nextIdx]);
      total += snapEdges[nextIdx].len;
      endpoint = nextEndpoint;
      lastDir = nextDir;
    }
  }
  // Visualisierung: alle Loop-Edges hervorheben
  const pts = [];
  for (const e of loop) { pts.push(e.a, e.b); }
  const loopGeo = new THREE.BufferGeometry().setFromPoints(pts);
  edgeGroup.add(new THREE.LineSegments(loopGeo, new THREE.LineBasicMaterial({ color: 0xF472B6, depthTest: false, linewidth: 3 })));
  // Markiere End-Vertices als Punkte
  for (const e of [loop[0], loop[loop.length-1]]) {
    for (const v of [e.a, e.b]) {
      const dot = new THREE.Mesh(
        new THREE.SphereGeometry(BBOX_DIAG * 0.006, 10, 10),
        new THREE.MeshBasicMaterial({ color: 0xF472B6, depthTest: false })
      );
      dot.position.copy(v); dot.renderOrder = 999;
      edgeGroup.add(dot);
    }
  }
  // Anker: Mitte der gewählten Kante
  const anchor = snapEdges[bestIdx].mid.clone();
  const isLoopClosed = loop.length > 2 && loop[0].a.distanceTo(loop[loop.length-1].b) < TOL;
  measureHint.innerHTML =
    `<strong>Kantenlänge${isLoopClosed ? ' (geschlossener Loop)' : ''}</strong><br>` +
    `<strong>${total.toFixed(2)} mm</strong> &nbsp;` +
    `<span style="opacity:0.65;font-size:11px;">über ${loop.length} Segment${loop.length===1?'':'e'}</span>`;
  measureHint.style.display = 'block';
  pushHistory({
    type: 'edge',
    kind: 'Kante',
    label: `Kante #${measurementHistory.filter(h=>h.type==='edge').length + 1}`,
    value: `${total.toFixed(2)} mm`,
    detail: `${loop.length} Segment${loop.length===1?'':'e'}${isLoopClosed ? ' · geschlossen' : ''}`,
    anchor: { x: anchor.x, y: anchor.y, z: anchor.z },
    data: { length: total, segments: loop.length, closed: isLoopClosed },
  });
}

// ===== Bohrungs-Refine =======================================================
// Verfeinert das (geschätzte) Centroid aus detectHole zu einem deterministischen
// Bohrungs-Mittelpunkt. Vorgehen:
//   1. Projiziere alle Cluster-Triangle-Vertices auf die Tangentialebene
//      (senkrecht zur Bohrungsachse, durch initiales Centroid).
//   2. 2D-Kasa-Kreisfit auf diese projizierten 2D-Punkte → echter Mittelpunkt.
//   3. Snap auf Material-Oberkante: vom Mittelpunkt entlang ±Achse rayceaten,
//      der erste Mesh-Hit ist der Bohrungs-Einstich an der Oberfläche.
// Output: { center (auf Oberkante), centerOnAxis (auf Achsmitte), axis, radius,
//           topPoint, bottomPoint, valid }
function refineHole(det, mesh) {
  if (!det || !det.cluster || det.cluster.length < 4) return null;
  const axis = det.axis.clone().normalize();
  const c0 = det.centroid.clone();
  // Tangentialebene: 2 orthogonale Basis-Vektoren senkrecht zu axis
  const up = Math.abs(axis.y) < 0.9 ? new THREE.Vector3(0, 1, 0) : new THREE.Vector3(1, 0, 0);
  const u = new THREE.Vector3().crossVectors(axis, up).normalize();
  const v = new THREE.Vector3().crossVectors(axis, u).normalize();
  // Projiziere alle Cluster-Vertices auf (u, v)
  const pts2d = [];
  for (const t of det.cluster) {
    for (const p of [t.a, t.b, t.c]) {
      if (!p) continue;
      const d = p.clone().sub(c0);
      pts2d.push({ x: d.dot(u), y: d.dot(v) });
    }
  }
  if (pts2d.length < 6) return null;
  // 2D-Kasa-Kreisfit: minimiere Σ((xi-a)² + (yi-b)² - r²)²
  // Normale: löse 3x3 System für [a, b, c] mit (xi-a)² + (yi-b)² = r² ⇒
  //  2·xi·a + 2·yi·b + c = xi² + yi²    (c = a²+b²-r²)
  let Sx=0, Sy=0, Sxx=0, Syy=0, Sxy=0, Sxxx=0, Syyy=0, Sxyy=0, Sxxy=0;
  for (const p of pts2d) {
    const x = p.x, y = p.y;
    Sx += x; Sy += y;
    Sxx += x*x; Syy += y*y; Sxy += x*y;
    Sxxx += x*x*x; Syyy += y*y*y; Sxyy += x*y*y; Sxxy += x*x*y;
  }
  const N = pts2d.length;
  const A11 = 2*Sxx, A12 = 2*Sxy, A13 = Sx;
  const A22 = 2*Syy, A23 = Sy;
  const A33 = N;
  const B1 = Sxxx + Sxyy;
  const B2 = Sxxy + Syyy;
  const B3 = Sxx + Syy;
  // Solve 3x3 mit partial pivoting
  const M = [
    [A11, A12, A13, B1],
    [A12, A22, A23, B2],
    [A13, A23, A33, B3],
  ];
  for (let p = 0; p < 3; p++) {
    let mx = Math.abs(M[p][p]), ri = p;
    for (let i = p+1; i < 3; i++) if (Math.abs(M[i][p]) > mx) { mx = Math.abs(M[i][p]); ri = i; }
    if (mx < 1e-10) return null;
    if (ri !== p) { const tmp = M[p]; M[p] = M[ri]; M[ri] = tmp; }
    for (let i = p+1; i < 3; i++) {
      const f = M[i][p] / M[p][p];
      for (let j = p; j <= 3; j++) M[i][j] -= f * M[p][j];
    }
  }
  const sol = [0,0,0];
  for (let i = 2; i >= 0; i--) {
    let s = M[i][3];
    for (let j = i+1; j < 3; j++) s -= M[i][j] * sol[j];
    sol[i] = s / M[i][i];
  }
  const aFit = sol[0], bFit = sol[1], cFit = sol[2];
  const rFit = Math.sqrt(Math.max(0, aFit*aFit + bFit*bFit + cFit));
  if (!isFinite(rFit) || rFit <= 0) return null;
  // Refined Centroid auf Achse (im 3D-Raum): c0 + aFit*u + bFit*v (auf Tangentialebene)
  const centerOnAxis = c0.clone()
    .addScaledVector(u, aFit)
    .addScaledVector(v, bFit);
  // Material-Oberkante via Raycast: shoote von zentrum entlang +axis und -axis
  // — der NÄCHSTE Hit ist die Außenfläche des Bauteils → Bohrungs-Einstich
  const meshes = [];
  currentMesh.traverse(c => { if (c.isMesh) meshes.push(c); });
  const BBOX_DIAG = modelBBox ? modelBBox.getSize(new THREE.Vector3()).length() : 100;
  // Wir starten leicht innerhalb des Materials und prüfen beide Achsrichtungen
  const startEps = BBOX_DIAG * 0.0005;
  const upRay = new THREE.Raycaster(centerOnAxis, axis, startEps, BBOX_DIAG);
  const dnRay = new THREE.Raycaster(centerOnAxis, axis.clone().multiplyScalar(-1), startEps, BBOX_DIAG);
  const upHits = upRay.intersectObjects(meshes, true);
  const dnHits = dnRay.intersectObjects(meshes, true);
  let topPoint = null, bottomPoint = null;
  if (upHits.length > 0) topPoint    = upHits[0].point.clone();
  if (dnHits.length > 0) bottomPoint = dnHits[0].point.clone();
  // Anker = nähere der beiden Oberkanten zum ursprünglichen Hit-Punkt (det.hitTri?)
  // bzw. wenn nur eine vorhanden: diese. Fallback: centerOnAxis.
  let anchor;
  if (topPoint && bottomPoint) {
    // Nehmen die Kante, die NÄHER am ursprünglichen Klick liegt
    const hitRef = det.hitTri && det.hitTri.center ? det.hitTri.center : c0;
    anchor = (topPoint.distanceTo(hitRef) <= bottomPoint.distanceTo(hitRef)) ? topPoint : bottomPoint;
  } else if (topPoint) {
    anchor = topPoint;
  } else if (bottomPoint) {
    anchor = bottomPoint;
  } else {
    anchor = centerOnAxis;
  }
  return {
    center: anchor.clone(),
    centerOnAxis,
    axis,
    radius: rFit,
    topPoint,
    bottomPoint,
    u, v,
    valid: true,
  };
}

// Zeichnet einen Bohrungs-Kreis am Material-Eintritt (visualisiert was erkannt wurde)
function drawHoleRing(group, refined, color, segments) {
  if (!refined || !refined.center) return;
  const seg = segments || 48;
  const pts = [];
  for (let i = 0; i <= seg; i++) {
    const ang = (i / seg) * Math.PI * 2;
    pts.push(refined.center.clone()
      .addScaledVector(refined.u, Math.cos(ang) * refined.radius)
      .addScaledVector(refined.v, Math.sin(ang) * refined.radius));
  }
  const geom = new THREE.BufferGeometry().setFromPoints(pts);
  group.add(new THREE.Line(geom, new THREE.LineBasicMaterial({
    color: color, depthTest: false, linewidth: 2, transparent: true, opacity: 0.95,
  })));
  // Kreuz im Mittelpunkt für visuelle Bestätigung
  const r = refined.radius * 0.35;
  const xL = new THREE.BufferGeometry().setFromPoints([
    refined.center.clone().addScaledVector(refined.u, -r),
    refined.center.clone().addScaledVector(refined.u,  r),
  ]);
  const yL = new THREE.BufferGeometry().setFromPoints([
    refined.center.clone().addScaledVector(refined.v, -r),
    refined.center.clone().addScaledVector(refined.v,  r),
  ]);
  group.add(new THREE.Line(xL, new THREE.LineBasicMaterial({ color: color, depthTest: false })));
  group.add(new THREE.Line(yL, new THREE.LineBasicMaterial({ color: color, depthTest: false })));
}

// ===== Lochabstand (Hole-to-Hole) =============================================
// 2 Klicks auf je eine Bohrung → detectHole + refineHole für jede Bohrung,
// dann Achsmittelpunkt-zu-Achsmittelpunkt-Distanz auf der MATERIAL-OBERKANTE.
// Vorteil: deterministischer Bohrungs-Mittelpunkt (2D-Kreisfit statt Cluster-Drift),
//         exakter Anker (Material-Eintritt statt Cluster-Mitte).
function analyzeHolespanClick(hit) {
  if (!holespanGroup) { holespanGroup = new THREE.Group(); scene.add(holespanGroup); }
  const BBOX_DIAG = modelBBox ? modelBBox.getSize(new THREE.Vector3()).length() : 100;
  const det = detectHole(hit, { lightweight: false });
  if (!det) {
    showError('Keine Bohrung erkannt — bitte mittig in zylindrische Innenwand klicken.');
    return;
  }
  const ref = refineHole(det, hit.object);
  if (!ref) {
    showError('Bohrungs-Refine fehlgeschlagen — Kreisfit konvergiert nicht.');
    return;
  }
  // Visualisierung: exakter Kreis am Material-Eintritt + Cross-Hair im Zentrum
  drawHoleRing(holespanGroup, ref, 0xFCD34D);
  if (!holespanFirst) {
    holespanFirst = ref;
    measureHint.innerHTML =
      `<strong>Lochabstand:</strong> 1. Bohrung erkannt — Ø <strong>${(ref.radius*2).toFixed(2)} mm</strong>` +
      `<br><span style="opacity:0.55;font-size:10px;">2. Bohrung anklicken …</span>`;
    return;
  }
  // 2. Bohrung erfasst — berechne präzise Distanzen
  const A = holespanFirst.center.clone();    // auf Material-Oberkante
  const B = ref.center.clone();
  const ab = new THREE.Vector3().subVectors(B, A);
  const dCenter = ab.length();
  // Achsmittelpunkt-zu-Achsmittelpunkt entlang der Achse (theoretisch identisch
  // mit Material-Oberkanten-Distanz, wenn Achsen parallel sind)
  const Aaxis = holespanFirst.centerOnAxis.clone();
  const Baxis = ref.centerOnAxis.clone();
  const dCenterAxis = Aaxis.distanceTo(Baxis);
  // Min. Abstand der ACHSEN (skew lines)
  const dirA = holespanFirst.axis;
  const dirB = ref.axis;
  const cross = new THREE.Vector3().crossVectors(dirA, dirB);
  let dAxes = dCenter;
  if (cross.length() > 1e-6) {
    dAxes = Math.abs(new THREE.Vector3().subVectors(Baxis, Aaxis).dot(cross) / cross.length());
  }
  // Winkel zwischen Achsen (absolute, da Richtung egal)
  const cos = Math.max(-1, Math.min(1, Math.abs(dirA.dot(dirB))));
  const angleAxes = Math.acos(cos) * 180 / Math.PI;
  const parallel = angleAxes < 2.5;
  // Visualisierung: dicke gelbe Linie zwischen den beiden Mittelpunkten
  const lineG = new THREE.BufferGeometry().setFromPoints([A, B]);
  holespanGroup.add(new THREE.Line(lineG, new THREE.LineBasicMaterial({
    color: 0xFCD34D, depthTest: false, linewidth: 3, transparent: true, opacity: 1.0,
  })));
  // Distance-Beschriftung als kleine Punkte an den Enden
  for (const p of [A, B]) {
    const dot = new THREE.Mesh(
      new THREE.SphereGeometry(BBOX_DIAG * 0.006, 14, 14),
      new THREE.MeshBasicMaterial({ color: 0xFCD34D, depthTest: false })
    );
    dot.position.copy(p); dot.renderOrder = 999;
    holespanGroup.add(dot);
  }
  const mid = A.clone().add(B).multiplyScalar(0.5);
  measureHint.innerHTML =
    `<strong>Lochabstand</strong><br>` +
    `Mitte → Mitte: <strong>${dCenter.toFixed(3)} mm</strong>` +
    (parallel
      ? `<br><span style="opacity:0.65;font-size:11px;">Achsen parallel · Ø₁ ${(holespanFirst.radius*2).toFixed(2)} · Ø₂ ${(ref.radius*2).toFixed(2)} mm</span>`
      : `<br><span style="opacity:0.65;font-size:11px;">Achsen schief · Winkel ${angleAxes.toFixed(1)}° · min. Achsabstand ${dAxes.toFixed(2)} mm</span>`);
  measureHint.style.display = 'block';
  pushHistory({
    type: 'holespan',
    kind: 'Loch-Abstand',
    label: `Loch-Ab. #${measurementHistory.filter(h=>h.type==='holespan').length + 1}`,
    value: `${dCenter.toFixed(3)} mm`,
    detail: parallel
      ? `Ø₁ ${(holespanFirst.radius*2).toFixed(2)} · Ø₂ ${(ref.radius*2).toFixed(2)} mm · Achsen parallel`
      : `Winkel ${angleAxes.toFixed(1)}° · min. Achsabstand ${dAxes.toFixed(2)} mm`,
    anchor: { x: mid.x, y: mid.y, z: mid.z },
    data: {
      centerToCenter: dCenter,
      centerToCenterOnAxis: dCenterAxis,
      axisToAxis: dAxes,
      angleBetweenAxes: angleAxes,
      parallel,
      d1: holespanFirst.radius * 2,
      d2: ref.radius * 2,
      a: { x: A.x, y: A.y, z: A.z },
      b: { x: B.x, y: B.y, z: B.z },
    },
  });
  holespanFirst = null;
}

function solveLinear4(A, b) {
  // Gauss-Elimination mit partial pivoting, 4x4
  const M = A.map((row, i) => [...row, b[i]]);
  for (let p = 0; p < 4; p++) {
    let mx = Math.abs(M[p][p]), ri = p;
    for (let i = p+1; i < 4; i++) if (Math.abs(M[i][p]) > mx) { mx = Math.abs(M[i][p]); ri = i; }
    if (mx < 1e-10) return null;
    if (ri !== p) { const tmp = M[p]; M[p] = M[ri]; M[ri] = tmp; }
    for (let i = p+1; i < 4; i++) {
      const f = M[i][p] / M[p][p];
      for (let j = p; j <= 4; j++) M[i][j] -= f * M[p][j];
    }
  }
  const x = [0,0,0,0];
  for (let i = 3; i >= 0; i--) {
    let s = M[i][4];
    for (let j = i+1; j < 4; j++) s -= M[i][j] * x[j];
    x[i] = s / M[i][i];
  }
  return x;
}

// ===== Mess-Protokoll-Tabelle =================================================
function pushHistory(entry) {
  entry.ts = entry.ts || new Date().toISOString();
  entry.tolerance = entry.tolerance || '';
  entry.note      = entry.note      || '';
  measurementHistory.push(entry);
  renderProtocolTable();
  rebuildLabels();
}
function renderProtocolTable() {
  const tbody = document.getElementById('proto-tbody');
  const countEl = document.getElementById('protocol-count');
  if (!tbody || !countEl) return;   // defensiv: falls Panel noch nicht im DOM
  const n = measurementHistory.length;
  countEl.textContent = n + ' Eintr' + (n === 1 ? 'ag' : 'äge');
  if (n === 0) {
    tbody.innerHTML = `<tr id="proto-empty"><td colspan="6" style="padding:24px;text-align:center;color:var(--card-text-muted,rgba(255,255,255,0.40));font-style:italic;">
      Keine Messungen erfasst. Nutze die Tools <kbd>M</kbd> Messen · <kbd>B</kbd> Bohrung · <kbd>R</kbd> Radius — oder klick auf „+ Eintrag" für manuelle Werte.
    </td></tr>`;
    return;
  }
  const typeBadge = {
    'measure':     { c: '#FF6B35', t: 'P→P' },
    'hole':        { c: '#FACC15', t: 'Bohrung' },
    'counterbore': { c: '#FBBF24', t: 'Senkung' },
    'radius':      { c: '#A78BFA', t: 'Radius' },
    'angle':       { c: '#34D399', t: 'Winkel' },
    'chamfer':     { c: '#FB923C', t: 'Fase' },
    'pocket':      { c: '#60A5FA', t: 'Tasche' },
    'depth':       { c: '#22D3EE', t: 'Tiefe' },
    'edge':        { c: '#F472B6', t: 'Kante' },
    'holespan':    { c: '#FCD34D', t: 'Loch-Ab.' },
    'manual':      { c: '#A3A3A3', t: 'Manuell' },
  };
  tbody.innerHTML = measurementHistory.map((h, i) => {
    const badgeColor = (typeBadge[h.type] || { c: '#A3A3A3' }).c;
    const displayKind = h.kind || (typeBadge[h.type] || { t: h.type }).t;
    return `
      <tr data-i="${i}">
        <td style="color:var(--v3d-text-faint);font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:500;">${i+1}</td>
        <td>
          <span class="type-badge" style="background:${badgeColor}22;color:${badgeColor};">${escHtml(displayKind)}</span>
        </td>
        <td style="font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:600;font-variant-numeric:tabular-nums;">${escHtml(h.value || '—')}</td>
        <td>
          <input data-field="tolerance" data-i="${i}" value="${escAttr(h.tolerance || '')}"
                 placeholder="—" class="proto-cell" style="width:90px;">
        </td>
        <td>
          <input data-field="note" data-i="${i}" value="${escAttr(h.note || h.detail || '')}"
                 placeholder="—" class="proto-cell" style="color:var(--v3d-text-mute);">
        </td>
        <td style="text-align:right;">
          <button data-act="del" data-i="${i}" class="vtb-btn vtb-icon-btn"
                  style="border-color:rgba(248,113,113,0.30);color:#fca5a5;font-size:14px;">×</button>
        </td>
      </tr>
    `;
  }).join('');
  // Wire-up inputs + buttons
  tbody.querySelectorAll('input.proto-cell').forEach(inp => {
    inp.addEventListener('change', () => {
      const i = parseInt(inp.dataset.i);
      const field = inp.dataset.field;
      if (measurementHistory[i]) measurementHistory[i][field] = inp.value;
    });
    inp.addEventListener('focus', () => inp.style.borderColor = 'rgba(242,88,27,0.50)');
    inp.addEventListener('blur',  () => inp.style.borderColor = 'transparent');
  });
  tbody.querySelectorAll('button[data-act="del"]').forEach(btn => {
    btn.addEventListener('click', () => {
      const i = parseInt(btn.dataset.i);
      measurementHistory.splice(i, 1);
      renderProtocolTable();
      rebuildLabels();
    });
  });
}
function escHtml(s) { return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c])); }
function escAttr(s) { return String(s == null ? '' : s).replace(/"/g, '&quot;'); }

// ===== Werkzeug-Analyse ========================================================
async function runToolAnalysis() {
  const modal = document.getElementById('viewer-tools-modal');
  const tbody = document.getElementById('tools-tbody');
  const status = document.getElementById('tools-status');
  modal.style.display = 'flex';
  status.textContent = 'Analysiere Messungen + gleiche Lager ab …';
  tbody.innerHTML = '';

  const density = parseFloat(document.getElementById('vtb-material').value) || null;
  try {
    const r = await fetch('/api/3d-viewer/tool-analysis', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        measurements: measurementHistory,
        material_density: density,
      }),
    });
    if (!r.ok) throw new Error('HTTP ' + r.status);
    const data = await r.json();
    if (!data.ok) throw new Error(data.error || 'unknown');
    renderToolAnalysis(data);
    status.textContent = '';
  } catch (e) {
    status.innerHTML = `<span style="color:#fca5a5;">Fehler: ${e.message || e}</span>`;
  }
}
function renderToolAnalysis(data) {
  const tbody = document.getElementById('tools-tbody');
  document.getElementById('tools-mat').textContent = data.summary.material_label + ' (Vorzug: ' + data.summary.preferred_material + ')';
  document.getElementById('tools-unique').textContent = data.summary.unique_tools;
  document.getElementById('tools-avail').textContent = data.summary.available_count;
  document.getElementById('tools-missing').textContent = data.summary.missing_count;
  if (data.tools.length === 0) {
    tbody.innerHTML = `<tr><td colspan="6" style="padding:24px;text-align:center;opacity:0.55;font-style:italic;">
      Keine Werkzeuge abgeleitet. Erfasse zuerst Messungen (Bohrungen, Radien, Gewinde) im Protokoll.
    </td></tr>`;
    return;
  }
  // Sortierung: zuerst fehlende, dann nach tool_type, dann diameter
  const sorted = [...data.tools].sort((a, b) => {
    if ((a.missing > 0) !== (b.missing > 0)) return a.missing > 0 ? -1 : 1;
    if (a.tool_type !== b.tool_type) return a.tool_type.localeCompare(b.tool_type);
    return (a.diameter || 0) - (b.diameter || 0);
  });
  const TYPE_LABEL = {
    bohrer: 'Spiralbohrer',
    fraeser: 'Fräser',
    gewindebohrer: 'Gewindebohrer',
    senker: 'Senker',
    drehmeissel: 'Drehmeißel',
  };
  tbody.innerHTML = sorted.map(t => {
    const isMissing = t.missing > 0;
    const diaLabel = t.tool_type === 'gewindebohrer' ? `M${t.diameter}` : `${t.diameter.toFixed(2)} mm`;
    const lager = (t.available_tools || []).slice(0, 3).map(a =>
      `<div style="font-size:10px;opacity:0.85;">
         <strong>${escHtml(a.ident || '')}</strong> ${escHtml(a.name || '')}
         ${a.material ? ' · ' + escHtml(a.material) : ''}
         ${a.location ? ' · ' + escHtml(a.location) : ''}
         ${a.stock != null ? ` <span style="opacity:0.65;">(Stock ${a.stock})</span>` : ''}
       </div>`
    ).join('') || '<span style="opacity:0.40;font-style:italic;">nicht im Lager</span>';
    return `
      <tr style="border-bottom:1px solid rgba(255,255,255,0.06);${isMissing ? 'background:rgba(239,68,68,0.08);' : ''}">
        <td style="padding:8px 10px;">
          <strong>${escHtml(TYPE_LABEL[t.tool_type] || t.tool_type)}</strong><br>
          <span style="font-size:10px;opacity:0.55;">${escHtml(t.reason || '')}</span>
        </td>
        <td style="padding:8px 10px;text-align:right;font-family:ui-monospace,monospace;font-weight:600;">${diaLabel}</td>
        <td style="padding:8px 10px;text-align:center;font-size:10px;">${escHtml(t.recommended_material || '—')}</td>
        <td style="padding:8px 10px;text-align:center;font-family:ui-monospace,monospace;font-weight:600;">${t.count}</td>
        <td style="padding:8px 10px;text-align:center;font-family:ui-monospace,monospace;
                    color:${t.in_stock >= t.count ? '#86efac' : (t.in_stock > 0 ? '#fef3c7' : '#fca5a5')};font-weight:600;">
          ${t.in_stock} ${isMissing ? `<br><span style="font-size:9px;opacity:0.85;">fehlt ${t.missing}</span>` : ''}
        </td>
        <td style="padding:8px 10px;">${lager}</td>
      </tr>
    `;
  }).join('');
}

// Manueller Eintrag — Form ein-/ausblenden + speichern
function setupProtocolForm() {
  const form = document.getElementById('proto-form');
  const open = () => {
    form.style.display = 'flex';
    document.getElementById('proto-value').focus();
  };
  const close = () => {
    form.style.display = 'none';
    document.getElementById('proto-value').value = '';
    document.getElementById('proto-tol').value = '';
    document.getElementById('proto-note').value = '';
  };
  document.getElementById('proto-add').addEventListener('click', () => {
    form.style.display = form.style.display === 'flex' ? 'none' : 'flex';
    if (form.style.display === 'flex') document.getElementById('proto-value').focus();
  });
  document.getElementById('proto-cancel').addEventListener('click', close);
  document.getElementById('proto-save').addEventListener('click', () => {
    const t = document.getElementById('proto-type').value;
    const v = document.getElementById('proto-value').value.trim();
    if (!v) { document.getElementById('proto-value').focus(); return; }
    const tol = document.getElementById('proto-tol').value.trim();
    const nt  = document.getElementById('proto-note').value.trim();
    const kindLabel = {
      bohrung: 'Bohrung', senkung: 'Senkung', fase: 'Fase', radius: 'Radius',
      tasche: 'Tasche', gewinde: 'Gewinde',
      aussenmass: 'Außenmaß', innenmass: 'Innenmaß',
      winkel: 'Winkel', sonstige: 'Sonstiges',
    }[t] || t;
    pushHistory({
      type: 'manual',
      kind: kindLabel,
      label: `${kindLabel} #${measurementHistory.filter(h => h.kind === kindLabel).length + 1}`,
      value: v,
      tolerance: tol,
      note: nt,
      data: { manual: true, t },
    });
    close();
  });
  document.getElementById('proto-clear').addEventListener('click', () => {
    if (measurementHistory.length === 0) return;
    if (confirm(`Alle ${measurementHistory.length} Messungen löschen?`)) {
      measurementHistory = [];
      renderProtocolTable();
      clearLabels();
    }
  });
  document.getElementById('proto-undo').addEventListener('click', undoLastMeasurement);
}

function undoLastMeasurement() {
  if (!measurementHistory || measurementHistory.length === 0) {
    // Hinweis statt stiller Fail
    if (typeof measureHint !== 'undefined' && measureHint) {
      measureHint.innerHTML = '<span style="opacity:0.6;">Nichts zum Rückgängig — Mess-Protokoll ist leer.</span>';
      measureHint.style.display = 'block';
      clearTimeout(undoLastMeasurement._t);
      undoLastMeasurement._t = setTimeout(() => { measureHint.style.display = 'none'; }, 2000);
    }
    return;
  }
  const removed = measurementHistory.pop();
  renderProtocolTable();
  rebuildLabels();
  // Sichtbares Feedback
  if (typeof measureHint !== 'undefined' && measureHint) {
    measureHint.innerHTML = `<strong>↶ Rückgängig:</strong> ${escHtml(removed.kind || removed.type || 'Messung')} #${measurementHistory.length + 1} entfernt`;
    measureHint.style.display = 'block';
    clearTimeout(undoLastMeasurement._t);
    undoLastMeasurement._t = setTimeout(() => { measureHint.style.display = 'none'; }, 2500);
  }
  // Wenn ein Tool gerade auf den 2. Klick wartet, State zurücksetzen
  anglePoints = [];
  measurePoints = [];
  depthFirst = null;
  holespanFirst = null;
  // Visualisierungen säubern (nur die der gerade aktiven Modi)
  if (angleGroup)    clearAngleViz();
  if (measureGroup)  clearMeasurements();
  if (depthGroup)    clearDepthViz();
  if (holespanGroup) clearHolespanViz();
  if (pocketGroup)   clearPocketViz();
  if (edgeGroup)     clearEdgeViz();
  if (radiusGroup)   clearRadiusViz();
  if (holeGroup)     clearHoleViz();
  if (chamferGroup)  clearChamferViz();
}

// ===== Speicher-Funktionen =====================================================
function downloadBlob(blob, filename) {
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url; a.download = filename;
  document.body.appendChild(a); a.click(); a.remove();
  setTimeout(() => URL.revokeObjectURL(url), 1000);
}

function fmtFileBase() {
  const base = (currentFileName || 'modell').replace(/\.[^.]+$/, '');
  const ts = new Date().toISOString().slice(0,16).replace(/[:T]/g,'-');
  return `${base}-${ts}`;
}

function buildMeasureProtocolTxt() {
  const lines = [];
  lines.push('=== TAKOMA 3D-VIEWER · MESS-PROTOKOLL ===');
  lines.push(`Datei:       ${currentFileName || '(kein Dateiname)'}`);
  lines.push(`Erstellt:    ${new Date().toLocaleString('de-DE')}`);
  if (modelBBox) {
    const size = modelBBox.getSize(new THREE.Vector3());
    lines.push(`Größe (BBox): ${size.x.toFixed(1)} × ${size.y.toFixed(1)} × ${size.z.toFixed(1)} mm`);
  }
  lines.push(`Volumen:     ${modelVolumeCm3.toFixed(1)} cm³`);
  lines.push(`Oberfläche:  ${modelSurfaceCm2.toFixed(1)} cm²`);
  const matSel = document.getElementById('vtb-material');
  const matName = matSel.options[matSel.selectedIndex].getAttribute('data-name');
  const density = parseFloat(matSel.value);
  lines.push(`Werkstoff:   ${matName} (${density.toFixed(2)} g/cm³)`);
  lines.push(`Gewicht:     ${(modelVolumeCm3 * density).toFixed(0)} g`);
  lines.push('');
  lines.push(`Messungen (${measurementHistory.length}):`);
  lines.push('-'.repeat(70));
  if (measurementHistory.length === 0) {
    lines.push('  (keine Messungen erfasst)');
  } else {
    measurementHistory.forEach((h, i) => {
      if (h.type === 'measure') {
        lines.push(`${(i+1).toString().padStart(2)}. ${h.label}: ${h.value}`);
        lines.push(`    Δx=${h.data.dx.toFixed(2)}  Δy=${h.data.dy.toFixed(2)}  Δz=${h.data.dz.toFixed(2)} mm`);
        lines.push(`    A (${h.data.a.snap}): ${h.data.a.x.toFixed(2)}, ${h.data.a.y.toFixed(2)}, ${h.data.a.z.toFixed(2)}`);
        lines.push(`    B (${h.data.b.snap}): ${h.data.b.x.toFixed(2)}, ${h.data.b.y.toFixed(2)}, ${h.data.b.z.toFixed(2)}`);
      } else if (h.type === 'hole') {
        lines.push(`${(i+1).toString().padStart(2)}. ${h.label}: ${h.value}`);
        lines.push(`    Ø ${h.data.diameter.toFixed(2)} mm  ·  Tiefe ${h.data.depth.toFixed(2)} mm`);
        lines.push(`    Achse: (${h.data.axis.x.toFixed(3)}, ${h.data.axis.y.toFixed(3)}, ${h.data.axis.z.toFixed(3)})`);
        lines.push(`    Start: (${h.data.start.x.toFixed(2)}, ${h.data.start.y.toFixed(2)}, ${h.data.start.z.toFixed(2)})`);
        lines.push(`    Ende:  (${h.data.end.x.toFixed(2)}, ${h.data.end.y.toFixed(2)}, ${h.data.end.z.toFixed(2)})`);
      }
    });
  }
  lines.push('-'.repeat(70));
  lines.push('Generiert von Takoma Digital — 3D-Viewer');
  return lines.join('\n');
}

function buildMeasureProtocolCsv() {
  const rows = [['Nr', 'Typ', 'Label', 'Wert', 'Einheit', 'Δx', 'Δy', 'Δz', 'Details']];
  measurementHistory.forEach((h, i) => {
    if (h.type === 'measure') {
      rows.push([
        i+1, 'Maß', h.label, h.value.replace(/ mm$/, ''), 'mm',
        h.data.dx.toFixed(2), h.data.dy.toFixed(2), h.data.dz.toFixed(2),
        `${h.data.a.snap}→${h.data.b.snap}`,
      ]);
    } else if (h.type === 'hole') {
      rows.push([
        i+1, 'Bohrung', h.label, h.data.diameter.toFixed(2), 'mm',
        '', '', '',
        `Ø ${h.data.diameter.toFixed(2)} · T ${h.data.depth.toFixed(2)} · Triangles ${h.data.triangles}`,
      ]);
    }
  });
  return rows.map(r => r.map(c => {
    const s = String(c == null ? '' : c);
    return /[;,"\n]/.test(s) ? '"' + s.replace(/"/g, '""') + '"' : s;
  }).join(';')).join('\r\n');
}

function saveTxt() {
  const txt = buildMeasureProtocolTxt();
  downloadBlob(new Blob([txt], { type: 'text/plain;charset=utf-8' }), `${fmtFileBase()}-mess-protokoll.txt`);
}
function saveCsv() {
  const csv = '' + buildMeasureProtocolCsv();   // BOM für Excel
  downloadBlob(new Blob([csv], { type: 'text/csv;charset=utf-8' }), `${fmtFileBase()}-mess-protokoll.csv`);
}

// Annotiertes PNG: Screenshot + Mess-Tabelle daneben, auf 2D-Canvas komponiert
function saveAnnotatedPng() {
  renderer.render(scene, camera);
  const shotW = renderer.domElement.width;
  const shotH = renderer.domElement.height;
  // Tabellen-Spalte rechts
  const padX = 24, padY = 24, lh = 20;
  const headerRows = 7;  // Datei/Größe/Vol/Surf/Material/Gewicht/Trennlinie
  const rows = headerRows + 2 + measurementHistory.length * (3);  // Überschrift + Messungen
  const tableW = Math.min(520, shotW * 0.42);
  const totalH = Math.max(shotH, padY * 2 + rows * lh + 60);
  const totalW = shotW + tableW;

  const c = document.createElement('canvas');
  c.width = totalW; c.height = totalH;
  const ctx = c.getContext('2d');
  // Hintergrund (neutraler Charcoal statt blau)
  ctx.fillStyle = '#15192e';
  ctx.fillRect(0, 0, totalW, totalH);
  // Screenshot links einbetten
  ctx.drawImage(renderer.domElement, 0, 0, shotW, shotH);
  // Tabelle rechts
  let y = padY + 18;
  const x = shotW + padX;
  ctx.fillStyle = '#f2581b';
  ctx.font = 'bold 16px -apple-system, system-ui, sans-serif';
  ctx.fillText('Takoma 3D-Viewer · Protokoll', x, y); y += lh + 6;
  ctx.fillStyle = '#fafafa'; ctx.font = '12px ui-monospace, monospace';
  ctx.fillText(`Datei: ${currentFileName || '—'}`, x, y); y += lh;
  ctx.fillText(`Datum: ${new Date().toLocaleString('de-DE')}`, x, y); y += lh;
  if (modelBBox) {
    const sz = modelBBox.getSize(new THREE.Vector3());
    ctx.fillText(`Größe: ${sz.x.toFixed(1)}×${sz.y.toFixed(1)}×${sz.z.toFixed(1)} mm`, x, y); y += lh;
  }
  ctx.fillText(`Volumen: ${modelVolumeCm3.toFixed(1)} cm³`, x, y); y += lh;
  const matSel = document.getElementById('vtb-material');
  const matName = matSel.options[matSel.selectedIndex].getAttribute('data-name');
  const density = parseFloat(matSel.value);
  ctx.fillText(`Werkstoff: ${matName}`, x, y); y += lh;
  ctx.fillText(`Gewicht: ${(modelVolumeCm3 * density).toFixed(0)} g`, x, y); y += lh + 4;
  ctx.strokeStyle = 'rgba(255,255,255,0.20)'; ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x + tableW - padX*2, y); ctx.stroke(); y += 12;

  ctx.fillStyle = '#fef3c7';
  ctx.font = 'bold 13px -apple-system, system-ui, sans-serif';
  ctx.fillText(`Messungen (${measurementHistory.length})`, x, y); y += lh + 2;

  ctx.fillStyle = '#fafafa'; ctx.font = '11px ui-monospace, monospace';
  if (measurementHistory.length === 0) {
    ctx.fillStyle = 'rgba(255,255,255,0.40)';
    ctx.fillText('(keine Messungen erfasst)', x, y);
  } else {
    measurementHistory.forEach((h, i) => {
      ctx.fillStyle = '#f2581b'; ctx.font = 'bold 11px ui-monospace, monospace';
      ctx.fillText(`${i+1}. ${h.label}`, x, y); y += lh - 2;
      ctx.fillStyle = '#fafafa'; ctx.font = '11px ui-monospace, monospace';
      if (h.type === 'measure') {
        ctx.fillText(`   ${h.value}  Δ(${h.data.dx.toFixed(2)}, ${h.data.dy.toFixed(2)}, ${h.data.dz.toFixed(2)})`, x, y); y += lh - 2;
        ctx.fillStyle = 'rgba(255,255,255,0.55)';
        ctx.fillText(`   ${h.data.a.snap} → ${h.data.b.snap}`, x, y); y += lh;
      } else {
        ctx.fillText(`   ${h.value}`, x, y); y += lh - 2;
        ctx.fillStyle = 'rgba(255,255,255,0.55)';
        ctx.fillText(`   ${h.data.triangles} Tris · Achse (${h.data.axis.x.toFixed(2)}, ${h.data.axis.y.toFixed(2)}, ${h.data.axis.z.toFixed(2)})`, x, y); y += lh;
      }
    });
  }
  c.toBlob(b => downloadBlob(b, `${fmtFileBase()}-annotiert.png`), 'image/png');
}

// Session-Save in localStorage
function saveSessionLocal(status) {
  try {
    if (currentFileBuffer && currentFileBuffer.byteLength > STORAGE_MAX_BYTES) {
      status('Datei zu groß für lokale Session (' + (currentFileBuffer.byteLength/1024/1024).toFixed(1) + ' MB > 8 MB) — Messungen werden trotzdem gespeichert.');
      // ohne Datei-Buffer speichern
    }
    const fileB64 = (currentFileBuffer && currentFileBuffer.byteLength <= STORAGE_MAX_BYTES)
      ? arrayBufferToBase64(currentFileBuffer) : null;
    const payload = {
      fileName: currentFileName,
      fileData: fileB64,
      history: measurementHistory,
      camera: { pos: camera.position.toArray(), target: controls.target.toArray() },
      renderMode, bgMode,
      material: document.getElementById('vtb-material').value,
      ts: new Date().toISOString(),
    };
    localStorage.setItem(STORAGE_KEY, JSON.stringify(payload));
    status(`Gespeichert · ${currentFileName || '?'} · ${measurementHistory.length} Messungen`);
  } catch (e) {
    status('Fehler beim Speichern: ' + (e.message || e));
  }
}
function arrayBufferToBase64(buf) {
  let bin = '';
  const bytes = new Uint8Array(buf);
  const chunk = 0x8000;
  for (let i = 0; i < bytes.length; i += chunk) {
    bin += String.fromCharCode.apply(null, bytes.subarray(i, i + chunk));
  }
  return btoa(bin);
}
function base64ToArrayBuffer(b64) {
  const bin = atob(b64);
  const bytes = new Uint8Array(bin.length);
  for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i);
  return bytes.buffer;
}

// Session-Restore-Check beim Start
function checkSessionRestore() {
  try {
    const raw = localStorage.getItem(STORAGE_KEY);
    if (!raw) return;
    const s = JSON.parse(raw);
    const banner = document.getElementById('viewer-restore');
    const txt    = document.getElementById('viewer-restore-text');
    const when   = new Date(s.ts).toLocaleString('de-DE');
    txt.textContent = `Letzte Session: ${s.fileName || '?'} · ${when}` + (s.history ? ` · ${s.history.length} Messungen` : '');
    banner.style.display = 'flex';
  } catch (e) { /* ignore */ }
}
function doSessionRestore() {
  try {
    const raw = localStorage.getItem(STORAGE_KEY);
    if (!raw) return;
    const s = JSON.parse(raw);
    if (s.fileData) {
      const ab = base64ToArrayBuffer(s.fileData);
      currentFileName = s.fileName;
      currentFileBuffer = ab;
      measurementHistory = s.history || [];
      renderProtocolTable();
      loadFromArrayBuffer(s.fileName, ab);
      // Kamera + Material erst nach Laden setzen — small timeout
      setTimeout(() => {
        if (s.camera) {
          camera.position.fromArray(s.camera.pos);
          controls.target.fromArray(s.camera.target);
          controls.update();
        }
        if (s.material) document.getElementById('vtb-material').value = s.material;
        updateMaterialPanel();
        rebuildLabels();   // Labels nach Modell-Bound-Box neu aufbauen
      }, 200);
    } else {
      showError('Session ohne Dateidaten — bitte Datei manuell wieder öffnen, Messungen werden zugeordnet.');
      currentFileName = s.fileName;
      measurementHistory = s.history || [];
    }
    document.getElementById('viewer-restore').style.display = 'none';
  } catch (e) {
    showError('Restore fehlgeschlagen: ' + (e.message || e));
  }
}

// ===== Beleg-Anhang ============================================================
let attachSearchTimer = null;
async function attachSearch() {
  const kind = document.getElementById('attach-kind').value;
  const q = document.getElementById('attach-search').value.trim();
  const resBox = document.getElementById('attach-results');
  if (q.length < 2) { resBox.innerHTML = '<div style="padding:10px;opacity:0.55;">Mindestens 2 Zeichen eingeben …</div>'; return; }
  resBox.innerHTML = '<div style="padding:10px;opacity:0.55;">Suchen …</div>';
  try {
    const r = await fetch(`/api/3d-viewer/search?kind=${kind}&q=${encodeURIComponent(q)}`);
    if (!r.ok) throw new Error('HTTP ' + r.status);
    const data = await r.json();
    if (!data.items || data.items.length === 0) {
      resBox.innerHTML = '<div style="padding:10px;opacity:0.55;">Keine Treffer.</div>';
      return;
    }
    resBox.innerHTML = data.items.map(it => `
      <div class="attach-result-item" data-id="${it.id}" data-no="${(it.no || '').replace(/"/g,'&quot;')}">
        <strong>${(it.no || '?').replace(/[<>]/g,'')}</strong>
        <span style="opacity:0.65;"> · ${(it.customer || '').replace(/[<>]/g,'').slice(0, 60)}</span>
        ${it.status ? `<span style="opacity:0.55;font-size:10px;"> · ${it.status}</span>` : ''}
      </div>
    `).join('');
    resBox.querySelectorAll('.attach-result-item').forEach(el => {
      el.addEventListener('click', () => attachDo(kind, parseInt(el.dataset.id), el.dataset.no));
    });
  } catch (e) {
    resBox.innerHTML = `<div style="padding:10px;color:#fca5a5;">Fehler: ${e.message || e}</div>`;
  }
}
async function attachDo(kind, id, no) {
  const status = document.getElementById('attach-status');
  status.textContent = 'Lade hoch …';
  try {
    if (!currentFileBuffer) throw new Error('keine Datei aktiv');
    // Annotiertes PNG erstellen
    renderer.render(scene, camera);
    const pngDataUrl = renderer.domElement.toDataURL('image/png');
    // Aufruf
    const fd = new FormData();
    fd.append('kind', kind);
    fd.append('id', id);
    fd.append('file_name', currentFileName);
    fd.append('file_blob', new Blob([currentFileBuffer]), currentFileName);
    fd.append('protocol_txt', buildMeasureProtocolTxt());
    fd.append('snapshot_png', dataUrlToBlob(pngDataUrl), `${fmtFileBase()}-snapshot.png`);
    fd.append('history_json', JSON.stringify(measurementHistory));
    const r = await fetch('/api/3d-viewer/attach', { method: 'POST', body: fd });
    if (!r.ok) {
      const txt = await r.text().catch(() => '');
      throw new Error('HTTP ' + r.status + ' ' + txt.slice(0, 200));
    }
    const data = await r.json();
    status.innerHTML = `<span style="color:#86efac;">An ${no} angehängt (${data.files || 3} Dateien). <a href="${data.url}" style="color:#86efac;text-decoration:underline;">Beleg öffnen →</a></span>`;
  } catch (e) {
    status.innerHTML = `<span style="color:#fca5a5;">Fehler: ${e.message || e}</span>`;
  }
}
function dataUrlToBlob(dataUrl) {
  const m = dataUrl.match(/^data:(.*?);base64,(.*)$/);
  const mime = m[1] || 'application/octet-stream';
  const bin = atob(m[2]);
  const bytes = new Uint8Array(bin.length);
  for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i);
  return new Blob([bytes], { type: mime });
}

// Jacobi-Eigenvalue für symmetrische 3x3-Matrix (für PCA-Achse-Fit)
function jacobi3(a) {
  // a: 3x3 nested array, wird IN-PLACE modifiziert
  const A = [a[0].slice(), a[1].slice(), a[2].slice()];
  const V = [[1,0,0],[0,1,0],[0,0,1]];
  const MAX_ITER = 50;
  for (let iter = 0; iter < MAX_ITER; iter++) {
    // Off-diagonal element mit größtem Betrag finden
    let p = 0, q = 1, max = Math.abs(A[0][1]);
    if (Math.abs(A[0][2]) > max) { p = 0; q = 2; max = Math.abs(A[0][2]); }
    if (Math.abs(A[1][2]) > max) { p = 1; q = 2; max = Math.abs(A[1][2]); }
    if (max < 1e-12) break;
    const theta = (A[q][q] - A[p][p]) / (2 * A[p][q]);
    const t = Math.sign(theta) / (Math.abs(theta) + Math.sqrt(theta * theta + 1));
    const c = 1 / Math.sqrt(t * t + 1);
    const s = t * c;
    const App = A[p][p], Aqq = A[q][q], Apq = A[p][q];
    A[p][p] = c*c*App - 2*s*c*Apq + s*s*Aqq;
    A[q][q] = s*s*App + 2*s*c*Apq + c*c*Aqq;
    A[p][q] = A[q][p] = 0;
    for (let i = 0; i < 3; i++) {
      if (i !== p && i !== q) {
        const Aip = A[i][p], Aiq = A[i][q];
        A[i][p] = A[p][i] = c * Aip - s * Aiq;
        A[i][q] = A[q][i] = s * Aip + c * Aiq;
      }
      const Vip = V[i][p], Viq = V[i][q];
      V[i][p] = c * Vip - s * Viq;
      V[i][q] = s * Vip + c * Viq;
    }
  }
  return { values: [A[0][0], A[1][1], A[2][2]], vectors: V };
}
function addMeasurePoint(p, snapType) {
  if (!measureGroup) { measureGroup = new THREE.Group(); scene.add(measureGroup); }
  // Snap-Marker je nach Typ: Vertex = großer Punkt, Edge = Quadrat, Midpoint = Dreieck, Surface = klein
  const baseSize = modelBBox ? modelBBox.getSize(new THREE.Vector3()).length() * 0.008 : 1;
  const colorMap = { vertex: 0xfacc15, midpoint: 0xa78bfa, edge: 0xff6b35, surface: 0xb0bec5 };
  const marker = new THREE.Mesh(
    new THREE.SphereGeometry(baseSize * (snapType === 'vertex' ? 1.4 : snapType === 'surface' ? 0.8 : 1.0), 12, 12),
    new THREE.MeshBasicMaterial({ color: colorMap[snapType] || 0xf2581b, depthTest: false })
  );
  marker.position.copy(p);
  marker.renderOrder = 999;
  measureGroup.add(marker);
  measurePoints.push({ point: p.clone(), type: snapType });
  if (measurePoints.length === 2) {
    const [a, b] = measurePoints;
    const geom = new THREE.BufferGeometry().setFromPoints([a.point, b.point]);
    const line = new THREE.Line(geom, new THREE.LineBasicMaterial({ color: 0xf2581b, depthTest: false }));
    line.renderOrder = 999;
    measureGroup.add(line);
    const dist = a.point.distanceTo(b.point);
    const snapInfo = `${snapLabel(a.type)} → ${snapLabel(b.type)}`;
    measureHint.innerHTML =
      `<strong>${dist.toFixed(2)} mm</strong> &nbsp;` +
      `<span style="opacity:0.7;">(Δx=${(b.point.x-a.point.x).toFixed(2)} · ` +
      `Δy=${(b.point.y-a.point.y).toFixed(2)} · Δz=${(b.point.z-a.point.z).toFixed(2)})</span><br>` +
      `<span style="opacity:0.55;font-size:10px;">${snapInfo}</span>`;
    // v1.18.0: History für Speicher-Funktion + Protokoll-Tabelle
    const midPt = a.point.clone().add(b.point).multiplyScalar(0.5);
    pushHistory({
      type: 'measure',
      kind: 'P→P',
      label: `Maß #${measurementHistory.filter(h=>h.type==='measure').length + 1}`,
      value: dist.toFixed(2) + ' mm',
      detail: `${snapLabel(a.type)} → ${snapLabel(b.type)} · Δx ${(b.point.x-a.point.x).toFixed(2)} · Δy ${(b.point.y-a.point.y).toFixed(2)} · Δz ${(b.point.z-a.point.z).toFixed(2)}`,
      anchor: { x: midPt.x, y: midPt.y, z: midPt.z },
      data: {
        a: { x: a.point.x, y: a.point.y, z: a.point.z, snap: a.type },
        b: { x: b.point.x, y: b.point.y, z: b.point.z, snap: b.type },
        dx: b.point.x - a.point.x,
        dy: b.point.y - a.point.y,
        dz: b.point.z - a.point.z,
      },
    });
    measurePoints = [];
  } else {
    measureHint.innerHTML = `<strong>Mess-Modus:</strong> 2. Punkt klicken … <span style="opacity:0.55;">(${snapLabel(snapType)})</span>`;
  }
}
function snapLabel(t) {
  return ({ vertex: 'Ecke', edge: 'Kante', midpoint: 'Mittelpunkt', surface: 'Fläche' })[t] || t;
}

// v1.18.0: Hover-Preview im Bohrungs- und Radius-Modus. Throttled, defensiv.
function onCanvasMouseMove(e) {
  try {
    if (orbiting || hoverThrottle || !currentMesh) return;
    if (!holeMode && !radiusMode) return;
    // Während Loading: kein Hover (verhindert Lock-up bei großen Modellen)
    if (loadingBox.style.display === 'flex') return;
    hoverThrottle = true;
    // 150ms throttle (war 80ms) — bei großen Modellen wichtig
    setTimeout(() => { hoverThrottle = false; }, 150);
    const rect = renderer.domElement.getBoundingClientRect();
    const mouseNdc = new THREE.Vector2(
      ((e.clientX - rect.left) / rect.width) * 2 - 1,
      -((e.clientY - rect.top) / rect.height) * 2 + 1
    );
    const raycaster = new THREE.Raycaster();
    raycaster.setFromCamera(mouseNdc, camera);
    const meshes = [];
    currentMesh.traverse(c => { if (c.isMesh) meshes.push(c); });
    const hits = raycaster.intersectObjects(meshes, true);
    if (hits.length === 0) { clearHoverHighlight(); return; }
    const mode = holeMode ? 'bohrung' : 'radius';
    const region = lightRegionGrow(hits[0], mode);
    if (region.length < 3) { clearHoverHighlight(); return; }
    clearHoverHighlight();
    const positions = new Float32Array(region.length * 9);
    let off = 0;
    for (const t of region) {
      positions[off++]=t.a.x; positions[off++]=t.a.y; positions[off++]=t.a.z;
      positions[off++]=t.b.x; positions[off++]=t.b.y; positions[off++]=t.b.z;
      positions[off++]=t.c.x; positions[off++]=t.c.y; positions[off++]=t.c.z;
    }
    const geom = new THREE.BufferGeometry();
    geom.setAttribute('position', new THREE.BufferAttribute(positions, 3));
    geom.computeVertexNormals();
    const color = (mode === 'radius') ? 0xa78bfa : 0xff6b35;
    hoverGroup = new THREE.Group();
    hoverGroup.add(new THREE.Mesh(geom, new THREE.MeshBasicMaterial({
      color, transparent: true, opacity: 0.55,
      depthTest: false, side: THREE.DoubleSide, polygonOffset: true, polygonOffsetFactor: -1,
    })));
    scene.add(hoverGroup);
  } catch (err) {
    // Stiller Fail — Hover ist nice-to-have, darf nichts anderes blockieren
    console.warn('hover-preview failed:', err);
    clearHoverHighlight();
  }
}

function onCanvasClick(e) {
  if (!currentMesh) return;
  if (!measureMode && !holeMode && !radiusMode && !angleMode && !chamferMode
      && !pocketMode && !depthMode && !edgeMode && !holespanMode) return;
  const rect = renderer.domElement.getBoundingClientRect();
  const mouseScreen = new THREE.Vector2(e.clientX - rect.left, e.clientY - rect.top);
  const mouseNdc = new THREE.Vector2(
    (mouseScreen.x / rect.width) * 2 - 1,
    -(mouseScreen.y / rect.height) * 2 + 1
  );
  const raycaster = new THREE.Raycaster();
  raycaster.setFromCamera(mouseNdc, camera);
  const meshes = [];
  currentMesh.traverse(c => { if (c.isMesh) meshes.push(c); });
  const hits = raycaster.intersectObjects(meshes, true);
  if (hits.length === 0) return;

  if (measureMode) {
    const snap = snapPoint(hits[0].point, mouseScreen);
    addMeasurePoint(snap.point, snap.type);
  } else if (holeMode) {
    analyzeHole(hits[0]);
  } else if (radiusMode) {
    analyzeRadius(hits[0]);
  } else if (angleMode) {
    analyzeAngle(hits[0]);
  } else if (chamferMode) {
    analyzeChamfer(hits[0]);
  } else if (pocketMode) {
    analyzePocket(hits[0]);
  } else if (depthMode) {
    analyzeDepthClick(hits[0]);
  } else if (edgeMode) {
    analyzeEdgeClick(hits[0]);
  } else if (holespanMode) {
    analyzeHolespanClick(hits[0]);
  }
}

// ---------- Event Wire-Up ----------
initScene();
fileInput.addEventListener('change', e => {
  const f = e.target.files[0];
  if (f) readFile(f);
});
clearBtn.addEventListener('click', resetViewer);

// Toolbar
toolbar.querySelectorAll('[data-view]').forEach(btn => {
  btn.addEventListener('click', () => setView(btn.dataset.view));
});
document.getElementById('vtb-fit').addEventListener('click', () => { if (currentMesh) { setView('iso'); }});
document.getElementById('vtb-mode').addEventListener('click', cycleRenderMode);
document.getElementById('vtb-section').addEventListener('click', toggleSection);
document.getElementById('vtb-section-axis').addEventListener('change', e => { sectionAxis = e.target.value; updateSectionPlane(); });
document.getElementById('vtb-section-slider').addEventListener('input', e => { sectionT = e.target.value / 100; updateSectionPlane(); });
document.getElementById('vtb-section-flip').addEventListener('click', () => { sectionFlipped = !sectionFlipped; updateSectionPlane(); });
document.getElementById('vtb-screenshot').addEventListener('click', takeScreenshot);

// ----- Save-Menu -----
const saveMenu     = document.getElementById('viewer-save-menu');
const saveStatus   = document.getElementById('save-status');
const attachModal  = document.getElementById('viewer-attach-modal');
function setSaveStatus(msg) { saveStatus.textContent = msg || ''; }

document.getElementById('vtb-save').addEventListener('click', () => {
  setSaveStatus(measurementHistory.length === 0 ? 'Hinweis: Noch keine Messungen — wird nur die Datei + Modellinfos gespeichert.' : '');
  saveMenu.style.display = 'flex';
});
document.getElementById('vtb-save-close').addEventListener('click', () => saveMenu.style.display = 'none');

document.getElementById('save-txt').addEventListener('click', () => { saveTxt(); setSaveStatus('TXT heruntergeladen.'); });
document.getElementById('save-csv').addEventListener('click', () => { saveCsv(); setSaveStatus('CSV heruntergeladen.'); });
document.getElementById('save-png-annotated').addEventListener('click', () => { saveAnnotatedPng(); setSaveStatus('Annotiertes PNG heruntergeladen.'); });
{
  const _pdfBtn = document.getElementById('save-pdf');
  if (_pdfBtn) _pdfBtn.addEventListener('click', async () => {
    setSaveStatus('PDF wird generiert …');
    // Bauteil-Screenshot (Render-Canvas → DataURL)
    let screenshot = '';
    try {
      if (typeof renderer !== 'undefined' && renderer) {
        renderer.render(scene, camera);
        screenshot = renderer.domElement.toDataURL('image/png');
      }
    } catch (e) { /* ignore */ }
    const matSel = document.getElementById('vtb-material');
    const matName = matSel ? (matSel.options[matSel.selectedIndex]?.dataset?.name || matSel.options[matSel.selectedIndex]?.text || '') : '';
    try {
      const r = await fetch('/api/3d-viewer/measurement-pdf', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          history: measurementHistory || [],
          filename: currentFileName || 'modell',
          material: matName,
          screenshot_base64: screenshot,
        }),
      });
      if (!r.ok) throw new Error('HTTP ' + r.status);
      const blob = await r.blob();
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'messprotokoll-' + (currentFileName || 'modell').replace(/\.[^.]+$/,'') + '.pdf';
      document.body.appendChild(a);
      a.click();
      a.remove();
      URL.revokeObjectURL(url);
      setSaveStatus('PDF heruntergeladen.');
    } catch (e) {
      setSaveStatus('PDF-Fehler: ' + (e.message || e));
    }
  });
}
document.getElementById('save-session-local').addEventListener('click', () => saveSessionLocal(setSaveStatus));
document.getElementById('save-attach').addEventListener('click', () => {
  if (!currentFileBuffer) { setSaveStatus('Keine aktive Datei zum Anhängen.'); return; }
  attachModal.style.display = 'flex';
  document.getElementById('attach-search').focus();
});

// ----- Attach-Modal -----
document.getElementById('attach-close').addEventListener('click', () => attachModal.style.display = 'none');
document.getElementById('attach-kind').addEventListener('change', () => { clearTimeout(attachSearchTimer); attachSearchTimer = setTimeout(attachSearch, 100); });
document.getElementById('attach-search').addEventListener('input', () => { clearTimeout(attachSearchTimer); attachSearchTimer = setTimeout(attachSearch, 250); });

// ----- Session Restore -----
document.getElementById('restore-load').addEventListener('click', doSessionRestore);
document.getElementById('restore-dismiss').addEventListener('click', () => {
  document.getElementById('viewer-restore').style.display = 'none';
});
checkSessionRestore();

// ----- Mess-Protokoll-Tabelle -----
setupProtocolForm();
renderProtocolTable();
document.getElementById('proto-tools').addEventListener('click', runToolAnalysis);
{
  const _pb = document.getElementById('proto-pattern');
  if (_pb) _pb.addEventListener('click', detectHolePatterns);
}

// Bohrbild-Erkennung: gruppiert Bohrungen aus measurementHistory nach
// 1) Reihe (alle Achsen kollinear), 2) Lochkreis (auf gemeinsamem Kreis), 3) Raster
function detectHolePatterns() {
  const holes = (measurementHistory || []).filter(h => (h.type === 'hole' || h.type === 'counterbore') && h.data && h.data.start);
  if (holes.length < 2) {
    alert('Mindestens 2 erkannte Bohrungen erforderlich. Aktuell: ' + holes.length);
    return;
  }
  // Schritt 1: Gruppiere nach gleichem Durchmesser (Toleranz ±5%)
  const byDiameter = {};
  holes.forEach((h, i) => {
    const d = (h.data.diameter || 0).toFixed(1);
    if (!byDiameter[d]) byDiameter[d] = [];
    byDiameter[d].push({ idx: i, h: h });
  });

  const patterns = [];
  for (const dStr in byDiameter) {
    const group = byDiameter[dStr];
    if (group.length < 2) continue;
    const d = parseFloat(dStr);
    const pts = group.map(g => g.h.data.start);
    const ids = group.map(g => g.idx + 1);  // Mess-Protokoll-Nummern

    // a) Reihe: 3+ Bohrungen die kollinear sind
    if (group.length >= 3) {
      const line = checkCollinear(pts);
      if (line) {
        patterns.push({
          type: 'Reihe', diameter: d, count: group.length,
          ids: ids, length: line.length, spacing: line.avgSpacing,
        });
        continue;
      }
    }
    // b) Lochkreis (3+ Bohrungen auf gemeinsamem Kreis)
    if (group.length >= 3) {
      const circle = checkCircle(pts);
      if (circle) {
        patterns.push({
          type: 'Lochkreis (Bolt Circle)', diameter: d, count: group.length,
          ids: ids, pitch_diameter: circle.r * 2, center: circle.c,
        });
        continue;
      }
    }
    // c) Paar (2 Bohrungen) — einfach als "2× Bohrungen"
    patterns.push({
      type: group.length === 2 ? 'Paar' : 'Gruppe',
      diameter: d, count: group.length, ids: ids,
      pair_distance: group.length === 2
        ? distance(pts[0], pts[1])
        : null,
    });
  }

  showPatternModal(patterns, holes.length);
}

function distance(a, b) {
  const dx = a.x - b.x, dy = a.y - b.y, dz = a.z - b.z;
  return Math.sqrt(dx*dx + dy*dy + dz*dz);
}

function checkCollinear(pts) {
  // Prüfe ob alle Punkte auf einer Linie liegen
  if (pts.length < 3) return null;
  // Richtung = letzter - erster Punkt
  const dir = {
    x: pts[pts.length-1].x - pts[0].x,
    y: pts[pts.length-1].y - pts[0].y,
    z: pts[pts.length-1].z - pts[0].z,
  };
  const dirLen = Math.sqrt(dir.x*dir.x + dir.y*dir.y + dir.z*dir.z);
  if (dirLen < 0.01) return null;
  dir.x /= dirLen; dir.y /= dirLen; dir.z /= dirLen;
  // Für jeden Mittel-Punkt prüfen ob Abweichung von Linie <5% der Gesamt-Länge
  const tol = dirLen * 0.05;
  for (let i = 1; i < pts.length - 1; i++) {
    const v = { x: pts[i].x - pts[0].x, y: pts[i].y - pts[0].y, z: pts[i].z - pts[0].z };
    const t = v.x*dir.x + v.y*dir.y + v.z*dir.z;
    const proj = { x: pts[0].x + dir.x*t, y: pts[0].y + dir.y*t, z: pts[0].z + dir.z*t };
    const d = distance(pts[i], proj);
    if (d > tol) return null;
  }
  // Sortiere nach Position entlang der Linie + berechne Mittel-Abstand
  const sorted = pts.slice().sort((a, b) => {
    const ta = (a.x - pts[0].x)*dir.x + (a.y - pts[0].y)*dir.y + (a.z - pts[0].z)*dir.z;
    const tb = (b.x - pts[0].x)*dir.x + (b.y - pts[0].y)*dir.y + (b.z - pts[0].z)*dir.z;
    return ta - tb;
  });
  let totalSpacing = 0;
  for (let i = 1; i < sorted.length; i++) totalSpacing += distance(sorted[i-1], sorted[i]);
  return { length: dirLen, avgSpacing: totalSpacing / (sorted.length - 1) };
}

function checkCircle(pts) {
  // Trifft 3 Punkte? Berechne Umkreis-Mittelpunkt + prüfe restliche
  if (pts.length < 3) return null;
  // Centroid als Schätzung
  const cx = pts.reduce((s, p) => s + p.x, 0) / pts.length;
  const cy = pts.reduce((s, p) => s + p.y, 0) / pts.length;
  const cz = pts.reduce((s, p) => s + p.z, 0) / pts.length;
  const c = { x: cx, y: cy, z: cz };
  // Mittlerer Radius
  const radii = pts.map(p => distance(p, c));
  const avgR = radii.reduce((a, b) => a + b, 0) / radii.length;
  // Toleranz: alle Radien innerhalb 8% des Mittelwerts
  const maxDev = Math.max(...radii.map(r => Math.abs(r - avgR) / avgR));
  if (maxDev > 0.08) return null;
  return { c, r: avgR };
}

function showPatternModal(patterns, totalHoles) {
  // Re-use Tool-Analysis-Modal wenn möglich, sonst alert
  const html = patterns.length === 0
    ? '⚠ Kein erkennbares Lochmuster — Bohrungen sind unregelmäßig verteilt.'
    : patterns.map(p => {
        let line = '▪ <strong>' + p.type + '</strong> · Ø' + p.diameter.toFixed(2) + 'mm × ' + p.count;
        line += '\n  Messung-Nrn: ' + p.ids.join(', ');
        if (p.spacing != null) line += '\n  Teilung: ' + p.spacing.toFixed(2) + ' mm';
        if (p.length != null) line += '\n  Gesamtlänge: ' + p.length.toFixed(2) + ' mm';
        if (p.pitch_diameter != null) line += '\n  Teilkreis-Ø: ' + p.pitch_diameter.toFixed(2) + ' mm';
        if (p.pair_distance != null) line += '\n  Abstand: ' + p.pair_distance.toFixed(2) + ' mm';
        return line;
      }).join('\n\n');
  alert('Bohrbild-Analyse von ' + totalHoles + ' Bohrungen:\n\n' + html);
}
document.getElementById('tools-close').addEventListener('click', () => {
  document.getElementById('viewer-tools-modal').style.display = 'none';
});
document.getElementById('vtb-measure').addEventListener('click', toggleMeasure);
document.getElementById('vtb-hole').addEventListener('click', toggleHole);
document.getElementById('vtb-radius').addEventListener('click', toggleRadius);
document.getElementById('vtb-angle').addEventListener('click', toggleAngle);
document.getElementById('vtb-chamfer').addEventListener('click', toggleChamfer);
{ const b = document.getElementById('vtb-pocket');   if (b) b.addEventListener('click', togglePocket); }
{ const b = document.getElementById('vtb-depth');    if (b) b.addEventListener('click', toggleDepth); }
{ const b = document.getElementById('vtb-edge');     if (b) b.addEventListener('click', toggleEdge); }
{ const b = document.getElementById('vtb-holespan'); if (b) b.addEventListener('click', toggleHolespan); }
document.getElementById('vtb-bg').addEventListener('click', cycleBackground);
document.getElementById('vtb-material').addEventListener('change', updateMaterialPanel);

renderer.domElement.addEventListener('click', onCanvasClick);

// Loading-Abbrechen-Button: reset state damit User aus dem Limbo raus kann
document.getElementById('loading-cancel').addEventListener('click', () => {
  console.log('[3D] user-cancel during load');
  hideLoading();
  occtModulePromise = null;   // OCCT-Promise verwerfen, neuer Versuch baut frisch auf
  fileInput.value = '';
  showError('Laden abgebrochen. Bitte Datei nochmal ablegen oder kleinere STEP testen.');
});
renderer.domElement.addEventListener('mousemove', onCanvasMouseMove);
renderer.domElement.addEventListener('mouseleave', clearHoverHighlight);

// Keyboard shortcuts
document.addEventListener('keydown', e => {
  if (!currentMesh) return;
  const tag = (e.target.tagName || '').toLowerCase();
  if (tag === 'input' || tag === 'textarea' || tag === 'select') return;
  // ⌘Z / Ctrl+Z = letzte Messung rückgängig (vor metaKey-return-Branch!)
  if ((e.metaKey || e.ctrlKey) && !e.shiftKey && !e.altKey && e.key.toLowerCase() === 'z') {
    e.preventDefault();
    undoLastMeasurement();
    return;
  }
  if (e.metaKey || e.ctrlKey || e.altKey) return;
  switch (e.key.toLowerCase()) {
    case 'f': setView('iso'); break;
    case 'w': cycleRenderMode(); break;
    case 'c': toggleSection(); break;
    case 'm': toggleMeasure(); break;
    case 'b': toggleHole(); break;
    case 'r': toggleRadius(); break;
    case 'a': toggleAngle(); break;
    case 'k': toggleChamfer(); break;
    case 't': togglePocket(); break;
    case 'd': toggleDepth(); break;
    case 'e': toggleEdge(); break;
    case 'h': toggleHolespan(); break;
    case 's': document.getElementById('vtb-save').click(); break;
    case 'p': takeScreenshot(); break;
    case '1': setView('iso'); break;
    case '2': setView('front'); break;
    case '3': setView('back'); break;
    case '4': setView('left'); break;
    case '5': setView('right'); break;
    case '6': setView('top'); break;
    case '7': setView('bottom'); break;
    case 'escape':
      const toolsModalEl = document.getElementById('viewer-tools-modal');
      if (toolsModalEl && toolsModalEl.style.display !== 'none' && toolsModalEl.style.display !== '') toolsModalEl.style.display = 'none';
      else if (attachModal.style.display !== 'none' && attachModal.style.display !== '') attachModal.style.display = 'none';
      else if (saveMenu.style.display !== 'none' && saveMenu.style.display !== '') saveMenu.style.display = 'none';
      else if (measureMode) toggleMeasure();
      else if (holeMode) toggleHole();
      else if (radiusMode) toggleRadius();
      else if (angleMode) toggleAngle();
      else if (chamferMode) toggleChamfer();
      else if (pocketMode) togglePocket();
      else if (depthMode) toggleDepth();
      else if (edgeMode) toggleEdge();
      else if (holespanMode) toggleHolespan();
      break;
  }
});

// ===== Drag & Drop =====
// v1.18.0 Robust-Fix: Counter-Pattern hatte Bugs wegen vieler neuer DOM-Elemente
// (proto-table Inputs feuern eigene dragenter/leave). Stattdessen jetzt
// timeout-basiertes Hiding und alle Events auf document mit capture:true.
function isDragWithFiles(e) {
  if (!e.dataTransfer) return false;
  const types = e.dataTransfer.types || [];
  for (let i = 0; i < types.length; i++) if (types[i] === 'Files') return true;
  return false;
}

let _dropHideTimer = null;
function showDropOverlay() {
  dropOverlay.style.display = 'flex';
  clearTimeout(_dropHideTimer);
}
function hideDropOverlay() {
  dropOverlay.style.display = 'none';
}

// Capture-phase auf document — verhindert Browser-Default-Drop (z.B. File in Text-Input)
document.addEventListener('dragover', e => {
  if (!isDragWithFiles(e)) return;
  e.preventDefault();
  if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy';
  showDropOverlay();
  // Auto-hide nach 150ms ohne dragover — wird beim nächsten dragover sofort wieder gecleared
  clearTimeout(_dropHideTimer);
  _dropHideTimer = setTimeout(hideDropOverlay, 200);
}, { capture: true });

document.addEventListener('dragenter', e => {
  if (isDragWithFiles(e)) e.preventDefault();
}, { capture: true });

document.addEventListener('drop', e => {
  if (!isDragWithFiles(e)) return;
  e.preventDefault();
  e.stopPropagation();
  clearTimeout(_dropHideTimer);
  hideDropOverlay();
  const f = e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files[0];
  if (f) readFile(f);
}, { capture: true });

// Container-Highlight (orange Outline beim Hover)
container.addEventListener('dragover', e => {
  if (!isDragWithFiles(e)) return;
  e.preventDefault();
  container.style.outlineColor = '#f2581b';
});
container.addEventListener('dragleave', () => { container.style.outlineColor = 'transparent'; });
container.addEventListener('drop', () => { container.style.outlineColor = 'transparent'; });

// Optional: ?src= URL-Load
const urlParams = new URLSearchParams(location.search);
const src = urlParams.get('src');
if (src) {
  fetch(src).then(r => r.arrayBuffer()).then(ab => {
    loadFromArrayBuffer(src.split('/').pop(), ab);
  }).catch(e => { alert('Laden fehlgeschlagen: ' + e); });
}
</script>
{% endblock %}