/* Twitch Theme Overrides */

/* Live indicator pulse */
@keyframes twitch-live-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(145, 70, 255, 0.5); }
    50% { box-shadow: 0 0 0 8px rgba(145, 70, 255, 0); }
}
.twitch-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #9146FF 0%, #7B2FE0 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 6px 14px;
    border-radius: 20px;
    animation: twitch-live-pulse 2s infinite;
}
.twitch-live-dot {
    width: 8px;
    height: 8px;
    background: #ff4444;
    border-radius: 50%;
    animation: twitch-live-pulse 1.5s infinite;
}
.twitch-offline-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.06);
    color: #555;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 6px 14px;
    border-radius: 20px;
}

/* Clip card hover */
.twitch-clip-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.twitch-clip-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(145, 70, 255, 0.2);
}

/* ──────────────────────────────────────────────────────────────────────
 * Light-theme overrides for the whole Twitch tab — attribute-selector
 * pattern (matches theme.css:767 border-bottom approach). 55+ inline
 * styles with hardcoded #fff/#555/#666/#888/#111/etc automatically swap
 * under light theme. Brand colours (Twitch purple #9146FF, live red
 * #ff0000) deliberately stay — they work on both themes.
 *
 * Moved out of partials/twitch-tab.html into css/twitch.css when the
 * Twitch tab got templatized into dashboard_twitch_compose, so the
 * rules live in one place instead of being duplicated per host.
 * ────────────────────────────────────────────────────────────────────── */
html[data-theme="light"] #tab-twitch [style*="color: var(--text-1)"]:not([style*="color:#ffd"]) { color: var(--text-1) !important; }
html[data-theme="light"] #tab-twitch [style*="color:#ccc"],
html[data-theme="light"] #tab-twitch [style*="color:#ddd"]      { color: var(--text-1) !important; }
html[data-theme="light"] #tab-twitch [style*="color:#888"],
html[data-theme="light"] #tab-twitch [style*="color:#666"]      { color: var(--text-2) !important; }
html[data-theme="light"] #tab-twitch [style*="color:#555"],
html[data-theme="light"] #tab-twitch [style*="color:#444"],
html[data-theme="light"] #tab-twitch [style*="color:#333"]      { color: var(--text-3) !important; }
html[data-theme="light"] #tab-twitch [style*="background:#111"] { background: var(--surface-1) !important; }
html[data-theme="light"] #tab-twitch [style*="background:rgba(0,0,0,0.3)"],
html[data-theme="light"] #tab-twitch [style*="background:rgba(0,0,0,0.4)"],
html[data-theme="light"] #tab-twitch [style*="background:rgba(0,0,0,0.75)"]
                                                                { background: rgba(0,0,0,0.04) !important; }
html[data-theme="light"] #tab-twitch [style*="background:rgba(255,255,255,0.03)"],
html[data-theme="light"] #tab-twitch [style*="background:rgba(255,255,255,0.06)"]
                                                                { background: rgba(0,0,0,0.04) !important; }
html[data-theme="light"] #tab-twitch [style*="border-bottom:1px solid rgba(255,255,255"] { border-color: var(--border-1) !important; }

/* Search dropdown — theme-aware. Dark theme: dark popup. Light theme:
   white popup with dark text. All colours via CSS vars from theme.css
   (--bg-page / --text-1 / --text-2 / --border-1 / ...). */
.tw-search-drop {
    background: #1a1a2e;
    color: var(--text-1);
    border-color: rgba(145,70,255,0.3);
}
html[data-theme="light"] .tw-search-drop {
    background: #ffffff;
    border-color: rgba(145,70,255,0.25);
    box-shadow: 0 12px 32px rgba(15,23,42,0.18);
}
.tw-search-drop .tw-drop-item-name      { color: var(--text-1); }
.tw-search-drop .tw-drop-item-handle    { color: var(--text-2); }
.tw-search-drop .tw-drop-item-sub       { color: var(--text-2); }
.tw-search-drop .tw-drop-item-divider   { border-bottom-color: var(--border-1); }
.tw-search-drop .tw-drop-empty,
.tw-search-drop .tw-drop-clear          { color: var(--text-3); }
.tw-search-drop .tw-drop-item:hover     { background: rgba(145,70,255,0.10); }
html[data-theme="light"] .tw-search-drop .tw-drop-item:hover { background: rgba(145,70,255,0.08); }
.tw-search-drop mark                    { background: rgba(145,70,255,0.35); color: var(--text-1); padding: 0; }
html[data-theme="light"] .tw-search-drop mark { background: rgba(145,70,255,0.22); color: var(--text-1); }
.tw-search-drop .tw-drop-thumb-fallback { background: rgba(145,70,255,0.15); }
html[data-theme="light"] .tw-search-drop .tw-drop-thumb-fallback { background: rgba(145,70,255,0.10); }