<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 src="https://api.dicebear.com/9.x/notionists/svg?seed=180002" class="w-10 h-10 rounded-full bg-slate-800 user-avatar object-cover flex-shrink-0" loading="lazy">
          <div>
            <span class="text-sm text-slate-200 block font-bold">ゲストユーザー</span>
            <span class="text-[10px] text-slate-500 font-mono">03/12 11:15</span>
          </div>
        </div>
        <div class="font-serif text-base leading-relaxed text-white"><p>参加者の余韻にいいね!とかつけられる機能はどうでしょうか?LINEのリアクション機能のようなものです。気になって投稿できない方も出てしまうでしょうか?</p></div>
      </div>
      <!-- 返信リスト -->
      <div class="p-4 pl-5 border-l-2 border-slate-800 space-y-6" id="replies_list_210002">
          <div class="animate-fade-in-up group pb-2" id="reply_150001">
  <div class="flex items-center gap-2 mb-2 justify-between">
    <div class="flex items-center gap-2">
        <img class="w-6 h-6 rounded-full bg-slate-800 object-cover flex-shrink-0" loading="lazy" src="https://yoin.space/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MzAwMDEsInB1ciI6ImJsb2JfaWQifX0=--f770a2c0e2e7502b4fb7380c0c0482a1b0a54135/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGVnIiwicmVzaXplX3RvX2ZpbGwiOlsxMjAsMTIwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--072d0b7267ef0e0c1e8fa7236c4797a0e85dc10f/IMG_8444.jpeg" />
      <span class="text-xs text-slate-300 font-bold">興行師</span>
      <span class="text-[10px] text-slate-500">11:28</span>
    </div>
  </div>
  <div class="font-serif text-sm leading-relaxed text-slate-200 ml-8"><p>そうですね。「いいね」を意識させない、数値化しない、ことを大事にしたいので、一旦その機能はつけておりません。ご意見ありがとうございます！</p></div>
</div>

          <div class="animate-fade-in-up group pb-2" id="reply_180001">
  <div class="flex items-center gap-2 mb-2 justify-between">
    <div class="flex items-center gap-2">
        <img src="https://api.dicebear.com/9.x/notionists/svg?seed=180002" class="w-6 h-6 rounded-full bg-slate-800 object-cover flex-shrink-0" loading="lazy">
      <span class="text-xs text-slate-300 font-bold">ゲスト</span>
      <span class="text-[10px] text-slate-500">21:10</span>
    </div>
  </div>
  <div class="font-serif text-sm leading-relaxed text-slate-200 ml-8"><p>数値化とは考えてもみませんでした!確かにそうですね。今の感じを楽しみたいと思います!</p></div>
</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_210002">
        <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>