/* A seção CHATS (ver chats.js). Usa os tokens do index.html e o kit s-* do secoes.css. */

.sec-corpo.ch-corpo { overflow:hidden; }
.ch-raiz { height:100%; }
.ch-ic { flex:none; display:block; }

/* ---------- lista ---------------------------------------------------------------------------------- */
.ch-erro-lista { padding:8px 12px; }
.ch-linha { position:relative; }
.ch-item .s-item-tit { justify-content:space-between; }
.ch-item-nome { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ch-item { padding:10px 38px 10px 12px; }
.ch-item .s-item-tit { font-size:13.5px; }
.ch-item .s-item-sub { font-size:12px; opacity:.85; }
.ch-item-hora { flex:none; font-size:11px; font-weight:450; color:var(--muted); font-variant-numeric:tabular-nums; }
.ch-item-mais {
  position:absolute; top:8px; right:6px; width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  border:none; border-radius:8px; background:none; color:var(--muted); cursor:pointer; opacity:0; transition:opacity .15s;
}
.ch-linha:hover .ch-item-mais, .ch-item-mais:focus-visible, .ch-item-mais[aria-expanded="true"], .ch-item.on + .ch-item-mais { opacity:1; }
.ch-item-mais:hover { color:var(--text); background:var(--vidro-leve); }
.ch-item-mais:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
@media (hover:none) { .ch-item-mais { opacity:1; } }
/* A hora fica à esquerda do botão de opções */
.ch-item .ch-item-hora { margin-right:0; }

/* ---------- coluna da conversa --------------------------------------------------------------------- */
.ch-col { position:relative; }
.ch-vazio-detalhe { margin:auto; }
.ch-conversa { flex:1; min-height:0; display:flex; flex-direction:column; }
.ch-conversa[hidden], .ch-vazio-detalhe[hidden] { display:none; }

.ch-topo {
  display:flex; align-items:center; gap:8px; padding:8px 12px; min-height:52px;
  border-bottom:1px solid var(--vidro-brd);
}
.ch-topo-centro { flex:1; min-width:0; display:flex; align-items:center; gap:10px; }
.ch-titulo {
  min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  border:none; background:none; color:var(--text); font:inherit; font-size:15px; font-weight:650; cursor:pointer;
  padding:4px 6px; border-radius:8px;
}
.ch-titulo:hover { background:var(--vidro-leve); }
.ch-modelo {
  flex:none; display:inline-flex; align-items:center; gap:4px; padding:4px 9px; border-radius:999px;
  border:1px solid var(--linha-fraca); background:none; color:var(--muted); font:inherit; font-size:12px; font-weight:600; cursor:pointer;
}
.ch-modelo:hover, .ch-modelo[aria-expanded="true"] { color:var(--accent); border-color:var(--line); }
.ch-modelo[hidden] { display:none; }
.ch-titulo:focus-visible, .ch-modelo:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.ch-voltar { padding:6px 10px 6px 6px; }
@media (max-width:860px) {
  .ch-topo { padding:8px; gap:6px; }
  .ch-topo-centro { flex-direction:column; align-items:center; gap:2px; }
  .ch-titulo { font-size:14.5px; padding:2px 6px; }
  .ch-modelo { border:none; padding:0 6px; font-size:11.5px; }
}

.ch-rolagem { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; }
.ch-msgs {
  max-width:820px; margin:0 auto; padding:20px 22px 24px; display:flex; flex-direction:column; gap:16px;
}
@media (max-width:860px) { .ch-msgs { padding:14px 12px 18px; gap:14px; } }
.ch-vazio-conversa { padding-top:60px; }

/* ---------- mensagens ------------------------------------------------------------------------------ */
.ch-minha { display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.ch-minha-projeto { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600; color:var(--muted); }
.ch-minhas-fotos { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; max-width:85%; }
.ch-minha-foto {
  width:140px; height:140px; padding:0; border:1px solid var(--vidro-brd); border-radius:14px; overflow:hidden;
  background:rgba(255,255,255,.04); cursor:zoom-in;
}
.ch-minha-foto img { width:100%; height:100%; object-fit:cover; display:block; }
.ch-minhas-fotos .ch-img-sem { width:140px; height:140px; }
.ch-bolha-linha { display:flex; align-items:flex-start; gap:6px; justify-content:flex-end; max-width:85%; }
.ch-bolha {
  min-width:0; padding:10px 14px; border-radius:18px; border:1px solid var(--vidro-brd);
  background:linear-gradient(rgba(56,189,248,.22), rgba(56,189,248,.14)); box-shadow:var(--vidro-topo);
  color:var(--text); font-size:14.5px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere;
}
.ch-acao-msg {
  flex:none; width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center;
  border:none; border-radius:8px; background:none; color:var(--muted); cursor:pointer;
}
.ch-acao-msg:hover { color:var(--text); background:var(--vidro-leve); }
.ch-acao-msg:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.ch-bolha-linha .ch-acao-msg { margin-top:6px; opacity:0; transition:opacity .15s; }
.ch-bolha-linha:hover .ch-acao-msg, .ch-bolha-linha .ch-acao-msg:focus-visible { opacity:1; }
@media (hover:none) { .ch-bolha-linha .ch-acao-msg { display:none; } }

.ch-resp { display:flex; flex-direction:column; gap:8px; min-width:0; }
.ch-resp-acoes { display:flex; gap:2px; margin-top:-4px; }

.ch-nota {
  display:flex; align-items:flex-start; gap:8px; padding:11px 13px; border-radius:14px; font-size:13.5px; line-height:1.45;
  background:rgba(245,181,68,.09); border:1px solid rgba(245,181,68,.4); color:var(--text);
}
.ch-nota .ch-ic { color:var(--warn); margin-top:2px; }

.ch-pensando { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:13.5px; padding:2px 0; min-width:0; }
.ch-pensando[hidden] { display:none; }
.ch-pensando-txt { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ch-girando {
  flex:none; width:14px; height:14px; border-radius:50%;
  border:2px solid rgba(255,255,255,.18); border-top-color:var(--accent); animation:ch-gira .8s linear infinite;
}
@keyframes ch-gira { to { transform:rotate(360deg); } }

/* ---------- markdown ------------------------------------------------------------------------------- */
.ch-md { color:var(--text); font-size:14.5px; line-height:1.62; overflow-wrap:anywhere; min-width:0; }
.ch-md > :first-child { margin-top:0; }
.ch-md > :last-child { margin-bottom:0; }
.ch-md p { margin:0 0 10px; }
.ch-md .ch-h { font-weight:700; line-height:1.3; margin:16px 0 6px; }
.ch-md .ch-h1 { font-size:19px; }
.ch-md .ch-h2 { font-size:17px; }
.ch-md .ch-h3, .ch-md .ch-h4 { font-size:15px; }
.ch-md strong { font-weight:700; color:var(--text); }
.ch-md a { color:var(--accent); text-decoration:underline; text-decoration-color:rgba(56,189,248,.4); text-underline-offset:2px; }
.ch-md a:hover { text-decoration-color:var(--accent); }
.ch-md ul, .ch-md ol { margin:0 0 10px; padding-left:22px; }
.ch-md li { margin:3px 0; }
.ch-md li > ul, .ch-md li > ol, .ch-md li > p { margin-bottom:2px; margin-top:2px; }
.ch-md li::marker { color:var(--muted); }
.ch-md blockquote { margin:6px 0 10px; padding:2px 12px; border-left:3px solid var(--accent); color:var(--muted); }
.ch-md hr { border:none; height:1px; background:var(--vidro-brd); margin:14px 0; }
.ch-md code {
  font-family:var(--mono); font-size:.88em;
  background:rgba(255,255,255,.08); border-radius:5px; padding:1px 5px;
}
.ch-codigo {
  margin:6px 0 12px; border-radius:12px; overflow:hidden; background:rgba(0,0,0,.35); border:1px solid var(--vidro-brd);
}
.ch-codigo-topo {
  display:flex; align-items:center; justify-content:space-between; gap:10px; padding:5px 8px 5px 12px;
  border-bottom:1px solid var(--vidro-brd); font-size:12px; font-weight:600; color:var(--muted);
}
.ch-codigo-copiar {
  display:inline-flex; align-items:center; gap:5px; padding:4px 7px; border:none; border-radius:7px; background:none;
  color:var(--muted); font:inherit; font-size:12px; font-weight:600; cursor:pointer;
}
.ch-codigo-copiar:hover { color:var(--text); background:var(--vidro-leve); }
.ch-codigo-copiar:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.ch-codigo pre { margin:0; padding:12px; overflow-x:auto; }
.ch-codigo pre code {
  background:none; padding:0; border-radius:0; font-size:12.5px; line-height:1.55; white-space:pre; overflow-wrap:normal;
}
.ch-tabela { overflow-x:auto; margin:6px 0 12px; border:1px solid var(--vidro-brd); border-radius:10px; }
.ch-tabela table { border-collapse:collapse; font-size:13.5px; min-width:100%; }
.ch-tabela th, .ch-tabela td { padding:7px 10px; text-align:left; border-bottom:1px solid var(--vidro-brd); vertical-align:top; overflow-wrap:normal; }
.ch-tabela th { background:rgba(255,255,255,.05); font-weight:650; white-space:nowrap; }
.ch-tabela tr:last-child td { border-bottom:none; }

/* ---------- imagens geradas e cards de tarefa -------------------------------------------------------- */
.ch-gerada {
  display:block; width:min(100%, 520px); padding:0; border:1px solid var(--vidro-brd); border-radius:16px; overflow:hidden;
  background:rgba(255,255,255,.04); cursor:zoom-in; margin-bottom:4px;
}
div.ch-gerada { cursor:default; }
.ch-gerada img { display:block; width:100%; height:auto; object-fit:cover; }
.ch-gerada:focus-visible, .ch-minha-foto:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.ch-img-sem {
  width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:12px;
  border:none; border-radius:14px; background:rgba(255,255,255,.04); color:var(--muted); font:inherit; font-size:12.5px;
  cursor:pointer; text-align:center;
}
.ch-img-sem:hover { color:var(--text); }

.ch-vivo-imgs:empty, .ch-vivo-tarefas:empty { display:none; }
.ch-vivo-imgs, .ch-vivo-tarefas { display:flex; flex-direction:column; gap:8px; }
.ch-tarefa {
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px;
  border:1px solid var(--vidro-brd); background:var(--vidro-leve); box-shadow:var(--vidro-topo); max-width:560px;
}
.ch-tarefa-ic {
  flex:none; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:var(--ok); background:rgba(45,212,167,.16);
}
.ch-tarefa.enviada .ch-tarefa-ic { color:var(--accent); background:rgba(56,189,248,.16); }
.ch-tarefa.fora { opacity:.55; }
.ch-tarefa.fora .ch-tarefa-ic { color:var(--muted); background:rgba(107,126,163,.16); }
.ch-tarefa.fora b { text-decoration:line-through; }
.ch-tarefa-txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.ch-tarefa-txt small { font-size:11.5px; font-weight:600; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ch-tarefa-txt b {
  font-size:13.5px; font-weight:600; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:anywhere;
}
.ch-tarefa-acao {
  flex:none; border:none; background:none; color:var(--accent); font:inherit; font-size:13px; font-weight:700; cursor:pointer;
  padding:6px 4px; border-radius:6px;
}
.ch-tarefa-acao:hover { text-decoration:underline; }
.ch-tarefa-acao:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }

/* ---------- campo ---------------------------------------------------------------------------------- */
.ch-composer { flex:none; padding:8px 16px 12px; max-width:852px; width:100%; margin:0 auto; }
@media (max-width:860px) { .ch-composer { padding:6px 10px calc(10px + env(safe-area-inset-bottom, 0px)); } }
.ch-fotos { display:flex; gap:8px; overflow-x:auto; padding:2px 2px 8px; }
.ch-fotos[hidden], .ch-preso[hidden] { display:none; }
.ch-foto {
  position:relative; flex:none; width:60px; height:60px; border-radius:10px; overflow:hidden; border:1px solid var(--vidro-brd);
}
.ch-foto img { width:100%; height:100%; object-fit:cover; display:block; }
.ch-foto.subindo img { filter:brightness(.5); }
.ch-foto .ch-girando { position:absolute; left:50%; top:50%; margin:-7px 0 0 -7px; border-color:rgba(255,255,255,.3); border-top-color:#fff; }
.ch-foto-tirar {
  position:absolute; top:3px; right:3px; width:20px; height:20px; border-radius:50%; border:none; padding:0;
  display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.65); color:#fff; cursor:pointer;
}
.ch-preso {
  display:inline-flex; align-items:center; gap:6px; max-width:90%; margin:0 0 8px 4px; padding:5px 6px 5px 10px; border-radius:999px;
  background:rgba(56,189,248,.14); border:1px solid rgba(56,189,248,.45); font-size:13px; font-weight:600; color:var(--text);
}
.ch-preso .ch-ic:first-child { color:var(--accent); }
.ch-preso span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ch-preso button { border:none; background:none; color:var(--muted); cursor:pointer; padding:2px; display:flex; border-radius:50%; }
.ch-preso button:hover { color:var(--text); }

.ch-caixa {
  display:flex; align-items:flex-end; gap:4px; padding:6px; border-radius:22px;
  background:var(--vidro-leve); border:1px solid var(--vidro-brd); box-shadow:var(--vidro-topo);
  transition:border-color .15s;
}
.ch-caixa:focus-within { border-color:rgba(56,189,248,.55); }
.ch-ic-btn {
  flex:none; width:36px; height:36px; border-radius:50%; border:none; background:none; color:var(--text);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.ch-ic-btn:hover, .ch-ic-btn[aria-expanded="true"] { background:rgba(255,255,255,.08); }
.ch-campo {
  flex:1; min-width:0; min-height:36px; max-height:220px; resize:none; padding:8px 6px; margin:0;
  border:none !important; outline:none; background:none !important; box-shadow:none !important;
  color:var(--text); font:inherit; font-size:14.5px; line-height:1.4;
}
.ch-campo::placeholder { color:var(--muted); }
.ch-qualidade {
  flex:none; height:26px; min-width:34px; padding:0 7px; margin-bottom:5px; border-radius:8px;
  border:1px solid var(--linha-fraca); background:none; color:var(--text); font:inherit; font-size:11.5px; font-weight:800;
  letter-spacing:.4px; cursor:pointer;
}
.ch-qualidade:hover { border-color:var(--accent); color:var(--accent); }
.ch-enviar {
  flex:none; width:36px; height:36px; border-radius:50%; border:none; display:flex; align-items:center; justify-content:center;
  background:var(--accent); color:#04121f; cursor:pointer; transition:filter .15s, background .15s;
}
.ch-enviar:hover { filter:brightness(1.08); }
.ch-enviar:disabled { background:rgba(255,255,255,.1); color:var(--muted); cursor:default; filter:none; }
.ch-enviar.parar { background:var(--text); color:var(--bg); }
.ch-quadrado { width:12px; height:12px; border-radius:2.5px; background:currentColor; display:block; }
.ch-ic-btn:focus-visible, .ch-qualidade:focus-visible, .ch-enviar:focus-visible, .ch-foto-tirar:focus-visible, .ch-preso button:focus-visible {
  outline:2px solid var(--accent); outline-offset:2px;
}
.ch-dica { margin:6px 0 0; text-align:center; font-size:11.5px; color:var(--muted); }
@media (max-width:860px), (hover:none) { .ch-dica { display:none; } }

/* ---------- arrastar foto --------------------------------------------------------------------------- */
.ch-soltar {
  position:absolute; inset:8px; z-index:5; display:flex; align-items:center; justify-content:center; pointer-events:none;
  border:2px dashed var(--accent); border-radius:16px; background:rgba(4,12,24,.72);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.ch-soltar[hidden] { display:none; }
.ch-soltar div { display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--accent); font-weight:600; }

/* ---------- menu suspenso --------------------------------------------------------------------------- */
.ch-menu {
  position:fixed; z-index:80; min-width:200px; max-width:min(320px, calc(100vw - 16px)); padding:5px;
  border-radius:14px; background:var(--vidro-denso); border:1px solid var(--vidro-brd);
  -webkit-backdrop-filter:var(--desfoque); backdrop-filter:var(--desfoque);
  box-shadow:var(--vidro-topo), 0 16px 40px rgba(0,0,0,.5);
}
.ch-menu-item {
  width:100%; display:flex; align-items:center; gap:10px; padding:9px 10px; border:none; border-radius:9px;
  background:none; color:var(--text); font:inherit; font-size:13.5px; text-align:left; cursor:pointer;
}
.ch-menu-item:hover, .ch-menu-item:focus-visible { background:rgba(255,255,255,.07); outline:none; }
.ch-menu-item > .ch-ic:first-child { color:var(--muted); }
.ch-menu-item.marcado > .ch-ic:last-child { color:var(--accent); }
.ch-menu-item.perigo, .ch-menu-item.perigo > .ch-ic { color:var(--err); }
.ch-menu-txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.ch-menu-txt b { font-weight:600; }
.ch-menu-txt small { font-size:11.5px; color:var(--muted); }
.ch-menu-div { height:1px; margin:4px 6px; background:var(--vidro-brd); }

/* ---------- seletor de projeto ---------------------------------------------------------------------- */
.ch-projetos { display:flex; flex-direction:column; gap:3px; max-height:min(380px, 50vh); overflow:auto; }
.ch-projeto {
  display:flex; align-items:center; gap:12px; padding:8px; border:1px solid transparent; border-radius:12px;
  background:none; color:var(--text); font:inherit; text-align:left; cursor:pointer;
}
.ch-projeto:hover, .ch-projeto:focus-visible { background:var(--vidro-leve); border-color:var(--vidro-brd); outline:none; }
.ch-projeto.on { background:rgba(56,189,248,.14); border-color:rgba(56,189,248,.35); }
.ch-projeto > .ch-ic { color:var(--accent); }
.ch-projeto-logo {
  flex:none; width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:15px; object-fit:contain; background:#e9e9ef;
}
.ch-projeto-nome { flex:1; min-width:0; display:flex; flex-direction:column; font-size:14.5px; font-weight:600; overflow:hidden; }
.ch-projeto-nome small { font-size:11.5px; font-weight:450; color:var(--muted); }

/* ---------- imagem em tela cheia -------------------------------------------------------------------- */
.ch-tela {
  position:fixed; inset:0; z-index:75; display:flex; flex-direction:column; background:rgba(0,0,0,.96);
}
.ch-tela-topo { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px; flex-wrap:wrap; }
.ch-tela-info { display:flex; gap:6px; }
.ch-tela-acoes { display:flex; gap:6px; margin-left:auto; }
.ch-tela-acoes a.s-btn { text-decoration:none; }
.ch-tela-palco { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:0 16px; }
.ch-tela-palco img { max-width:100%; max-height:100%; object-fit:contain; border-radius:8px; }
.ch-tela-prompt {
  max-height:22vh; overflow:auto; padding:12px 18px calc(14px + env(safe-area-inset-bottom, 0px));
  color:rgba(255,255,255,.75); font-size:13px; line-height:1.45; text-align:center;
}

@media (prefers-reduced-motion: reduce) {
  .ch-girando { animation-duration:2.4s; }
  .ch-item-mais, .ch-bolha-linha .ch-acao-msg, .ch-caixa, .ch-enviar { transition:none; }
}

/* ---------- confirmação curta, no alto da conversa ------------------------------------------------- */
.ch-leve {
  position:absolute; top:62px; left:50%; z-index:6; transform:translate(-50%, -6px); opacity:0; pointer-events:none;
  max-width:calc(100% - 32px); padding:7px 14px; border-radius:999px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:var(--vidro-denso); border:1px solid var(--vidro-brd); box-shadow:var(--vidro-topo), 0 10px 30px rgba(0,0,0,.4);
  color:var(--text); font-size:13px; font-weight:600; transition:opacity .16s, transform .16s;
}
.ch-leve.on { opacity:1; transform:translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .ch-leve { transition:none; } }