/* ── Typing indicator (tre pallini animati) ────────────────────────────────── */
/* Usato da SupportChatDrawer e CustomQuery durante la generazione AI.          */

/* border-radius rimosso: ora il typing indicator è dentro un wrapper separato
   dall'avatar, quindi la forma è gestita dal container esterno */
.upf-typing-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 14px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
}

.upf-typing-indicator span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
    animation: typing-bounce 1.2s infinite;
}

.upf-typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.upf-typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing-bounce {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
    40%            { transform: translateY(-6px); opacity: 1; }
}

/* ── Markdown rendering nel pannello di supporto ───────────────────────────── */

.upf-support-chat-markdown p  { margin: 0 0 6px 0; }
.upf-support-chat-markdown ul { margin: 4px 0 4px 16px; padding: 0; }
.upf-support-chat-markdown li { margin-bottom: 2px; }
.upf-support-chat-markdown code {
    background: var(--mud-palette-background-gray);
    border-radius: 4px;
    padding: 1px 4px;
    font-size: 0.85em;
}
.upf-support-chat-markdown pre code {
    display: block;
    padding: 8px;
    overflow-x: auto;
}
.upf-support-chat-markdown strong { font-weight: 600; }

/* ── Avatar bot nelle bubble assistente ─────────────────────────────────────── */
.upf-chat-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--mud-palette-primary-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── Input chat — angoli arrotondati ─────────────────────────────────────────── */
.upf-chat-input .mud-input-outlined .mud-input-outlined-border {
    border-radius: 14px !important;
}
.upf-chat-input .mud-input-outlined-input {
    border-radius: 14px !important;
}

/* ── Animazione ingresso bubble ──────────────────────────────────────────────── */
@keyframes bubble-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}