/**
 * PromptEngine Integration CSS
 * 
 * Stili addizionali per integrare il bottone Strumenti nei Grey Buttons
 * senza modificare frontend.css esistente.
 *
 * @package HairColorGPT_Unified
 * @subpackage PromptEngine
 * @since 1.6.0
 */

/* ========================================
   GREY BUTTONS CONTAINER - ORDER FIX
   ======================================== */

/* Assicura che i Grey Buttons siano flex e rispettino l'order */
#hcgpt-grey-buttons-container {
    display: flex !important;
    gap: 11px;
    align-items: center;
}

/* Order specifico per ogni bottone - Upload a sinistra */
#hcgpt-upload-btn,
#hcgpt-grey-buttons-container > label:first-child {
    order: 10 !important;
}

#hcgpt-grey-buttons-container .hcgpt-tools-dropdown {
    order: 11 !important;
}

#hcgpt-refresh-suggestions {
    order: 12 !important;
}

#hcgpt-websearch-btn {
    order: 13 !important;
}

/* ========================================
   COMPATIBILITÀ CON STILI ESISTENTI
   ======================================== */

/* Il bottone Strumenti eredita gli stili dei grey buttons */
.hcgpt-tools-main-btn {
    /* Gli stili principali sono in tool-ui.css, qui solo override se necessari */
}

/* Assicura che il menu non interferisca con il layout */
.hcgpt-tools-menu {
    position: absolute !important;
    display: none;
}

/* Quando aperto, il menu deve essere visibile sopra tutto */
.hcgpt-tools-menu[style*="display: block"],
.hcgpt-tools-menu.show {
    display: block !important;
}

/* ========================================
   RESPONSIVE - Mobile
   ======================================== */

@media (max-width: 767.98px) {
    #hcgpt-grey-buttons-container {
        gap: 8px;
    }
}

@media (max-width: 480px) {
    #hcgpt-grey-buttons-container {
        gap: 6px;
    }
}

/* ========================================
   PROMPT ENGINE: ICONE SOLO-SVG NEI GREY BUTTONS
   ======================================== */

/* Prompt Engine: icone solo-svg nei grey buttons */
#hcgpt-grey-buttons-container .hcgpt-grey-btn svg {
    width: 22px;
    height: 22px;
    display: block;
}

#hcgpt-grey-buttons-container .hcgpt-grey-btn { 
    color: inherit; /* icone stesso colore delle grey */
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
    width: auto;
    height: auto;
    min-width: auto;
    min-height: auto;
}

/* Cursor pointer per indicare cliccabilità */
#hcgpt-grey-buttons-container .hcgpt-grey-btn {
    cursor: pointer !important;
}

/* Hover: stesso comportamento delle altre icone grey */
#hcgpt-grey-buttons-container .hcgpt-grey-btn:hover {
    background: transparent;
    transform: translateY(-1px);
    box-shadow: none;
    transition: all 0.2s ease;
}

/* Hover per SVG */
#hcgpt-grey-buttons-container .hcgpt-grey-btn:hover svg {
    transform: translateY(-1px);
    transition: transform 0.2s ease;
}

/* ========================================
   UPLOAD BUTTON - STESSO HOVER DI STRUMENTI
   ======================================== */

/* Hover per il pulsante upload (icona +) */
#hcgpt-upload-btn,
#hcgpt-grey-buttons-container > label:first-child {
    background: none;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.17s ease, transform 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#hcgpt-upload-btn:hover,
#hcgpt-grey-buttons-container > label:first-child:hover {
    background: var(--hcgpt-control-hover-bg);
}

#hcgpt-upload-btn:hover svg,
#hcgpt-grey-buttons-container > label:first-child:hover svg {
    transform: translateY(-1px);
    transition: transform 0.2s ease;
}