#chatbot-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 450px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: none; /* Başlangıçta gizli */
}

#chatbot-icon {
    position: fixed;
    bottom: 5px;
    right: 0px;
    cursor: pointer;
    z-index: 1001;
}
#chatbot-icon img{
    border-radius: 0%;
}

/* Konuşma balonu stilleri */
#chatbot-icon .chatbot-balloon {
    position: absolute;
    bottom: 20px; /* İkonun üstüne konumlandır */
    right: 100%;
    margin-right: 15px; /* İkonla arasında boşluk bırak */
    background-color: #f0f0f0;
    color: #333;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 14px;
    white-space: nowrap; /* Yazının tek satırda görünmesini sağla */
    /* display: none;  Başlangıçta gizli */
}

/* Konuşma balonunun üçgeni */
#chatbot-icon .chatbot-balloon::before {
    content: '';
    position: absolute;
    bottom: 25px;
    right: -25px;
    margin-right: 15px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent #f0f0f0;
}

#chatbot-header {
    background-color: #e0e0e0;
    justify-content: space-between;
    display: flex;
    padding: 10px;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
}

#chatbot-title {
    align-items: center;
    font-weight: bold;
    width: 80%;
}

/* Genel Stil */
#chatbot-header span {
    cursor: pointer;
    margin-top: 5px;
    display: inline-block; /* Yan yana gelmelerini sağlar */
}

/* Geri Bildirim Bırak İkonu */
#chatbot-leave-feedback {
    margin-right: 10px; /* Diğer ikonlardan ayır */
}

/* Yenileme İkonu */
#chatbot-refresh {
    margin-right: 10px; /* Diğer ikonlardan ayır */
}

/* Kapat İkonu */
#chatbot-close {
    margin-right: 0; /* En sağda olduğu için boşluk yok */
}

/* Mobil Cihazlar İçin Stil */
@media (max-width: 600px) {
    #chatbot-header span {
        font-size: 14px; /* Fontu küçült */
        margin-right: 5px; /* Boşluğu azalt */
    }

    #chatbot-leave-feedback img,
    #chatbot-refresh img {
        width: 24px; /* İkon boyutunu küçült */
        height: 24px;
    }

    #chatbot-container {
        width: 350px;
    }
}

#chatbot-header #chatbot-close {
    cursor: pointer;
    font-size: 25px;
    margin-right: 0;
}

#chatbot-messages {
    padding: 10px;
    height: 550px;
    overflow-y: auto;
}

.chatbot-message {
    padding: 8px;
    margin-bottom: 5px;
    border-radius: 5px;
    clear: both;
}

.user-message {
    background-color: #e0f7fa;
    text-align: right;
    float: right;
}

.bot-message {
    background-color: #f0f0f0;
    text-align: left;
    float: left;
}

.bot-message .like-dislike-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 5px;
}

.bot-message .like-dislike-container button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    margin-left: 5px; 
    padding: 5px;
}

.bot-message .like-dislike-container button img{
    width: 16px;
    height: 16px;
}

/* Kopyalama Butonu Stilleri */
.bot-message .like-dislike-container .copy-button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    margin-left: 5px;
}

.bot-message .like-dislike-container .copy-button img {
    width: 16px;
    height: 16px;
}

/* Beğen, Beğenme ve Kopyala Butonları Hover Stilleri */
.bot-message .like-dislike-container .like-button:hover,
.bot-message .like-dislike-container .dislike-button:hover,
.bot-message .like-dislike-container .copy-button:hover {
    background-color: #ddd; /* Gri zemin rengi */
}

#chatbot-input-area {
    padding: 10px;
    display: flex;
    border-top: 1px solid #ddd;
}

#chatbot-input {
    flex: 1;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-right: 5px;
}

#chatbot-send {
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

#chatbot-send img {
    width: 30px;  /* İkon boyutunu ayarlayabilirsiniz */
    height: 30px;
}

.loading-message img {
    width: 30px;
    height: 30px;
    margin: 5px;
}
.loading-message {
    display: flex;
    justify-content: center;
    align-items: center;
}
.chatbot-message .message-time {
    display: block;
    font-size: 0.8em;
    color: #888;
    margin-bottom: 3px;
}

/* Uyarı Mesajı Stilleri */
#chatbot-disclaimer {
    padding: 5px;
    font-size: 0.8em;
    color: #888;
    text-align: center;
    border-top: 1px solid #ddd;
}

/* Modal Pencere Stilleri (Sohbet İçine Taşındı) */
#chatbot-container #chatbot-feedback-modal {
    position: absolute;
    top: 50%; /* Dikeyde ortala */
    left: 50%; /* Yatayda ortala */
    transform: translate(-50%, -50%); /* Mükemmel ortalama için */
    width: 90%;
    max-width: 400px;
    height: auto;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 1003;
    margin-bottom: 10px;
    padding-top: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    display: none;
}


#chatbot-container #chatbot-feedback-modal h3 {
    margin-bottom: 35px;
    text-align: center;
    font-size: 1.2em; /* Başlığı küçült */
}

#chatbot-container #chatbot-feedback-modal .modal-content {
    background-color: #fefefe;
    padding: 5px;
    border: none;
    width: 95%;
    max-width: none;
    border-radius: 5px;
    position: relative;
    margin: 0 auto;
}

#chatbot-container #chatbot-feedback-modal .close-button {
    position: absolute;
    top: 0;
    right: 0;
    padding: 3px;
    cursor: pointer;
    font-size: 14px;
}

/* Puanlama Düğmeleri Stilleri */
#chatbot-container #chatbot-feedback-modal .rating-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 5px;
}

#chatbot-container #chatbot-feedback-modal .rating-button-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

#chatbot-container #chatbot-feedback-modal .rating-button {
    background-color: #557C56;
    color: white;
    padding: 2px 4px;
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
    font-size: 10px;
    margin: 1px;
    width: 20px;
    text-align: center;
}

#chatbot-container #chatbot-feedback-modal .rating-button.selected {
    background-color: #A31D1D;
    color: white;
}

/* Etiket Stilleri */
#chatbot-container #chatbot-feedback-modal .rating-label-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

#chatbot-container #chatbot-feedback-modal .rating-label {
    font-size: 8px;
    color: #888;
    margin: 1px;
}

#chatbot-container #chatbot-feedback-modal textarea {
    width: 95%;
    max-width: 95%;
    font-size: 12px;
    padding: 2px;
}

#chatbot-container #chatbot-feedback-modal #feedback-submit,
#chatbot-container #chatbot-feedback-modal #feedback-next-1 {
    font-size: 12px;
    padding: 3px 6px;
    background-color: #557C56;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    margin-top: 5px;
}