#ardisplay-ai-panel {
  /*border: 1px solid #ccd0d4;
  padding: 12px;
  background: #fff;*/
}
#ardisplay-ai-status {
  min-height: 20px;
}

/* Credit Status Section Styles */
.credit-status-section {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 6px;
    margin-bottom: 16px;
    width: 50%;
}

.credit-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.credit-stat-item {
    text-align: center;
}

.credit-stat-value {
    font-size: 24px;
    font-weight: bold;
    margin-top: 4px;
    display: block;
}

.credit-stat-value.positive {
    color: #28a745;
}

.credit-stat-value.negative {
    color: #dc3545;
}

.credit-stat-value.neutral {
    color: #6c757d;
}

.credit-warning {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 16px;
    color: #856404;
}

.credit-actions {
    text-align: center;
}

.credit-actions .button {
    margin: 0 4px;
}

.credit-notice {
    margin-top: 8px;
    font-size: 12px;
    color: #6c757d;
    text-align: left;
}

/* Disabled button styles */
.button:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

/* Spin animation for refresh button */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .credit-status-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .credit-stat-value {
        font-size: 20px;
    }
    
    .credit-actions .button {
        display: block;
        margin: 8px auto;
        width: 100%;
        max-width: 200px;
    }
}

/* Hide AI illustration on smaller screens */
@media (max-width: 1499px) {
    /* Hide only the specific AI building illustration image */
    #ardisplay-ai-loading img[src*="ar_ai_building.jpg"] {
        display: none !important;
    }
    
    /* Hide the specific image when used as background or idle image */
    #ardisplay-ai-panel[data-idle-img*="ar_ai_building.jpg"] {
        background-image: none !important;
    }
    
    /* Hide any pseudo-elements that might display the image */
    #ardisplay-ai-panel[data-idle-img*="ar_ai_building.jpg"]::before,
    #ardisplay-ai-panel[data-idle-img*="ar_ai_building.jpg"]::after {
        display: none !important;
    }
    
    /* Ensure the main content area can expand */
    #ardisplay-ai-panel {
        padding-right: 0 !important;
    }
}

#ardisplay-ai-generate {
    padding: 8px 20px;
    font-size: 15px;
}