/* Copiloto: coluna lateral da casca (js/nucleo/copiloto.js). Completa a estrutura de casca.css.
   Cores só por tokens --d2-*; movimento só por transform e opacity, até 400 ms na entrada. */

/* Coluna própria da casca (casca.css): a coluna nasce de uma vez e o painel entra por cima
   dela deslizando; na saída, o painel sai primeiro e só depois a coluna some. */
.copiloto.copi { background: var(--d2-bg-elevated); }
.copiloto.copi.is-entrando { animation: copi-entrar 340ms var(--d2-curva-entrada) both; }
.copiloto.copi.is-saindo { animation: copi-sair 200ms var(--d2-curva-saida) both; pointer-events: none; }
.copiloto.copi.is-expandindo { animation: copi-expandir 300ms var(--d2-curva-entrada) both; }
html.copiloto-aberto .copi > .copi-cab { animation: copi-chegar 300ms var(--d2-curva-entrada) both 60ms; }
html.copiloto-aberto .copi > .copi-abas, html.copiloto-aberto .copi > .copi-corpo { animation: copi-chegar 300ms var(--d2-curva-entrada) both 100ms; }
html.copiloto-aberto .copi > .copi-entrada { animation: copi-chegar 280ms var(--d2-curva-entrada) both 120ms; }
.copi.sem-animacao, .copi.sem-animacao > *, .copi.is-redimensionando { transition: none !important; animation: none !important; }
.copi.is-redimensionando { user-select: none; }
html.copiloto-redimensionando, html.copiloto-redimensionando * { cursor: col-resize !important; }
html.copiloto-redimensionando .palco { pointer-events: none; }
@keyframes copi-entrar { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes copi-sair { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(40px); } }
@keyframes copi-expandir { from { opacity: .4; transform: translateX(24px); } to { opacity: 1; transform: none; } }
/* Expandido: a conversa fica numa coluna de leitura centrada */
html.copiloto-expandido .copi > .copi-alca { display: none; }
html.copiloto-expandido .copi-conversa, html.copiloto-expandido .copi-entrada > * { width: 100%; max-width: 860px; margin-inline: auto; }
@keyframes copi-chegar { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }

/* Botão do topo: o ícone responde, pulsa enquanto o copiloto trabalha e marca resposta nova */
.casca-copiloto-btn > .d2-icone { transition: transform var(--d2-mov-normal) var(--d2-curva-entrada); }
.casca-copiloto-btn:hover > .d2-icone { transform: rotate(-12deg) scale(1.08); }
.casca-copiloto-btn[aria-expanded="true"] > .d2-icone { transform: scale(1.06); }
.casca-copiloto-btn.is-pensando::after, .casca-copiloto-btn.tem-novidade::after {
    content: ""; position: absolute; left: 9px; right: 9px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--d2-brand);
}
.casca-copiloto-btn.is-pensando::after { animation: d2-pulsar 1.2s ease-in-out infinite; }
.casca-copiloto-btn.tem-novidade::after { left: auto; right: 6px; top: 6px; bottom: auto; width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 2px var(--d2-bg-elevated); }

/* Alça de largura na borda esquerda (dentro da coluna: nada invade o palco) */
.copi-alca { position: absolute; z-index: 2; left: 0; top: 0; bottom: 0; width: 10px; cursor: col-resize; touch-action: none; outline: none; }
.copi-alca::after {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--d2-brand);
    opacity: 0; transition: opacity var(--d2-mov-rapido) var(--d2-curva-saida);
}
.copi-alca:hover::after, .copi-alca:focus-visible::after, .copi.is-redimensionando .copi-alca::after { opacity: 1; }

/* Cabeçalho e abas */
.copi-cab { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 8px 10px 14px; border-bottom: 1px solid var(--d2-border); }
.copi-cab-icone {
    flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--d2-radius-lg);
    background: var(--d2-brand); color: var(--d2-sobre-brand); box-shadow: var(--d2-shadow-sm);
}
.copi-cab-icone > .d2-icone { width: 17px; height: 17px; }
.copi-cab-textos { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.copi-titulo { margin: 0; font-size: var(--d2-fs-md); font-weight: 650; color: var(--d2-text); }
.copi-sub { font-size: var(--d2-fs-xs); color: var(--d2-text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.copi-cab-acoes { flex: none; display: flex; align-items: center; gap: 2px; }
.copi-cab-btn { width: 32px; height: 32px; color: var(--d2-text-muted); }
.copi-cab-btn > .d2-icone { width: 17px; height: 17px; }
.copi-abas {
    flex: none; display: flex; gap: 4px; padding: 6px 8px; overflow-x: auto; scrollbar-width: thin;
    border-bottom: 1px solid var(--d2-border); background: var(--d2-bg-subtle);
}
.copi-aba { flex: none; display: flex; align-items: center; max-width: 190px; border: 1px solid transparent; border-radius: var(--d2-radius-md); }
.copi-aba:hover { background: var(--d2-bg-hover); }
.copi-aba.is-ativa { background: var(--d2-bg-elevated); border-color: var(--d2-border); box-shadow: var(--d2-shadow-sm); }
.copi-aba-btn {
    display: flex; align-items: center; gap: 6px; min-width: 0; padding: 5px 2px 5px 10px; border: 0; background: none;
    color: var(--d2-text-muted); font: inherit; font-size: var(--d2-fs-sm); cursor: pointer;
}
.copi-aba.is-ativa .copi-aba-btn { color: var(--d2-text); font-weight: 600; }
.copi-aba-texto { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.copi-aba-pulso { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--d2-brand); animation: d2-pulsar 1.2s ease-in-out infinite; }
.copi-aba-fechar {
    flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-right: 3px; border: 0; border-radius: var(--d2-radius-sm);
    background: none; color: var(--d2-text-faint); cursor: pointer; opacity: .7;
}
.copi-aba-fechar:hover { opacity: 1; background: var(--d2-bg-hover); color: var(--d2-text); }
.copi-aba-fechar > .d2-icone { width: 12px; height: 12px; }

/* Conversa */
.copi-corpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 14px 18px; background: var(--d2-palco-fundo); }
.copi-conversa, .copi-msgs { display: flex; flex-direction: column; gap: 14px; }
.copi-topo { display: flex; justify-content: center; }
.copi-topo-carregando, .copi-nota { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: var(--d2-fs-xs); color: var(--d2-text-muted); }
.copi-nota > .d2-icone { width: 13px; height: 13px; }
.copi-topo-erro { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--d2-fs-sm); color: var(--d2-erro); }
.copi-topo-erro > .d2-icone { width: 15px; height: 15px; }

/* Mensagens: usuário à direita, assistente à esquerda */
.copi-msg { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.copi-msg.is-usuario { justify-content: flex-end; animation: copi-subir 220ms var(--d2-curva-entrada) both; }
.copi-msg.is-nova, .copi-msg.is-pensando, .copi-msg.is-erro { animation: copi-subir 260ms var(--d2-curva-entrada) both; }
@keyframes copi-subir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.copi-bolha { min-width: 0; font-size: var(--d2-fs-md); line-height: 1.55; color: var(--d2-text); overflow-wrap: anywhere; }
.is-usuario > .copi-bolha {
    max-width: 85%; padding: 9px 13px; border-radius: 14px 14px 4px 14px; white-space: pre-wrap;
    background: var(--d2-brand-fundo); color: var(--d2-text); box-shadow: var(--d2-shadow-sm);
}
.copi-avatar {
    flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin-top: 2px; border-radius: 50%;
    background: var(--d2-brand-fundo); color: var(--d2-brand-texto);
}
.copi-avatar > .d2-icone { width: 15px; height: 15px; }
.copi-msg-corpo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.is-assistente .copi-bolha {
    padding: 10px 13px; border: 1px solid var(--d2-border); border-radius: 4px 14px 14px 14px;
    background: var(--d2-bg-elevated); box-shadow: var(--d2-shadow-sm);
}
.is-assistente > .copi-bolha { flex: 1 1 auto; }
.copi-msg.is-erro .copi-bolha { background: var(--d2-erro-fundo); border-color: var(--d2-erro-cor); }
.copi-msg.is-erro .copi-avatar { background: var(--d2-erro-fundo); color: var(--d2-erro-icone); }
.copi-msg.is-erro p { margin: 0 0 8px; }
.copi-msg-rodape { display: flex; align-items: center; gap: 10px; padding-left: 4px; font-size: var(--d2-fs-xs); color: var(--d2-text-faint); }
.copi-uso { display: inline-flex; align-items: center; gap: 4px; border-radius: var(--d2-radius-sm); cursor: default; }
.copi-uso > .d2-icone { width: 12px; height: 12px; }
.copi-uso:focus-visible { outline: 2px solid var(--d2-foco); outline-offset: 2px; }

/* Markdown seguro */
.copi-md > :first-child { margin-top: 0; }
.copi-md > :last-child { margin-bottom: 0; }
.copi-md p { margin: 0 0 8px; }
.copi-md ul, .copi-md ol { margin: 0 0 8px; padding-left: 20px; }
.copi-md li { margin: 2px 0; }
.copi-md strong { font-weight: 650; }
.copi-md-titulo { font-weight: 650; }
.copi-codigo {
    padding: 1px 5px; border: 1px solid var(--d2-border); border-radius: var(--d2-radius-sm); background: var(--d2-bg-subtle);
    font-family: var(--d2-font-mono); font-size: .9em;
}
.copi-pre {
    margin: 0 0 8px; padding: 8px 10px; overflow-x: auto; border: 1px solid var(--d2-border); border-radius: var(--d2-radius-md);
    background: var(--d2-bg-subtle); font-family: var(--d2-font-mono); font-size: var(--d2-fs-xs); line-height: 1.5; white-space: pre;
}

/* Proposta de ação: só acontece com o clique do usuário */
.copi-proposta {
    display: flex; flex-direction: column; gap: 10px; margin-top: 10px; padding: 12px;
    border: 1px solid var(--d2-border); border-left: 3px solid var(--d2-aviso-cor); border-radius: var(--d2-radius-md); background: var(--d2-bg-subtle);
}
.copi-proposta[data-estado="executada"] { border-left-color: var(--d2-ok-cor); }
.copi-proposta[data-estado="falhou"], .copi-proposta[data-estado="aprovacao_falhou"] { border-left-color: var(--d2-erro-cor); }
.copi-proposta[data-estado="recusada"], .copi-proposta[data-estado="indisponivel"], .copi-proposta[data-estado="aprovacao_recusada"],
.copi-proposta[data-estado="aprovacao_expirada"], .copi-proposta[data-estado="aprovacao_cancelada"] { border-left-color: var(--d2-neutro-cor); }
.copi-proposta-cab { display: flex; align-items: flex-start; gap: 10px; }
.copi-proposta-icone {
    flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--d2-radius-md);
    background: var(--d2-aviso-fundo); color: var(--d2-aviso-icone);
}
.copi-proposta[data-estado="executada"] .copi-proposta-icone { background: var(--d2-ok-fundo); color: var(--d2-ok-icone); }
.copi-proposta[data-estado="recusada"] .copi-proposta-icone, .copi-proposta[data-estado="aprovacao_recusada"] .copi-proposta-icone,
.copi-proposta[data-estado="aprovacao_expirada"] .copi-proposta-icone, .copi-proposta[data-estado="aprovacao_cancelada"] .copi-proposta-icone { background: var(--d2-neutro-fundo); color: var(--d2-neutro-icone); }
.copi-proposta-icone > .d2-icone { width: 15px; height: 15px; }
.copi-proposta-rotulo { display: block; font-size: var(--d2-fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--d2-text-faint); }
.copi-proposta-titulo { display: block; font-size: var(--d2-fs-md); font-weight: 650; color: var(--d2-text); }
.copi-proposta-desc { margin: 0; font-size: var(--d2-fs-sm); color: var(--d2-text-muted); }
.copi-params { display: grid; grid-template-columns: minmax(70px, max-content) minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: var(--d2-fs-sm); }
.copi-params dt { color: var(--d2-text-muted); }
.copi-params dd { margin: 0; font-weight: 550; color: var(--d2-text); overflow-wrap: anywhere; }
.copi-proposta-estado:empty { display: none; }
.copi-proposta-estado { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.copi-proposta-resultado { font-size: var(--d2-fs-sm); color: var(--d2-text); }
.copi-proposta-andamento { font-size: var(--d2-fs-xs); color: var(--d2-text-muted); }
.copi-proposta-acoes:empty { display: none; }
.copi-proposta-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.copi-progresso { position: relative; width: 100%; height: 4px; border-radius: var(--d2-radius-pill); background: var(--d2-bg-ativo); overflow: hidden; }
.copi-progresso-barra { position: absolute; inset: 0; background: var(--d2-brand); transform-origin: left center; animation: d2-indeterminado 1.2s var(--d2-curva-entrada) infinite; }
.copi-abrir-lista { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.copi-abrir { min-height: 30px; font-size: var(--d2-fs-sm); }
.copi-abrir > .d2-icone { width: 14px; height: 14px; }

/* Pensando: pontos que respiram, fase que muda e segundos corridos */
.copi-pensando { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; color: var(--d2-text-muted); font-size: var(--d2-fs-sm); }
.copi-pontos { display: inline-flex; gap: 4px; }
.copi-pontos > i { width: 7px; height: 7px; border-radius: 50%; background: var(--d2-brand); animation: copi-ponto 1.1s ease-in-out infinite; }
.copi-pontos > i:nth-child(2) { animation-delay: .15s; }
.copi-pontos > i:nth-child(3) { animation-delay: .3s; }
@keyframes copi-ponto { 0%, 80%, 100% { opacity: .3; transform: translateY(0) scale(.85); } 40% { opacity: 1; transform: translateY(-3px) scale(1); } }
.copi-pensando-fase { color: var(--d2-text); }
.copi-pensando-tempo { color: var(--d2-text-faint); font-size: var(--d2-fs-xs); }
.copi-pensando-tempo:empty { display: none; }
.copi-pensando-cancelar {
    margin-left: auto; padding: 2px 6px; border: 0; border-radius: var(--d2-radius-sm); background: none;
    color: var(--d2-link); font: inherit; font-size: var(--d2-fs-xs); cursor: pointer;
}
.copi-pensando-cancelar:hover { text-decoration: underline; }
.copi-pensando-cancelar:focus-visible { outline: 2px solid var(--d2-foco); outline-offset: 2px; }
.copi-repetir { margin-top: 2px; }

/* Boas-vindas com sugestões */
.copi-boas { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: auto 0; padding: 18px 6px; text-align: center; animation: copi-subir 320ms var(--d2-curva-entrada) both; }
.copi-boas-icone {
    display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px;
    background: var(--d2-brand-fundo); color: var(--d2-brand-texto); box-shadow: var(--d2-shadow-sm);
}
.copi-boas-icone > .d2-icone { width: 26px; height: 26px; }
.copi-boas-titulo { margin: 6px 0 0; font-size: var(--d2-fs-lg); font-weight: 650; color: var(--d2-text); }
.copi-boas-texto { max-width: 34ch; margin: 0; font-size: var(--d2-fs-sm); color: var(--d2-text-muted); }
.copi-grupo { align-self: stretch; margin: 12px 0 0; font-size: var(--d2-fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--d2-text-faint); text-align: left; }
.copi-sugestoes { display: flex; flex-direction: column; gap: 6px; align-self: stretch; margin: 0; padding: 0; list-style: none; }
.copi-sugestao {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 12px; text-align: left;
    border: 1px solid var(--d2-border); border-radius: var(--d2-radius-md); background: var(--d2-bg-elevated);
    color: var(--d2-text); font: inherit; font-size: var(--d2-fs-sm); cursor: pointer;
    transition: transform var(--d2-mov-rapido) var(--d2-curva-entrada), border-color var(--d2-mov-rapido), background var(--d2-mov-rapido);
}
.copi-sugestao > .d2-icone { flex: none; width: 16px; height: 16px; color: var(--d2-brand-texto); }
.copi-sugestao:hover { border-color: var(--d2-brand); background: var(--d2-bg-hover); transform: translateX(2px); }
.copi-sugestao:focus-visible { outline: 2px solid var(--d2-foco); outline-offset: 2px; }

/* Entrada */
.copi-entrada { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--d2-border); background: var(--d2-bg-elevated); }
.copi-contexto { display: flex; min-width: 0; }
.copi-chip { max-width: 100%; min-width: 0; }
.copi-chip > .d2-icone { flex: none; width: 13px; height: 13px; }
.copi-chip-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.copi-chip.is-desligado { color: var(--d2-text-faint); }
.copi-chip.is-desligado .copi-chip-texto { text-decoration: line-through; }
.copi-chip.is-vazio { color: var(--d2-text-faint); cursor: default; }
.copi-caixa {
    display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 12px;
    border: 1px solid var(--d2-borda-campo); border-radius: var(--d2-radius-lg); background: var(--d2-bg);
    transition: border-color var(--d2-mov-rapido), box-shadow var(--d2-mov-rapido);
}
.copi-caixa:focus-within { border-color: var(--d2-foco); box-shadow: var(--d2-anel-foco); }
.copi-campo {
    flex: 1 1 auto; min-width: 0; max-height: 180px; padding: 6px 0; resize: none; border: 0; outline: 0; background: none;
    color: var(--d2-text); font: inherit; font-size: var(--d2-fs-md); line-height: 1.45;
}
.copi-campo::placeholder { color: var(--d2-text-faint); }
.copi-enviar { flex: none; width: 36px; min-width: 36px; height: 36px; padding: 0; border-radius: var(--d2-radius-md); }
.copi-cancelar { flex: none; height: 36px; }
.copi-dica { margin: 0; font-size: var(--d2-fs-xs); color: var(--d2-text-faint); }

/* No computador, o cabeçalho alinha com a barra do topo ao lado */
@media (min-width: 760px) { .copi-cab { height: var(--casca-topo-altura); padding-block: 0; } }

/* Celular: folha de tela cheia que sobe de baixo */
@media (max-width: 759.98px) {
    .copiloto.copi { width: 100%; }
    .copiloto.copi.is-entrando { animation-name: copi-subir; }
    .copiloto.copi.is-saindo { animation-name: copi-descer; }
    .copi-btn-expandir { display: none; }
    .copi-alca, .copi-dica { display: none; }
    .copi-cab .d2-iconbtn { width: 44px; height: 44px; }
    .copi-campo { font-size: 16px; }
    .copi-enviar, .copi-cancelar { height: 44px; }
    .copi-enviar { width: 44px; min-width: 44px; }
    .is-usuario > .copi-bolha { max-width: 88%; }
}

@media (prefers-reduced-motion: reduce) {
    .copiloto.copi.is-entrando, .copiloto.copi.is-saindo, .copiloto.copi.is-expandindo { animation-duration: 1ms; }
    .copi-msg, .copi-boas, html.copiloto-aberto .copi > * { animation: none !important; }
    .copi-pontos > i { animation: copi-piscar 1.4s ease-in-out infinite; transform: none; }
    .copi-sugestao:hover { transform: none; }
}
@keyframes copi-subir { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes copi-descer { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(24px); } }
@keyframes copi-piscar { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* Copiloto sem IA nesta instalação: aviso neutro no topo, sem sugestões e com o campo desligado. */
.copi-sem-ia { display: flex; align-items: flex-start; gap: 8px; margin: 10px 12px 0; padding: 10px 12px; border: 1px solid var(--d2-border); border-radius: var(--d2-radius-sm); background: var(--d2-bg-subtle); color: var(--d2-text-muted); font-size: var(--d2-fs-sm); }
.copi-sem-ia[hidden] { display: none; }
.copi-sem-ia > .d2-icone { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--d2-info); }
.copi-sem-ia > p { margin: 0; }
.is-sem-ia .copi-boas { display: none; }
.is-sem-ia .copi-campo:disabled { cursor: not-allowed; opacity: .6; }