/* Sidebar Diff styles – keep simple, namespaced */
.gsdrv-diff-container { 
    padding: 8px 12px; 
    line-height: 1.35; 
}

/* Light mode styles */
.gsdrv-muted { 
    color: var(--wp--preset--color--foreground, #666); 
    font-style: italic; 
}

.gsdrv-block { 
    border-bottom: 1px solid #eee; 
    padding: 8px 0; 
}

.gsdrv-block:last-child { 
    border-bottom: none; 
}

.gsdrv-block-header { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    margin-bottom: 4px; 
}

.gsdrv-block-name { 
    background: #f6f7f7; 
    padding: 2px 6px; 
    border-radius: 4px; 
    font-size: 12px;
    font-family: monospace;
}

.gsdrv-chip { 
    font-size: 11px; 
    border: 1px solid #dcdcde; 
    padding: 1px 6px; 
    border-radius: 999px; 
    color: #646970; 
}

.gsdrv-chip--changed { 
    background: #fff3cd; 
    border-color: #ffe69c; 
    color: #7a5f00; 
}

.gsdrv-counts { 
    margin-left: auto; 
    font-size: 11px; 
    color: #555; 
}

.gsdrv-block-body { 
    padding-left: 4px; 
}

.gsdrv-para { 
    margin: 2px 0 6px; 
    padding: 4px 6px; 
    background: #fff; 
    border: 1px dashed #eee; 
    border-radius: 4px; 
    position: relative;
}

.gsdrv-para-diff { 
    word-break: break-word; 
    white-space: pre-wrap; 
    font-family: monospace;
    font-size: 13px;
    line-height: 1.4;
}

/* Improved diff highlighting with color-coded line numbers */
.gsdrv-ins { 
    background: #e6ffec; 
    color: #2e8b57;
    text-decoration: none; 
    position: relative;
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: 500;
}

.gsdrv-ins::before {
    content: "+";
    position: absolute;
    left: -12px;
    color: #228b22;
    font-weight: bold;
    font-size: 12px;
}

.gsdrv-del { 
    background: #ffe6e6; 
    color: #dc3545;
    text-decoration: line-through; 
    position: relative;
    padding: 2px 4px;
    border-radius: 3px;
}

.gsdrv-del::before {
    content: "-";
    position: absolute;
    left: -12px;
    color: #c32424;
    font-weight: bold;
    font-size: 12px;
}

/* Ensure content readability with proper contrast */
.gsdrv-ins, .gsdrv-del {
    /* Make sure text remains readable */
    mix-blend-mode: multiply;
}

@media (prefers-color-scheme: dark) {
    .gsdrv-ins, .gsdrv-del {
        mix-blend-mode: screen;
    }
}

body.is-dark-theme .gsdrv-ins, body.is-dark-theme .gsdrv-del {
    mix-blend-mode: screen;
}

/* Enhanced dark mode support for WordPress 6.8+ */
@media (prefers-color-scheme: dark) {
    .gsdrv-muted { 
        color: var(--wp--preset--color--foreground, #aaa); 
    }
    
    .gsdrv-block { 
        border-bottom: 1px solid #333; 
    }
    
    .gsdrv-block-name { 
        background: #222; 
        color: #eee;
    }
    
    .gsdrv-chip { 
        border: 1px solid #444; 
        color: #aaa; 
    }
    
    .gsdrv-chip--changed { 
        background: #333; 
        border-color: #555; 
        color: #ffd700; 
    }
    
    .gsdrv-counts { 
        color: #aaa; 
    }
    
    .gsdrv-para { 
        background: #111; 
        border: 1px dashed #333; 
    }
    
    .gsdrv-ins { 
        background: #1a3a1a;
        color: #4ade80;
    }
    
    .gsdrv-ins::before {
        color: #4ade80;
    }
    
    .gsdrv-del { 
        background: #3a1a1a;
        color: #f87171;
    }
    
    .gsdrv-del::before {
        color: #f87171;
    }
    
    /* Ensure proper contrast for readability */
    .gsdrv-para-diff {
        color: #e0e0e0;
    }
}

/* WordPress 6.8+ dark mode support */
body.is-dark-theme .gsdrv-muted { 
    color: var(--wp--preset--color--foreground, #aaa); 
}

body.is-dark-theme .gsdrv-block { 
    border-bottom: 1px solid #333; 
}

body.is-dark-theme .gsdrv-block-name { 
    background: #222; 
    color: #eee;
}

body.is-dark-theme .gsdrv-chip { 
    border: 1px solid #444; 
    color: #aaa; 
}

body.is-dark-theme .gsdrv-chip--changed { 
    background: #333; 
    border-color: #555; 
    color: #ffd700; 
}

body.is-dark-theme .gsdrv-counts { 
    color: #aaa; 
}

body.is-dark-theme .gsdrv-para { 
    background: #111; 
    border: 1px dashed #333; 
}

body.is-dark-theme .gsdrv-ins { 
    background: #1a3a1a;
    color: #4ade80;
}

body.is-dark-theme .gsdrv-ins::before {
    color: #4ade80;
}

body.is-dark-theme .gsdrv-del { 
    background: #3a1a1a;
    color: #f87171;
}

body.is-dark-theme .gsdrv-del::before {
    color: #f87171;
}

body.is-dark-theme .gsdrv-para-diff {
    color: #e0e0e0;
}

/* Additional dark mode enhancements for WordPress 6.8+ */
body.is-dark-theme .gsdrv-block-header {
    color: #f0f0f0;
}

body.is-dark-theme .gsdrv-keyboard-hint {
    color: #bbb;
    border-top: 1px solid #444;
}

/* Enhanced responsive design for different screen sizes and mobile editing */
@media (max-width: 782px) {
    .gsdrv-diff-container { 
        padding: 6px 8px; 
    }
    
    .gsdrv-block-header { 
        flex-wrap: wrap; 
        gap: 4px; 
    }
    
    .gsdrv-block-name { 
        font-size: 11px; 
        padding: 1px 4px; 
    }
    
    .gsdrv-chip { 
        font-size: 10px; 
        padding: 0 4px; 
    }
    
    .gsdrv-counts { 
        font-size: 10px; 
    }
    
    .gsdrv-para { 
        margin: 1px 0 4px; 
        padding: 2px 4px; 
    }
    
    .gsdrv-para-diff {
        font-size: 12px;
    }
    
    .gsdrv-ins::before,
    .gsdrv-del::before {
        left: -10px;
        font-size: 11px;
    }
    
    /* Improve touch targets for mobile */
    .gsdrv-chip {
        min-height: 20px;
        display: flex;
        align-items: center;
    }
    
    .gsdrv-load-more button {
        min-height: 32px;
        width: 100%;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .gsdrv-diff-container {
        padding: 4px 6px;
    }
    
    .gsdrv-block-header {
        gap: 2px;
    }
    
    .gsdrv-block-name {
        font-size: 10px;
        padding: 1px 3px;
    }
    
    .gsdrv-chip {
        font-size: 9px;
        padding: 0 3px;
    }
    
    .gsdrv-counts {
        font-size: 9px;
    }
    
    .gsdrv-para {
        margin: 1px 0 3px;
        padding: 1px 3px;
    }
    
    .gsdrv-para-diff {
        font-size: 11px;
    }
    
    .gsdrv-ins::before,
    .gsdrv-del::before {
        left: -8px;
        font-size: 10px;
    }
}

/* Keyboard shortcut hint */
.gsdrv-keyboard-hint {
    font-size: 11px;
    color: #666;
    margin-top: 8px;
    text-align: center;
    padding: 8px;
    border-top: 1px solid #eee;
    font-style: italic;
}

@media (prefers-color-scheme: dark) {
    .gsdrv-keyboard-hint {
        color: #999;
        border-top: 1px solid #333;
    }
}

body.is-dark-theme .gsdrv-keyboard-hint {
    color: #999;
    border-top: 1px solid #333;
}

/* Revision restore container */
.gsdrv-revision-restore {
    margin-top: 10px;
    padding: 10px;
    background-color: #f0f0f1;
    border-radius: 4px;
}

.gsdrv-revision-restore p {
    font-size: 12px;
    margin: 0 0 8px 0;
}

/* Help text */
.gsdrv-help-text {
    font-size: 11px;
    color: #666;
    margin-top: 10px;
    font-style: italic;
    border-top: 1px solid #eee;
    padding-top: 10px;
}

@media (prefers-color-scheme: dark) {
    .gsdrv-help-text {
        color: #999;
        border-top: 1px solid #333;
    }
}

body.is-dark-theme .gsdrv-help-text {
    color: #999;
    border-top: 1px solid #333;
}

/* Load more button */
.gsdrv-load-more button {
    background: #f6f7f7;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    cursor: pointer;
}

.gsdrv-load-more button:hover {
    background: #e0e0e0;
}

@media (prefers-color-scheme: dark) {
    .gsdrv-load-more button {
        background: #222;
        border: 1px solid #444;
        color: #eee;
    }
    
    .gsdrv-load-more button:hover {
        background: #333;
    }
}

body.is-dark-theme .gsdrv-load-more button {
    background: #222;
    border: 1px solid #444;
    color: #eee;
}

body.is-dark-theme .gsdrv-load-more button:hover {
    background: #333;
}