#terminal-panel {
    flex: 2;
    display: flex;
    flex-direction: column;
    background: var(--terminal-bg);
    padding: 10px;
    overflow: hidden;
}

#terminal-output {
    flex: 1;
    overflow-y: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    line-height: 1.4;
    padding-bottom: 10px;
}

#terminal-output::-webkit-scrollbar {
    width: 8px;
}

#terminal-output::-webkit-scrollbar-track {
    background: var(--bg-color);
}

#terminal-output::-webkit-scrollbar-thumb {
    background: var(--terminal-dim);
    border-radius: 4px;
}

#terminal-output::-webkit-scrollbar-thumb:hover {
    background: var(--terminal-fg);
}

.output-line {
    margin: 2px 0;
}

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

.output-line.system {
    color: var(--terminal-system);
}

.output-line.command {
    color: var(--terminal-fg);
    opacity: 0.8;
}

#terminal-input-line {
    display: flex;
    align-items: center;
    padding-top: 5px;
    border-top: 1px solid var(--terminal-dim);
}

#prompt {
    color: var(--terminal-fg);
    margin-right: 5px;
    white-space: nowrap;
}

#command-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--terminal-fg);
    font-family: var(--font-mono);
    font-size: 14px;
    outline: none;
    caret-color: var(--terminal-fg);
}

/* Chat Panel */
#chat-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg-color);
    border-left: 1px solid var(--terminal-dim);
    max-width: 350px;
}

#chat-header {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid var(--terminal-dim);
    color: var(--terminal-dim);
    font-size: 12px;
}

#chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    font-size: 13px;
}

#chat-messages::-webkit-scrollbar {
    width: 6px;
}

#chat-messages::-webkit-scrollbar-track {
    background: var(--bg-color);
}

#chat-messages::-webkit-scrollbar-thumb {
    background: var(--terminal-dim);
    border-radius: 3px;
}

.chat-message {
    margin-bottom: 8px;
    line-height: 1.3;
}

.chat-message .sender {
    color: var(--terminal-chat);
    font-weight: bold;
}

.chat-message .content {
    color: var(--terminal-fg);
    opacity: 0.9;
}

.chat-message.system {
    color: var(--terminal-system);
    font-style: italic;
    opacity: 0.8;
}

.chat-message.join {
    color: var(--terminal-fg);
}

.chat-message.leave {
    color: var(--terminal-dim);
}

/* Key Found Banner */
.key-banner {
    background: var(--bg-color);
    border: 2px solid var(--terminal-system);
    padding: 15px;
    margin: 10px 0;
    text-align: center;
}

.key-banner .title {
    color: var(--terminal-system);
    font-size: 16px;
    margin-bottom: 10px;
}

.key-banner .key-name {
    color: var(--terminal-fg);
    font-size: 14px;
    margin-bottom: 5px;
}

.key-banner .key-phrase {
    color: var(--terminal-error);
    font-family: var(--font-mono);
}

.key-banner .progress {
    margin-top: 10px;
    color: var(--terminal-dim);
}

/* ANSI Color Classes */
.ansi-bold {
    font-weight: bold;
}

.ansi-gray {
    color: #808080;
}

.ansi-red {
    color: #ff5555;
    font-weight: bold;
}

.ansi-green {
    color: #50fa7b;
    font-weight: bold;
}

.ansi-blue {
    color: #8be9fd;
    font-weight: bold;
}

.ansi-yellow {
    color: #f1fa8c;
    font-weight: bold;
}

.ansi-magenta {
    color: #ff79c6;
    font-weight: bold;
}

.ansi-cyan {
    color: #8be9fd;
    font-weight: bold;
}