/**========================================================================
* ?                                ABOUT (ESTILO GITANO / FLAMENCO - BURBUJAS DORADAS)
* @author         :  8lackMask (Modificado)
* @email          :  blackcodymask@gmail.com
* @store          :  https://blackmask.codychat.store/
* @product        :  Arc (theme) - Edición Gitana / Oro, Borgoña y Efecto Gel
* @version        :  1.9
*========================================================================**/

/* custom font */
@import url('font/Roboto.css.pagespeed.ce.SKwDEVlUZl.css');

/* general colors */
a { color: #FFD700; text-shadow: 0 0 5px rgba(255, 215, 0, 0.8); }
body { font-family: 'Roboto', sans-serif; background: #0F1D33 url('./images/office.webp'); color: #FFFFFF; }
button { background: transparent; color: #FFFFFF; }
input, textarea, .post_input_container {
    font-family: 'Roboto', sans-serif, 'FontAwesome';
    background: #1E304A;
    color: #FFFFFF;
    border: 2px solid #FFD700 !important;
    box-shadow: inset 0 0 8px rgba(255, 215, 0, 0.4);
    border-radius: 25px;
}
.setdef { color: #FFFFFF; }

/* PANELES Y CAJAS CON ESTILO AGELATINADO (Bordes muy redondeados y brillos internos) */
.backglob { background: #0F1D33; }
.back_chat { background: #0F1D33 url('./images/office.webp'); background-repeat: repeat; }
.back_priv, .back_panel, .back_modal, .page_element {
    background: linear-gradient(180deg, #15263D 0%, #0A1421 100%);
    border: 1px solid rgba(255, 215, 0, 0.5);
    border-radius: 25px;
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.8),
        inset 0 2px 15px rgba(255, 215, 0, 0.5),
        inset 0 -2px 10px rgba(218, 165, 32, 0.4);
}

/* CABECERAS Y TITULARES CON EFECTO GEL */
.bhead {
    background: linear-gradient(to bottom, #0A1421 0%, #15263D 50%, #1E304A 100%);
    color: #FFFFFF;
    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.6),
        inset 0 2px 10px rgba(255, 255, 255, 0.2),
        inset 0 -3px 10px rgba(255, 215, 0, 0.5);
    border-bottom: 2px solid #FFD700;
    border-radius: 25px 25px 0 0;
}
.bsidebar {
    background: linear-gradient(90deg, #0A1421 0%, #15263D 100%);
    color: #FFFFFF;
    border-right: 1px solid #FFD700;
    border-radius: 0 25px 25px 0;
}
.modal_top, .pro_top {
    background: #15263D;
    color: #FFFFFF;
    border-bottom: 2px solid #FFD700;
    border-radius: 25px 25px 0 0;
}
.back_ptop {
    background: linear-gradient(to right, #DAA520, #0A1421);
    color: #FFFFFF;
    border-bottom: 1px solid #FFD700;
    border-radius: 20px 20px 0 0;
}

/* ELEMENTOS DE LISTA Y CONTENEDORES SECUNDARIOS */
.bback { background: rgba(255, 215, 0, 0.08); border: 1px solid rgba(255, 215, 0, 0.2); border-radius: 15px; }
.bbackb { background: rgba(218, 165, 32, 0.15); border: 1px solid rgba(255, 215, 0, 0.4); border-radius: 15px; }
.bbackhover { background: rgba(255, 215, 0, 0.06); border-radius: 15px; }
.bbackhover:hover { background: rgba(218, 165, 32, 0.4); box-shadow: 0 0 10px rgba(255, 215, 0, 0.6); border-radius: 15px; }
.bbackhoverb { background: rgba(255, 215, 0, 0.04); border: 1px solid rgba(255, 215, 0, 0.2); border-radius: 15px; }
.bbackhoverb:hover { background: rgba(218, 165, 32, 0.4); border: 1px solid #FFD700; border-radius: 15px; }

.back_menu { background: #1E304A; border: 1px solid rgba(255, 215, 0, 0.3); border-radius: 20px; }
.back_pmenu { background: #0A1421; color: #FFFFFF; border-radius: 15px; }
.back_box { background: #1E304A; border: 1px solid rgba(255, 215, 0, 0.4); border-radius: 20px; }
.back_input { background: #15263D; border: 1px solid #FFD700; border-radius: 20px; }
.back_quote { background: #15263D; border-left: 4px solid #FFD700; border-radius: 15px; }

/* MAIN THEME COLOR */
.theme_color { color: #FFD700; text-shadow: 0 0 5px rgba(255, 215, 0, 0.6); }
.default_color { color: #0A1421; }
.error { color: #E74C3C; text-shadow: 0 0 3px rgba(231, 76, 60, 0.4); }
.success { color: #27AE60; text-shadow: 0 0 3px rgba(39, 174, 96, 0.4); }
.warn { color: #F1C40F; }

/* BOTONES CON EFECTO GEL */
.theme_btn, .back_theme {
    background: linear-gradient(to bottom, #FFD700, #B8860B);
    color: #000000;
    border: 1px solid #FFE57F;
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.4),
        0 0 10px rgba(255, 215, 0, 0.5),
        inset 0 2px 5px rgba(255, 255, 255, 0.6);
    font-weight: bold;
    border-radius: 20px;
}
.theme_btn:hover, .back_theme:hover { 
    background: linear-gradient(to bottom, #FFE57F, #FFD700); 
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.9), inset 0 2px 5px rgba(255, 255, 255, 0.8); 
}
.default_btn, .defaultd_btn, .back_default { background: #DAA520; color: #FFFFFF; border: 1px solid #FFD700; border-radius: 20px; }
.ok_btn { background: #27AE60; color: #FFFFFF; border: 1px solid #FFD700; border-radius: 20px; }
.warn_btn { background: #F1C40F; color: #FFFFFF; border: 1px solid #FFD700; border-radius: 20px; }
.delete_btn { background: #C0392B; color: #FFFFFF; border: 1px solid #E74C3C; border-radius: 20px; }
.send_btn { color: #FFD700; text-shadow: 0 0 6px rgba(255, 215, 0, 0.8); }

/* DEFAULT USERNAME & CHAT SYSTEM */
.user { color: #FFFFFF; font-weight: 500; }
.chat_system { color: #C1C1C1; }
.offline { opacity: 0.4; }
.menui, .subi { color: #FFD700; filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.7)); }

/* WALL & REPLIES */
.reply_item { background: #1E304A; border-left: 3px solid #FFD700; }
.main_post_item { color: #FFFFFF; }
.input_item { color: #FFFFFF; }

/* PRIVATE LOG BUBBLES */
.target_private, .hunt_quote { color: #FFFFFF; background: #D4AF37; }
.hunter_private, .targ_quote { color: #FFFFFF; background: #AA7C11; }

/* QUOTE IN CHAT */
.cquote { background: rgba(255, 255, 255, 0.4); color: #FFFFFF; }

/* TAB MENU */
.tab_menu { background: #0A1421; box-shadow: 0 2px 6px rgba(0,0,0,0.4); border-bottom: 2px solid #FFD700; border-radius: 25px 25px 0 0; }
.tab_selected { background: rgba(255, 215, 0, 0.2); border-bottom: 3px solid #FFD700; border-radius: 15px 15px 0 0; }

/* MODAL MENU */
.modal_mback { background: rgba(0,0,0,0.15); }
.modal_mborder { border-bottom: 1px solid #15263D; border-radius: 20px 20px 0 0; }
.modal_selected { background: rgba(255, 215, 0, 0.2); }
.modal_back { background-color: rgba(15, 10, 8, 0.75); backdrop-filter: blur(2px); }

/* BURBUJAS DE CHAT Y SALA CON COLOR DORADO/BORGOÑA ACORDE AL TEMA */
.mbubble { 
    background: linear-gradient(135deg, rgba(218, 165, 32, 0.85) 0%, rgba(184, 134, 11, 0.9) 100%); 
    color: #FFFFFF; 
    border: 1px solid rgba(255, 215, 0, 0.6); 
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.4); 
}
.sys_log { }
.topic_log { 
    background: linear-gradient(135deg, rgba(184, 134, 11, 0.4) 0%, rgba(255, 215, 0, 0.85) 100%); 
    color: #FFFFFF; 
    border: 1px solid rgba(255, 215, 0, 0.5); 
    border-left: 4px solid #FFD700; 
}

/* UPLOAD PROGRESS & NOTIFICATIONS */
.bprogress { background: #27AE60; color: #FFFFFF; border-radius: 10px; }
.bnotify { background: #E74C3C; color: #FFFFFF; border-radius: 10px; }
.foot_notify, .head_notify { border: 1px solid #FFFFFF; border-radius: 10px; }

/* DATE & TEXT COLORS */
.sub_date { color: #BDC3C7; }
.sub_chat, .sub_priv { color: #BDC3C7; }
.sub_text, .list_mood { color: #BDC3C7; }
.list_mood { font-weight: 300; }

/* PROFILE LIKES */
.plikes { background-color: rgba(189, 195, 199, 0.3); color: #FFFFFF; border-radius: 10px; }
.bspin { color: rgb(255,255,255,0.3); }

/* SPECIAL CHAT ITEM */
.my_notice { color: #FFFFFF; background: #C0392B; border: 1px solid #FFD700; border-radius: 15px; }
.system_text { background: #1E304A; color: #FFFFFF; border-left: 4px solid #FFD700; border-radius: 15px; }

/* OUTSIDE PAGES */
.back_page { background: #15263D; color: #FFFFFF; }
.post_video { background: rgb(0,0,0,1); border-radius: 15px; }

/* SLIDER */
.boom_slider .ui-widget-content { background: #ECF0F1; border-radius: 10px; }
.boom_slider .ui-state-default { background: #FFD700 !important; border-radius: 50%; box-shadow: 0 0 6px #FFD700; }
.boom_slider .ui-state-active { background: #FFD700 !important; }
.boom_slider .ui-slider-range { background: #FFD700; }

/* SELECT INPUT COLOR */
.selectboxit-list, .selectboxit-btn { background-color: #1E304A; color: #BDC3C7; border: 1px solid #DAA520 !important; border-radius: 15px; }
.selectboxit-list .selectboxit-focus .selectboxit-option-anchor { background-color: #DAA520; color: #FFFFFF; border-radius: 10px; }
.selectboxit-default-arrow { border-top: 4px solid #FFD700; }
.selectboxit-btn.selectboxit-enabled:hover, .selectboxit-btn.selectboxit-enabled:focus, .selectboxit-btn.selectboxit-enabled:active { background: #DAA520; color: #FFFFFF; }
.selectboxit-options { background-color: #1E304A; border-radius: 0 0 15px 15px; }
.selectboxit-list .selectboxit-option-anchor { color: #BDC3C7; }

window.addEventListener('load', function() {
    if (document.getElementById('floating-frame-btn')) return;

    // Crear botón flotante
    const floatBtn = document.createElement('button');
    floatBtn.id = 'floating-frame-btn';
    floatBtn.innerHTML = '✨ Marcos Avatar';
    floatBtn.style.cssText = 'position:fixed; bottom:20px; right:20px; z-index:999999; background:linear-gradient(to bottom, #FFD700, #B8860B); color:#000; border:2px solid #FFE57F; padding:10px 16px; font-weight:bold; border-radius:30px; box-shadow:0 0 15px #FFD700; cursor:pointer;';
    document.body.appendChild(floatBtn);

    // Crear Modal
    const modal = document.createElement('div');
    modal.id = 'cody-frame-modal';
    modal.style.cssText = 'position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:340px; max-height:80vh; overflow-y:auto; z-index:1000000; background:#161B22; border:2px solid #FFD700; border-radius:20px; box-shadow:0 0 30px #FFD700; display:none; padding:15px; color:#FFF;';
    modal.innerHTML = `
        <div style="display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #FFD700; padding-bottom:8px;">
            <span style="font-weight:bold; color:#FFD700;">Elige tu Marco (30 Estilos)</span>
            <button id="cody-close-modal" style="background:#FF4757; color:#FFF; border:none; padding:4px 10px; border-radius:50%; cursor:pointer;">X</button>
        </div>
        <div style="padding-top:10px;">
            <button id="cody-remove-btn" style="width:100%; padding:8px; background:#FF4757; color:#FFF; border:none; border-radius:10px; cursor:pointer; font-weight:bold; margin-bottom:5px;">Quitar Marco</button>
            <div id="cody-grid-container" style="display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:15px;"></div>
        </div>
    `;
    document.body.appendChild(modal);

    floatBtn.addEventListener('click', () => { modal.style.display = 'block'; });
    document.getElementById('cody-close-modal').addEventListener('click', () => { modal.style.display = 'none'; });
    document.getElementById('cody-remove-btn').addEventListener('click', () => {
        localStorage.removeItem('cody_user_frame');
        modal.style.display = 'none';
        applyFramesToAll();
    });

    const grid = document.getElementById('cody-grid-container');
    for (let i = 1; i <= 30; i++) {
        const box = document.createElement('div');
        box.style.cssText = 'cursor:pointer; text-align:center; padding:8px; background:#21262D; border:1px solid #FFD700; border-radius:12px;';
        box.innerHTML = `
            <div class="avatar-frame-container" style="position:relative; display:inline-block; padding:3px; width:35px; height:35px; margin:0 auto;">
                <div class="avatar-animated-frame frame-style-${i}" style="position:absolute; top:0; left:0; right:0; bottom:0; border-radius:50%; z-index:3; pointer-events:none;"></div>
                <div style="width:100%; height:100%; background:#0D1117; border-radius:50%;"></div>
            </div>
            <span style="font-size:10px; display:block; margin-top:4px;">Estilo ${i}</span>
        `;
        box.addEventListener('click', () => {
            localStorage.setItem('cody_user_frame', `frame-style-${i}`);
            modal.style.display = 'none';
            applyFramesToAll();
        });
        grid.appendChild(box);
    }

    function applyFramesToAll() {
        const activeStyle = localStorage.getItem('cody_user_frame');
        const avatars = document.querySelectorAll('.user_avatar, .avatar img, img.avatar, .list_avatar, .room_avatar, .chat_avatar, .profile_avatar');

        avatars.forEach(img => {
            if (!img.parentNode.classList.contains('avatar-frame-container')) {
                const wrap = document.createElement('div');
                wrap.className = 'avatar-frame-container';
                wrap.style.cssText = 'position:relative !important; display:inline-block !important; padding:3px !important; border-radius:50% !important;';
                img.parentNode.insertBefore(wrap, img);
                wrap.appendChild(img);
            }
            const wrap = img.parentNode;
            let layer = wrap.querySelector('.avatar-animated-frame');
            if (!layer) {
                layer = document.createElement('div');
                layer.className = 'avatar-animated-frame';
                wrap.appendChild(layer);
            }
            layer.className = 'avatar-animated-frame';
            if (activeStyle) layer.classList.add(activeStyle);
        });
    }

    setInterval(applyFramesToAll, 1000);
});