/* ============================================================================
   PARAMETER DIFF VIEWER - EDITABLE MODE STYLES
   Extends the base parameter diff viewer with interactive chunk editing.
   
   Dependencies: 
   - variables.css (CSS custom properties, including @keyframes rb-spin)
   - fullscreen.css (base .rb-param-diff-* classes)
   
   Load order: After fullscreen.css
   ============================================================================ */

/* ----------------------------------------------------------------------------
   DIFF CHUNKS - BASE
   Individual chunks in a line-based diff display
   ---------------------------------------------------------------------------- */

.rb-param-diff-chunk {
    position: relative;
    padding: 0.25rem 0.5rem;
    padding-right: 5rem;
    /* Space for 3 action buttons (1.5rem × 3) + gaps */
    border-radius: 4px;
    font-family: var(--rb-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
    font-size: 0.8rem;
    line-height: 1.5;
    word-break: break-word;
    overflow-wrap: break-word;
    transition: background var(--rb-transition-fast, 150ms) ease,
        border-color var(--rb-transition-fast, 150ms) ease;
}

/* Make chunks focusable for keyboard navigation */
.rb-param-diff-chunk[tabindex] {
    cursor: pointer;
}

/* ----------------------------------------------------------------------------
   DIFF CHUNKS - TYPE MODIFIERS
   Styling for added, removed, and unchanged chunks
   ---------------------------------------------------------------------------- */

.rb-param-diff-chunk--unchanged {
    color: var(--rb-diff-unchanged-text, #94a3b8);
    background: transparent;
}

.rb-param-diff-chunk--added {
    background: var(--rb-diff-added-bg, rgba(6, 78, 59, 0.4));
    color: var(--rb-diff-added-text, #86efac);
    border-left: 3px solid var(--rb-diff-added-border, #10b981);
}

.rb-param-diff-chunk--removed {
    background: var(--rb-diff-removed-bg, rgba(127, 29, 29, 0.4));
    color: var(--rb-diff-removed-text, #fca5a5);
    border-left: 3px solid var(--rb-diff-removed-border, #ef4444);
}

/* Hover states - separate rules for clarity */
.rb-param-diff-chunk--added:hover {
    background: rgba(6, 78, 59, 0.55);
}

.rb-param-diff-chunk--removed:hover {
    background: rgba(127, 29, 29, 0.55);
}

/* ----------------------------------------------------------------------------
   DIFF CHUNKS - STATUS MODIFIERS
   Visual state after accept/reject actions
   ---------------------------------------------------------------------------- */

/* Shared ::after styles for status indicators */
.rb-param-diff-chunk--accepted::after,
.rb-param-diff-chunk--rejected::after {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    font-weight: 600;
}

.rb-param-diff-chunk--accepted {
    opacity: 0.7;
    background: rgba(16, 185, 129, 0.15);
    border-left-color: var(--rb-color-success, #10b981);
}

.rb-param-diff-chunk--accepted::after {
    content: '✓';
    color: var(--rb-color-success, #10b981);
}

.rb-param-diff-chunk--rejected {
    opacity: 0.5;
    text-decoration: line-through;
    background: rgba(100, 116, 139, 0.1);
    border-left-color: var(--rb-text-muted, #64748b);
}

.rb-param-diff-chunk--rejected::after {
    content: '✗';
    color: var(--rb-text-muted, #64748b);
}

.rb-param-diff-chunk--editing {
    padding-right: 0.5rem;
    /* Remove action button space when editing */
    background: rgba(59, 130, 246, 0.1);
    border-left-color: var(--rb-color-info, #3b82f6);
}

/* Hide ::after indicator when editing to prevent overlap */
.rb-param-diff-chunk--editing::after {
    display: none;
}

/* ----------------------------------------------------------------------------
   CHUNK ACTION BUTTONS
   Accept/reject/edit buttons revealed on hover
   ---------------------------------------------------------------------------- */

.rb-param-diff-chunk-actions {
    position: absolute;
    right: 0.375rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    z-index: 1;
    transition: opacity var(--rb-transition-fast, 150ms) ease;
}

/* Reveal actions on chunk hover or focus - also lift z-index */
.rb-param-diff-chunk:hover,
.rb-param-diff-chunk:focus-within {
    position: relative;
    z-index: 1;
}

.rb-param-diff-chunk:hover .rb-param-diff-chunk-actions,
.rb-param-diff-chunk:focus-within .rb-param-diff-chunk-actions {
    opacity: 1;
}

/* Hide actions for accepted/rejected/editing chunks */
.rb-param-diff-chunk--accepted .rb-param-diff-chunk-actions,
.rb-param-diff-chunk--rejected .rb-param-diff-chunk-actions,
.rb-param-diff-chunk--editing .rb-param-diff-chunk-actions {
    display: none;
}

/* Base button style - increased touch target */
.rb-param-diff-chunk-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    /* Increased from 1.5rem for better touch target */
    height: 1.75rem;
    padding: 0;
    border: none;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    will-change: transform;
    transition: all var(--rb-transition-fast, 150ms) ease;
}

/* Shared hover transform */
.rb-param-diff-chunk-btn:hover {
    transform: scale(1.1);
}

/* Accept button - green */
.rb-param-diff-chunk-btn--accept {
    background: rgba(16, 185, 129, 0.2);
    color: var(--rb-color-success, #10b981);
    border: 1px solid rgba(16, 185, 129, 0.4);
}

.rb-param-diff-chunk-btn--accept:hover {
    background: rgba(16, 185, 129, 0.4);
    border-color: var(--rb-color-success, #10b981);
}

/* Reject button - red */
.rb-param-diff-chunk-btn--reject {
    background: rgba(239, 68, 68, 0.2);
    color: var(--rb-color-error, #ef4444);
    border: 1px solid rgba(239, 68, 68, 0.4);
}

.rb-param-diff-chunk-btn--reject:hover {
    background: rgba(239, 68, 68, 0.4);
    border-color: var(--rb-color-error, #ef4444);
}

/* Edit button - blue */
.rb-param-diff-chunk-btn--edit {
    background: rgba(59, 130, 246, 0.2);
    color: var(--rb-color-info, #3b82f6);
    border: 1px solid rgba(59, 130, 246, 0.4);
}

.rb-param-diff-chunk-btn--edit:hover {
    background: rgba(59, 130, 246, 0.4);
    border-color: var(--rb-color-info, #3b82f6);
}

/* ----------------------------------------------------------------------------
   DROPDOWN DIFF
   Side-by-side display for dropdown/select parameters
   ---------------------------------------------------------------------------- */

.rb-param-diff-dropdown {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(30, 41, 59, 0.5);
    border-radius: 6px;
}

.rb-param-diff-value {
    flex: 1;
    min-width: 0;
    /* Allow shrinking for long content */
    padding: 0.75rem;
    border-radius: 6px;
    text-align: center;
    overflow: hidden;
}

.rb-param-diff-value--before {
    background: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.2);
}

.rb-param-diff-value--after {
    background: rgba(74, 222, 128, 0.08);
    border: 1px solid rgba(74, 222, 128, 0.2);
}

/* Label above value */
.rb-param-diff-value .rb-param-diff-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--rb-text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.375rem;
}

/* Text display for current value */
.rb-param-diff-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--rb-text-primary, #e2e8f0);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Styled dropdown select */
.rb-param-diff-select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: var(--rb-bg-input, #0f172a);
    border: 1px solid var(--rb-border-default, #334155);
    border-radius: 4px;
    color: var(--rb-text-primary, #e2e8f0);
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color var(--rb-transition-fast, 150ms) ease;
}

.rb-param-diff-select:hover {
    border-color: var(--rb-primary, #8b5cf6);
}

.rb-param-diff-select:focus {
    outline: none;
    border-color: var(--rb-primary, #8b5cf6);
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
}

.rb-param-diff-select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Transition arrow between values */
.rb-param-diff-dropdown .rb-param-diff-arrow {
    flex-shrink: 0;
    font-size: 1.25rem;
    color: var(--rb-text-muted, #64748b);
}

/* ----------------------------------------------------------------------------
   EDIT TEXTAREA
   Textarea for editing chunk content
   ---------------------------------------------------------------------------- */

.rb-param-diff-edit-textarea {
    width: 100%;
    min-height: 4rem;
    padding: 0.5rem;
    background: var(--rb-bg-input, #0f172a);
    border: 1px solid var(--rb-color-info, #3b82f6);
    border-radius: 4px;
    color: var(--rb-text-primary, #e2e8f0);
    font-family: var(--rb-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
    font-size: 0.8rem;
    line-height: 1.5;
    resize: vertical;
    transition: border-color var(--rb-transition-fast, 150ms) ease,
        box-shadow var(--rb-transition-fast, 150ms) ease;
}

.rb-param-diff-edit-textarea:focus {
    outline: none;
    border-color: var(--rb-primary, #8b5cf6);
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
}

/* Edit action buttons (Done/Cancel) */
.rb-param-diff-edit-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.rb-param-diff-edit-btn {
    padding: 0.375rem 0.75rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--rb-transition-fast, 150ms) ease;
}

.rb-param-diff-edit-btn--done {
    background: linear-gradient(135deg, #059669, var(--rb-color-success, #10b981));
    border: none;
    color: white;
}

.rb-param-diff-edit-btn--done:hover {
    background: linear-gradient(135deg, #047857, #059669);
}

.rb-param-diff-edit-btn--cancel {
    background: transparent;
    border: 1px solid var(--rb-border-default, #334155);
    color: var(--rb-text-secondary, #94a3b8);
}

.rb-param-diff-edit-btn--cancel:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--rb-text-muted, #64748b);
}

/* ----------------------------------------------------------------------------
   STATUS INDICATORS
   Dirty state and queued changes
   ---------------------------------------------------------------------------- */

.rb-param-diff-dirty-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    background: var(--rb-color-warning-bg, rgba(245, 158, 11, 0.1));
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 4px;
    font-size: 0.7rem;
    color: var(--rb-color-warning, #f59e0b);
}

.rb-param-diff-dirty-indicator::before {
    content: '•';
    font-size: 1rem;
    line-height: 1;
}

.rb-param-diff-queued-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0.75rem;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 6px;
    margin-bottom: 0.75rem;
}

.rb-param-diff-queued-banner span {
    font-size: 0.8rem;
    color: #60a5fa;
}

.rb-param-diff-queued-banner button {
    padding: 0.25rem 0.5rem;
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(59, 130, 246, 0.4);
    border-radius: 4px;
    font-size: 0.7rem;
    color: #60a5fa;
    cursor: pointer;
    transition: all var(--rb-transition-fast, 150ms) ease;
}

.rb-param-diff-queued-banner button:hover {
    background: rgba(59, 130, 246, 0.4);
}

/* ----------------------------------------------------------------------------
   FOOTER ACTIONS
   Accept All / Reject All / Apply buttons
   ---------------------------------------------------------------------------- */

.rb-param-diff-footer {
    display: flex;
    gap: 0.75rem;
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px solid var(--rb-border-dark, #334155);
}

.rb-param-diff-footer-btn {
    flex: 1;
    padding: 0.625rem 1rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    will-change: transform;
    transition: all var(--rb-transition-fast, 150ms) ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
}

.rb-param-diff-footer-btn--accept-all {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: var(--rb-color-success, #10b981);
}

.rb-param-diff-footer-btn--accept-all:hover {
    background: rgba(16, 185, 129, 0.25);
    border-color: var(--rb-color-success, #10b981);
}

.rb-param-diff-footer-btn--reject-all {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--rb-color-error, #ef4444);
}

.rb-param-diff-footer-btn--reject-all:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: var(--rb-color-error, #ef4444);
}

.rb-param-diff-footer-btn--apply {
    background: linear-gradient(135deg, #059669, var(--rb-color-success, #10b981));
    border: none;
    color: white;
}

.rb-param-diff-footer-btn--apply:hover {
    background: linear-gradient(135deg, #047857, #059669);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.rb-param-diff-footer-btn--apply:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Undo button in footer */
.rb-param-diff-footer-btn--undo {
    flex: 0 0 auto;
    width: 2.5rem;
    padding: 0.625rem;
    background: rgba(148, 163, 184, 0.1);
    border: 1px solid var(--rb-border-default, #334155);
    color: var(--rb-text-secondary, #94a3b8);
}

.rb-param-diff-footer-btn--undo:hover {
    background: rgba(148, 163, 184, 0.2);
    border-color: var(--rb-text-muted, #64748b);
}

.rb-param-diff-footer-btn--undo:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ----------------------------------------------------------------------------
   LOADING AND ERROR STATES
   ---------------------------------------------------------------------------- */

.rb-param-diff-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem;
    color: var(--rb-text-muted, #64748b);
}

/* Uses @keyframes rb-spin from variables.css */
.rb-param-diff-loading .rb-spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--rb-border-default, #334155);
    border-top-color: var(--rb-primary, #8b5cf6);
    border-radius: 50%;
    animation: rb-spin 0.6s linear infinite;
}

.rb-param-diff-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: var(--rb-text-muted, #64748b);
    font-size: 0.85rem;
}

/* ----------------------------------------------------------------------------
   ACCESSIBILITY - FOCUS INDICATORS
   ---------------------------------------------------------------------------- */

.rb-param-diff-chunk:focus-visible {
    outline: 2px solid var(--rb-primary, #8b5cf6);
    outline-offset: 2px;
    position: relative;
    z-index: 2;
}

.rb-param-diff-chunk-btn:focus-visible {
    outline: 2px solid white;
    outline-offset: 1px;
}

.rb-param-diff-footer-btn:focus-visible {
    outline: 2px solid white;
    outline-offset: 2px;
}

.rb-param-diff-select:focus-visible {
    outline: 2px solid var(--rb-primary, #8b5cf6);
    outline-offset: 2px;
}

/* Selection color in edit mode */
.rb-param-diff-edit-textarea::selection {
    background: rgba(59, 130, 246, 0.3);
}

/* Screen reader only - for status announcements */
.rb-param-diff-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ----------------------------------------------------------------------------
   ACCESSIBILITY - REDUCED MOTION
   ---------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .rb-param-diff-chunk,
    .rb-param-diff-chunk-actions,
    .rb-param-diff-chunk-btn,
    .rb-param-diff-edit-textarea,
    .rb-param-diff-select,
    .rb-param-diff-footer-btn {
        transition: none;
    }

    /* Provide static visual feedback instead of animation */
    .rb-param-diff-loading .rb-spinner {
        animation: none;
        border-color: var(--rb-primary, #8b5cf6);
        border-top-color: transparent;
    }
}

/* ----------------------------------------------------------------------------
   RESPONSIVE - NARROW VIEWPORTS
   ---------------------------------------------------------------------------- */

@media (max-width: 600px) {

    /* Stack dropdown diff vertically */
    .rb-param-diff-dropdown {
        flex-direction: column;
        gap: 0.5rem;
    }

    .rb-param-diff-dropdown .rb-param-diff-arrow {
        transform: rotate(90deg);
        align-self: center;
    }

    .rb-param-diff-value {
        width: 100%;
    }

    /* Stack footer buttons */
    .rb-param-diff-footer {
        flex-wrap: wrap;
    }

    .rb-param-diff-footer-btn {
        flex: 1 1 45%;
    }

    .rb-param-diff-footer-btn--undo {
        flex: 0 0 100%;
        width: 100%;
        order: -1;
        margin-bottom: 0.5rem;
    }
}

/* Smaller screens - reduce padding and button size */
@media (max-width: 400px) {
    .rb-param-diff-chunk {
        padding: 0.2rem 0.375rem;
        /* 3 buttons × 1.375rem + 2 gaps × 0.125rem = 4.375rem */
        padding-right: 4.5rem;
        font-size: 0.75rem;
    }

    .rb-param-diff-chunk-btn {
        width: 1.375rem;
        height: 1.375rem;
        font-size: 0.6rem;
    }

    .rb-param-diff-chunk-actions {
        gap: 0.125rem;
    }
}

/* ----------------------------------------------------------------------------
   TABLE FIELD DIFF VIEWER - HEADER STYLES
   Styles for navigating within table parameters
   ---------------------------------------------------------------------------- */

.rb-param-diff-breadcrumb {
    color: var(--rb-text-muted, #64748b);
    font-size: 0.7rem;
    font-weight: 400;
}

.rb-param-diff-back {
    flex-shrink: 0;
    padding: 0.25rem 0.5rem;
    font-size: 0.7rem;
    color: var(--rb-text-secondary, #94a3b8);
    background: transparent;
    border: 1px solid var(--rb-border, rgba(255, 255, 255, 0.1));
    border-radius: 4px;
    cursor: pointer;
    transition: all var(--rb-transition-fast, 150ms) ease;
}

.rb-param-diff-back:hover {
    color: var(--rb-text, #e2e8f0);
    border-color: var(--rb-border-hover, rgba(255, 255, 255, 0.2));
    background: var(--rb-surface-hover, rgba(255, 255, 255, 0.05));
}

.rb-param-diff-back:focus-visible {
    outline: 2px solid var(--rb-primary, #3b82f6);
    outline-offset: 2px;
}

/* ----------------------------------------------------------------------------
   TEXT EDITOR - EDITABLE TEXT FIELDS
   Full-height editable textarea for string/text fields
   ---------------------------------------------------------------------------- */

.rb-param-diff-viewer--editable {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.rb-param-diff-content--editor {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.rb-param-text-editor {
    flex: 1;
    width: 100%;
    min-height: 0;
    padding: var(--rb-viewer-content-padding, 0.75rem);
    font-family: var(--rb-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--rb-diff-added-text, #86efac);
    background: var(--rb-diff-added-bg, rgba(6, 78, 59, 0.4));
    border: none;
    border-left: var(--rb-viewer-status-border-width, 3px) solid var(--rb-diff-added-border, #10b981);
    border-radius: 0;
    resize: none;
    outline: none;
}

.rb-param-text-editor::placeholder {
    color: var(--rb-text-muted, #64748b);
    opacity: 0.7;
}

.rb-param-text-editor:focus {
    border-color: var(--rb-primary, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.rb-param-text-editor:hover:not(:focus) {
    border-color: var(--rb-diff-added-border-hover, #34d399);
}

/* ----------------------------------------------------------------------------
   CODE EDITOR - LINE NUMBERS AND CODE DISPLAY
   IDE-style code editor with line numbers
   ---------------------------------------------------------------------------- */

/* Code editor mode fills the workspace */
.rb-param-diff-viewer--code-editor {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.rb-param-diff-viewer--code-editor .rb-param-diff-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Code editor container - the main editing area */
.rb-code-editor-container {
    display: flex;
    flex: 1;
    min-height: 0;
    background: var(--rb-surface-elevated, #1e293b);
    border: none;
    border-radius: 0;
    overflow: hidden;
    font-family: var(--rb-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
    font-size: 0.875rem;
    line-height: 1.6;
    padding-top: var(--rb-viewer-content-padding, 0.75rem);
}

/* When code editor is direct child of viewer (no content wrapper) */
.rb-param-diff-viewer>.rb-code-editor-container {
    flex: 1;
}

.rb-code-content {
    flex: 1;
    overflow: auto;
    background: var(--rb-surface-elevated, #1e293b);
    outline: none;
    white-space: pre;
}

.rb-code-content[contenteditable="true"] {
    counter-reset: rb-line;
    user-select: text;
    cursor: text;
    padding-left: 2rem;
}

.rb-code-content[contenteditable="true"] > * {
    counter-increment: rb-line;
    position: relative;
}

.rb-code-content[contenteditable="true"] > *::before {
    content: counter(rb-line);
    position: absolute;
    left: -2rem;
    width: 1.5rem;
    padding-right: 0.25rem;
    text-align: right;
    color: var(--rb-text-muted, #64748b);
    font-size: 0.75rem;
    line-height: inherit;
    user-select: none;
    pointer-events: none;
}

/* Chunked views have their own CSS-counter line numbers (rb-chunk-line),
   so disable the contenteditable counter system to prevent double-indent. */
.rb-code-content--chunked[contenteditable="true"] {
    padding-left: 0;
}

.rb-code-content--chunked[contenteditable="true"] > *::before {
    display: none;
}

.rb-code-line {
    padding: 0 0.5rem 0 0;
    min-height: 1.25rem;
    line-height: 1.25rem;
    font-size: 0.75rem;
}

.rb-code-line--added {
    background: var(--rb-diff-added-bg, rgba(6, 78, 59, 0.4));
    border-left: var(--rb-viewer-status-border-width, 3px) solid var(--rb-diff-added-border, #10b981);
}

.rb-code-line--removed {
    background: var(--rb-diff-removed-bg, rgba(127, 29, 29, 0.4));
    border-left: var(--rb-viewer-status-border-width, 3px) solid var(--rb-diff-removed-border, #ef4444);
}

.rb-code-line--unchanged {
    background: transparent;
    border-left: var(--rb-viewer-status-border-width, 3px) solid transparent;
}

/* Default text color for code lines */
.rb-code-line--added {
    color: var(--rb-diff-added-text, #86efac);
}

.rb-code-line--removed {
    color: var(--rb-diff-removed-text, #fca5a5);
    opacity: 0.8;
}

.rb-code-line--unchanged {
    color: var(--rb-text, #e2e8f0);
}

/* rb-line-content is used in chunk-based diff views (per-span contenteditable) */
.rb-line-content {
    display: inline-block;
    min-width: 100%;
    outline: none;
}

.rb-line-content[contenteditable="true"]:empty::before {
    content: ' ';
}

.rb-line-prefix {
    display: inline-block;
    width: 1.5em;
    text-align: center;
    font-weight: 600;
    user-select: none;
    flex-shrink: 0;
}

.rb-code-line--added .rb-line-prefix {
    color: var(--rb-diff-added-text, #86efac);
}

.rb-code-line--removed .rb-line-prefix {
    color: var(--rb-diff-removed-text, #fca5a5);
}

.rb-code-line--unchanged .rb-line-prefix {
    color: var(--rb-text-muted, #64748b);
}

/* ----------------------------------------------------------------------------
   CHUNK-BASED APPROVAL - Per-chunk accept/reject UI
   ---------------------------------------------------------------------------- */

/* Chunked diff editor container - enables scrolling */
.rb-code-editor-container--chunked {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.rb-param-diff-viewer--chunked .rb-code-content--chunked {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-x: auto;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    counter-reset: rb-chunk-line;
}

/* CSS counter-based line numbers for chunked view.
   Hidden lines (display: none) don't increment the counter,
   so numbers recompute automatically when chunks are accepted/rejected. */
.rb-code-content--chunked .rb-code-line {
    counter-increment: rb-chunk-line;
    position: relative;
    padding-left: 2rem;
}

.rb-code-content--chunked .rb-code-line::before {
    content: counter(rb-chunk-line);
    position: absolute;
    left: 0;
    width: 1.5rem;
    padding-right: 0.25rem;
    text-align: right;
    color: var(--rb-text-muted, #64748b);
    font-size: 0.75rem;
    line-height: inherit;
    user-select: none;
    pointer-events: none;
}

.rb-diff-chunk {
    position: relative;
    border-radius: 0;
}

/* Line structure in chunked view */
.rb-diff-chunk .rb-code-line {
    display: flex;
    align-items: flex-start;
    min-height: 1.25rem;
    line-height: 1.25rem;
    white-space: pre;
}

.rb-diff-chunk .rb-line-content {
    white-space: pre;
}


/* Unchanged chunks - no special styling, just context */
.rb-diff-chunk[data-chunk-type="unchanged"] {
    background: transparent;
}

/* Change chunks styling */
.rb-diff-chunk--change {
    border-left: var(--rb-viewer-status-border-width, 3px) solid transparent;
}

.rb-diff-chunk--change.rb-diff-chunk--pending {
    border-left-color: var(--rb-color-warning, #f59e0b);
}

/* Chunk status styling */
.rb-diff-chunk--accepted {
    border-left-color: var(--rb-color-success, #10b981);
}

.rb-diff-chunk--accepted .rb-code-line--added {
    background: transparent;
    color: var(--rb-text, #e2e8f0);
    border-left-color: var(--rb-color-success, #10b981);
}

.rb-diff-chunk--accepted .rb-code-line--added .rb-line-prefix {
    visibility: hidden;
}

.rb-diff-chunk--accepted .rb-code-line--removed {
    display: none;
}

.rb-diff-chunk--rejected {
    border-left-color: var(--rb-text-muted, #64748b);
}

.rb-diff-chunk--rejected .rb-code-line--added {
    display: none;
}

.rb-diff-chunk--rejected .rb-code-line--removed {
    background: transparent;
    color: var(--rb-text, #e2e8f0);
}

.rb-diff-chunk--rejected .rb-code-line--removed .rb-line-prefix {
    visibility: hidden;
}

.rb-diff-chunk--rejected .rb-code-line--removed .rb-line-content {
    color: inherit;
}

/* Chunk toolbar - overlays on the line below each change chunk */
.rb-diff-chunk {
    position: relative;
}

.rb-chunk-toolbar {
    position: absolute;
    top: 100%;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    background: rgba(15, 23, 42, 0.92);
    border-radius: 0 0 4px 4px;
    font-size: 0.75rem;
    z-index: 10;
    /* Hidden by default, shown on hover */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

/* Show toolbar only for the single active chunk */
.rb-diff-chunk--active > .rb-chunk-toolbar,
.rb-chunk-toolbar:focus-within {
    opacity: 1;
    pointer-events: auto;
}

.rb-diff-chunk--active {
    z-index: 1;
}

/* Decided toolbars use the same hover-reveal as pending (opacity 0 → 1) */

.rb-chunk-toolbar-nav {
    display: none; /* Hide navigation arrows in overlay mode */
}

.rb-chunk-toolbar-actions {
    display: flex;
    gap: 0.375rem;
}

.rb-chunk-toolbar-btn {
    padding: 0.25rem 0.625rem;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--rb-transition-fast, 150ms) ease;
    border: none;
}

.rb-chunk-toolbar-btn--nav {
    background: rgba(100, 116, 139, 0.3);
    color: var(--rb-text-secondary, #94a3b8);
    padding: 0.25rem 0.5rem;
}

.rb-chunk-toolbar-btn--nav:hover {
    background: rgba(100, 116, 139, 0.5);
    color: var(--rb-text-primary, #e2e8f0);
}

.rb-chunk-toolbar-btn--accept {
    background: #16a34a;
    color: #ffffff;
}

.rb-chunk-toolbar-btn--accept:hover {
    background: #15803d;
}

.rb-chunk-toolbar-btn--reject {
    background: #dc2626;
    color: #ffffff;
}

.rb-chunk-toolbar-btn--reject:hover {
    background: #b91c1c;
}

.rb-chunk-toolbar-btn--undo {
    background: rgba(100, 116, 139, 0.2);
    color: var(--rb-text-secondary, #94a3b8);
}

.rb-chunk-toolbar-btn--undo:hover {
    background: rgba(100, 116, 139, 0.4);
}

/* Chunk toolbar status variants */
.rb-chunk-toolbar--accepted {
    background: rgba(15, 23, 42, 0.92);
}

.rb-chunk-toolbar--rejected {
    background: rgba(15, 23, 42, 0.92);
}

.rb-chunk-toolbar-status {
    font-weight: 500;
    color: var(--rb-text-secondary, #94a3b8);
}

.rb-chunk-toolbar--accepted .rb-chunk-toolbar-status {
    color: var(--rb-color-success, #10b981);
}

.rb-chunk-toolbar--rejected .rb-chunk-toolbar-status {
    color: var(--rb-text-muted, #64748b);
}

/* Chunk status label (inline, for accepted/rejected chunks in JSON view) */
.rb-chunk-status-label {
    padding: 0.125rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 500;
    text-align: right;
}

.rb-chunk-status-label--accepted {
    color: var(--rb-color-success, #10b981);
}

/* Chunk navigation bar at top */
.rb-chunk-nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: rgba(30, 41, 59, 0.6);
    border-bottom: 1px solid var(--rb-border-dark, #334155);
    font-size: 0.8rem;
}

.rb-chunk-nav-count {
    color: var(--rb-text-secondary, #94a3b8);
    margin-right: auto;
    font-weight: 500;
}

.rb-chunk-nav-btn {
    padding: 0.25rem 0.5rem;
    background: rgba(100, 116, 139, 0.2);
    border: none;
    border-radius: 3px;
    color: var(--rb-text-secondary, #94a3b8);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--rb-transition-fast, 150ms) ease;
}

.rb-chunk-nav-btn:hover {
    background: rgba(100, 116, 139, 0.4);
    color: var(--rb-text-primary, #e2e8f0);
}

.rb-chunk-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Footer for chunked view */
.rb-param-diff-viewer--chunked .rb-param-diff-footer {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    border-top: 1px solid var(--rb-border-dark, #334155);
    background: rgba(15, 23, 42, 0.6);
}

/* Chunk highlight animation for navigation */
@keyframes rb-chunk-pulse {
    0% { box-shadow: inset 0 0 0 0 rgba(59, 130, 246, 0.5); }
    50% { box-shadow: inset 0 0 0 2px rgba(59, 130, 246, 0.3); }
    100% { box-shadow: inset 0 0 0 0 rgba(59, 130, 246, 0); }
}

.rb-chunk-highlight {
    animation: rb-chunk-pulse 1s ease-out;
}

/* Textarea fallback for large non-diff JSON views */
.rb-code-textarea {
    width: 100%;
    resize: vertical;
    background: var(--rb-surface-elevated, #1e293b);
    color: var(--rb-text-primary, #e2e8f0);
    border: none;
    outline: none;
    font-family: 'SF Mono', Monaco, Menlo, Consolas, monospace;
    font-size: 0.75rem;
    line-height: 1.25rem;
    padding: 0.5rem;
    tab-size: 2;
}

/* Invalid field flash on failed validation */
@keyframes rb-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-3px); }
    40%, 80% { transform: translateX(3px); }
}

.rb-field-invalid {
    outline: 2px solid #ef4444 !important;
    outline-offset: -2px;
    animation: rb-shake 0.4s ease-in-out;
}

.rb-option-invalid {
    color: #ef4444;
    font-style: italic;
}