/* Modern Avand AI Styles */
body {
                    font-family: 'Vazirmatn', sans-serif;
                    font-size: 1rem;
}

.message-container {
                    scrollbar-width: thin;
                    scrollbar-color: #5A5EEF #f1f5f9;
}

.message-container::-webkit-scrollbar {
                    width: 6px;
}

.message-container::-webkit-scrollbar-track {
                    background: #f1f5f9;
}

.message-container::-webkit-scrollbar-thumb {
                    background-color: #5A5EEF;
                    border-radius: 3px;
}

/* Typing indicator animation */
.typing-indicator::after {
                    content: "...";
                    animation: typing 1.5s infinite;
}

@keyframes typing {
                    0% {
                                        content: ".";
                    }

                    33% {
                                        content: "..";
                    }

                    66% {
                                        content: "...";
                    }
}

/* Chat panel subtle background */
.chat-panel {
                    position: relative;
                    overflow: hidden;
}

.chat-panel::before {
                    content: "";
                    position: absolute;
                    inset: -20%;
                    pointer-events: none;
                    z-index: 0;
                    background: linear-gradient(120deg, rgba(90, 94, 239, 0.03) 0%, rgba(90, 94, 239, 0.02) 45%, rgba(90, 94, 239, 0.01) 100%);
                    background-size: 200% 200%;
                    filter: blur(28px);
                    transform: translateZ(0);
                    animation: gradientShift 8s ease infinite;
                    opacity: 0.95;
}

@keyframes gradientShift {
                    0% {
                                        background-position: 0% 50%;
                    }

                    50% {
                                        background-position: 100% 50%;
                    }

                    100% {
                                        background-position: 0% 50%;
                    }
}

.chat-panel>* {
                    position: relative;
                    z-index: 1;
}

/* Message bubbles styling */
.message-bubble {
                    max-width: 75%;
                    padding: 12px 16px;
                    border-radius: 16px;
                    margin-bottom: 1.5rem;
                    display: inline-block;
                    word-wrap: break-word;
}

.message-bubble.user-message {
                    background-color: #E9ECEF;
                    color: #212529;
                    border-top-right-radius: 4px;
}

.message-bubble.ai-message {
                    background-color: #5A5EEF;
                    color: #FFFFFF;
                    border-top-left-radius: 4px;
}

/* Avatar styling */
.avatar {
                    width: 32px;
                    height: 32px;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-shrink: 0;
}

.avatar.user-avatar {
                    background-color: #E9ECEF;
                    color: #212529;
}

.avatar.ai-avatar {
                    background-color: #5A5EEF;
                    color: #FFFFFF;
}

/* Auto-resize textarea */
#message-input {
                    line-height: 1.5;
                    min-height: 48px;
                    overflow-y: hidden;
}

/* Message wrapper for avatar alignment */
.message-wrapper {
                    display: flex;
                    align-items: flex-start;
                    gap: 12px;
                    margin-bottom: 1.5rem;
}

.message-wrapper.user-wrapper {
                    flex-direction: row;
}

.message-wrapper.ai-wrapper {
                    flex-direction: row-reverse;
}

/* Usage info icon button */
.usage-info-btn {
                    display: inline-flex;
                    align-items: center;
                    gap: 4px;
                    margin-top: 8px;
                    padding: 4px 8px;
                    background-color: rgba(90, 94, 239, 0.1);
                    border: 1px solid rgba(90, 94, 239, 0.2);
                    border-radius: 6px;
                    cursor: pointer;
                    transition: all 0.2s;
                    font-size: 0.75rem;
                    color: #5A5EEF;
}

.usage-info-btn:hover {
                    background-color: rgba(90, 94, 239, 0.2);
                    border-color: rgba(90, 94, 239, 0.4);
}

.usage-info-btn svg {
                    width: 14px;
                    height: 14px;
}

/* Modal styles */
.modal-overlay {
                    position: fixed;
                    inset: 0;
                    background-color: rgba(0, 0, 0, 0.5);
                    backdrop-filter: blur(4px);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    z-index: 1000;
                    padding: 20px;
}

.modal-overlay.hidden {
                    display: none;
}

.modal-content {
                    background-color: white;
                    border-radius: 16px;
                    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
                    max-width: 500px;
                    width: 100%;
                    max-height: 80vh;
                    overflow: hidden;
                    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
                    from {
                                        opacity: 0;
                                        transform: translateY(-20px) scale(0.95);
                    }
                    to {
                                        opacity: 1;
                                        transform: translateY(0) scale(1);
                    }
}

.modal-header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 20px 24px;
                    border-bottom: 1px solid #E5E7EB;
}

.modal-title {
                    font-size: 1.25rem;
                    font-weight: 600;
                    color: #1F2937;
}

.modal-close {
                    background: none;
                    border: none;
                    cursor: pointer;
                    padding: 4px;
                    color: #6B7280;
                    transition: all 0.2s;
                    border-radius: 6px;
}

.modal-close:hover {
                    background-color: #F3F4F6;
                    color: #1F2937;
}

.modal-body {
                    padding: 24px;
                    overflow-y: auto;
                    max-height: calc(80vh - 80px);
}

.usage-detail-row {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 12px 16px;
                    background-color: #F9FAFB;
                    border-radius: 8px;
                    margin-bottom: 8px;
}

.usage-detail-row:last-child {
                    margin-bottom: 0;
}

.usage-detail-label {
                    font-size: 0.875rem;
                    color: #6B7280;
                    display: flex;
                    align-items: center;
                    gap: 6px;
}

.usage-detail-value {
                    font-size: 0.9375rem;
                    font-weight: 600;
                    color: #1F2937;
}

.usage-section-title {
                    font-size: 0.875rem;
                    font-weight: 600;
                    color: #4B5563;
                    margin-top: 16px;
                    margin-bottom: 8px;
                    padding-bottom: 4px;
                    border-bottom: 1px solid #E5E7EB;
}

.usage-section-title:first-child {
                    margin-top: 0;
}

.usage-highlight {
                    background-color: #EEF2FF;
                    border: 1px solid #C7D2FE;
}

.usage-highlight .usage-detail-value {
                    color: #5A5EEF;
                    font-size: 1.125rem;
}

/* Cost info styling */
.cost-info {
                    font-size: 0.7rem;
                    color: #6B7280;
                    margin-top: 6px;
                    opacity: 0.8;
                    display: flex;
                    gap: 8px;
                    flex-wrap: wrap;
}

.cost-info span {
                    background-color: rgba(255, 255, 255, 0.1);
                    padding: 2px 6px;
                    border-radius: 4px;
}

/* Remove old cost-info as we'll use the button instead */

/* Conversations list styling */
#conversations-list {
                    scrollbar-width: thin;
                    scrollbar-color: #5A5EEF #f1f5f9;
}

#conversations-list::-webkit-scrollbar {
                    width: 4px;
}

#conversations-list::-webkit-scrollbar-track {
                    background: #f1f5f9;
}

#conversations-list::-webkit-scrollbar-thumb {
                    background-color: #5A5EEF;
                    border-radius: 2px;
}

.conversation-item {
                    padding: 10px 12px;
                    background-color: white;
                    border-radius: 8px;
                    cursor: pointer;
                    transition: all 0.2s;
                    border: 1px solid transparent;
}

.conversation-item:hover {
                    background-color: #f3f4f6;
                    border-color: #e5e7eb;
}

.conversation-item.active {
                    background-color: #EEF2FF;
                    border-color: #5A5EEF;
}

.conversation-title {
                    font-size: 0.875rem;
                    font-weight: 500;
                    color: #1f2937;
                    margin-bottom: 4px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
}

.conversation-meta {
                    font-size: 0.75rem;
                    color: #6b7280;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
}