@extends('layouts.app')
@section('title', '跨組織訊息')

@section('content')
<div class="container-fluid px-4 py-4">
  <div class="row g-3" id="fedLayout" style="min-height: 480px;">

    {{-- 左側：跨組織對話清單 --}}
    <div class="col-12 col-md-4 col-lg-3 d-flex flex-column border rounded bg-white" style="overflow: hidden;">
      <div class="d-flex justify-content-between align-items-center px-3 py-2 border-bottom">
        <h6 class="fw-bold mb-0"><i class="bi bi-building me-1"></i>跨組織對話</h6>
        <a href="{{ route('messaging.index') }}" class="btn btn-sm btn-outline-secondary" title="回主要訊息列表">
          <i class="bi bi-chat-dots"></i>
        </a>
      </div>
      <div class="flex-grow-1" style="overflow-y:auto; min-height:0;">
        <ul class="list-unstyled mb-0" id="fedSidebarList">
          <li class="text-center text-muted small py-4">載入中…</li>
        </ul>
        <div class="px-3 py-2 small fw-bold text-muted bg-light border-bottom fed-hidden-toggle d-none" id="fedSidebarHiddenToggle">
          <i class="bi bi-caret-right-fill"></i> 已隱藏的跨組織聊天 (<span id="fedSidebarHiddenCount">0</span>)
        </div>
        <ul class="list-unstyled mb-0 d-none" id="fedSidebarHiddenList"></ul>
        <div id="fedSidebarContextMenu" class="d-none list-group shadow" style="position:fixed; min-width:160px; z-index:1070;"></div>
      </div>
    </div>

    {{-- 右側：對話串 --}}
    <div class="col-12 col-md-8 col-lg-9 d-flex flex-column" style="min-height:0;">
      <div id="fedThreadPanel" class="border rounded bg-white d-flex flex-column h-100" style="overflow: hidden;">

        <div class="d-flex justify-content-between align-items-center px-3 py-2 border-bottom">
          <div class="d-flex align-items-center gap-2" style="min-width:0;">
            <a href="{{ route('messaging.index') }}" class="btn btn-sm btn-link text-dark px-1" title="回到訊息列表">
              <i class="bi bi-chevron-left fs-5"></i>
            </a>
            <div class="fed-avatar">{{ mb_substr($contact->name ?? '?', 0, 1) }}</div>
            <div style="min-width:0;">
              <div class="fw-semibold text-truncate">{{ $contact->name ?? $conversation->peer_federated_id }}</div>
              <div class="small text-muted text-truncate">
                <span class="badge bg-info-subtle text-info-emphasis border border-info-subtle">{{ $conversation->peerOrgId() }}</span>
                @if($contact?->department)
                  {{ $contact->department }}
                @endif
              </div>
            </div>
          </div>
          <div class="d-flex align-items-center gap-1">
            <div class="position-relative">
              <button type="button" class="fed-compose-icon-btn" id="fedBgBtn" title="聊天背景">
                <i class="bi bi-image"></i>
              </button>
              <div id="fedBgMenu" class="d-none shadow bg-white rounded p-2" style="position:fixed; z-index:1060; width:168px;">
                <div class="small text-muted mb-1 px-1">聊天背景</div>
                <div class="d-flex flex-wrap gap-2 px-1 pb-1">
                  <span class="fed-bg-swatch" data-bg="default" title="預設" style="background:#f8f9fa;"></span>
                  <span class="fed-bg-swatch" data-bg="ocean" title="海洋" style="background:linear-gradient(180deg,#0f6ea8,#17b3ab);"></span>
                  <span class="fed-bg-swatch" data-bg="dark" title="暗黑" style="background:linear-gradient(180deg,#16181d,#1f2229);"></span>
                  <span class="fed-bg-swatch" data-bg="spring" title="春天" style="background:linear-gradient(180deg,#eafbe7,#ffd3e6);"></span>
                  <span class="fed-bg-swatch" data-bg="summer" title="夏天" style="background:linear-gradient(180deg,#7fd3f2,#fff6b7);"></span>
                  <span class="fed-bg-swatch" data-bg="autumn" title="秋天" style="background:linear-gradient(180deg,#f6d9a6,#c9722f);"></span>
                  <span class="fed-bg-swatch" data-bg="winter" title="冬天" style="background:linear-gradient(180deg,#cfe4f5,#a9c9e6);"></span>
                </div>
              </div>
            </div>
            <button type="button" class="fed-compose-icon-btn" id="fedCallBtn" title="語音通話">
              <i class="bi bi-telephone-fill text-success"></i>
            </button>
            <button type="button" class="fed-compose-icon-btn" id="fedVideoCallBtn" title="視訊通話">
              <i class="bi bi-camera-video-fill text-success"></i>
            </button>
          </div>
        </div>

        <div id="fedCallBar" class="d-none border-bottom px-3 py-2" style="background:#eafbe7;">
          <div class="d-flex align-items-center justify-content-between">
            <div class="d-flex align-items-center gap-2">
              <i class="bi bi-telephone-fill text-success"></i>
              <span id="fedCallStatusText" class="small fw-semibold">—</span>
            </div>
            <div class="d-flex gap-2">
              <button type="button" class="btn btn-sm btn-success d-none" id="fedCallAcceptBtn"><i class="bi bi-telephone-fill me-1"></i>接聽</button>
              <button type="button" class="btn btn-sm btn-outline-secondary d-none" id="fedCallMuteBtn"><i class="bi bi-mic-fill"></i></button>
              <button type="button" class="btn btn-sm btn-outline-secondary d-none" id="fedCallCameraBtn"><i class="bi bi-camera-video-fill"></i></button>
              <button type="button" class="btn btn-sm btn-danger" id="fedCallHangupBtn"><i class="bi bi-telephone-x-fill me-1"></i><span id="fedCallHangupLabel">結束</span></button>
            </div>
          </div>
          <div id="fedCallVideoArea" class="d-none fed-call-video-grid mt-2">
            <div class="fed-call-video-tile"><video id="fedLocalVideo" autoplay playsinline muted></video></div>
            <div class="fed-call-video-tile"><video id="fedRemoteVideo" autoplay playsinline></video></div>
          </div>
        </div>
        <audio id="fedRemoteAudio" autoplay></audio>

        <div id="fedMsgContextMenu" class="d-none list-group shadow" style="position:fixed; min-width:140px; z-index:1070;"></div>

        <div id="fedMessageList" class="flex-grow-1 px-3 py-3" style="overflow-y:auto;">
          @forelse($messages as $m)
            <div class="fed-msg-row {{ $m->direction === 'outbound' ? 'me' : '' }}" data-msg-id="{{ $m->id }}" data-client-message-id="{{ $m->client_message_id }}" data-type="{{ $m->type }}" data-created-at="{{ $m->created_at->toIso8601String() }}"
              @if($m->recalled_at) data-recalled="1" @endif
              @if($m->encrypted && !$m->recalled_at)
                data-encrypted="1" data-body="{{ $m->body }}" data-iv="{{ $m->iv }}" data-key-version="{{ $m->key_version }}"
              @endif
            >
              @if($m->direction !== 'outbound')
                <div class="fed-msg-avatar">{{ mb_substr($contact->name ?? '?', 0, 1) }}</div>
              @endif
              <div class="fed-msg-body-col">
                <div class="fed-msg-bubble{{ (!$m->encrypted && $m->type === 'sticker' && !$m->recalled_at) ? ' fed-msg-bubble-sticker' : '' }}">
                  @if($m->recalled_at)
                    <span class="fst-italic text-muted small">此訊息已收回</span>
                  @else
                    @if($m->reply_to)
                      <div class="fed-reply-preview"
                        @if($m->reply_to['encrypted'] && !$m->reply_to['recalled'])
                          data-reply-encrypted="1" data-reply-type="{{ $m->reply_to['type'] }}" data-reply-body="{{ $m->reply_to['body'] }}" data-reply-iv="{{ $m->reply_to['iv'] }}" data-reply-key-version="{{ $m->reply_to['key_version'] }}"
                        @endif
                      >
                        <div class="fw-semibold">{{ $m->reply_to['direction'] === 'outbound' ? '你' : ($contact->name ?? '對方') }}</div>
                        <div class="text-truncate fed-reply-snippet">
                          @if($m->reply_to['recalled'])
                            此訊息已收回
                          @elseif($m->reply_to['encrypted'])
                            解密中…
                          @else
                            {{ match($m->reply_to['type']) { 'image' => '[圖片]', 'sticker' => '[貼圖]', 'location' => '[位置]', default => \Illuminate\Support\Str::limit($m->reply_to['body'], 60) } }}
                          @endif
                        </div>
                      </div>
                    @endif
                    @if($m->encrypted)
                      <div class="text-muted small fst-italic fed-decrypting">解密中…</div>
                    @elseif($m->type === 'image')
                      <img src="{{ $m->body }}" class="fed-msg-image" alt="圖片">
                    @elseif($m->type === 'sticker')
                      <img src="{{ $m->body }}" class="fed-msg-sticker" alt="貼圖">
                    @elseif($m->type === 'location')
                      @php($loc = json_decode($m->body ?? '{}', true))
                      <a href="https://www.google.com/maps?q={{ $loc['lat'] ?? 0 }},{{ $loc['lng'] ?? 0 }}" target="_blank" rel="noopener" class="fed-location-link">
                        <i class="bi bi-geo-alt-fill me-1"></i>查看位置
                      </a>
                    @else
                      <div style="white-space:pre-wrap;">{{ $m->body }}</div>
                    @endif
                  @endif
                </div>
                <div class="fed-msg-meta">
                  @if($m->direction === 'outbound' && !$m->recalled_at)
                    <span class="fed-msg-read-status">{{ ($peerReadAt && $m->created_at->lte($peerReadAt)) ? '已讀' : '未讀' }}</span> ·
                  @endif
                  {{ $m->created_at->format('H:i') }}
                  @if($m->edited_at && !$m->recalled_at) · 已編輯 @endif
                </div>
              </div>
            </div>
          @empty
            <div class="text-center text-muted small py-4" id="fedEmptyHint">還沒有訊息，說聲哈囉吧。</div>
          @endforelse
        </div>

        {{-- 回覆／編輯中的提示條，蓋在輸入框正上方 --}}
        <div id="fedComposeContextBar" class="d-none border-top px-3 py-2 d-flex align-items-center gap-2 bg-light">
          <i id="fedComposeContextIcon" class="bi bi-reply-fill text-primary"></i>
          <div class="flex-grow-1 small text-truncate">
            <div id="fedComposeContextLabel" class="fw-semibold"></div>
            <div id="fedComposeContextSnippet" class="text-muted text-truncate"></div>
          </div>
          <button type="button" class="btn-close" id="fedComposeContextCancel" aria-label="取消"></button>
        </div>

        <form id="fedSendForm" class="border-top d-flex flex-column position-relative">
          <div class="d-flex align-items-center gap-1 px-3 pt-2 pb-1">
            <div class="position-relative">
              <button type="button" class="fed-compose-icon-btn" id="fedAttachBtn" title="新增">
                <i class="bi bi-plus-lg"></i>
              </button>
              <div id="fedAttachMenu" class="d-none list-group shadow" style="position:fixed; min-width:160px; z-index:1060;">
                <button type="button" class="list-group-item list-group-item-action" id="fedAttachImageBtn">
                  <i class="bi bi-image me-2 text-primary"></i>圖片
                </button>
                <button type="button" class="list-group-item list-group-item-action" id="fedAttachLocationBtn">
                  <i class="bi bi-geo-alt me-2 text-danger"></i>位置
                </button>
              </div>
              <input type="file" id="fedImageInput" accept="image/*" class="d-none">
            </div>
            <div class="position-relative">
              <button type="button" class="fed-compose-icon-btn" id="fedEmojiBtn" title="貼圖／表情符號">
                <i class="bi bi-emoji-smile text-warning"></i>
              </button>
              {{-- 跟本地聊天室 index.blade.php 一樣：貼圖／表情共用同一個彈出面板、
                   同一顆按鈕，靠上面兩個分頁切換，預設打開時停在「貼圖」分頁。 --}}
              <div id="fedEmojiStickerPanel" class="d-none shadow bg-white" style="position:fixed; z-index:1060; width:300px; height:360px; border-radius:.5rem; overflow:hidden; display:flex; flex-direction:column;">
                <div class="d-flex border-bottom" style="flex:0 0 auto;">
                  <button type="button" class="fed-panel-tab-btn active" id="fedPanelTabStickerBtn" data-tab="sticker">
                    <i class="bi bi-sticky me-1"></i>貼圖
                  </button>
                  <button type="button" class="fed-panel-tab-btn" id="fedPanelTabEmojiBtn" data-tab="emoji">
                    <i class="bi bi-emoji-smile me-1"></i>表情
                  </button>
                </div>
                <div id="fedStickerPickerWrap" style="flex:1; overflow:hidden; display:flex; flex-direction:column;"></div>
                <div id="fedEmojiPickerWrap" class="d-none" style="flex:1; overflow:hidden;"></div>
              </div>
            </div>
            <button type="submit" class="btn ms-auto" id="fedSendBtn"><i class="bi bi-send-fill"></i></button>
          </div>
          <div class="px-3 pb-2">
            <textarea id="fedBodyInput" class="form-control" placeholder="輸入訊息…（Enter 送出，Shift+Enter 換行）" maxlength="4000" rows="1"></textarea>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<style>
  .fed-avatar {
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: #6c757d; color: #fff; font-size: .9rem; font-weight: 600;
  }
  .fed-sidebar-avatar {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: #6c757d; color: #fff; font-size: 1rem; font-weight: 600;
  }
  #fedSidebarList li.fed-sidebar-item {
    display: flex; align-items: center; gap: .6rem; padding: .55rem .75rem;
    cursor: pointer; border-bottom: 1px solid #f1f1f1;
  }
  #fedSidebarList li.fed-sidebar-item:hover { background: #f8f9fa; }
  #fedSidebarList li.fed-sidebar-item.active { background: #eafbe7; }
  .fed-hidden-toggle { cursor: pointer; user-select: none; }
  .fed-hidden-toggle .bi { transition: transform .15s ease; }
  .fed-hidden-toggle.open .bi { transform: rotate(90deg); }

  .fed-msg-row { display: flex; align-items: flex-end; gap: .4rem; margin-bottom: .6rem; }
  .fed-msg-row.me { justify-content: flex-end; }
  .fed-msg-row > .fed-msg-body-col { max-width: 70%; min-width: 0; display: flex; flex-direction: column; }
  .fed-msg-avatar {
    flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #6c757d; color: #fff; font-size: .8rem; font-weight: 600;
  }
  .fed-msg-bubble {
    max-width: 100%; padding: .4rem .7rem; border-radius: .8rem;
    background: #f1f1f1; word-break: break-word; overflow-wrap: break-word;
  }
  .fed-msg-row.me .fed-msg-bubble { background: #06c755; color: #fff; }
  .fed-msg-meta { font-size: .7rem; color: #999; margin-top: 2px; }
  .fed-msg-image { max-width: 240px; max-height: 240px; border-radius: .5rem; display: block; cursor: pointer; }
  .fed-msg-bubble.fed-msg-bubble-sticker { padding: 0; background: transparent; }
  .fed-msg-sticker { width: 120px; height: 120px; object-fit: contain; display: block; }
  .fed-location-link { color: inherit; text-decoration: none; font-weight: 600; }
  .fed-location-link:hover { text-decoration: underline; }

  /* 回覆預覽：跟本地聊天室 index.blade.php 的 .reply-preview 同一套設計 */
  .fed-reply-preview {
    border-left: 4px solid #0d6efd; padding: .2rem .6rem; margin-bottom: .35rem;
    font-size: .78rem; background: rgba(13,110,253,.1); border-radius: .25rem; max-width: 100%;
  }
  .fed-reply-preview .fw-semibold { color: #0d6efd; }
  .fed-msg-row.me .fed-reply-preview { border-left-color: #ffd43b; background: rgba(255,255,255,.25); }
  .fed-msg-row.me .fed-reply-preview .fw-semibold { color: #fff3bf; }

  /* 貼圖／表情分頁按鈕：跟本地聊天室 index.blade.php 的 .panel-tab-btn 同一套設計 */
  .fed-panel-tab-btn { flex: 1 1 0; border: none; background: transparent; padding: .5rem 0; font-size: .85rem; color: #666; border-bottom: 2px solid transparent; }
  .fed-panel-tab-btn.active { color: #06c755; border-bottom-color: #06c755; font-weight: 600; }

  /* 貼圖面板：跟本地聊天室 index.blade.php 同一套「一頁 3x3、左右滑動翻頁」設計 */
  .fed-sticker-tab-btn { flex: 0 0 auto; width: 44px; height: 44px; border: none; background: transparent; padding: 4px; cursor: pointer; color: #666; }
  .fed-sticker-tab-btn img { width: 100%; height: 100%; object-fit: contain; }
  .fed-sticker-tab-btn.active { background: #f1f1f1; border-radius: .4rem; }
  .fed-sticker-pick-btn { border: none; background: transparent; padding: 4px; cursor: pointer; min-width: 0; }
  .fed-sticker-pick-btn img { width: 100%; height: 100%; object-fit: contain; }
  .fed-sticker-pick-btn:hover { background: #f5f5f5; border-radius: .4rem; }
  .fed-sticker-pick-btn:disabled { opacity: .5; }
  .fed-sticker-pack-tabs { scrollbar-width: thin; scrollbar-color: #ddd transparent; }
  .fed-sticker-pack-tabs::-webkit-scrollbar { height: 4px; }
  .fed-sticker-pack-tabs::-webkit-scrollbar-track { background: transparent; }
  .fed-sticker-pack-tabs::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2px; }
  .fed-sticker-page-track {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; flex: 1; min-height: 0;
    scrollbar-width: thin; scrollbar-color: #ddd transparent;
  }
  .fed-sticker-page-track::-webkit-scrollbar { height: 4px; }
  .fed-sticker-page-track::-webkit-scrollbar-track { background: transparent; }
  .fed-sticker-page-track::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2px; }
  .fed-sticker-page {
    flex: 0 0 100%; scroll-snap-align: start; display: grid;
    grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 4px; padding: 6px;
  }
  .fed-sticker-page-dots { flex: 0 0 auto; display: flex; justify-content: center; gap: 5px; padding: 4px 0; }
  .fed-sticker-page-dot { width: 6px; height: 6px; border-radius: 50%; background: #ddd; border: none; padding: 0; cursor: pointer; }
  .fed-sticker-page-dot.active { background: #06c755; }

  /* 視訊通話：跟本地聊天室的 call-tile 同一套簡化版（跨組織對話永遠只有兩個人，
     不需要本地那套群組/分享螢幕/白板的 Meet 版面）。 */
  .fed-call-video-grid { display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: .5rem; max-width: 420px; }
  .fed-call-video-tile { position: relative; background: #000; border-radius: .5rem; overflow: hidden; aspect-ratio: 4/3; }
  .fed-call-video-tile video { width: 100%; height: 100%; object-fit: cover; }

  #fedBodyInput {
    width: 100%; resize: none; overflow-y: auto; line-height: 1.4; max-height: 120px;
    border: none; background: #f0f2f5; border-radius: 1.1rem; padding: .55rem 1rem;
  }
  #fedBodyInput:focus { outline: none; box-shadow: none; background: #e7e9ec; }

  .fed-compose-icon-btn {
    border: none; background: transparent; color: #6c757d;
    width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.1rem; flex-shrink: 0;
  }
  .fed-compose-icon-btn:hover { background: #f0f2f5; }
  #fedSendBtn {
    background: #06c755; border-color: #06c755; color: #fff;
    width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  #fedSendBtn:hover { background: #05b34c; border-color: #05b34c; }

  /* 聊天背景主題：跟本地聊天室用同一套漸層定義，讓兩邊選同一個主題時看起來一致。 */
  #fedMessageList.fed-bg-ocean {
    background:
      radial-gradient(circle at 20% 30%, rgba(255,255,255,.25) 0 6px, transparent 7px),
      radial-gradient(circle at 70% 65%, rgba(255,255,255,.2) 0 4px, transparent 5px),
      radial-gradient(circle at 45% 85%, rgba(255,255,255,.18) 0 5px, transparent 6px),
      linear-gradient(180deg, #0f6ea8 0%, #1391b8 45%, #17b3ab 100%);
  }
  #fedMessageList.fed-bg-dark { background: linear-gradient(180deg, #16181d 0%, #1f2229 100%); }
  #fedMessageList.fed-bg-dark .fed-msg-meta { color: #8a8f98; }
  #fedMessageList.fed-bg-dark .fed-msg-bubble { background: #2a2e37; color: #e6e8eb; }
  #fedMessageList.fed-bg-dark .fed-msg-row.me .fed-msg-bubble { background: #2f6fed; color: #fff; }
  #fedMessageList.fed-bg-spring {
    background:
      radial-gradient(circle at 15% 20%, rgba(255,182,213,.55) 0 8px, transparent 9px),
      radial-gradient(circle at 80% 15%, rgba(255,182,213,.45) 0 6px, transparent 7px),
      radial-gradient(circle at 55% 75%, rgba(255,182,213,.4) 0 7px, transparent 8px),
      radial-gradient(circle at 30% 60%, rgba(255,182,213,.35) 0 5px, transparent 6px),
      linear-gradient(180deg, #eafbe7 0%, #d9f2df 100%);
  }
  #fedMessageList.fed-bg-summer { background: linear-gradient(180deg, #7fd3f2 0%, #a6e3d0 55%, #fff6b7 100%); }
  #fedMessageList.fed-bg-autumn {
    background:
      radial-gradient(circle at 25% 25%, rgba(180,90,30,.25) 0 6px, transparent 7px),
      radial-gradient(circle at 70% 55%, rgba(200,120,40,.22) 0 5px, transparent 6px),
      radial-gradient(circle at 45% 80%, rgba(160,70,20,.2) 0 6px, transparent 7px),
      linear-gradient(180deg, #f6d9a6 0%, #e7a95e 55%, #c9722f 100%);
  }
  #fedMessageList.fed-bg-winter {
    background:
      radial-gradient(circle at 20% 20%, rgba(255,255,255,.8) 0 3px, transparent 4px),
      radial-gradient(circle at 60% 40%, rgba(255,255,255,.7) 0 2px, transparent 3px),
      radial-gradient(circle at 80% 70%, rgba(255,255,255,.8) 0 3px, transparent 4px),
      radial-gradient(circle at 35% 80%, rgba(255,255,255,.6) 0 2px, transparent 3px),
      radial-gradient(circle at 10% 60%, rgba(255,255,255,.7) 0 2px, transparent 3px),
      linear-gradient(180deg, #cfe4f5 0%, #a9c9e6 100%);
  }
  #fedBgMenu .fed-bg-swatch {
    width: 28px; height: 28px; border-radius: 50%; display: inline-block;
    border: 2px solid #fff; box-shadow: 0 0 0 1px #ddd; cursor: pointer;
  }
</style>

<script>
(function () {
  const conversationId = {{ $conversation->id }};
  const listEl = document.getElementById('fedMessageList');

  // layout.footer 是 position:fixed，實際高度依主題（mac/win11/sepia/space...)
  // 不一定一樣，用 calc(100vh - 固定數字) 猜的話很容易猜不準，導致面板
  // 太高被 footer 蓋住或太矮多出一截空白——跟本地聊天室 index.blade.php
  // 同一個問題，這裡採用同一套「量實際可用高度」的做法。
  const fedLayout = document.getElementById('fedLayout');
  function resizeFedLayout() {
    if (!fedLayout) return;
    const footer = document.querySelector('footer.footer');
    const footerHeight = footer ? footer.getBoundingClientRect().height : 0;
    const container = fedLayout.parentElement;
    const containerBottomPadding = container ? parseFloat(getComputedStyle(container).paddingBottom) || 0 : 0;
    const top = fedLayout.getBoundingClientRect().top;
    const available = window.innerHeight - top - footerHeight - containerBottomPadding - 8;
    fedLayout.style.height = Math.max(available, 240) + 'px';
  }
  // 這支 script 在 HTML 原始碼裡的位置比 layout 最下面的 <footer> 早，
  // 這裡的程式碼執行當下 footer 元素還沒被瀏覽器解析出來，量到的高度會是
  // 0——一定要包在 DOMContentLoaded 裡，等整份文件（含 footer）都解析完才量。
  //
  // 注意：這段註解本身不能寫出「@ 加 section 或 yield 加小括號」這種字面文字
  // ——Blade 編譯器不管前後文是不是在 JS 註解裡，看到符合樣式的字就會當成
  // 真的指令編譯，之前這個檔案就因為註解裡直接寫了那兩個指令的字面文字，
  // 導致 content 區塊的輸出緩衝區巢狀開了好幾層卻只 close 一層，把整頁排版
  // 弄爛（頁面看起來完全沒套用 Bootstrap 樣式）。
  document.addEventListener('DOMContentLoaded', resizeFedLayout);
  window.addEventListener('resize', resizeFedLayout);
  let emptyHint = document.getElementById('fedEmptyHint');
  const form = document.getElementById('fedSendForm');
  const input = document.getElementById('fedBodyInput');
  const csrf = document.querySelector('meta[name="csrf-token"]')?.content ?? '';
  let lastId = {{ optional($messages->last())->id ?? 0 }};

  // 已讀/未讀：跟本地聊天室同樣只在「自己送出的訊息」下面顯示（見架構文件
  // 8.7——跨組織沒有 Reverb，這裡改用輪詢頂替 conversation.read 廣播）。
  // peerReadAt 代表對方回報「已經讀到這個時間點」，跟自己這則訊息的
  // created_at 比較大小就知道該顯示已讀還是未讀。
  let peerReadAt = @json($peerReadAt?->toIso8601String());

  function refreshReadStatuses() {
    // 兩邊時間字串來源不一樣（伺服器端 Blade 用 toIso8601String() 帶時區
    // 偏移量，輪詢 API 回來的是 Eloquent 預設的 UTC JSON 格式）——不能直接
    // 用字串比大小，一律轉成 Date 再比實際的時間戳記。
    const peerReadMs = peerReadAt ? new Date(peerReadAt).getTime() : null;
    listEl.querySelectorAll('.fed-msg-row.me[data-created-at]').forEach((row) => {
      const span = row.querySelector('.fed-msg-read-status');
      if (!span) return;
      const createdMs = new Date(row.dataset.createdAt).getTime();
      span.textContent = (peerReadMs != null && createdMs <= peerReadMs) ? '已讀' : '未讀';
    });
  }

  /** 標記自己已讀到現在，同時透過中間層告知對方；送不到也不擋畫面，靜默失敗即可。 */
  async function markReadRemote() {
    try {
      await fetch(`{{ url('messaging/federated') }}/${conversationId}/read`, {
        method: 'POST',
        headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf },
      });
    } catch (e) { /* 靜默失敗，下次輪詢/開頁再試 */ }
  }

  // ── 端對端加密：跟本地聊天室共用同一套 window.MessagingCrypto（ECDH+AES-GCM），
  // 但金鑰端點路徑不一樣（跨組織對話沒有本地 conversation id 的形狀），所以
  // 這裡直接打 federated 專屬的 keys 端點，不走 MC.getConversationKey()。
  // FED_CACHE_ID 前面加 'fed-' 前綴，確保跟本地對話 id 的快取空間不會撞在一起。
  const MC = window.MessagingCrypto;
  const FED_CACHE_ID = 'fed-' + conversationId;
  const peerFederatedId = @json($conversation->peer_federated_id);
  const peerDevices = @json($contact->devices ?? []);
  let conversationKeyEntry = null;

  /**
   * 跟伺服器要「這台裝置」目前解得開的 wrap；完全沒有金鑰（第一次開這個
   * 對話）就試著自己當發起人建立一把新的。跟本地聊天室 ensureConversationEncryption()
   * 一樣走「best effort」：建立失敗（例如對方通訊錄還沒同步到任何裝置公鑰）
   * 就維持明文，不擋住整個聊天功能。
   *
   * 已知限制：如果雙方剛好同時第一次開啟同一段對話並同時嘗試建立金鑰，
   * 各自會各產生一把不同的 v1 金鑰，導致互相解不開對方的訊息。實務上
   * 這個對話必須先透過 start() 建立、雙方已經是通訊錄好友才看得到彼此，
   * 而且一定是其中一方先送出第一則訊息才會觸發建立，機率極低，先不特別
   * 處理（跨組織對話目前也沒有版本協商機制可以偵測/合併衝突的金鑰）。
   */
  async function ensureConversationKey(version) {
    const cached = MC.getCachedConversationKey(FED_CACHE_ID, version);
    if (cached) return cached;

    try {
      let url = `{{ url('messaging/federated') }}/${conversationId}/keys/mine?device_id=${MC.getDeviceId()}`;
      if (version) url += `&version=${version}`;
      const res = await fetch(url, { headers: { Accept: 'application/json' } });
      if (res.ok) {
        const data = await res.json();
        if (data.key_version && data.wrapped_key && data.wrapper_public_key_jwk) {
          return await MC.unwrapAndCache(FED_CACHE_ID, data.key_version, data.wrapped_key, data.wrapper_public_key_jwk);
        }
      }
    } catch (e) { /* 拿不到就往下走 */ }

    // 指定版本的金鑰拿不到，不代表整個對話沒有加密——只是那個版本解不開
    // （例如舊訊息），不該因此觸發「建立一把新的」，那把新的一樣解不開舊訊息。
    if (version) return null;

    return createConversationKey();
  }

  async function createConversationKey() {
    if (!peerDevices.length) return null; // 對方通訊錄還沒同步到任何裝置公鑰

    let myDevices = [];
    try {
      const res = await fetch(window.MessagingConfig.routes.devicesIndex, { headers: { Accept: 'application/json' } });
      if (res.ok) myDevices = await res.json();
    } catch (e) { /* 拿不到就當作沒有裝置 */ }
    const myActiveDevices = myDevices.filter((d) => d.status === 'active');
    if (!myActiveDevices.length) return null;

    const raw = await MC.generateConversationKeyRaw();
    const ownWraps = [];
    for (const device of myActiveDevices) {
      ownWraps.push({ device_id: device.id, wrapped_key: await MC.wrapKeyForPublicKey(raw, device.public_key_jwk) });
    }
    const peerWraps = [];
    for (const device of peerDevices) {
      peerWraps.push({ device_id: device.device_id, wrapped_key: await MC.wrapKeyForPublicKey(raw, JSON.stringify(device.public_key_jwk)) });
    }

    const keyVersion = 1;
    try {
      const res = await fetch(`{{ url('messaging/federated') }}/${conversationId}/keys`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf },
        body: JSON.stringify({
          key_version: keyVersion,
          wrapped_by_device_id: MC.getDeviceId(),
          own_wraps: ownWraps,
          peer_wraps: peerWraps,
        }),
      });
      if (!res.ok) return null;
    } catch (e) {
      return null;
    }

    const cryptoKey = await MC.importConversationKeyRaw(raw);
    conversationKeyEntry = { version: keyVersion, cryptoKey };
    MC.cacheConversationKey(FED_CACHE_ID, keyVersion, cryptoKey);
    return conversationKeyEntry;
  }

  /** 解密失敗／拿不到金鑰都回傳 null，呼叫端統一顯示成「無法解密」，不拋例外中斷渲染。 */
  async function decryptBody(type, body, iv, keyVersion) {
    try {
      const entry = await ensureConversationKey(keyVersion);
      if (!entry) return null;
      return await MC.decrypt(entry.cryptoKey, body, iv);
    } catch (e) {
      return null;
    }
  }

  function buildBubbleContent(type, body) {
    if (body === null) {
      const el = document.createElement('div');
      el.className = 'text-muted small fst-italic';
      el.textContent = '無法解密，金鑰可能尚未同步，稍後重新整理再試';
      return el;
    }
    if (type === 'image') {
      const img = document.createElement('img');
      img.className = 'fed-msg-image';
      img.src = body;
      img.alt = '圖片';
      img.addEventListener('click', function () { window.open(body, '_blank'); });
      return img;
    }
    if (type === 'sticker') {
      const img = document.createElement('img');
      img.className = 'fed-msg-sticker';
      img.src = body;
      img.alt = '貼圖';
      return img;
    }
    if (type === 'location') {
      let loc = {};
      try { loc = JSON.parse(body || '{}'); } catch (e) { /* 壞掉的位置資料就當作空 */ }
      const a = document.createElement('a');
      a.className = 'fed-location-link';
      a.href = 'https://www.google.com/maps?q=' + (loc.lat ?? 0) + ',' + (loc.lng ?? 0);
      a.target = '_blank';
      a.rel = 'noopener';
      a.innerHTML = '<i class="bi bi-geo-alt-fill me-1"></i>查看位置';
      return a;
    }
    const bodyEl = document.createElement('div');
    bodyEl.style.whiteSpace = 'pre-wrap';
    bodyEl.textContent = body;
    return bodyEl;
  }

  /** 回覆預覽區塊：跟主體訊息一樣，文字型的回覆對象如果是加密的要另外解密。 */
  async function buildReplyPreviewEl(replyTo) {
    const div = document.createElement('div');
    div.className = 'fed-reply-preview';
    const who = document.createElement('div');
    who.className = 'fw-semibold';
    who.textContent = replyTo.direction === 'outbound' ? '你' : pendingCallerName;
    const snippet = document.createElement('div');
    snippet.className = 'text-truncate fed-reply-snippet';
    div.appendChild(who);
    div.appendChild(snippet);

    if (replyTo.recalled) {
      snippet.textContent = '此訊息已收回';
    } else if (replyTo.type === 'image') {
      snippet.textContent = '[圖片]';
    } else if (replyTo.type === 'sticker') {
      snippet.textContent = '[貼圖]';
    } else if (replyTo.type === 'location') {
      snippet.textContent = '[位置]';
    } else if (replyTo.encrypted) {
      snippet.textContent = '解密中…';
      const plain = await decryptBody('text', replyTo.body, replyTo.iv, replyTo.key_version);
      snippet.textContent = plain !== null ? plain.slice(0, 60) : '無法解密';
    } else {
      snippet.textContent = (replyTo.body || '').slice(0, 60);
    }
    return div;
  }

  /** 組出訊息泡泡本體：收回顯示佔位文字，否則是「（可能有的）回覆預覽＋內容」。 */
  async function buildBubble(m, decryptedBody) {
    const bubble = document.createElement('div');
    bubble.className = 'fed-msg-bubble' + (m.type === 'sticker' && decryptedBody !== null && !m.recalled_at ? ' fed-msg-bubble-sticker' : '');

    if (m.recalled_at) {
      const el = document.createElement('span');
      el.className = 'fst-italic text-muted small';
      el.textContent = '此訊息已收回';
      bubble.appendChild(el);
      return bubble;
    }

    if (m.reply_to) {
      bubble.appendChild(await buildReplyPreviewEl(m.reply_to));
    }
    bubble.appendChild(buildBubbleContent(m.type, decryptedBody));
    return bubble;
  }

  async function renderMessageRow(m) {
    const time = new Date(m.created_at).toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'});
    const decryptedBody = (m.encrypted && !m.recalled_at) ? await decryptBody(m.type, m.body, m.iv, m.key_version) : m.body;

    const wrap = document.createElement('div');
    wrap.className = 'fed-msg-row' + (m.direction === 'outbound' ? ' me' : '');
    wrap.dataset.msgId = m.id;
    wrap.dataset.clientMessageId = m.client_message_id;
    wrap.dataset.type = m.type;
    wrap.dataset.createdAt = m.created_at;
    if (m.recalled_at) wrap.dataset.recalled = '1';
    // 編輯時（submitEdit()）要知道原本是不是加密、用哪個 key_version 才能沿用
    // 同一版金鑰——這兩個 dataset 属性跟伺服器端 Blade 初次渲染時的邏輯一致
    // （見 forelse 迴圈），這裡是「輪詢/剛送出」進來的訊息補上同一套標記。
    if (m.encrypted && !m.recalled_at) {
      wrap.dataset.encrypted = '1';
      wrap.dataset.keyVersion = m.key_version ?? '';
    }

    if (m.direction !== 'outbound') {
      const avatar = document.createElement('div');
      avatar.className = 'fed-msg-avatar';
      avatar.textContent = (pendingCallerName || '?').charAt(0);
      wrap.appendChild(avatar);
    }

    const bodyCol = document.createElement('div');
    bodyCol.className = 'fed-msg-body-col';
    bodyCol.appendChild(await buildBubble(m, decryptedBody));

    const meta = document.createElement('div');
    meta.className = 'fed-msg-meta';
    if (m.direction === 'outbound' && !m.recalled_at) {
      const readSpan = document.createElement('span');
      readSpan.className = 'fed-msg-read-status';
      meta.appendChild(readSpan);
      meta.appendChild(document.createTextNode(' · ' + time));
    } else {
      meta.textContent = time;
    }
    if (m.edited_at && !m.recalled_at) meta.appendChild(document.createTextNode(' · 已編輯'));
    bodyCol.appendChild(meta);
    wrap.appendChild(bodyCol);
    return wrap;
  }

  /**
   * 新訊息就往下加一列；已經畫過的（輪詢抓到「被編輯/收回過」的舊訊息，
   * 或編輯/收回動作自己觸發的即時更新）整列重畫取代掉舊的——收回/編輯
   * 影響的欄位夠多（內容、已收回佔位、已編輯標籤），直接整列換掉比逐一
   * patch 每個欄位簡單可靠。
   */
  async function upsertMessage(m) {
    if (emptyHint) { emptyHint.remove(); emptyHint = null; }
    const row = await renderMessageRow(m);
    const existing = listEl.querySelector(`.fed-msg-row[data-msg-id="${m.id}"]`);
    if (existing) {
      existing.replaceWith(row);
    } else {
      listEl.appendChild(row);
      listEl.scrollTop = listEl.scrollHeight;
    }
    lastId = Math.max(lastId, m.id);
    if (m.direction === 'outbound') refreshReadStatuses();
  }

  // 解開一開始伺服器端渲染出來的加密訊息（初次載入這頁時金鑰可能還沒
  // ensureReady() 完，所以先用「解密中…」佔位，這裡再補上真正內容）。
  // 回覆預覽是不是加密是「被回覆的那則訊息」自己的加密狀態，跟外層這則
  // 訊息本身是否加密無關，所以分開兩輪處理。
  async function decryptInitialMessages() {
    const rows = listEl.querySelectorAll('.fed-msg-row[data-encrypted="1"]');
    for (const row of rows) {
      const body = await decryptBody(row.dataset.type, row.dataset.body, row.dataset.iv, Number(row.dataset.keyVersion) || null);
      const bubble = row.querySelector('.fed-msg-bubble');
      const replyEl = bubble.querySelector('.fed-reply-preview');
      bubble.innerHTML = '';
      if (replyEl) bubble.appendChild(replyEl);
      bubble.appendChild(buildBubbleContent(row.dataset.type, body));
    }

    const replyEls = listEl.querySelectorAll('.fed-reply-preview[data-reply-encrypted="1"]');
    for (const replyEl of replyEls) {
      const plain = await decryptBody('text', replyEl.dataset.replyBody, replyEl.dataset.replyIv, Number(replyEl.dataset.replyKeyVersion) || null);
      const snippet = replyEl.querySelector('.fed-reply-snippet');
      if (snippet) snippet.textContent = plain !== null ? plain.slice(0, 60) : '無法解密';
    }
  }

  // since 紀錄上一次成功輪詢的時間點，用來撈出「id 沒變但被編輯/收回過」的
  // 舊訊息——單靠 after_id 只抓得到全新的列（見 FederatedChatController::
  // messages()）。用伺服器回傳的 server_time 更新，不用瀏覽器自己的時鐘
  // （避免時間飄移導致漏抓或抓到重複的窗口）。
  let lastSyncAt = @json(now()->toIso8601String());

  async function poll() {
    try {
      const res = await fetch(`{{ url('messaging/federated') }}/${conversationId}/messages?after_id=${lastId}&since=${encodeURIComponent(lastSyncAt)}`, {
        headers: {'Accept': 'application/json'},
      });
      if (!res.ok) return;
      const data = await res.json();
      let gotInboundMessage = false;
      for (const m of (data.messages || [])) {
        await upsertMessage(m);
        if (m.direction === 'inbound') gotInboundMessage = true;
      }
      if (data.server_time) lastSyncAt = data.server_time;
      // 對方回報的已讀時間點可能在我方完全不知情的情況下就更新了（對方
      // 開著頁面、我方沒送新訊息），每次輪詢都順便拿最新值來更新畫面。
      if (data.peer_read_at !== undefined) {
        peerReadAt = data.peer_read_at;
        refreshReadStatuses();
      }
      // 對方剛傳了新訊息進來，代表使用者正在看這個對話串——比照本地聊天室
      // 收到新訊息就 markRead 的邏輯，回報自己已讀到現在。
      if (gotInboundMessage) markReadRemote();
    } catch (e) { /* 靜默重試，不用中斷輪詢 */ }
  }

  // ── 訊息右鍵選單：回覆／編輯／收回／刪除。跟本地聊天室不同的是，編輯／
  // 收回需要額外通知對方（見 FederationClientService::sendMessageEdit()/
  // sendMessageRecall()）；刪除維持原本設計，跨組織訊息雙方各自存一份獨立
  // 的列，刪掉自己這份不會通知/刪掉對方那份。
  const msgContextMenu = document.getElementById('fedMsgContextMenu');
  const composeContextBar = document.getElementById('fedComposeContextBar');
  const composeContextIcon = document.getElementById('fedComposeContextIcon');
  const composeContextLabel = document.getElementById('fedComposeContextLabel');
  const composeContextSnippet = document.getElementById('fedComposeContextSnippet');
  const composeContextCancel = document.getElementById('fedComposeContextCancel');
  let replyingTo = null;
  let editingMessageId = null;

  function closeMsgContextMenu() { msgContextMenu.classList.add('d-none'); msgContextMenu.innerHTML = ''; }

  function clearComposeContext() {
    replyingTo = null;
    editingMessageId = null;
    composeContextBar.classList.add('d-none');
  }

  function messageSnippetFromRow(row) {
    if (row.dataset.recalled === '1') return '此訊息已收回';
    const type = row.dataset.type;
    if (type === 'image') return '[圖片]';
    if (type === 'sticker') return '[貼圖]';
    if (type === 'location') return '[位置]';
    const bodyEl = row.querySelector('.fed-msg-bubble > div:not(.fed-reply-preview)');
    return bodyEl ? bodyEl.textContent : '';
  }

  function showReplyContext(row) {
    editingMessageId = null;
    replyingTo = { clientMessageId: row.dataset.clientMessageId };
    composeContextIcon.className = 'bi bi-reply-fill text-primary';
    composeContextLabel.textContent = '回覆 ' + (row.classList.contains('me') ? '你自己' : pendingCallerName);
    composeContextSnippet.textContent = messageSnippetFromRow(row);
    composeContextBar.classList.remove('d-none');
    input.focus();
  }

  function showEditContext(row) {
    replyingTo = null;
    editingMessageId = row.dataset.msgId;
    composeContextIcon.className = 'bi bi-pencil-fill text-warning';
    const currentText = messageSnippetFromRow(row);
    composeContextLabel.textContent = '編輯訊息';
    composeContextSnippet.textContent = currentText;
    composeContextBar.classList.remove('d-none');
    input.value = currentText;
    input.style.height = 'auto';
    input.style.height = Math.min(input.scrollHeight, 120) + 'px';
    input.focus();
  }

  composeContextCancel.addEventListener('click', function () {
    const wasEditing = !!editingMessageId;
    clearComposeContext();
    if (wasEditing) { input.value = ''; input.style.height = 'auto'; }
  });

  listEl.addEventListener('contextmenu', function (e) {
    const row = e.target.closest('.fed-msg-row[data-msg-id]');
    if (!row) return;
    e.preventDefault();

    const isMe = row.classList.contains('me');
    const recalled = row.dataset.recalled === '1';
    const type = row.dataset.type;

    const items = [];
    if (!recalled) items.push({ key: 'reply', icon: 'bi-reply-fill text-primary', label: '回覆' });
    if (isMe && !recalled && type === 'text') items.push({ key: 'edit', icon: 'bi-pencil-fill text-warning', label: '編輯' });
    if (isMe && !recalled) items.push({ key: 'recall', icon: 'bi-arrow-counterclockwise text-danger', label: '收回' });
    items.push({ key: 'delete', icon: 'bi-trash text-secondary', label: '刪除' });

    msgContextMenu.innerHTML = items.map((it) =>
      `<button type="button" class="list-group-item list-group-item-action" data-action="${it.key}">
        <i class="bi ${it.icon} me-2"></i>${it.label}
      </button>`
    ).join('');
    msgContextMenu.dataset.msgId = row.dataset.msgId;

    const maxLeft = window.innerWidth - 160;
    const maxTop = window.innerHeight - (items.length * 40 + 10);
    msgContextMenu.style.left = Math.max(0, Math.min(e.clientX, maxLeft)) + 'px';
    msgContextMenu.style.top = Math.max(0, Math.min(e.clientY, maxTop)) + 'px';
    msgContextMenu.classList.remove('d-none');
  });

  document.addEventListener('click', function (e) {
    if (!msgContextMenu.contains(e.target)) closeMsgContextMenu();
  });
  window.addEventListener('scroll', closeMsgContextMenu, true);

  msgContextMenu.addEventListener('click', async function (e) {
    const btn = e.target.closest('[data-action]');
    if (!btn) return;
    const msgId = msgContextMenu.dataset.msgId;
    const row = listEl.querySelector(`.fed-msg-row[data-msg-id="${msgId}"]`);
    const action = btn.dataset.action;
    closeMsgContextMenu();
    if (!row) return;

    if (action === 'reply') {
      showReplyContext(row);
      return;
    }
    if (action === 'edit') {
      showEditContext(row);
      return;
    }
    if (action === 'recall') {
      if (!confirm('確定要收回這則訊息嗎？收回後對方也會看到「此訊息已收回」。')) return;
      try {
        const res = await fetch(`{{ url('messaging/federated') }}/${conversationId}/messages/${msgId}/recall`, {
          method: 'POST',
          headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf },
        });
        if (!res.ok) throw new Error('recall failed');
        const data = await res.json();
        await upsertMessage(data.message);
      } catch (err) {
        alert('收回失敗，請稍後再試。');
      }
      return;
    }
    if (action === 'delete') {
      if (!confirm('確定要刪除這則訊息嗎？只會從你自己這邊移除，對方那邊看到的訊息不會被刪掉。')) return;
      try {
        const res = await fetch(`{{ url('messaging/federated') }}/${conversationId}/messages/${msgId}`, {
          method: 'DELETE',
          headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf },
        });
        if (!res.ok) throw new Error('delete failed');
        row.remove();
        if (!listEl.querySelector('.fed-msg-row') && !emptyHint) {
          emptyHint = document.createElement('div');
          emptyHint.className = 'text-center text-muted small py-4';
          emptyHint.id = 'fedEmptyHint';
          emptyHint.textContent = '還沒有訊息，說聲哈囉吧。';
          listEl.appendChild(emptyHint);
        }
      } catch (err) {
        alert('刪除失敗，請稍後再試。');
      }
    }
  });

  listEl.scrollTop = listEl.scrollHeight;
  setInterval(poll, 4000);

  // 這台瀏覽器的裝置身分就緒後，把伺服器端先渲染成「解密中…」佔位的訊息
  // 補上真正內容。ensureReady() 本身是 idempotent（內部有快取），跟本地
  // 聊天室 index.blade.php 一樣可以放心每個頁面各自呼叫一次。
  //
  // 一定要包在 DOMContentLoaded 裡才能呼叫：這個 script 區塊在頁面裡的位置
  // 比 layout 最下面載入 messaging-crypto.js 的 <script src> 早（這個內容
  // 區塊本身在前，messaging-crypto.js 在後），這裡的程式碼跑的當下
  // window.MessagingCrypto 根本還沒被定義。剛才少了這層，MC.ensureReady 直接
  // TypeError，把整個 IIFE 中斷在這裡，後面的 loadSidebar() 完全沒機會執行，
  // 左側對話清單永遠卡在「載入中…」——跟本地聊天室 index.blade.php 用同一招
  // （見它的 DOMContentLoaded 註解）避開。
  document.addEventListener('DOMContentLoaded', function () {
    MC.ensureReady(window.MessagingConfig.routes, csrf)
      .then(decryptInitialMessages)
      .catch(function () { /* 裝置還沒核准（pending）就先維持「解密中…」，不報錯 */ });
  });

  input.addEventListener('input', function () {
    input.style.height = 'auto';
    input.style.height = Math.min(input.scrollHeight, 120) + 'px';
  });
  input.addEventListener('keydown', function (e) {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      form.requestSubmit();
    }
  });

  async function sendPayload(type, body, replyToClientMessageId) {
    let payload = { type, body };
    if (replyToClientMessageId) payload.reply_to_client_message_id = replyToClientMessageId;

    // best effort：拿得到金鑰就加密，拿不到（例如對方通訊錄還沒同步出任何
    // 裝置公鑰）就照舊送明文，不擋住整個聊天功能——跟本地聊天室
    // ensureConversationEncryption() 的策略一致。
    const keyEntry = await ensureConversationKey().catch(() => null);
    if (keyEntry) {
      const enc = await MC.encrypt(keyEntry.cryptoKey, body);
      payload = { type, body: enc.body, encrypted: true, key_version: keyEntry.version, iv: enc.iv };
      if (replyToClientMessageId) payload.reply_to_client_message_id = replyToClientMessageId;
    }

    const res = await fetch(`{{ url('messaging/federated') }}/${conversationId}/messages`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'X-CSRF-TOKEN': csrf,
      },
      body: JSON.stringify(payload),
    });
    if (!res.ok) throw new Error('send failed');
    const data = await res.json();
    await upsertMessage(data.message);
  }

  /** 編輯：沿用原本那則訊息的加密狀態／key_version，只換新的密文跟 iv。 */
  async function submitEdit(msgId, body) {
    const row = listEl.querySelector(`.fed-msg-row[data-msg-id="${msgId}"]`);
    let payload = { body };

    if (row?.dataset.encrypted === '1') {
      const keyEntry = await ensureConversationKey(Number(row.dataset.keyVersion) || undefined);
      if (!keyEntry) throw new Error('no-key');
      const enc = await MC.encrypt(keyEntry.cryptoKey, body);
      payload = { body: enc.body, iv: enc.iv };
    }

    const res = await fetch(`{{ url('messaging/federated') }}/${conversationId}/messages/${msgId}`, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf },
      body: JSON.stringify(payload),
    });
    if (!res.ok) throw new Error('edit failed');
    const data = await res.json();
    await upsertMessage(data.message);
  }

  form.addEventListener('submit', async function (e) {
    e.preventDefault();
    const body = input.value.trim();
    if (!body) return;

    if (editingMessageId) {
      const id = editingMessageId;
      input.value = '';
      input.style.height = 'auto';
      clearComposeContext();
      input.disabled = true;
      try {
        await submitEdit(id, body);
      } catch (e) {
        alert('編輯失敗，請稍後再試。');
      } finally {
        input.disabled = false;
        input.focus();
      }
      return;
    }

    const replyToClientMessageId = replyingTo?.clientMessageId ?? null;
    input.value = '';
    input.style.height = 'auto';
    clearComposeContext();
    input.disabled = true;
    try {
      await sendPayload('text', body, replyToClientMessageId);
    } catch (e) {
      // 理由同貼圖：sendPayload() 內部同步呼叫中間層，瀏覽器等回應等到放棄
      // 時，伺服器那端很可能其實已經送成功——先刷新一次畫面，使用者看得到
      // 訊息是不是真的已經送出，再決定要不要真的重新輸入送一次，降低誤觸發
      // 重複傳送的機率。
      await poll();
      alert('傳送可能失敗，已重新整理訊息列表，請確認是否已送出；若沒看到再重新輸入送出。');
      input.value = body;
    } finally {
      input.disabled = false;
      input.focus();
    }
  });

  // ── 「+」選單：圖片／位置。沒有跨組織檔案儲存/CDN，圖片直接在瀏覽器裡
  // 用 canvas 壓縮成 JPEG 轉 base64 當文字送（中間層 body 沒有大小限制，
  // 本地/對方 body 欄位也已經改成 LONGTEXT）；位置就是存一段 {lat,lng} JSON。
  const attachBtn = document.getElementById('fedAttachBtn');
  const attachMenu = document.getElementById('fedAttachMenu');
  const attachImageBtn = document.getElementById('fedAttachImageBtn');
  const attachLocationBtn = document.getElementById('fedAttachLocationBtn');
  const imageInput = document.getElementById('fedImageInput');

  function closeAttachMenu() { attachMenu.classList.add('d-none'); }

  attachBtn.addEventListener('click', function (e) {
    e.stopPropagation();
    closeEmojiPicker();
    closeBgMenu();
    if (attachMenu.classList.contains('d-none')) {
      const rect = attachBtn.getBoundingClientRect();
      attachMenu.style.left = rect.left + 'px';
      attachMenu.style.bottom = (window.innerHeight - rect.top + 6) + 'px';
    }
    attachMenu.classList.toggle('d-none');
  });

  function compressImage(file) {
    return new Promise(function (resolve, reject) {
      const reader = new FileReader();
      reader.onload = function (e) {
        const img = new Image();
        img.onload = function () {
          const maxDim = 1280;
          let w = img.width, h = img.height;
          if (w > maxDim || h > maxDim) {
            if (w > h) { h = Math.round(h * maxDim / w); w = maxDim; }
            else { w = Math.round(w * maxDim / h); h = maxDim; }
          }
          const canvas = document.createElement('canvas');
          canvas.width = w; canvas.height = h;
          canvas.getContext('2d').drawImage(img, 0, 0, w, h);
          resolve(canvas.toDataURL('image/jpeg', 0.7));
        };
        img.onerror = function () { reject(new Error('圖片讀取失敗')); };
        img.src = e.target.result;
      };
      reader.onerror = function () { reject(new Error('檔案讀取失敗')); };
      reader.readAsDataURL(file);
    });
  }

  attachImageBtn.addEventListener('click', function () {
    closeAttachMenu();
    imageInput.click();
  });

  imageInput.addEventListener('change', async function () {
    const file = imageInput.files?.[0];
    imageInput.value = '';
    if (!file) return;
    try {
      const dataUrl = await compressImage(file);
      if (dataUrl.length > 1500000) {
        alert('圖片壓縮後還是太大，換一張試試。');
        return;
      }
      await sendPayload('image', dataUrl);
    } catch (e) {
      await poll();
      alert('圖片傳送可能失敗，已重新整理訊息列表，請確認是否已送出：' + e.message);
    }
  });

  attachLocationBtn.addEventListener('click', function () {
    closeAttachMenu();
    if (!navigator.geolocation) { alert('這個瀏覽器不支援定位。'); return; }
    attachLocationBtn.disabled = true;
    navigator.geolocation.getCurrentPosition(
      async function (pos) {
        attachLocationBtn.disabled = false;
        try {
          await sendPayload('location', JSON.stringify({ lat: pos.coords.latitude, lng: pos.coords.longitude }));
        } catch (e) {
          await poll();
          alert('位置傳送可能失敗，已重新整理訊息列表，請確認是否已送出。');
        }
      },
      function () {
        attachLocationBtn.disabled = false;
        alert('無法取得目前位置，請確認已允許瀏覽器存取定位。');
      },
      { timeout: 10000 },
    );
  });

  // 貼圖／表情面板：跟本地聊天室 index.blade.php 一樣共用同一顆按鈕、同一個
  // 彈出面板，靠上面兩個分頁切換內容，預設（含每次重新整理後第一次打開）
  // 停在「貼圖」分頁。
  const emojiBtn = document.getElementById('fedEmojiBtn');
  const emojiStickerPanel = document.getElementById('fedEmojiStickerPanel');
  const emojiWrap = document.getElementById('fedEmojiPickerWrap');
  const stickerPickerWrap = document.getElementById('fedStickerPickerWrap');
  const panelTabStickerBtn = document.getElementById('fedPanelTabStickerBtn');
  const panelTabEmojiBtn = document.getElementById('fedPanelTabEmojiBtn');
  let activePanelTab = 'sticker';
  let emojiPickerLoaded = false;

  function closeEmojiPicker() { emojiStickerPanel.classList.add('d-none'); }

  async function loadEmojiTab() {
    if (emojiPickerLoaded) return;
    emojiPickerLoaded = true;
    await import('/vendor/emoji-picker-element/picker.js');
    const picker = document.createElement('emoji-picker');
    picker.setAttribute('data-source', '/vendor/emoji-picker-element-data/en/emojibase/data.json');
    picker.style.cssText = '--num-columns:8; width:100%; height:100%;';
    picker.addEventListener('emoji-click', function (ev) {
      input.value += ev.detail.unicode;
      input.focus();
    });
    emojiWrap.appendChild(picker);
  }

  function showPanelTab(tab) {
    activePanelTab = tab;
    panelTabStickerBtn.classList.toggle('active', tab === 'sticker');
    panelTabEmojiBtn.classList.toggle('active', tab === 'emoji');
    stickerPickerWrap.classList.toggle('d-none', tab !== 'sticker');
    emojiWrap.classList.toggle('d-none', tab !== 'emoji');
    if (tab === 'sticker') loadStickerPanel();
    else loadEmojiTab();
  }

  panelTabStickerBtn.addEventListener('click', () => showPanelTab('sticker'));
  panelTabEmojiBtn.addEventListener('click', () => showPanelTab('emoji'));

  emojiBtn.addEventListener('click', function (e) {
    e.stopPropagation();
    closeAttachMenu();
    closeBgMenu();
    if (!emojiStickerPanel.classList.contains('d-none')) { closeEmojiPicker(); return; }

    showPanelTab(activePanelTab);
    const rect = emojiBtn.getBoundingClientRect();
    emojiStickerPanel.style.left = rect.left + 'px';
    emojiStickerPanel.style.bottom = (window.innerHeight - rect.top + 6) + 'px';
    emojiStickerPanel.classList.remove('d-none');
  });

  function escapeHtml(s) {
    const div = document.createElement('div');
    div.textContent = s ?? '';
    return div.innerHTML;
  }

  // ── 貼圖：貼圖屬於使用者本人（跟哪個對話無關），所以直接沿用本地聊天室
  // 同一個「已下載貼圖包」端點；跨組織對話的另一方在不同伺服器上、沒有我們
  // 的 stickers 資料表，因此不能像本地聊天室那樣只傳 sticker_id——後端在
  // sendMessage() 裡把 sticker_id 換成一個公開可讀的絕對網址（imageUrl()，
  // 帶完整網域）當作 body 送出，對方瀏覽器才有辦法直接 <img> 顯示。貼圖不
  // 加密：跟圖片/位置不同，它是伺服器端靜態素材，加密只會讓對方在同步到
  // 金鑰之前也看不到，沒有保護到任何隱私內容。面板/分頁 UI 跟本地聊天室
  // index.blade.php 的 stickerPanelHtml() 是同一套設計（一頁 3x3、左右滑動
  // 翻頁），只是類別名稱都加了 fed- 前綴。
  let myStickerPacks = null; // null = 還沒抓過，抓過之後是陣列（可能是空的）
  let stickerPanelActivePackId = null;

  function stickerPanelHtml() {
    if (!myStickerPacks || !myStickerPacks.length) {
      return `<div class="d-flex flex-column align-items-center justify-content-center gap-2 p-4 text-muted small" style="flex:1;">
        <i class="bi bi-sticky fs-3"></i>
        <div>還沒有下載任何貼圖</div>
        <a href="${window.MessagingConfig.routes.stickersStoreUrl}" target="_blank" rel="noopener" class="btn btn-sm btn-primary">前往貼圖商店</a>
      </div>`;
    }
    const activePack = myStickerPacks.find((p) => p.id === stickerPanelActivePackId) || myStickerPacks[0];
    const tabs = myStickerPacks.map((p) => `
      <button type="button" class="fed-sticker-tab-btn ${p.id === activePack.id ? 'active' : ''}" data-pack-id="${p.id}" title="${escapeHtml(p.name)}">
        <img src="${escapeHtml(p.cover_url || (p.stickers[0]?.url ?? ''))}" alt="${escapeHtml(p.name)}">
      </button>`).join('');
    const PAGE_SIZE = 9; // 3 欄 x 3 列
    const stickers = activePack.stickers;
    const pages = [];
    for (let i = 0; i < stickers.length; i += PAGE_SIZE) pages.push(stickers.slice(i, i + PAGE_SIZE));
    if (!pages.length) pages.push([]);
    const pagesHtml = pages.map((page) => `
      <div class="fed-sticker-page">${page.map((s) => `
        <button type="button" class="fed-sticker-pick-btn" data-sticker-id="${s.id}">
          <img src="${escapeHtml(s.url)}" alt="貼圖" loading="lazy">
        </button>`).join('') || '<div class="text-muted small p-3">這組貼圖包是空的</div>'}</div>`).join('');
    const dotsHtml = pages.length > 1
      ? pages.map((_, i) => `<button type="button" class="fed-sticker-page-dot${i === 0 ? ' active' : ''}" data-page="${i}"></button>`).join('')
      : '';
    return `
      <div class="d-flex border-bottom fed-sticker-pack-tabs" style="overflow-x:auto; flex:0 0 auto;">${tabs}
        <a href="${window.MessagingConfig.routes.stickersStoreUrl}" target="_blank" rel="noopener" class="fed-sticker-tab-btn d-flex align-items-center justify-content-center" title="貼圖商店">
          <i class="bi bi-shop"></i>
        </a>
      </div>
      <div class="fed-sticker-page-track" id="fedStickerPageTrack">${pagesHtml}</div>
      ${dotsHtml ? `<div class="fed-sticker-page-dots">${dotsHtml}</div>` : ''}`;
  }

  async function sendSticker(stickerId) {
    const res = await fetch(`{{ url('messaging/federated') }}/${conversationId}/messages`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf },
      body: JSON.stringify({ type: 'sticker', sticker_id: stickerId }),
    });
    if (!res.ok) throw new Error('send failed');
    const data = await res.json();
    await upsertMessage(data.message);
  }

  function renderStickerPanel() {
    stickerPickerWrap.innerHTML = stickerPanelHtml();
    stickerPickerWrap.querySelectorAll('.fed-sticker-tab-btn[data-pack-id]').forEach((btn) => {
      btn.addEventListener('click', function (e) {
        // 跟本地聊天室同樣的理由：換掉整包 innerHTML 之前要先擋冒泡，不然
        // e.target 已經脫離文件樹，外層「點外面關閉面板」的判斷會誤判成
        // 點在面板外面而把面板關掉。
        e.stopPropagation();
        stickerPanelActivePackId = parseInt(btn.dataset.packId, 10);
        renderStickerPanel();
      });
    });
    stickerPickerWrap.querySelectorAll('.fed-sticker-pick-btn').forEach((btn) => {
      btn.addEventListener('click', async function () {
        btn.disabled = true;
        try {
          await sendSticker(parseInt(btn.dataset.stickerId, 10));
          closeEmojiPicker();
        } catch (e) {
          // 送出這一步會同步呼叫中間層（見 FederationClientService::sendMessage()），
          // 如果對方伺服器/網路慢，很可能伺服器那邊其實已經送成功、只是瀏覽器
          // 這端等回應等到放棄——重新輪詢一次，讓畫面跟伺服器實際狀態同步，
          // 不要留著一個「顯示失敗但其實成功」的錯誤畫面。
          await poll();
          alert('貼圖可能傳送失敗，已重新整理訊息列表，請確認是否已送出。');
        } finally {
          btn.disabled = false;
        }
      });
    });
    const pageTrack = stickerPickerWrap.querySelector('#fedStickerPageTrack');
    const pageDots = stickerPickerWrap.querySelectorAll('.fed-sticker-page-dot');
    if (pageTrack && pageDots.length) {
      pageDots.forEach((dot) => {
        dot.addEventListener('click', function () {
          pageTrack.scrollTo({ left: parseInt(dot.dataset.page, 10) * pageTrack.clientWidth, behavior: 'smooth' });
        });
      });
      pageTrack.addEventListener('scroll', function () {
        const idx = Math.round(pageTrack.scrollLeft / pageTrack.clientWidth);
        pageDots.forEach((dot, i) => dot.classList.toggle('active', i === idx));
      });
    }
    if (pageTrack) {
      pageTrack.addEventListener('wheel', function (e) {
        if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
          e.preventDefault();
          pageTrack.scrollLeft += e.deltaY;
        }
      }, { passive: false });
    }
  }

  async function loadStickerPanel() {
    if (myStickerPacks === null) {
      try {
        const res = await fetch(window.MessagingConfig.routes.stickersMine, { headers: { Accept: 'application/json' } });
        myStickerPacks = await res.json();
      } catch (e) {
        myStickerPacks = [];
      }
    }
    renderStickerPanel();
  }

  // ── 聊天背景：跟本地聊天室共用同一個「使用者介面偏好」端點跟 key，
  // 兩邊選同一個佈景會互相同步，不用各自存一份。 ──
  const bgBtn = document.getElementById('fedBgBtn');
  const bgMenu = document.getElementById('fedBgMenu');
  const BG_CLASSES = ['fed-bg-ocean', 'fed-bg-dark', 'fed-bg-spring', 'fed-bg-summer', 'fed-bg-autumn', 'fed-bg-winter'];

  function closeBgMenu() { bgMenu.classList.add('d-none'); }
  function applyBackground(key) {
    listEl.classList.remove(...BG_CLASSES);
    if (key && key !== 'default') listEl.classList.add('fed-bg-' + key);
  }

  bgBtn.addEventListener('click', function (e) {
    e.stopPropagation();
    closeEmojiPicker();
    closeAttachMenu();
    if (bgMenu.classList.contains('d-none')) {
      const rect = bgBtn.getBoundingClientRect();
      bgMenu.style.left = Math.min(rect.left, window.innerWidth - 190) + 'px';
      bgMenu.style.top = (rect.bottom + 6) + 'px';
    }
    bgMenu.classList.toggle('d-none');
  });
  bgMenu.addEventListener('click', async function (e) {
    const swatch = e.target.closest('.fed-bg-swatch');
    if (!swatch) return;
    const key = swatch.dataset.bg;
    applyBackground(key);
    closeBgMenu();
    try {
      await fetch('{{ route('ui.prefs.store') }}', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf, Accept: 'application/json' },
        body: JSON.stringify({ chat_background: key }),
      });
    } catch (e) { /* 存不到就下次載入還是預設，不擋使用者操作 */ }
  });
  (async function loadBackground() {
    try {
      const res = await fetch('{{ route('ui.prefs.show') }}', { headers: { Accept: 'application/json' } });
      const data = await res.json();
      applyBackground(data.chat_background);
    } catch (e) { /* 拿不到就用預設 */ }
  })();

  document.addEventListener('click', function (e) {
    if (!emojiStickerPanel.contains(e.target) && e.target !== emojiBtn) closeEmojiPicker();
    if (!bgMenu.contains(e.target) && e.target !== bgBtn) closeBgMenu();
    if (!attachMenu.contains(e.target) && e.target !== attachBtn) closeAttachMenu();
  });

  // ── 左側：跨組織對話清單 ──
  const sidebarList = document.getElementById('fedSidebarList');
  const sidebarHiddenToggle = document.getElementById('fedSidebarHiddenToggle');
  const sidebarHiddenCount = document.getElementById('fedSidebarHiddenCount');
  const sidebarHiddenList = document.getElementById('fedSidebarHiddenList');
  const sidebarContextMenu = document.getElementById('fedSidebarContextMenu');
  let sidebarHiddenOpen = false;

  function timeAgo(iso) {
    if (!iso) return '';
    const diffMin = Math.round((Date.now() - new Date(iso).getTime()) / 60000);
    if (diffMin < 1) return '剛剛';
    if (diffMin < 60) return diffMin + ' 分鐘前';
    const diffHour = Math.round(diffMin / 60);
    if (diffHour < 24) return diffHour + ' 小時前';
    return Math.round(diffHour / 24) + ' 天前';
  }

  function buildSidebarItem(c) {
    const li = document.createElement('li');
    li.className = 'fed-sidebar-item' + (c.id === conversationId ? ' active' : '');
    li.dataset.id = c.id;
    li.innerHTML = '<div class="fed-sidebar-avatar"></div>' +
      '<div style="min-width:0; flex:1;">' +
      '<div class="d-flex justify-content-between align-items-center">' +
      '<span class="fw-semibold text-truncate"></span>' +
      '<span class="small text-muted flex-shrink-0 ms-1"></span>' +
      '</div>' +
      '<div class="d-flex justify-content-between align-items-center">' +
      '<span class="small text-muted text-truncate last-msg"></span>' +
      '<span class="badge bg-danger rounded-pill unread-badge d-none flex-shrink-0 ms-1"></span>' +
      '</div></div>';
    li.querySelector('.fed-sidebar-avatar').textContent = (c.name || '?').substring(0, 1);
    li.querySelector('.fw-semibold').textContent = c.name;
    li.querySelectorAll('.small.text-muted')[0].textContent = timeAgo(c.last_message_at);
    li.querySelector('.last-msg').textContent = c.last_message || '（尚無訊息）';
    if (c.unread_count > 0 && c.id !== conversationId) {
      const badge = li.querySelector('.unread-badge');
      badge.textContent = c.unread_count;
      badge.classList.remove('d-none');
    }
    li.addEventListener('click', function () {
      if (c.id !== conversationId) window.location.href = '{{ url('messaging/federated') }}/' + c.id;
    });
    return li;
  }

  function loadSidebar() {
    fetch('{{ route('messaging.federated.index') }}', { headers: { 'Accept': 'application/json' } })
      .then(function (res) { return res.json(); })
      .then(function (data) {
        const all = data.conversations || [];
        const visible = all.filter(function (c) { return !c.hidden; });
        const hidden = all.filter(function (c) { return c.hidden; });

        sidebarList.innerHTML = '';
        if (!visible.length && !hidden.length) {
          sidebarList.innerHTML = '<li class="text-center text-muted small py-4">還沒有跨組織對話</li>';
        }
        visible.forEach(function (c) { sidebarList.appendChild(buildSidebarItem(c)); });

        sidebarHiddenToggle.classList.toggle('d-none', hidden.length === 0);
        sidebarHiddenCount.textContent = hidden.length;
        sidebarHiddenList.innerHTML = '';
        hidden.forEach(function (c) {
          const li = buildSidebarItem(c);
          li.classList.add('text-muted');
          sidebarHiddenList.appendChild(li);
        });
      })
      .catch(function () { sidebarList.innerHTML = '<li class="text-center text-danger small py-4">載入失敗</li>'; });
  }
  loadSidebar();
  setInterval(loadSidebar, 20000);

  sidebarHiddenToggle.addEventListener('click', function () {
    sidebarHiddenOpen = !sidebarHiddenOpen;
    sidebarHiddenList.classList.toggle('d-none', !sidebarHiddenOpen);
    sidebarHiddenToggle.classList.toggle('open', sidebarHiddenOpen);
  });

  function closeSidebarContextMenu() { sidebarContextMenu.classList.add('d-none'); sidebarContextMenu.innerHTML = ''; }

  [sidebarList, sidebarHiddenList].forEach(function (list) {
    list.addEventListener('contextmenu', function (e) {
      const li = e.target.closest('li[data-id]');
      if (!li) return;
      e.preventDefault();
      const isHidden = list === sidebarHiddenList;

      const items = [
        { key: 'clear', icon: 'bi-trash text-secondary', label: '刪除聊天記錄' },
        isHidden
          ? { key: 'unhide', icon: 'bi-eye text-secondary', label: '取消隱藏' }
          : { key: 'hide', icon: 'bi-eye-slash text-secondary', label: '隱藏聊天' },
      ];
      sidebarContextMenu.innerHTML = items.map(function (it) {
        return '<button type="button" class="list-group-item list-group-item-action" data-action="' + it.key + '">' +
          '<i class="bi ' + it.icon + ' me-2"></i>' + it.label + '</button>';
      }).join('');
      sidebarContextMenu.dataset.conversationId = li.dataset.id;

      const maxLeft = window.innerWidth - 180;
      const maxTop = window.innerHeight - (items.length * 40 + 10);
      sidebarContextMenu.style.left = Math.max(0, Math.min(e.clientX, maxLeft)) + 'px';
      sidebarContextMenu.style.top = Math.max(0, Math.min(e.clientY, maxTop)) + 'px';
      sidebarContextMenu.classList.remove('d-none');
    });
  });

  document.addEventListener('click', function (e) {
    if (!sidebarContextMenu.contains(e.target)) closeSidebarContextMenu();
  });
  window.addEventListener('scroll', closeSidebarContextMenu, true);

  sidebarContextMenu.addEventListener('click', async function (e) {
    const btn = e.target.closest('[data-action]');
    if (!btn) return;
    const action = btn.dataset.action;
    const targetId = sidebarContextMenu.dataset.conversationId;
    closeSidebarContextMenu();
    if (!targetId) return;

    const base = '{{ url('messaging/federated') }}/' + targetId;
    try {
      if (action === 'clear') {
        const msg = parseInt(targetId, 10) === conversationId
          ? '確定要刪除這個聊天室的聊天記錄嗎？只會清空你自己的畫面，對方不受影響，之後還可以繼續聊天。'
          : '確定要刪除這個跨組織聊天室的聊天記錄嗎？只會清空你自己的畫面，對方不受影響。';
        if (!confirm(msg)) return;
        await fetch(base + '/clear', { method: 'DELETE', headers: { 'X-CSRF-TOKEN': csrf, Accept: 'application/json' } });
        if (parseInt(targetId, 10) === conversationId) window.location.reload();
      } else if (action === 'hide') {
        await fetch(base + '/hide', { method: 'POST', headers: { 'X-CSRF-TOKEN': csrf, Accept: 'application/json' } });
      } else if (action === 'unhide') {
        await fetch(base + '/hide', { method: 'DELETE', headers: { 'X-CSRF-TOKEN': csrf, Accept: 'application/json' } });
      }
      loadSidebar();
    } catch (err) {
      alert('操作失敗，請稍後再試');
    }
  });

  // ── 語音通話 ──
  // 沒有跨組織共用的 presence channel，signaling 全部靠中間層轉發、
  // 廣播到自己的私人使用者頻道（見 FederatedCallSignal 事件），所以這頁
  // 自己開一條 Echo 連線去聽，不去動 messaging.js 裡站方全站共用的那條。
  const callBtn = document.getElementById('fedCallBtn');
  const videoCallBtn = document.getElementById('fedVideoCallBtn');
  const callBar = document.getElementById('fedCallBar');
  const callStatusText = document.getElementById('fedCallStatusText');
  const callAcceptBtn = document.getElementById('fedCallAcceptBtn');
  const callMuteBtn = document.getElementById('fedCallMuteBtn');
  const callCameraBtn = document.getElementById('fedCallCameraBtn');
  const callHangupBtn = document.getElementById('fedCallHangupBtn');
  const callHangupLabel = document.getElementById('fedCallHangupLabel');
  const remoteAudio = document.getElementById('fedRemoteAudio');
  const callVideoArea = document.getElementById('fedCallVideoArea');
  const localVideo = document.getElementById('fedLocalVideo');
  const remoteVideo = document.getElementById('fedRemoteVideo');
  const fedId = '{{ $conversation->fed_id }}';

  let pc = null;
  let localStream = null;
  let pendingOffer = null;
  let pendingCandidates = [];
  let callState = 'idle'; // idle | calling | ringing | active
  let callType = 'audio'; // audio | video——來電時從 offer payload 的 call_type 帶出來
  let callTimer = null;
  let callSeconds = 0;
  let muted = false;
  let cameraOff = false;

  function setCallState(state) {
    callState = state;
    const isVideo = callType === 'video';
    callBar.classList.toggle('d-none', state === 'idle');
    callAcceptBtn.classList.toggle('d-none', state !== 'ringing');
    callMuteBtn.classList.toggle('d-none', state !== 'active');
    callCameraBtn.classList.toggle('d-none', state !== 'active' || !isVideo);
    callVideoArea.classList.toggle('d-none', !isVideo || state !== 'active');
    callBtn.disabled = state !== 'idle';
    videoCallBtn.disabled = state !== 'idle';

    if (state === 'calling') { callStatusText.textContent = '撥號中…'; callHangupLabel.textContent = '取消'; }
    else if (state === 'ringing') { callHangupLabel.textContent = '拒接'; }
    else if (state === 'active') { callHangupLabel.textContent = '掛斷'; startCallTimer(); }
    else { stopCallTimer(); }
  }

  function startCallTimer() {
    callSeconds = 0;
    updateCallTimerText();
    callTimer = setInterval(function () { callSeconds++; updateCallTimerText(); }, 1000);
  }
  function updateCallTimerText() {
    const m = String(Math.floor(callSeconds / 60)).padStart(2, '0');
    const s = String(callSeconds % 60).padStart(2, '0');
    callStatusText.textContent = '通話中 ' + m + ':' + s;
  }
  function stopCallTimer() {
    if (callTimer) { clearInterval(callTimer); callTimer = null; }
  }

  async function sendCallSignal(type, payload) {
    const res = await fetch(`{{ url('messaging/federated') }}/${conversationId}/calls/signal`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf },
      body: JSON.stringify({ type, payload }),
    });
    if (!res.ok) throw new Error('signal failed: ' + type);
    return res.json();
  }

  function resetCall() {
    if (pc) { pc.close(); pc = null; }
    if (localStream) { window.MessagingCall.stopStream(localStream); localStream = null; }
    remoteAudio.srcObject = null;
    localVideo.srcObject = null;
    remoteVideo.srcObject = null;
    pendingOffer = null;
    pendingCandidates = [];
    muted = false;
    cameraOff = false;
    callType = 'audio';
    callMuteBtn.innerHTML = '<i class="bi bi-mic-fill"></i>';
    callCameraBtn.innerHTML = '<i class="bi bi-camera-video-fill"></i>';
    setCallState('idle');
  }

  async function setupPeerConnection(type) {
    const iceServers = await window.MessagingCall.getIceServers({ turnCredentials: '{{ route('messaging.turn-credentials') }}' });
    localStream = await window.MessagingCall.getLocalStream(type);
    if (type === 'video') localVideo.srcObject = localStream;
    const conn = window.MessagingCall.createPeerConnection(iceServers);
    localStream.getTracks().forEach(function (t) { conn.addTrack(t, localStream); });
    conn.ontrack = function (ev) {
      if (ev.track.kind === 'video') {
        remoteVideo.srcObject = ev.streams[0];
      } else {
        remoteAudio.srcObject = ev.streams[0];
      }
    };
    conn.onicecandidate = function (ev) {
      if (ev.candidate) {
        sendCallSignal('ice-candidate', { candidate: ev.candidate.toJSON() }).catch(function () {});
      }
    };
    conn.oniceconnectionstatechange = function () {
      if (['failed', 'closed'].includes(conn.iceConnectionState)) { resetCall(); }
    };
    return conn;
  }

  async function startCall(type) {
    if (callState !== 'idle') return;
    try {
      callType = type;
      setCallState('calling');
      pc = await setupPeerConnection(type);
      const offer = await pc.createOffer();
      await pc.setLocalDescription(offer);
      await sendCallSignal('offer', { sdp: offer.sdp, type: offer.type, call_type: type });
    } catch (e) {
      alert('無法發起通話：' + e.message);
      resetCall();
    }
  }

  callBtn.addEventListener('click', function () { startCall('audio'); });
  videoCallBtn.addEventListener('click', function () { startCall('video'); });

  callAcceptBtn.addEventListener('click', async function () {
    if (!pendingOffer) return;
    try {
      pc = await setupPeerConnection(callType);
      await pc.setRemoteDescription(new RTCSessionDescription(pendingOffer));
      for (const c of pendingCandidates) { await pc.addIceCandidate(new RTCIceCandidate(c)); }
      pendingCandidates = [];
      const answer = await pc.createAnswer();
      await pc.setLocalDescription(answer);
      await sendCallSignal('answer', { sdp: answer.sdp, type: answer.type });
      setCallState('active');
    } catch (e) {
      // 暫時的診斷 log：追查「Invalid SDP line」是哪個環節把 SDP 弄壞的，
      // 事情解決後可以拿掉。開瀏覽器主控台就能看到完整的 offer SDP 內容。
      console.error('接聽失敗，收到的 offer payload：', pendingOffer);
      if (pendingOffer?.sdp) {
        console.error('offer sdp 長度=' + pendingOffer.sdp.length + '，換行數=' + (pendingOffer.sdp.match(/\r\n/g) || []).length);
      }
      alert('接聽失敗：' + e.message);
      resetCall();
    }
  });

  callHangupBtn.addEventListener('click', function () {
    sendCallSignal('hangup', {}).catch(function () {});
    resetCall();
  });

  callMuteBtn.addEventListener('click', function () {
    if (!localStream) return;
    muted = !muted;
    localStream.getAudioTracks().forEach(function (t) { t.enabled = !muted; });
    callMuteBtn.innerHTML = muted ? '<i class="bi bi-mic-mute-fill"></i>' : '<i class="bi bi-mic-fill"></i>';
  });

  callCameraBtn.addEventListener('click', function () {
    if (!localStream) return;
    cameraOff = !cameraOff;
    localStream.getVideoTracks().forEach(function (t) { t.enabled = !cameraOff; });
    callCameraBtn.innerHTML = cameraOff ? '<i class="bi bi-camera-video-off-fill"></i>' : '<i class="bi bi-camera-video-fill"></i>';
  });

  function connectCallEcho() {
    const cfg = window.MessagingConfig;
    if (!cfg || !window.Echo || !window.Pusher) return null;
    window.Pusher = window.Pusher || Pusher.default || Pusher;
    return new (window.Echo.default || window.Echo)({
      broadcaster: 'reverb',
      key: cfg.reverb.key,
      wsHost: cfg.reverb.host,
      wsPort: cfg.reverb.port,
      wssPort: cfg.reverb.port,
      forceTLS: cfg.reverb.scheme === 'https',
      enabledTransports: ['ws', 'wss'],
      authEndpoint: cfg.routes.broadcastingAuth,
      auth: { headers: { 'X-CSRF-TOKEN': cfg.csrfToken } },
    });
  }

  async function handleIncomingSignal(data) {
    if (data.fed_call_id !== fedId) return;

    if (data.type === 'offer') {
      if (callState !== 'idle') {
        sendCallSignal('hangup', {}).catch(function () {});
        return;
      }
      pendingOffer = data.payload;
      callType = data.payload?.call_type === 'video' ? 'video' : 'audio';
      setCallState('ringing');
      callStatusText.textContent = (data.caller_name || '對方') + (callType === 'video' ? ' 視訊來電中…' : ' 來電中…');
    } else if (data.type === 'answer') {
      if (pc) {
        await pc.setRemoteDescription(new RTCSessionDescription(data.payload));
        for (const c of pendingCandidates) { await pc.addIceCandidate(new RTCIceCandidate(c)); }
        pendingCandidates = [];
        setCallState('active');
      }
    } else if (data.type === 'ice-candidate') {
      const candidate = data.payload.candidate;
      if (pc && pc.remoteDescription) {
        pc.addIceCandidate(new RTCIceCandidate(candidate)).catch(function () {});
      } else {
        pendingCandidates.push(candidate);
      }
    } else if (data.type === 'hangup') {
      resetCall();
    }
  }

  // 從全站來電提示（見 messaging.js 的 .federated.call.signal 全站監聽器）點進來
  // 這頁時，剛剛觸發來電的那次即時廣播早就已經送過了（一次性事件，沒人在
  // 監聽的當下就錯過），所以改成頁面載入時直接跟伺服器要「還在響鈴中、
  // 對方發起」的通話紀錄，把存下來的 offer signaling payload 接手繼續走
  // 接聽流程——見 FederatedChatController::show() 的 $pendingIncomingCall。
  const pendingIncomingCall = @json($pendingIncomingCall);
  const pendingCallerName = @json($contact->name ?? '對方');
  if (pendingIncomingCall?.signal_payload && callState === 'idle') {
    pendingOffer = pendingIncomingCall.signal_payload;
    callType = pendingIncomingCall.type === 'video' ? 'video' : 'audio';
    setCallState('ringing');
    callStatusText.textContent = pendingCallerName + (callType === 'video' ? ' 視訊來電中…' : ' 來電中…');
  }

  const callEcho = connectCallEcho();
  if (callEcho && window.MessagingConfig?.userId) {
    callEcho.private('App.Models.User.' + window.MessagingConfig.userId)
      .listen('.federated.call.signal', handleIncomingSignal);
  }
})();
</script>
@endsection