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

/* Fallback placeholder styling when inline theme variables are unavailable */
#canvas-textarea::-webkit-input-placeholder {
    opacity: 1 !important;
    color: #f4f6f8 !important;
    font-weight: 500;
}
#canvas-textarea::-moz-placeholder {
    opacity: 1 !important;
    color: #f4f6f8 !important;
    font-weight: 500;
}
#canvas-textarea::placeholder {
    opacity: 1 !important;
    color: var(--text-primary, #f4f6f8) !important;
    font-weight: 500;
}

/* 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;
    }
}