.cmd-terminal-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    display: none;
    width: 90%; /* Added for responsiveness */
    max-width: 600px; /* Added for responsiveness */
}

.cmd-terminal-container.visible {
    display: block !important;
}

.cmd-terminal {
    width: 100%; /* Changed from fixed 600px for responsiveness */
    background-color: #000;
    border: 1px solid #828282;
    box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #fff;
    font-family: 'Courier New', monospace;
    border-radius: 3px;
}

.cmd-title-bar {
    background: linear-gradient(180deg, #0058ee 0%, #3f97ff 4%, #0075ff 8%, #0175ff 12%, #0074ff 16%, #0074ff 20%, #0074ff 24%, #0075ff 28%, #0075ff 32%, #0075ff 36%, #0074ff 40%, #0075ff 44%, #0074ff 48%, #0075ff 52%, #0075ff 56%, #0075ff 60%, #0074ff 64%, #0074ff 68%, #0075ff 72%, #0075ff 76%, #0075ff 80%, #0074ff 84%, #0074ff 88%, #0075ff 92%, #0074ff 96%, #0074ff 100%);
    padding: 3px 5px 3px 3px;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 28px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.cmd-title-bar-text {
    color: #fff;
    font-family: "Trebuchet MS", Tahoma, Arial;
    font-size: 13px;
    font-weight: bold;
    text-shadow: 1px 1px #0053e9;
    margin-left: 3px;
}

.cmd-close-button {
    background: linear-gradient(180deg, #ff8d6a 0%, #ff6347 100%);
    border: 1px solid #fff;
    color: white;
    height: 22px;
    line-height: 20px;
    text-align: center;
    font-family: "Trebuchet MS";
    font-size: 14px;
    margin-left: 2px;
    cursor: pointer;
    min-width: 40px!important;
}

.cmd-close-button:hover {
    background: linear-gradient(180deg, #ff4433 0%, #ff0000 100%);
}

.cmd-close-button:active {
    box-shadow: none;
    transform: translateY(1px);
}

.cmd-content {
    padding: 10px;
    min-height: 300px;
    max-height: 500px;
    overflow-y: auto;
    color: #0f0;
    font-size: 14px;
    line-height: 1.4;
    border: 1px solid #404040;
    margin: 1px;
    background-color: #000;
}

.cmd-input-line {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.cmd-prompt {
    color: #0f0;
    margin-right: 8px;
}

.cmd-input {
    background: transparent !important; /* Added !important to ensure no white background while typing */
    border: 0px!important;
    color: #0f0;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    flex-grow: 1;
    outline: none;
    width: calc(100% - 20px);
}

.cmd-message {
    margin-bottom: 8px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.cmd-system-message {
    color: #ffff00;
}

.cmd-user-message {
    color: #fff;
}

.cmd-ai-message {
    color: #0f0;
}

.cmd-content::-webkit-scrollbar {
    width: 16px;
}

.cmd-content::-webkit-scrollbar-track {
    background: #000;
    border: 1px solid #404040;
}

.cmd-content::-webkit-scrollbar-thumb {
    background: #404040;
    border: 1px solid #666;
}

.cmd-content::-webkit-scrollbar-thumb:hover {
    background: #4a4a4a;
}

.cmd-content::-webkit-scrollbar-button {
    display: none;
}

.cmd-terminal::after {
    content: '';
    position: absolute;
    top: 28px;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    box-shadow: inset 0 0 50px rgba(0,0,0,0.3);
}

.cmd-title-bar::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjU1MjBDQjE5NTdBNzExRTNCODQ5OTlBNjVGMTZDMjQ0IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjU1MjBDQjFBNTdBNzExRTNCODQ5OTlBNjVGMTZDMjQ0Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTUyMENCMTc1N0E3MTFFM0I4NDk5OUE2NUYxNkMyNDQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTUyMENCMTg1N0E3MTFFM0I4NDk5OUE2NUYxNkMyNDQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4q7k1qAAAA3klEQVR42qSTwQ3CMAxFv1EHYBCQmIR2hG4CI5AROgJMAiN0A7IBbAAb0A1gA/qNfqQoItAWS1al2P68xI4dy7KyEIIZm2emaQ4hxI7vMAwGJ9u2EwA9/jT6vj865xY0mK7rLIR4vQ3GmCmldGDQOefatiV0qBnnnGXbllwBFhmlFEspL2LC4YxmXdf3tm3PaKeUusQY97jb4Pwd0lp/mO87jDiOY631E+8aEo+1bivx6wZ4Iqe+ZFmp+/5Lvt/LOYf7PyDRWUgpZ5JYKbXmRsu9yP9kfp6aEb5u4CLAAIUFRqLr2cUaAAAAAElFTkSuQmCC');
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 4px;
}

.cmd-title-bar {
    cursor: move;       /* Indicate the draggable area */
}

.cmd-copy-button {
    opacity: 0.7;
    transition: opacity 0.2s;
}

.cmd-copy-button:hover {
    opacity: 1;
}

.cmd-message {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}