Error Messages Component - Dating/Social - Dark Sepia

<div class="min-h-screen bg-stone-900 dark:bg-stone-950 flex items-center justify-center p-4 sm:p-6 lg:p-8 font-sans transition-colors duration-300">
  <div class="relative w-full max-w-2xl bg-stone-800 dark:bg-stone-900 rounded-3xl shadow-2xl p-6 sm:p-8 lg:p-10 border border-stone-700 dark:border-stone-800 transform transition-all duration-300 hover:shadow-stone-700/50 hover:-translate-y-1">
    <div class="absolute top-0 right-0 -mr-3 -mt-3 w-10 h-10 bg-red-800 rounded-full flex items-center justify-center text-white text-xl font-bold border-2 border-stone-700 dark:border-stone-800 shadow-lg">
      !
    </div>

    <div class="text-center mb-6 sm:mb-8 lg:mb-10">
      <svg class="mx-auto h-16 w-16 text-red-600 dark:text-red-700 mb-4 animate-bounce-slow" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
      </svg>
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-red-500 dark:text-red-600 mb-2 sm:mb-3 leading-tight tracking-tight drop-shadow-lg">
        Connection Lost!
      </h2>
      <p class="text-base sm:text-lg text-stone-300 dark:text-stone-400 leading-relaxed">
        It seems we've encountered an unexpected hiccup. Don't worry, even Cupid has bad days.
      </p>
    </div>

    <div class="space-y-4 sm:space-y-5 mb-6 sm:mb-8 lg:mb-10">
      <div class="bg-stone-700 dark:bg-stone-800 p-4 rounded-xl flex items-start space-x-3 anim-fade-in anim-delay-100">
        <svg class="h-6 w-6 text-yellow-400 dark:text-yellow-500 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        <div>
          <h3 class="text-lg font-semibold text-stone-100 dark:text-stone-200">Account Synchronization Error</h3>
          <p class="text-sm text-stone-400 dark:text-stone-500">Your profile could not be fully loaded. Some features might be temporarily unavailable.</p>
        </div>
      </div>

      <div class="bg-stone-700 dark:bg-stone-800 p-4 rounded-xl flex items-start space-x-3 anim-fade-in anim-delay-200">
        <svg class="h-6 w-6 text-orange-400 dark:text-orange-500 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
        <div>
          <h3 class="text-lg font-semibold text-stone-100 dark:text-stone-200">Failed to Fetch Matches</h3>
          <p class="text-sm text-stone-400 dark:text-stone-500">We're having trouble fetching new matches right now. Please try again in a few moments.</p>
        </div>
      </div>

      <div class="bg-stone-700 dark:bg-stone-800 p-4 rounded-xl flex items-start space-x-3 anim-fade-in anim-delay-300">
        <svg class="h-6 w-6 text-rose-400 dark:text-rose-500 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
        </svg>
        <div>
          <h3 class="text-lg font-semibold text-stone-100 dark:text-stone-200">Messaging Service Offline</h3>
          <p class="text-sm text-stone-400 dark:text-stone-500">Messages may not be sent or received at this time. We're working to restore service.</p>
        </div>
      </div>
    </div>

    <div class="flex flex-col sm:flex-row gap-4 justify-center">
      <button class="w-full sm:w-auto px-6 py-3 bg-red-700 dark:bg-red-800 text-white rounded-full text-lg font-semibold shadow-lg hover:bg-red-600 dark:hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-stone-800 dark:focus:ring-offset-stone-900 transition-all duration-300 transform hover:scale-105 active:scale-95">
        <span class="flex items-center justify-center">
          <svg class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.582m-15.356-2A8.001 8.001 0 0119.418 15m0 0H15" />
          </svg>
          Try Again
        </span>
      </button>
      <button class="w-full sm:w-auto px-6 py-3 bg-stone-700 dark:bg-stone-800 text-stone-200 rounded-full text-lg font-semibold shadow-lg hover:bg-stone-600 dark:hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-offset-2 focus:ring-offset-stone-800 dark:focus:ring-offset-stone-900 transition-all duration-300 transform hover:scale-105 active:scale-95">
        <span class="flex items-center justify-center">
          <svg class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M8.228 9.247a4.75 4.75 0 014.75 4.75v1A.75.75 0 0014 15.75h1.75a.75.75 0 00.75-.75V11a4.75 4.75 0 00-4.75-4.75H9.25a.75.75 0 00-.75.75v1.75a.75.75 0 00.75.75h1A.75.75 0 0012 11h2c-.775 0-1.5-.027-2.25-.084v-.75A.75.75 0 009.75 9h-2c-.775 0-1.5-.027-2.25-.084v-.75A.75.75 0 004 7.75h-.75a.75.75 0 00-.75.75V11a4.75 4.75 0 004.75 4.75h1A.75.75 0 0012 15.75h2c-.775 0-1.5-.027-2.25-.084v-.75A.75.75 0 009.75 14h-2c-.775 0-1.5-.027-2.25-.084v-.75A.75.75 0 004 12.75h-.75a.75.75 0 00-.75.75V17a4.75 4.75 0 004.75 4.75h-1A.75.75 0 008.228 9.247z" />
          </svg>
          Support
        </span>
      </button>
    </div>

    <div class="mt-8 text-center text-sm text-stone-400 dark:text-stone-500">
      <p>Error Code: 500-SRV-2001-ALPHA. If the issue persists, our matchmakers are on it!</p>
    </div>
  </div>
</div>

<style>
  @keyframes bounce-slow {
    0%, 100% { transform: translateY(-5%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
    50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
  }
  .animate-bounce-slow {
    animation: bounce-slow 3s infinite;
  }

  @keyframes fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .anim-fade-in {
    animation: fade-in 0.5s ease-out forwards;
    opacity: 0; /* Ensures element is hidden before animation plays */
  }
  .anim-delay-100 { animation-delay: 0.1s; }
  .anim-delay-200 { animation-delay: 0.2s; }
  .anim-delay-300 { animation-delay: 0.3s; }
</style>