/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Line clamp utility for truncating text */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Text wrapping utilities for prompts */
.prompt-text-wrap {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  word-break: break-word;
  /* Target approximately 18 characters per line */
  max-width: 45ch;
  line-height: 1.4;
}

/* For prompt containers, allow flexible width but encourage wrapping */
.prompt-container {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  /* Use break-word only as fallback for very long words */
  word-break: normal;
}

/* Expandable prompt states */
.prompt-text-collapsed {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

.prompt-text-expanded {
  display: block;
  cursor: pointer;
}

/* Expand/collapse indicator */
.prompt-expand-indicator {
  font-size: 0.75rem;
  color: rgb(156, 163, 175);
  font-weight: 500;
  cursor: pointer;
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  transition: all 0.2s;
  background: rgba(55, 65, 81, 0.8);
  float: right;
  margin-bottom: 0.25rem;
  margin-top: 0.25rem;
}

.prompt-expand-indicator:hover {
  color: rgb(209, 213, 219);
  background: rgba(75, 85, 99, 0.9);
}

/* Container for prompt text and expansion */
.prompt-text-container {
  position: relative;
}

/* Expansion controls container */
.prompt-expansion-controls {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

/* Vote button animations */
@keyframes voteSuccess {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

@keyframes voteRemove {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.8); opacity: 0.5; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes voteSwitch {
  0% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(0.8) rotate(-10deg); }
  75% { transform: scale(1.1) rotate(10deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes karmaUpdate {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* Animation classes */
.vote-animate-success {
  animation: voteSuccess 0.4s ease-in-out;
}

.vote-animate-remove {
  animation: voteRemove 0.4s ease-in-out;
}

.vote-animate-switch {
  animation: voteSwitch 0.5s ease-in-out;
}

.karma-animate {
  animation: karmaUpdate 0.3s ease-in-out;
}

@import url("https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css");

/* Onboarding Styles */
.onboarding-highlight {
  position: relative;
  z-index: 250 !important;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.5), 0 0 0 8px rgba(59, 130, 246, 0.2);
  border-radius: 8px;
  transition: all 0.3s ease-in-out;
}

.onboarding-highlight::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border: 2px solid #3b82f6;
  border-radius: 12px;
  animation: onboarding-pulse 2s infinite;
  pointer-events: none;
  z-index: 251;
}

@keyframes onboarding-pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Streaming Animation Styles */
.streaming-cursor {
  animation: streaming-blink 1s infinite;
  color: #60a5fa;
  font-weight: bold;
}

@keyframes streaming-blink {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0;
  }
}

/* Ensure onboarding tooltip is always visible */
[data-onboarding-target="tooltip"] {
  pointer-events: auto;
}

/* Onboarding blur sections */
[data-onboarding-target="blurTop"],
[data-onboarding-target="blurRight"],
[data-onboarding-target="blurBottom"],
[data-onboarding-target="blurLeft"] {
  pointer-events: none;
  transition: all 0.3s ease-in-out;
}

/* Smooth transitions for onboarding elements */
[data-onboarding-target="overlay"] {
  transition: opacity 0.3s ease-in-out;
}

[data-onboarding-target="tooltip"] {
  transition: all 0.3s ease-in-out;
}

@keyframes blink {
  0%   { opacity: 0.3; }
  50%  { opacity: 1; }
  100% { opacity: 0.3; }
}

.dot1, .dot2, .dot3 {
  display: inline-block;
  animation-name: blink;
  animation-duration: 1.2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.dot2 {
  animation-delay: 0.4s;
}

.dot3 {
  animation-delay: 0.8s;
}

/* Thinking message subtle pulse effect */
/* .thinking-message {
  animation: thinking-pulse 2s ease-in-out infinite;
} */

/* @keyframes thinking-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.005);
    opacity: 0.95;
  }
} */

/* Copy button animation styles */
.copy-button {
  transition: all 0.3s ease-in-out;
  transform-origin: center;
}

.copy-button:active {
  transform: scale(0.95);
}

/* Copy success animation */
@keyframes copy-success-bounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.copy-success-animation {
  animation: copy-success-bounce 0.4s ease-in-out;
}