/**
 * AI Chat Bar - Pulsante menu (bollino)
 *
 * Il colore si personalizza con --ai-menu-btn-bg / --ai-menu-btn-icon,
 * cosi' su altri siti basta ridefinire le due variabili senza toccare questo file.
 */

.ai-menu-btn-item {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ai-menu-btn {
    /* Area cliccabile 44x44 (requisito touch) con bollino visivo piu' piccolo */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--ai-menu-btn-icon, #1a1a1a);
    -webkit-appearance: none;
    appearance: none;
}

.ai-menu-btn::before {
    /* il bollino dorato vero e proprio */
    content: "";
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ai-menu-btn-bg, #BC9B5F);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ai-menu-btn > svg {
    position: relative; /* sopra il bollino */
    z-index: 1;
}

.ai-menu-btn:hover::before {
    transform: scale(1.08);
    box-shadow: 0 4px 14px rgba(188, 155, 95, 0.45);
}

.ai-menu-btn:active::before {
    transform: scale(0.96);
}

/* Focus da tastiera sempre visibile */
.ai-menu-btn:focus-visible {
    outline: none;
}

.ai-menu-btn:focus-visible::before {
    outline: 2px solid var(--ai-menu-btn-bg, #BC9B5F);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .ai-menu-btn::before {
        transition: none;
    }
    .ai-menu-btn:hover::before,
    .ai-menu-btn:active::before {
        transform: none;
    }
}