/*
    Convite para o terminal. Carrega nos DOIS temas, então tem namespace e variáveis próprias:
    o Concept não conhece --ql-*, e o Quiet Luxury é dono das dele.

    Paleta da marca (PDF da identidade visual): #11182A escuro, #0A84C7 acento, #23304C linha.
    Nasce escuro nos dois temas de propósito — é um convite para um console, e a peça já sugere
    o destino antes de o visitante clicar.
*/

.cvt {
    --cvt-fundo: #11182A;
    --cvt-linha: #23304C;
    --cvt-texto: #F1F5F9;
    --cvt-suave: #A6B0C3;
    --cvt-acento: #0A84C7;

    position: fixed;
    z-index: 1080;              /* acima da navbar do Bootstrap (1030) */
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.5;
    color: var(--cvt-texto);
    background: var(--cvt-fundo);
    border: 1px solid var(--cvt-linha);
    border-radius: 12px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .35);
}

/* ------------------------------------------------------------------ Etapa 1 */

.cvt--convite {
    right: clamp(1rem, 4vw, 2rem);
    bottom: clamp(1rem, 4vw, 2rem);
    max-width: min(22rem, calc(100vw - 2rem));
    padding: 1rem 1.1rem;
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    animation: cvt-entra .32s ease-out both;
}

.cvt__cursor {
    flex: 0 0 auto;
    font-weight: 700;
    color: var(--cvt-acento);
    line-height: 1.4;
}

.cvt__corpo { flex: 1 1 auto; min-width: 0; }
.cvt__texto { margin: 0 0 .35rem; }

.cvt__acao {
    color: var(--cvt-acento);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

.cvt__acao:hover { color: #4FB3E8; }

.cvt__fechar {
    flex: 0 0 auto;
    width: 24px; height: 24px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 6px;
    color: var(--cvt-suave);
    font: inherit;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.cvt__fechar:hover { color: var(--cvt-texto); background: rgba(255, 255, 255, .06); }

/* ------------------------------------------------------------------ Etapa 2 */
/* Ancorada ao ícone da barra: o JS mede o botão e posiciona; aqui só o desenho. */

.cvt--seta {
    max-width: min(20rem, calc(100vw - 1.5rem));
    padding: .7rem .9rem;
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    animation: cvt-entra .3s ease-out both;
}

/* Bico apontando para cima, na direção do ícone. O JS ajusta o --cvt-bico horizontal. */
.cvt--seta::before {
    content: "";
    position: absolute;
    top: -7px;
    left: var(--cvt-bico, 50%);
    transform: translateX(-50%) rotate(45deg);
    width: 12px; height: 12px;
    background: var(--cvt-fundo);
    border-left: 1px solid var(--cvt-linha);
    border-top: 1px solid var(--cvt-linha);
}

/* Sem âncora visível (menu recolhido no celular) o JS tira o bico e ancora no canto. */
.cvt--seta.cvt--sem-bico::before { display: none; }

.cvt__seta-texto { margin: 0; color: var(--cvt-suave); }

@keyframes cvt-entra {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.cvt--saindo { opacity: 0; transition: opacity .18s ease; }

@media (prefers-reduced-motion: reduce) {
    .cvt { animation: none !important; }
    .cvt--saindo { transition: none; }
}