/**
 * Musiveo Connector — white-pill connector UI (YouTube + Twitch).
 * Class namespace: mcn-*. Mirrors the youtube-video-importer aesthetic so
 * embedded connectors look identical everywhere they are placed.
 */
.mcn-wrap { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; max-width: 560px; }
.mcn-connected-header { display: flex; align-items: center; gap: 8px; }

/* --- Buttons --- */
.mcn-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(0,0,0,0.12); background: #fff; color: #111; font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.mcn-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.16); color: #111; }
.mcn-btn:active { transform: translateY(0); box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.mcn-btn:focus-visible { outline: 2px solid #555; outline-offset: 2px; }
.mcn-btn:disabled { opacity: .6; cursor: wait; transform: none; }
.mcn-btn-icon { width: 18px; height: 18px; flex-shrink: 0; }
.mcn-btn-primary { background: #fff; color: #111; }
.mcn-btn-twitch { background: #9146FF; border-color: #9146FF; color: #fff; }
.mcn-btn-twitch:hover { background: #7c3aed; color: #fff; }
.mcn-btn-secondary { background: #f5f5f5; }
.mcn-btn-danger { background: #fff; color: #111; border-color: rgba(0,0,0,0.18); }
.mcn-btn-danger:hover { background: #f3f3f5; border-color: #111; color: #111; }

/* Force white/black on every connector button (overrides theme/plugin CSS).
 * Plugin stylesheets load before theme stylesheets, so without !important a
 * dark theme's button rules (white text) win by cascade order. Mirrors the
 * youtube-video-importer forcing block so buttons look identical to before. */
.mcn-wrap .mcn-btn {
    background: #ffffff !important;
    color: #111111 !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    width: auto !important;
    max-width: 320px !important;
    flex: 0 0 auto !important;
}
.mcn-wrap .mcn-btn:hover,
.mcn-wrap .mcn-btn:focus-visible,
.mcn-wrap .mcn-btn:active {
    color: #111111 !important;
}
.mcn-wrap .mcn-btn-secondary {
    background: #f5f5f5 !important;
    color: #111111 !important;
}
.mcn-wrap .mcn-btn-danger {
    background: #ffffff !important;
    color: #111111 !important;
    border-color: rgba(0, 0, 0, 0.18) !important;
}
.mcn-wrap .mcn-btn-danger:hover {
    background: #f3f3f5 !important;
    border-color: #111111 !important;
    color: #111111 !important;
}
.mcn-wrap .mcn-btn-twitch {
    background: #9146FF !important;
    border-color: #9146FF !important;
    color: #ffffff !important;
}
.mcn-wrap .mcn-btn-twitch:hover,
.mcn-wrap .mcn-btn-twitch:focus-visible {
    background: #7c3aed !important;
    color: #ffffff !important;
}
.mcn-wrap .mcn-btn svg,
.mcn-wrap .mcn-btn-icon {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0;
    color: currentColor;
}

/* --- Status --- */
.mcn-status { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 14px; }
.mcn-status-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #f59e0b; color: #fff; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.mcn-status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.mcn-status-pill-success { background: rgba(22,163,74,0.12); color: #15803d; border: 1px solid rgba(22,163,74,0.3); }
.mcn-status-pill-twitch { background: rgba(145,70,255,0.1); color: #6d28d9; border-color: rgba(145,70,255,0.35); }

/* --- Channel pills --- */
.mcn-channels-pills { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mcn-channels-pills > .mcn-channel-pill-form,
.mcn-channels-pills > .mcn-pill-remove-form { margin: 0; padding: 0; display: inline-flex; }
.mcn-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; border: 1px solid rgba(0,0,0,0.12); background: #fff; color: #111; font-size: 13px; font-weight: 600; cursor: pointer; animation: mcn-pill-in .28s ease forwards; opacity: 0; transform: translateY(6px); text-decoration: none; }
form .mcn-pill { opacity: 0; }
.mcn-pill.active { border-color: #111; box-shadow: 0 0 0 1px #111 inset; }
.mcn-pill-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.mcn-pill-avatar-fallback { display: inline-flex; align-items: center; justify-content: center; background: #111; color: #fff; font-weight: 700; }
.mcn-pill-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcn-pill-check { display: inline-flex; color: #16a34a; }
.mcn-pill-link { display: inline-flex; color: inherit; opacity: .6; }
.mcn-pill-link:hover { opacity: 1; }
.mcn-pill-remove-form { display: inline-flex; }
.mcn-pill-remove { border: none; background: transparent; color: #999; font-size: 16px; line-height: 1; cursor: pointer; padding: 4px; }
.mcn-pill-remove:hover { color: #dc2626; }
@keyframes mcn-pill-in { to { opacity: 1; transform: translateY(0); } }

/* --- Actions row --- */
.mcn-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* --- Notices --- */
.mcn-notice { font-size: 14px; }
.mcn-notice-error { color: #b00; }

/* "Connected" badges behind usernames (sized + tooltip like .user-verified) */
.mcn-yt-badge,
.mcn-tw-badge {
    display: inline-flex;
    align-items: center;
    font-size: clamp(12px, 0.75em, 1.5rem);
    vertical-align: middle;
    position: relative;
}
/* Ribbed gear badge (repeating-conic sunburst + glossy hub + play triangle) */
.mcn-yt-gear {
    width: 1.15em;
    height: 1.15em;
    margin: 0 4px;
    border-radius: 50%;
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    background: #e60000;
    background: repeating-conic-gradient(from -6deg, #ff2222 0deg 15deg, #c00000 15deg 30deg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 6px rgba(255, 0, 0, 0.3);
}
.mcn-yt-gear:before {
    content: "";
    position: absolute;
    inset: 0.2em;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ff5252, #e00000 72%);
    box-shadow: inset 0 0 0 0.04em rgba(0, 0, 0, 0.4);
}
.mcn-yt-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-34%, -50%);
    width: 0;
    height: 0;
    border-top: 0.23em solid transparent;
    border-bottom: 0.23em solid transparent;
    border-left: 0.38em solid #fff;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
}
/* Twitch badge: purple chip with white glitch glyph */
.mcn-tw-chip {
    width: 1.15em;
    height: 1.15em;
    margin: 0 4px;
    border-radius: 28%;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: linear-gradient(145deg, #a970ff, #9146FF 60%, #772ce8);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 6px rgba(145, 70, 255, 0.35);
    color: #fff;
}
.mcn-tw-chip svg {
    width: 0.68em;
    height: 0.68em;
    display: block;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
}
/* Single floating tooltip (JS-driven; escapes overflow:hidden clipping) */
.mcn-tip-float {
    position: fixed;
    z-index: 2147483647;
    background: rgba(10, 10, 14, 0.92);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    pointer-events: none;
    animation: mcn-tip-in 0.15s ease-out;
}
.mcn-tip-float[hidden] { display: none; }
@keyframes mcn-tip-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }