<iframe
  src="<!-- コンソールで発行された ウィジェット URL / widget URL issued in the console -->&lang=ja"
  id="chatbot-widget"
  title="Chat assistant"
  sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
  style="
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 80px;
    height: 160px;
    border: none;
    z-index: 9999;
    background: transparent;
    color-scheme: normal;
  "
  allow="clipboard-write"
></iframe>

<script>
  (function () {
    // ウィジェット URL のオリジンに合わせてください (例: https://chat.tokuru.edgebaseai.com)
    // Set to the origin of your widget URL.
    var ALLOWED_ORIGIN = 'https://chat.tokuru.edgebaseai.com';
    // この幅以下では全画面表示にします / below this width the panel goes fullscreen
    var MOBILE_BREAKPOINT = 480;
    var MARGIN = 20;

    var mode = 'collapsed', wantW = 80, wantH = 160;

    function apply(style) {
      var iframe = document.getElementById('chatbot-widget');
      if (!iframe) return;
      for (var k in style) iframe.style[k] = style[k];
    }

    function layout() {
      if (mode === 'collapsed') {
        return apply({
          top: 'auto', left: 'auto', right: MARGIN + 'px', bottom: MARGIN + 'px',
          width: wantW + 'px', height: wantH + 'px'
        });
      }
      // 訪問者の実際の画面サイズを知っているのはこのページだけです
      // (iframe は自分自身の大きさしか測れません)。
      // Only this page can see the visitor's real viewport — the iframe can
      // only measure itself. So the fullscreen decision is made here.
      if (window.innerWidth <= MOBILE_BREAKPOINT) {
        apply({ top: '0', left: '0', right: '0', bottom: '0', width: '100%', height: '100%' });
      } else {
        apply({
          top: 'auto', left: 'auto', right: MARGIN + 'px', bottom: MARGIN + 'px',
          width:  Math.min(wantW, window.innerWidth  - MARGIN * 2) + 'px',
          height: Math.min(wantH, window.innerHeight - MARGIN * 2) + 'px'
        });
      }
    }

    window.addEventListener('message', function (event) {
      if (event.origin !== ALLOWED_ORIGIN) return;
      if (!event.data || event.data.type !== 'chat-resize') return;

      mode  = event.data.mode === 'collapsed' ? 'collapsed' : 'panel';
      wantW = event.data.width;
      wantH = event.data.height;
      layout();
    });

    // 回転・リサイズに追従させます / keep an open panel in step with the viewport
    window.addEventListener('resize', layout);
  })();
</script>

Content-Security-Policy: frame-src https://chat.tokuru.edgebaseai.com;