/* --- Main Container --- */
.custom-code-block {
    font-family: monospace;
    margin: 1.5em 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    /* ADDED: Use Flexbox for robust alignment */
    display: flex;
    flex-direction: row;
    overflow: hidden; /* Contains the rounded corners */
}

/* --- Line Numbers Gutter --- */
.line-numbers-rows {
    /* No longer needs absolute positioning */
    flex-shrink: 0; /* Prevents the gutter from shrinking */
    padding: 2em 0.75em;
    border-right: 1px solid #ddd;
    text-align: right;
    color: #999;
    user-select: none;
    line-height: 1.6;
    font-size: 14px;
}

/* --- Individual Line Number --- */
/* This is the critical fix for the "123" issue */
.line-numbers-rows > span {
    display: block; /* Ensures each number is on its own line */
}

/* --- Code Element --- */
.custom-code-block code {
    flex-grow: 1; /* Allows the code area to take all remaining space */
    padding: 2em 1em;
    margin: 0;
    overflow-x: auto; /* Allows horizontal scrolling for long lines */
    white-space: pre;
    line-height: 1.6;
    font-size: 14px;
    min-width: 0; /* A flexbox fix for overflowing content */
}

/* --- Copy Button --- */
/* The layout is now relative to the flex container, so we need a wrapper */
.custom-code-block-wrapper {
    position: relative;
}
.copy-button {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
    z-index: 1;
    transition: background-color 0.2s;
}

/* --- THEMES --- */
/* Light Theme */
.custom-code-block.theme-light {
    background-color: #f9f9f9;
    color: #333;
    border-color: #ddd;
}
.custom-code-block.theme-light .copy-button {
    background-color: #e0e0e0;
    border-color: #ccc;
    color: #333;
}
.custom-code-block.theme-light .copy-button:hover {
     background-color: #d0d0d0;
}
.custom-code-block.theme-light .copy-button.copied {
    background-color: #4CAF50;
    color: white;
    border-color: #4CAF50;
}


/* Dark Theme */
.custom-code-block.theme-dark {
    background-color: #2d2d2d;
    color: #f1f1f1;
    border-color: #555;
}
.custom-code-block.theme-dark .line-numbers-rows {
    border-right-color: #555;
    color: #888;
}
.custom-code-block.theme-dark .copy-button {
    background-color: #555;
    border-color: #777;
    color: #f1f1f1;
}
.custom-code-block.theme-dark .copy-button:hover {
    background-color: #666;
}
.custom-code-block.theme-dark .copy-button.copied {
    background-color: #5d9e60;
    border-color: #5d9e60;
}