/* Skeleton Loading Styles */

.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
}

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

/* Transmission Card Skeleton */
.transmission-card-skeleton {
    background: white;
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.transmission-card-skeleton .skeleton-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.transmission-card-skeleton .skeleton-timestamp {
    height: 1.1rem;
    width: 150px;
}

.transmission-card-skeleton .skeleton-actions {
    display: flex;
    gap: 0.5rem;
}

.transmission-card-skeleton .skeleton-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.transmission-card-skeleton .skeleton-summary {
    height: 1.5rem;
    width: 100%;
    margin-bottom: 0.5rem;
}

.transmission-card-skeleton .skeleton-summary-2 {
    height: 1.5rem;
    width: 80%;
    margin-bottom: 1rem;
}

.transmission-card-skeleton .skeleton-metadata {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.transmission-card-skeleton .skeleton-meta-item {
    height: 1rem;
    width: 100px;
}

.transmission-card-skeleton .skeleton-transcript {
    margin-top: 1rem;
}

.transmission-card-skeleton .skeleton-transcript-line {
    height: 0.9rem;
    width: 100%;
    margin-bottom: 0.5rem;
}

.transmission-card-skeleton .skeleton-transcript-line:last-child {
    width: 65%;
}

/* Incident Card Skeleton */
.incident-card-skeleton {
    background: white;
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.incident-card-skeleton .skeleton-incident-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.incident-card-skeleton .skeleton-incident-icon {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.incident-card-skeleton .skeleton-incident-content {
    flex: 1;
}

.incident-card-skeleton .skeleton-incident-title {
    height: 1.5rem;
    width: 100%;
    margin-bottom: 0.5rem;
}

.incident-card-skeleton .skeleton-incident-title-2 {
    height: 1.5rem;
    width: 70%;
    margin-bottom: 0.75rem;
}

.incident-card-skeleton .skeleton-incident-meta {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.incident-card-skeleton .skeleton-incident-meta-item {
    height: 0.9rem;
    width: 80px;
}

.incident-card-skeleton .skeleton-transmission-badge {
    height: 1.5rem;
    width: 120px;
    margin-bottom: 0.75rem;
}

.incident-card-skeleton .skeleton-transmission-item {
    margin-bottom: 0.75rem;
    padding-left: 1rem;
}

.incident-card-skeleton .skeleton-transmission-time {
    height: 0.9rem;
    width: 100px;
    margin-bottom: 0.5rem;
}

.incident-card-skeleton .skeleton-transmission-text {
    height: 0.9rem;
    width: 100%;
    margin-bottom: 0.25rem;
}

.incident-card-skeleton .skeleton-transmission-text-2 {
    height: 0.9rem;
    width: 85%;
}

/* Loading container */
.loading-container {
    padding: 2rem 0;
}

/* Loading dots animation for PageLoader */
.loading-dots span {
    animation: loading-dot 1.4s infinite ease-in-out;
    opacity: 0.3;
}

@keyframes loading-dot {
    0%, 80%, 100% {
        opacity: 0.3;
    }
    40% {
        opacity: 1;
    }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .transmission-card-skeleton,
    .incident-card-skeleton {
        padding: 1rem;
    }

    .transmission-card-skeleton .skeleton-timestamp {
        width: 120px;
    }

    .transmission-card-skeleton .skeleton-metadata {
        gap: 0.75rem;
    }
}

/* Loading banner shown above the list while transmissions/incidents are
   being fetched — instantly visible on date change so the user gets
   feedback even when React Query is showing previous-day placeholder data.
   Sizes itself to its contents and centers horizontally as a pill-chip. */
.loading-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.08);
    padding: 0.85rem 1.5rem;
    border-radius: 999px;
    margin: 0 auto 1rem;
    width: fit-content;
    max-width: 90%;
    font-size: 1.4rem;
    color: #333;
    letter-spacing: 0.02em;
}

.loading-banner-text {
    font-weight: 700;
}

.loading-banner-dots {
    display: inline-flex;
    align-items: baseline;
    margin-left: 0.05rem;
    letter-spacing: 0.5px;
}

/* Three dots with staggered bounce — pure CSS, no JS state. */
.loading-banner-dots > span {
    display: inline-block;
    animation: loading-banner-dot 1.4s ease-in-out infinite;
    opacity: 0.3;
}

.loading-banner-dots > span:nth-child(2) {
    animation-delay: 0.2s;
}

.loading-banner-dots > span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes loading-banner-dot {
    0%, 60%, 100% {
        opacity: 0.3;
        transform: translateY(0);
    }
    30% {
        opacity: 1;
        transform: translateY(-3px);
    }
}

@media (max-width: 768px) {
    .loading-banner {
        font-size: 1.25rem;
        padding: 0.75rem 1.25rem;
    }
}

@media (max-width: 480px) {
    .loading-banner {
        font-size: 1.15rem;
        padding: 0.7rem 1.1rem;
    }
}