/* Tela Comunicação (desenho 2026-10-19): conversas | mensagens | detalhes. */
.tela-comunicacao { --cm-borda: var(--borda, #2a3240); --cm-fundo: var(--cartao, #181e27); --cm-sub: var(--texto-sub, #98a2b3); --cm-azul: #3b7bff;
  display: grid; grid-template-columns: 270px minmax(0, 1fr) 330px; gap: 16px; height: calc(100vh - 72px - 32px); min-height: 520px; }
.tela-comunicacao > * { min-height: 0; }
.cm-conversas, .cm-centro, .cm-lado { background: var(--cm-fundo); border: 1px solid var(--cm-borda); border-radius: 12px; }
.tela-comunicacao .sub { color: var(--cm-sub); }
.cm-icone { all: unset; box-sizing: border-box; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; cursor: pointer; color: #c9d1dd; }
.cm-icone:hover, .cm-icone:focus-visible { background: rgba(255, 255, 255, .07); color: #fff; }
.cm-icone .ico { width: 19px; height: 19px; }
.cm-icone-borda { width: 42px; height: 42px; border: 1px solid var(--cm-borda); }
.cm-botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--cm-azul);
  background: transparent; color: #8fb3ff; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; }
.cm-botao:hover { background: rgba(59, 123, 255, .12); }
.cm-botao-largo { width: 100%; margin-top: 12px; box-sizing: border-box; height: 42px; }

/* Avatares com presença */
.cm-av { position: relative; flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--cor, #3a4352);
  color: #fff; font-weight: 700; font-size: 14px; }
.cm-av-p { width: 36px; height: 36px; font-size: 12.5px; }
.cm-pres { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: #6b7280; border: 2px solid var(--cm-fundo); display: none; }
.cm-pres.on { display: block; background: #22c55e; }

/* Conversas */
.cm-conversas { display: flex; flex-direction: column; padding: 18px 14px; overflow-y: auto; }
.cm-conversas h1 { margin: 0 4px 14px; font-size: 22px; }
.cm-busca { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--cm-borda); border-radius: 8px; margin-bottom: 18px; }
.cm-busca .ico { width: 17px; height: 17px; color: var(--cm-sub); }
.cm-busca input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; }
.cm-grupo { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--cm-borda); }
.cm-grupo:last-child { border-bottom: 0; }
.cm-grupo-topo { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 6px; font-weight: 600; }
.cm-grupo nav { display: grid; gap: 2px; }
.cm-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 8px; color: #dbe1ea; text-decoration: none; }
.cm-item:hover { background: rgba(255, 255, 255, .05); }
.cm-item.ativo { background: #1957d6; color: #fff; }
.cm-item[hidden] { display: none; }
.cm-hash { color: var(--cm-sub); font-weight: 600; font-size: 18px; width: 16px; text-align: center; }
.cm-item.ativo .cm-hash { color: #fff; }
.cm-item-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-badge { min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: 6px; display: grid; place-items: center; background: #2a3240; color: #e6ebf2; font-size: 12px; }
.cm-item.ativo .cm-badge { background: rgba(0, 0, 0, .25); }
.cm-badge[hidden] { display: none; }
.cm-mini-form { display: grid; gap: 8px; padding: 6px 4px 12px; }
.cm-mini-form[hidden] { display: none; }
.cm-mini-form input, .cm-mini-form select { height: 36px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--cm-borda); background: transparent; color: inherit; font: inherit; }
.cm-vazio-lista { margin: 4px; font-size: 13px; }

/* Centro */
.cm-centro { display: flex; flex-direction: column; padding: 16px 16px 12px; }
.cm-topo { display: flex; justify-content: space-between; gap: 12px; padding: 0 2px 12px; }
.cm-topo h2 { margin: 0; font-size: 26px; display: flex; align-items: center; gap: 8px; }
.cm-topo h2 .cm-hash { font-size: 26px; width: auto; }
.cm-topo p { margin: 2px 0 0; font-size: 15px; }
.cm-topo-acoes { display: flex; align-items: center; gap: 10px; }
.cm-busca-msg { display: none; }
.cm-busca-msg.aberta { display: block; }
.cm-busca-msg input { height: 40px; width: 220px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--cm-borda); background: transparent; color: inherit; font: inherit; }
.cm-filtro-ativo { font-size: 13px; color: var(--cm-sub); padding: 0 4px 8px; }
.cm-checklist { border: 1px solid var(--cm-borda); border-radius: 10px; background: rgba(255, 255, 255, .03); margin-bottom: 10px; }
.cm-checklist summary { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 16px; cursor: pointer; list-style: none; font-size: 14px; }
.cm-checklist summary::-webkit-details-marker { display: none; }
.cm-checklist summary span { color: #d5dbe5; }
.cm-checklist .cm-seta { margin-left: auto; transition: transform .2s; }
.cm-checklist[open] .cm-seta { transform: rotate(180deg); }
.cm-checklist-form { display: grid; gap: 8px; padding: 0 16px 14px; }
.cm-checklist-form textarea { padding: 10px; border-radius: 8px; border: 1px solid var(--cm-borda); background: transparent; color: inherit; font: inherit; }
.cm-checklist-form .cm-botao { justify-self: start; }
.cm-lista { flex: 1; overflow-y: auto; padding: 4px 2px 10px; scroll-behavior: smooth; }
.cm-vazio { display: grid; place-items: center; height: 100%; text-align: center; color: var(--cm-sub); padding: 40px; }
.cm-dia { display: flex; align-items: center; gap: 12px; margin: 14px 0 6px; color: var(--cm-sub); font-size: 12px; text-transform: capitalize; }
.cm-dia::before, .cm-dia::after { content: ''; flex: 1; height: 1px; background: var(--cm-borda); }
.cm-msg { position: relative; display: flex; gap: 14px; padding: 10px 10px; border-radius: 10px; }
.cm-msg:hover { background: rgba(255, 255, 255, .025); }
.cm-msg.agrupada { padding-top: 2px; padding-bottom: 2px; }
.cm-msg.destaque { background: rgba(59, 123, 255, .1); }
.cm-hora-lado { width: 42px; flex: none; font-size: 10px; color: transparent; text-align: center; padding-top: 4px; }
.cm-msg:hover .cm-hora-lado { color: var(--cm-sub); }
.cm-corpo { flex: 1; min-width: 0; display: grid; gap: 8px; }
.cm-corpo header { display: flex; align-items: baseline; gap: 10px; }
.cm-corpo header strong { font-size: 15px; }
.cm-corpo time { font-size: 12px; color: var(--cm-sub); }
.cm-texto { font-size: 15px; line-height: 1.5; color: #e6ebf2; overflow-wrap: anywhere; }
.cm-texto a { color: #6fa0ff; }
.cm-ped { font-weight: 600; text-decoration: none; }
.cm-mencao { padding: 1px 6px; border-radius: 6px; background: rgba(59, 123, 255, .2); color: #8fb3ff; font-weight: 500; }
.cm-apagada { margin: 0; font-style: italic; color: var(--cm-sub); font-size: 14px; }
.cm-pedido { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; max-width: 720px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--cm-borda); background: rgba(255, 255, 255, .02); }
.cm-pedido > div { display: grid; flex: 1; min-width: 140px; }
.cm-pedido-logo { width: 54px; height: 54px; flex: none; border-radius: 10px; background: #fff; padding: 6px; box-sizing: border-box; }
.cm-pedido-logo.grande { width: 64px; height: 64px; }
.cm-etapa { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 4px 10px; border-radius: 999px; background: rgba(59, 123, 255, .15); color: #8fb3ff; font-size: 12.5px; }
.cm-etapa::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--cm-azul); }
.cm-arquivo { display: flex; align-items: center; gap: 14px; max-width: 400px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--cm-borda); color: inherit; text-decoration: none; }
.cm-arquivo:hover { background: rgba(255, 255, 255, .04); }
.cm-arquivo > span:not(.cm-arq-ico) { display: grid; flex: 1; min-width: 0; }
.cm-arquivo strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.cm-arquivo small { color: var(--cm-sub); }
.cm-arquivo > .ico { width: 20px; height: 20px; color: #c9d1dd; }
.cm-arquivo img { width: 120px; height: 80px; object-fit: cover; border-radius: 6px; }
.cm-arq-ico { display: grid; place-items: center; width: 36px; height: 42px; border-radius: 6px; background: #2a3240; font-size: 10px; font-weight: 800; color: #fff; flex: none; }
.cm-arq-ico.pdf { background: #e5484d; }
.cm-respostas { all: unset; display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--cm-borda); color: #8fb3ff; font-size: 13px; font-weight: 600; cursor: pointer; }
.cm-respostas:hover { background: rgba(59, 123, 255, .1); }
.cm-respostas .gira { transform: rotate(-90deg); }
.cm-acoes { position: absolute; top: 6px; right: 8px; display: none; gap: 2px; padding: 2px; border-radius: 8px; background: var(--cm-fundo); border: 1px solid var(--cm-borda); }
.cm-msg:hover .cm-acoes, .cm-msg:focus-within .cm-acoes { display: flex; }
.cm-acoes button { all: unset; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; cursor: pointer; color: #c9d1dd; }
.cm-acoes button:hover { background: rgba(255, 255, 255, .08); }
.cm-acoes button.confirmar { background: rgba(229, 72, 77, .25); color: #ff9a8f; }

/* Compor */
.cm-compor { position: relative; border: 1px solid var(--cm-borda); border-radius: 12px; padding: 10px 12px 8px; background: rgba(255, 255, 255, .02); }
.cm-compor:focus-within { border-color: rgba(59, 123, 255, .6); }
.cm-compor textarea { width: 100%; box-sizing: border-box; resize: none; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; font-size: 15px; min-height: 44px; max-height: 160px; }
.cm-compor-acoes { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cm-ferramentas { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cm-enviar { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 54px; height: 42px; border-radius: 9px; background: linear-gradient(180deg, #4a86ff, #2f6bff); color: #fff; cursor: pointer; }
.cm-enviar:hover { filter: brightness(1.08); }
.cm-enviar:disabled { opacity: .6; }
.cm-enviar .ico { width: 20px; height: 20px; }
.cm-dica { margin: 4px 0 0; font-size: 11px; }
.cm-anexos { padding-bottom: 6px; }
.cm-anexos[hidden], .cm-pedido-sel[hidden], .cm-mencoes[hidden], .cm-emojis[hidden] { display: none; }
.cm-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 999px; background: rgba(59, 123, 255, .15); color: #cfe0ff; font-size: 13px; }
.cm-chip button { all: unset; cursor: pointer; opacity: .7; }
.cm-pedido-sel { display: inline-flex; align-items: center; gap: 6px; }
.cm-pedido-sel input { height: 34px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--cm-borda); background: transparent; color: inherit; font: inherit; }
.cm-pedido-sel > button:not(.cm-botao) { all: unset; cursor: pointer; padding: 0 6px; color: var(--cm-sub); }
.cm-mencoes, .cm-emojis { position: absolute; bottom: calc(100% + 6px); left: 12px; z-index: 5; display: flex; flex-wrap: wrap; gap: 4px; max-width: 360px; padding: 6px;
  border-radius: 10px; background: #0f1218; border: 1px solid var(--cm-borda); box-shadow: 0 12px 30px rgba(0, 0, 0, .45); }
.cm-mencoes { flex-direction: column; }
.cm-mencoes button, .cm-emojis button { all: unset; padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.cm-mencoes button:hover, .cm-mencoes button:first-child { background: rgba(59, 123, 255, .18); }
.cm-emojis button { font-size: 20px; padding: 4px 6px; }
.cm-emojis button:hover { background: rgba(255, 255, 255, .08); }
.cm-erro { margin: 0 0 6px; color: #ff9a8f; font-size: 13px; }

/* Lado */
.cm-lado { padding: 18px 16px; overflow-y: auto; }
.cm-lado [hidden] { display: none; }
.cm-lado-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.cm-lado-topo h2 { margin: 0; font-size: 20px; }
.cm-bloco { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--cm-borda); }
.cm-bloco:last-child { border-bottom: 0; }
.cm-bloco h3 { margin: 0 0 12px; font-size: 16px; }
.cm-ped-card { display: flex; gap: 14px; padding: 12px; border: 1px solid var(--cm-borda); border-radius: 10px; }
.cm-ped-card > div { display: grid; gap: 4px; }
.cm-pessoas { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cm-pessoas li { display: flex; align-items: center; gap: 12px; }
.cm-pessoas li > span:last-child { display: grid; }
.cm-pessoas small { color: var(--cm-sub); }
.cm-arquivos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cm-arquivos li { display: grid; gap: 2px; }
.cm-arquivos .cm-arquivo { max-width: none; }
.cm-thread { display: flex; flex-direction: column; height: 100%; }
.cm-thread-lista { flex: 1; overflow-y: auto; }
.cm-thread-sep { margin: 8px 0; font-size: 12px; color: var(--cm-sub); border-bottom: 1px solid var(--cm-borda); padding-bottom: 6px; }
.cm-thread .cm-msg { padding: 8px 4px; }
.cm-thread .cm-av { width: 32px; height: 32px; font-size: 12px; }
.cm-compor-thread { margin-top: 10px; }

/* Menu: contador de não lidas */
.menu-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; display: grid; place-items: center;
  background: #e5484d; color: #fff; font-size: 11px; font-weight: 700; }
.menu-badge[hidden] { display: none; }
html.menu-recolhido .menu-badge { position: absolute; margin: 0; transform: translate(14px, -10px); min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; }

@media (max-width: 1280px) {
  .tela-comunicacao { grid-template-columns: 240px minmax(0, 1fr); }
  .cm-lado { position: fixed; top: 80px; right: 16px; bottom: 16px; width: 330px; z-index: 30; box-shadow: 0 20px 50px rgba(0, 0, 0, .5); display: none; }
  .cm-lado.alternado, .cm-lado.aberto { display: block; }
}
@media (min-width: 1281px) { .cm-lado.alternado:not(.aberto) { display: none; } .tela-comunicacao:has(.cm-lado.alternado:not(.aberto)) { grid-template-columns: 270px minmax(0, 1fr); } }
@media (max-width: 860px) {
  .tela-comunicacao { grid-template-columns: 1fr; height: auto; }
  .cm-conversas { max-height: 260px; }
  .cm-centro { height: 75vh; }
}