/* Cost Limit Notification Styles */
.cost-limit-notification {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    margin: 8px 0;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    gap: 12px;
    position: relative;
    animation: slideIn 0.3s ease-out;
    /* bottom: -60px; */
}

.chat-area .cost-limit-notification,
#userChat .cost-limit-notification {
    bottom: -45px;
    margin: 0 20px;
    z-index: 1000;
}

.widget-container #userChat .cost-limit-notification {
    bottom: 0;
    z-index: 1000;
}

.cost-limit-notification i {
    font-size: 16px;
    flex-shrink: 0;
}

.cost-limit-notification span {
    flex: 1;
    line-height: 1.4;
}

.cost-warning-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 3px;
    opacity: 0.7;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
}

.cost-warning-close:hover {
    opacity: 1;
}

/* Warning state (80%+) */
.cost-limit-warning {
    background-color: #fff3cd;
    border: 1px solid #ffeaa7;
    color: #856404;
}

.cost-limit-warning i {
    color: #f39c12;
}

.cost-warning-close {
    color: #856404;
}

.cost-warning-close:hover {
    background-color: rgba(133, 100, 4, 0.1);
}

/* Exceeded state (100%+) */
.cost-limit-exceeded {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.cost-limit-exceeded i {
    color: #e74c3c;
}

.cost-limit-exceeded .cost-warning-close {
    color: #721c24;
}

.cost-limit-exceeded .cost-warning-close:hover {
    background-color: rgba(114, 28, 36, 0.1);
}

/* Disabled input states */
.cost-limit-disabled {
    opacity: 0.6;
    cursor: not-allowed !important;
}

input.cost-limit-disabled,
textarea.cost-limit-disabled {
    background-color: #f8f9fa !important;
    border-color: #e9ecef !important;
    color: #6c757d !important;
}

button.cost-limit-disabled {
    background-color: #e9ecef !important;
    border-color: #e9ecef !important;
    color: #6c757d !important;
}

/* Animation */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Widget-specific styles */
#chat-widget-overlay .cost-limit-notification {
    margin: 8px 12px;
    font-size: 12px;
    padding: 8px 12px;
}

#chat-widget-overlay .cost-limit-notification i {
    font-size: 14px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .cost-limit-notification {
        font-size: 13px;
        padding: 10px 14px;
        gap: 10px;
    }
    
    .cost-limit-notification i {
        font-size: 14px;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .cost-limit-warning {
        background-color: rgba(255, 243, 205, 0.1);
        border-color: rgba(255, 234, 167, 0.3);
        color: #ffd700;
    }
    
    .cost-limit-exceeded {
        background-color: rgba(248, 215, 218, 0.1);
        border-color: rgba(245, 198, 203, 0.3);
        color: #ff6b6b;
    }
    
    input.cost-limit-disabled,
    textarea.cost-limit-disabled {
        background-color: #2c3e50 !important;
        border-color: #34495e !important;
        color: #95a5a6 !important;
    }
    
    button.cost-limit-disabled {
        background-color: #34495e !important;
        border-color: #34495e !important;
        color: #95a5a6 !important;
    }
}