/* ============================================
   UNDO.SH - Terminal Session
   ============================================ */

:root {
    --bg: #0d1117;
    --titlebar: #1a1b26;
    --text: #c9d1d9;
    --green: #27c93f;
    --comment: #6a737d;
    --header-blue: #7aa2f7;
    --error: #f7768e;
    --success: #9ece6a;
    --warning: #e0af68;
    --cyan: #73daca;
    --dot-red: #ff5f56;
    --dot-amber: #ffbd2e;
    --dot-green: #27c93f;
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    background: var(--bg);
    font-family: 'Fira Code', monospace;
    color: var(--text);
    line-height: 1.5;
    overflow-x: hidden;
}

/* === Title Bar === */
#title-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 28px;
    background: var(--titlebar);
    display: flex;
    align-items: center;
    z-index: 100;
    padding: 0 12px;
    border-bottom: 1px solid rgba(201,209,217,0.08);
}

.traffic-lights {
    display: flex;
    gap: 8px;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.dot-red { background: var(--dot-red); }
.dot-amber { background: var(--dot-amber); }
.dot-green { background: var(--dot-green); }

.title-bar-text {
    font-family: 'Fira Code', monospace;
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--comment);
    margin: 0 auto;
}

/* === Terminal Main === */
#terminal {
    max-width: 80ch;
    margin: 0 auto;
    padding: 44px 1rem 8rem;
}

/* === Terminal Sections === */
.term-section {
    margin-bottom: 2rem;
}

/* === Text Styles === */
.command {
    font-family: 'Fira Code', monospace;
    font-size: clamp(0.9rem, 1vw, 1rem);
    font-weight: 600;
    color: var(--green);
    line-height: 1.5;
    margin-bottom: 0.25rem;
}

.command-inline {
    font-family: 'Fira Code', monospace;
    font-size: clamp(0.9rem, 1vw, 1rem);
    font-weight: 600;
    color: var(--green);
    line-height: 1.5;
}

.output {
    font-family: 'Fira Code', monospace;
    font-size: clamp(0.85rem, 0.95vw, 0.95rem);
    font-weight: 400;
    color: var(--text);
    line-height: 1.5;
    margin-bottom: 0.15rem;
}

.comment {
    font-family: 'Fira Code', monospace;
    font-size: clamp(0.85rem, 0.95vw, 0.95rem);
    font-weight: 400;
    color: var(--comment);
    font-style: italic;
    line-height: 1.5;
    margin-bottom: 0.15rem;
}

.blank {
    line-height: 1.5;
    height: 1.5em;
}

.success {
    color: var(--success);
}

.error {
    color: var(--error);
}

.warning {
    font-family: 'Fira Code', monospace;
    font-size: clamp(0.85rem, 0.95vw, 0.95rem);
    font-weight: 600;
    color: var(--warning);
    line-height: 1.5;
    margin-bottom: 0.15rem;
}

.cyan {
    color: var(--cyan);
}

/* === ASCII Art === */
.ascii-art {
    font-family: 'Fira Code', monospace;
    font-size: clamp(0.55rem, 0.75vw, 0.75rem);
    font-weight: 400;
    color: var(--header-blue);
    line-height: 1.2;
    margin-bottom: 0.5rem;
    overflow-x: auto;
}

.ascii-header {
    color: var(--header-blue);
    font-weight: 600;
}

/* === Tree Structure === */
.tree {
    font-family: 'Fira Code', monospace;
    font-size: clamp(0.85rem, 0.95vw, 0.95rem);
    font-weight: 400;
    color: var(--text);
    line-height: 1.5;
    margin-bottom: 0.5rem;
    overflow-x: auto;
}

/* === Box Drawing === */
.box-draw {
    font-family: 'Fira Code', monospace;
    font-size: clamp(0.85rem, 0.95vw, 0.95rem);
    font-weight: 400;
    color: var(--cyan);
    line-height: 1.5;
    margin-bottom: 0.5rem;
    overflow-x: auto;
}

/* === Diff Output === */
.diff {
    font-family: 'Fira Code', monospace;
    font-size: clamp(0.85rem, 0.95vw, 0.95rem);
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 0.5rem;
    overflow-x: auto;
}

.diff-header {
    color: var(--header-blue);
}

.diff-remove {
    color: var(--error);
}

.diff-add {
    color: var(--success);
}

/* === Progress Bar === */
.progress-container {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 0.5rem;
}

.progress-bar {
    font-family: 'Fira Code', monospace;
    font-size: clamp(0.85rem, 0.95vw, 0.95rem);
    color: var(--text);
    white-space: pre;
}

/* === Cursor === */
.cursor {
    animation: blink 1s steps(1) infinite;
    color: var(--text);
}

@keyframes blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* === Execution Lines === */
.exec-line {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.exec-line.visible {
    opacity: 1;
}

.error-line {
    color: var(--text);
}

/* === Exit Line === */
.exit-line {
    color: var(--green);
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.exit-line.visible {
    opacity: 1;
}

/* === Boot ASCII banner lines reveal === */
.ascii-art {
    opacity: 0;
    transition: opacity 0.8s ease;
}

.ascii-art.visible {
    opacity: 1;
}

/* === Responsive === */
@media (max-width: 768px) {
    #terminal {
        padding: 40px 0.75rem 6rem;
    }

    .title-bar-text {
        font-size: 0.6rem;
    }

    pre {
        font-size: 0.7rem;
    }
}