.message {
    background-color: #1a1a1a;
    color: #8a8a8a;
    padding: 12px;
    border-left: 3px solid #333;
    margin-bottom: 12px;
    font-size: 0.9em;
    word-wrap: break-word;
    transition: all 0.3s ease;
    animation: messageAppear 1.5s ease-out;
    letter-spacing: 0.5px;
    line-height: 1.4;
    opacity: 0;
}

@keyframes messageAppear {
    0% { 
        opacity: 0; 
        filter: blur(10px);
        transform: translateX(-10px);
    }
    50% {
        opacity: 0.5;
        filter: blur(5px);
    }
    100% { 
        opacity: 1;
        filter: blur(0);
        transform: translateX(0);
    }
}

.message.visible {
    opacity: 1;
}

.message:hover {
    border-left-color: #444;
    background-color: #1d1d1d;
}

.user-message {
    align-self: flex-end;
    background-color: #1f1f1f;
    color: #aaa;
    border-left: none;
    border-right: 3px solid #444;
}