/* Creator Census — Chat Analytics shared styles
 * Used by channel_page.html, kick_channel.html, and any future channel templates
 * to render the CCChat block. */

/* ─── Skeleton loading state ─────────────────────────────────────────
 * Drop-in replacement for "Loading..." text. Animated gray gradient pulse.
 * Use as <div class="cc-sk" style="height:60px;"></div> or
 * <div class="cc-sk cc-sk-line"></div> for a single text line.
 */
@keyframes cc-sk-pulse {
    0%   { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}
.cc-sk {
    background: linear-gradient(90deg, var(--bg2) 0%, var(--bg3) 50%, var(--bg2) 100%);
    background-size: 200% 100%;
    animation: cc-sk-pulse 1.4s ease-in-out infinite;
    border-radius: 6px;
    border: 1px solid var(--bdr);
}
.cc-sk-line { height: 12px; margin: 6px 0; border-radius: 3px; }
.cc-sk-circle { border-radius: 50%; }
.cc-sk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    padding: 4px;
}
.cc-sk-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--bdr);
}
.cc-sk-row:last-child { border-bottom: none; }

.cc-pm { font-size: 10px; color: var(--t3); font-weight: 500; margin-left: 6px; }

.cc-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 800px) { .cc-g2 { grid-template-columns: 1fr; } }

.cc-range-sel {
    display: inline-flex;
    background: var(--bg3);
    border: 1px solid var(--bdr);
    border-radius: 6px;
    overflow: hidden;
}
.cc-range-btn {
    background: transparent;
    border: none;
    color: var(--t3);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    padding: 6px 10px;
    cursor: pointer;
    transition: all .12s;
    border-right: 1px solid var(--bdr);
}
.cc-range-btn:last-child { border-right: none; }
.cc-range-btn:hover { color: var(--t1); background: rgba(255,255,255,0.04); }
.cc-range-btn.active { color: var(--t1); background: var(--primary); }

.cc-tt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--bg3);
    color: var(--t3);
    font-size: 9px;
    font-style: normal;
    font-weight: 700;
    cursor: help;
    margin-left: 4px;
    position: relative;
    border: 1px solid var(--bdr);
}
.cc-tt:hover { color: var(--t1); border-color: var(--primary); }
.cc-tt:hover::after {
    content: attr(data-tt);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg3);
    border: 1px solid var(--bdr);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 10px;
    font-weight: 400;
    color: var(--t1);
    width: 240px;
    text-align: left;
    line-height: 1.4;
    z-index: 100;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.cc-tab-row {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.cc-tab {
    background: var(--bg2);
    border: 1px solid var(--bdr);
    color: var(--t2);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: all .12s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.cc-tab:hover { color: var(--t1); border-color: var(--t3); }
.cc-tab.active { background: var(--bg3); color: var(--t1); }
.cc-tab.active.twitch { border-color: #9146ff; }
.cc-tab.active.kick { border-color: #53fc18; }