body {
    overflow: hidden;
    background: #050505;
    font-family: 'Fira Code', 'JetBrains Mono', 'Consolas', 'Menlo', 'Source Code Pro', monospace, 'Segoe UI', Arial, sans-serif;
    margin: 0;
    background-image: url('../background.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}

#login-modal {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.90); 
    z-index: 9999;
}
.login-modal-box {
    background: rgba(0, 0, 0, 0.4); 
    border-radius: 12px;
    padding: 30px 24px;
    min-width: 320px;
    box-shadow: 0 2px 18px #000;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.login-title {
    margin-bottom: 18px;
    color: rgb(0, 255, 0); 
    text-align: center;
    font-family: 'Fira Mono', monospace;
    font-size: 2em;
}
.login-input {
    box-sizing: border-box; 
    width: 100%;
    margin-bottom: 14px;
    padding: 10px;
    border-radius: 4px;
    background: #050505;
    color: #00ff00;
    border: 1px solid #00ff00; 
    font-size: 1.1em;
}

.login-btn {
    box-sizing: border-box; 
    width: 100%;
    padding: 12px;
    border-radius: 4px;
    background: #00ff00; 
    color: #111; 
    font-size: 1.08em;
    border: none;
    cursor: pointer;
    margin-top: 5px;
}
.login-btn:hover { 
    background: #17fd57; 
}
.login-err {
    color: #f66;
    text-align: center;
    margin-top: 12px;
    font-size: 1em;
}


#profile-menu {
    position: fixed;
    top: 18px;
    right: 22px;
    z-index: 2500;
}
.profile-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 6px rgba(0,0,0,0.22);
}
.profile-dropdown {
    display: none;
    background: #1E1E1E;
    color: #fff;
    position: absolute;
    right: 0;
    top: 45px;
    border-radius: 12px;
    padding: 20px;
    min-width: 220px;
    box-shadow: 0 2px 18px #000;
}
.profile-name {
    font-weight: bold;
    margin-bottom: 3px;
}
.profile-nick {
    font-size: 12px;
    opacity: 0.7;
    margin-bottom: 10px;
}
.profile-logout {
    width: 100%;
    padding: 8px;
    border-radius: 4px;
    background: #222;
    color: #fff;
    margin-top: 10px;
    border: none;
}

canvas {
    display: block;
    position: absolute;
    top: 0; left: 0;
    z-index: 1;
}
#loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #00FF00;
    font-size: 18px;
    z-index: 100;
}
.logo-container {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10;
}
.logo {
    width: 100px;
    height: auto;
}
@media (max-width: 768px) {
    .logo {
        width: 40px;
    }
}

/* ==== Terminal sci-fi prompt/chat: */
.tavy-chat-terminal-unique {
    position: absolute;
    left: 50%;
    bottom: 3vh;
    transform: translateX(-50%);
    width: 92vw;
    max-width: 1100px;
    z-index: 31;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tavy-chat {
    width: 100%;
    min-height: 180px;
    max-height: 400px;
    overflow-y: auto;
    background: rgba(18,22,32,0.87);
    border-radius: 14px;
    margin-bottom: 14px;
    font-size: 15px;
    font-family: 'Fira Code', 'JetBrains Mono', 'Consolas', 'Menlo', 'Source Code Pro', monospace;
    font-weight: 400;
    color: #d4d4d4;
    padding: 23px 36px 12px 36px;
    box-shadow: 0 2px 15px #0f1b2b6c;
    backdrop-filter: blur(3px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.tavy-chat .msg, .tavy-chat .prompt-line {
    margin-bottom: 4px;
    word-break: break-word;
    font-size: 1em;
    font-family: inherit;
    font-weight: 400;
    align-items: center;
    display: flex;
}

.tavy-chat .who, .tavy-chat .prompt-who {
    color: #4ec9b0; /* VSCode/TypeScript blue */
    font-weight: 500;
    padding-right: 2px;
    font-family: inherit;
}

.tavy-chat .term-arrow, .tavy-chat .prompt-arrow, .blinking-cursor {
    color: #43a047; /* Verde tech mais suave */
    font-weight: 400;
    padding-right: 5px;
    font-family: inherit;
}

.tavy-chat .content, .tavy-chat .prompt-content {
    color: #d4d4d4;
    font-weight: 400;
    font-family: inherit;
    font-size: 1em;
}

.tavy-chat .prompt-content {
    border: none;
    outline: none;
    background: none;
    min-width: 15px;
    padding-left: 3px;
    flex: 1;
}

.tavy-chat .blinking-cursor {
    margin-left: 1px;
    animation: blink 0.95s step-start infinite;
}
@keyframes blink {
    0%,100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Switch na linha do prompt! */
.prompt-line {
    display: flex;
    align-items: center;
    gap: 0.75em;
    min-height: 2.1em;
}
.prompt-switch-wrap {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.32em;
}
.switch-label, .switch-lbl {
    color: #00ff00 !important;
    font-weight: 500;
    font-family: inherit;
}
.sci-fi-switch .slider, .mic-btn {
    background: #273e24;
}
.sci-fi-switch .slider:before { background: #00ff00; box-shadow: 0 0 7px #00ff00c0; }
.sci-fi-switch input[type="checkbox"]:checked + .slider { background: #00ff00 !important; }
.mic-btn {
    margin-left: 10px;
    background: #00ff00;
    color: #111;
    border: none;
    border-radius: 5px;
    padding: 2px 12px;
    font-size: 1.12em;
    box-shadow: 0 0 7px #00ff00c0;
    transition: background .13s;
    cursor: pointer;
}
.mic-btn:active, .mic-btn:hover { background: #17fd57; }

@media (max-width:900px){
    .tavy-chat-terminal-unique { width: 99vw; max-width: 100vw; }
    .tavy-chat { padding: 14px 3vw 7px 3vw;}
}
@media (max-width:600px){
    .tavy-chat { font-size: 1em; max-height: 300px; }
    .tavy-chat .who, .tavy-chat .prompt-who { font-size: 0.9em; }
    .tavy-chat .term-arrow, .tavy-chat .prompt-arrow { font-size: 0.9em; padding-right: 3px; }
    .tavy-chat .content, .tavy-chat .prompt-content { font-size: 0.9em; }
    .prompt-switch-wrap { gap: 0.2em; }
    .sci-fi-switch { width: 36px; height: 18px; }
    .sci-fi-switch .slider:before { width: 14px; height: 14px; }
    .switch-label, .switch-lbl { font-size: 0.85em; }
    .mic-btn { font-size: 1em; padding: 2px 8px; }
}
.btn-saiba-mais {
    display: inline-block;
    margin-left: 8px;
    color: #00ffd5;
    padding: 2px 8px;
    border-radius: 4px;
    background: #222933;
    font-weight: bold;
    text-decoration: none;
    transition: background 0.2s;
}
.btn-saiba-mais:hover {
    background: #00ffd5;
    color: #15202b;
}
.btn-saiba-mais:active {
    background: #00bfa1;
    color: #15202b;
}