/* ═══════════════════════════════════════════════════════════════
   CHAINLIT CUSTOM CSS - Avatar Animato + File CSV Hover
   VERSIONE 2.7 - User menu: ↻ ingrandita, rimosso emoji da username
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   FIX SIDEBAR SCROLL - Permette scorrimento verticale
   ───────────────────────────────────────────────────────────────── */

/* Container sidebar principale */
nav[aria-label="Sidebar"],
[data-testid="sidebar"],
aside,
.sidebar,
div[class*="sidebar"] {
    overflow-y: auto !important;
    max-height: 100vh !important;
}

/* Lista cronologia chat */
nav ul,
aside ul,
[data-testid="sidebar"] ul,
div[class*="history"] {
    overflow-y: auto !important;
    max-height: calc(100vh - 120px) !important;
    scrollbar-width: thin !important;
}

/* ─────────────────────────────────────────────────────────────────
   FIX SIDEBAR THREAD HOVER - Nasconde elementi extra
   ───────────────────────────────────────────────────────────────── */

/* Nasconde il div gradiente di sfumatura quando hover sui thread */
[data-sidebar="menu-button"]:hover > div[class*="bg-gradient"],
[data-sidebar="menu-item"]:hover div[class*="bg-gradient"],
.group\\/thread:hover > div[class*="gradient"],
li:hover div[class*="from-"] {
    opacity: 0 !important;
}

/* Assicura che i tre puntini abbiano sfondo pulito */
[data-sidebar="menu-item"] > div[class*="opacity-0"],
#thread-options,
[id*="thread-options"] {
    background: transparent !important;
}

/* Hover sui tre puntini - solo icona, no sfondo extra */
#thread-options:hover,
[id*="thread-options"]:hover {
    background-color: hsl(var(--sidebar-accent)) !important;
}

/* Nasconde eventuali elementi extra dopo i tre puntini */
[data-sidebar="menu-item"] > *:last-child:not([data-sidebar="menu-button"]):not(a):not(button) {
    display: none !important;
}

/* Assicura che il container del titolo thread non overflowi */
nav li,
aside li,
[data-sidebar="menu-item"] {
    overflow: hidden !important;
}

/* Scrollbar sottile per estetica */
nav::-webkit-scrollbar,
aside::-webkit-scrollbar {
    width: 6px;
}

nav::-webkit-scrollbar-thumb,
aside::-webkit-scrollbar-thumb {
    background-color: rgba(128, 128, 128, 0.4);
    border-radius: 3px;
}

nav::-webkit-scrollbar-thumb:hover,
aside::-webkit-scrollbar-thumb:hover {
    background-color: rgba(128, 128, 128, 0.6);
}

/* Animazioni native Chainlit - non modificare */

/* ─────────────────────────────────────────────────────────────────
   TONDINO ATTESA → Avatar (NO spin custom)
   ───────────────────────────────────────────────────────────────── */

/* APPLICA AVATAR a TUTTI i placeholder animate-pulse rounded-full */
.animate-pulse.bg-muted.rounded-full,
div.animate-pulse.bg-muted.rounded-full,
span.animate-pulse.bg-muted.rounded-full {
    background-image: url('/avatars/Assistant') !important;
    background-size: cover !important;
    background-position: center !important;
    background-color: transparent !important;
}

/* ─────────────────────────────────────────────────────────────────
   FERMA PULSAZIONE AVATAR NEGLI STEP
   ───────────────────────────────────────────────────────────────── */

/* Avatar negli step NON devono pulsare */
.step .animate-pulse,
[class*="step"] .animate-pulse,
.step img,
[class*="step"] img,
/* Icone Lucide SVG negli step (cl.Step icon="..."): no pulse */
.step svg,
[class*="step"] svg,
/* Containers Tailwind animate-* dentro step */
.step [class*="animate-"],
[class*="step"] [class*="animate-"] {
    animation: none !important;
}

/* ─────────────────────────────────────────────────────────────────
   AVATAR MESSAGGI - Usa animazioni native Chainlit
   ───────────────────────────────────────────────────────────────── */

/* Avatar statico di default - animazioni gestite da Chainlit */
img[alt="Avatar for Assistente AI"] {
    border-radius: 50%;
}

/* ─────────────────────────────────────────────────────────────────
   NASCONDE PALLINO TYPING
   ───────────────────────────────────────────────────────────────── */

.rounded-full.bg-foreground {
    display: none !important;
}

/* ─────────────────────────────────────────────────────────────────
   NASCONDE PALLINO TYPING
   ───────────────────────────────────────────────────────────────── */

.rounded-full.bg-foreground {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   FILE ATTACHMENT CSV - Stile compatto con hover
   Basato su documentazione Chainlit + Web Inspector
   ═══════════════════════════════════════════════════════════════ */

/* Target specifico: div con classi bg-card text-card-foreground shadow-sm */
div.bg-card.text-card-foreground.shadow-sm.h-full[class*="flex"] {
    transition: all 0.2s ease-in-out !important;
    cursor: pointer !important;
}

/* Hover effect */
div.bg-card.text-card-foreground.shadow-sm.h-full[class*="flex"]:hover {
    background-color: hsl(210, 100%, 50%, 0.05) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.2) !important;
    border-color: hsl(210, 100%, 50%, 0.3) !important;
}

/* Riduce icona da w-10 (2.5rem = 40px) a w-8 (2rem = 32px) */
div.bg-card div.w-10 {
    width: 2rem !important;
    min-width: 2rem !important;
}

/* Testo più piccolo */
div.bg-card span.truncate.font-medium {
    font-size: 0.8125rem !important;
}

/* Icona con transizione opacità */
div.bg-card svg {
    opacity: 0.85 !important;
    transition: opacity 0.2s ease !important;
}

div.bg-card:hover svg {
    opacity: 1 !important;
}

/* ═══════════════════════════════════════════════════════════════
   PULSANTE COPIA CODICE - Rimuove sfondo verde dopo click
   ═══════════════════════════════════════════════════════════════ */

/* RESET - Rimuove sfondo verde ma mantiene transizioni fluide */
button[class*="copy"],
button[class*="Copy"],
button[aria-label*="copy" i],
button[aria-label*="Copy" i],
button[aria-label*="copied" i],
button[aria-label*="Copied" i],
[class*="copy-button"],
[class*="copyButton"],
[data-testid*="copy"],
pre button,
code + button,
.prose button,
[class*="code"] button,
[class*="Code"] button {
    transition: all 0.2s ease !important;
}

/* Stato SUCCESS/COPIED - trasparente invece di verde */
button[class*="copy"].copied,
button[class*="copy"].success,
button[class*="copy"][data-state="copied"],
button[class*="copy"][data-copied],
button.bg-green-500,
button.bg-green-600,
button.bg-success,
button[class*="success"],
button[class*="Success"],
button[class*="green"]:not(:hover),
button[class*="Green"]:not(:hover),
[class*="bg-green"]:not(:hover),
[class*="bg-success"]:not(:hover) {
    background-color: transparent !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
}

/* Override Tailwind green classes */
.bg-green-500, .bg-green-600, .bg-green-700,
.bg-success, .bg-emerald-500, .bg-emerald-600 {
    background-color: transparent !important;
    transition: all 0.2s ease !important;
}

/* Hover/Focus - sfondo leggero per contrasto */
button[class*="copy"]:hover,
button[class*="copy"]:focus,
pre button:hover,
pre button:focus,
[class*="code"] button:hover,
[class*="code"] button:focus {
    background-color: rgba(128, 128, 128, 0.15) !important;
    backdrop-filter: blur(2px);
    transition: all 0.2s ease !important;
}

/* Active - senza ingrandimento */
button[class*="copy"]:active,
pre button:active {
    background-color: rgba(128, 128, 128, 0.25) !important;
    transition: all 0.1s ease !important;
}

/* Classe temporanea per bloccare sfondo verde dopo click */
button.copy-no-green,
button.copy-no-green:active,
button.copy-no-green:focus {
    background-color: transparent !important;
    background: transparent !important;
}

/* Hover funziona anche con classe copy-no-green */
button.copy-no-green:hover {
    background-color: rgba(128, 128, 128, 0.15) !important;
}

/* Tooltip "Copiato" dopo click */
button[class*="copy"][aria-label*="copied" i]::after,
button[class*="copy"][aria-label*="Copied" i]::after,
button[class*="copy"].copied::after,
button[class*="copy"][data-copied]::after {
    content: "Copiato!";
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 1;
    pointer-events: none;
    z-index: 1000;
    animation: fadeInOut 2s ease forwards;
}

@keyframes fadeInOut {
    0% { opacity: 0; transform: translateX(-50%) translateY(5px); }
    15% { opacity: 1; transform: translateX(-50%) translateY(0); }
    85% { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-5px); }
}

/* ═══════════════════════════════════════════════════════════════
   USER MENU - Ripristinato (mostrato normalmente)
   ═══════════════════════════════════════════════════════════════ */

/* Menu utente visibile normalmente */

/* Nota: il CSS che forzava pointer-events:auto + cursor:help sul
   bottone settings disabilitato è stato rimosso (2026-04-29):
   non funzionava in modo affidabile in tutti i contesti. Il tooltip
   nativo si mostra correttamente con focus/hover diretti sui bottoni
   abilitati (es. icona "Allega file"). */

/* ═══════════════════════════════════════════════════════════════
   EXPORT LINKS - Footer markdown con icona Lucide + label testuale
   I link a /download/ e /preview/ sono anchor user-activated (Safari OK).
   Icona inserita via mask-image SVG inline (currentColor → light/dark safe),
   stile pillola coerente con cl.Action sopra.
   ═══════════════════════════════════════════════════════════════ */

a[href*="/download/"],
a[href*="/preview/"] {
    display: inline-block !important;
    padding: 3px 10px 3px 8px !important;
    margin: 2px 4px 2px 0 !important;
    border-radius: 999px !important;
    background-color: rgba(127, 127, 127, 0.10) !important;
    color: inherit !important;
    text-decoration: none !important;
    font-size: 0.78em !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    border: 1px solid rgba(127, 127, 127, 0.20) !important;
    transition: background-color 0.15s ease, transform 0.1s ease, border-color 0.15s ease !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

a[href*="/download/"]:hover,
a[href*="/preview/"]:hover {
    background-color: rgba(127, 127, 127, 0.22) !important;
    border-color: rgba(127, 127, 127, 0.34) !important;
    transform: translateY(-1px) !important;
    cursor: pointer !important;
}

a[href*="/download/"]:active,
a[href*="/preview/"]:active {
    transform: translateY(0) !important;
}

/* L'icona SVG viene iniettata via custom.js (DOM injection) — più robusto
   delle pseudo-classi ::before che alcune regole MUI/Chainlit possono bloccare.
   L'SVG inserito ha stroke='currentColor' → colore segue il testo automaticamente. */
.export-link-icon {
    width: 13px;
    height: 13px;
    margin-right: 5px;
    vertical-align: -2px;
    opacity: 0.85;
    flex-shrink: 0;
    display: inline-block;
}

/* Riduci spaziatura tra hr e riga di pulsanti */
.message-content hr + p,
.markdown-body hr + p {
    margin-top: 6px !important;
}