/* Fixenix Floating & Overlay UI — Support & Interaction Channels */

/* Floating Right Contact Sidebar (Desktop & Tablet) */
.contact-sidebar {
    position: fixed; right: 0; top: 35%; transform: translateY(-50%);
    background: rgba(0,0,0,0.85); backdrop-filter: blur(12px); padding: 1rem 0.8rem;
    border-radius: 30px 0 0 30px; border-left: 3px solid var(--primary-red); z-index: 999;
    display: flex; flex-direction: column; gap: 1rem;
    transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.contact-sidebar:hover { padding-right: 1.2rem; transform: translateY(-50%) translateX(2px); }

.sidebar-item {
    color: white; text-decoration: none;
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--bg-card-hover); transition: 0.2s; font-size: 1.5rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.sidebar-item:hover { background: var(--primary-red); color: white; transform: scale(1.1); }

/* Theme Adaptive Sidebar for Light Mode */
[data-theme="light"] .contact-sidebar {
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(16px);
    border-left-color: rgba(227,27,35,0.3);
    box-shadow: 0 15px 35px rgba(0,0,0,0.06);
}
[data-theme="light"] .sidebar-item {
    background: rgba(0,0,0,0.04);
    color: #333;
}
[data-theme="light"] .sidebar-item:hover {
    background: var(--primary-red);
    color: white;
}

/* Common Branding Elements */
.navbar-brand { font-weight: 800; font-size: 1.8rem; letter-spacing: -0.5px; color: var(--text-primary) !important; text-decoration: none; }
.navbar-brand span { color: var(--primary-red); }

.nav-link { color: var(--text-secondary) !important; font-weight: 500; margin: 0 0.5rem; transition: 0.3s; }
.nav-link:hover, .nav-link.active { color: var(--primary-red) !important; }

/* Mobile Logo Signature */
.mobile-logo {
    font-weight: 800; font-size: 1.6rem; letter-spacing: -0.5px;
    color: white !important; text-decoration: none;
}
.mobile-logo span { color: var(--primary-red); }

/* Avatar Branding Signature */
.avatar { box-shadow: 0 5px 15px rgba(227, 27, 35, 0.3); border: 3px solid rgba(255, 255, 255, 0.1); }
[data-theme="light"] .avatar { background: rgba(227,27,35,0.1); border-color: rgba(255,255,255,0.8); }