Composant de fenêtre de chat

<div class="flex flex-col h-screen bg-amber-50 dark:bg-zinc-950 font-mono text-zinc-800 dark:text-zinc-200 p-4 sm:p-6 lg:p-8">

  <!-- Top Bar / Header -->
  <div class="flex items-center justify-between p-4 bg-orange-800 dark:bg-zinc-800 text-white rounded-t-lg shadow-md mb-4">
    <div class="flex items-center space-x-3">
      <img src="https://picsum.photos/id/1018/60/60" alt="Team Logo" class="w-10 h-10 rounded-full border-2 border-white object-cover">
      <h2 class="text-lg sm:text-xl font-bold flex flex-col sm:flex-row items-baseline">
        <span class="block sm:mr-2">Team 'Apex Predators'</span>
        <span class="text-orange-200 text-sm sm:text-base">(Workout 05/11 Chat)</span>
      </h2>
    </div>
    <div class="flex items-center space-x-4">
      <button class="p-2 rounded-full hover:bg-orange-700 dark:hover:bg-zinc-700 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-zinc-600">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path></svg>
      </button>
      <button class="p-2 rounded-full hover:bg-orange-700 dark:hover:bg-zinc-700 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-zinc-600">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
      </button>
    </div>
  </div>

  <!-- Chat Area -->
  <div class="flex-1 overflow-y-auto p-4 bg-orange-50 dark:bg-zinc-900 rounded-lg shadow-inner mb-4 border border-orange-200 dark:border-zinc-800 space-y-4 sm:space-y-6">

    <!-- Message 1 (Other User) -->
    <div class="flex items-start">
      <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar" class="w-8 h-8 sm:w-10 sm:h-10 rounded-full mr-3 border-2 border-orange-300 dark:border-zinc-700 object-cover">
      <div class="flex-1">
        <div class="flex items-baseline mb-1">
          <span class="font-bold text-orange-900 dark:text-orange-300 mr-2 text-sm sm:text-base">Coach Mike</span>
          <span class="text-xs text-orange-600 dark:text-zinc-400">10:15 AM</span>
        </div>
        <div class="bg-orange-200 dark:bg-zinc-800 p-3 rounded-lg max-w-lg shadow-sm">
          <p class="text-sm sm:text-base">Alright team, focus on form today. We're hitting those high-intensity reps. Hydrate well!</p>
          <div class="text-xs text-right mt-1 text-zinc-600 dark:text-zinc-400">✓✓</div>
        </div>
      </div>
    </div>

    <!-- Message 2 (Self) -->
    <div class="flex items-start justify-end">
      <div class="flex-1 text-right">
        <div class="flex items-baseline justify-end mb-1">
          <span class="text-xs text-orange-600 dark:text-zinc-400 mr-2">10:17 AM</span>
          <span class="font-bold text-burgundy dark:text-burgundy-light text-sm sm:text-base">You</span>
        </div>
        <div class="bg-burgundy dark:bg-purple-900 text-white p-3 rounded-lg max-w-lg shadow-sm">
          <p class="text-sm sm:text-base">Got it, Coach! Ready to push hard. 💪 Any specific warm-up routine you recommend?</p>
          <div class="text-xs text-right mt-1 text-white opacity-75">✓✓ Read</div>
        </div>
      </div>
      <img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Your Avatar" class="w-8 h-8 sm:w-10 sm:h-10 rounded-full ml-3 border-2 border-burgundy dark:border-purple-700 object-cover">
    </div>

    <!-- Message 3 (Other user with image) -->
    <div class="flex items-start">
      <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-8 h-8 sm:w-10 sm:h-10 rounded-full mr-3 border-2 border-orange-300 dark:border-zinc-700 object-cover">
      <div class="flex-1">
        <div class="flex items-baseline mb-1">
          <span class="font-bold text-orange-900 dark:text-orange-300 mr-2 text-sm sm:text-base">Alex G.</span>
          <span class="text-xs text-orange-600 dark:text-zinc-400">10:20 AM</span>
        </div>
        <div class="bg-orange-200 dark:bg-zinc-800 p-3 rounded-lg max-w-lg shadow-sm">
          <p class="text-sm sm:text-base">Checking in! Here's my progress from yesterday's cardio:</p>
          <img src="https://picsum.photos/id/237/300/200" alt="Activity Progress" class="mt-2 rounded-md max-w-full h-auto object-cover">
          <div class="text-xs text-right mt-1 text-zinc-600 dark:text-zinc-400">✓✓</div>
        </div>
      </div>
    </div>

    <!-- Message 4 (Self - long message) -->
    <div class="flex items-start justify-end">
      <div class="flex-1 text-right">
        <div class="flex items-baseline justify-end mb-1">
          <span class="text-xs text-orange-600 dark:text-zinc-400 mr-2">10:22 AM</span>
          <span class="font-bold text-burgundy dark:text-burgundy-light text-sm sm:text-base">You</span>
        </div>
        <div class="bg-burgundy dark:bg-purple-900 text-white p-3 rounded-lg max-w-lg shadow-sm">
          <p class="text-sm sm:text-base">Awesome work, Alex! That's a solid run. Keep it up! I'm struggling a bit with my squat depth, considering filming a set today to review it later. Any tips for getting lower without losing form?</p>
          <div class="text-xs text-right mt-1 text-white opacity-75">✓✓ Read</div>
        </div>
      </div>
      <img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Your Avatar" class="w-8 h-8 sm:w-10 sm:h-10 rounded-full ml-3 border-2 border-burgundy dark:border-purple-700 object-cover">
    </div>

    <!-- System message / separator -->
    <div class="text-center text-xs text-orange-700 dark:text-zinc-500 font-semibold italic my-4">
      --- Today --- 
    </div>

    <!-- Pinned message / announcement -->
    <div class="flex items-start p-3 bg-brown-700 dark:bg-brown-900 text-white rounded-lg shadow-md border border-brown-600 dark:border-brown-800">
        <svg class="w-5 h-5 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4H9V9h2v5zm-2-7a1 1 0 112 0 1 1 0 01-2 0z" clip-rule="evenodd"></path></svg>
        <p class="text-sm sm:text-base font-semibold">Reminder: <span class="font-normal">Warm-up drills posted in the 'Resources' channel.</span></p>
    </div>

  </div>

  <!-- Input Area -->
  <div class="flex flex-col sm:flex-row items-center p-4 bg-orange-800 dark:bg-zinc-800 rounded-b-lg shadow-md space-y-3 sm:space-y-0 sm:space-x-3">
    <button class="p-2 rounded-full text-white bg-orange-700 dark:bg-zinc-700 hover:bg-orange-600 dark:hover:bg-zinc-600 focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-zinc-600 w-full sm:w-auto">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L18 14"></path></svg>
      <span class="sr-only">Attach File</span>
    </button>
    <textarea type="text" placeholder="Message #team-chat (Press Alt+Enter for new line)" class="flex-1 p-3 rounded-lg bg-orange-100 dark:bg-zinc-700 text-orange-900 dark:text-zinc-200 placeholder-orange-400 dark:placeholder-zinc-400 border border-orange-300 dark:border-zinc-600 focus:outline-none focus:border-orange-500 dark:focus:border-zinc-500 resize-none h-12 sm:h-auto min-h-[48px] max-h-[150px]"></textarea>
    <button class="p-3 rounded-lg bg-burgundy dark:bg-purple-800 text-white hover:bg-brown-600 dark:hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-burgundy dark:focus:ring-purple-600 w-full sm:w-auto font-semibold">
      <svg class="w-6 h-6 inline-block sm:hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
      <span class="hidden sm:inline-block">Send</span>
    </button>
  </div>

</div>

<style>
  /* Define custom colors for better autumn scheme representation */
  .bg-burgundy {
    background-color: #8B0000;
  }
  .text-burgundy {
    color: #8B0000;
  }
  .border-burgundy {
    border-color: #8B0000;
  }
  .hover\:bg-burgundy-light:hover {
    background-color: #A52A2A;
  }

  /* Dark mode variants for custom colors */
  .dark .bg-burgundy {
    background-color: #6a0000;
  }
  .dark .text-burgundy {
    color: #ae4747;
  }
  .dark .border-burgundy {
    border-color: #6a0000;
  }
  .dark .hover\:bg-burgundy-light:hover {
    background-color: #7c0000;
  }

  /* Add some brown tones */
  .bg-brown-700 {
    background-color: #795548;
  }
  .dark\:bg-brown-900 {
    background-color: #4e342e;
  }
  .border-brown-600 {
    border-color: #6d4c41;
  }
  .dark\:border-brown-800 {
    border-color: #3e2723;
  }
  .hover\:bg-brown-600:hover {
    background-color: #6d4c41;
  }

  /* Adjust max-h for textarea on smaller screens */
  @media (max-width: 639px) {
    textarea {
      max-height: 100px; /* Limit height on mobile */
    }
  }
</style>