/* ==========================================================================
   BETTERFLOW FLOATING SOCIAL BAR (Premium Liquid Glass Aesthetic)
   ========================================================================== */

:root {
    /* Kinetic Mecha Spring Easing (High-End Fluid Performance) */
    --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
    --transition-all: all 0.5s var(--ease-spring);
    --transition-transform: transform 0.5s var(--ease-spring);

    /* Liquid Glass Material Specular Tokens */
    --bf-obsidian: #08080a;
    --bf-glass-bg: rgba(255, 255, 255, 0.03); /* Muted translucent base */
    --bf-glass-border: rgba(255, 255, 255, 0.12); /* Semi-opaque specular edge */
    --bf-glass-blur: 28px;
    
    /* Multilayer shadows (Physical Bezels & Inner Highlights) */
    --bf-glass-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.35), /* Top edge spec highlight */
        inset 0 -1px 0 rgba(0, 0, 0, 0.25),      /* Bottom edge soft bezel shadow */
        inset 0 0 0 1px rgba(255, 255, 255, 0.05), /* Thin inside boundary line */
        0 4px 12px rgba(0, 0, 0, 0.2),            /* Layered physical shadow */
        0 16px 40px -8px rgba(0, 0, 0, 0.55);     /* Deep ambient backdrop shadow */

    /* Individual Glass Key Buttons */
    --bf-item-bg: rgba(255, 255, 255, 0.02);
    --bf-item-border: rgba(255, 255, 255, 0.08);
    --bf-item-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1),
        0 2px 4px rgba(0, 0, 0, 0.1);

    /* Text & Highlight Colors */
    --bf-text-primary: #ffffff;
    --bf-text-secondary: #8e919a; /* Matte silver */

    /* Liquid Glass Tooltip Styles */
    --bf-tooltip-bg: rgba(13, 13, 17, 0.72);
    --bf-tooltip-border: rgba(255, 255, 255, 0.14);
}

/* Force Dark Mode aesthetic globally for consistency */
.bf-social-bar {
    --bf-glass-bg: rgba(255, 255, 255, 0.03);
    --bf-glass-border: rgba(255, 255, 255, 0.12);
    --bf-item-bg: rgba(255, 255, 255, 0.02);
    --bf-item-border: rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   DESKTOP FLOATING TERMINAL (Anchored on the LEFT Edge)
   ========================================================================== */

.social-bar-71d6228a {
    position: fixed;
    top: 50%;
    transform: translateY(-50%) translate3d(0, 0, 0);
    z-index: 99999;
    will-change: transform, opacity;
    transition: transform 0.6s var(--ease-spring), opacity 0.6s var(--ease-spring);
}

/* Layout Orientations */
.social-bar-left {
    left: 2rem;
}

.social-bar-right {
    right: 2rem;
}

/* Fluid Hide Anim Scroll Actions */
.social-bar-71d6228a.bf-social-bar--hidden.social-bar-left {
    transform: translateY(-50%) translate3d(-140px, 0, 0) scale(0.9);
    opacity: 0;
    pointer-events: none;
}

.social-bar-71d6228a.bf-social-bar--hidden.social-bar-right {
    transform: translateY(-50%) translate3d(140px, 0, 0) scale(0.9);
    opacity: 0;
    pointer-events: none;
}

/* Floating Bar Container with Liquid Glass Physics */
.bf-social-bar__container {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    background: var(--bf-glass-bg);
    backdrop-filter: blur(var(--bf-glass-blur)) saturate(190%);
    -webkit-backdrop-filter: blur(var(--bf-glass-blur)) saturate(190%);
    border: 1px solid var(--bf-glass-border);
    border-radius: 24px; /* Superellipse curve shape */
    box-shadow: var(--bf-glass-shadow);
    z-index: 2;
    overflow: hidden;
}

/* Specular Reflection Highlight Diagonal Layer across Glass face */
.bf-social-glass-sheen {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.04) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Ambient backdrop mesh glow */
.bf-social-mesh-glow {
    position: absolute;
    inset: -60px;
    background: radial-gradient(circle at center, rgba(158, 0, 255, 0.08) 0%, rgba(255, 69, 130, 0.04) 50%, transparent 80%);
    pointer-events: none;
    opacity: 0.85;
    z-index: 1;
    mix-blend-mode: screen;
}

/* ==========================================================================
   SOCIAL ITEMS (Liquid Glass Buttons)
   ========================================================================== */

.bf-social-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-size, 45px);
    height: var(--icon-size, 45px);
    border-radius: 16px; /* Smooth superellipse squircle appearance */
    background: var(--bf-item-bg);
    border: 1px solid var(--bf-item-border);
    color: var(--bf-text-secondary);
    box-shadow: var(--bf-item-shadow);
    text-decoration: none;
    transition: var(--transition-all);
    cursor: pointer;
    outline: none;
    will-change: transform, box-shadow, background-color, color, border-color;
}

/* Center Icons neatly */
.bf-social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44%;
    height: 44%;
    z-index: 2;
    transition: transform 0.4s var(--ease-spring), color 0.4s var(--ease-spring);
    will-change: transform, color;
}

.bf-social-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.bf-social-icon i {
    font-size: calc(var(--icon-size) * 0.45);
    transition: transform 0.4s var(--ease-spring);
}

/* Enforce physical default color attributes */
.bf-social-item {
    background-color: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--bf-text-secondary) !important;
}

/* Inner fine border glowing Fresnel glint layer */
.bf-social-border-glint {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid transparent;
    pointer-events: none;
    z-index: 1;
    transition: var(--transition-all);
}

/* Interactive Hover state - Fluid glass expansion & back glow */
.bf-social-item:hover {
    transform: translateY(-3px) scale(1.1) translate3d(0, 0, 0) !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--bf-text-primary) !important;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 12px 28px -6px var(--brand-color-glow) !important;
}

.bf-social-item:hover .bf-social-border-glint {
    border-color: var(--brand-color) !important;
    opacity: 0.65;
}

.bf-social-item:hover .bf-social-icon {
    transform: scale(1.15);
    color: var(--brand-color) !important;
}

/* Accessibility Focus Outline */
.bf-social-item:focus-visible {
    transform: translateY(-3px) scale(1.1);
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--bf-text-primary) !important;
    outline: 2px solid var(--brand-color);
    outline-offset: 4px;
}

/* Original Hover Transitions modified cleanly */
.hover-slide.social-bar-left .bf-social-item:hover {
    transform: translateX(6px) translateY(-1px) scale(1.06) !important;
}

.hover-slide.social-bar-right .bf-social-item:hover {
    transform: translateX(-6px) translateY(-1px) scale(1.06) !important;
}

.hover-grow .bf-social-item:hover {
    transform: scale(1.18) translateY(-2px) !important;
}

.hover-spin .bf-social-item:hover svg,
.hover-spin .bf-social-item:hover i {
    transform: rotate(360deg) scale(1.15);
}

/* Accent Mapping Adjustments for Betterflow Dark Contrast */
.bf-social-item--twitter:hover .bf-social-icon { color: #FFFFFF !important; }
.bf-social-item--instagram:hover .bf-social-icon { color: #FF4582 !important; }
.bf-social-item--github:hover .bf-social-icon { color: #9E00FF !important; }

/* Legacy Scroll Animation State Overrides */
.social-bar-71d6228a.scroll-fade {
    opacity: 0;
    pointer-events: none;
}

.social-bar-71d6228a.scroll-fade.social-bar-left {
    transform: translateY(-50%) translate3d(-35px, 0, 0);
}

.social-bar-71d6228a.scroll-fade.social-bar-right {
    transform: translateY(-50%) translate3d(35px, 0, 0);
}

.social-bar-71d6228a.scroll-fade.visible {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(-50%) translate3d(0, 0, 0) !important;
}

/* ==========================================================================
   LIQUID GLASS TERMINAL TOOLTIPS
   ========================================================================== */

.bf-social-tooltip {
    position: absolute;
    top: 50%;
    opacity: 0;
    pointer-events: none;
    z-index: 10;
    transition: opacity 0.3s var(--ease-spring), transform 0.3s var(--ease-spring);
    will-change: transform, opacity;
}

/* Frosted glass dynamic pill */
.bf-tooltip-inner {
    display: inline-block;
    background: var(--bf-tooltip-bg);
    border: 1px solid var(--bf-tooltip-border);
    color: #FFFFFF;
    padding: 6px 14px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: -0.15px;
    white-space: nowrap;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 1.5px 0 rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
}

/* Tooltip directions aligned cleanly to Left / Right layouts */
.social-bar-left .bf-social-tooltip {
    left: calc(100% + 16px);
    right: auto;
    transform: translateY(-50%) translate3d(-12px, 0, 0) scale(0.95);
}

.social-bar-right .bf-social-tooltip {
    right: calc(100% + 16px);
    left: auto;
    transform: translateY(-50%) translate3d(12px, 0, 0) scale(0.95);
}

/* Hover reveal conditions */
.bf-social-item:hover .bf-social-tooltip,
.bf-social-item:focus-visible .bf-social-tooltip {
    opacity: 1;
}

.social-bar-left .bf-social-item:hover .bf-social-tooltip {
    transform: translateY(-50%) translate3d(0, 0, 0) scale(1);
}

.social-bar-right .bf-social-item:hover .bf-social-tooltip {
    transform: translateY(-50%) translate3d(0, 0, 0) scale(1);
}

/* ==========================================================================
   MOBILE CONTROLLER TRANSFORMATION (Horizontal Liquid Glass Dock)
   ========================================================================== */

@media (max-width: 768px) {
    /* Align centered horizontal dock along bottom iOS line */
    .social-bar-71d6228a {
        right: auto !important;
        left: 50% !important;
        top: auto !important;
        bottom: 1.5rem !important;
        transform: translate3d(-50%, 0, 0) !important;
    }

    /* Pull off hiding animations smoothly downwards */
    .social-bar-71d6228a.bf-social-bar--hidden,
    .social-bar-71d6228a.scroll-fade:not(.visible) {
        transform: translate3d(-50%, 100px, 0) !important;
        opacity: 0 !important;
    }

    /* Kill mesh glows on small mobile screens to keep performance */
    .bf-social-mesh-glow {
        display: none !important;
    }

    /* High-end iOS layout dock */
    .bf-social-bar__container {
        flex-direction: row;
        padding: 10px 14px;
        gap: 12px;
        border-radius: 20px;
        box-shadow: 
            0 0 0 1px rgba(255, 255, 255, 0.05),
            0 12px 32px rgba(0, 0, 0, 0.55);
    }

    /* Adjust items to comfortable touch footprint (42px) */
    .bf-social-item {
        width: 42px !important;
        height: 42px !important;
        border-radius: 11px;
    }

    /* Disable hover tooltips on touch screens */
    .bf-social-tooltip {
        display: none !important;
    }

    /* Responsive touch state adjustments */
    .bf-social-item:hover {
        transform: translateY(-2px) scale(1.05) !important;
    }
}

/* ==========================================================================
   ACCESSIBILITY & REDUCED MOTION SUPPORT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}