/* VS Code Portfolio — custom styles */

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #1f2937; }
::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #6b7280; }

/* Explorer badge ping */
@keyframes explorerPing {
    0%        { transform: scale(1);   opacity: 1; }
    70%, 100% { transform: scale(2.2); opacity: 0; }
}
.explorer-badge::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #3b82f6;
    animation: explorerPing 1.4s ease-out infinite;
}

/* Matrix exit button hover */
#matrixExit:hover { background: rgba(0,255,0,0.1) !important; }

/* Blinking editor cursor */
.editor-cursor {
    display: inline-block;
    width: 2px;
    height: 1.1em;
    background: #e5e7eb;
    vertical-align: text-bottom;
    margin-left: 2px;
    animation: editorBlink 1s step-end infinite;
}
@keyframes editorBlink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* ── Tamanhos base de fonte ──────────────────────────── */
/* Editor: 12px padrão (override Tailwind text-sm=14px) */
#codeEditor { font-size: 12px; }

/* ── Responsivo ─────────────────────────────────────── */

/* Celular e tablet (≤1023px): fontes reduzidas */
@media (max-width: 1023px) {
    /* Menu, explorer, abas: 10px */
    .h-9.bg-gray-800 { font-size: 10px !important; }
    #explorerPanel { font-size: 10px !important; }
    #tabBar { font-size: 10px !important; }
    #tabBar > div { padding-left: 8px !important; padding-right: 8px !important; }

    /* Editor e números de linha: 9px */
    #codeEditor { font-size: 9px !important; }
    .line-gutter { padding-left: 4px !important; padding-right: 6px !important; }

    /* Hobby claude */
    #hobbyMessages div { font-size: 10px !important; line-height: 1.5 !important; }
    #hobbyInput { font-size: 10px !important; }
    #hobbyMessages img { width: 20px !important; height: 20px !important; }
}

@media (max-width: 767px) {
    /* Explorer como drawer sobreposto */
    #explorerPanel {
        position: fixed !important;
        top: 2rem;
        left: 3rem;
        bottom: 1.5rem;
        width: calc(100vw - 3rem);
        z-index: 40;
        box-shadow: 4px 0 24px rgba(0,0,0,0.8);
        overflow-y: auto;
    }

    /* Status bar: ocultar itens secundários */
    .status-secondary { display: none !important; }

    /* Notificações: largura reduzida */
    #notifContainer > div { width: 220px !important; }

    /* Editor: quebra de linha e padding reduzido no mobile */
    #codeEditor div { white-space: normal !important; }
    #codeEditor > div > div:last-child { padding-left: 8px !important; padding-right: 8px !important; }

    /* BSOD: fonte menor no mobile */
    #bsodOverlay { font-size: 11px !important; line-height: 1.5 !important; }
    #bsodOverlay > div { padding: 12px !important; }

    /* Doom: label de controles menor */
    #doomLabel { font-size: 10px !important; letter-spacing: 0 !important; }
}

/* Chat bubble fade-in */
@keyframes chatFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Typing dots */
@keyframes typingDot {
    0%, 60%, 100% { opacity: 0.2; transform: translateY(0); }
    30%            { opacity: 1;   transform: translateY(-4px); }
}