/**
 * PromptEngine Tool UI Styles
 * 
 * Stili per il dropdown strumenti e l'indicatore di modalità attiva.
 * Design pulito e discreto che si integra con l'UI esistente.
 *
 * @package HairColorGPT_Unified
 * @subpackage PromptEngine
 * @since 1.6.0
 */

/* ========================================
   CONTAINER STRUMENTI (dentro grey buttons)
   ======================================== */

#hcgpt-tools-dropdown {
    position: relative;
    display: inline-block;
}

/* ========================================
   PULSANTE PRINCIPALE (stile grey button)
   ======================================== */

.hcgpt-tools-main-btn {
    background: none;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.17s;
    color: var(--hcgpt-color-text-muted);
}

.hcgpt-tools-main-btn:hover {
    background: var(--hcgpt-surface-hover);
}

.hcgpt-tools-icon {
    width: 20px !important;
    height: 20px !important;
    stroke: currentColor;
    fill: none;
    flex-shrink: 0;
    display: block !important;
    pointer-events: none;
}

/* ========================================
   MENU DROPDOWN
   ======================================== */

.hcgpt-tools-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    padding: var(--hcgpt-menu-shell-padding, 8px);
    min-width: 180px;
    z-index: 999990;
    display: none;
}

.hcgpt-tools-menu.show {
    display: block;
}

/* ========================================
   ITEM DEL MENU
   ======================================== */

.hcgpt-tool-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: var(--hcgpt-menu-item-pad-y, 9px) var(--hcgpt-menu-item-pad-x, 12px);
    background: transparent;
    border: none;
    border-radius: var(--hcgpt-menu-item-radius, 8px);
    color: var(--hcgpt-color-text);
    font-size: var(--hcgpt-menu-item-font-size, var(--hcgpt-font-size-13));
    font-weight: var(--hcgpt-menu-item-font-weight, var(--hcgpt-font-weight-medium));
    line-height: var(--hcgpt-menu-item-line-height, var(--hcgpt-line-height-120));
    text-align: left;
    cursor: pointer;
    transition: background var(--hcgpt-transition-fast), color var(--hcgpt-transition-fast);
    font-family: var(--hcgpt-font-sans);
    font-style: normal;
    text-transform: var(--hcgpt-text-transform-none);
}

.hcgpt-tool-item:hover {
    background: var(--hcgpt-menu-item-hover-bg, var(--hcgpt-overlay-item-hover-bg));
    color: var(--hcgpt-color-text);
}

/* Icone SVG negli item del menu */
.hcgpt-tool-item-icon {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0;
    display: block !important;
    pointer-events: none;
}

.hcgpt-tool-item > span:first-child {
    font-size: var(--hcgpt-font-size-16);
    line-height: var(--hcgpt-line-height-100);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}

.hcgpt-tool-label {
    flex: 1;
    line-height: var(--hcgpt-menu-item-line-height, var(--hcgpt-line-height-120));
}

/* Item Reset/Disattiva con stile diverso */
.hcgpt-tool-item.hcgpt-tool-reset,
.hcgpt-tool-reset {
    color: var(--hcgpt-color-text-muted);
}

.hcgpt-tool-item.hcgpt-tool-reset:hover,
.hcgpt-tool-reset:hover {
    color: var(--hcgpt-danger);
    background: color-mix(in srgb, var(--hcgpt-danger) 10%, transparent);
}

/* ========================================
   DIVIDER NEL MENU
   ======================================== */

.hcgpt-tools-divider {
    height: 1px;
    background: var(--hcgpt-color-border);
    margin: 6px 0;
}

/* ========================================
   INDICATORE MODALITÀ ATTIVA (badge sopra input)
   ======================================== */

.hcgpt-tool-indicator {
    display: none;
    padding: 6px 10px;
    background: color-mix(in srgb, var(--hcgpt-accent) 12%, var(--hcgpt-surface));
    border: 1px solid color-mix(in srgb, var(--hcgpt-accent) 35%, var(--hcgpt-color-border));
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: var(--hcgpt-font-size-12);
    font-weight: var(--hcgpt-font-weight-medium);
    color: var(--hcgpt-accent);
    text-align: center;
    animation: slideInDown 0.3s ease-out;
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hcgpt-indicator-close {
    background: transparent;
    border: none;
    color: var(--hcgpt-accent);
    cursor: pointer;
    padding: 0 4px;
    margin-left: 6px;
    font-size: var(--hcgpt-font-size-14);
    line-height: var(--hcgpt-line-height-100);
    transition: color 0.2s;
}

.hcgpt-indicator-close:hover {
    color: var(--hcgpt-accent);
}

/* ========================================
   RESPONSIVE MOBILE
   ======================================== */

@media (max-width: 767.98px) {
    .hcgpt-tools-menu {
        right: auto;
        left: 0;
        min-width: 160px;
    }

    .hcgpt-tool-item {
        padding: var(--hcgpt-menu-item-pad-y, 9px) var(--hcgpt-menu-item-pad-x, 12px);
        font-size: var(--hcgpt-menu-item-font-size, var(--hcgpt-font-size-13));
    }
    
    .hcgpt-tool-indicator {
        font-size: var(--hcgpt-font-size-11);
        padding: 5px 8px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .hcgpt-tool-indicator {
        animation: none;
    }
    
    .hcgpt-tools-main-btn,
    .hcgpt-tool-item,
    .hcgpt-indicator-close {
        transition: none;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .hcgpt-tools-menu {
        border: 2px solid var(--hcgpt-color-text);
    }
    
    .hcgpt-tool-indicator {
        border: 2px solid var(--hcgpt-color-focus-ring);
    }
    
    .hcgpt-tools-main-btn,
    .hcgpt-tool-item {
        border: 1px solid transparent;
    }
    
    .hcgpt-tools-main-btn:hover,
    .hcgpt-tool-item:hover {
        border-color: var(--hcgpt-color-text);
    }
}

/* ========================================
   INTEGRAZIONE CON LAYOUT ESISTENTE
   ======================================== */

/* Order dei Grey Buttons: Upload a sinistra, Tools dopo */
#hcgpt-grey-buttons-container {
    display: flex;
    gap: 11px;
}

#hcgpt-upload-btn,
#hcgpt-grey-buttons-container > label {
    order: 10; /* Upload prima */
}

#hcgpt-tools-dropdown {
    order: 11; /* Tools dopo upload */
}

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

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

/* Assicura che il dropdown non venga coperto */
#hcgpt-tools-dropdown {
    position: relative;
    z-index: 1001;
}

.hcgpt-tools-menu {
    z-index: 1002;
}

/* Mobile: z-index ancora più alto per stare sopra input sticky */
@media (max-width: 767.98px) {
    #hcgpt-tools-dropdown {
        z-index: 1050;
    }
    
    .hcgpt-tools-menu {
        z-index: 1051;
    }
}

/* Indicatore legacy: visibile solo se valorizzato esplicitamente */
.hcgpt-tool-indicator:not([hidden]):not(:empty) {
    display: block;
    width: auto;
    max-width: 100%;
}

.hcgpt-tool-indicator:empty {
    display: none !important;
}

/* ========================================
   VARIANTI TEMA
   ======================================== */

/* Tema scuro */
@media (prefers-color-scheme: dark) {
    .hcgpt-tools-menu {
        background: var(--hcgpt-surface);
        border-color: var(--hcgpt-color-border);
        box-shadow: var(--hcgpt-shadow-lg);
    }
    
    .hcgpt-tools-main-btn,
    .hcgpt-tool-item {
        color: var(--hcgpt-color-text-muted);
    }
    
    .hcgpt-tools-main-btn:hover,
    .hcgpt-tool-item:hover {
        background: var(--hcgpt-control-hover-bg);
        color: var(--hcgpt-color-text);
    }
    
    .hcgpt-tool-indicator {
        background: color-mix(in srgb, var(--hcgpt-accent) 12%, var(--hcgpt-surface));
        border-color: color-mix(in srgb, var(--hcgpt-accent) 35%, var(--hcgpt-color-border));
        color: var(--hcgpt-accent);
    }
    
    .hcgpt-tools-divider {
        background: var(--hcgpt-color-border);
    }
    
    .hcgpt-indicator-close {
        color: var(--hcgpt-accent);
    }
    
    .hcgpt-indicator-close:hover {
        background: color-mix(in srgb, var(--hcgpt-accent) 18%, transparent);
        color: var(--hcgpt-accent);
    }
}

/* Tema scuro (HCGPT scope) */
:where(.hcgpt-scope[data-hcgpt-theme="dark"]) .hcgpt-tools-main-btn {
    color: var(--hcgpt-color-text-muted);
}

:where(.hcgpt-scope[data-hcgpt-theme="dark"]) .hcgpt-tools-main-btn:hover {
    background: var(--hcgpt-color-surface-2);
    color: var(--hcgpt-color-text);
}

:where(.hcgpt-scope[data-hcgpt-theme="dark"]) .hcgpt-tool-item {
    color: var(--hcgpt-color-text);
}

:where(.hcgpt-scope[data-hcgpt-theme="dark"]) .hcgpt-tool-item.hcgpt-tool-reset,
:where(.hcgpt-scope[data-hcgpt-theme="dark"]) .hcgpt-tool-reset {
    color: var(--hcgpt-color-text-muted);
}

:where(.hcgpt-scope[data-hcgpt-theme="dark"]) .hcgpt-tool-item.hcgpt-tool-reset:hover,
:where(.hcgpt-scope[data-hcgpt-theme="dark"]) .hcgpt-tool-reset:hover {
    color: var(--hcgpt-danger);
    background: var(--hcgpt-color-surface-3);
}

:where(.hcgpt-scope[data-hcgpt-theme="dark"]) .hcgpt-tools-divider {
    background: var(--hcgpt-color-border);
}

@media (prefers-color-scheme: dark) {
    :where(.hcgpt-scope[data-hcgpt-theme="system"]) .hcgpt-tools-main-btn {
        color: var(--hcgpt-color-text-muted);
    }

    :where(.hcgpt-scope[data-hcgpt-theme="system"]) .hcgpt-tools-main-btn:hover {
        background: var(--hcgpt-color-surface-2);
        color: var(--hcgpt-color-text);
    }

    :where(.hcgpt-scope[data-hcgpt-theme="system"]) .hcgpt-tool-item {
        color: var(--hcgpt-color-text);
    }

    :where(.hcgpt-scope[data-hcgpt-theme="system"]) .hcgpt-tool-item.hcgpt-tool-reset,
    :where(.hcgpt-scope[data-hcgpt-theme="system"]) .hcgpt-tool-reset {
        color: var(--hcgpt-color-text-muted);
    }

    :where(.hcgpt-scope[data-hcgpt-theme="system"]) .hcgpt-tool-item.hcgpt-tool-reset:hover,
    :where(.hcgpt-scope[data-hcgpt-theme="system"]) .hcgpt-tool-reset:hover {
        color: var(--hcgpt-danger);
        background: var(--hcgpt-color-surface-3);
    }

    :where(.hcgpt-scope[data-hcgpt-theme="system"]) .hcgpt-tools-divider {
        background: var(--hcgpt-color-border);
    }
}

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

/* Stili base per il pulsante upload */
#hcgpt-upload-btn,
#hcgpt-grey-buttons-container > label {
    background: none;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.17s ease, transform 0.2s ease;
    color: var(--hcgpt-color-text-muted);
}

/* Hover identico a .hcgpt-tools-main-btn:hover */
#hcgpt-upload-btn:hover,
#hcgpt-grey-buttons-container > label:hover {
    background: var(--hcgpt-control-hover-bg);
}

/* Effetto movimento SVG al hover */
#hcgpt-upload-btn:hover svg,
#hcgpt-grey-buttons-container > label:hover svg {
    transform: translateY(-1px);
    transition: transform 0.2s ease;
}