/* Atendimento — Central de Atendimento (chat), Painel de Atendimento e
   Copiloto. A tela de chat foi reescrita do zero no Prompt 6 (repaginação
   visual, ver STATUS_REPORT.md) — layout novo a partir do mockup Claude
   Design ("Atendimento — Chat.dc.html"), abandonando por completo as
   classes antigas (.chat-layout/.conversation/.messages/.message/
   .send-box/.attendance-workspace/.attendance-lead/.pagination/
   .attendance-toolbar/.attendance-filters/.attendance-new/.mini-form/
   .attendance-actions/.chat-settings/.simulator/.eyebrow/.danger-btn) —
   TODAS elas já existiam sem escopo em static/style.css (achado real da
   investigação do Prompt 6: bugs relatados pelo usuário na tentativa
   anterior — área do chat menor que o esperado, filtros fora do lugar,
   ficha do lead sumida — vinham exatamente dessas colisões, não de um
   erro pontual de CSS). Classes novas (a1-chat-*, mesmo prefixo a1- já
   usado nos Prompts 2-4) não existem em nenhum lugar de style.css, então
   não competem em cascade layers com CSS legado — sem precisar de reset
   escopado com especificidade maior, técnica que a implementação anterior
   usava e que continuava frágil.

   Copiloto continua exatamente como estava (Sprint 26) — fora do escopo
   deste prompt. Painel de Atendimento (/attendance/dashboard) saiu deste
   arquivo no Prompt 12 — foi para tailwind-attendance-dashboard.src.css,
   mesmo padrão Tailwind-por-tela do Prompt 0/1/3/4/6-11 (ver
   STATUS_REPORT.md #15). */

body[data-endpoint="copilot"] {
  font-family: var(--font-family-v2);
}

/* =====================================================================
   PROMPT 6 — TELA DE ATENDIMENTO/CHAT, REESCRITA COMPLETA
   ===================================================================== */
body[data-endpoint="chat"] {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
}

/* ---------- Cabeçalho compacto (mantido da Tarefa 20 — funcionava) ---------- */
body[data-endpoint="chat"] .page-head {
  padding-bottom: 10px;
}
body[data-endpoint="chat"] .chat-compact-header-title {
  align-items: center;
  display: flex;
  gap: 8px;
  margin-top: 2px;
}
body[data-endpoint="chat"] .chat-compact-header-title h1 {
  font-size: 20px;
  margin: 0;
}
body[data-endpoint="chat"] .chat-header-info {
  position: relative;
}
body[data-endpoint="chat"] .chat-header-info summary {
  align-items: center;
  background: var(--color-border-subtle);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-secondary);
  cursor: pointer;
  display: flex;
  font-size: 11px;
  font-style: italic;
  font-weight: 700;
  height: 18px;
  justify-content: center;
  list-style: none;
  width: 18px;
}
body[data-endpoint="chat"] .chat-header-info summary::-webkit-details-marker {
  display: none;
}
body[data-endpoint="chat"] .chat-header-info p {
  background: var(--color-ink);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(16, 29, 61, .18);
  color: #fff;
  font-size: 12.5px;
  left: 0;
  margin: 6px 0 0;
  padding: 10px 12px;
  position: absolute;
  top: 100%;
  width: 260px;
  z-index: 5;
}

/* ---------- Botões/campos/pills/chips novos (mesmo padrão a1-* dos
   Prompts 2-4) — fora de @layer, então não competem com nada legado. ---------- */
body[data-endpoint="chat"] .a1-btn-outline-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font: 500 12px/1 'Inter', system-ui, sans-serif;
  padding: 6px 11px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-ink);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
body[data-endpoint="chat"] .a1-btn-outline-sm:hover {
  background: var(--color-page);
}
body[data-endpoint="chat"] .a1-btn-danger {
  border-color: var(--color-lost-text);
  color: var(--color-lost-text);
}
body[data-endpoint="chat"] .a1-btn-danger:hover {
  background: var(--color-lost-bg);
}
body[data-endpoint="chat"] .a1-btn-primary-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 13px/1 'Inter', system-ui, sans-serif;
  padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid var(--color-ink);
  background: var(--color-ink);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
body[data-endpoint="chat"] .a1-btn-primary-inline:hover {
  background: #1b2c56;
}
body[data-endpoint="chat"] .a1-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-ink);
  cursor: pointer;
}
body[data-endpoint="chat"] .a1-icon-btn:hover {
  background: var(--color-page);
}
body[data-endpoint="chat"] .a1-field {
  font: 400 13px/1.3 'Inter', system-ui, sans-serif;
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-ink);
  background: #fff;
}
body[data-endpoint="chat"] .a1-field:focus {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 0;
  border-color: var(--color-focus);
}
body[data-endpoint="chat"] .a1-chip {
  font: 500 11.5px/1 'Inter', system-ui, sans-serif;
  padding: 6px 4px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-secondary);
  text-decoration: none;
  cursor: pointer;
}
body[data-endpoint="chat"] .a1-chip:hover {
  background: var(--color-page);
}
body[data-endpoint="chat"] .a1-chip.is-active {
  font-weight: 600;
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: #fff;
}
body[data-endpoint="chat"] .a1-pill {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
}
body[data-endpoint="chat"] .a1-icon-btn-accent {
  position: relative;
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: #fff;
}
body[data-endpoint="chat"] .a1-icon-btn-accent:hover {
  background: #1b2c56;
}
body[data-endpoint="chat"] .a1-chip-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-lost-text);
  border: 1.5px solid #fff;
}
body[data-endpoint="chat"] .a1-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-secondary);
  margin-bottom: 4px;
}

/* ---------- Popovers (Nova conversa/Filtros/Gerenciar) — substitui
   .attendance-new/.mini-form/.attendance-actions/.chat-settings soltos no
   corpo da página. Todos <details>/<summary> nativos, sem JS pra
   abrir/fechar; só "Transferir atendimento" (ficha do lead) precisa de
   JS pra abrir remotamente o popover "Gerenciar" (ver chat.html). ---------- */
body[data-endpoint="chat"] .a1-chat-popover > summary {
  list-style: none;
  cursor: pointer;
}
body[data-endpoint="chat"] .a1-chat-popover > summary::-webkit-details-marker {
  display: none;
}
body[data-endpoint="chat"] .a1-chat-popover-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(16, 29, 61, .12);
  padding: 14px;
  max-height: 70vh;
  overflow-y: auto;
}

/* .attendance-back (style.css, legado, sem escopo) é display:none por
   padrão, só reaparece dentro de um media query amarrado a
   .attendance-workspace/.chat-panel/.conversation-list — classes que este
   prompt não usa mais. Reset escopado, próprio: link "Voltar à lista" só
   faz sentido em telas estreitas, onde a coluna do chat ocupa a largura
   toda (mesmo padrão mobile de antes, layout novo). */
body[data-endpoint="chat"] .attendance-back {
  display: none;
  margin: 14px 14px 0;
  font: 500 12px/1 'Inter', system-ui, sans-serif;
  padding: 6px 11px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-ink);
  text-decoration: none;
  width: fit-content;
}
@media (max-width: 900px) {
  body[data-endpoint="chat"] .attendance-back {
    display: inline-block;
  }
}

/* Escondido no desktop (o botão "Fechar ficha" do cabeçalho já cobre isso);
   reaparece só na largura de overlay de tela cheia, media query abaixo.
   Precisa vir ANTES dessa media query no arquivo — mesma especificidade,
   então ordem de origem decide, e um display:none incondicional depois
   da media query venceria sempre, escondendo o X pra sempre (bug real
   encontrado ao testar: o botão nunca aparecia). */
body[data-endpoint="chat"] .a1-chat-lead-close {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: #fff;
  color: var(--color-ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

/* Levantamento de mobile pré-deploy (2026-08-31): o comentário acima já
   preparava o terreno ("link Voltar à lista só faz sentido em telas
   estreitas, onde a coluna do chat ocupa a largura toda") mas o CSS que
   faria a coluna do chat realmente ocupar a largura toda nunca foi escrito
   — .a1-chat-sidebar (w-[344px]) e .a1-chat-main (flex-1) continuavam lado
   a lado, sobrando ~30px pro chat numa tela de 390px. .has-open-chat
   (classe nova, só quando `selected` existe — ver templates/chat.html)
   decide qual dos dois painéis mostrar por vez, mesmo padrão de "uma tela
   por vez" que .attendance-back já sinalizava sem implementar. */
@media (max-width: 900px) {
  body[data-endpoint="chat"] .a1-chat-shell {
    flex-direction: column;
    gap: 0;
  }
  body[data-endpoint="chat"] .a1-chat-sidebar,
  body[data-endpoint="chat"] .a1-chat-main {
    width: 100% !important;
    flex: 1 1 auto !important;
    min-width: 0;
  }
  body[data-endpoint="chat"] .a1-chat-shell.has-open-chat .a1-chat-sidebar {
    display: none;
  }
  body[data-endpoint="chat"] .a1-chat-shell:not(.has-open-chat) .a1-chat-main {
    display: none;
  }
  /* Ficha do lead (3ª coluna, w-[288px], já hidden por padrão e só
     alternada via JS #chat-lead-toggle) vira overlay de tela cheia em vez
     de espremer ao lado do chat quando aberta. 100vh (não 100%) porque
     position:fixed com height:100% resolve contra o bloco de
     contenção mais próximo se algum ancestral tiver transform/filter —
     100vh sempre cobre a viewport inteira, sem essa dependência. */
  body[data-endpoint="chat"] .a1-chat-panel:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 30;
    width: 100% !important;
    height: 100vh;
    border-radius: 0;
  }
  /* #chat-lead-toggle (que vira "Fechar ficha") fica atrás do overlay de
     tela cheia acima — sem esse X, não haveria como fechar a ficha no
     celular. */
  body[data-endpoint="chat"] .a1-chat-lead-close {
    display: block;
  }
}

/* Recolhimento automático da ficha em largura de notebook (achado do
   levantamento de responsividade, 2026-09-11): entre 901px (mobile já
   coberto acima) e 1360px, a ficha do lead (288px) somada à lista
   (344px) espremia a coluna central do chat a ponto de quebrar texto
   letra por letra (medido: ~65-90px de largura de caixa a 1024px,
   ilegível). Medição real via Playwright em vários larguras mostrou o
   cabeçalho da conversa e as bolhas de mensagem voltando a caber numa
   linha só a partir de ~1360px (326px de caixa a 1280px ainda quebra
   cabeçalho em 3 linhas; 406px a 1360px já cabe) -- 1360 não é o valor
   antigo (1600px) citado no STATUS_REPORT.md, que nunca existiu de fato
   no código (não achamos nenhum matchMedia); é o ponto real onde o
   layout deixa de ser cramped, testado nesta correção.
   Mesmo mecanismo do overlay mobile abaixo: como a ficha já era
   retirada do fluxo normal ao virar position:fixed (elementos fixed não
   reservam espaço no flex pai), só precisamos repetir esse position:fixed
   aqui -- .a1-chat-main volta a ocupar 100% do espaço disponível
   sozinho, sem precisar tocar em a1-chat-shell/a1-chat-sidebar (que
   continuam lado a lado normalmente, diferente do empilhamento
   ≤900px). O toggle "Ficha"/"Fechar ficha" do cabeçalho continua
   funcionando (abre/fecha o [hidden]) só que agora, aberto, fica sob o
   drawer fixo -- por isso o X interno (.a1-chat-lead-close, já existia
   só para o overlay mobile) precisa aparecer aqui também. */
@media (min-width: 901px) and (max-width: 1360px) {
  body[data-endpoint="chat"] .a1-chat-panel:not([hidden]) {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    height: 100vh;
    border-radius: 0;
    box-shadow: -8px 0 24px rgba(16, 29, 61, .18);
  }
  body[data-endpoint="chat"] .a1-chat-lead-close {
    display: block;
  }
}

/* ---------- Layout de 3 colunas ----------
   Largura/altura fixas via utilitário Tailwind direto no HTML
   (w-[344px]/w-[288px]/h-[calc(...)]) — como nenhuma dessas classes
   utilitárias colide com seletor nenhum de style.css, não precisam de
   reset aqui. Só o essencial de rolagem interna (min-height:0 dentro de
   flex) fica registrado por clareza. */
body[data-endpoint="chat"] .a1-chat-shell {
  min-height: 0;
}
body[data-endpoint="chat"] .a1-chat-thread.is-dragover {
  outline: 2px dashed var(--color-focus);
  outline-offset: -4px;
}

/* ---------- Linha da conversa na lista lateral ----------
   .conversation-row continua sendo o alvo do WebSocket
   (Tarefa 15/17 — sidebar.querySelector('.conversation-row[data-conversation-id]')),
   mantido de propósito; só o link interno (.a1-chat-row-link, novo,
   substitui o antigo .conversation) precisa de estado :hover/is-active. */
body[data-endpoint="chat"] .a1-chat-row-link:hover {
  background: var(--color-page);
}
body[data-endpoint="chat"] .a1-chat-row-link.is-active {
  background: var(--color-page);
  box-shadow: inset 3px 0 0 var(--color-ink);
}
body[data-endpoint="chat"] .conversation-row.is-closed {
  opacity: 0.6;
}

/* ---------- Ficha do lead (3ª coluna) ---------- */
body[data-endpoint="chat"] .chat-lead-field {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: 12.5px;
}
body[data-endpoint="chat"] .chat-lead-field span:first-child {
  color: var(--color-secondary);
  font-size: 12px;
  flex-shrink: 0;
}
body[data-endpoint="chat"] .chat-lead-field span:last-child {
  font-weight: 500;
  text-align: right;
}

/* ---------- Motivo do handoff no cabeçalho fixo (Tarefa 17) ---------- */
body[data-endpoint="chat"] .chat-header-handoff {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.35rem;
}
body[data-endpoint="chat"] .handoff-reason {
  background: var(--color-lost-bg);
  border-radius: 8px;
  color: var(--color-lost-text);
  font-size: 11.5px;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
}

/* ---------- Composer (substitui .send-box) ---------- */
body[data-endpoint="chat"] .a1-chat-textarea {
  resize: none;
  border: none;
  outline: none;
  font: 400 13.5px/1.5 'Inter', system-ui, sans-serif;
  color: var(--color-ink);
  background: transparent;
  max-height: 120px;
  min-height: 22px;
  padding: 6px 2px;
}
body[data-endpoint="chat"] .a1-chat-composer-box {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: #fff;
  padding: 8px 8px 8px 10px;
}
body[data-endpoint="chat"] .a1-chat-composer-box:focus-within {
  border-color: var(--color-focus);
  box-shadow: 0 0 0 3px var(--color-focus-ring-soft);
}
body[data-endpoint="chat"] .a1-chat-send-btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  background: var(--color-ink);
  color: #fff;
}
body[data-endpoint="chat"] .a1-chat-send-btn:hover {
  background: #1b2c56;
}

/* ---------- Gerenciar atendimento / simulador (dentro do popover #chat-manage-details, ver .a1-chat-popover acima) */
body[data-endpoint="chat"] .a1-chat-simulator summary {
  list-style: none;
}
body[data-endpoint="chat"] .a1-chat-simulator summary::-webkit-details-marker {
  display: none;
}
/* Antes (sprint 39): grid 2 colunas aplicado direto aos filhos do form.
   Funcionava enquanto os campos vinham sempre em pares. Deixou de bater
   quando a unificação etapa/Kanban intercalou legendas, mensagens de erro e
   campos condicionais (número ímpar de itens) — a legenda de um campo caía
   na coluna ao lado do <select> seguinte em vez de ficar em cima dele. Cada
   campo agora é um .ds-field próprio (label + controle + ajuda + erro,
   empilhados), e só o par responsável/fila usa .a1-chat-settings-row pra
   ficar lado a lado — a única dupla que continua fazendo sentido visual
   assim. */
body[data-endpoint="chat"] .a1-chat-settings {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body[data-endpoint="chat"] .a1-chat-settings-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
body[data-endpoint="chat"] .a1-chat-settings textarea {
  min-height: 60px;
  resize: vertical;
}
body[data-endpoint="chat"] .a1-chat-settings button {
  align-self: flex-start;
}

/* =====================================================================
   Elementos abaixo já existiam (Tarefas 11/15/17/20 Parte C) e continuam
   idênticos — nenhum colide com style.css, nenhum precisou mudar.
   ===================================================================== */

/* ---------- Tarefa 11: envio de mídia ---------- */
.chat-record-btn.is-recording {
  background: var(--color-lost-text);
  border-color: var(--color-lost-text);
  color: #fff;
  animation: chat-record-pulse 1.2s ease-in-out infinite;
}
@keyframes chat-record-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.chat-record-live {
  align-items: center;
  background: var(--color-lost-bg);
  border: 1px solid #fecaca;
  border-radius: 8px;
  display: flex;
  gap: 10px;
  padding: 8px 12px;
}
.chat-record-live-dot {
  background: var(--color-lost-text);
  border-radius: 50%;
  flex-shrink: 0;
  height: 8px;
  width: 8px;
  animation: chat-record-pulse 1.2s ease-in-out infinite;
}
.chat-record-live-timer {
  color: var(--color-lost-text);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.chat-record-live-canvas {
  flex: 1;
  height: 32px;
  min-width: 0;
  width: 100%;
}
.chat-record-cancel-btn {
  align-items: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--color-lost-text);
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  height: 28px;
  justify-content: center;
  width: 28px;
}
.chat-record-cancel-btn:hover {
  background: #fecaca;
}
.chat-record-send-btn {
  align-items: center;
  background: var(--color-ink);
  border: none;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  height: 28px;
  justify-content: center;
  width: 28px;
}
.chat-record-send-btn:hover {
  background: #1b2c56;
}
.chat-attachment-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  margin-bottom: 8px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--color-ink);
}
.chat-attachment-preview-thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}
.chat-attachment-error {
  padding: 8px 12px;
  margin-bottom: 8px;
  background: #fdecea;
  border: 1px solid var(--color-lost-text);
  border-radius: 8px;
  color: var(--color-lost-text);
  font-size: 13px;
}
.chat-upload-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--color-border-subtle);
  overflow: hidden;
  margin-bottom: 8px;
}
.chat-upload-progress-bar {
  height: 100%;
  width: 0;
  background: var(--color-focus);
  transition: width 0.15s ease;
}

/* ---------- Mídia dentro da bolha de mensagem ---------- */
.message-media {
  margin-top: 6px;
}
.message-media img {
  max-width: 100%;
  max-height: 240px;
  border-radius: 6px;
  display: block;
}
.message-media video {
  max-width: 100%;
  max-height: 260px;
  border-radius: 6px;
  display: block;
}
.message-media audio {
  width: 100%;
  max-width: 280px;
}
.message-media-label {
  display: block;
  font-size: 13px;
  color: var(--color-secondary);
  margin-bottom: 4px;
}
.message-media--voice .message-media-label {
  font-weight: 600;
  color: var(--color-ink);
}
.message-media-file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--color-page);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  text-decoration: none;
  color: var(--color-ink);
  font-size: 13.5px;
}
.message-ai-interpretation {
  font-style: italic;
  color: var(--color-secondary);
  font-size: 13.5px;
}
.message-ai-interpretation em {
  font-style: normal;
  font-weight: 600;
}

/* ---------- Opções de resposta da triagem (sprint 37) ---------- */
body[data-endpoint="chat"] .triage-options {
  display: flex;
  gap: 8px;
  margin: 4px 0 16px;
  padding: 0 4px;
}
body[data-endpoint="chat"] .triage-options--buttons {
  flex-direction: row;
  flex-wrap: wrap;
}
body[data-endpoint="chat"] .triage-options--list {
  flex-direction: column;
  align-items: stretch;
  max-width: 320px;
}
body[data-endpoint="chat"] .triage-option-form {
  margin: 0;
}
body[data-endpoint="chat"] .triage-option-button {
  background: #fff;
  border: 1px solid var(--color-focus);
  border-radius: 999px;
  color: var(--color-focus);
  padding: 8px 16px;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
}
body[data-endpoint="chat"] .triage-options--list .triage-option-button {
  width: 100%;
  text-align: left;
  border-radius: 8px;
}
body[data-endpoint="chat"] .triage-option-button:hover {
  background: var(--color-focus);
  color: #fff;
}

/* ---------- Copiloto — inalterado ---------- */
body[data-endpoint="copilot"] .copilot-messages {
  background: var(--color-surface-alt);
}
body[data-endpoint="copilot"] .message {
  background: var(--color-surface-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
body[data-endpoint="copilot"] .message.outbound {
  background: var(--color-info-bg);
  border-color: var(--color-border);
}
body[data-endpoint="copilot"] .message small {
  color: var(--color-text-tertiary);
}
body[data-endpoint="copilot"] .message p {
  color: var(--color-text-primary);
}
body[data-endpoint="copilot"] .panel.copilot-chat {
  background: var(--color-surface-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
body[data-endpoint="copilot"] .copilot-topics {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
}
body[data-endpoint="copilot"] .copilot-topics h2 {
  color: var(--color-text-primary);
}
body[data-endpoint="copilot"] .copilot-topics li {
  color: var(--color-text-secondary);
}
body[data-endpoint="copilot"] .copilot-topics .muted {
  color: var(--color-text-tertiary);
}
body[data-endpoint="copilot"] .copilot-notice {
  background: var(--color-info-bg);
  border-left: 3px solid var(--color-info);
  border-radius: var(--radius-base);
}
body[data-endpoint="copilot"] .copilot-notice strong {
  color: var(--color-text-primary);
}
body[data-endpoint="copilot"] .copilot-notice p {
  color: var(--color-text-secondary);
}
body[data-endpoint="copilot"] .send-box textarea {
  border-color: var(--color-border);
  border-radius: var(--radius-base);
  color: var(--color-text-primary);
}
body[data-endpoint="copilot"] .send-box .muted {
  color: var(--color-text-tertiary);
}

/* Tarefa 15 — toast de handoff em tempo real (rodapé da tela). */
.handoff-toast-container {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 360px;
  width: calc(100vw - 32px);
}
.handoff-toast-container .ds-alert {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  animation: handoff-toast-in 0.2s ease-out;
}
@keyframes handoff-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}