/*
 * avatar-frames.css
 * Samostatné styly pro systém rámečků avatarů.
 * Obsahuje definice rámů a příslušné animace (glow, burn, glitch, matrix, atd.).
 *
 * UPDATE:
 * - Přidána kompletní podpora pro strukturu .message-avatar-wrapper v chatu.
 * - Zachována zpětná kompatibilita pro stávající použití (profil, sidebar).
 * - Void Walker (Shadow) kompletně předělán na efekt "černé díry".
 * - Optimalizace výkonu animací u složitějších gradientů.
 */

/* --- AVATAR FRAMES SYSTEM --- */

/* Základní kontejner pro avatar a rámeček */
.avatar-frame-container,
.message-avatar-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    z-index: 1;
    box-sizing: border-box;
    overflow: visible;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    will-change: transform, box-shadow;
}

/* Jemná interakce na hover / focus */
.avatar-frame-container:hover,
.avatar-frame-container:focus-within,
.message-avatar-wrapper:hover,
.message-avatar-wrapper:focus-within {
    transform: translateY(-1px) scale(1.02);
}

/* Samotný avatar */
.avatar-frame-container img,
.message-avatar-wrapper img {
    border-radius: 50%;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Aby avatar seděl hezky "pod" efekty */
    position: relative;
    z-index: 0;
}

/* Obecné nastavení pro všechny speciální rámce */
[class^="frame-"],
[class*=" frame-"] {
    position: relative;
    border-radius: 50%;
    box-sizing: border-box;
}

/* Všechny efekty používají pseudo-elementy jako „efektové vrstvy“ */
[class^="frame-"]::before,
[class^="frame-"]::after,
[class*=" frame-"]::before,
[class*=" frame-"]::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

/* --- 1. Neon Frame --- */
/* Cyber neon glow s rotující aurou a pulsem */
.frame-neon,
.message-avatar-wrapper.frame-neon {
    border: 2px solid rgba(0, 255, 255, 0.85);
    box-shadow:
        0 0 6px rgba(0, 255, 255, 0.7),
        0 0 16px rgba(0, 255, 255, 0.5);
    background: radial-gradient(circle at 30% 30%, rgba(0, 255, 255, 0.15), transparent 60%);
    animation: frame-neon-pulse 2.2s ease-in-out infinite;
    overflow: visible;
}

.frame-neon::before,
.message-avatar-wrapper.frame-neon::before {
    inset: -6px;
    border: 1px solid rgba(0, 255, 255, 0.35);
    box-shadow:
        0 0 10px rgba(0, 255, 255, 0.6),
        0 0 25px rgba(0, 255, 255, 0.4);
    filter: blur(1px);
    opacity: 0.85;
    animation: frame-neon-orbit 6s linear infinite;
}

.frame-neon::after,
.message-avatar-wrapper.frame-neon::after {
    inset: 3px;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.4) inset;
    opacity: 0.7;
    background: conic-gradient(from 0deg,
            rgba(0, 255, 255, 0.2),
            transparent 40%,
            rgba(0, 255, 255, 0.2),
            transparent 80%,
            rgba(0, 255, 255, 0.2));
    animation: frame-neon-scan 4s linear infinite;
}

@keyframes frame-neon-pulse {

    0%,
    100% {
        box-shadow:
            0 0 6px rgba(0, 255, 255, 0.7),
            0 0 14px rgba(0, 255, 255, 0.6);
        transform: scale(1);
    }

    50% {
        box-shadow:
            0 0 12px rgba(0, 255, 255, 0.9),
            0 0 30px rgba(0, 255, 255, 0.8);
        transform: scale(1.03);
    }
}

@keyframes frame-neon-orbit {
    0% {
        transform: rotate(0deg);
        opacity: 0.7;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: rotate(360deg);
        opacity: 0.7;
    }
}

@keyframes frame-neon-scan {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}

/* --- 2. Gold Frame --- */
/* Luxusní zlato s jemným „breathing“ a odleskem */
.frame-gold,
.message-avatar-wrapper.frame-gold {
    border: 3px solid transparent;
    background-image: radial-gradient(circle at top left, #ffe58a, #fdb931, #b8860b);
    background-origin: border-box;
    background-clip: border-box;
    box-shadow:
        0 0 3px rgba(0, 0, 0, 0.8),
        0 0 16px rgba(255, 215, 0, 0.5);
    overflow: visible;
    animation: frame-gold-breathe 3.5s ease-in-out infinite;
}

.frame-gold::before,
.message-avatar-wrapper.frame-gold::before {
    inset: -4px;
    border: 1px solid rgba(255, 248, 220, 0.35);
    background: conic-gradient(from 0deg,
            rgba(255, 255, 255, 0.15),
            transparent 20%,
            rgba(255, 255, 255, 0.4),
            transparent 60%,
            rgba(255, 255, 255, 0.15));
    mix-blend-mode: screen;
    opacity: 0.7;
    animation: frame-gold-shine 4s linear infinite;
}

.frame-gold::after,
.message-avatar-wrapper.frame-gold::after {
    inset: 0;
    background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.35), transparent 60%);
    opacity: 0.9;
}

@keyframes frame-gold-breathe {

    0%,
    100% {
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.8), 0 0 16px rgba(255, 215, 0, 0.5);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.8), 0 0 26px rgba(255, 215, 0, 0.8);
        transform: scale(1.02);
    }
}

@keyframes frame-gold-shine {
    0% {
        transform: rotate(0deg);
    }

    40% {
        transform: rotate(140deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* --- 3. Fire Frame --- */
/* Žhavý oheň se třepotající aurou */
.frame-fire,
.message-avatar-wrapper.frame-fire {
    border: 2px solid #ff4500;
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.12), transparent 60%),
        conic-gradient(from 0deg, #ff4500, #ff8800, #ffff33, #ff4500);
    box-shadow:
        0 0 10px rgba(255, 69, 0, 0.8),
        0 0 22px rgba(255, 120, 0, 0.9);
    animation: frame-fire-core 1.2s ease-in-out infinite alternate;
    overflow: visible;
}

.frame-fire::before,
.message-avatar-wrapper.frame-fire::before {
    inset: -8px;
    background: radial-gradient(circle at 50% 120%, rgba(255, 69, 0, 0.45), transparent 70%);
    filter: blur(3px);
    opacity: 0.9;
    animation: frame-fire-flame 1s linear infinite;
}

.frame-fire::after,
.message-avatar-wrapper.frame-fire::after {
    inset: 2px;
    box-shadow: 0 0 12px rgba(255, 120, 0, 0.9) inset;
    opacity: 0.85;
}

@keyframes frame-fire-core {
    0% {
        transform: scale(1);
        box-shadow: 0 0 8px rgba(255, 69, 0, 0.7), 0 0 18px rgba(255, 120, 0, 0.8);
    }

    100% {
        transform: scale(1.04);
        box-shadow: 0 0 16px rgba(255, 69, 0, 1), 0 0 32px rgba(255, 180, 0, 1);
    }
}

@keyframes frame-fire-flame {
    0% {
        transform: translateY(2px) scale(1);
        opacity: 0.9;
    }

    50% {
        transform: translateY(-2px) scale(1.03);
        opacity: 1;
    }

    100% {
        transform: translateY(1px) scale(0.98);
        opacity: 0.8;
    }
}

/* --- 4. Glitch Frame --- */
/* Digitální glitch: RGB offset + náhodné trhnutí */
.frame-glitch,
.message-avatar-wrapper.frame-glitch {
    border: 2px solid rgba(255, 255, 255, 0.8);
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.08), transparent 65%);
    box-shadow:
        0 0 8px rgba(255, 255, 255, 0.6),
        0 0 14px rgba(0, 255, 255, 0.4);
    animation: frame-glitch-wobble 5s ease-in-out infinite;
    overflow: visible;
}

.frame-glitch::before,
.message-avatar-wrapper.frame-glitch::before {
    border: 1px solid rgba(255, 0, 80, 0.7);
    mix-blend-mode: screen;
    opacity: 0.7;
    animation: frame-glitch-rgb 2.7s steps(2, end) infinite;
}

.frame-glitch::after,
.message-avatar-wrapper.frame-glitch::after {
    border: 1px solid rgba(0, 180, 255, 0.8);
    mix-blend-mode: screen;
    opacity: 0.8;
    animation: frame-glitch-rgb2 2.5s steps(3, end) infinite;
}

@keyframes frame-glitch-wobble {

    0%,
    96%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    97% {
        transform: translate(-2px, 2px) scale(1.02);
    }

    98% {
        transform: translate(2px, -2px) scale(1.02);
    }

    99% {
        transform: translate(-1px, 1px) scale(0.99);
    }
}

@keyframes frame-glitch-rgb {
    0% {
        transform: translate(0, 0);
        opacity: 0.4;
    }

    25% {
        transform: translate(-1px, 1px);
        opacity: 0.7;
    }

    50% {
        transform: translate(1px, -1px);
        opacity: 0.6;
    }

    75% {
        transform: translate(-2px, 0);
        opacity: 0.8;
    }

    100% {
        transform: translate(0, 0);
        opacity: 0.4;
    }
}

@keyframes frame-glitch-rgb2 {
    0% {
        transform: translate(0, 0);
        opacity: 0.6;
    }

    20% {
        transform: translate(1px, 0);
        opacity: 0.9;
    }

    40% {
        transform: translate(0, -1px);
        opacity: 0.5;
    }

    60% {
        transform: translate(-1px, 1px);
        opacity: 0.8;
    }

    80% {
        transform: translate(1px, -1px);
        opacity: 0.5;
    }

    100% {
        transform: translate(0, 0);
        opacity: 0.6;
    }
}

/* --- 5. Matrix Frame --- */
/* Matrix zelený kód kolem avatara */
.frame-matrix,
.message-avatar-wrapper.frame-matrix {
    border: 2px solid #00ff66;
    box-shadow:
        0 0 8px rgba(0, 255, 102, 0.8),
        0 0 18px rgba(0, 255, 102, 0.6);
    background: radial-gradient(circle at 50% 50%, rgba(0, 255, 102, 0.1), transparent 65%);
    overflow: visible;
}

.frame-matrix::before,
.message-avatar-wrapper.frame-matrix::before {
    inset: -6px;
    background-image:
        repeating-linear-gradient(to bottom, rgba(0, 255, 0, 0.35), rgba(0, 255, 0, 0.35) 1px, transparent 1px, transparent 3px),
        repeating-linear-gradient(to right, rgba(0, 255, 0, 0.15), rgba(0, 255, 0, 0.15) 1px, transparent 1px, transparent 3px);
    opacity: 0.5;
    mix-blend-mode: screen;
    animation: frame-matrix-rain 5s linear infinite;
}

.frame-matrix::after,
.message-avatar-wrapper.frame-matrix::after {
    inset: 2px;
    box-shadow: 0 0 10px rgba(0, 255, 102, 0.7) inset;
    background: radial-gradient(circle at 50% 20%, rgba(0, 255, 102, 0.35), transparent 55%);
    opacity: 0.9;
}

@keyframes frame-matrix-rain {
    0% {
        background-position: 0 0, 0 0;
        opacity: 0.35;
    }

    50% {
        background-position: 0 40px, 10px 0;
        opacity: 0.7;
    }

    100% {
        background-position: 0 80px, 20px 0;
        opacity: 0.35;
    }
}

/* --- 6. Ice Frame (Absolute Zero) --- */
/* Chladný, křehký led se shimmerem */
.frame-ice,
.message-avatar-wrapper.frame-ice {
    border: 2px solid rgba(200, 245, 255, 0.9);
    box-shadow:
        0 0 10px rgba(0, 242, 255, 0.9),
        0 0 18px rgba(0, 242, 255, 0.7);
    background: radial-gradient(circle, rgba(0, 242, 255, 0.18) 0%, transparent 70%);
    overflow: visible;
    animation: frame-ice-breathe 3.4s ease-in-out infinite;
}

.frame-ice::before,
.message-avatar-wrapper.frame-ice::before {
    inset: -4px;
    background: conic-gradient(from 0deg,
            rgba(255, 255, 255, 0.3),
            rgba(0, 242, 255, 0.1),
            rgba(255, 255, 255, 0.4),
            rgba(0, 242, 255, 0.05),
            rgba(255, 255, 255, 0.3));
    mix-blend-mode: screen;
    opacity: 0.9;
    filter: blur(0.5px);
    animation: frame-ice-shine 7s linear infinite;
}

.frame-ice::after,
.message-avatar-wrapper.frame-ice::after {
    inset: 3px;
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.5), transparent 50%),
        radial-gradient(circle at 70% 80%, rgba(200, 240, 255, 0.4), transparent 55%);
    box-shadow: 0 0 15px rgba(0, 242, 255, 0.6) inset;
}

@keyframes frame-ice-breathe {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(0, 242, 255, 0.9), 0 0 18px rgba(0, 242, 255, 0.7);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 20px rgba(0, 242, 255, 1), 0 0 32px rgba(0, 242, 255, 1);
        transform: scale(1.02);
    }
}

@keyframes frame-ice-shine {
    0% {
        transform: rotate(0deg);
        opacity: 0.7;
    }

    50% {
        transform: rotate(180deg);
        opacity: 1;
    }

    100% {
        transform: rotate(360deg);
        opacity: 0.7;
    }
}

/* --- 7. Admin Frame (Root Access) --- */
/* Červený alert, scanning line + „critical“ puls */
.frame-admin,
.message-avatar-wrapper.frame-admin {
    border: 3px double rgba(255, 0, 0, 0.9);
    box-shadow:
        0 0 15px rgba(255, 0, 0, 0.9),
        0 0 30px rgba(255, 0, 0, 0.7);
    background-color: transparent;
    overflow: visible;
    animation: frame-admin-alert 1.5s ease-in-out infinite;
}

.frame-admin::after,
.message-avatar-wrapper.frame-admin::after {
    /* Scanning line */
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(to bottom, transparent 35%, rgba(255, 0, 0, 0.4) 50%, transparent 65%);
    background-size: 100% 220%;
    animation: frame-admin-scan 2.1s linear infinite;
    pointer-events: none;
    mix-blend-mode: screen;
}

.frame-admin::before,
.message-avatar-wrapper.frame-admin::before {
    /* Vnější pulsující aura */
    inset: -10px;
    box-shadow:
        0 0 22px rgba(255, 0, 0, 0.9),
        0 0 42px rgba(255, 0, 0, 0.7);
    opacity: 0.7;
    animation: frame-admin-aura 2s ease-in-out infinite;
}

@keyframes frame-admin-alert {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 15px rgba(255, 0, 0, 0.9), 0 0 30px rgba(255, 0, 0, 0.7);
    }

    50% {
        transform: scale(1.03);
        box-shadow: 0 0 24px rgba(255, 0, 0, 1), 0 0 45px rgba(255, 0, 0, 0.9);
    }
}

@keyframes frame-admin-scan {
    0% {
        background-position: 0% -20%;
        opacity: 0;
    }

    20% {
        opacity: 0.9;
    }

    80% {
        opacity: 0.9;
    }

    100% {
        background-position: 0% 120%;
        opacity: 0;
    }
}

@keyframes frame-admin-aura {

    0%,
    100% {
        opacity: 0.5;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

/* --- 8. Toxic Frame --- */
/* Radioaktivní neon toxický puls + vířivý gradient */
.frame-toxic,
.message-avatar-wrapper.frame-toxic {
    border: 2px solid #39ff14;
    box-shadow:
        0 0 10px rgba(57, 255, 20, 0.9),
        0 0 22px rgba(57, 255, 20, 0.7),
        0 0 28px rgba(140, 255, 0, 0.8);
    background: radial-gradient(circle, transparent 55%, rgba(57, 255, 20, 0.18) 100%);
    overflow: visible;
    animation: frame-toxic-breathe 2.4s ease-in-out infinite;
}

.frame-toxic::before,
.message-avatar-wrapper.frame-toxic::before {
    inset: -8px;
    background: conic-gradient(from 0deg,
            rgba(57, 255, 20, 0.45),
            rgba(57, 255, 20, 0.05),
            rgba(180, 255, 0, 0.45),
            rgba(57, 255, 20, 0.05),
            rgba(57, 255, 20, 0.45));
    filter: blur(1px);
    opacity: 0.9;
    animation: frame-toxic-spin 5s linear infinite;
}

.frame-toxic::after,
.message-avatar-wrapper.frame-toxic::after {
    inset: 3px;
    box-shadow: 0 0 16px rgba(57, 255, 20, 0.9) inset;
    background:
        radial-gradient(circle at 20% 20%, rgba(200, 255, 200, 0.4), transparent 45%),
        radial-gradient(circle at 80% 70%, rgba(120, 255, 120, 0.3), transparent 55%);
    opacity: 0.95;
}

@keyframes frame-toxic-breathe {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 10px rgba(57, 255, 20, 0.9), 0 0 22px rgba(57, 255, 20, 0.7), 0 0 28px rgba(140, 255, 0, 0.8);
    }

    50% {
        transform: scale(1.04);
        box-shadow: 0 0 18px rgba(57, 255, 20, 1), 0 0 32px rgba(180, 255, 0, 1), 0 0 42px rgba(200, 255, 120, 1);
    }
}

@keyframes frame-toxic-spin {
    0% {
        transform: rotate(0deg);
        opacity: 0.8;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: rotate(360deg);
        opacity: 0.8;
    }
}

/* --- 9. Luxury Frame (Diamond) --- */
/* Diamantový, perleťový lesk s obíhajícím diamantem */
.frame-luxury,
.message-avatar-wrapper.frame-luxury {
    border: 3px solid #e0f7fa;
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.75), transparent 55%),
        radial-gradient(circle at 70% 80%, rgba(240, 255, 255, 0.65), transparent 55%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.12) 45%, rgba(255, 255, 255, 0.65) 100%);
    box-shadow:
        0 0 15px rgba(224, 247, 250, 0.9),
        inset 0 0 10px rgba(255, 255, 255, 0.75);
    overflow: visible;
    animation: frame-luxury-breathe 3s ease-in-out infinite;
}

/* Hlavní obíhající diamantový „shard“ */
.frame-luxury::before,
.message-avatar-wrapper.frame-luxury::before {
    top: 50%;
    left: 50%;
    width: 42%;
    height: 42%;
    border-radius: 0;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.98), transparent 60%),
        linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(224, 247, 250, 0.7) 40%, rgba(178, 235, 242, 0.9) 100%);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.95), 0 0 24px rgba(178, 235, 242, 0.95);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    opacity: 0;
    transform-origin: center center;
    animation: frame-luxury-shine 4.2s ease-in-out infinite;
}

/* Jemné třpytky na ploše rámu */
.frame-luxury::after,
.message-avatar-wrapper.frame-luxury::after {
    inset: -4px;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.9), transparent 45%),
        radial-gradient(circle at 70% 40%, rgba(255, 255, 255, 0.8), transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.8), transparent 45%);
    opacity: 0.35;
    animation: frame-luxury-sparkle 3.5s ease-in-out infinite alternate;
}

@keyframes frame-luxury-breathe {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 12px rgba(224, 247, 250, 0.9), inset 0 0 10px rgba(255, 255, 255, 0.75);
    }

    50% {
        transform: scale(1.02);
        box-shadow: 0 0 22px rgba(224, 247, 250, 1), inset 0 0 16px rgba(255, 255, 255, 0.95);
    }
}

@keyframes frame-luxury-shine {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(0deg) translate(0, -125%) rotate(0deg);
    }

    10% {
        opacity: 1;
    }

    45% {
        opacity: 0.9;
    }

    60% {
        opacity: 0.4;
    }

    80% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(360deg) translate(0, -125%) rotate(-360deg);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(360deg) translate(0, -125%) rotate(-360deg);
    }
}

@keyframes frame-luxury-sparkle {
    0% {
        opacity: 0.2;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.02);
    }

    100% {
        opacity: 0.3;
        transform: scale(0.99);
    }
}

/* --- 10. Pixel Frame (8-Bit Retro) --- */
/* Hranatý retro styl simulovaný stíny a "trhanou" animací */
.frame-pixel,
.message-avatar-wrapper.frame-pixel {
    border: 4px dashed #333;
    box-shadow:
        0 0 0 4px #e0e0e0,
        0 0 10px rgba(0, 0, 0, 0.5);
    background: #fff;
    animation: frame-pixel-flash 1s steps(2, end) infinite;
    image-rendering: pixelated;
    overflow: visible;
}

.frame-pixel::before,
.message-avatar-wrapper.frame-pixel::before {
    inset: -6px;
    border: 2px solid transparent;
    border-top-color: #ff004d;
    border-bottom-color: #00e756;
    border-left-color: #29adff;
    border-right-color: #ffa300;
    opacity: 0.8;
    animation: frame-pixel-spin 2s steps(8, end) infinite;
}

@keyframes frame-pixel-flash {

    0%,
    100% {
        border-color: #333;
        box-shadow: 0 0 0 2px #e0e0e0;
    }

    50% {
        border-color: #555;
        box-shadow: 0 0 0 2px #fff;
    }
}

@keyframes frame-pixel-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* --- 11. RGB Frame (Gamer) --- */
/* Chroma RGB cyklus pro maximální FPS */
.frame-rgb,
.message-avatar-wrapper.frame-rgb {
    border: 3px solid transparent;
    background: linear-gradient(#222, #222) padding-box,
        linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82) border-box;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.5);
    animation: frame-rgb-pulse 2s ease-in-out infinite;
    overflow: visible;
}

.frame-rgb::before,
.message-avatar-wrapper.frame-rgb::before {
    inset: -4px;
    background: conic-gradient(#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
    filter: blur(8px);
    opacity: 0.6;
    z-index: -1;
    animation: frame-rgb-spin 3s linear infinite;
}

@keyframes frame-rgb-spin {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes frame-rgb-pulse {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(255, 0, 0, 0.4);
        transform: scale(1);
    }

    33% {
        box-shadow: 0 0 15px rgba(0, 255, 0, 0.4);
        transform: scale(1.02);
    }

    66% {
        box-shadow: 0 0 15px rgba(0, 0, 255, 0.4);
    }
}

/* --- 12. Steampunk Frame --- */
/* Mosaz, měď a mechanický pohyb ozubeného kola */
.frame-steampunk,
.message-avatar-wrapper.frame-steampunk {
    border: 3px dashed #b87333;
    /* Měděná barva */
    background: radial-gradient(circle, transparent 60%, rgba(184, 115, 51, 0.2) 100%);
    box-shadow:
        0 0 5px rgba(0, 0, 0, 0.8),
        inset 0 0 10px rgba(139, 69, 19, 0.6);
    overflow: visible;
}

.frame-steampunk::before,
.message-avatar-wrapper.frame-steampunk::before {
    inset: -6px;
    border: 2px dashed #d4af37;
    /* Mosaz */
    opacity: 0.9;
    animation: frame-steampunk-gear 8s linear infinite;
}

.frame-steampunk::after,
.message-avatar-wrapper.frame-steampunk::after {
    inset: 2px;
    border: 1px dotted #8b4513;
    opacity: 0.7;
    animation: frame-steampunk-gear-reverse 12s linear infinite;
}

@keyframes frame-steampunk-gear {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes frame-steampunk-gear-reverse {
    0% {
        transform: rotate(360deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

/* --- 13. Shadow Frame (Event Horizon / Void Walker) --- */
/*
 * UPDATE: Event Horizon - 3. nejdražší.
 * Masivní gravitační deformace. Temné jádro s extrémně jasným akrečním diskem.
 * Působí těžce a nebezpečně.
 */
.frame-shadow,
.message-avatar-wrapper.frame-shadow {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #000;
    /* Absolutní temnota uprostřed */
    box-shadow:
        inset 0 0 40px #000,
        /* Hluboký vnitřní stín */
        0 0 10px rgba(76, 0, 255, 0.6),
        /* Vnitřní korona */
        0 0 25px rgba(130, 70, 255, 0.4),
        /* Vnější záře */
        0 0 60px rgba(0, 0, 0, 0.8);
    /* Gravitační stín okolí */
    overflow: visible;
    z-index: 10;
    /* Pomalá, zlověstná pulsace */
    animation: frame-event-horizon-pulse 5s ease-in-out infinite;
}

/* Akreční disk - rotující hmota */
.frame-shadow::before,
.message-avatar-wrapper.frame-shadow::before {
    inset: -6px;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
            transparent 0%,
            rgba(100, 50, 255, 0.1) 20%,
            rgba(255, 255, 255, 0.8) 45%,
            /* Nejjasnější bod disku */
            rgba(100, 50, 255, 0.1) 55%,
            transparent 80%);
    filter: blur(2px);
    mix-blend-mode: screen;
    animation: frame-event-horizon-spin 3s linear infinite;
}

/* Gravitační čočka / Deformace prostoru */
.frame-shadow::after,
.message-avatar-wrapper.frame-shadow::after {
    inset: -12px;
    border: 2px solid rgba(138, 43, 226, 0.15);
    border-top: 2px solid rgba(255, 255, 255, 0.4);
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(76, 0, 255, 0.2);
    /* Rychlejší rotace vnějšího disku + deformace */
    animation: frame-event-horizon-warp 8s linear infinite;
}

@keyframes frame-event-horizon-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes frame-event-horizon-warp {
    0% {
        transform: rotate(0deg) scale(1);
        opacity: 0.8;
    }

    50% {
        transform: rotate(180deg) scale(1.05);
        opacity: 0.5;
    }

    100% {
        transform: rotate(360deg) scale(1);
        opacity: 0.8;
    }
}

@keyframes frame-event-horizon-pulse {

    0%,
    100% {
        box-shadow: inset 0 0 40px #000, 0 0 20px rgba(76, 0, 255, 0.5);
    }

    50% {
        box-shadow: inset 0 0 50px #000, 0 0 35px rgba(100, 50, 255, 0.7);
    }
}

/* --- 14. Holo Frame (Projector) --- */
/*
 * UPDATE: Hologram - 5. nejdražší.
 * High-tech projekce. Čistší linie, data-ring okolo a občasný glitch.
 * Barva posunuta více do "Electric Blue".
 */
.frame-holo,
.message-avatar-wrapper.frame-holo {
    border: 2px solid rgba(0, 255, 242, 0.5);
    box-shadow:
        0 0 10px rgba(0, 255, 242, 0.3),
        inset 0 0 20px rgba(0, 255, 242, 0.1);
    background:
        repeating-linear-gradient(transparent 0px,
            transparent 2px,
            rgba(0, 255, 242, 0.05) 3px,
            rgba(0, 255, 242, 0.05) 4px);
    overflow: visible;
}

/* Rotující segmenty datového kruhu */
.frame-holo::before,
.message-avatar-wrapper.frame-holo::before {
    inset: -6px;
    border: 1px dashed rgba(0, 255, 242, 0.4);
    border-top: 2px solid rgba(0, 255, 242, 0.9);
    border-bottom: 2px solid rgba(0, 255, 242, 0.9);
    mask: conic-gradient(from 0deg, transparent 10%, black 20%, black 40%, transparent 50%, black 60%, black 90%, transparent 100%);
    -webkit-mask: conic-gradient(from 0deg, transparent 10%, black 20%, black 40%, transparent 50%, black 60%, black 90%, transparent 100%);
    animation: frame-holo-rotate-ring 6s linear infinite;
}

/* Scanline paprsek */
.frame-holo::after,
.message-avatar-wrapper.frame-holo::after {
    inset: 0;
    background: linear-gradient(to bottom, transparent 40%, rgba(0, 255, 242, 0.4) 50%, transparent 60%);
    background-size: 100% 300%;
    mix-blend-mode: overlay;
    animation: frame-holo-scan-beam 2.5s ease-in-out infinite;
    opacity: 0.6;
}

/* Přidání občasného glitche celého kontejneru */
.frame-holo:hover,
.message-avatar-wrapper.frame-holo:hover {
    animation: frame-holo-glitch-shake 0.3s cubic-bezier(.25, .46, .45, .94) both infinite;
}

@keyframes frame-holo-rotate-ring {
    0% {
        transform: rotate(0deg);
        opacity: 0.7;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: rotate(360deg);
        opacity: 0.7;
    }
}

@keyframes frame-holo-scan-beam {
    0% {
        background-position: 0% -50%;
    }

    100% {
        background-position: 0% 150%;
    }
}

@keyframes frame-holo-glitch-shake {
    0% {
        transform: translate(0);
    }

    20% {
        transform: translate(-2px, 2px);
    }

    40% {
        transform: translate(-2px, -2px);
    }

    60% {
        transform: translate(2px, 2px);
    }

    80% {
        transform: translate(2px, -2px);
    }

    100% {
        transform: translate(0);
    }
}

/* --- 15. Galaxy Frame (Event Horizon) --- */
/*
 * UPDATE: Event Horizon - 3. nejdražší (OPRAVENO).
 * Nyní unikátní vzhled: Galaktická mlhovina, spirální ramena a hvězdný prach.
 * Kombinace Deep Purple, Cyan a Magenty. Působí jako živoucí vesmír.
 */
.frame-galaxy,
.message-avatar-wrapper.frame-galaxy {
    border: 2px solid rgba(123, 31, 162, 0.6);
    /* Deep Purple hranice */
    background: radial-gradient(circle at center, transparent 30%, #0a001a 100%);
    box-shadow:
        0 0 15px rgba(123, 31, 162, 0.8),
        0 0 30px rgba(0, 212, 255, 0.5),
        inset 0 0 20px rgba(0, 0, 0, 0.8);
    overflow: visible;
    z-index: 10;
    animation: frame-galaxy-pulse 4s ease-in-out infinite;
}

/* Spirální ramena galaxie - rotující mlhovina */
.frame-galaxy::before,
.message-avatar-wrapper.frame-galaxy::before {
    inset: -8px;
    background: conic-gradient(from 0deg,
            transparent 0%,
            rgba(138, 43, 226, 0.8) 25%,
            /* BlueViolet */
            transparent 45%,
            rgba(0, 255, 255, 0.7) 50%,
            /* Cyan */
            transparent 70%,
            rgba(255, 0, 255, 0.6) 85%,
            /* Magenta */
            transparent 100%);
    filter: blur(5px);
    mix-blend-mode: screen;
    /* Zářivý efekt přes avatar */
    border-radius: 50%;
    animation: frame-galaxy-spin 6s linear infinite;
}

/* Hvězdný prach a vnější prstenec */
.frame-galaxy::after,
.message-avatar-wrapper.frame-galaxy::after {
    inset: -4px;
    border: 1px dashed rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    /* Simulace hvězd pomocí vícenásobných stínů */
    box-shadow:
        0 0 10px rgba(138, 43, 226, 0.4) inset,
        0 -15px 10px -5px rgba(0, 255, 255, 0.6),
        /* Orbitující světlo 1 */
        0 15px 10px -5px rgba(255, 0, 255, 0.6);
    /* Orbitující světlo 2 */
    opacity: 0.8;
    animation: frame-galaxy-orbit 8s linear infinite reverse;
}

/* --- Keyframes pro Galaxy Frame --- */

@keyframes frame-galaxy-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes frame-galaxy-orbit {
    0% {
        transform: rotate(0deg) scale(1);
        opacity: 0.8;
    }

    50% {
        transform: rotate(-180deg) scale(1.05);
        opacity: 1;
    }

    100% {
        transform: rotate(-360deg) scale(1);
        opacity: 0.8;
    }
}

@keyframes frame-galaxy-pulse {

    0%,
    100% {
        box-shadow:
            0 0 15px rgba(123, 31, 162, 0.8),
            0 0 30px rgba(0, 212, 255, 0.5);
    }

    50% {
        box-shadow:
            0 0 25px rgba(148, 0, 211, 0.9),
            0 0 50px rgba(0, 255, 255, 0.7);
    }
}

/* --- 16. Command Line (Příkazová Řádka) --- */
/* Old-school terminál, jemně živý, ale ne přepálený */
.frame-cmd,
.message-avatar-wrapper.frame-cmd {
    border: 3px solid #0c0c0c;
    box-shadow:
        0 0 0 2px #0f0,
        0 0 14px rgba(0, 255, 0, 0.45);
    background:
        radial-gradient(circle at 50% 40%, rgba(0, 255, 0, 0.08), transparent 65%),
        #050505;
    overflow: visible;
    animation: frame-cmd-breathe 3.2s ease-in-out infinite;
}

.frame-cmd::before,
.message-avatar-wrapper.frame-cmd::before {
    /* Blikající "status bar" / prompt nahoře */
    inset: -6px;
    border-top: 3px solid #0f0;
    border-radius: 50%;
    opacity: 0.85;
    box-shadow: 0 0 8px rgba(0, 255, 0, 0.7);
    animation: frame-cmd-blink 1.1s steps(2, start) infinite;
}

.frame-cmd::after,
.message-avatar-wrapper.frame-cmd::after {
    /* Jemný CRT scanline efekt + lehký šum */
    inset: 0;
    background:
        linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 255, 0, 0.05) 50%),
        repeating-linear-gradient(45deg, rgba(0, 255, 0, 0.04), transparent 2px, transparent 4px);
    background-size: 100% 4px, 6px 6px;
    pointer-events: none;
    z-index: 2;
    mix-blend-mode: screen;
}

@keyframes frame-cmd-blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.1;
    }
}

@keyframes frame-cmd-breathe {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 2px #0f0, 0 0 14px rgba(0, 255, 0, 0.45);
    }

    50% {
        transform: scale(1.015);
        box-shadow: 0 0 0 2px #0f0, 0 0 20px rgba(0, 255, 0, 0.7);
    }
}

/* --- 17. Blueprint (Architekt) --- */
/* Technická mřížka, jemný glow a rotující měření */
.frame-blueprint,
.message-avatar-wrapper.frame-blueprint {
    border: 2px solid rgba(255, 255, 255, 0.55);
    background-color: #002b59;
    /* Blueprint modrá */
    /* Mřížka milimetrového papíru */
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
    background-size: 10px 10px;
    box-shadow:
        0 0 0 3px #001838,
        0 0 14px rgba(0, 120, 255, 0.6);
    overflow: visible;
}

.frame-blueprint::before,
.message-avatar-wrapper.frame-blueprint::before {
    /* Rotující měřící kružnice */
    inset: -8px;
    border: 1px dashed rgba(255, 255, 255, 0.7);
    animation: frame-blueprint-rotate 18s linear infinite;
    box-shadow: 0 0 10px rgba(0, 153, 255, 0.4);
}

.frame-blueprint::after,
.message-avatar-wrapper.frame-blueprint::after {
    /* Fixní technické značky a křížový střed */
    inset: -4px;
    border: 2px solid transparent;
    border-top-color: rgba(255, 255, 255, 0.85);
    border-bottom-color: rgba(255, 255, 255, 0.85);
    transform: rotate(45deg);
    opacity: 0.8;
    box-shadow:
        0 0 8px rgba(255, 255, 255, 0.35) inset,
        0 0 12px rgba(0, 153, 255, 0.4);
}

@keyframes frame-blueprint-rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* --- 18. Coffee (Kofeinový Pohon) --- */
/* Horká káva s animovanou párou a teplým vnitřkem */
.frame-coffee,
.message-avatar-wrapper.frame-coffee {
    border: 4px solid #3e2723;
    /* Tmavá káva */
    box-shadow:
        0 0 0 2px #d7ccc8,
        /* Pěna */
        0 0 12px rgba(62, 39, 35, 0.8);
    overflow: visible;
    background:
        radial-gradient(circle at 50% 40%, #6d4c41 0%, #3e2723 55%, #1b0f0c 100%);
    animation: frame-coffee-warmth 4.5s ease-in-out infinite;
}

.frame-coffee::before,
.message-avatar-wrapper.frame-coffee::before {
    /* Animace stoupající páry */
    inset: -18px;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.4), transparent 70%);
    filter: blur(10px);
    opacity: 0;
    transform: translateY(12px) scale(0.85);
    animation: frame-coffee-steam 3s ease-out infinite;
}

.frame-coffee::after,
.message-avatar-wrapper.frame-coffee::after {
    /* Jemný highlight „pěny“ na horní části */
    inset: 4px;
    background: radial-gradient(circle at 50% 20%, rgba(255, 248, 220, 0.3), transparent 60%);
    opacity: 0.9;
    box-shadow: inset 0 0 12px rgba(33, 16, 12, 0.8);
}

@keyframes frame-coffee-steam {
    0% {
        transform: translateY(12px) scale(0.8);
        opacity: 0;
    }

    40% {
        opacity: 0.6;
    }

    100% {
        transform: translateY(-22px) scale(1.2);
        opacity: 0;
    }
}

@keyframes frame-coffee-warmth {

    0%,
    100% {
        box-shadow: 0 0 0 2px #d7ccc8, 0 0 12px rgba(62, 39, 35, 0.8);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 0 2px #ffe0b2, 0 0 18px rgba(93, 64, 55, 1);
        transform: scale(1.01);
    }
}

/* --- 19. Circuit (Základní Deska) --- */
/* PCB vzhled, tmavě zelená se zlatými cestami */
.frame-circuit,
.message-avatar-wrapper.frame-circuit {
    border: 3px solid #004d00;
    background: #001a00;
    box-shadow:
        0 0 6px rgba(0, 255, 0, 0.3),
        inset 0 0 12px #000;
    overflow: visible;
}

.frame-circuit::before,
.message-avatar-wrapper.frame-circuit::before {
    /* Simulace tištěných spojů pomocí gradientů */
    inset: -4px;
    background:
        repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(184, 115, 51, 0.42) 10px, rgba(184, 115, 51, 0.42) 12px),
        repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(184, 115, 51, 0.25) 15px, rgba(184, 115, 51, 0.25) 16px);
    border: 1px solid rgba(184, 115, 51, 0.6);
    /* Měď */
    z-index: -1;
    opacity: 0.9;
    animation: frame-circuit-flow 10s linear infinite;
}

.frame-circuit::after,
.message-avatar-wrapper.frame-circuit::after {
    /* Data puls putující po obvodu */
    inset: -2px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: #0f0;
    animation: frame-circuit-pulse 4s linear infinite;
    filter: drop-shadow(0 0 3px #0f0);
}

@keyframes frame-circuit-flow {
    0% {
        background-position: 0 0, 0 0;
    }

    100% {
        background-position: 40px 40px, -40px -40px;
    }
}

@keyframes frame-circuit-pulse {
    0% {
        transform: rotate(0deg);
        opacity: 0.4;
    }

    25% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        transform: rotate(360deg);
        opacity: 0.4;
    }
}

/* --- 20. Carbon Fiber Frame --- */
/*
 * UPDATE: Carbon Fiber - 7. nejdražší.
 * Realistický "weave" vzor + silný lakovaný odlesk (Clear Coat).
 * Působí pevně a luxusně.
 */
.frame-carbon,
.message-avatar-wrapper.frame-carbon {
    /* Tmavý kovový okraj */
    border: 3px solid #2a2a2a;
    box-shadow:
        0 0 5px rgba(0, 0, 0, 1),
        inset 0 0 10px rgba(0, 0, 0, 0.8);

    /* Vzor uhlíkových vláken */
    background:
        linear-gradient(135deg, #111 25%, transparent 25%) -10px 0,
        linear-gradient(225deg, #111 25%, transparent 25%) -10px 0,
        linear-gradient(315deg, #111 25%, transparent 25%),
        linear-gradient(45deg, #111 25%, transparent 25%);
    background-size: 20px 20px;
    background-color: #1a1a1a;
    overflow: visible;
}

/* Specular Highlight - Odlesk světla na laku */
.frame-carbon::before,
.message-avatar-wrapper.frame-carbon::before {
    inset: -2px;
    background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.25) 50%, transparent 65%);
    background-size: 250% 100%;
    border-radius: 50%;
    z-index: 2;
    pointer-events: none;
    animation: frame-carbon-shine 4s ease-in-out infinite;
}

/* Vnější ocelový kroužek pro kontrast */
.frame-carbon::after,
.message-avatar-wrapper.frame-carbon::after {
    inset: -5px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

@keyframes frame-carbon-shine {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -150% 0;
    }
}

/* --- 21. Portal (Wormhole) --- */
/* Oranžovo-modrý kontrast (Portal reference), vířivý efekt */
.frame-portal,
.message-avatar-wrapper.frame-portal {
    border: 2px solid transparent;
    box-shadow:
        0 0 15px rgba(255, 100, 0, 0.6),
        0 0 30px rgba(0, 100, 255, 0.4);
    overflow: visible;
    background: radial-gradient(circle at 50% 50%, #000 35%, #040618 100%);
}

.frame-portal::before,
.message-avatar-wrapper.frame-portal::before {
    /* Spirála portálu */
    inset: -6px;
    background: conic-gradient(from 0deg, #ff7b00, transparent 30%, #00aeff, transparent 60%, #ff7b00);
    filter: blur(4px);
    animation: frame-portal-spin 2.1s linear infinite;
    opacity: 0.95;
}

.frame-portal::after,
.message-avatar-wrapper.frame-portal::after {
    /* Vnitřní horizont */
    inset: 3px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow:
        inset 0 0 12px #000,
        0 0 10px rgba(0, 140, 255, 0.45);
    background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.8) 35%, transparent 70%);
}

@keyframes frame-portal-spin {
    0% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(190deg) scale(1.05);
    }

    100% {
        transform: rotate(360deg) scale(1);
    }
}

/* --- 22. Quantum Frame (Superposition) --- */
/*
 * UPDATE: Quantum - NEJDRAŽŠÍ RÁMEČEK (#1) - REWORKED.
 * Místo "třepání" využívá efekt rotujících pravděpodobnostních polí.
 * Vzhled: Éterický, nestabilní energetický prstenec (Cyan/Magenta/White).
 * Působí jako trhlina v časoprostoru.
 */
.frame-quantum,
.message-avatar-wrapper.frame-quantum {
    border: 2px solid transparent;
    /* Temné jádro s jemným fialovým nádechem */
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.05) 0%, rgba(10, 0, 30, 0.6) 100%);
    box-shadow:
        0 0 15px rgba(0, 255, 255, 0.5),
        /* Cyan aura */
        0 0 35px rgba(255, 0, 255, 0.4),
        /* Magenta aura */
        inset 0 0 20px rgba(255, 255, 255, 0.15);
    overflow: visible;
    z-index: 100;
    /* Stabilnější, ale dýchající základ */
    animation: frame-quantum-flux 4s ease-in-out infinite;
}

/* První vrstva superpozice - Cyan pole */
.frame-quantum::before,
.message-avatar-wrapper.frame-quantum::before {
    inset: -6px;
    border-radius: 50%;
    /* Rotující gradient simulující kvantový šum */
    background: conic-gradient(from 0deg,
            transparent 0%,
            rgba(0, 255, 255, 0.8) 20%,
            transparent 40%,
            rgba(0, 255, 255, 0.4) 60%,
            transparent 80%,
            rgba(0, 255, 255, 0.8) 100%);
    mix-blend-mode: screen;
    /* Zářivé promíchání */
    filter: blur(3px);
    opacity: 0.9;
    animation: frame-quantum-spin-1 5s linear infinite;
}

/* Druhá vrstva superpozice - Magenta pole (protichůdný pohyb) */
.frame-quantum::after,
.message-avatar-wrapper.frame-quantum::after {
    inset: -6px;
    border-radius: 50%;
    background: conic-gradient(from 180deg,
            transparent 0%,
            rgba(255, 0, 255, 0.8) 20%,
            transparent 40%,
            rgba(255, 0, 255, 0.4) 60%,
            transparent 80%,
            rgba(255, 0, 255, 0.8) 100%);
    mix-blend-mode: screen;
    filter: blur(2px);
    opacity: 0.8;
    /* Rychlejší a opačná rotace */
    animation: frame-quantum-spin-2 3.5s linear infinite reverse;
}

/* Hover efekt: Zhroucení vlnové funkce (Zintenzivnění energie) */
.frame-quantum:hover,
.message-avatar-wrapper.frame-quantum:hover {
    box-shadow:
        0 0 25px rgba(0, 255, 255, 0.9),
        0 0 60px rgba(255, 0, 255, 0.8),
        0 0 15px rgba(255, 255, 255, 0.8) inset;
    /* Bílé jádro */
    transform: scale(1.05);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Zrychlení rotace na hover pro pseudo-elementy */
.frame-quantum:hover::before,
.message-avatar-wrapper.frame-quantum:hover::before {
    animation-duration: 1.5s;
    filter: blur(1px);
    /* Zaostření */
    opacity: 1;
}

.frame-quantum:hover::after,
.message-avatar-wrapper.frame-quantum:hover::after {
    animation-duration: 1s;
    filter: blur(1px);
    /* Zaostření */
    opacity: 1;
}

/* --- Keyframes pro Quantum Frame --- */

@keyframes frame-quantum-flux {

    0%,
    100% {
        box-shadow: 0 0 15px rgba(0, 255, 255, 0.5), 0 0 35px rgba(255, 0, 255, 0.4);
    }

    50% {
        box-shadow: 0 0 25px rgba(0, 255, 255, 0.7), 0 0 50px rgba(255, 0, 255, 0.6);
    }
}

@keyframes frame-quantum-spin-1 {
    0% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(180deg) scale(1.02);
    }

    /* Jemná expanze */
    100% {
        transform: rotate(360deg) scale(1);
    }
}

@keyframes frame-quantum-spin-2 {
    0% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(180deg) scale(0.98);
    }

    /* Jemná kontrakce */
    100% {
        transform: rotate(360deg) scale(1);
    }
}

/* --- VÁNOČNÍ SPECIÁL (Holiday Event) --- */

/* --- 23. Xmas Lights (Vánoční Světýlka) --- */
/* Řetěz barevných světel, která se střídavě rozsvěcí a "běží" okolo */
.frame-xmas-lights,
.message-avatar-wrapper.frame-xmas-lights {
    border: 3px solid #2f3640;
    /* Tmavý kabel */
    /* Základní temné pozadí, aby světla vynikla */
    background: radial-gradient(circle, transparent 60%, rgba(0, 0, 0, 0.2) 100%);
    box-shadow:
        0 0 5px rgba(0, 0, 0, 0.8),
        inset 0 0 10px rgba(0, 0, 0, 0.5);
    overflow: visible;
}

.frame-xmas-lights::before,
.message-avatar-wrapper.frame-xmas-lights::before {
    /* Barevná světla (Red, Gold, Green, Blue) */
    inset: -6px;
    border-radius: 50%;
    padding: 4px;
    /* Tloušťka světel */
    background: conic-gradient(from 0deg,
            #ff0000,
            transparent 10%,
            #ffd700,
            transparent 35%,
            #00ff00,
            transparent 60%,
            #00ffff,
            transparent 85%,
            #ff0000);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    opacity: 0.8;
    filter: blur(1px);
    animation: frame-xmas-lights-spin 4s linear infinite;
}

.frame-xmas-lights::after,
.message-avatar-wrapper.frame-xmas-lights::after {
    /* Glow efekt pro světla - pulzuje */
    inset: -8px;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
            rgba(255, 0, 0, 0.8),
            transparent 15%,
            rgba(255, 215, 0, 0.8),
            transparent 40%,
            rgba(0, 255, 0, 0.8),
            transparent 65%,
            rgba(0, 255, 255, 0.8),
            transparent 90%,
            rgba(255, 0, 0, 0.8));
    filter: blur(8px);
    opacity: 0.6;
    mix-blend-mode: screen;
    animation: frame-xmas-lights-spin 4s linear infinite;
}

@keyframes frame-xmas-lights-spin {
    0% {
        transform: rotate(0deg);
        filter: blur(8px) brightness(1);
    }

    50% {
        transform: rotate(180deg);
        filter: blur(10px) brightness(1.3);
    }

    100% {
        transform: rotate(360deg);
        filter: blur(8px) brightness(1);
    }
}

/* --- 24. Candy Cane (Cukrová Hůlka) --- */
/* Červeno-bílé pruhy s rotací a efektem cukrové polevy */
.frame-xmas-santa,
.message-avatar-wrapper.frame-xmas-santa {
    border: 3px solid rgba(255, 255, 255, 0.3);
    /* Jemný červený opar kolem */
    box-shadow: 0 0 15px rgba(212, 28, 44, 0.4);
    background: transparent;
    overflow: visible;
}

/* Rotující proužky (Lízátko) */
.frame-xmas-santa::before,
.message-avatar-wrapper.frame-xmas-santa::before {
    inset: -6px;
    border-radius: 50%;
    /* Vytvoření pruhů pomocí kónického gradientu */
    background: repeating-conic-gradient(from 0deg,
            #d41c2c 0deg 20deg,
            #ffffff 20deg 40deg);
    /* Oříznutí středu, aby vznikl prstenec */
    mask: radial-gradient(transparent 64%, black 65%);
    -webkit-mask: radial-gradient(transparent 64%, black 65%);

    /* Pomalá rotace "cukrátka" */
    animation: frame-candy-spin 20s linear infinite;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

/* Lesklý povrch (Sugar Glaze / Glass effect) */
.frame-xmas-santa::after,
.message-avatar-wrapper.frame-xmas-santa::after {
    inset: -6px;
    border-radius: 50%;
    /* Odlesk světla shora vlevo */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, transparent 40%, rgba(255, 255, 255, 0.2) 100%);
    opacity: 0.7;
    pointer-events: none;
    mix-blend-mode: overlay;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

@keyframes frame-candy-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* --- 25. Frozen Monitor (Ultra Premium - "Absolute Zero+") --- */
.frame-xmas-frozen,
.message-avatar-wrapper.frame-xmas-frozen {
    position: relative;
    z-index: 1;
    overflow: hidden;

    /* ladění jedním místem */
    --r: 50%;
    --ice-a: rgba(225, 252, 255, 0.95);
    --ice-b: rgba(120, 220, 255, 0.55);
    --ice-c: rgba(0, 150, 255, 0.38);
    --glow: rgba(0, 255, 255, 0.45);

    border-radius: var(--r);
    border: 2px solid rgba(210, 247, 255, 0.9);

    /* “sklo + hloubka” (víc vrstev, ale bez rušení) */
    background:
        radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.30) 0 18%, transparent 52%),
        radial-gradient(circle at 72% 78%, rgba(0, 160, 255, 0.22) 0 32%, transparent 62%),
        conic-gradient(from 210deg,
            rgba(255, 255, 255, 0.18),
            rgba(0, 210, 255, 0.14),
            rgba(255, 255, 255, 0.10),
            rgba(0, 120, 255, 0.16),
            rgba(255, 255, 255, 0.18)),
        radial-gradient(circle at 50% 55%,
            rgba(10, 90, 170, 0.10) 0%,
            rgba(0, 140, 255, 0.22) 55%,
            rgba(0, 90, 200, 0.32) 100%);
    background-blend-mode: screen, screen, normal, normal;

    box-shadow:
        /* vnější aura */
        0 0 14px 2px var(--glow),
        0 0 34px rgba(255, 255, 255, 0.35),
        /* “tloušťka ledu” */
        inset 0 0 0 2px rgba(255, 255, 255, 0.45),
        inset 0 0 22px rgba(0, 110, 255, 0.35),
        /* jemný “rim” pro premium okraj */
        0 0 0 1px rgba(255, 255, 255, 0.25);

    backdrop-filter: blur(2px) saturate(1.08);
    -webkit-backdrop-filter: blur(2px) saturate(1.08);
}

/* doporučeno: aby avatar uvnitř seděl jak ulitý */
.frame-xmas-frozen>img,
.message-avatar-wrapper.frame-xmas-frozen>img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
    object-fit: cover;
}

/* Vrstva 1: okrajová námraza + mikroprasklinky + decentní třpyt */
.frame-xmas-frozen::before,
.message-avatar-wrapper.frame-xmas-frozen::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--r);
    z-index: 2;
    pointer-events: none;

    background:
        /* jemné třpytky (mikro) */
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.35) 0 1px, transparent 2px),
        radial-gradient(circle at 70% 25%, rgba(255, 255, 255, 0.28) 0 1px, transparent 2px),
        radial-gradient(circle at 62% 80%, rgba(255, 255, 255, 0.22) 0 1px, transparent 2px),

        /* prasklinky (hodně jemně) */
        repeating-linear-gradient(115deg,
            rgba(255, 255, 255, 0.00) 0 10px,
            rgba(255, 255, 255, 0.10) 10px 11px,
            rgba(255, 255, 255, 0.00) 11px 22px),

        /* krystalické “kroužky” u okrajů */
        repeating-radial-gradient(circle at 40% 35%,
            rgba(255, 255, 255, 0.00) 0 10px,
            rgba(255, 255, 255, 0.08) 10px 11px,
            rgba(0, 190, 255, 0.06) 11px 12px,
            rgba(255, 255, 255, 0.00) 12px 22px),

        /* okrajová námraza (vignette) */
        radial-gradient(circle,
            transparent 56%,
            rgba(180, 240, 255, 0.26) 78%,
            rgba(255, 255, 255, 0.62) 100%);

    background-size:
        140% 140%,
        150% 150%,
        160% 160%,
        180% 180%,
        180% 180%,
        100% 100%;

    mix-blend-mode: screen;

    /* maska, aby se “detail” držel hlavně u okraje */
    -webkit-mask-image: radial-gradient(circle, transparent 48%, #000 74%);
    mask-image: radial-gradient(circle, transparent 48%, #000 74%);

    animation: frozen-drift 10s ease-in-out infinite;
}

/* Vrstva 2: prémiový glint (měkčí, skleněnější) */
.frame-xmas-frozen::after,
.message-avatar-wrapper.frame-xmas-frozen::after {
    content: "";
    position: absolute;
    inset: -60%;
    border-radius: var(--r);
    z-index: 3;
    pointer-events: none;

    background: linear-gradient(to bottom right,
            transparent 44%,
            rgba(255, 255, 255, 0.00) 47%,
            rgba(255, 255, 255, 0.55) 49%,
            rgba(255, 255, 255, 0.95) 50%,
            rgba(255, 255, 255, 0.55) 51%,
            rgba(255, 255, 255, 0.00) 53%,
            transparent 56%);

    mix-blend-mode: screen;
    filter: blur(0.2px);
    transform: rotate(28deg) translate(-120%, -120%);
    opacity: 0;

    animation: frozen-glint 6.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* decentní “život” textury */
@keyframes frozen-drift {

    0%,
    100% {
        background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 50% 50%;
        opacity: 0.92;
    }

    50% {
        background-position: 6% 4%, -4% 6%, 5% -3%, 3% 5%, -3% 2%, 50% 50%;
        opacity: 1;
    }
}

/* glint s dlouhou pauzou */
@keyframes frozen-glint {
    0% {
        transform: rotate(28deg) translate(-120%, -120%);
        opacity: 0;
    }

    9% {
        opacity: 0.95;
    }

    18% {
        transform: rotate(28deg) translate(120%, 120%);
        opacity: 0;
    }

    100% {
        transform: rotate(28deg) translate(120%, 120%);
        opacity: 0;
    }
}

/* přístupnost */
@media (prefers-reduced-motion: reduce) {

    .frame-xmas-frozen::before,
    .frame-xmas-frozen::after {
        animation: none !important;
    }
}

/* --- 26. New Year Fireworks (Půlnoční Ohňostroj) --- */
/*
 * Efekt: Dynamická exploze barev (zlatá, červená, fialová).
 * Využívá rychlou rotaci kónického gradientu a "burst" pulsaci stínu.
 */
.frame-new-year-fireworks,
.message-avatar-wrapper.frame-new-year-fireworks {
    border: 2px solid rgba(255, 215, 0, 0.5);
    /* Zlatý poloprůhledný okraj */
    box-shadow:
        0 0 15px rgba(255, 0, 0, 0.6),
        0 0 30px rgba(138, 43, 226, 0.5);
    background: radial-gradient(circle, #1a0b2e 40%, transparent 100%);
    overflow: visible;
    animation: frame-fireworks-burst 2s ease-in-out infinite;
}

/* Rotující jiskry a paprsky */
.frame-new-year-fireworks::before,
.message-avatar-wrapper.frame-new-year-fireworks::before {
    inset: -8px;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
            #ff0055,
            /* Magenta Red */
            transparent 10%,
            #ffd700,
            /* Gold */
            transparent 25%,
            #00ffff,
            /* Cyan */
            transparent 40%,
            #ff00ff,
            /* Purple */
            transparent 55%,
            #ffd700,
            /* Gold */
            transparent 70%,
            #ff0055,
            transparent 85%,
            #ff0055);
    mask: radial-gradient(transparent 55%, black 60%);
    -webkit-mask: radial-gradient(transparent 55%, black 60%);
    filter: blur(1px);
    opacity: 0.9;
    animation: frame-fireworks-spin 3s linear infinite;
}

/* Záblesk / Shockwave uprostřed */
.frame-new-year-fireworks::after,
.message-avatar-wrapper.frame-new-year-fireworks::after {
    inset: -2px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
    animation: frame-fireworks-shockwave 2s ease-out infinite;
    mix-blend-mode: screen;
}

@keyframes frame-fireworks-spin {
    0% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(180deg) scale(1.05);
    }

    100% {
        transform: rotate(360deg) scale(1);
    }
}

@keyframes frame-fireworks-burst {

    0%,
    100% {
        box-shadow: 0 0 15px rgba(255, 0, 0, 0.6), 0 0 30px rgba(138, 43, 226, 0.5);
        border-color: rgba(255, 215, 0, 0.5);
    }

    50% {
        box-shadow: 0 0 25px rgba(255, 215, 0, 0.8), 0 0 50px rgba(255, 0, 100, 0.7);
        border-color: rgba(255, 255, 255, 0.9);
    }
}

@keyframes frame-fireworks-shockwave {
    0% {
        transform: scale(0.9);
        opacity: 0;
    }

    50% {
        opacity: 0.8;
    }

    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

/* --- 27. Champagne (Bublinková Koupel) --- */
/*
 * Efekt: Luxusní zlatá kapalina se stoupajícími bublinkami.
 * Bublinky jsou simulovány pomocí posunu (background-position) radiálních gradientů.
 */
.frame-champagne,
.message-avatar-wrapper.frame-champagne {
    border: 3px solid #e6ac00;
    /* Amber Gold */
    box-shadow:
        0 0 10px rgba(230, 172, 0, 0.6),
        inset 0 0 15px rgba(100, 70, 0, 0.8);
    background: radial-gradient(circle at 30% 30%, rgba(255, 245, 200, 0.2), rgba(230, 172, 0, 0.1));
    overflow: visible;
}

/* Vrstva bublinek - stoupají nahoru */
.frame-champagne::before,
.message-avatar-wrapper.frame-champagne::before {
    inset: 0;
    border-radius: 50%;
    opacity: 0.7;
    /* Pattern bublinek */
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.8) 1px, transparent 2px),
        radial-gradient(rgba(255, 255, 220, 0.7) 1.5px, transparent 2.5px),
        radial-gradient(rgba(255, 255, 255, 0.6) 1px, transparent 2px);
    background-size: 20px 20px, 35px 35px, 15px 15px;
    background-position: 0 0, 0 0, 0 0;
    mask: radial-gradient(circle, black 60%, transparent 100%);
    /* Bublinky jen uvnitř */
    -webkit-mask: radial-gradient(circle, black 60%, transparent 100%);
    animation: frame-champagne-bubbles 4s linear infinite;
}

/* Skleněný odlesk a "Fizz" okraj */
.frame-champagne::after,
.message-avatar-wrapper.frame-champagne::after {
    inset: -4px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow:
        0 0 12px rgba(255, 223, 100, 0.4),
        inset 0 4px 6px rgba(255, 255, 255, 0.3);
    /* Horní odlesk */
    pointer-events: none;
    animation: frame-champagne-fizz 3s ease-in-out infinite;
}

@keyframes frame-champagne-bubbles {
    0% {
        background-position: 0 100px, 10px 150px, -5px 120px;
    }

    100% {
        background-position: 0 0, 10px -50px, -5px -20px;
    }
}

@keyframes frame-champagne-fizz {

    0%,
    100% {
        box-shadow: 0 0 12px rgba(255, 223, 100, 0.4), inset 0 4px 6px rgba(255, 255, 255, 0.3);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 18px rgba(255, 223, 100, 0.6), inset 0 4px 10px rgba(255, 255, 255, 0.5);
        transform: scale(1.02);
    }
}

/* --- 28. Thunder Frame (High Voltage) --- */
/* * Efekt: Nestabilní elektrický oblouk.
 * Používá clip-path pro "cik-cak" blesky a rychlé stroboskopické efekty.
 */
.frame-thunder,
.message-avatar-wrapper.frame-thunder {
    border: 2px solid transparent;
    box-shadow:
        0 0 5px #fff,
        0 0 15px #00b7ff,
        inset 0 0 20px rgba(0, 183, 255, 0.5);
    background: #08081a;
    overflow: visible;
    z-index: 5;
}

/* Statické výboje kolem */
.frame-thunder::before,
.message-avatar-wrapper.frame-thunder::before {
    inset: -8px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 10%, #00d9ff 15%, transparent 20%, #fff 21%, transparent 40%, #00d9ff 80%, transparent 90%);
    mask: radial-gradient(transparent 65%, black 70%);
    -webkit-mask: radial-gradient(transparent 65%, black 70%);
    filter: drop-shadow(0 0 5px #00d9ff);
    animation: frame-thunder-spin 0.3s linear infinite reverse;
    opacity: 0.8;
}

/* Hlavní blesk (overlay) */
.frame-thunder::after,
.message-avatar-wrapper.frame-thunder::after {
    inset: -10px;
    border: 2px solid #fff;
    border-radius: 50%;
    opacity: 0;
    filter: blur(2px);
    box-shadow: 0 0 30px #00b7ff;
    animation: frame-thunder-strike 3s infinite;
}

@keyframes frame-thunder-spin {
    0% {
        transform: rotate(0deg);
        opacity: 0.4;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: rotate(360deg);
        opacity: 0.4;
    }
}

@keyframes frame-thunder-strike {

    0%,
    90% {
        opacity: 0;
        transform: scale(0.9);
    }

    92% {
        opacity: 1;
        transform: scale(1.1);
        border-color: #fff;
    }

    94% {
        opacity: 0.5;
        transform: scale(1.05);
        border-color: #00b7ff;
    }

    96% {
        opacity: 0.8;
        transform: scale(1.08);
    }

    100% {
        opacity: 0;
        transform: scale(1);
    }
}

/* --- 29. Magma Frame (Jádro Země) --- */
/*
 * UPDATE: Zlepšená viditelnost avatara.
 * Láva nyní teče pouze po obvodu (použití masky), střed zůstává čistý.
 * Zachována animace rotace a plovoucí krusty.
 */
.frame-magma,
.message-avatar-wrapper.frame-magma {
    border: 2px solid #3a0a0a;
    background: transparent;
    /* Původně plná barva, nyní transparentní pro viditelnost */
    box-shadow:
        0 0 12px #ff4500,
        0 0 25px rgba(255, 69, 0, 0.5),
        inset 0 0 10px rgba(0, 0, 0, 0.8);
    overflow: visible;
}

/* Žhavé jádro - nyní jako prstenec */
.frame-magma::before,
.message-avatar-wrapper.frame-magma::before {
    inset: -6px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #8b0000, #ff4500, #ffae00, #ff4500, #8b0000);
    filter: blur(4px);
    /* Vyříznutí středu pro avatara */
    mask: radial-gradient(transparent 62%, black 65%);
    -webkit-mask: radial-gradient(transparent 62%, black 65%);
    animation: frame-magma-roil 5s linear infinite;
    z-index: 2;
    /* Musí být nad, ale maska to ošetří */
}

/* Plovoucí tmavá krusta - pouze na obvodu */
.frame-magma::after,
.message-avatar-wrapper.frame-magma::after {
    inset: -8px;
    border-radius: 50%;
    background: repeating-radial-gradient(black, transparent 20px);
    background-size: 24px 24px;
    opacity: 0.7;
    mix-blend-mode: multiply;
    /* Vyříznutí středu */
    mask: radial-gradient(transparent 60%, black 64%);
    -webkit-mask: radial-gradient(transparent 60%, black 64%);
    animation: frame-magma-crust 10s linear infinite;
    z-index: 3;
}

/* 1. MAGMA (Jádro Země) */
@keyframes frame-magma-roil {
    0% {
        transform: rotate(0deg);
        filter: blur(4px);
    }

    50% {
        filter: blur(6px);
        /* Pulzování rozostření */
    }

    100% {
        transform: rotate(360deg);
        filter: blur(4px);
    }
}

@keyframes frame-magma-crust {
    0% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(-120deg) scale(1.1);
        /* Pomalý protipohyb a dýchání */
    }

    100% {
        transform: rotate(-360deg) scale(1);
    }
}

/* --- 30. Radar Frame (Sonar) --- */
/* * Efekt: Realistický military radar.
 * Zelená mřížka (grid) a rotující sken (sweep) s dozvukem (trail).
 */
.frame-radar,
.message-avatar-wrapper.frame-radar {
    border: 2px solid #0f0;
    box-shadow:
        0 0 10px #0f0,
        inset 0 0 20px rgba(0, 20, 0, 0.9);
    background: #001100;
    overflow: hidden;
}

/* Grid mřížka */
.frame-radar::before,
.message-avatar-wrapper.frame-radar::before {
    inset: 0;
    border-radius: 50%;
    background:
        repeating-radial-gradient(transparent 0, transparent 19px, rgba(0, 255, 0, 0.3) 20px),
        linear-gradient(90deg, transparent 49%, rgba(0, 255, 0, 0.3) 50%, transparent 51%),
        linear-gradient(0deg, transparent 49%, rgba(0, 255, 0, 0.3) 50%, transparent 51%);
    z-index: 1;
    pointer-events: none;
}

/* Radar Sweep (Rotující paprsek) */
.frame-radar::after,
.message-avatar-wrapper.frame-radar::after {
    inset: -50%;
    background: conic-gradient(from 0deg, transparent 75%, rgba(0, 255, 0, 0.1) 85%, rgba(0, 255, 0, 0.8) 100%);
    border-radius: 50%;
    animation: frame-radar-sweep 3s linear infinite;
    z-index: 2;
    mix-blend-mode: screen;
}

@keyframes frame-radar-sweep {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* --- 31. Synthwave Frame (Miami Vice) --- */
/* * Efekt: 80s Retro Sun & Grid.
 * Kombinuje lineární gradient pro mřížku dole a zářící slunce nahoře.
 */
.frame-synthwave,
.message-avatar-wrapper.frame-synthwave {
    border: 2px solid #ff00de;
    background: #240046;
    box-shadow:
        0 0 10px #ff00de,
        0 0 20px #00eaff;
    overflow: visible;
}

/* Retro Sun (Nahoře) */
.frame-synthwave::before,
.message-avatar-wrapper.frame-synthwave::before {
    content: '';
    position: absolute;
    top: -15%;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(to top, #ff00de, #ffae00);
    border-radius: 50% 50% 0 0;
    z-index: -1;
    filter: blur(4px);
    opacity: 0.8;
}

/* Cyber Grid (Dole) */
.frame-synthwave::after,
.message-avatar-wrapper.frame-synthwave::after {
    content: '';
    position: absolute;
    bottom: -10%;
    left: -10%;
    right: -10%;
    height: 60%;
    background:
        perspective(50px) repeating-linear-gradient(0deg, transparent, transparent 4px, #00eaff 5px, #00eaff 6px),
        linear-gradient(90deg, transparent 48%, #00eaff 49%, transparent 51%);
    border-radius: 0 0 50% 50%;
    z-index: -1;
    opacity: 0.6;
    transform: perspective(100px) rotateX(20deg);
}

/* --- 32. 404 Frame (Missing Texture) --- */
/* * Efekt: Glitch + Checkerboard.
 * Rámeček se náhodně "trhá" a posouvá pomocí clip-path (simulace RGB splitu).
 */
.frame-404,
.message-avatar-wrapper.frame-404 {
    border: 2px solid #000;
    /* Klasická Source Engine chybová textura */
    background-image: conic-gradient(#ff00ff 90deg, #000 90deg 180deg, #ff00ff 180deg 270deg, #000 270deg);
    background-size: 24px 24px;
    overflow: visible;
    animation: frame-404-shake 3s infinite steps(1);
}

/* Glitch vrstva 1 (Cyan offset) */
.frame-404::before,
.message-avatar-wrapper.frame-404::before {
    inset: -2px;
    background: inherit;
    mix-blend-mode: hard-light;
    opacity: 0.7;
    clip-path: polygon(0 0, 100% 0, 100% 20%, 0 20%);
    animation: frame-404-glitch-1 2.5s infinite linear alternate-reverse;
}

/* Glitch vrstva 2 (Magenta offset) */
.frame-404::after,
.message-avatar-wrapper.frame-404::after {
    inset: -2px;
    background: inherit;
    mix-blend-mode: exclusion;
    opacity: 0.7;
    clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%);
    animation: frame-404-glitch-2 3s infinite linear alternate;
}

@keyframes frame-404-shake {
    0% {
        transform: translate(0, 0);
    }

    95% {
        transform: translate(0, 0);
    }

    96% {
        transform: translate(-2px, 2px);
        filter: contrast(1.5);
    }

    97% {
        transform: translate(2px, -2px);
        filter: contrast(0.8) hue-rotate(90deg);
    }

    98% {
        transform: translate(0, 0);
    }
}

@keyframes frame-404-glitch-1 {
    0% {
        transform: translateX(0);
        clip-path: polygon(0 0, 100% 0, 100% 10%, 0 10%);
    }

    20% {
        transform: translateX(-3px);
        clip-path: polygon(0 20%, 100% 20%, 100% 30%, 0 30%);
    }

    100% {
        transform: translateX(2px);
        clip-path: polygon(0 80%, 100% 80%, 100% 90%, 0 90%);
    }
}

@keyframes frame-404-glitch-2 {
    0% {
        transform: translateX(0);
        clip-path: polygon(0 50%, 100% 50%, 100% 60%, 0 60%);
    }

    20% {
        transform: translateX(3px);
        clip-path: polygon(0 10%, 100% 10%, 100% 15%, 0 15%);
    }

    100% {
        transform: translateX(-2px);
        clip-path: polygon(0 90%, 100% 90%, 100% 95%, 0 95%);
    }
}

/* --- 33. Bio Frame (Biohazard) --- */
/* * Efekt: Živý organismus / Sliz.
 * Využívá "morphing" border-radius pro simulaci tekutiny.
 */
.frame-bio,
.message-avatar-wrapper.frame-bio {
    border: 2px solid transparent;
    box-shadow: inset 0 0 15px #1a3d00;
    background: #051400;
    overflow: visible;
}

/* Vnitřní sliz */
.frame-bio::before,
.message-avatar-wrapper.frame-bio::before {
    inset: -6px;
    background: rgba(94, 255, 0, 0.3);
    border: 2px solid #5eff00;
    box-shadow: 0 0 15px #5eff00;
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    animation: frame-bio-morph 6s ease-in-out infinite;
    z-index: -1;
}

/* Vnější toxické bubliny */
.frame-bio::after,
.message-avatar-wrapper.frame-bio::after {
    inset: -10px;
    border: 1px dashed rgba(94, 255, 0, 0.5);
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    animation: frame-bio-morph 8s ease-in-out infinite reverse;
    opacity: 0.6;
    z-index: -2;
}

@keyframes frame-bio-morph {
    0% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }

    50% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }

    100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
}

/* --- 34. Aurora Frame (Polární Záře) --- */
/* * Efekt: Vlnící se světelné závěsy.
 * Kombinace masek a pomalého pohybu gradientů pro éterický vzhled.
 */
.frame-aurora,
.message-avatar-wrapper.frame-aurora {
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow:
        0 0 15px rgba(0, 255, 128, 0.4),
        0 0 30px rgba(123, 31, 162, 0.3);
    overflow: visible;
    background: #000;
}

.frame-aurora::before,
.message-avatar-wrapper.frame-aurora::before {
    inset: -6px;
    border-radius: 50%;
    background: conic-gradient(from 180deg, #00ff88, #00d0ff, #9d00ff, #00ff88);
    filter: blur(8px);
    opacity: 0.8;
    animation: frame-aurora-spin 8s linear infinite;
    mask: radial-gradient(transparent 50%, black 70%);
    -webkit-mask: radial-gradient(transparent 50%, black 70%);
}

.frame-aurora::after,
.message-avatar-wrapper.frame-aurora::after {
    inset: -4px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    box-shadow: inset 0 0 10px rgba(0, 255, 255, 0.3);
}

@keyframes frame-aurora-spin {
    0% {
        transform: rotate(0deg) scale(1);
        filter: blur(8px) hue-rotate(0deg);
    }

    50% {
        transform: rotate(180deg) scale(1.05);
        filter: blur(12px) hue-rotate(45deg);
    }

    100% {
        transform: rotate(360deg) scale(1);
        filter: blur(8px) hue-rotate(0deg);
    }
}

/* --- 35. Solar Frame (Supernova) --- */
/*
 * UPDATE: Odstraněn overlay přes obličej.
 * Plazmový efekt přesunut na vnější okraj (korona).
 * Zvýšen kontrast hranic pro ostřejší vzhled hvězdy.
 */
.frame-solar,
.message-avatar-wrapper.frame-solar {
    border: 2px solid rgba(255, 204, 0, 0.8);
    background: transparent;
    box-shadow:
        0 0 20px rgba(255, 102, 0, 0.8),
        0 0 45px rgba(255, 204, 0, 0.6),
        inset 0 0 15px rgba(255, 69, 0, 0.5);
    /* Vnitřní záře místo overlaye */
    overflow: visible;
}

/* Korona - vnější pulzující záře */
.frame-solar::before,
.message-avatar-wrapper.frame-solar::before {
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, transparent 55%, #ff8800 65%, #ffcc00 85%, transparent 100%);
    filter: blur(5px);
    opacity: 0.9;
    animation: frame-solar-pulse 2.5s ease-in-out infinite;
    z-index: -1;
}

/* Plazmový povrch - nyní rotující prstenec */
.frame-solar::after,
.message-avatar-wrapper.frame-solar::after {
    inset: -5px;
    border-radius: 50%;
    border: 2px dashed rgba(255, 200, 0, 0.6);
    background: repeating-conic-gradient(#ff4500 0deg 15deg, #ffcc00 15deg 30deg, #ff4500 30deg 45deg);
    mix-blend-mode: screen;
    /* Změna na screen pro lepší svítivost */
    filter: blur(2px);
    /* Maska pro vyříznutí středu */
    mask: radial-gradient(transparent 58%, black 62%);
    -webkit-mask: radial-gradient(transparent 58%, black 62%);
    animation: frame-solar-rotate 25s linear infinite;
    z-index: 2;
}

@keyframes frame-solar-pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.9;
    }

    50% {
        transform: scale(1.05);
        /* Jemná expanze korony */
        opacity: 1;
    }
}

@keyframes frame-solar-rotate {
    to {
        transform: rotate(360deg);
    }
}

/* --- 36. UFO Frame (Únos) --- */
/* * Efekt: Tractor Beam.
 * Avatar je "uvnitř" zeleného paprsku, který se pohybuje dolů.
 * Nahoře je kovový disk.
 */
.frame-ufo,
.message-avatar-wrapper.frame-ufo {
    border: 2px solid #39ff14;
    box-shadow:
        0 0 15px rgba(57, 255, 20, 0.6),
        inset 0 0 20px rgba(0, 0, 0, 0.8);
    background: #000;
    overflow: visible;
    /* Potřebujeme pro prstenec nahoře */
}

/* Tractor Beam */
.frame-ufo::before,
.message-avatar-wrapper.frame-ufo::before {
    inset: -20px;
    /* Rozšíření paprsku */
    background: repeating-linear-gradient(to bottom,
            transparent,
            transparent 10px,
            rgba(57, 255, 20, 0.1) 12px,
            rgba(57, 255, 20, 0.05) 20px);
    clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
    animation: frame-ufo-beam-down 1.5s linear infinite;
    z-index: 10;
    pointer-events: none;
}

/* UFO Disk (Prstenec nahoře) */
.frame-ufo::after,
.message-avatar-wrapper.frame-ufo::after {
    content: '';
    position: absolute;
    top: -10px;
    left: 10%;
    right: 10%;
    height: 15px;
    background: linear-gradient(90deg, #444, #fff, #444);
    border-radius: 50%;
    border: 1px solid #888;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.8);
    z-index: 11;
}

@keyframes frame-ufo-beam-down {
    0% {
        background-position: 0 -30px;
        opacity: 0.5;
    }

    50% {
        opacity: 0.8;
    }

    100% {
        background-position: 0 30px;
        opacity: 0.5;
    }
}

/* --- 37. Vampire Frame (Noční Lovec) --- */
/* REWORK: Elegantní, ostrý a nebezpečný.
 * Místo rozmazané červené je zde ostrý "trnový" okraj a efekt
 * krevní plazmy.
 */
.frame-vampire,
.message-avatar-wrapper.frame-vampire {
    border: 2px solid #300000;
    box-shadow:
        0 0 15px #800000,
        inset 0 0 25px #000;
    background: #0a0000;
    overflow: visible;
}

/* Ostré tesáky / trny na obvodu */
.frame-vampire::before,
.message-avatar-wrapper.frame-vampire::before {
    inset: -6px;
    background: conic-gradient(#ff0000 0deg, transparent 10deg,
            #800000 90deg, transparent 100deg,
            #ff0000 180deg, transparent 190deg,
            #800000 270deg, transparent 280deg,
            #ff0000 360deg);
    border-radius: 50%;
    filter: drop-shadow(0 0 5px #ff0000);
    animation: frame-vampire-rotate 20s linear infinite;
    z-index: -1;
}

/* Pulzující "srdce" / aura */
.frame-vampire::after,
.message-avatar-wrapper.frame-vampire::after {
    inset: -2px;
    border: 1px solid rgba(255, 0, 0, 0.6);
    border-radius: 50%;
    box-shadow: inset 0 0 10px #ff0000;
    animation: frame-vampire-beat 1.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes frame-vampire-rotate {
    to {
        transform: rotate(360deg);
    }
}

@keyframes frame-vampire-beat {

    0%,
    100% {
        box-shadow: 0 0 5px #800000, inset 0 0 10px #800000;
        opacity: 0.7;
    }

    50% {
        box-shadow: 0 0 20px #ff0000, inset 0 0 20px #ff0000;
        opacity: 1;
    }
}

/* --- ULTRA PREMIUM KOLEKCE (50k - 100k) --- */

/* --- 38. Fusion Core (Jaderná Fúze - 50,000) --- */
/*
 * Efekt: Extrémní radiace a teplo.
 * Kombinuje "Color Dodge" pro přepálený jas a rychlou, trhanou animaci
 * vnitřního jádra simulující nestabilitu reakce.
 */
.frame-fusion-core,
.message-avatar-wrapper.frame-fusion-core {
    border: 3px solid rgba(255, 255, 255, 0.8);
    background: #000;
    box-shadow:
        0 0 20px #ffaa00,
        0 0 40px #ff3300,
        inset 0 0 30px #ffaa00;
    overflow: visible;
    z-index: 20;
    animation: frame-fusion-shake 2s cubic-bezier(.36, .07, .19, .97) infinite;
}

/* Rotující radioaktivní plazma */
.frame-fusion-core::before,
.message-avatar-wrapper.frame-fusion-core::before {
    inset: -12px;
    background: conic-gradient(from 0deg,
            #ff3300, transparent 20%,
            #ffcc00, transparent 40%,
            #ffffff, transparent 60%,
            #ff3300, transparent 80%,
            #ffcc00);
    border-radius: 50%;
    filter: blur(8px);
    mix-blend-mode: screen;
    animation: frame-fusion-spin 1s linear infinite;
    opacity: 0.9;
}

/* Elektrické výboje kolem jádra */
.frame-fusion-core::after,
.message-avatar-wrapper.frame-fusion-core::after {
    inset: -4px;
    border: 2px dashed #fff;
    border-radius: 50%;
    box-shadow: 0 0 15px #ffaa00;
    opacity: 0.8;
    animation: frame-fusion-pulse 0.2s infinite alternate;
}

@keyframes frame-fusion-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes frame-fusion-pulse {
    0% {
        transform: scale(1);
        opacity: 0.5;
        border-color: #ff3300;
    }

    100% {
        transform: scale(1.05);
        opacity: 1;
        border-color: #ffff00;
    }
}

@keyframes frame-fusion-shake {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-2px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(2px, 0, 0);
    }
}


/* --- 39. Temporal Lord (Pán Času - 75,000) --- */
/*
 * Efekt: 3D Gyroskop / Orbitální prstence.
 * Využívá `transform-style: preserve-3d` (pokud kontejner dovolí) nebo
 * simulaci přes `transform: rotateX/Y` pro pocit hloubky.
 * Vypadá to jako složitý hodinový strojek z jiné dimenze.
 */
.frame-temporal-lord,
.message-avatar-wrapper.frame-temporal-lord {
    border: none;
    background: radial-gradient(circle, rgba(0, 0, 0, 0) 50%, rgba(100, 200, 255, 0.2) 100%);
    box-shadow: 0 0 25px rgba(0, 191, 255, 0.4);
    overflow: visible;
    perspective: 800px;
    /* Klíčové pro 3D efekt */
    z-index: 50;
}

/* Prstenec 1: Vertikální rotace (X-axis) */
.frame-temporal-lord::before,
.message-avatar-wrapper.frame-temporal-lord::before {
    inset: -15px;
    border: 2px solid rgba(0, 255, 255, 0.8);
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
    animation: frame-temporal-orbit-x 4s linear infinite;
    pointer-events: none;
}

/* Prstenec 2: Horizontální/Diagonální rotace (Y/Z-axis) */
.frame-temporal-lord::after,
.message-avatar-wrapper.frame-temporal-lord::after {
    inset: -10px;
    border: 2px solid rgba(255, 0, 255, 0.8);
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.5);
    animation: frame-temporal-orbit-y 6s linear infinite;
    pointer-events: none;
}

/* Vnitřní "Runové" kolo (border hack) */
.frame-temporal-lord {
    outline: 2px dashed rgba(255, 255, 255, 0.3);
    outline-offset: 4px;
}

@keyframes frame-temporal-orbit-x {
    0% {
        transform: rotateZ(0deg) rotateX(0deg);
    }

    100% {
        transform: rotateZ(360deg) rotateX(360deg);
    }
}

@keyframes frame-temporal-orbit-y {
    0% {
        transform: rotateZ(45deg) rotateY(0deg);
    }

    100% {
        transform: rotateZ(45deg) rotateY(360deg);
    }
}


/* --- 40. God Mode (Deus Ex Machina - 100,000) --- */
/*
 * Efekt: THE END GAME.
 * Absolutní vizuální overload. RGB spektrum, svatá bílá záře,
 * rozpínající se aura a částicový efekt.
 * Kombinuje konické gradienty s blend módy pro "tekutou" duhu.
 */
.frame-god-mode,
.message-avatar-wrapper.frame-god-mode {
    border: 2px solid rgba(255, 255, 255, 0.9);
    /* Svaté jádro */
    background: #fff;
    /* Silná vnější záře, která pulzuje */
    box-shadow:
        0 0 20px #fff,
        0 0 40px #ff00de,
        0 0 60px #00ffff,
        0 0 80px #fff;
    overflow: visible;
    z-index: 100;
    /* Vždy nahoře */
    animation: frame-god-levitate 3s ease-in-out infinite;
}

/* Duhová rotující aura (Primary Aura) */
.frame-god-mode::before,
.message-avatar-wrapper.frame-god-mode::before {
    inset: -8px;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
            #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3, #ff0000);
    filter: blur(10px);
    opacity: 0.8;
    z-index: -1;
    animation: frame-god-spin 2s linear infinite;
}

/* Božské paprsky / Expanze (Secondary Aura) */
.frame-god-mode::after,
.message-avatar-wrapper.frame-god-mode::after {
    inset: -4px;
    border-radius: 50%;
    background: radial-gradient(circle, transparent 50%, rgba(255, 255, 255, 0.8) 80%, transparent 100%);
    border: 1px solid rgba(255, 255, 255, 0.8);
    z-index: -2;
    animation: frame-god-expand 2s ease-out infinite;
}

@keyframes frame-god-spin {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes frame-god-expand {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

@keyframes frame-god-levitate {

    0%,
    100% {
        transform: translateY(0) scale(1);
        box-shadow: 0 0 20px #fff, 0 0 40px #ff00de, 0 0 60px #00ffff;
    }

    50% {
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 0 30px #fff, 0 0 60px #ff00de, 0 0 90px #00ffff, 0 0 100px #fff;
    }
}

/* --- 41. Soundwave Frame (Audio Vizualizér) --- */
/* * Efekt: Simulace ekvalizéru.
 * Využívá maskování a rotující gradient k vytvoření iluze
 * skákajících audio barů kolem avatara.
 */
.frame-soundwave,
.message-avatar-wrapper.frame-soundwave {
    border: 2px solid rgba(0, 255, 200, 0.3);
    box-shadow: 0 0 10px rgba(0, 255, 200, 0.2);
    background: #001a1a;
    overflow: visible;
}

/* Rotující "bary" */
.frame-soundwave::before,
.message-avatar-wrapper.frame-soundwave::before {
    inset: -6px;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
            #00ffcc, #0088ff, #00ffcc, #0088ff, #00ffcc);

    /* Maska vytvoří pruhy */
    mask: repeating-conic-gradient(#000 0deg 2deg,
            transparent 2deg 5deg);
    -webkit-mask: repeating-conic-gradient(#000 0deg 2deg,
            transparent 2deg 5deg);

    animation: frame-soundwave-spin 4s linear infinite;
    opacity: 0.8;
}

/* Pulzující beat (basy) */
.frame-soundwave::after,
.message-avatar-wrapper.frame-soundwave::after {
    inset: -3px;
    border: 1px solid rgba(0, 255, 200, 0.8);
    border-radius: 50%;
    opacity: 0;
    animation: frame-soundwave-beat 1.2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

@keyframes frame-soundwave-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes frame-soundwave-beat {
    0% {
        transform: scale(0.95);
        opacity: 0.8;
        border-width: 2px;
    }

    100% {
        transform: scale(1.15);
        opacity: 0;
        border-width: 0px;
    }
}

/* --- 42. Prism Frame (Lom Světla) --- */
/* * Efekt: Skleněný/Krystalický vzhled.
 * Ostré odlesky, chromatická aberace a "hard" hrany.
 */
.frame-prism,
.message-avatar-wrapper.frame-prism {
    border: 2px solid rgba(255, 255, 255, 0.7);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
    box-shadow:
        0 0 10px rgba(255, 255, 255, 0.3),
        inset 0 0 10px rgba(255, 255, 255, 0.2);
    overflow: visible;
}

/* Spektrální odlesk */
.frame-prism::before,
.message-avatar-wrapper.frame-prism::before {
    inset: -4px;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
            transparent 0%,
            rgba(255, 0, 0, 0.4) 10%,
            rgba(0, 255, 0, 0.4) 20%,
            rgba(0, 0, 255, 0.4) 30%,
            transparent 40%);
    mix-blend-mode: overlay;
    filter: blur(2px);
    animation: frame-prism-rotate 6s linear infinite;
}

/* Ostrý lesk "hrany" */
.frame-prism::after,
.message-avatar-wrapper.frame-prism::after {
    inset: -2px;
    border-radius: 50%;
    background: linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.9) 50%, transparent 60%);
    background-size: 200% 200%;
    mix-blend-mode: color-dodge;
    animation: frame-prism-shine 3s ease-in-out infinite;
}

@keyframes frame-prism-rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes frame-prism-shine {
    0% {
        background-position: 0% 50%;
        opacity: 0.5;
    }

    50% {
        background-position: 100% 50%;
        opacity: 1;
    }

    100% {
        background-position: 0% 50%;
        opacity: 0.5;
    }
}

/* --- 43. Arcane Frame (Mystic Runes) --- */
/* REWORK: Nyní vypadá jako skutečný magický kruh (seal).
 * Vnější prstenec nese "runové" znaky (bloky), vnitřní pulzuje manou.
 * Barva posunuta do hluboké fialovo-modré (Arcane).
 */
.frame-arcane,
.message-avatar-wrapper.frame-arcane {
    border: none;
    box-shadow:
        0 0 10px rgba(138, 43, 226, 0.4),
        inset 0 0 20px rgba(75, 0, 130, 0.6);
    background: #0d001a;
    overflow: visible;
}

/* Vnější runový kruh - rotující glyfy */
.frame-arcane::before,
.message-avatar-wrapper.frame-arcane::before {
    inset: -8px;
    border-radius: 50%;
    /* Vytvoření iluze runových bloků pomocí přerušovaného gradientu */
    background: repeating-conic-gradient(from 0deg,
            rgba(180, 100, 255, 0.9) 0deg 5deg,
            transparent 5deg 15deg,
            rgba(147, 112, 219, 0.8) 15deg 25deg,
            transparent 25deg 40deg);
    -webkit-mask: radial-gradient(transparent 60%, black 65%);
    mask: radial-gradient(transparent 60%, black 65%);
    filter: drop-shadow(0 0 4px #9370db);
    animation: frame-arcane-spin-cw 12s linear infinite;
    z-index: 1;
}

/* Vnitřní magická bariéra */
.frame-arcane::after,
.message-avatar-wrapper.frame-arcane::after {
    inset: -3px;
    border: 1px solid rgba(0, 200, 255, 0.6);
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(0, 200, 255, 0.3);
    /* Protichůdná rotace s jemným pulzem */
    animation:
        frame-arcane-spin-ccw 8s linear infinite,
        frame-arcane-pulse 3s ease-in-out infinite;
    opacity: 0.8;
}

@keyframes frame-arcane-spin-cw {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes frame-arcane-spin-ccw {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

@keyframes frame-arcane-pulse {

    0%,
    100% {
        opacity: 0.5;
        transform: scale(0.98);
    }

    50% {
        opacity: 1;
        transform: scale(1.02);
    }
}

/* --- 44. Crimson Frame (Blood Moon) --- */
/* * Efekt: Agresivní, temná rudá.
 * Silný vnitřní stín a "dýchající" vnější záře.
 * Stylizováno pro Sith / Dark Side vibe.
 */
.frame-crimson,
.message-avatar-wrapper.frame-crimson {
    border: 2px solid #800000;
    box-shadow:
        inset 0 0 20px #000,
        0 0 10px #ff0000;
    background: #1a0000;
    overflow: visible;
    animation: frame-crimson-breathe 4s ease-in-out infinite;
}

/* Krvavá mlha */
.frame-crimson::before,
.message-avatar-wrapper.frame-crimson::before {
    inset: -6px;
    border-radius: 50%;
    background: radial-gradient(circle, transparent 60%, rgba(255, 0, 0, 0.3) 100%);
    filter: blur(4px);
    z-index: -1;
    animation: frame-crimson-pulse 2s ease-in-out infinite alternate;
}

/* Rotující akcent */
.frame-crimson::after,
.message-avatar-wrapper.frame-crimson::after {
    inset: -2px;
    border-radius: 50%;
    border-top: 2px solid rgba(255, 0, 0, 0.8);
    border-bottom: 2px solid rgba(255, 0, 0, 0.8);
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    animation: frame-crimson-spin 3s linear infinite;
    opacity: 0.7;
}

@keyframes frame-crimson-breathe {

    0%,
    100% {
        box-shadow: inset 0 0 20px #000, 0 0 10px #8b0000;
        border-color: #800000;
    }

    50% {
        box-shadow: inset 0 0 25px #000, 0 0 20px #ff0000;
        border-color: #ff3333;
    }
}

@keyframes frame-crimson-pulse {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

    100% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

@keyframes frame-crimson-spin {
    to {
        transform: rotate(360deg);
    }
}

/* --- 45. Corruption Frame (Malware Injection) --- */
/* REWORK: Digitální rozpad.
 * Používá clip-path pro efekt "roztrženého" obrazu a chromatickou aberaci.
 * Působí jako poškozený soubor.
 */
.frame-corruption,
.message-avatar-wrapper.frame-corruption {
    border: 2px solid #8b00ff;
    background: #0f0014;
    box-shadow: 0 0 10px rgba(139, 0, 255, 0.6);
    overflow: visible;
    /* Hlavní glitch animace celého kontejneru */
    animation: frame-corruption-shake 3s infinite steps(1);
}

/* Glitch vrstva 1 (Cyan/Green offset) */
.frame-corruption::before,
.message-avatar-wrapper.frame-corruption::before {
    inset: -4px;
    border: 2px solid #00ff00;
    border-radius: 50%;
    opacity: 0.6;
    mix-blend-mode: color-dodge;
    clip-path: polygon(0 0, 100% 0, 100% 40%, 0 40%);
    animation: frame-corruption-glitch-1 2s infinite linear alternate-reverse;
}

/* Glitch vrstva 2 (Magenta/Pink offset) */
.frame-corruption::after,
.message-avatar-wrapper.frame-corruption::after {
    inset: -4px;
    border: 2px solid #ff00ff;
    border-radius: 50%;
    opacity: 0.6;
    mix-blend-mode: exclusion;
    clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%);
    animation: frame-corruption-glitch-2 2.5s infinite linear alternate;
}

@keyframes frame-corruption-shake {

    0%,
    100% {
        transform: translate(0, 0);
        filter: hue-rotate(0deg);
    }

    92% {
        transform: translate(1px, -1px);
        filter: hue-rotate(90deg);
    }

    94% {
        transform: translate(-2px, 2px);
        filter: invert(0.1);
    }

    96% {
        transform: translate(2px, -2px);
        filter: hue-rotate(-90deg);
    }

    98% {
        transform: translate(-1px, 1px);
    }
}

@keyframes frame-corruption-glitch-1 {
    0% {
        clip-path: inset(10% 0 80% 0);
        transform: translate(-2px, 0);
    }

    20% {
        clip-path: inset(80% 0 10% 0);
        transform: translate(2px, 0);
    }

    40% {
        clip-path: inset(40% 0 40% 0);
        transform: translate(-2px, 0);
    }

    60% {
        clip-path: inset(0 0 90% 0);
        transform: translate(2px, 0);
    }

    80% {
        clip-path: inset(30% 0 20% 0);
        transform: translate(-2px, 0);
    }

    100% {
        clip-path: inset(60% 0 10% 0);
        transform: translate(2px, 0);
    }
}

@keyframes frame-corruption-glitch-2 {
    0% {
        clip-path: inset(20% 0 60% 0);
        transform: translate(2px, 0);
    }

    20% {
        clip-path: inset(70% 0 20% 0);
        transform: translate(-2px, 0);
    }

    40% {
        clip-path: inset(10% 0 50% 0);
        transform: translate(2px, 0);
    }

    60% {
        clip-path: inset(50% 0 10% 0);
        transform: translate(-2px, 0);
    }

    80% {
        clip-path: inset(0 0 70% 0);
        transform: translate(2px, 0);
    }

    100% {
        clip-path: inset(40% 0 30% 0);
        transform: translate(-2px, 0);
    }
}

/* --- 46. Liquid Metal (Tekutý Kov) --- */
/*
 * UPDATE: Záchrana avatara před "přepálením".
 * Odstraněn globální kontrastní filtr, který ničil fotku.
 * Efekt rtuti přesunut na "gooey" prstenec okolo (vyříznutý střed).
 * Zachována animace morfování tvaru (tekutost).
 */
.frame-liquid-metal,
.message-avatar-wrapper.frame-liquid-metal {
    border: none;
    background: transparent;
    /* Místo globálního filtru použijeme jen stín pro hloubku */
    box-shadow:
        0 0 10px rgba(255, 255, 255, 0.3),
        inset 0 0 15px rgba(0, 0, 0, 0.5);
    /* Vnitřní stín pro oddělení avatara */
    overflow: visible;
}

/* Tekoucí základna (Rtuť) */
.frame-liquid-metal::before,
.message-avatar-wrapper.frame-liquid-metal::before {
    inset: -10px;
    /* Širší okraj pro tekutinu */
    border-radius: 50%;
    /* Simulace chromu pomocí gradientu */
    background: conic-gradient(from 0deg,
            #e0e0e0,
            #ffffff,
            #a0a0a0,
            #404040,
            #a0a0a0,
            #ffffff,
            #e0e0e0);
    /* Důležité: Vyříznutí středu */
    mask: radial-gradient(transparent 58%, black 63%);
    -webkit-mask: radial-gradient(transparent 58%, black 63%);

    filter: blur(2px) contrast(1.2);
    /* Jemný blur pro kovový lesk */
    animation: frame-liquid-morph 6s ease-in-out infinite;
    z-index: 1;
}

/* Pohyblivé odlesky (Specular Highlights) */
.frame-liquid-metal::after,
.message-avatar-wrapper.frame-liquid-metal::after {
    inset: -10px;
    border-radius: 50%;
    /* Ostré bílé odlesky rotující po povrchu */
    background: conic-gradient(from 0deg,
            transparent 0%,
            rgba(255, 255, 255, 0.9) 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.9) 75%,
            transparent 100%);
    mix-blend-mode: overlay;

    /* Stejná maska a morfování, aby to sedělo na "kov" */
    mask: radial-gradient(transparent 58%, black 63%);
    -webkit-mask: radial-gradient(transparent 58%, black 63%);

    animation:
        frame-liquid-morph 6s ease-in-out infinite,
        frame-liquid-spin 8s linear infinite;
    z-index: 2;
    opacity: 0.8;
}

/* Zachované animace */
@keyframes frame-liquid-morph {

    0%,
    100% {
        border-radius: 50%;
    }

    33% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }

    66% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }
}

@keyframes frame-liquid-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* --- 47. Phoenix Frame (Fénix) --- */
/* REWORK: High-End Kvalita (4. nejdražší).
 * Efekt "povstání z popela". Kombinuje rotující ohnivá křídla (maskovaná,
 * aby nešla přes obličej) a částicový efekt jisker.
 * Působí majestátně a živě.
 */
.frame-phoenix,
.message-avatar-wrapper.frame-phoenix {
    border: 2px solid rgba(255, 69, 0, 0.8);
    box-shadow:
        0 0 20px rgba(255, 69, 0, 0.6),
        inset 0 0 15px rgba(255, 0, 0, 0.5);
    background: radial-gradient(circle, transparent 60%, rgba(50, 0, 0, 0.4) 100%);
    overflow: visible;
    z-index: 5;
}

/* Ohnivá křídla / Peří - Rotující textura */
.frame-phoenix::before,
.message-avatar-wrapper.frame-phoenix::before {
    inset: -12px;
    border-radius: 50%;
    /* Komplexní gradient simulující strukturu plamenů */
    background: conic-gradient(from 0deg,
            #ff0000 0%,
            #ff4500 10%,
            #ffd700 20%,
            /* Zlatá špička */
            transparent 25%,
            transparent 75%,
            #ffd700 80%,
            #ff4500 90%,
            #ff0000 100%);
    /* Rozostření pro "fire" look */
    filter: blur(4px);
    /* Maska zajišťuje, že efekt je jen na okraji a ne přes avatar */
    mask: radial-gradient(transparent 62%, black 68%);
    -webkit-mask: radial-gradient(transparent 62%, black 68%);

    animation: frame-phoenix-wings 4s linear infinite;
    opacity: 0.9;
    mix-blend-mode: screen;
}

/* Jiskry a popel (Sparks) */
.frame-phoenix::after,
.message-avatar-wrapper.frame-phoenix::after {
    inset: -15px;
    border-radius: 50%;
    /* Šumová textura pro jiskry */
    background: repeating-conic-gradient(transparent 0deg 4deg,
            rgba(255, 215, 0, 0.8) 4deg 5deg);
    mask: radial-gradient(transparent 65%, black 75%);
    -webkit-mask: radial-gradient(transparent 65%, black 75%);

    animation: frame-phoenix-sparks 10s linear infinite;
    opacity: 0.6;
    pointer-events: none;
}

@keyframes frame-phoenix-wings {
    0% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(180deg) scale(1.05);
        opacity: 1;
    }

    100% {
        transform: rotate(360deg) scale(1);
    }
}

@keyframes frame-phoenix-sparks {
    0% {
        transform: rotate(0deg);
        opacity: 0.4;
    }

    50% {
        opacity: 0.8;
    }

    100% {
        transform: rotate(-360deg);
        opacity: 0.4;
    }
}

/* --- MID-TIER COLLECTION (1.8k - 9.5k) --- */

/* --- 48. Smoke Frame (Kouřová Clona) --- */
/*
 * Efekt: Točící se mlha/kouř.
 * Využívá transparentní gradienty a masku pro "plynný" okraj.
 */
.frame-smoke,
.message-avatar-wrapper.frame-smoke {
    border: 1px solid rgba(200, 200, 200, 0.2);
    box-shadow: 0 0 15px rgba(120, 120, 120, 0.3);
    background: #1a1a1a;
    overflow: visible;
}

.frame-smoke::before,
.message-avatar-wrapper.frame-smoke::before {
    inset: -8px;
    border-radius: 50%;
    /* Simulace kouře pomocí kónického gradientu s různou opacity */
    background: conic-gradient(from 0deg,
            transparent 0%,
            rgba(200, 200, 200, 0.1) 20%,
            rgba(255, 255, 255, 0.4) 40%,
            transparent 60%,
            rgba(150, 150, 150, 0.2) 80%,
            transparent 100%);
    filter: blur(8px);
    animation: frame-smoke-spin 6s linear infinite;
    z-index: 1;
}

.frame-smoke::after,
.message-avatar-wrapper.frame-smoke::after {
    inset: -4px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, transparent 60%, rgba(100, 100, 100, 0.5) 100%);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8);
    animation: frame-smoke-pulse 4s ease-in-out infinite;
}

@keyframes frame-smoke-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes frame-smoke-pulse {

    0%,
    100% {
        opacity: 0.6;
        transform: scale(1);
    }

    50% {
        opacity: 0.9;
        transform: scale(1.02);
    }
}

/* --- 49. Graffiti Frame (Street Art) --- */
/*
 * Efekt: Neonový sprej a kapající barva.
 * Používá syté barvy (Cyan/Magenta/Yellow) a "hrubý" okraj.
 */
.frame-graffiti,
.message-avatar-wrapper.frame-graffiti {
    border: 3px solid #fff;
    box-shadow:
        5px 5px 0px #00ffff,
        -5px -5px 0px #ff00ff;
    overflow: visible;
    animation: frame-graffiti-bounce 2s cubic-bezier(0.28, 0.84, 0.42, 1) infinite;
}

.frame-graffiti::before,
.message-avatar-wrapper.frame-graffiti::before {
    inset: -6px;
    border-radius: 50%;
    background: conic-gradient(#ff00ff, #ffff00, #00ffff, #ff00ff);
    z-index: -1;
    filter: blur(4px);
    opacity: 0.7;
    animation: frame-rgb-spin 3s linear infinite;
    /* Použijeme existující spin */
}

@keyframes frame-graffiti-bounce {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
    }

    50% {
        transform: scale(1.02) rotate(2deg);
    }
}

/* --- 50. Holy Shield Frame (Aegis) --- */
/*
 * Efekt: Zlaté rotující prstence a svatá záře.
 * Čistá, paladinská estetika.
 */
.frame-holy-shield,
.message-avatar-wrapper.frame-holy-shield {
    border: 2px solid rgba(255, 215, 0, 0.6);
    box-shadow:
        0 0 15px rgba(255, 215, 0, 0.4),
        inset 0 0 15px rgba(255, 255, 255, 0.4);
    background: radial-gradient(circle, rgba(255, 255, 224, 0.1) 0%, transparent 70%);
    overflow: visible;
}

.frame-holy-shield::before,
.message-avatar-wrapper.frame-holy-shield::before {
    inset: -6px;
    border: 2px dashed #ffd700;
    border-radius: 50%;
    animation: frame-holy-rotate 10s linear infinite;
    opacity: 0.8;
}

.frame-holy-shield::after,
.message-avatar-wrapper.frame-holy-shield::after {
    inset: -10px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-radius: 50%;
    animation: frame-holy-rotate 6s linear infinite reverse;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

@keyframes frame-holy-rotate {
    to {
        transform: rotate(360deg);
    }
}

/* --- 51. Hex Tech Frame (Mřížka) --- */
/*
 * Efekt: Technologická plástev (Honeycomb).
 * Využívá maskování a gradienty pro vytvoření hex patternu.
 */
.frame-hex-tech,
.message-avatar-wrapper.frame-hex-tech {
    border: 2px solid #00a8ff;
    box-shadow: 0 0 10px #00a8ff;
    background: #001a2c;
    overflow: visible;
}

.frame-hex-tech::before,
.message-avatar-wrapper.frame-hex-tech::before {
    inset: -4px;
    border-radius: 50%;
    /* Hex pattern hack pomocí gradientů */
    background-image:
        repeating-linear-gradient(60deg, rgba(0, 168, 255, 0.1) 0, rgba(0, 168, 255, 0.1) 2px, transparent 2px, transparent 12px),
        repeating-linear-gradient(-60deg, rgba(0, 168, 255, 0.1) 0, rgba(0, 168, 255, 0.1) 2px, transparent 2px, transparent 12px);
    border: 1px solid rgba(0, 168, 255, 0.3);
    z-index: 1;
    animation: frame-hex-pulse 3s ease-in-out infinite;
}

.frame-hex-tech::after,
.message-avatar-wrapper.frame-hex-tech::after {
    /* Rotující radarový segment přes hexy */
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 80%, rgba(0, 168, 255, 0.4) 100%);
    mask: radial-gradient(transparent 60%, black 65%);
    -webkit-mask: radial-gradient(transparent 60%, black 65%);
    animation: frame-radar-sweep 4s linear infinite;
    /* Reuse radar anim */
    mix-blend-mode: screen;
}

@keyframes frame-hex-pulse {

    0%,
    100% {
        box-shadow: 0 0 5px #00a8ff inset;
    }

    50% {
        box-shadow: 0 0 15px #00a8ff inset;
    }
}

/* --- 52. Sakura Frame (Kvetoucí) --- */
/*
 * Efekt: Jemné růžové tóny a rotující okvětní lístky.
 */
.frame-sakura,
.message-avatar-wrapper.frame-sakura {
    border: 2px solid #ffb7b2;
    box-shadow: 0 0 15px rgba(255, 183, 178, 0.6);
    overflow: visible;
}

.frame-sakura::before,
.message-avatar-wrapper.frame-sakura::before {
    inset: -8px;
    border-radius: 50%;
    /* Pattern lístků */
    background: repeating-conic-gradient(from 0deg,
            transparent 0deg 20deg,
            rgba(255, 154, 162, 0.6) 20deg 35deg);
    mask: radial-gradient(transparent 62%, black 66%);
    -webkit-mask: radial-gradient(transparent 62%, black 66%);
    animation: frame-sakura-spin 12s linear infinite;
}

.frame-sakura::after,
.message-avatar-wrapper.frame-sakura::after {
    inset: -2px;
    border-radius: 50%;
    box-shadow: inset 0 0 10px #ffdac1;
    border: 1px solid rgba(255, 255, 255, 0.5);
    animation: frame-sakura-breathe 3s ease-in-out infinite;
}

@keyframes frame-sakura-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes frame-sakura-breathe {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(255, 183, 178, 0.6);
    }

    50% {
        box-shadow: 0 0 20px rgba(255, 154, 162, 0.9);
    }
}

/* --- 53. Abyss Frame (Hlubina) --- */
/*
 * Efekt: Temná voda, tlak a bubliny.
 */
.frame-abyss,
.message-avatar-wrapper.frame-abyss {
    border: 2px solid #001f3f;
    box-shadow:
        0 0 15px #0074D9,
        inset 0 0 30px #000;
    background: #000810;
    overflow: visible;
}

.frame-abyss::before,
.message-avatar-wrapper.frame-abyss::before {
    inset: -6px;
    border-radius: 50%;
    background: conic-gradient(#001f3f, #0074D9, #001f3f, #0074D9, #001f3f);
    filter: blur(5px);
    opacity: 0.6;
    animation: frame-abyss-surge 5s ease-in-out infinite alternate;
    z-index: -1;
}

@keyframes frame-abyss-surge {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

    100% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

/* --- 54. Dragon Frame (Dračí Šupiny) --- */
/*
 * Efekt: Textura šupin a "dýchající" žár.
 */
.frame-dragon,
.message-avatar-wrapper.frame-dragon {
    border: 2px solid #8b0000;
    box-shadow: inset 0 0 20px #000;
    background: #2a0000;
    overflow: visible;
}

.frame-dragon::before,
.message-avatar-wrapper.frame-dragon::before {
    inset: -5px;
    border-radius: 50%;
    /* Vzor šupin pomocí repeating-radial */
    background-image:
        repeating-radial-gradient(circle at 50% 100%, #ff4500 0, #8b0000 5px, transparent 6px),
        repeating-radial-gradient(circle at 50% 0%, #ff4500 0, #8b0000 5px, transparent 6px);
    background-size: 20px 20px;
    mask: radial-gradient(transparent 60%, black 65%);
    -webkit-mask: radial-gradient(transparent 60%, black 65%);
    animation: frame-dragon-breath 4s ease-in-out infinite;
}

@keyframes frame-dragon-breath {

    0%,
    100% {
        filter: brightness(1);
        transform: scale(1);
    }

    50% {
        filter: brightness(1.5) drop-shadow(0 0 5px #ff4500);
        transform: scale(1.01);
    }
}

/* --- 55. Runestone Frame (Runový Kámen) --- */
/*
 * Efekt: Kamenná textura a levitující úlomky.
 */
.frame-runestone,
.message-avatar-wrapper.frame-runestone {
    border: 3px solid #555;
    background: #222;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
    overflow: visible;
}

.frame-runestone::before,
.message-avatar-wrapper.frame-runestone::before {
    /* Kamenný kruh s runovým leskem */
    inset: -6px;
    border-radius: 50%;
    border: 2px dashed #777;
    box-shadow: 0 0 10px #00ffff inset;
    animation: frame-runestone-spin 20s linear infinite;
}

.frame-runestone::after,
.message-avatar-wrapper.frame-runestone::after {
    /* Magický puls */
    inset: -2px;
    border-radius: 50%;
    border: 1px solid rgba(0, 255, 255, 0.5);
    opacity: 0;
    animation: frame-runestone-pulse 3s ease-out infinite;
}

@keyframes frame-runestone-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes frame-runestone-pulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
        border-width: 1px;
    }

    100% {
        transform: scale(1.15);
        opacity: 0;
        border-width: 0px;
    }
}

/* --- 56. Time Warp (Časová Trhlina) --- */
/* Efekt: Roztržená realita. RGB split a posun vrstev. */
.frame-time-warp,
.message-avatar-wrapper.frame-time-warp {
    border: 2px solid rgba(0, 255, 255, 0.5);
    background: #000;
    overflow: visible;
    /* Občasné trhnutí celým avatarem */
    animation: frame-warp-shake 4s infinite cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

.frame-time-warp::before,
.message-avatar-wrapper.frame-time-warp::before {
    inset: -4px;
    border-radius: 50%;
    border: 2px solid #ff00ff;
    opacity: 0.6;
    mix-blend-mode: exclusion;
    /* Rychlá vibrace */
    animation: frame-warp-glitch-1 0.2s infinite linear alternate-reverse;
}

.frame-time-warp::after,
.message-avatar-wrapper.frame-time-warp::after {
    inset: -4px;
    border-radius: 50%;
    border: 2px solid #00ffff;
    opacity: 0.6;
    mix-blend-mode: screen;
    animation: frame-warp-glitch-2 0.3s infinite linear alternate;
}

@keyframes frame-warp-shake {

    0%,
    100% {
        transform: skew(0deg);
    }

    90% {
        transform: skew(0deg);
    }

    92% {
        transform: skew(-5deg) translateX(2px);
        filter: hue-rotate(90deg);
    }

    94% {
        transform: skew(5deg) translateX(-2px);
        filter: invert(1);
    }

    96% {
        transform: skew(0deg);
        filter: none;
    }
}

@keyframes frame-warp-glitch-1 {
    0% {
        clip-path: inset(20% 0 80% 0);
        transform: translate(-2px, 2px);
    }

    100% {
        clip-path: inset(80% 0 20% 0);
        transform: translate(2px, -2px);
    }
}

@keyframes frame-warp-glitch-2 {
    0% {
        clip-path: inset(10% 0 50% 0);
        transform: translate(2px, 0);
    }

    100% {
        clip-path: inset(50% 0 10% 0);
        transform: translate(-2px, 0);
    }
}

/* --- 57. Symbiote (Symbiont) --- */
/* Efekt: Organická "dýchající" hmota. Využívá morphing radius. */
.frame-symbiote,
.message-avatar-wrapper.frame-symbiote {
    border: none;
    background: #000;
    box-shadow: 0 0 15px #000;
    overflow: visible;
    /* Celý avatar se "nafukuje" jako živý orgán */
    animation: frame-symbiote-breathe 3s ease-in-out infinite;
}

.frame-symbiote::before,
.message-avatar-wrapper.frame-symbiote::before {
    /* Černý sliz */
    inset: -8px;
    background: radial-gradient(circle at 30% 30%, #333, #000);
    border-radius: 50%;
    z-index: -1;
    filter: blur(2px);
    /* Morphing tvaru */
    animation: frame-bio-morph 4s ease-in-out infinite;
    /* Reused from bio frame if avail, else define below */
}

.frame-symbiote::after,
.message-avatar-wrapper.frame-symbiote::after {
    /* Chapadla / Výběžky */
    inset: -12px;
    border: 2px dashed rgba(100, 0, 150, 0.4);
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    animation:
        frame-bio-morph 6s ease-in-out infinite reverse,
        frame-spin 10s linear infinite;
    opacity: 0.8;
    z-index: -2;
}

@keyframes frame-symbiote-breathe {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 15px #000;
    }

    50% {
        transform: scale(1.03);
        box-shadow: 0 0 25px rgba(50, 0, 80, 0.8);
    }
}

/* --- 58. Overdrive (Reaktor v Přetížení) --- */
/* Efekt: Agresivní třes a varovné barvy. */
.frame-overdrive,
.message-avatar-wrapper.frame-overdrive {
    border: 3px solid #ff3300;
    background: #1a0500;
    overflow: visible;
    box-shadow: 0 0 20px #ff3300;
    /* Konstantní vibrace */
    animation: frame-overdrive-shake 0.8s linear infinite;
}

.frame-overdrive::before,
.message-avatar-wrapper.frame-overdrive::before {
    /* Rotující varovné pruhy */
    inset: -6px;
    border-radius: 50%;
    background: repeating-conic-gradient(#ff3300 0deg 10deg,
            #000 10deg 20deg);
    mask: radial-gradient(transparent 60%, black 65%);
    -webkit-mask: radial-gradient(transparent 60%, black 65%);
    animation: frame-spin 4s linear infinite;
}

.frame-overdrive::after,
.message-avatar-wrapper.frame-overdrive::after {
    /* Elektrické výboje */
    inset: -10px;
    border: 1px solid #ffff00;
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.9);
    animation: frame-overdrive-spark 0.5s ease-out infinite;
}

@keyframes frame-overdrive-shake {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }

    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }

    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }

    30% {
        transform: translate(3px, 2px) rotate(0deg);
    }

    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }

    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }

    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }

    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }

    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }

    90% {
        transform: translate(1px, 2px) rotate(0deg);
    }

    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}

@keyframes frame-overdrive-spark {
    0% {
        opacity: 1;
        transform: scale(1);
        border-color: #fff;
    }

    100% {
        opacity: 0;
        transform: scale(1.3);
        border-color: #ff3300;
    }
}

/* --- 59. Cyber Construct (Kyber Konstrukt) --- */
/* Efekt: Hexagony, které se "staví" a rozpadají. */
.frame-cyber-construct,
.message-avatar-wrapper.frame-cyber-construct {
    border: 2px solid rgba(0, 255, 136, 0.4);
    background: #001f15;
    overflow: visible;
    box-shadow: inset 0 0 20px rgba(0, 255, 136, 0.2);
}

.frame-cyber-construct::before,
.message-avatar-wrapper.frame-cyber-construct::before {
    /* Vnější stavitelský prstenec */
    inset: -8px;
    border-radius: 50%;
    border: 2px dashed #00ff88;
    mask: conic-gradient(from 0deg, transparent 0%, black 20%, black 80%, transparent 100%);
    -webkit-mask: conic-gradient(from 0deg, transparent 0%, black 20%, black 80%, transparent 100%);
    animation: frame-spin 6s linear infinite;
}

.frame-cyber-construct::after,
.message-avatar-wrapper.frame-cyber-construct::after {
    /* Skenovací paprsek */
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0, 255, 136, 0.6) 50%, transparent 60%);
    background-size: 100% 200%;
    mix-blend-mode: color-dodge;
    border-radius: 50%;
    animation: frame-construct-scan 2s ease-in-out infinite;
}

@keyframes frame-construct-scan {
    0% {
        background-position: 0% 0%;
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        background-position: 0% 100%;
        opacity: 0;
    }
}

/* --- 60. Celestial (Nebeská Sféra) --- */
/* Efekt: Mnoho rotujících prstenců (gyroskop) ve zlaté barvě. */
.frame-celestial,
.message-avatar-wrapper.frame-celestial {
    border: 1px solid rgba(255, 223, 0, 0.5);
    background: radial-gradient(circle, #fff 0%, transparent 100%);
    /* Svaté jádro */
    overflow: visible;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.6);
    z-index: 10;
}

.frame-celestial::before,
.message-avatar-wrapper.frame-celestial::before {
    /* Prstenec 1 */
    inset: -10px;
    border-radius: 50%;
    border: 1px solid #ffd700;
    transform-origin: center;
    animation: frame-celestial-orbit-1 5s linear infinite;
}

.frame-celestial::after,
.message-avatar-wrapper.frame-celestial::after {
    /* Prstenec 2 (kolmo) */
    inset: -6px;
    border-radius: 50%;
    border: 2px solid #fff;
    border-left-color: transparent;
    border-right-color: transparent;
    animation: frame-celestial-orbit-2 7s linear infinite;
    box-shadow: 0 0 15px #ffd700;
}

@keyframes frame-celestial-orbit-1 {
    0% {
        transform: rotate(0deg) scaleX(1);
    }

    50% {
        transform: rotate(180deg) scaleX(0.2);
    }

    /* 3D efekt */
    100% {
        transform: rotate(360deg) scaleX(1);
    }
}

@keyframes frame-celestial-orbit-2 {
    0% {
        transform: rotate(0deg) scaleY(1);
    }

    50% {
        transform: rotate(-180deg) scaleY(0.2);
    }

    100% {
        transform: rotate(-360deg) scaleY(1);
    }
}

/* --- 61. Vortex Void (Vír Prázdnoty) --- */
/* Efekt: Vtahování dovnitř. Inverzní šoková vlna. */
.frame-vortex-void,
.message-avatar-wrapper.frame-vortex-void {
    border: 2px solid #4b0082;
    background: #000;
    overflow: visible;
    box-shadow: inset 0 0 40px #000;
}

.frame-vortex-void::before,
.message-avatar-wrapper.frame-vortex-void::before {
    /* Akreční disk */
    inset: -15px;
    border-radius: 50%;
    background: conic-gradient(#000, #4b0082, #9400d3, #000);
    filter: blur(8px);
    z-index: -1;
    animation: frame-spin 1s linear infinite;
}

.frame-vortex-void::after,
.message-avatar-wrapper.frame-vortex-void::after {
    /* Vtahovací efekt */
    inset: -20px;
    border: 2px solid #8a2be2;
    border-radius: 50%;
    opacity: 0;
    animation: frame-vortex-suck 1.5s ease-in infinite;
}

@keyframes frame-vortex-suck {
    0% {
        transform: scale(1.5);
        opacity: 0;
        border-width: 1px;
    }

    50% {
        opacity: 0.8;
    }

    100% {
        transform: scale(0.9);
        opacity: 0;
        border-width: 4px;
    }
}

/* Pomocná animace pro rotaci, pokud ještě není definována jinde */
@keyframes frame-spin {
    to {
        transform: rotate(360deg);
    }
}

/* --- 63. HORES System Core (The Singularity) --- */
/*
 * REWORK 2.0: "THE ARCHITECT"
 *
 * Koncept: Statická dominance nad chaosem.
 * HORES Core je precizní,těžká, zlatá technologie.
 *
 * Vizuální jazyk:
 * - Royal Gold (#FFD700) + Deep Void (#000) + Cyan Arc (Energie).
 * - Tři vrstvy hloubky (Core, Containment, Emission).
 * - Counter-rotation: Prvky se točí proti sobě pro efekt stroje.
 */

.frame-hores-system-core,
.message-avatar-wrapper.frame-hores-system-core {
    /* --- Vynucení viditelnosti efektů --- */
    position: relative !important;
    overflow: visible !important;
    /* KLÍČOVÉ: Povolí efektům téct ven */
    z-index: 1000 !important;
    /* Vždy nahoře */
    border-radius: 50% !important;

    /* --- Základní fyzický rámeček --- */
    /* Tenký, ostrý, bílo-zlatý okraj */
    border: 2px solid #ffeeb0 !important;
    background: #000 !important;
    /* Černé pozadí pod avatarem */

    /* --- MASIVNÍ VRSTVENÁ ZÁŘE (The Core) --- */
    /* Kombinace ostrého světla a difuzní aury */
    box-shadow:
        /* 1. Ostrá vnitřní záře (horký kov) */
        inset 0 0 15px rgba(255, 215, 0, 0.8),
        /* 2. Ostrá vnější záře (korona) */
        0 0 10px 2px rgba(255, 215, 0, 1),
        /* 3. Střední energetické pole (zlatá) */
        0 0 30px 5px rgba(255, 200, 0, 0.6),
        /* 4. Velká vnější aura (elektrická modrá) - přetéká daleko */
        0 0 60px 10px rgba(0, 220, 255, 0.4) !important;

    /* Pulzující animace "dýchání" jádra */
    animation: hores-core-unstable 3s ease-in-out infinite !important;
}

/* --- Rotující prstenec (The Containment Ring) --- */
/* Jednoduchý, spolehlivý rotující border */
.frame-hores-system-core::before,
.message-avatar-wrapper.frame-hores-system-core::before {
    content: "" !important;
    position: absolute !important;
    /* Mírný přesah mimo hlavní rám */
    inset: -4px !important;
    border-radius: 50% !important;
    z-index: -1 !important;

    /* Vytvoříme prstenec s mezerami pomocí transparentních borderů */
    border: 3px solid transparent !important;
    /* Obarvíme jen horní a spodní část pro efekt "segmentů" */
    border-top-color: rgba(255, 255, 255, 0.9) !important;
    /* Jasná bílá */
    border-bottom-color: rgba(255, 215, 0, 0.9) !important;
    /* Zlatá */

    /* Rychlá rotace */
    animation: hores-ring-spin 2s linear infinite !important;
}

/* --- Interakce: CRITICAL BREACH (Hover) --- */
/* Při najetí se jádro "přehřeje" do bíla a zrychlí */
.frame-hores-system-core:hover,
.message-avatar-wrapper.frame-hores-system-core:hover {
    border-color: #fff !important;
    box-shadow:
        inset 0 0 20px rgba(255, 255, 255, 1),
        /* Bílé vnitřní teplo */
        0 0 20px 5px rgba(255, 255, 255, 1),
        /* Bílá korona */
        0 0 50px 10px rgba(255, 215, 0, 0.8),
        /* Silnější zlatá */
        0 0 100px 20px rgba(0, 220, 255, 0.6) !important;
    /* Masivní modrý výboj */
}

.frame-hores-system-core:hover::before,
.message-avatar-wrapper.frame-hores-system-core:hover::before {
    /* Extrémní zrychlení rotace */
    animation-duration: 0.5s !important;
    border-top-color: #fff !important;
    border-bottom-color: #fff !important;
    filter: drop-shadow(0 0 10px #fff) !important;
}

/* --- Animace --- */

@keyframes hores-ring-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes hores-core-unstable {

    0%,
    100% {
        /* Klidový stav (relativně) */
        transform: scale(1);
        box-shadow:
            inset 0 0 15px rgba(255, 215, 0, 0.8),
            0 0 10px 2px rgba(255, 215, 0, 1),
            0 0 30px 5px rgba(255, 200, 0, 0.6),
            0 0 60px 10px rgba(0, 220, 255, 0.4);
    }

    50% {
        /* Expanze a zintenzivnění */
        transform: scale(1.02);
        /* Jemné nafouknutí */
        box-shadow:
            inset 0 0 25px rgba(255, 215, 0, 1),
            0 0 15px 4px rgba(255, 215, 0, 1),
            0 0 40px 8px rgba(255, 200, 0, 0.8),
            0 0 80px 15px rgba(0, 220, 255, 0.5);
        /* Záře dosáhne dál */
    }
}