:root {
    --bg: #111;
    --chat-bg: #1a1a1a;
    --text: #eee;
    --accent: #00ff88;
    --user-chat-bg: #171717;
}

@font-face {
    font-family: monospace;
    src: url('./SpaceMono-Regular.ttf');
}

body { background: var(--bg); color: var(--text); font-family: monospace; margin: 0; display: flex; flex-direction: column; height: 100vh;}
main {
    overflow-x: hidden;
}

/* Header & Settings */
header { padding: 1rem; border-bottom: 1px solid #333; display: flex; justify-content: space-between; align-items: center; }
.title { font-weight: bold; font-size: 1.2rem; display: flex; align-items: center; gap:7px; }
.title span { font-size:0.8rem; opacity:0.7; }
.key-input { background: #222; border: 1px solid #444; color: white; padding: 5px 10px; border-radius: 5px; width: 200px; }

/* Chat Area */
#chat-window { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 2rem; align-items: center;}
.message {padding: 1em 2em;}
.message .text { padding: 2em; border-radius: 10px; line-height: 1.5; white-space: pre-wrap; max-width: 90vw; overflow-x: auto; scrollbar-color: #555 #333; scrollbar-width: thin;}
.message .controls { display: flex; gap: 1em; padding-top: 1em; font-size: 0.75em; justify-content: center;}
.message .controls div { opacity: 50%; cursor: pointer; }
.message .controls div:hover{ opacity: 100%; }
.message .controls div::before { content: "["; padding-right: 0.4em;}
.message .controls div::after { content: "]"; padding-left: 0.4em;}
.user .text { background: var(--user-chat-bg); border: 1px solid #333; }
.ai { }

/* Input Area */
.input-area { padding: 1rem; display: flex; gap: 1em; }
textarea[type="text"] { flex: 1; padding: 1em; background: #222; border: none; color: white; border-radius: 5px; box-sizing: border-box; line-height: 1.7em;}
button { background: var(--accent); color: black; border: none; padding: 10px 20px; font-weight: bold; cursor: pointer; border-radius: 5px; }
button:hover { opacity: 0.9; }

/* Loading Indicator */
.typing::after { content: '...'; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* HighlightJS */
code.hljs {
    background: transparent;
    border: 1px dotted #333;
    border-radius: 1em;
}