@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ── Root wrapper ──────────────────────────────────────────────────────── */
.tsc-terminal-root {
    display: block;
    margin: 0 auto;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 14px;
    line-height: 1.6;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
    max-width: 860px;
    user-select: none;
}

/* ── Markup helpers ─────────────────────────────────────────────────────── */
.tsc-dim { opacity: .45; }

/* ── Title bar ──────────────────────────────────────────────────────────── */
.tsc-bar {
    display: flex;
    align-items: center;
    padding: 0 16px;
    height: 42px;
    gap: 8px;
    flex-shrink: 0;
}
.tsc-bar-dot { width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0; }
.tsc-bar-title {
    flex: 1;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    opacity: .55;
    letter-spacing: .3px;
    margin-right: 39px; /* balance the three dots */
}

/* ── Body / scroll area ─────────────────────────────────────────────────── */
.tsc-body {
    padding: 20px 24px 24px;
    min-height: 120px;
    overflow-y: auto;
    max-height: 520px;
}
.tsc-terminal-root.tsc-no-max-height .tsc-body {
    max-height: none !important;
    overflow-y: visible !important;
}

/* ── Lines ──────────────────────────────────────────────────────────────── */
.tsc-line { display: block; white-space: pre-wrap; word-break: break-all; }
/* prompt line: prompt and cmd-text sit inline — cursor flows right after typed text */
.tsc-line-prompt { display: block; }
.tsc-line-prompt .tsc-prompt { display: inline; }
.tsc-line-prompt .tsc-cmd-text { display: inline; }

/* ── Cursor ─────────────────────────────────────────────────────────────── */
.tsc-cursor {
    display: inline-block;
    width: .55em;
    height: 1.3em;
    vertical-align: text-bottom;
    animation: tsc-blink 1s step-start infinite;
}
.tsc-cursor.tsc-cursor-hidden {
    visibility: hidden;
    animation: none;
}
@keyframes tsc-blink {
    0%,100% { opacity: 1; }
    50%      { opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THEMES
═══════════════════════════════════════════════════════════════════════════ */

/* ── Dark ───────────────────────────────────────────────────────────────── */
.tsc-theme-dark .tsc-bar          { background: #2a2a2e; }
.tsc-theme-dark .tsc-bar-dot:nth-child(1) { background: #ff5f57; }
.tsc-theme-dark .tsc-bar-dot:nth-child(2) { background: #febc2e; }
.tsc-theme-dark .tsc-bar-dot:nth-child(3) { background: #28c840; }
.tsc-theme-dark .tsc-bar-title    { color: #aaa; }
.tsc-theme-dark .tsc-body         { background: #1a1a1e; color: #e8e8e8; }
.tsc-theme-dark .tsc-prompt       { color: #00e5a0; }
.tsc-theme-dark .tsc-cmd-text     { color: #fff; }
.tsc-theme-dark .tsc-output       { color: #b0b0b8; }
.tsc-theme-dark .tsc-cursor       { background: #00e5a0; }

/* ── Light ──────────────────────────────────────────────────────────────── */
.tsc-theme-light .tsc-bar         { background: #e8e8ec; }
.tsc-theme-light .tsc-bar-dot:nth-child(1) { background: #ff5f57; }
.tsc-theme-light .tsc-bar-dot:nth-child(2) { background: #febc2e; }
.tsc-theme-light .tsc-bar-dot:nth-child(3) { background: #28c840; }
.tsc-theme-light .tsc-bar-title   { color: #666; }
.tsc-theme-light .tsc-body        { background: #f9f9fb; color: #222; }
.tsc-theme-light .tsc-prompt      { color: #0070e0; }
.tsc-theme-light .tsc-cmd-text    { color: #111; }
.tsc-theme-light .tsc-output      { color: #444; }
.tsc-theme-light .tsc-cursor      { background: #0070e0; }

/* ── Green (hacker) ─────────────────────────────────────────────────────── */
.tsc-theme-green .tsc-bar         { background: #001200; border-bottom: 1px solid #003300; }
.tsc-theme-green .tsc-bar-dot     { opacity: .3; }
.tsc-theme-green .tsc-bar-dot:nth-child(1) { background: #00ff41; }
.tsc-theme-green .tsc-bar-dot:nth-child(2) { background: #00ff41; }
.tsc-theme-green .tsc-bar-dot:nth-child(3) { background: #00ff41; }
.tsc-theme-green .tsc-bar-title   { color: #00bb30; }
.tsc-theme-green .tsc-body        { background: #001400; color: #00ff41; }
.tsc-theme-green .tsc-prompt      { color: #33ff70; font-weight: 700; }
.tsc-theme-green .tsc-cmd-text    { color: #00ff41; }
.tsc-theme-green .tsc-output      { color: #00bb30; }
.tsc-theme-green .tsc-cursor      { background: #00ff41; }
.tsc-theme-green .tsc-body        { text-shadow: 0 0 8px rgba(0,255,65,.5); }

/* ── Retro (amber) ──────────────────────────────────────────────────────── */
.tsc-theme-retro .tsc-bar         { background: #120900; border-bottom: 1px solid #331a00; }
.tsc-theme-retro .tsc-bar-dot     { opacity: .3; }
.tsc-theme-retro .tsc-bar-dot:nth-child(1) { background: #ffa500; }
.tsc-theme-retro .tsc-bar-dot:nth-child(2) { background: #ffa500; }
.tsc-theme-retro .tsc-bar-dot:nth-child(3) { background: #ffa500; }
.tsc-theme-retro .tsc-bar-title   { color: #b05e00; }
.tsc-theme-retro .tsc-body        { background: #0f0700; color: #ffaa00; }
.tsc-theme-retro .tsc-prompt      { color: #ffcc44; font-weight: 700; }
.tsc-theme-retro .tsc-cmd-text    { color: #ffaa00; }
.tsc-theme-retro .tsc-output      { color: #cc7700; }
.tsc-theme-retro .tsc-cursor      { background: #ffaa00; }
.tsc-theme-retro .tsc-body        { text-shadow: 0 0 8px rgba(255,160,0,.45); }

/* ── Scanline overlay for retro/green ──────────────────────────────────── */
.tsc-theme-green .tsc-body::after,
.tsc-theme-retro .tsc-body::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        transparent,
        transparent 2px,
        rgba(0,0,0,.08) 2px,
        rgba(0,0,0,.08) 4px
    );
    pointer-events: none;
    z-index: 0;
}
.tsc-theme-green .tsc-line,
.tsc-theme-retro .tsc-line { position: relative; z-index: 1; }