/* ============================================================================ iBooster CRM - Bolt: mensagens e caixa de escrita do chat, iguais no painel lateral (.copiloto) e nos paineis do espaco de trabalho (.bw-painel). Desenho: superficie neutra, o vermelho do Bolt so como destaque (--accent: marca, foco, cursor). Pergunta num balao cinza a direita; resposta sem balao, com a marca pequena do lado. Ferramentas da mensagem sao icones fantasma que aparecem no hover (e sempre na ultima resposta e em tela de toque). A caixa de escrita e um cartao flutuante de raio 20. Tudo por token (tokens.css). ========================================================================== */ /* popover de acoes solto no (bolt/bolt-menu.js): posicao fixa calculada do botao */ .bc-menu{position:fixed;z-index:var(--z-modal)} .bc-menu button:focus-visible,.bc-pop button:focus-visible,.cop-menu button:focus-visible{outline:none;background:var(--hover)} .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ---------------- mensagens ---------------- */ .cop-msg{font-size:var(--fs-md);line-height:var(--lh-read);max-width:100%;overflow-wrap:anywhere;color:var(--ink);min-width:0;flex:none} .cop-msg b{font-weight:var(--fw-semibold)} .cop-msg.eu{align-self:flex-end;display:flex;flex-direction:column;align-items:flex-end;max-width:85%;background:none;border:0;padding:0;box-shadow:none} .cop-eu-texto{background:var(--surface-3);color:var(--ink);padding:9px 14px;border-radius:18px 18px 6px 18px;white-space:pre-wrap;font-weight:var(--fw-regular)} .cop-msg.ele{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start;width:100%;padding:0;background:none} .cop-avatar{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--bolt-tile);margin-top:1px} .cop-avatar .ic{width:13px;height:13px} .cop-conteudo{min-width:0;max-width:100%} .cop-msg.ele.cop-msg-caixa .cop-avatar{box-shadow:none} .cop-msg.ele.erro .cop-texto{background:var(--danger-soft);color:var(--ink);padding:10px 12px;border-radius:var(--r-sm)} .cop-destaque .cop-card{animation:brilho-novo 2.4s var(--ease) both;box-shadow:0 0 0 2px var(--accent),var(--e2)} /* texto formatado (copiloto-formatar.js) */ .cop-linha{display:block;margin:0 0 2px} .cop-texto br{content:"";display:block;height:8px} .cop-item{display:block;padding-left:18px;position:relative;margin:4px 0} .cop-item::before{content:'';position:absolute;left:5px;top:.7em;width:5px;height:5px;border-radius:50%;background:var(--ink-4)} .cop-item.num{padding-left:24px} .cop-item.num::before{display:none} .cop-item.num i{position:absolute;left:0;font-style:normal;font-weight:var(--fw-medium);color:var(--ink-3);font-variant-numeric:tabular-nums} .cop-h{display:block;font-weight:var(--fw-semibold);font-size:15px;line-height:var(--lh-ui);margin:14px 0 4px;color:var(--ink)} .cop-texto > .cop-h:first-child{margin-top:0} .cop-hr{border:0;border-top:1px solid var(--line);margin:12px 0} .cop-cit{display:block;padding:6px 12px;margin:6px 0;border-radius:var(--r-sm);background:var(--surface-2);color:var(--ink-2)} .cop-msg a{color:var(--brand);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} .cop-msg a:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .cop-msg code{font-family:var(--font-mono);font-size:.88em;background:var(--surface-3);border-radius:5px;padding:1px 5px} .cop-codigo{max-width:100%;margin:10px 0;border-radius:10px;overflow:hidden;background:var(--surface-2);box-shadow:var(--e1)} .cop-codigo > div{display:flex;align-items:center;gap:4px;padding:6px 8px 6px 12px;border-bottom:1px solid var(--line)} .cop-codigo small{flex:1;color:var(--ink-3);font-size:var(--fs-xs)} .cop-codigo button{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-xs);padding:4px 8px;border-radius:6px;color:var(--ink-3)} .cop-codigo button:hover{background:var(--hover);color:var(--ink)} .cop-codigo button .ic{width:13px;height:13px} .cop-codigo pre{margin:0;padding:12px;white-space:pre;overflow:auto;max-height:420px;tab-size:4;line-height:1.55} .cop-codigo pre code{display:block;background:none;padding:0;white-space:pre;overflow-wrap:normal;word-break:normal;font-size:12.5px} /* tabela compacta: so no espaco de trabalho (ate 5 colunas) */ .cop-tabela{margin:10px 0;overflow-x:auto;border-radius:10px;box-shadow:var(--e1)} .cop-tabela table{border-collapse:collapse;width:100%;font-size:var(--fs-sm);line-height:var(--lh-ui)} .cop-tabela th{text-align:left;font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--ink-3);padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface-2)} .cop-tabela td{padding:9px 12px;border-bottom:1px solid var(--line-soft);vertical-align:top;font-variant-numeric:tabular-nums} .cop-tabela tr:last-child td{border-bottom:0} .cop-texto > .cop-linha:has(+ .cop-cursor),.cop-texto > .cop-item:has(+ .cop-cursor){display:inline} .cop-cursor{display:inline-block;width:2px;height:1em;background:var(--accent);vertical-align:-2px;margin-left:2px;border-radius:1px;animation:cop-pisca 1s steps(2) infinite} @keyframes cop-pisca{50%{opacity:0}} .cop-fila{display:flex;align-items:center;gap:8px;margin:2px 0;font-size:var(--fs-sm);color:var(--ink-3)} .cop-fila .ic{width:15px;height:15px;color:var(--warn)} .cop-execucao-status{font-size:var(--fs-xs);color:var(--ink-3);margin-top:8px;line-height:var(--lh-ui)} /* ferramentas da mensagem: icones fantasma, visiveis no hover */ .cop-ferr{display:flex;align-items:center;flex-wrap:wrap;gap:2px;margin-top:6px;opacity:0;transition:opacity var(--dur-2) var(--ease)} .cop-msg.eu{position:relative} .cop-msg.eu .cop-ferr{position:absolute;top:100%;right:-2px;margin:2px 0 0;justify-content:flex-end} .cop-msg.eu .cop-ico{width:24px;height:24px} .cop-msg.eu .cop-ico .ic{width:14px;height:14px} .cop-msg:hover .cop-ferr,.cop-msg:focus-within .cop-ferr,.cop-msg.ele:last-child .cop-ferr{opacity:1} @media (pointer:coarse){.cop-msg.ele .cop-ferr{opacity:1}} .cop-ico{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:7px;color:var(--ink-3);flex:none;transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)} .cop-ico .ic{width:15px;height:15px} button.cop-ico:hover{background:var(--hover);color:var(--ink)} button.cop-ico:disabled{opacity:.4;cursor:default} .cop-ico[aria-pressed="true"]{color:var(--accent)} .cop-ferr-txt{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 8px;border-radius:7px;font-size:var(--fs-xs);color:var(--ink-3)} .cop-ferr-txt:hover{background:var(--hover);color:var(--ink)} .cop-ferr-txt .ic{width:13px;height:13px} .cop-avaliacao{display:inline-flex;align-items:center;gap:2px} .cop-avaliacao small{font-size:var(--fs-xs);color:var(--ink-3);margin-left:4px} .cop-nivel-usado{cursor:help} .cop-custo{flex-basis:100%;font-size:var(--fs-xs);color:var(--ink-3);margin-top:4px} .cop-custo summary{cursor:pointer} .cop-custo p{margin:6px 0 0;line-height:var(--lh-ui)} .cop-motivo{display:grid;gap:8px;margin-top:8px;padding:12px;border-radius:var(--r);background:var(--surface-2);box-shadow:var(--e1)} .cop-motivo label{display:grid;gap:6px;font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--ink-2)} .cop-motivo label span{font-weight:var(--fw-regular);color:var(--ink-3)} .cop-motivo textarea{min-height:0;resize:vertical} .cop-motivo > div{display:flex;justify-content:flex-end;gap:6px} /* ---------------- o trabalho do Bolt: uma linha quieta ---------------- */ .cop-trabalho{margin:0 0 8px;font-size:var(--fs-sm);color:var(--ink-3)} .cop-trabalho summary{display:inline-flex;align-items:center;gap:8px;max-width:100%;cursor:pointer;list-style:none;padding:2px 6px 2px 0;border-radius:6px} .cop-trabalho summary::-webkit-details-marker{display:none} .cop-trabalho summary:hover b{color:var(--ink)} .cop-trabalho summary b{font-weight:var(--fw-medium);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cop-trabalho summary small{color:var(--ink-3);font-size:var(--fs-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cop-seta{width:14px;height:14px;color:var(--ink-4);transition:transform var(--dur-2) var(--ease)} .cop-trabalho[open] .cop-seta{transform:rotate(180deg)} .cop-bolinha{flex:none;width:14px;height:14px;border-radius:50%;position:relative} .cop-trabalho.fazendo summary .cop-bolinha{border:2px solid var(--track);border-top-color:var(--accent);animation:cop-gira .75s linear infinite} .cop-trabalho.feito summary .cop-bolinha{background:var(--ok-soft)} .cop-trabalho.feito summary .cop-bolinha::after{content:"";position:absolute;left:5px;top:3px;width:3px;height:6px;border:solid var(--ok);border-width:0 1.6px 1.6px 0;transform:rotate(45deg)} .cop-trabalho.com-falha summary .cop-bolinha{background:var(--warn-soft)} .cop-trabalho.com-falha summary .cop-bolinha::after{border-color:var(--warn)} .cop-trabalho ul{list-style:none;margin:8px 0 2px 6px;padding:0 0 0 14px;display:grid;gap:8px;border-left:1px solid var(--line)} .cop-trabalho li{display:flex;align-items:flex-start;gap:8px;line-height:var(--lh-ui);font-size:var(--fs-xs);position:relative} .cop-trabalho li b{font-weight:var(--fw-medium);color:var(--ink-2)} .cop-trabalho li small{display:block;color:var(--ink-3)} .cop-trabalho li .cop-bolinha{width:7px;height:7px;margin:5px 0 0 -18px;background:var(--ink-4);box-shadow:0 0 0 3px var(--surface)} .cop-trabalho li.feito .cop-bolinha{background:var(--ok)} .cop-trabalho li.fazendo .cop-bolinha{background:var(--accent)} .cop-trabalho li.falhou .cop-bolinha,.cop-trabalho li.interrompido .cop-bolinha{background:var(--warn)} @keyframes cop-gira{to{transform:rotate(360deg)}} /* lista de acoes feitas no CRM */ .cop-acoes{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px} .cop-acao{display:flex;gap:9px;align-items:flex-start;font-size:var(--fs-sm);line-height:var(--lh-ui);color:var(--ink-2)} .cop-acao-txt{flex:1;min-width:0;overflow-wrap:anywhere} .cop-acao-det{display:block;font-style:normal;font-size:var(--fs-xs);color:var(--ink-3);margin-top:1px} .cop-acao .cop-bolinha{margin-top:3px} .cop-acao.fazendo .cop-bolinha{border:2px solid var(--track);border-top-color:var(--accent);animation:cop-gira .75s linear infinite} .cop-acao.feito .cop-bolinha{background:var(--ok-soft)} .cop-acao.feito .cop-bolinha::after{content:"";position:absolute;left:5px;top:3px;width:3px;height:6px;border:solid var(--ok);border-width:0 1.6px 1.6px 0;transform:rotate(45deg)} .cop-acao.falhou{color:var(--danger)} .cop-acao.falhou .cop-bolinha{background:var(--danger-soft)} .cop-acao.falhou .cop-bolinha::after{content:"!";position:absolute;inset:0;color:var(--danger);font-size:9px;font-weight:var(--fw-bold);line-height:14px;text-align:center} /* card "Posso fazer isto?" dentro da resposta */ .cop-card{margin:12px 0 4px;padding:14px;border-radius:14px;background:var(--surface);box-shadow:var(--e2)} .cop-card-tit{display:flex;align-items:center;gap:10px;font-weight:var(--fw-semibold);font-size:var(--fs-md);line-height:var(--lh-ui);margin-bottom:10px;color:var(--ink)} .cop-card-tit > .ic{width:18px;height:18px;color:var(--ink-3)} .cop-card.resolvido{padding:10px 12px;box-shadow:var(--e1);background:var(--surface-2)} .cop-card.resolvido .cop-card-tit{margin:0;font-weight:var(--fw-medium);font-size:var(--fs-sm);color:var(--ink-2)} .cop-card.feito .cop-card-tit > .ic{color:var(--ok)} .cop-card-lista{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:4px} .cop-card-lista label{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-sm);line-height:var(--lh-ui);cursor:pointer;padding:6px 8px;border-radius:var(--r-sm)} .cop-card-lista label:hover{background:var(--hover)} .cop-card-lista input{margin-top:2px;flex:none} .cop-card-lista.consulta{padding-left:18px;list-style:disc;color:var(--ink-2);font-size:var(--fs-sm)} .cop-card-lista .sempre{display:inline-block;margin-left:6px;font-size:var(--fs-2xs);font-weight:var(--fw-medium);color:var(--warn);background:var(--warn-soft);padding:1px 6px;border-radius:var(--r-full)} .cop-card-previa{margin:2px 0 8px 34px;font-size:var(--fs-xs);color:var(--ink-3)} .cop-card-previa summary{cursor:pointer} .cop-card-previa pre{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;line-height:var(--lh-ui);margin-top:8px;padding:10px;border-radius:var(--r-sm);background:var(--surface-2);color:var(--ink-2)} .cop-card-botoes{display:flex;gap:8px;align-items:center;flex-wrap:wrap} /* o sim do chat no mesmo desenho do enviar: escuro e neutro, nos dois temas e na pele do CEO */ .cop-card .btn-primario{background:var(--ink);color:var(--surface);box-shadow:none} .cop-card .btn-primario:hover{background:var(--ink-2);color:var(--surface)} .cop-card-semperguntar{margin-left:auto;font-size:var(--fs-xs);color:var(--ink-3);text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px} .cop-card-semperguntar:hover{color:var(--ink)} .cop-card .motivo-perda{margin:4px 0 12px} /* ---------------- a caixa de escrita ---------------- */ .bc-form{position:relative;flex:none;display:grid;gap:4px;margin:0 12px 12px;padding:10px 8px 8px 14px;border-radius:var(--r-xl); background:var(--surface);box-shadow:var(--e2);transition:box-shadow var(--dur-2) var(--ease)} .bc-form:focus-within{box-shadow:0 0 0 1px var(--line-strong),0 1px 2px rgba(17,19,24,.05),0 12px 32px -12px rgba(17,19,24,.2)} .bc-form textarea{width:100%;min-height:24px;max-height:220px;padding:2px 6px 2px 0;border:0;background:transparent;resize:none;box-shadow:none; font-size:var(--fs-md);line-height:var(--lh-read);color:var(--ink);overflow-y:auto} .bc-form textarea:focus{outline:none;box-shadow:none;border:0} .bc-form textarea::placeholder{color:var(--ink-4)} .bc-form textarea[readonly]{color:var(--ink-3)} .bc-barra{display:flex;align-items:center;gap:2px;margin-left:-6px} .bc-espaco{flex:1} .bc-ancora{position:relative;display:inline-flex} .bc-mais .ic{width:18px;height:18px} .bc-mais[aria-expanded="true"]{background:var(--ativo);color:var(--ink)} .bc-pop{position:absolute;bottom:calc(100% + 10px);left:0;min-width:260px;z-index:var(--z-drawer)} .bc-pop-dir{left:auto;right:0} .bc-pop button{height:auto;min-height:40px;padding:7px 10px;align-items:flex-start} .bc-pop button > span{display:grid;gap:1px;flex:1} .bc-pop button small{font-size:var(--fs-xs);color:var(--ink-3)} .bc-pop button:disabled{opacity:.45;cursor:default} .bc-pop button:disabled:hover{background:none} .bc-pop [data-nivel] .ic{margin-top:2px;visibility:hidden;color:var(--accent)} .bc-pop [data-nivel][aria-checked="true"] .ic{visibility:visible} .bc-nivel{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 6px 0 10px;border-radius:var(--r-full);font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--ink-3)} .bc-nivel:hover,.bc-nivel[aria-expanded="true"]{background:var(--hover);color:var(--ink)} .bc-nivel .ic{width:13px;height:13px} .bc-anel{margin:0 6px;--anel-cor:var(--ink-3)} .bc-anel.alto{--anel-cor:var(--warn)} .bc-anel.estourou{--anel-cor:var(--danger)} .bc-enviar,.bc-parar{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--r-full);background:var(--ink);color:var(--surface);flex:none;margin-left:4px; transition:background var(--dur-1) var(--ease),transform var(--dur-1) var(--ease)} .bc-enviar .ic{width:17px;height:17px;stroke-width:2.2} .bc-parar .ic{width:12px;height:12px;fill:currentColor;stroke:none} .bc-enviar:active,.bc-parar:active{transform:scale(.94)} .bc-enviar:disabled{background:var(--track);color:var(--ink-4);cursor:default;transform:none} .bc-enviar[hidden],.bc-parar[hidden]{display:none} .cop-voz.ouvindo{color:var(--accent);background:var(--bolt-soft)} .cop-ditado{margin:0 0 4px;padding:6px 10px;border-radius:var(--r-sm);font-size:var(--fs-xs);line-height:var(--lh-ui);background:var(--surface-2);color:var(--ink-2)} .cop-ditado[hidden]{display:none} /* anexos da mensagem, acima do campo */ .cop-anexos{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 4px} .cop-anexos[hidden]{display:none} .cop-anexo{display:flex;align-items:center;gap:8px;max-width:100%;padding:5px 4px 5px 5px;border-radius:10px;background:var(--surface-2);box-shadow:var(--e1);font-size:var(--fs-xs)} .cop-anexo img{width:34px;height:34px;object-fit:cover;border-radius:7px;background:#fff} .cop-anexo-icone{display:grid;place-items:center;width:34px;height:34px;border-radius:7px;background:var(--surface-3);color:var(--ink-3)} .cop-anexo > span:not(.cop-anexo-icone){min-width:0;display:grid} .cop-anexo b{font-weight:var(--fw-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px} .cop-anexo small{color:var(--ink-3)} .cop-anexo.com-erro{box-shadow:0 0 0 1px var(--danger-line)} .cop-anexo.com-erro small{color:var(--danger)} .cop-soltar{position:absolute;inset:10px;z-index:5;pointer-events:none;border:2px dashed color-mix(in srgb,var(--accent) 55%,transparent);border-radius:var(--r-lg); background:color-mix(in srgb,var(--surface) 92%,transparent);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;text-align:center;padding:24px;color:var(--ink)} .cop-soltar[hidden]{display:none} .cop-soltar .ic{width:26px;height:26px;color:var(--accent)} .cop-soltar b{font-size:var(--fs-lg);font-weight:var(--fw-semibold)} .cop-soltar span,.cop-soltar small{color:var(--ink-3);font-size:var(--fs-sm);max-width:260px} /* aviso fixo da conversa (so consulta, bloqueada pela privacidade) */ .cop-status{flex:none;margin:0 12px 8px} .cop-status[hidden]{display:none} @media (max-width:760px){ .bc-form{margin:0 8px calc(8px + env(safe-area-inset-bottom));padding-left:12px} .bc-form textarea{font-size:16px} .cop-msg.ele .cop-ferr{opacity:1} } @media (prefers-reduced-motion:reduce){ .cop-trabalho .cop-bolinha,.cop-acao .cop-bolinha{animation:none!important} .cop-cursor{animation:none} }