body {
    font-family: 'Inter', sans-serif;
}
.step-item.completed .step-circle {
    background-color: #22c55e; /* green-500 */
    color: #111827; /* gray-900 */
}
.step-item.active .step-circle {
    background-color: #4ade80; /* green-400 */
    color: #111827; /* gray-900 */
}
.step-item .step-circle {
    background-color: #374151; /* gray-700 */
    color: #9ca3af; /* gray-400 */
}
.command-box {
    background-color: #000;
    color: #d1d5db; /* gray-300 */
    font-family: 'monospace';
    white-space: pre-wrap;
    word-wrap: break-word;
    border: 1px solid #047857; /* green-800 */
}
.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
.btn-disabled {
    background-color: #4b5563 !important; /* gray-600 */
    cursor: not-allowed;
    transform: none !important;
}
/* AI Chat Styles */
.chat-message {
    max-width: 90%;
    word-wrap: break-word;
}
.user-message {
    background-color: #3b82f6; /* blue-500 */
    color: white;
    align-self: flex-end;
}
.ai-message {
    background-color: #374151; /* gray-700 */
    color: #d1d5db; /* gray-300 */
    align-self: flex-start;
}
.ai-message pre {
    background-color: #111827; /* gray-900 */
    color: #e5e7eb; /* gray-200 */
    padding: 0.75rem;
    border-radius: 0.5rem;
    margin: 0.5rem 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: 'monospace';
}
.typing-indicator span {
    height: 8px;
    width: 8px;
    background-color: #9ca3af;
    border-radius: 50%;
    display: inline-block;
    animation: bounce 1.4s infinite ease-in-out both;
}
.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
@keyframes bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1.0); }
}
/* Background Canvas */
#background-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.history-item-clickable {
    cursor: pointer;
}