/* ================================================================= */
/* == FORMAS.AI PLACEHOLDER STYLES                                == */
/* == Consolidated placeholder styles for chat interface          == */
/* ================================================================= */

/* ================= CSS VARIABLES ================= */
:root {
  --text-placeholder: #6a6a6a;
}

/* ================= GENERATION PLACEHOLDERS ================= */

/* 
 * Generation Placeholders - Match received image sizing system
 * 
 * To set dynamic aspect ratios, use CSS custom property:
 * style="--placeholder-aspect-ratio: 16/9" for landscape
 * style="--placeholder-aspect-ratio: 9/16" for portrait
 * style="--placeholder-aspect-ratio: 1/1" for square (default)
 * 
 * Width matches received images exactly:
 * - Desktop (1024px+): 800px max-width
 * - Default: 600px max-width  
 * - Mobile (768px-): 400px max-width
 */

/* Error message styling for failed placeholders */
.error-message {
  display: none;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #ff6b6b;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  padding: 20px;
  background: rgba(255, 107, 107, 0.1);
  border: 1px solid rgba(255, 107, 107, 0.3);
  border-radius: 8px;
  margin: 10px;
}

.error-message.visible {
  display: flex;
}
.chat-img-wrapper.generation-placeholder {
  /* Match assistant image dimensions exactly */
  width: 600px; /* SAME MAX WIDTH as received images */
  max-width: 600px;
  height: auto; /* Allow dynamic height based on aspect ratio */
  min-height: 300px; /* Minimum height for square fallback */
  background: #373737;
  overflow: hidden;
  border-radius: 8px; /* Match received image border radius */
  display: block;
  position: relative;
}

/* Image placeholders can have dynamic aspect ratios */
.chat-img-wrapper.generation-placeholder.image-placeholder { 
  aspect-ratio: var(--placeholder-aspect-ratio, 1 / 1); /* Dynamic or fallback to square */
}

/* 3D model placeholders stay square */
.chat-img-wrapper.generation-placeholder.model-placeholder { 
  aspect-ratio: 1 / 1; 
  padding: 5px; 
  box-sizing: border-box; 
}

/* Video placeholders can have dynamic aspect ratios */
.chat-img-wrapper.generation-placeholder.video-placeholder { 
  aspect-ratio: var(--placeholder-aspect-ratio, 16 / 9); /* Dynamic or fallback to 16:9 */
}

/* Desktop adjustments - match large screen received images */
@media (min-width: 1024px) {
  .chat-img-wrapper.generation-placeholder { 
    width: 800px; 
    max-width: 800px;
    min-height: 400px;
  }
}

/* Mobile adjustments - match mobile received images */
@media (max-width: 768px) {
  .chat-img-wrapper.generation-placeholder { 
    width: 400px; 
    max-width: 400px;
    min-height: 200px;
    border-radius: 6px;
  }
}

/* Force transparent backgrounds for GPU plasma placeholders (all types) */
.chat-img-wrapper.generation-placeholder.image-placeholder,
.chat-img-wrapper.generation-placeholder.video-placeholder,
.chat-img-wrapper.generation-placeholder.model-placeholder,
.chat-img-wrapper.generation-placeholder.pointcloud-placeholder {
  background: transparent !important;
}

.image-generation-placeholder.img-placeholder,
.image-generation-placeholder.video-placeholder,
.image-generation-placeholder.model-placeholder,
.image-generation-placeholder.pointcloud-placeholder {
  background: transparent !important;
}

/* Minimal override: fix all generation placeholder size and hide spinner */
.chat-img-wrapper.generation-placeholder.image-placeholder,
.chat-img-wrapper.generation-placeholder.video-placeholder,
.chat-img-wrapper.generation-placeholder.pointcloud-placeholder,
.chat-img-wrapper.plasma-placeholder {
  width: 300px !important;
  height: 300px !important;
  min-width: 300px !important;
  min-height: 300px !important;
  max-width: 300px !important;
  max-height: 300px !important;
  border-radius: 20px !important;
  overflow: hidden !important;
}

/* Special sizing for 3D model placeholders - 70% of container */
.chat-img-wrapper.generation-placeholder.model-placeholder {
  width: 70% !important;
  height: 70% !important;
  min-width: 210px !important;
  min-height: 210px !important;
  max-width: 420px !important;
  max-height: 420px !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  aspect-ratio: 1 / 1;
}

.image-generation-placeholder.img-placeholder .spinner-ring,
.image-generation-placeholder.video-placeholder .spinner-ring,
.image-generation-placeholder.pointcloud-placeholder .spinner-ring,
.plasma-placeholder .spinner-ring {
  display: none !important;
}

/* Model placeholders keep their spinner visible */

/* Clean bubble style for plasma placeholders */
.message.assistant .message-content:has(.plasma-placeholder) {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  display: inline-block !important;
  max-width: none !important;
  width: auto !important;
  overflow: visible !important;
}

/* Ensure plasma containers are transparent */
.plasma-placeholder,
.plasma-placeholder.image-generation-placeholder {
  background: transparent !important;
  border-radius: 20px !important;
  overflow: hidden !important;
}

/* Blurred glow background image under plasma */
.plasma-placeholder .plasma-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(14px) saturate(1.4) brightness(1.1) drop-shadow(0 0 22px rgba(255,255,255,0.2));
  transform: scale(1.05);
  pointer-events: none;
  z-index: 0;
  opacity: 0.2;
}


/* Spinner + percent overlay for plasma placeholders */
.plasma-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 5;
}
.plasma-spinner {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  opacity: 0.9;
  background: conic-gradient(rgba(255,255,255,0.9) 0turn, rgba(255,255,255,0.9) 0.75turn, rgba(255,255,255,0) 0.75turn 1turn);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 8px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 8px));
  animation: spin360 1s linear infinite;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35));
}
.plasma-percent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 700;
  font-size: 12px;
  color: #fff;
  letter-spacing: 0.5px;
}

/* Hide percentage for video placeholders */
.video-placeholder .plasma-percent,
.image-generation-placeholder:has(.video-placeholder) .plasma-percent {
  display: none !important;
}
@keyframes spin360 { to { transform: rotate(360deg); } }

/* ================= IMAGE PLACEHOLDERS ================= */

/* Basic image placeholders */
.chat-img-placeholder {
  position: absolute;
  inset: 0;
  background: var(--secondary-bg);
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 0;
  border-radius: inherit;
}

.message.assistant .chat-img-placeholder { 
  background: #373737; 
}

.chat-img-wrapper.lazy-load.loaded .chat-img-placeholder { 
  opacity: 0; 
}

.chat-img-placeholder.missing { 
  opacity: 1; 
}

/* Error state placeholders - Amazing plasma when no image */
.chat-img-wrapper.error .chat-img-placeholder {
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.75rem;
  background: 
    radial-gradient(ellipse at 20% 30%, rgba(255, 0, 150, 0.6) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(0, 255, 200, 0.5) 0%, transparent 50%),
    radial-gradient(ellipse at 40% 80%, rgba(150, 0, 255, 0.4) 0%, transparent 45%),
    radial-gradient(ellipse at 60% 20%, rgba(255, 150, 0, 0.35) 0%, transparent 45%),
    linear-gradient(135deg, #0a0a0a 0%, #1a0a1a 50%, #0a1a1a 100%);
  position: relative;
  overflow: hidden;
  animation: no-image-plasma-base 5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.chat-img-wrapper.error .chat-img-placeholder::before {
  content: '';
  position: absolute;
  top: -40%;
  left: -40%;
  width: 180%;
  height: 180%;
  background: 
    radial-gradient(ellipse at 30% 40%, rgba(255, 0, 150, 0.9) 0%, transparent 30%),
    radial-gradient(ellipse at 70% 60%, rgba(0, 255, 200, 0.8) 0%, transparent 30%),
    radial-gradient(ellipse at 50% 20%, rgba(150, 0, 255, 0.7) 0%, transparent 25%),
    radial-gradient(ellipse at 50% 80%, rgba(255, 150, 0, 0.6) 0%, transparent 25%);
  filter: blur(120px) brightness(2.8) saturate(600%) contrast(2.2);
  animation: no-image-intense-plasma 8s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
  pointer-events: none;
  z-index: 1;
  opacity: 0.3;
}

.chat-img-wrapper.error .chat-img-placeholder::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: 
    radial-gradient(ellipse at 25% 75%, rgba(255, 255, 255, 0.5) 0%, transparent 20%),
    radial-gradient(ellipse at 75% 25%, rgba(255, 0, 150, 0.6) 0%, transparent 25%),
    radial-gradient(ellipse at 50% 50%, rgba(0, 255, 200, 0.4) 0%, transparent 30%);
  filter: blur(180px) brightness(3.5) saturate(800%) hue-rotate(0deg);
  animation: no-image-ultra-plasma 12s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
  pointer-events: none;
  z-index: 0;
  opacity: 0.2;
}

/* ================= ENHANCED IMAGE GENERATION PLACEHOLDERS ================= */

/* Enhanced placeholder for image generation */
.image-generation-placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  background: transparent; /* Make background transparent to show plasma */
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Model placeholders now use transparent background like video placeholders */
.image-generation-placeholder.model-placeholder {
  background: transparent !important;
}

/* Large screen adjustments for image generation placeholders */
@media (min-width: 1024px) {
  .image-generation-placeholder {
    border-radius: 8px; /* Keep consistent with received images */
  }
}



.image-generation-placeholder .spinner-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  pointer-events: none;
  z-index: 0;
}

/* 3D model placeholders use the standard white 270-degree spinner - CONSISTENT WITH IMAGE/VIDEO */
.image-generation-placeholder.model-placeholder .spinner-ring {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  opacity: 0.9;
  background: conic-gradient(rgba(255,255,255,0.9) 0turn, rgba(255,255,255,0.9) 0.75turn, rgba(255,255,255,0) 0.75turn 1turn);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  animation: spin360 1s linear infinite;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35));
}

.image-generation-placeholder .progress-text {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  z-index: 10;
  line-height: 1.3;
}

/* Enhanced progress text for 3D model placeholders - CONSISTENT WITH IMAGE/VIDEO */
.image-generation-placeholder.model-placeholder .progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 50px); /* Position below the spinner */
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  text-align: center;
  z-index: 15; /* Above spinner */
}

/* ================= 3D MODEL PLACEHOLDERS ================= */

/* Special styling for 3D model placeholders - Match received image sizing */
.image-generation-placeholder.model-placeholder {
  width: 100%; /* Fill container which is sized by .chat-img-wrapper.generation-placeholder */
  min-height: 307px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin: 0; /* No margin needed, container handles sizing */
  aspect-ratio: 1 / 1; /* 3D models stay square */
}

/* Large screen adjustments for 3D model placeholders */
@media (min-width: 1024px) {
  .image-generation-placeholder.model-placeholder {
    min-height: 400px; /* Match container min-height */
  }
}

/* Mobile adjustments for 3D model placeholders */
@media (max-width: 768px) {
  .image-generation-placeholder.model-placeholder {
    min-height: 200px; /* Match container min-height */
  }
}

.image-generation-placeholder.model-placeholder .placeholder-preview {
  border-radius: 2px; /* Slightly larger radius for 32x32 image */
  /* Force image to render at 32x32 pixels for 3D models */
  width: 32px;
  height: 32px;
  /* Scale up to fill container */
  transform: translate(-50%, -50%) scale(12.5); /* 32px * 12.5 = 400px for typical container */
  /* Force pixelated rendering */
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  /* Apply 64px blur */
  filter: blur(64px);
  opacity: 1;
  /* Simple heartbeat */
  animation: simple-heartbeat 3s ease-in-out infinite;
}

/* Responsive scaling for 3D model placeholders */
@media (min-width: 1024px) {
  .image-generation-placeholder.model-placeholder .placeholder-preview {
    transform: translate(-50%, -50%) scale(18.75); /* 32px * 18.75 = 600px for desktop */
  }
}

@media (max-width: 768px) {
  .image-generation-placeholder.model-placeholder .placeholder-preview {
    transform: translate(-50%, -50%) scale(9.375); /* 32px * 9.375 = 300px for mobile */
  }
}



/* ================= CIRCULAR PROGRESS RING FOR 3D MODELS ================= */
/* DEPRECATED: Model placeholders now use plasma effect like video placeholders */

/* Legacy circular progress ring styles - kept for compatibility but not used */
.model-progress-ring {
  display: none !important; /* Hidden since we now use plasma for all placeholders */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  z-index: 10;
}

.model-progress-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.model-progress-ring .progress-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 2;
}

.model-progress-ring .progress-circle {
  fill: none;
  stroke: #ffffff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 226.19; /* 2 * π * 36 (radius) */
  stroke-dashoffset: 226.19;
  transition: stroke-dashoffset 0.3s ease;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.3));
  animation: progress-ring-glow 2s ease-in-out infinite alternate;
}

@keyframes progress-ring-glow {
  0% {
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.3));
  }
  100% {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
  }
}

/* ================= PLACEHOLDER TEXT ================= */

.placeholder-text {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.2;
  color: var(--text-secondary);
  text-align: left;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Enhanced styling for 3D model placeholder text */
.message.assistant .placeholder-message .model-placeholder + .placeholder-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.message.assistant.placeholder-message .placeholder-text {
  width: 100%;
  padding: 8px 10px 0;
  box-sizing: border-box;
  text-align: center;
  line-height: 1.4;
}

/* ================= PLACEHOLDER PREVIEW IMAGES ================= */

/* Low-res 32x32 pixel effect for placeholder images */
.placeholder-preview.ultra-lowres {
  /* Force image to render at 32x32 pixels */
  width: 32px !important;
  height: 32px !important;
  /* Scale up to show pixelated effect */
  transform: translate(-50%, -50%) scale(18.75) !important; /* 32px * 18.75 = 600px */
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  object-fit: cover;
  /* Apply 64px blur */
  filter: blur(64px) !important;
  opacity: 1;
  /* Simple heartbeat */
  animation: simple-heartbeat 3s ease-in-out infinite;
}



/* Only apply blurred preview styles to model placeholders */
.image-generation-placeholder.model-placeholder .placeholder-preview {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Force image to render at 32x32 pixels */
  width: 32px;
  height: 32px;
  /* Scale up to fill container */
  transform: translate(-50%, -50%) scale(12.5); /* 32px * 12.5 = 400px for typical container */
  object-fit: cover;
  /* Force pixelated rendering */
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  /* Apply 64px blur */
  filter: blur(64px);
  pointer-events: none;
  opacity: 1;
  /* Simple heartbeat */
  animation: simple-heartbeat 3s ease-in-out infinite;
}

/* Responsive scaling for model placeholders only */
@media (min-width: 1024px) {
  .image-generation-placeholder.model-placeholder .placeholder-preview {
    transform: translate(-50%, -50%) scale(18.75); /* 32px * 18.75 = 600px for desktop */
  }
}

@media (max-width: 768px) {
  .image-generation-placeholder.model-placeholder .placeholder-preview {
    transform: translate(-50%, -50%) scale(9.375); /* 32px * 9.375 = 300px for mobile */
  }
}

/* ================= SKELETON PLACEHOLDERS ================= */

.skeleton-placeholder {
  background: linear-gradient(90deg, 
    rgba(255, 255, 255, 0.1) 25%, 
    rgba(255, 255, 255, 0.2) 50%, 
    rgba(255, 255, 255, 0.1) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

.skeleton-placeholder.fade-out {
  animation: skeleton-fade-out 0.3s ease-out forwards;
}

@keyframes skeleton-loading {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes skeleton-fade-out {
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

/* ================= INPUT PLACEHOLDERS ================= */

/* Message input placeholders */
.message-input::placeholder {
  color: var(--text-placeholder);
}

.message-input-container.context-mode-active .message-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
}

/* Search input placeholders */
.generations-search::placeholder { 
  color: var(--text-muted);
}

/* Form input placeholders */
.form-group input::placeholder {
  color: var(--text-placeholder);
  opacity: 0.7;
}

/* ================= ANIMATIONS ================= */

/* Simple, lightweight heartbeat animation */
@keyframes simple-heartbeat {
  0%, 100% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
}







/* Amazing plasma animations for no-image state */
@keyframes no-image-plasma-base {
  0% {
    background: 
      radial-gradient(ellipse at 20% 30%, rgba(255, 0, 150, 0.6) 0%, transparent 50%),
      radial-gradient(ellipse at 80% 70%, rgba(0, 255, 200, 0.5) 0%, transparent 50%),
      radial-gradient(ellipse at 40% 80%, rgba(150, 0, 255, 0.4) 0%, transparent 45%),
      radial-gradient(ellipse at 60% 20%, rgba(255, 150, 0, 0.35) 0%, transparent 45%),
      linear-gradient(135deg, #0a0a0a 0%, #1a0a1a 50%, #0a1a1a 100%);
    filter: brightness(1.2) saturate(200%) contrast(1.4);
  }
  25% {
    background: 
      radial-gradient(ellipse at 80% 20%, rgba(0, 255, 200, 0.65) 0%, transparent 50%),
      radial-gradient(ellipse at 20% 80%, rgba(150, 0, 255, 0.55) 0%, transparent 50%),
      radial-gradient(ellipse at 70% 30%, rgba(255, 150, 0, 0.45) 0%, transparent 45%),
      radial-gradient(ellipse at 30% 70%, rgba(255, 0, 150, 0.4) 0%, transparent 45%),
      linear-gradient(135deg, #1a0a1a 0%, #0a1a1a 50%, #1a1a0a 100%);
    filter: brightness(1.6) saturate(300%) contrast(1.8);
  }
  50% {
    background: 
      radial-gradient(ellipse at 30% 70%, rgba(150, 0, 255, 0.7) 0%, transparent 50%),
      radial-gradient(ellipse at 70% 30%, rgba(255, 150, 0, 0.6) 0%, transparent 50%),
      radial-gradient(ellipse at 20% 20%, rgba(255, 0, 150, 0.5) 0%, transparent 45%),
      radial-gradient(ellipse at 80% 80%, rgba(0, 255, 200, 0.45) 0%, transparent 45%),
      linear-gradient(135deg, #0a1a1a 0%, #1a1a0a 50%, #1a0a1a 100%);
    filter: brightness(2) saturate(400%) contrast(2.2);
  }
  75% {
    background: 
      radial-gradient(ellipse at 70% 80%, rgba(255, 150, 0, 0.65) 0%, transparent 50%),
      radial-gradient(ellipse at 30% 20%, rgba(255, 0, 150, 0.55) 0%, transparent 50%),
      radial-gradient(ellipse at 80% 40%, rgba(0, 255, 200, 0.45) 0%, transparent 45%),
      radial-gradient(ellipse at 20% 60%, rgba(150, 0, 255, 0.4) 0%, transparent 45%),
      linear-gradient(135deg, #1a1a0a 0%, #1a0a1a 50%, #0a0a0a 100%);
    filter: brightness(1.6) saturate(300%) contrast(1.8);
  }
  100% {
    background: 
      radial-gradient(ellipse at 20% 30%, rgba(255, 0, 150, 0.6) 0%, transparent 50%),
      radial-gradient(ellipse at 80% 70%, rgba(0, 255, 200, 0.5) 0%, transparent 50%),
      radial-gradient(ellipse at 40% 80%, rgba(150, 0, 255, 0.4) 0%, transparent 45%),
      radial-gradient(ellipse at 60% 20%, rgba(255, 150, 0, 0.35) 0%, transparent 45%),
      linear-gradient(135deg, #0a0a0a 0%, #1a0a1a 50%, #0a1a1a 100%);
    filter: brightness(1.2) saturate(200%) contrast(1.4);
  }
}

@keyframes no-image-intense-plasma {
  0% {
    filter: blur(120px) brightness(2.8) saturate(600%) contrast(2.2) hue-rotate(0deg);
    transform: scale(0.8) rotate(0deg);
    opacity: 0.8;
  }
  16% {
    filter: blur(180px) brightness(3.6) saturate(800%) contrast(2.8) hue-rotate(60deg);
    transform: scale(1.3) rotate(60deg);
    opacity: 0.9;
  }
  32% {
    filter: blur(240px) brightness(4.4) saturate(1000%) contrast(3.4) hue-rotate(120deg);
    transform: scale(1.6) rotate(120deg);
    opacity: 0.85;
  }
  48% {
    filter: blur(200px) brightness(3.8) saturate(850%) contrast(3) hue-rotate(180deg);
    transform: scale(1.4) rotate(180deg);
    opacity: 0.9;
  }
  64% {
    filter: blur(260px) brightness(4.6) saturate(1100%) contrast(3.6) hue-rotate(240deg);
    transform: scale(1.7) rotate(240deg);
    opacity: 0.8;
  }
  80% {
    filter: blur(160px) brightness(3.2) saturate(700%) contrast(2.6) hue-rotate(300deg);
    transform: scale(1.2) rotate(300deg);
    opacity: 0.9;
  }
  100% {
    filter: blur(120px) brightness(2.8) saturate(600%) contrast(2.2) hue-rotate(360deg);
    transform: scale(0.8) rotate(360deg);
    opacity: 0.8;
  }
}

@keyframes no-image-ultra-plasma {
  0% {
    filter: blur(180px) brightness(3.5) saturate(800%) hue-rotate(0deg);
    transform: scale(0.6) rotate(0deg);
    opacity: 0.6;
  }
  25% {
    filter: blur(280px) brightness(5) saturate(1200%) hue-rotate(90deg);
    transform: scale(1.8) rotate(-90deg);
    opacity: 0.75;
  }
  50% {
    filter: blur(360px) brightness(6.5) saturate(1500%) hue-rotate(180deg);
    transform: scale(2.2) rotate(-180deg);
    opacity: 0.7;
  }
  75% {
    filter: blur(320px) brightness(5.8) saturate(1300%) hue-rotate(270deg);
    transform: scale(2) rotate(-270deg);
    opacity: 0.75;
  }
  100% {
    filter: blur(180px) brightness(3.5) saturate(800%) hue-rotate(360deg);
    transform: scale(0.6) rotate(-360deg);
    opacity: 0.6;
  }
}


 
 

/* ================= LEGACY COMPATIBILITY ================= */

/* Legacy placeholder styles maintained for compatibility */
.message.assistant .image-generation-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  /* No max-width here - container handles sizing */
}

/* Large screen adjustments handled by container */

/* ================= MOBILE SIZING ADJUSTMENTS ================= */

/* Mobile placeholder sizing patches */
@media (max-width: 768px) {
  .message.assistant:has(.image-generation-placeholder),
  .message.assistant.placeholder-message {
    max-width: calc(100vw - 40px);
  }
  
  /* Ensure mobile placeholders don't exceed container */
  .message.assistant .image-generation-placeholder,
  .message.assistant .chat-img-wrapper.generation-placeholder {
    max-width: 100%;
  }
}

/* This rule uses the .placeholder-message class to align placeholder width */
.message.assistant.placeholder-message {
  width: auto;
  max-width: 600px;
}

@media (min-width: 1024px) {
  .message.assistant.placeholder-message {
    max-width: 800px;
  }
}