/* ========================================
   TERMINAL CHAT - LANDING PAGE
   ======================================== */

:root {
    --t-bg: #0c0c0c;
    --t-bg-bar: #1a1a1a;
    --t-text: #cccccc;
    --t-text-dim: #666666;
    --t-green: #4af626;
    --t-green-dim: rgba(74, 246, 38, 0.15);
    --t-cyan: #00d4ff;
    --t-yellow: #ffd700;
    --t-red: #ff5555;
    --t-orange: #ffaa00;
    --t-white: #ffffff;
    --t-blue: #6699ff;
    --t-magenta: #ff79c6;
    --t-font: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
}

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

html, body {
    height: 100%;
    overflow: hidden;
    position: fixed;
    width: 100%;
    touch-action: none;
}

body {
    font-family: var(--t-font);
    background: #000;
    color: var(--t-text);
    -webkit-font-smoothing: antialiased;
}

/* Terminal Container */
.terminal {
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-width: 900px;
    margin: 0 auto;
    background: var(--t-bg);
    border-left: 1px solid #1a1a1a;
    border-right: 1px solid #1a1a1a;
}

/* Terminal Title Bar */
.terminal-bar {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    background: var(--t-bg-bar);
    border-bottom: 1px solid #2a2a2a;
    flex-shrink: 0;
    -webkit-app-region: drag;
}

.terminal-dots {
    display: flex;
    gap: 7px;
}

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

.dot-red { background: #ff5f57; }
.dot-yellow { background: #febc2e; }
.dot-green { background: #28c840; }

.terminal-title {
    flex: 1;
    text-align: center;
    font-size: 0.75rem;
    color: var(--t-text-dim);
    letter-spacing: 0.02em;
}

.terminal-bar-right { width: 52px; }

/* Terminal Body */
.terminal-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding: 20px;
    font-size: 0.88rem;
    line-height: 1.65;
    scroll-behavior: smooth;
}

.terminal-body::-webkit-scrollbar { width: 6px; }
.terminal-body::-webkit-scrollbar-track { background: transparent; }
.terminal-body::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }

/* Output Lines */
.line {
    margin-bottom: 2px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.line-blank { height: 1.65em; }

/* Colors */
.c-green { color: var(--t-green); }
.c-cyan { color: var(--t-cyan); }
.c-yellow { color: var(--t-yellow); }
.c-red { color: var(--t-red); }
.c-orange { color: var(--t-orange); }
.c-white { color: var(--t-white); font-weight: 600; }
.c-dim { color: var(--t-text-dim); }
.c-blue { color: var(--t-blue); }
.c-magenta { color: var(--t-magenta); }
.c-bold { font-weight: 700; }

/* Prompt */
.prompt {
    color: var(--t-green);
    font-weight: 600;
    margin-right: 8px;
    user-select: none;
}

/* User Input echo */
.user-input {
    color: var(--t-white);
}

/* Input Line */
.terminal-input-line {
    display: flex;
    align-items: center;
    margin-top: 4px;
}

.terminal-input-line input {
    flex: 1;
    background: none;
    border: none;
    color: var(--t-white);
    font-family: var(--t-font);
    font-size: 0.88rem;
    outline: none;
    caret-color: var(--t-green);
}

.cursor-blink {
    display: inline-block;
    width: 8px;
    height: 1.1em;
    background: var(--t-green);
    animation: blink 1s step-end infinite;
    margin-left: 1px;
    vertical-align: middle;
}

@keyframes blink {
    50% { opacity: 0; }
}

.terminal-input-line input:focus + .cursor-blink { display: none; }

/* Choice Buttons */
.terminal-choices {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
    margin-bottom: 4px;
}

.choice-btn {
    background: transparent;
    color: var(--t-green);
    border: 1px solid var(--t-green);
    border-radius: 4px;
    padding: 8px 20px;
    font-family: var(--t-font);
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.02em;
}

.choice-btn:hover {
    background: var(--t-green-dim);
    color: var(--t-white);
}

.choice-btn-muted {
    color: var(--t-text-dim);
    border-color: #333;
}

.choice-btn-muted:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--t-text);
    border-color: #555;
}

/* Progress Bar */
.progress-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0;
}

.progress-bar-term {
    width: 200px;
    height: 8px;
    background: #1a1a1a;
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill-term {
    height: 100%;
    background: var(--t-green);
    border-radius: 4px;
    width: 0%;
    transition: width 0.3s;
}

.progress-pct {
    font-size: 0.8rem;
    color: var(--t-green);
    min-width: 36px;
}

/* Score Display */
.score-display {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-weight: 700;
    font-size: 0.85rem;
}

.score-good { background: rgba(74, 246, 38, 0.15); color: var(--t-green); }
.score-ok { background: rgba(255, 215, 0, 0.15); color: var(--t-yellow); }
.score-bad { background: rgba(255, 85, 85, 0.15); color: var(--t-red); }

/* Typing animation */
.typing-dots::after {
    content: '';
    animation: typingDots 1.5s infinite;
}

@keyframes typingDots {
    0% { content: '.'; }
    33% { content: '..'; }
    66% { content: '...'; }
}

/* Hidden utility */
.hidden { display: none !important; }

/* Responsive */
@media (max-width: 768px) {
    .terminal {
        max-width: 100%;
        border: none;
    }

    .terminal-body {
        padding: 14px;
        font-size: 0.8rem;
    }

    .terminal-input-line input {
        font-size: 0.8rem;
    }

    .choice-btn {
        padding: 8px 14px;
        font-size: 0.75rem;
    }

    .progress-bar-term {
        width: 140px;
    }
}

@media (max-width: 380px) {
    .terminal-body {
        padding: 10px;
        font-size: 0.75rem;
    }

    .terminal-bar { padding: 8px 12px; }
    .dot { width: 10px; height: 10px; }
}