/* ==========================================================================
   fix-mcp.css — #mcp: a janela do próprio Claude, conectada à Deu ROI.
   30/10: tela genérica não dizia o que é. Agora tem o logo, a skill digitada,
   as ferramentas da Deu ROI em uso e a resposta com a cara do Claude.
   Tudo escopado em #mcp. Carregado por último.
   ========================================================================== */

/* ---------- luz atrás do fragmento: o vidro só aparece se houver o que desfocar ---------- */
#mcp > .wrap { position: relative; z-index: 1; }
#mcp::before {
    content: ''; position: absolute; z-index: 0; pointer-events: none;
    left: 0; right: 0; bottom: 4%; height: 72%;
    background:
        radial-gradient(min(560px, 60%) 38% at 50% 34%, rgba(60, 230, 160, .10), rgba(60, 230, 160, 0) 100%),
        radial-gradient(30% 26% at 78% 70%, rgba(47, 214, 147, .06), rgba(47, 214, 147, 0) 100%);
}


#mcp .feat { justify-items: stretch; }
#mcp .feat-copy { max-width: 520px; text-align: left; }
#mcp .feat-note { text-align: left; }
#mcp .feat-copy .ticks { grid-template-columns: minmax(0, 1fr); justify-content: start; gap: 10px; }

#mcp .mcp-marcas { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; font-size: 15px; color: var(--text); }
#mcp .mcp-marcas b { font-weight: 600; }
#mcp .mcp-e { color: var(--text-3); }
#mcp .mcp-logo { display: block; width: 26px; height: 26px; }
#mcp .mcp-logo svg, #mcp .cld-logo svg { display: block; width: 100%; height: 100%; }

/* a janela: tons e tipografia do app do Claude, não os do painel */
#mcp .cld {
    --cld-bg: #262624; --cld-2: #1f1e1d; --cld-3: #30302e;
    --cld-tx: #f5f4ef; --cld-tx2: #c2c0b6; --cld-tx3: #8f8d84;
    --cld-linha: rgba(222, 220, 209, .12);
    overflow: hidden; border-radius: 16px; background: var(--cld-bg);
    box-shadow: 0 0 0 1px var(--cld-linha), 0 40px 90px -50px rgba(0, 0, 0, .9);
    color: var(--cld-tx); text-align: left;
}
#mcp .cld-bar {
    display: flex; align-items: center; gap: 9px; padding: 12px 16px;
    border-bottom: 1px solid var(--cld-linha); font-size: 13px;
}
#mcp .cld-bar b { font-weight: 500; }
#mcp .cld-bar em {
    display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
    font-style: normal; font-size: 11.5px; color: var(--cld-tx2);
}
#mcp .cld-bar em i { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
#mcp .cld-logo { display: block; flex: none; width: 18px; height: 18px; }

#mcp .cld-corpo { display: grid; gap: 16px; padding: 18px 18px 16px; }
#mcp .cld code { font-family: var(--mono); font-size: .9em; color: #e6a78f; }
#mcp .cld-eu {
    justify-self: end; max-width: 88%; margin: 0; padding: 10px 14px; border-radius: 14px;
    background: var(--cld-2); font-size: 14px; line-height: 1.45;
}
#mcp .cld-tools {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 5px 11px 5px 8px;
    border-radius: 9px; background: var(--cld-3); font-size: 12px; color: var(--cld-tx2);
}
#mcp .cld-tools .cld-logo { width: 14px; height: 14px; }
#mcp .cld-resp p {
    margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: 15.5px; line-height: 1.55; color: var(--cld-tx);
}
#mcp .cld-resp p + p { margin-top: 9px; }
#mcp .cld-resp b { font-weight: 700; }

#mcp .cld-pe { position: relative; }
#mcp .cld-skills {
    display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 9px; padding: 0; list-style: none;
}
#mcp .cld-skills li { padding: 4px 10px; border-radius: 8px; background: var(--cld-3); font-size: 12px; }
#mcp .cld-caixa {
    display: flex; align-items: center; justify-content: space-between; padding: 11px 11px 11px 15px;
    border-radius: 14px; background: var(--cld-3); box-shadow: 0 0 0 1px var(--cld-linha);
    font-size: 13.5px; color: var(--cld-tx3);
}
#mcp .cld-caixa i {
    position: relative; width: 28px; height: 28px; border-radius: 8px; background: #D97757;
}
#mcp .cld-caixa i::after {
    content: ''; position: absolute; left: 9px; top: 11px; width: 8px; height: 8px;
    border-left: 2px solid #fff; border-top: 2px solid #fff; transform: rotate(45deg);
}

/* a conversa acontece uma vez quando a dobra aparece */
.js #mcp .cld [data-mcp] { transition: opacity .4s var(--ease), transform .4s var(--ease); }
.js #mcp .cld [data-mcp]:not(.in) { opacity: 0; transform: translateY(8px); }

@media (min-width: 900px) {
    #mcp .feat { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); justify-content: space-between; }
}
@media (max-width: 640px) {
    #mcp .cld-corpo { padding: 14px 13px 13px; }
    #mcp .cld-bar em { font-size: 0; gap: 0; }
}