.character-widget {
    position: relative;
    display: inline-block;
    width: 100%; /* Larghezza totale del contenitore */
    height: auto; /* Altezza automatica per mantenere il rapporto */
}

.character-widget img {
    position: absolute; /* Permette il posizionamento tramite CSS */
    width: 100%;
    height: auto;
    display: block; /* Assicura che l'immagine non influenzi la nuvoletta */
    transition: all var(--animation-speed) ease-in-out;
}

.speech-bubble {
    position: absolute;
    top: 10%;
    left: 50%;
    background-color: #fff;
    padding: 10px;
    border-radius: 10px;
    font-size: 18px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    color: #000;
    border: 1px solid transparent; /* Aggiunto per il controllo del colore del bordo */
    z-index: 10; /* Assicura che la nuvoletta sia sopra l'immagine */
    max-width: 80%; /* Larghezza massima del tooltip */
    word-wrap: break-word; /* A capo automatico */
    white-space: normal; /* Assicura che il testo vada a capo */
    /* Aggiunta della freccetta o dei puntini */
    position: relative;
}

.speech-bubble::after {
    content: '';
    position: absolute;
    left: -20px;
    top: 50%;
    border-width: 10px;
    border-style: solid;
    border-color: transparent #fff transparent transparent;
    z-index: -1;
}

/* Stili per i diversi tipi di fumetti */
.speech-bubble.type1 {
    /* Stile per il tipo 1 */
    border-radius: 10px;
}

.speech-bubble.type2 {
    /* Stile per il tipo 2 */
    border-radius: 0;
    border: 2px solid #000;
}

.speech-bubble.type3 {
    /* Stile per il tipo 3 */
    border-radius: 50%;
}

.speech-bubble.type4 {
    /* Stile per il tipo 4 */
    border-radius: 10px;
    background: url('path/to/cloud-image.png') no-repeat center center;
    background-size: cover;
}

/* Aggiungi stili per altre posizioni se necessario */
.speech-bubble[data-arrow-position="top"]::after {
    top: -10px;
    bottom: auto;
    border-color: transparent transparent #fff transparent;
}

.speech-bubble[data-arrow-position="left"]::after {
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    border-color: transparent transparent transparent #fff;
}

.speech-bubble[data-arrow-position="right"]::after {
    right: -10px;
    left: auto;
    top: 50%;
    transform: translateY(-50%);
    border-color: transparent #fff transparent transparent;
}

.speech-bubble[data-arrow-position="bottom"]::after {
    bottom: -10px;
    top: auto;
    border-color: #fff transparent transparent transparent;
}

.speech-text {
    display: block; /* Mostra tutti i testi */
    opacity: 1; /* Mostra i testi */
    position: relative; /* Assicura che il testo sia sopra la freccetta */
    z-index: 1; /* Assicura che il testo sia sopra la freccetta */
    transition: all var(--animation-speed) ease-in-out;
    word-wrap: break-word; /* A capo automatico */
    white-space: normal; /* Assicura che il testo vada a capo */
}

.animated-text-fade {
    animation: fadeIn var(--animation-speed) ease-in-out forwards;
}

.animated-text-slide {
    animation: slideIn var(--animation-speed) ease-in-out forwards;
}

.animated-text-typewriter {
    overflow: hidden;
    white-space: normal;
    word-wrap: break-word; /* A capo automatico */
    animation: typewriter var(--animation-speed) steps(40) 1s 1 normal both;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes typewriter {
    from { width: 0; }
    to { width: 100%; }
}