frontend/src/Components/AiComponents/ChatComponents/SourcePopup.css

.source-popup {
    position: absolute; /* Crucial for positioning */
    /* transform is set inline based on calculation */
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
    opacity: 1; /* Start visible, manage via state */
    pointer-events: auto; /* Allow interaction */
    width: 300px; /* Or max-width */
    max-width: 90vw;
  }
  
.source-popup-card {
    background-color: #333 !important; /* Dark background */
    color: #eee !important; /* Light text */
    border: 1px solid #555 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    padding: 0.5rem !important; /* Reduced padding */
  }
  
.source-popup-card .MuiCardContent-root {
     padding: 8px !important; /* Further reduce padding inside content */
     padding-bottom: 8px !important; /* Ensure bottom padding is also reduced */
  }
  
  
.source-popup-title {
    font-size: 0.9rem !important; /* Slightly smaller title */
    font-weight: 600 !important;
    margin-bottom: 0.3rem !important;
    line-height: 1.3 !important;
    color: #eee !important; /* Ensure title color */
  }
  
.source-popup-title a {
     color: inherit !important; /* Inherit color for link */
     text-decoration: none !important;
  }
.source-popup-title a:hover {
     text-decoration: underline !important;
  }
  
  
.source-popup-link-info {
    display: flex !important;
    align-items: center !important;
    font-size: 0.75rem !important; /* Smaller domain text */
    color: #bbb !important;
    margin-bottom: 0.4rem !important; /* Space below link info */
  }
  
.source-popup-icon {
    width: 14px !important; /* Smaller icon */
    height: 14px !important;
    margin-right: 0.3rem !important;
    vertical-align: middle; /* Align icon better */
    filter: brightness(1.1); /* Slightly brighter icon */
  }
  
.source-popup-domain {
    vertical-align: middle !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
.source-popup-description {
    font-size: 0.8rem !important; /* Smaller description text */
    color: #ccc !important;
    line-height: 1.4 !important;
    /* Limit the number of lines shown */
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Show max 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0.4rem !important; /* Space above description */
  }