/**
 * Comparison Bubble Styles
 * Side-by-side image comparison with pill-shaped design
 */

/* Hide failed/deleted images - comparison bubbles and options */
.comparison-bubble-message.hidden-error,
.comparison-option.hidden-error,
.generation-item.hidden-error {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Main comparison bubble container */
.message.assistant.comparison-bubble-message {
  margin-bottom: 16px;
}

.message.assistant.thinking.comparison-thinking-message {
  margin-top: 12px;
}

.comparison-content {
  max-width: 700px;
  width: 100%;
}

/* Ensure comparison-content (message-content.comparison-content) maintains appearance when both complete */
/* Prevent any opacity, max-width, padding, or background changes */
.message-content.comparison-content,
.comparison-content {
  max-width: 700px !important;
  width: 100%;
  opacity: 1 !important;
  /* Ensure padding matches standard assistant message-content */
  padding: 12px 16px !important;
  background: #373737 !important;
  border: 1px solid #3c3c3c !important;
}

/* Even more specific selector to override any other rules */
.message.assistant.comparison-bubble-message .message-content.comparison-content,
.message.assistant .message-content.comparison-content {
  max-width: 700px !important;
  width: 100% !important;
  opacity: 1 !important;
  padding: 12px 16px !important;
  background: #373737 !important;
  border: 1px solid #3c3c3c !important;
  border-radius: 16px 16px 16px 4px !important;
}

.comparison-container {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.0);
  border: 0;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 1;
}

/* Thinking phase indicator - OUTSIDE capsule, below it */
.comparison-content > .message-content:has(.comparison-thinking) {
  margin-top: 12px;
  padding: 0;
  background: transparent;
  border: none;
  max-width: 100%;
}

.comparison-thinking {
  padding: 0;
  background: transparent;
  border: none;
}

/* Thinking line styles - matches standard thinking messages */
.comparison-thinking .thinking-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  opacity: 0.5;
  transition: opacity 0.3s ease;
  padding: 0;
  min-height: 0;
}

.comparison-thinking .thinking-line.active {
  opacity: 1;
  color: rgba(255, 255, 255, 0.9);
}

.comparison-thinking .thinking-line.completed {
  opacity: 0.7;
  color: rgba(255, 255, 255, 0.8);
}

.comparison-thinking .thinking-text {
  flex: 1;
  padding: 0;
  margin: 0;
  background-color: transparent;
}

.comparison-thinking .thinking-dots {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.comparison-thinking .thinking-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  animation: thinkingPulseHorizontal 1.4s ease-in-out infinite;
}

/* Images container - side by side */
.comparison-images-container {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

/* Individual option container */
.comparison-option {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 9px; /* Reduced from 12px to 9px (3px closer to image) */
  padding: 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px; /* Perfect concentric round corners */
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
}

.comparison-option:hover {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.comparison-option.selected {
  border-color: rgba(59, 130, 246, 0.8);
  background: rgba(59, 130, 246, 0.15);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2), 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* Label container */
.comparison-label-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Label */
.comparison-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 12px;
}

.comparison-option.selected .comparison-label {
  color: rgba(59, 130, 246, 1);
  background: rgba(59, 130, 246, 0.2);
}

/* HI RES pill - matching prompt pills style with gray tones and glass effect */
.comparison-hires-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.9);
  background: rgba(30, 35, 50, 1) !important; /* Dark grey - matching prompt pills */
  border: 1px solid rgba(148, 163, 184, 0.5) !important; /* Light grey outline */
  box-shadow: 0 1px 4px rgba(8, 12, 24, 0.2) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.3s ease-in-out;
  opacity: 1;
  min-height: 22px;
  white-space: nowrap;
}

.comparison-hires-pill:hover {
  background: rgba(40, 45, 60, 1) !important;
  border-color: rgba(148, 163, 184, 0.7) !important;
  box-shadow: 0 2px 6px rgba(8, 12, 24, 0.3) !important;
  transform: translateY(-1px);
}

.comparison-option.selected .comparison-hires-pill {
  background: rgba(59, 130, 246, 0.25) !important;
  border-color: rgba(59, 130, 246, 0.6) !important;
  color: rgba(255, 255, 255, 1);
}

/* Ensure image wrapper doesn't block button clicks */
.comparison-image-wrapper {
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 250px; /* Fixed minimum height to prevent resizing */
  border-radius: 16px;
  overflow: hidden;
  background: transparent;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  pointer-events: none; /* Allow clicks to pass through to button */
}

/* Comparison placeholder */
.comparison-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  transition: opacity 0.5s ease-out;
  z-index: 1;
}

.comparison-placeholder.fading-out {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Ensure placeholder is hidden when image is visible */
.comparison-image-wrapper:has(.comparison-image.fading-in) .comparison-placeholder {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.comparison-placeholder .image-generation-placeholder {
  /* CRITICAL FIX: Force 300x300 size for plasma - override any other CSS */
  width: 300px !important;
  height: 300px !important;
  min-width: 300px !important;
  min-height: 300px !important;
  max-width: 300px !important;
  max-height: 300px !important;
  margin: 0 auto;
}

/* CRITICAL FIX: Mobile-specific override to match normal generation image sizing */
/* Use max-width instead of fixed width to allow scaling on smaller screens */
@media screen and (max-width: 768px) {
  .comparison-image-wrapper {
    width: 100% !important;
    max-width: calc(100vw - 40px) !important;    /* Fixed width for mobile - not too wide */
    aspect-ratio: 1 / 1 !important; /* Maintain square aspect ratio */
    height: auto !important; /* Let aspect-ratio control height */
    min-height: 200px !important; /* Minimum height for very small screens */
  }
  
  .comparison-placeholder {
    width: 100% !important;
    max-width: 320px !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    min-height: 200px !important;
  }
  
  .comparison-placeholder .image-generation-placeholder {
    width: 100% !important;
    max-width: 320px !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    min-height: 200px !important;
    min-width: 0 !important; /* Allow scaling down */
  }
  
  /* Ensure progress bar scales with container */
  .comparison-placeholder .plasma-progress-capsule {
    width: calc(100% - 32px) !important;
    max-width: calc(320px - 32px) !important; /* 320px max - 32px padding */
  }
}

.comparison-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  display: block !important;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease-in;
  z-index: 2;
  pointer-events: auto; /* Allow clicks on image to open viewer */
  visibility: visible !important;
}

.comparison-image.fading-in {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Ensure comparison container and images maintain appearance when both complete */
/* Prevent any unwanted opacity, transform, size, or background changes when both images are ready */
/* Keep base styles constant - only allow hover and selected states to modify appearance */
.comparison-container {
  /* Ensure padding, gap, and background remain constant */
  padding: 0;
  gap: 0;
  background: rgba(0, 0, 0, 0.0);
  /* Prevent opacity changes */
  opacity: 1;
}

.comparison-images-container {
  /* Ensure gap remains constant */
  gap: 16px;
  /* Prevent opacity changes */
  opacity: 1;
}

.comparison-option:not(:hover):not(.selected) {
  /* Prevent opacity and background changes when not hovered or selected */
  opacity: 1;
  background: rgba(0, 0, 0, 0.3);
  /* Ensure padding and gap remain constant */
  padding: 12px;
  gap: 9px; /* Reduced from 12px to 9px (3px closer to image) */
}

.comparison-image-wrapper {
  /* Prevent opacity and background changes - keep transparent with no padding */
  opacity: 1;
  background: transparent;
  padding: 0;
  margin: 0;
  /* CRITICAL FIX: Ensure wrapper is exactly 300x300 for plasma placeholder (desktop) */
  width: 300px;
  height: 300px;
  position: relative;
  margin: 0 auto;
}

.comparison-image {
  /* Prevent opacity changes */
  opacity: 1;
}

/* Selection pill button */
.comparison-select-button {
  width: 100%;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.03); /* Transparent background */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px; /* Perfect concentric round corners */
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  outline: none;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 30 !important; /* Higher than image to ensure clicks work */
  pointer-events: auto !important; /* Ensure button is clickable */
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation; /* Better touch handling */
}

.comparison-select-button > span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  z-index: 1; /* Ensure content is above shine effect */
  pointer-events: none; /* Allow clicks to pass through to button */
}

.comparison-select-button.disabled,
.comparison-select-button:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.comparison-select-button.disabled:hover,
.comparison-select-button:disabled:hover {
  transform: none !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.comparison-select-button:not(.disabled):not(:disabled):hover {
  background: rgba(255, 255, 255, 0.05); /* Transparent and glassy */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: rgba(200, 200, 200, 0.4); /* Light grey outline */
  transform: translateY(-1px);
  position: relative;
  overflow: hidden;
}

/* Shiny effect on hover */
.comparison-select-button:hover::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  animation: shine 1.5s ease-in-out infinite;
}

@keyframes shine {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

.comparison-select-button.selected {
  background: rgba(59, 130, 246, 0.9) !important;
  border-color: rgba(59, 130, 246, 1) !important;
  color: white !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4) !important;
}

.comparison-option.selected {
  border-color: rgba(59, 130, 246, 0.8) !important;
  background: rgba(59, 130, 246, 0.15) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2), 0 4px 16px rgba(0, 0, 0, 0.2) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .comparison-images-container {
    flex-direction: column;
  }

  .comparison-container {
    padding: 0;
  }

  .comparison-image-wrapper {
    min-height: 200px;
  }
  
  /* CRITICAL: Override base comparison-content max-width on mobile from the start */
  .comparison-content,
  .message-content.comparison-content,
  .message.assistant.comparison-bubble-message .message-content.comparison-content,
  .message.assistant .message-content.comparison-content {
    max-width: 320px !important; /* Fixed width for mobile - not too wide */
    width: 100% !important;
  }
  
  /* Limit comparison bubble width on mobile BEFORE selection - 320px max */
  /* Use very specific selectors to override all base rules */
  .message.assistant.comparison-bubble-message:not(:has(.comparison-option.selected)) .comparison-content,
  .message.assistant.comparison-bubble-message:not(:has(.comparison-option.selected)) .message-content.comparison-content,
  .message.assistant.comparison-bubble-message:not(:has(.comparison-option.selected)) .message-content,
  .message.assistant.comparison-bubble-message:not(:has(.comparison-option.selected)) .comparison-content,
  .message.assistant.comparison-bubble-message:not(:has(.comparison-option.selected)) .message-content.comparison-content {
    max-width: 320px !important; /* Fixed width - not too wide on mobile */
    width: 100% !important;
  }
  
  /* Also limit the message container itself BEFORE selection */
  .message.assistant.comparison-bubble-message:not(:has(.comparison-option.selected)) {
    max-width: 320px !important; /* Fixed width - not too wide on mobile */
    width: 100% !important;
  }
  
  /* Override any general mobile rules BEFORE selection */
  .message.assistant.comparison-bubble-message:not(:has(.comparison-option.selected)) .message-content {
    max-width: 320px !important; /* Fixed width - not too wide on mobile */
    width: 100% !important;
  }
  
  /* AFTER selection: Allow expansion based on content size (but still limit to reasonable size) */
  .message.assistant.comparison-bubble-message:has(.comparison-option.selected) .comparison-content,
  .message.assistant.comparison-bubble-message:has(.comparison-option.selected) .message-content.comparison-content,
  .message.assistant.comparison-bubble-message:has(.comparison-option.selected) .message-content {
    max-width: calc(100vw - 40px) !important; /* Full width minus padding, adapts to screen size */
    width: 100% !important;
  }
  
  .message.assistant.comparison-bubble-message:has(.comparison-option.selected) {
    max-width: calc(100vw - 40px) !important;
  }
}

/* Ensure plasma placeholders work correctly */
.comparison-placeholder.plasma-placeholder {
  background: transparent;
}

.comparison-placeholder .plasma-placeholder {
  background: transparent;
}

/* Smooth fade animations */
@keyframes comparison-image-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes comparison-placeholder-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Action buttons for comparison bubbles */
.comparison-bubble-message .message-actions {
  display: flex !important; /* Always show when buttons exist */
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  margin-left: 8px;
  margin-top: 0;
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Mobile: Remove margin and align buttons to left */
@media (max-width: 768px) {
  .comparison-bubble-message .message-actions {
    margin-left: 5px !important; /* Push buttons 15px left (away from image) on phone */
    margin-right: 24px !important; /* 24px margin to the right (extra spacing from images on mobile) */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  
  .comparison-bubble-message .message-action-btn {
    margin-left: 0 !important; /* Remove any left margin from buttons */
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

.comparison-bubble-message .message-actions.visible {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  animation: fadeInActions 0.3s ease-out;
}

@keyframes fadeInActions {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Mobile animation - push icons 15px left when appearing on phone in comparison bubble */
@media (max-width: 768px) {
  .comparison-bubble-message .message-actions.visible {
    animation: fadeInActionsMobile 0.3s ease-out;
  }
  
  @keyframes fadeInActionsMobile {
    from {
      opacity: 0;
      transform: translateX(-25px); /* Start 15px further left (-10px - 15px = -25px) */
    }
    to {
      opacity: 1;
      transform: translateX(-15px); /* End 15px to the left */
    }
  }
}

/* Ensure action buttons are visible when option is selected */
.comparison-bubble-message:has(.comparison-option.selected) .message-actions {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}