/* Plik index.css - teraz zawiera tylko style niestandardowe */

/* Ustawienie domyślnej czcionki, jeśli Google Fonts się nie załaduje */
body {
    font-family: 'Inter', sans-serif;
}

/* Style dla niestandardowych elementów, których nie ma w Tailwind */
.message a {
    color: inherit;
    text-decoration: underline;
    font-weight: 600;
}
.message a:hover {
    text-decoration: none;
}

/* "Ogonki" dymków czatu */
.message.user {
    position: relative;
    background-color: #f59e0b; /* Używamy koloru z Twojej strony */
    color: #1a202c;
    border-radius: 1rem;
    border-bottom-right-radius: 0.25rem;
}
.message.user::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: -8px;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-left-color: #f59e0b;
    border-bottom-color: #f59e0b;
}

.message.model {
    position: relative;
    border-radius: 1rem;
    border-bottom-left-radius: 0.25rem;
}
.message.model::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -8px;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-right-color: #e5e7eb; /* Kolor tła z Tailwind (bg-gray-200) */
    border-bottom-color: #e5e7eb;
}

/* Animacja ładowania */
.loading {
    padding-left: 2.5rem !important; /* Daj miejsce na kropki */
}
.dot-flashing {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 5px;
    background-color: #9ca3af;
    color: #9ca3af;
    animation: dot-flashing 1s infinite linear alternate;
    animation-delay: 0.5s;
}
.dot-flashing::before, .dot-flashing::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
}
.dot-flashing::before {
    left: -12px;
    width: 8px;
    height: 8px;
    border-radius: 5px;
    background-color: #9ca3af;
    color: #9ca3af;
    animation: dot-flashing 1s infinite alternate;
    animation-delay: 0s;
}
.dot-flashing::after {
    left: 12px;
    width: 8px;
    height: 8px;
    border-radius: 5px;
    background-color: #9ca3af;
    color: #9ca3af;
    animation: dot-flashing 1s infinite alternate;
    animation-delay: 1s;
}
@keyframes dot-flashing {
    0% { background-color: #9ca3af; }
    50%, 100% { background-color: #d1d5db; }
}