/* Custom styles for 1024x512 images to show full content without cropping */

/* Article list view - fix for article cards */
.article-image {
    height: auto !important; /* Remove fixed height */
    min-height: 180px; /* Minimum height for consistency */
    max-height: 250px; /* Maximum height to prevent too tall images */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5; /* Light background for transparency */
    max-width: 100%; /* Ensure container doesn't exceed page width */
}

.article-image img {
    object-fit: contain !important; /* Show entire image without cropping */
    width: auto !important; /* Let image determine width based on height constraint */
    height: auto !important;
    max-height: 250px; /* Match container max-height */
    max-width: 100%; /* Ensure image doesn't exceed container width */
}

/* Article detail view - fix for full article display */
.detail-image {
    margin: 30px 0;
    border-radius: 8px;
    overflow: hidden;
    background-color: #f5f5f5; /* Light background for transparency */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px; /* Minimum height */
    max-height: 512px; /* Maximum height for 1024x512 images */
    max-width: 100%; /* Ensure container doesn't exceed page width */
}

.detail-image img {
    object-fit: contain !important; /* Show entire image without cropping */
    width: auto !important; /* Let image determine width based on height constraint */
    height: auto !important;
    max-height: 512px; /* Match container max-height */
    max-width: 100%; /* Ensure image doesn't exceed container width */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .article-image {
        max-height: 200px;
        min-height: 150px;
    }

    .article-image img {
        max-height: 200px;
    }

    .detail-image {
        max-height: 400px;
    }

    .detail-image img {
        max-height: 400px;
    }
}

@media (max-width: 480px) {
    .article-image {
        max-height: 180px;
        min-height: 120px;
    }

    .article-image img {
        max-height: 180px;
    }

    .detail-image {
        max-height: 300px;
    }

    .detail-image img {
        max-height: 300px;
    }
}

/* Ensure copy button for code blocks is visible and functional */
.code-block-wrapper {
    position: relative !important;
}

.copy-button {
    position: absolute !important;
    right: 8px !important;
    top: 8px !important;
    z-index: 10 !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 6px 12px !important;
    background: #2d3748e6 !important;
    border: none !important;
    border-radius: 4px !important;
    color: white !important;
    cursor: pointer !important;
    font-size: 12px !important;
    transition: background 0.2s !important;
}

.copy-button:hover {
    background: #4a5568 !important;
}

.copy-button.copied {
    background: #38a169 !important;
}

/* Ensure code blocks have relative positioning for absolute button positioning */
.markdown-content pre,
pre[class*="language-"],
pre {
    position: relative !important;
}

/* Make sure copy buttons are visible on all code blocks - ULTRA SPECIFIC */
.markdown-content pre .copy-button,
pre[class*="language-"] .copy-button,
pre .copy-button,
.copy-button,
button.copy-button,
[class*="copy-button"],
[class*="copy"][class*="button"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    position: absolute !important;
    right: 8px !important;
    top: 8px !important;
    z-index: 10 !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 6px 12px !important;
    background: #2d3748e6 !important;
    border: none !important;
    border-radius: 4px !important;
    color: white !important;
    font-size: 12px !important;
    transition: background 0.2s !important;
}

.markdown-content pre .copy-button:hover,
pre[class*="language-"] .copy-button:hover,
pre .copy-button:hover,
.copy-button:hover,
button.copy-button:hover,
[class*="copy-button"]:hover,
[class*="copy"][class*="button"]:hover {
    background: #4a5568 !important;
}

.markdown-content pre .copy-button.copied,
pre[class*="language-"] .copy-button.copied,
pre .copy-button.copied,
.copy-button.copied,
button.copy-button.copied,
[class*="copy-button"].copied,
[class*="copy"][class*="button"].copied {
    background: #38a169 !important;
}

/* Ensure copy icons are visible */
.copy-icon,
.markdown-content pre .copy-icon,
pre[class*="language-"] .copy-icon,
pre .copy-icon {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    height: 14px !important;
    width: 14px !important;
}

/* .copy-icon styles are now in the combined rule above */

.markdown-content pre {
    position: relative !important;
}

/* Ensure clean copy buttons are visible and work properly */
.clean-copy-button {
    position: absolute !important;
    right: 8px !important;
    top: 8px !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 6px 12px !important;
    background: rgba(45, 55, 72, 0.9) !important;
    border: none !important;
    border-radius: 4px !important;
    color: white !important;
    cursor: pointer !important;
    font-size: 12px !important;
    transition: background 0.2s, opacity 0.2s !important;
    opacity: 0.8 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.clean-copy-button:hover {
    opacity: 1 !important;
    background: rgba(74, 85, 104, 0.9) !important;
}

.clean-copy-button.copied {
    background: rgba(56, 161, 105, 0.9) !important;
    opacity: 1 !important;
}

.clean-copy-button .copy-icon {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
}

.clean-copy-button .copy-text {
    font-family: system-ui, -apple-system, sans-serif !important;
    font-weight: 500 !important;
}

/* Make markdown images responsive */
.markdown-content img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 20px auto !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    max-height: 600px !important; /* Limit maximum height */
    object-fit: contain !important; /* Show entire image without cropping */
}

/* Responsive adjustments for markdown images */
@media (max-width: 768px) {
    .markdown-content img {
        max-height: 400px !important;
        margin: 15px auto !important;
    }
}

@media (max-width: 480px) {
    .markdown-content img {
        max-height: 300px !important;
        margin: 10px auto !important;
    }
}