/* TS FAB Toggler Styles */

.ts-fab-toggler {
    position: fixed !important;
    z-index: 999999 !important;
    /* Extremely high z-index to ensure visibility */
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    /* Exact match to TOC padding (12px 16px) */
    background: var(--ts-fab-toggler-bg, #f9fafb);
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* Exact match to TOC */
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    outline: none;
    visibility: visible !important;
    opacity: 1;
}

.ts-fab-toggler-left {
    left: 0 !important;
    right: auto !important;
    border-radius: 0 12px 12px 0;
    border-left: none;
}

.ts-fab-toggler-right {
    right: 0 !important;
    left: auto !important;
    border-radius: 12px 0 0 12px;
    border-right: none;
}

/* Active State (FABs Visible) - Force Black */
body:not(.ts-fabs-hidden) .ts-fab-toggler {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-color: #000000 !important;
}

/* Hover Effect - Only on devices that support hover to avoid sticky state on mobile */
@media (hover: hover) {
    .ts-fab-toggler:hover {
        background-color: #000000 !important;
        color: #ffffff !important;
        border-color: #000000 !important;
        filter: none;
    }
}

.ts-fab-toggler:focus {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.ts-fab-toggler-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    /* Matched to TOC (was 24px) */
    height: 20px;
    /* Matched to TOC (was 24px) */
    transition: transform 0.3s ease;
}

/* Toggle State Hidden */
body.ts-fabs-hidden .ts-fab-toggler-icon {
    transform: rotate(180deg);
    opacity: 0.6;
}

body.ts-fabs-hidden .ts-fab-toggler {
    opacity: 0.8;
}

/* Hidden State Logic */
body.ts-fabs-hidden .tsm-fab-container,
body.ts-fabs-hidden #ts-webpush-trigger,
body.ts-fabs-hidden .ts-webpush-trigger,
body.ts-fabs-hidden .tts-fab-container,
body.ts-fabs-hidden .ts-social-fab-container,
body.ts-fabs-hidden .ts-pdf-fab-container,
body.ts-fabs-hidden .ts-a11y-fab-container,
body.ts-fabs-hidden #ts-scroll-to-top,
body.ts-fabs-hidden .ts-scroll-to-top-button {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(20px) scale(0.9) !important;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease !important;
}

/* Ensure they have transitions when showing */
.tsm-fab-container,
#ts-webpush-trigger,
.ts-webpush-trigger,
.tts-fab-container,
.ts-social-fab-container,
.ts-pdf-fab-container,
.ts-a11y-fab-container,
#ts-scroll-to-top,
.ts-scroll-to-top-button {
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

/* Responsive adjustments if needed */
@media (max-width: 768px) {
    .ts-fab-toggler {
        padding: 10px 12px;
        /* Match TOC mobile padding */
    }
}