/* ═══════════════════════════════════════════════════════════════
   VERSIONS — Digital Rust
   ═══════════════════════════════════════════════════════════════ */

.version-history-dialog .dialog-container {
    max-width: 900px; width: 90%;
    position: relative; display: flex; flex-direction: column; overflow: hidden;
}

.version-history-dialog .close-dialog svg { width: 24px; height: 24px; }

.version-history-dialog .dialog-header {
    padding: var(--dr-space-md) var(--dr-space-lg);
    border-bottom: var(--dr-border);
    display: flex; justify-content: space-between; align-items: center;
    background-color: var(--dr-surface-secondary);
}

.version-history-dialog .dialog-header h2 {
    margin: 0; font-size: var(--dr-text-xl);
    font-family: var(--dr-font-heading);
    color: var(--dr-text-primary);
}

.version-history-dialog .dialog-content {
    padding: 0; flex: 1; overflow: hidden;
}

.version-history-layout {
    display: flex; height: 100%;
    max-height: calc(80vh - 60px);
}

.version-list-container {
    width: 40%;
    border-right: var(--dr-border);
    padding: var(--dr-space-md); overflow-y: auto;
}

.version-preview-container {
    width: 60%; padding: var(--dr-space-md); overflow-y: auto;
    display: flex; flex-direction: column;
}

.version-preview { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

.empty-message {
    display: flex; align-items: center; justify-content: center;
    height: 100%; padding: var(--dr-space-lg); text-align: center;
    background-color: var(--dr-surface-elevated);
    border: var(--dr-border);
    border-radius: var(--dr-radius);
    color: var(--dr-text-tertiary);
    font-style: italic;
}

.version-list-container h3,
.version-preview-container h3 {
    margin-top: 0; margin-bottom: 15px;
    font-size: var(--dr-text-lg);
    font-family: var(--dr-font-heading);
    color: var(--dr-text-primary);
}

.version-list { margin-top: 10px; }

.version-item {
    padding: var(--dr-space-md); margin-bottom: var(--dr-space-sm);
    border: var(--dr-border);
    border-radius: var(--dr-radius);
    cursor: pointer;
    background-color: var(--dr-surface-elevated);
    box-shadow: var(--dr-shadow-offset-sm);
    transition: all var(--dr-transition-fast);
    overflow: hidden; word-break: break-word;
}

.version-item:hover {
    border-color: var(--dr-accent);
    transform: translate(-2px, -2px);
    box-shadow: var(--dr-shadow-hover-sm);
}

.version-item.selected {
    border-color: var(--dr-accent);
    background-color: rgba(var(--dr-accent-rgb), 0.05);
}

.version-info { margin-bottom: 10px; }

.version-date {
    font-weight: var(--dr-font-weight);
    color: var(--dr-text-primary);
    overflow: hidden; text-overflow: ellipsis;
    white-space: normal; word-wrap: break-word;
    font-size: var(--dr-text-sm); line-height: 1.4;
}

.version-actions { display: flex; gap: 8px; }

.version-actions button {
    border: none;
    background-color: var(--dr-surface-highlight);
    cursor: pointer; padding: var(--dr-space-xs) var(--dr-space-md);
    border-radius: var(--dr-radius-sm);
    color: var(--dr-text-tertiary);
    transition: all var(--dr-transition-fast);
    display: flex; align-items: center; gap: 5px;
    font-size: var(--dr-text-sm);
}

.version-actions button:hover {
    background-color: var(--dr-dark-packet);
    color: var(--dr-text-primary);
}

.version-actions button svg { width: 16px; height: 16px; flex-shrink: 0; fill: currentColor; }
.version-history-dialog svg { fill: currentColor; }
.preview-version-btn:hover { color: var(--dr-accent); }
.restore-version-btn:hover { color: var(--dr-amber-alert); }

.version-content {
    padding: var(--dr-space-md);
    border: var(--dr-border);
    border-radius: var(--dr-radius);
    background-color: var(--dr-surface-secondary);
    overflow-x: hidden; width: 100%; box-sizing: border-box;
}

.version-content img {
    max-width: 100%; height: auto; display: block;
    margin: 1.5rem auto; border-radius: var(--dr-radius);
    box-shadow: var(--dr-shadow-offset-sm);
}

.version-content.markdown-body {
    width: 100%; overflow-wrap: break-word; word-wrap: break-word;
    word-break: break-word; hyphens: auto;
}

.version-content.markdown-body * { max-width: 100%; box-sizing: border-box; }

.version-content a {
    color: var(--dr-accent);
    text-decoration: underline;
    text-decoration-color: var(--dr-phantom-current);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.version-content a:hover { text-decoration-thickness: 2px; }

.version-content pre, .version-content code {
    white-space: pre-wrap; word-wrap: break-word;
    overflow-wrap: break-word; max-width: 100%;
}

.version-content table { width: 100%; overflow-x: auto; max-width: 100%; }

.version-content blockquote, .markdown-body blockquote {
    border: 1px solid var(--dr-dark-packet);
    border-top: 2px solid var(--dr-accent);
    margin: 0.75em 0; padding: 0.5em 1em;
    background-color: var(--dr-surface-elevated);
    border-radius: var(--dr-radius);
}

/* Responsive */
@media (max-width: 950px) {
    .version-history-dialog .dialog-container { width: 95%; padding: 0; }
    .version-history-dialog .dialog-content { overflow-y: auto; display: flex; flex-direction: column; }
    .version-history-layout { flex-direction: column; max-height: none; height: auto; overflow: visible; }
    .version-list-container { width: 100%; max-height: 35vh; border-right: none; border-bottom: var(--dr-border); padding: 10px; box-sizing: border-box; flex: none; }
    .version-preview-container { width: 100%; max-height: none; height: auto; padding: 10px; box-sizing: border-box; overflow: visible; flex: none; }
    .version-preview { overflow: visible; height: auto; }
    .version-item { padding: 10px; margin-right: 5px; margin-left: 5px; }
}