*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

html,
body{
    height: 100%;
    font-family: system-ui, sans-serif;
    font-weight: normal;
}

main{
    width: 100%;
    max-width: 700px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 8px;
}

.chat-history{
    width: 100%;
    height: 100px;
    background-color: white;
    flex-grow: 1;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    padding: 16px;
}

.chat-history > .message.assistant {
    align-self: flex-start;
    background-color: #e4e4e4;
    padding: 8px 12px;
    border-radius: 12px 12px 12px 0;
    max-width: 80%;
    white-space: pre-wrap; /* Zeilenumbrüche erhalten für Routeninformationen */
}

.chat-history > .message.user {
    align-self: flex-end;
    background-color: #e4e4e4;
    padding: 8px 12px;
    border-radius: 12px 12px 0 12px;
    max-width: 80%;
}

/* Add styling for images within messages */
.message img {
    max-width: 250px;
    max-height: 200px;
    border-radius: 8px;
    object-fit: contain;
    margin-top: 5px;
}

form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

input[type='text']{
    flex-grow: 1;
    height: 32px;
    width: 100%;
}

.button-container {
    display: flex;
    width: 100%;
    gap: 8px;
}

button {
    height: 32px;
    flex: 1;
}

/* Fehler-Nachrichten */
.error-message {
    color: #d32f2f;
    background-color: #ffebee !important;
    border-left: 3px solid #d32f2f;
}

/* System-Info-Nachrichten */
.message.system-info {
    font-style: italic;
    color: #555;
    background-color: #f5f5f5;
    padding: 5px 10px;
    border-radius: 8px;
    margin: 5px 0;
    font-size: 0.9em;
}

/* Success message for clear history */
.message.success-message {
    color: #2e7d32;
    background-color: #e8f5e9 !important;
    border-left: 3px solid #2e7d32;
}

/* Add responsive styling for mobile */
@media (max-width: 768px) {
    input[type='text']{
        font-size: 16px; /* Prevents zoom on input focus in iOS */
    }
    
    button {
        min-width: 40px;
        padding: 0 8px;
    }
    
    #clear-history-button {
        font-size: 16px; /* Make trash icon properly visible on mobile */
    }
}

.animal-selector {
    display: flex;
    width: 100%;
    gap: 8px;
    margin-top: 8px;
}

.animal-option {
    flex: 1;
    height: 32px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
}

.animal-option.selected {
    background-color: #d1e7dd;
    border-color: #86d19b;
    font-weight: bold;
}

.selected-animal-indicator {
    font-size: 0.8em;
    text-align: center;
    color: #555;
    margin-top: 4px;
}