/* MathFaze - AI Assistant Styling */

/* Message container styling */
#conversationContainer {
    background-color: #1a1a2e;
    border: 1px solid #2d2d44;
    border-radius: 8px;
    padding: 15px;
    max-height: 400px;
    overflow-y: auto;
    margin-bottom: 20px;
}

/* Message styling */
.message {
    display: flex;
    margin-bottom: 15px;
    position: relative;
}

.message-avatar {
    flex: 0 0 40px;
    height: 40px;
    background-color: #2d2d44;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
}

.message-content {
    flex: 1;
    padding: 12px;
    border-radius: 8px;
    position: relative;
}

/* User message styling */
.user-message .message-avatar {
    background-color: #1e3a8a;
}

.user-message .message-content {
    background-color: #172554;
    color: #ffffff;
}

/* Assistant message styling */
.assistant-message .message-avatar {
    background-color: #0f766e;
}

.assistant-message .message-content {
    background-color: #134e4a;
    color: #ffffff;
}

/* System message styling */
.system-message .message-avatar {
    background-color: #9a3412;
}

.system-message .message-content {
    background-color: #7c2d12;
    color: #ffffff;
}

/* Usage limit indicators */
.usage-limit-container .progress {
    height: 8px;
    background-color: #2d2d44;
    border-radius: 4px;
    overflow: hidden;
}

.usage-limit-container .progress-bar {
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Limit reached styling */
.limit-reached-container {
    background-color: rgba(220, 38, 38, 0.1);
    border: 1px solid rgba(220, 38, 38, 0.5);
    border-radius: 8px;
    padding: 15px;
    margin-top: 15px;
    text-align: center;
}

.limit-reached-icon {
    font-size: 2rem;
    color: #dc2626;
    margin-bottom: 10px;
}

/* Disabled input styling when limit reached */
#aiAssistantQuery:disabled {
    background-color: rgba(45, 45, 68, 0.5);
    color: #6b7280;
    cursor: not-allowed;
}

#askAiBtn:disabled {
    background-color: #6b7280;
    border-color: #6b7280;
    cursor: not-allowed;
}

/* Loading animation */
#aiLoading {
    text-align: center;
    padding: 20px;
}

#aiLoading .spinner-border {
    width: 3rem;
    height: 3rem;
}