/* ChatBase — 🙃 Chaos mode (chaos.js). Timed sitewide pranks via html[data-chaos]. */

/* The floating countdown pill */
#chaosPill {
    position: fixed; left: 50%; bottom: 76px; transform: translateX(-50%);
    z-index: 100000; background: rgba(20,12,40,.92); color: #fff; border: 1px solid rgba(255,255,255,.25);
    padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap;
    box-shadow: 0 8px 30px rgba(0,0,0,.4); backdrop-filter: blur(8px); pointer-events: auto;
}
#chaosPill b { color: #ffd166; }
#chaosPill button {
    margin-left: 8px; font: inherit; font-size: 11px; padding: 1px 8px; border-radius: 999px; cursor: pointer;
    border: 1px solid rgba(255,120,140,.5); background: rgba(255,120,140,.15); color: #ff9db0;
}
/* The pill itself must never be flipped/mirrored/blurred with the page */
html[data-chaos] #chaosPill { transform: translateX(-50%) !important; filter: none !important; font-family: system-ui, sans-serif !important; }

/* Admin card */
.chaos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }

/* ---- The effects (applied to <body> so the pill, a child of body, is excluded via override above) ---- */
html[data-chaos="flip"] body { transform: rotate(180deg); transform-origin: center; }
html[data-chaos="mirror"] body { transform: scaleX(-1); transform-origin: center; }
html[data-chaos="comicsans"] body, html[data-chaos="comicsans"] body * { font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive !important; }
html[data-chaos="tiny"] body { font-size: 8px !important; }
html[data-chaos="huge"] .message, html[data-chaos="huge"] .chat-input, html[data-chaos="huge"] p { font-size: 26px !important; }
html[data-chaos="grayscale"] body { filter: grayscale(1); }
html[data-chaos="blur"] body { filter: blur(1.4px); }

/* Rainbow names in chat */
@keyframes chaosRainbow { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }
html[data-chaos="rainbow"] .message-author,
html[data-chaos="rainbow"] .dc-author-added,
html[data-chaos="rainbow"] .message-username {
    background: linear-gradient(90deg,#ff5f6d,#ffc371,#47e5bc,#6a9cff,#c86dd7) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important; color: transparent !important;
    animation: chaosRainbow 3s linear infinite;
}

/* Slow spin */
@keyframes chaosSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
html[data-chaos="spin"] body { animation: chaosSpin 8s linear infinite; transform-origin: center; }

/* Disco background flashes */
@keyframes chaosDisco { 0% { background: #ff004d; } 20% { background: #ffa300; } 40% { background: #00e436; } 60% { background: #29adff; } 80% { background: #ff77a8; } 100% { background: #ff004d; } }
html[data-chaos="disco"] body { animation: chaosDisco 1.2s steps(1) infinite; }

/* Shake */
@keyframes chaosShake { 0%,100% { transform: translate(0,0); } 25% { transform: translate(-6px,3px); } 50% { transform: translate(5px,-4px); } 75% { transform: translate(-4px,-3px); } }
html[data-chaos="shake"] body { animation: chaosShake .3s linear infinite; }

/* Drunk: gentle wobble + slight blur */
@keyframes chaosDrunk { 0%,100% { transform: rotate(-2deg) skewX(2deg); } 50% { transform: rotate(2deg) skewX(-2deg); } }
html[data-chaos="drunk"] body { animation: chaosDrunk 4s ease-in-out infinite; filter: blur(.5px); }

@media (prefers-reduced-motion: reduce) {
    html[data-chaos="spin"] body, html[data-chaos="shake"] body, html[data-chaos="drunk"] body, html[data-chaos="disco"] body { animation: none; }
}