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

:root {
    --bg-dark: #000000;
    --claude-orange: #ff7843;
    --agent-bubble-bg: rgba(255, 120, 67, 0.05);
}

body, html {
    margin: 0; padding: 0;
    background: #000;
    color: white; font-family: 'Inter', sans-serif;
    height: 100%; width: 100%;
    overflow: hidden; position: fixed;
}

#bg-canvas { position: fixed; top: 0; left: 0; z-index: 1; opacity: 0; pointer-events: none; }

.overlay { 
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    z-index: 10; display: flex; flex-direction: column; 
    box-sizing: border-box; backdrop-filter: blur(40px); 
    background: rgba(0, 0, 0, 0.2); padding: 30px;
}

.center-content { justify-content: space-between; align-items: center; }
.hidden { display: none !important; }

.top-nav { width: 100%; display: flex; justify-content: space-between; font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: var(--claude-orange); }
.hero-container { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; }
#hero-text { font-size: clamp(2rem, 8vw, 6rem); text-align: center; line-height: 1.1; font-weight: 300; }
.accent { color: var(--claude-orange); }
#activate-btn { background: transparent; border: 1px solid var(--claude-orange); color: var(--claude-orange); padding: 16px 32px; margin-top: 40px; font-family: 'JetBrains Mono', monospace; cursor: pointer; }

#system-terminal { width: 100%; max-width: 450px; font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--claude-orange); transition: opacity 0.3s; }
@media (min-width: 1024px) { #system-terminal { position: absolute; top: 30px; right: 30px; } }

.static-status { display: flex; gap: 20px; }
.status-value { color: white; opacity: 0.8; }
.terminal-divider { width: 100%; height: 1px; background: var(--claude-orange); opacity: 0.2; margin: 8px 0; }
#terminal-output { height: 44px; overflow: hidden; }
.log-line { height: 22px; line-height: 22px; white-space: nowrap; }

.console-box {
    flex: 1; overflow-y: auto; display: flex; flex-direction: column;
    width: 100%; max-width: 900px; margin: 0 auto; 
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
#chat-messages { display: flex; flex-direction: column; gap: 15px; width: 100%; padding: 20px 0; }

.message-row { display: flex; gap: 12px; align-items: flex-start; max-width: 85%; }
.user-row { align-self: flex-end; }
.avatar { width: 28px; height: 28px; flex-shrink: 0; border: 1px solid var(--claude-orange); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: 4px; }
.avatar::after { content: ''; width: 6px; height: 6px; background: var(--claude-orange); border-radius: 50%; }

.bubble { padding: 12px 18px; line-height: 1.4; font-size: 0.95rem; }
.agent-bubble { background: var(--agent-bubble-bg); border-radius: 4px 18px 18px 18px; border: 1px solid rgba(255, 120, 67, 0.1); }
.user-bubble { background: rgba(255, 255, 255, 0.05); border-radius: 18px 18px 4px 18px; border: 1px solid rgba(255, 255, 255, 0.1); }

.input-container { 
    width: 100%; display: flex; justify-content: center; 
    padding: 15px 0; background: transparent; 
    position: relative; z-index: 100;
}
.input-wrapper { width: 100%; max-width: 900px; }
#chat-form { display: flex; align-items: center; width: 100%; }
#main-ai-input { flex: 1; background: transparent; border: none; color: white; font-size: 1.1rem; outline: none; padding-bottom: 8px; font-family: 'JetBrains Mono', monospace; }

#send-btn {
    background: transparent; border: none; color: var(--claude-orange); 
    padding: 0 0 8px 15px; cursor: pointer; opacity: 0.8; transition: transform 0.2s;
}
#send-btn:active { transform: scale(0.9); }

.underline { height: 1px; background: var(--claude-orange); opacity: 0.4; }

@media (max-width: 600px) {
    .overlay { padding: 15px; }
    .message-row { max-width: 95%; }
}