チャットウィンドウコンポーネント

<div class="flex h-screen bg-gray-100 dark:bg-gray-900 justify-center items-center p-4 sm:p-6 lg:p-8 font-sans">
  <div class="relative w-full max-w-4xl h-[calc(100vh-4rem)] md:h-[600px] flex flex-col bg-gradient-to-br from-warm-beige-100 to-warm-beige-200 dark:from-gray-800 dark:to-gray-850 rounded-3xl shadow-2xl overflow-hidden transform perspective-1000">

    <!-- 3D Overlay/Bevel Effect -->
    <div class="absolute inset-0 rounded-3xl pointer-events-none" style="
        background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.02) 50%, rgba(0,0,0,0.05) 100%),
                  linear-gradient(225deg, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.05) 100%);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), inset 0 0 0 2px rgba(255,255,255,0.05),
                    inset 5px 5px 10px rgba(0,0,0,0.1), inset -5px -5px 10px rgba(255,255,255,0.05);
        filter: blur(0.5px);
    "></div>

    <!-- Header -->
    <div class="flex items-center justify-between p-4 sm:p-5 lg:p-6 border-b border-warm-beige-300/50 dark:border-gray-700/50 shadow-inner-top z-10" 
         style="box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.05), 0 2px 5px rgba(0,0,0,0.05);">
      <div class="flex items-center space-x-3">
        <img class="w-10 h-10 rounded-full object-cover shadow-md transition-transform duration-300 hover:scale-105" 
             src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <div>
          <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Alice Johnson</h2>
          <p class="text-sm text-gray-600 dark:text-gray-300">Online</p>
        </div>
      </div>
      <div class="flex space-x-3">
        <button class="p-2 rounded-full bg-warm-beige-300/70 dark:bg-gray-700/70 text-gray-700 dark:text-gray-200 hover:bg-warm-beige-400 dark:hover:bg-gray-600 transition-colors duration-200 transform hover:scale-105 shadow-md">
          <svg class="w-5 h-5" 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="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684L10.3 11a1 1 0 00.729.584l4.249.708a1 1 0 01.921.235l4.629 4.629a1 1 0 01.235.921l-.708 4.249a1 1 0 00-.584.729L14 20.7a1 1 0 01-.684.948H5a2 2 0 01-2-2V5z"></path></svg>
        </button>
        <button class="p-2 rounded-full bg-warm-beige-300/70 dark:bg-gray-700/70 text-gray-700 dark:text-gray-200 hover:bg-warm-beige-400 dark:hover:bg-gray-600 transition-colors duration-200 transform hover:scale-105 shadow-md">
          <svg class="w-5 h-5" 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 10a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 1.5V6a2 2 0 002 2h3.5m-3.5 13.5v-4.5a2 2 0 00-2-2H8"></path></svg>
        </button>
      </div>
    </div>

    <!-- Chat Messages Area -->
    <div class="flex-1 p-4 sm:p-6 overflow-y-auto space-y-4 md:space-y-6 scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-thin scrollbar-thumb-gray-400 dark:scrollbar-thumb-gray-600 scrollbar-track-warm-beige-200 dark:scrollbar-track-gray-800">

      <!-- Received Message Example (3D card) -->
      <div class="flex justify-start">
        <div class="relative max-w-[75%] lg:max-w-[60%] p-4 rounded-xl bg-gradient-to-br from-warm-beige-300 to-warm-beige-400 dark:from-gray-700 dark:to-gray-750 text-gray-800 dark:text-gray-50 shadow-lg transform -rotate-x-1 duration-200 hover:rotate-x-0 transition-transform" 
             style="box-shadow: 0 4px 8px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.1);">
          <p>Hi Alice, how are you doing today? I wanted to check in on the latest project updates.</p>
          <span class="block text-xs font-medium text-gray-600 dark:text-gray-300 mt-1 text-right">10:30 AM</span>
          <div class="absolute -left-1.5 top-1/2 -translate-y-1/2 w-3 h-3 bg-warm-beige-400 dark:bg-gray-750 transform rotate-45 rounded-sm shadow-md" style="clip-path: polygon(0 0, 100% 0, 100% 100%);"></div>
        </div>
      </div>

      <!-- Sent Message Example (3D card) -->
      <div class="flex justify-end">
        <div class="relative max-w-[75%] lg:max-w-[60%] p-4 rounded-xl bg-gradient-to-br from-blue-300 to-blue-400 dark:from-blue-600 dark:to-blue-700 text-white shadow-lg transform rotate-x-1 duration-200 hover:rotate-x-0 transition-transform" 
             style="box-shadow: 0 4px 8px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.1);">
          <p>I'm good, thanks! The project's on track. I'll send you a brief update document by the end of the day.</p>
          <span class="block text-xs font-medium text-blue-100 mt-1 text-left">10:35 AM</span>
          <div class="absolute -right-1.5 top-1/2 -translate-y-1/2 w-3 h-3 bg-blue-400 dark:bg-blue-700 transform rotate-45 rounded-sm shadow-md" style="clip-path: polygon(0 0, 100% 0, 100% 100%);"></div>
        </div>
      </div>

      <!-- Another Received Message -->
      <div class="flex justify-start">
        <div class="relative max-w-[75%] lg:max-w-[60%] p-4 rounded-xl bg-gradient-to-br from-warm-beige-300 to-warm-beige-400 dark:from-gray-700 dark:to-gray-750 text-gray-800 dark:text-gray-50 shadow-lg transform -rotate-x-1 duration-200 hover:rotate-x-0 transition-transform" 
             style="box-shadow: 0 4px 8px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.1);">
          <p>Sounds perfect! Looking forward to it.</p>
          <span class="block text-xs font-medium text-gray-600 dark:text-gray-300 mt-1 text-right">10:36 AM</span>
          <div class="absolute -left-1.5 top-1/2 -translate-y-1/2 w-3 h-3 bg-warm-beige-400 dark:bg-gray-750 transform rotate-45 rounded-sm shadow-md" style="clip-path: polygon(0 0, 100% 0, 100% 100%);"></div>
        </div>
      </div>

      <!-- Image Message (Sent) -->
      <div class="flex justify-end">
        <div class="relative max-w-[75%] lg:max-w-[60%] p-2 rounded-xl bg-gradient-to-br from-blue-300 to-blue-400 dark:from-blue-600 dark:to-blue-700 text-white shadow-lg transform rotate-x-1 duration-200 hover:rotate-x-0 transition-transform" 
             style="box-shadow: 0 4px 8px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.1);">
          <img src="https://picsum.photos/400/300" alt="Image attachment" class="rounded-lg mb-2 shadow-md">
          <p class="text-sm">Check out this new dashboard mock-up.</p>
          <span class="block text-xs font-medium text-blue-100 mt-1 text-left">10:40 AM</span>
          <div class="absolute -right-1.5 top-1/2 -translate-y-1/2 w-3 h-3 bg-blue-400 dark:bg-blue-700 transform rotate-45 rounded-sm shadow-md" style="clip-path: polygon(0 0, 100% 0, 100% 100%);"></div>
        </div>
      </div>

    </div>

    <!-- Message Input Area -->
    <div class="p-4 sm:p-5 lg:p-6 border-t border-warm-beige-300/50 dark:border-gray-700/50 flex items-center space-x-3 sm:space-x-4 shadow-inner-bottom z-10" 
         style="box-shadow: inset 0 -1px 0 rgba(255,255,255,0.05), inset 0 1px 0 rgba(0,0,0,0.05), 0 -2px 5px rgba(0,0,0,0.05);">
      <button class="p-2 rounded-full bg-warm-beige-300/70 dark:bg-gray-700/70 text-gray-700 dark:text-gray-200 hover:bg-warm-beige-400 dark:hover:bg-gray-600 transition-colors duration-200 transform hover:scale-105 shadow-md">
        <svg class="w-5 h-5" 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.486L20.5 13"></path></svg>
      </button>
      <input type="text" placeholder="Type a message..." class="flex-1 p-3 rounded-full bg-warm-beige-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 border border-warm-beige-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-warm-beige-400 dark:focus:ring-blue-500 shadow-inner 3d-input-effect" 
             style="box-shadow: inset 2px 2px 5px rgba(0,0,0,0.1), inset -2px -2px 5px rgba(255,255,255,0.1);">
      <button class="p-2 rounded-full bg-gradient-to-br from-blue-400 to-blue-500 dark:from-blue-600 dark:to-blue-700 text-white hover:from-blue-500 hover:to-blue-600 dark:hover:from-blue-700 dark:hover:to-blue-800 transition-colors duration-200 transform hover:scale-105 shadow-lg message-send-button">
        <svg class="w-5 h-5" 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>
      </button>
    </div>

  </div>
</div>

<!-- Custom Styles for 3D effect / Scrollbar / Colors -->
<style>
  /* Warm Neutral Colors */
  .bg-warm-beige-100 { background-color: #f7f3ed; } /* Lightest */
  .bg-warm-beige-200 { background-color: #ede7de; } /* Light */
  .bg-warm-beige-300 { background-color: #dcd3c4; } /* Medium */
  .bg-warm-beige-300\/70 { background-color: rgba(220, 211, 196, 0.7); }
  .bg-warm-beige-400 { background-color: #c9bfb0; } /* Dark */
  .border-warm-beige-300 { border-color: #dcd3c4; }
  .border-warm-beige-300\/50 { border-color: rgba(220, 211, 196, 0.5); }
  .focus\:ring-warm-beige-400:focus { --tw-ring-color: #c9bfb0; }

  /* Dark Mode specific background-colors for gradients */
  .dark\:from-gray-850 { --tw-gradient-from: #1f2937; --tw-gradient-to: rgba(31, 41, 55, 0); }
  .dark\:to-gray-850 { --tw-gradient-to: #1f2937; }
  .dark\:from-gray-750 { --tw-gradient-from: #374151; --tw-gradient-to: rgba(55, 65, 81, 0); }
  .dark\:to-gray-750 { --tw-gradient-to: #374151; }

  /* Custom Scrollbar for Webkit */
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
  }
  .scrollbar-thumb-gray-400 { --tw-scrollbar-thumb: #9ca3af; }
  .scrollbar-track-warm-beige-200 { --tw-scrollbar-track: #ede7de; }
  .dark .scrollbar-thumb-gray-600 { --tw-scrollbar-thumb: #4b5563; }
  .dark .scrollbar-track-gray-800 { --tw-scrollbar-track: #1f2937; }

  /* For Chrome, Safari, etc. */
  .scrollbar-thin::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  .scrollbar-thin::-webkit-scrollbar-track {
    background: var(--tw-scrollbar-track);
    border-radius: var(--tw-scrollbar-track-rounded);
  }
  .scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: var(--tw-scrollbar-thumb);
    border-radius: var(--tw-scrollbar-thumb-rounded);
    border: 2px solid var(--tw-scrollbar-track);
  }
  /* Tailwind utility placeholders */
  .scrollbar-thumb-rounded-full::-webkit-scrollbar-thumb { border-radius: 9999px; }
  .scrollbar-track-rounded-full::-webkit-scrollbar-track { border-radius: 9999px; }

  /* 3D specific effects */
  .perspective-1000 {
    perspective: 1000px;
  }
  .transform-rotate-x-1 {
    transform: rotateX(1deg);
  }
  .transform--rotate-x-1 {
    transform: rotateX(-1deg);
  }
  .shadow-inner-top {
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.05), 0 2px 5px rgba(0,0,0,0.05);
  }
   .shadow-inner-bottom {
      box-shadow: inset 0 -1px 0 rgba(255,255,255,0.05), inset 0 1px 0 rgba(0,0,0,0.05), 0 -2px 5px rgba(0,0,0,0.05);
  }

  /* Hide the triangle using clip-path on the bubble pseudo-elements */
  .message-send-button {
    position: relative;
    overflow: hidden;
  }

  .message-send-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    height: 150%;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.3s ease-out;
    opacity: 0;
  }

  .message-send-button:hover::before {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

</style>