/* Floating Sidebar Toggle Button - Telegram Style */
.floating-sidebar-toggle {
    position: fixed;
    left: 320px;
    /* Right edge of sidebar */
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 48px;
    background: rgba(102, 126, 234, 0.25);
    /* Much more transparent */
    border: none;
    border-radius: 0 6px 6px 0;
    cursor: pointer;
    z-index: 1002;
    /* Above sidebar */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 1px 0 2px rgba(0, 0, 0, 0.1);
    transition: left 0.3s cubic-bezier(0.25, 1, 0.5, 1), background 0.2s ease, opacity 0.2s ease;
    opacity: 0.4;
    /* More transparent by default */
}

.floating-sidebar-toggle:hover {
    opacity: 0.7;
    /* Slightly more visible on hover */
    background: rgba(102, 126, 234, 0.4);
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.15);
}

.floating-sidebar-toggle .toggle-arrow {
    color: white;
    font-size: 14px;
    font-weight: bold;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    display: inline-block;
}

/* When sidebar is collapsed on desktop */
.sidebar.collapsed~.floating-sidebar-toggle {
    left: 0;
}

.sidebar.collapsed~.floating-sidebar-toggle .toggle-arrow {
    transform: rotate(180deg);
}

/* Mobile: When sidebar is hidden */
@media (max-width: 480px) {
    .floating-sidebar-toggle {
        left: 0;
        /* Start at left edge */
        width: 32px;
        height: 56px;
        top: 50%;
        /* Centered vertically like desktop */
        border-radius: 0 8px 8px 0;
        opacity: 0.9;
    }

    /* When sidebar is open on mobile, follow it */
    .sidebar.open~.floating-sidebar-toggle {
        /* Sidebar is 85% on mobile (style.css) */
        left: 85%;
    }

    /* Arrow points right when closed, left when open */
    .floating-sidebar-toggle .toggle-arrow {
        transform: rotate(180deg);
        /* Default: point right (closed state) */
    }

    .sidebar.open~.floating-sidebar-toggle .toggle-arrow {
        transform: rotate(0deg);
        /* Point left when open */
    }
}

/* Tablet Adjustment (481px - 768px) matches style.css sidebar width 280px */
@media (min-width: 481px) and (max-width: 768px) {
    .sidebar.open~.floating-sidebar-toggle {
        left: 280px;
    }

    .floating-sidebar-toggle .toggle-arrow {
        transform: rotate(180deg);
    }

    .sidebar.open~.floating-sidebar-toggle .toggle-arrow {
        transform: rotate(0deg);
    }
}

/* Dark theme adjustments */
[data-theme="dark"] .floating-sidebar-toggle {
    background: rgba(74, 95, 193, 0.25);
    box-shadow: 1px 0 2px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .floating-sidebar-toggle:hover {
    background: rgba(74, 95, 193, 0.4);
}