<turbo-stream action="replace" target="reply_modal_container"><template>
  <div id="reply_modal_container">
    <div data-controller="modal" data-modal-target="dialog" class="fixed inset-0 z-[70] bg-brand-dark/95 backdrop-blur-sm flex justify-center">
  <div class="w-full max-w-md bg-brand-dark h-[90dvh] mt-auto rounded-t-2xl border-t border-slate-700/50 shadow-2xl flex flex-col relative animate-slide-up">
    <!-- ドラッグハンドル風 -->
    <div class="w-full flex justify-center pt-3 pb-2 cursor-pointer" data-action="click->modal#close">
      <div class="w-12 h-1.5 bg-slate-700 rounded-full"></div>
    </div>
    <!-- ヘッダー -->
    <div class="px-4 py-2 flex items-center justify-between border-b border-slate-800/50">
      <div class="w-8"></div>
      <span class="font-bold text-slate-300 text-sm flex items-center gap-1.5"><i data-lucide="message-circle" class="w-4 h-4 text-brand-accentLight"></i>返信</span>
      <button data-action="click->modal#close" class="text-slate-400 hover:text-white transition-colors w-8 flex justify-end">
        <i data-lucide="x" class="w-5 h-5"></i>
      </button>
    </div>
    <!-- スレッド内容 -->
    <div class="flex-1 overflow-y-auto pb-24 relative">
      <div class="p-5 border-b border-slate-800/80 bg-slate-900/30 relative">
        <div class="absolute left-0 top-0 bottom-0 w-1 bg-brand-accent"></div>
        <div class="flex items-center gap-3 mb-4">
            <img class="w-10 h-10 rounded-full bg-slate-800 user-avatar object-cover flex-shrink-0" loading="lazy" src="https://yoin.space/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTgwMDAxLCJwdXIiOiJibG9iX2lkIn19--8e2ca5b369a0107d59cc449cd3ddd599d89fc74b/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fZmlsbCI6WzEyMCwxMjBdfSwicHVyIjoidmFyaWF0aW9uIn19--014e67d6b94048fc6d769745334b3307405cb01b/IMG_1727.png" />
          <div>
            <span class="text-sm text-slate-200 block font-bold">あい</span>
            <span class="text-[10px] text-slate-500 font-mono">03/18 12:52</span>
          </div>
        </div>
        <div class="font-serif text-base leading-relaxed text-white"><p>なんとか取れた立見席で初の株主総会参戦。
<br />会場全体見渡せたので、ブクロさん宙吊りの迫力がすごかったです！
<br />中国のお蔵入り動画が出せない理由に「なるほどぉー…」となり、タバコの火借りられるか検証、ぬーっと出てきたひょうろくさんで笑いました。
<br />清春さんがSPゲストだった瞬間も沸いたなぁ…余韻。</p></div>
      </div>
      <!-- 返信リスト -->
      <div class="p-4 pl-5 border-l-2 border-slate-800 space-y-6" id="replies_list_300001">
          <div class="text-center py-4" id="empty_reply_message_300001">
            <span class="text-xs text-slate-500 font-sans">まだ返信はありません</span>
          </div>
      </div>
    </div>
    <!-- 返信フォーム -->
    <div class="mt-auto w-full bg-brand-dark/95 backdrop-blur-md border-t border-slate-800 pb-[max(0.75rem,env(safe-area-inset-bottom))] z-50 p-4 shrink-0" id="reply_form_300001">
        <div class="text-center w-full py-2">
    <p class="text-xs text-slate-400">返信するには<a class="text-brand-accentLight underline ml-1" href="/mypage">ログイン</a>が必要です。</p>
  </div>

    </div>
  </div>
</div>

  </div>
  <script>
    if (typeof lucide !== 'undefined') {
      lucide.createIcons();
    }
  </script>
</template></turbo-stream>