/* Bit Helpdesk Widget CSS */

/* x-cloak: hide widget until Alpine.js initializes */
[x-cloak].helpdesk-widget,
.helpdesk-widget[x-cloak] {
    display: none !important;
}

.helpdesk-widget__trigger {
    position: fixed;
    bottom: 1.5rem;
    z-index: 50;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 9999px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #111827;
    color: #ffffff;
    border: none;
    cursor: pointer;
    transition: all 300ms ease-out;
    outline: none;
}

.helpdesk-widget__trigger:hover {
    background-color: #1f2937;
    transform: scale(1.1);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.helpdesk-widget__trigger:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #111827, 0 0 0 4px #ffffff;
}

.helpdesk-widget__trigger svg {
    width: 1.5rem;
    height: 1.5rem;
    transition: transform 300ms ease-out;
}

.helpdesk-widget__trigger:hover svg {
    transform: scale(1.1);
}

.helpdesk-widget--right { right: 1.5rem; }
.helpdesk-widget--left { left: 1.5rem; }
.helpdesk-widget--center { left: 50%; transform: translateX(-50%); }
.helpdesk-widget--center:hover { transform: translateX(-50%) scale(1.1); }

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .helpdesk-widget__trigger {
        background-color: #ffffff;
        color: #111827;
    }
    .helpdesk-widget__trigger:hover {
        background-color: #f3f4f6;
    }
    .helpdesk-widget__trigger:focus-visible {
        box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #111827;
    }
}

/* Alpine transitions */
[x-cloak] { display: none !important; }