<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>MedSegAgent Demo</title>
  <link rel="stylesheet" href="/static/style.css" />
  <script src="https://unpkg.com/@niivue/niivue@0.69.0/dist/niivue.umd.js"></script>
</head>
<body>
  <div class="app">
    <header class="app-header">
      <span class="app-title">MedSegAgent</span>
      <span class="app-subtitle">CT / MRI segmentation demo (TotalSegmentator)</span>
    </header>

    <section class="chat-panel">
      <div id="chat-log" class="chat-log"></div>

      <form id="composer" class="composer">
        <label class="attach-button" title="NIfTI (.nii.gz) をアップロード">
          📎
          <input type="file" id="file-input" accept=".nii,.nii.gz" hidden />
        </label>
        <span id="file-chip" class="file-chip" hidden></span>
        <textarea
          id="query-input"
          class="query-input"
          rows="1"
          placeholder="例: 肝臓をセグメンテーションして"
        ></textarea>
        <button type="submit" id="send-button" class="send-button">送信</button>
      </form>
    </section>
  </div>

  <!-- Result viewer: a single reused Niivue canvas. Kept in the DOM at all
       times (visibility toggled, never display:none) so it can render
       off-screen to produce chat-bubble thumbnails, then be shown full-size
       here without losing its WebGL context or needing a resize dance. -->
  <div id="viewer-modal" class="viewer-modal closed">
    <div class="viewer-modal-inner">
      <button type="button" id="viewer-modal-close" class="viewer-modal-close" aria-label="閉じる">✕</button>
      <canvas id="gl"></canvas>
      <div class="viewer-controls">
        <label class="overlay-toggle">
          <input type="checkbox" id="overlay-toggle" checked />
          オーバーレイを表示
        </label>
      </div>
    </div>
  </div>

  <script src="/static/app.js"></script>
</body>
</html>