/*
 * 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.
 */

/* Scale down ASCII art placeholder on mobile screens */
@media (max-width: 443px) {
  #canvas-textarea::placeholder {
    font-size: 0.5rem; /* 8px - fits ASCII art nicely on small screens */
    line-height: 1.2;
  }
}

/* Extra small screens (280px - 320px range) */
@media (max-width: 320px) {
  #canvas-textarea::placeholder {
    font-size: 0.4rem; /* 6.4px - fits on smallest smartphones */
    line-height: 1.1;
  }
}

/* Upward Arrow Pulse Animation */
.streaming-icon-broadcast {
  animation: pulse-up 1s infinite;
}

@keyframes pulse-up {
  0% { opacity: 0.5; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); }
  100% { opacity: 0.5; transform: translateY(0); }
}

/* Downward Arrow Blink Animation */
.streaming-icon-arrow-down {
  animation: blink 1s infinite;
}

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