.detail-view {
    padding: var(--spacing-md);
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;

    /* Markdown Content Styling */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: var(--foreground);
        margin-top: 1.5em;
        margin-bottom: 0.5em;
    }

    a {
        color: var(--focus-outline);
        text-decoration: none;
    }

    a:hover {
        text-decoration: underline;
    }

    pre {
        background-color: var(--code-background);
        padding: var(--spacing-sm);
        border-radius: 4px;
        border: 1px solid var(--border-color);
        overflow-x: auto;
        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    }

    code {
        background-color: var(--code-background);
        padding: 2px 4px;
        border-radius: 3px;
        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
        font-size: 0.9em;
    }

    /* Remove code background when inside pre to avoid double padding/color */
    pre code {
        background-color: transparent;
        padding: 0;
        border: none;
    }
}

.detail-empty {
    padding: var(--spacing-lg);
    color: var(--foreground-muted);
    text-align: center;
    font-style: italic;
}

.detail-loading {
    padding: var(--spacing-lg);
    color: var(--foreground-muted);
}