/* Módulos específicos de cada sala. */

/* ---------- Mensagens ---------- */
.painel-corpo:has(> .chat) { overflow: hidden; }
.chat { display: grid; grid-template-columns: 330px 1fr; height: 100%; min-height: 420px; }
.chat-lado { border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; background: rgba(9,12,19,.5); }
.chat-topo { display: flex; gap: 6px; padding: 14px 14px 8px; align-items: center; }
.chat-topo select { padding: 9px 30px 9px 12px; font-weight: 600; }
.chat-busca { padding: 0 14px 8px; }
.chat-filtros { display: flex; gap: 6px; padding: 0 14px 10px; align-items: center; }
.chat-filtros > button:not(.btn) { background: var(--bg3); border: 1px solid var(--border); color: var(--text2); padding: 5px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.chat-filtros > button.on { color: var(--accent); background: var(--accent-dim); border-color: rgba(74,222,128,.28); }
.chat-lista { overflow-y: auto; flex: 1; padding: 0 8px 12px; display: flex; flex-direction: column; gap: 2px; }
.chat-item { display: flex; align-items: center; gap: 11px; padding: 10px; border-radius: 12px; border: 1px solid transparent; background: transparent; text-align: left; width: 100%; transition: all .15s; }
.chat-item:hover { background: var(--bg3); }
.chat-item.sel { background: var(--accent-dim); border-color: rgba(74,222,128,.2); }
.avatar-chat { width: 38px; height: 38px; border-radius: 12px; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; background: linear-gradient(135deg, #1c2a44, #131c30); color: var(--blue); border: 1px solid var(--border2); }
.avatar-chat.g { background: linear-gradient(135deg, var(--blue), var(--cyan)); color: #06121f; border: none; }
.chat-item-meio { flex: 1; min-width: 0; }
.chat-item-meio b { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-item-meio small { display: block; color: var(--text3); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.chat-item-fim { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; }
.chat-item-fim time { font-family: var(--mono); font-size: 9.5px; color: var(--text3); }
.badge-nl { font-style: normal; background: var(--accent2); color: #04150a; font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 99px; min-width: 18px; text-align: center; font-family: var(--mono); }
.thread { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: radial-gradient(ellipse at top right, rgba(74,222,128,.04), transparent 60%); }
.thread-topo { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.thread-id b { display: block; font-size: 14px; } .thread-id small { color: var(--text3); font-size: 11.5px; }
.thread-msgs { flex: 1; overflow-y: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 6px; }
.dia-sep { text-align: center; margin: 10px 0 6px; }
.dia-sep span { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--text3); background: var(--bg3); border: 1px solid var(--border); padding: 3px 11px; border-radius: 99px; }
.bolha { max-width: min(74%, 520px); padding: 9px 13px 6px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; position: relative; word-wrap: break-word; overflow-wrap: anywhere; }
.bolha p { white-space: pre-wrap; }
.bolha-meta { display: block; text-align: right; font-family: var(--mono); font-size: 9.5px; color: var(--text3); margin-top: 3px; }
.bolha.dele { align-self: flex-start; background: var(--card2); border: 1px solid var(--border2); border-bottom-left-radius: 4px; }
.bolha.minha { align-self: flex-end; background: linear-gradient(135deg, rgba(34,197,94,.26), rgba(22,163,74,.16)); border: 1px solid rgba(74,222,128,.28); border-bottom-right-radius: 4px; }
.composer { display: flex; gap: 10px; padding: 12px 20px 16px; border-top: 1px solid var(--border); align-items: flex-end; }
.composer textarea { min-height: 42px; max-height: 140px; resize: none; line-height: 1.45; }
.conectar-cta { max-width: 640px; margin: 20px auto; padding: 34px; text-align: center; }
.conectar-icone { width: 62px; height: 62px; border-radius: 18px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; color: var(--accent); background: color-mix(in srgb, currentColor 10%, transparent); border: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
.conectar-cta h3 { font-size: 20px; letter-spacing: -.02em; margin-bottom: 10px; }
.passos { display: flex; flex-direction: column; gap: 8px; text-align: left; max-width: 420px; margin: 18px auto; font-size: 13px; color: var(--text2); }
.passos b { display: inline-flex; width: 20px; height: 20px; border-radius: 50%; background: var(--bg3); border: 1px solid var(--border2); align-items: center; justify-content: center; font-size: 11px; margin-right: 8px; color: var(--accent); font-family: var(--mono); }
.conectar-acoes { margin-top: 20px; display: flex; gap: 10px; justify-content: center; }
.abas-mini { display: flex; gap: 4px; margin-bottom: 16px; background: var(--bg3); padding: 4px; border-radius: 11px; border: 1px solid var(--border); }
.abas-mini button { flex: 1; background: transparent; border: none; padding: 8px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--text2); }
.abas-mini button.on { background: var(--card2); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.inst-lista { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.inst-opcao, .inst-linha { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg3); cursor: pointer; }
.inst-linha { cursor: default; }
.inst-opcao:hover:not(.desab) { border-color: rgba(74,222,128,.3); } .inst-opcao.desab { opacity: .5; cursor: not-allowed; }
.inst-opcao small, .inst-linha small { display: block; color: var(--text3); font-size: 11.5px; margin-top: 2px; }
.ponto-status { width: 9px; height: 9px; border-radius: 50%; background: #475569; flex: none; } .ponto-status.on { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.gira .ic { animation: gira .8s linear infinite; }

/* ---------- Tráfego pago ---------- */
.ads-topo { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; align-items: center; }
.ads-conta { display: flex; gap: 8px; align-items: center; } .ads-conta select { min-width: 220px; font-weight: 600; }
.periodos { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.periodos > button:not(.btn) { background: var(--bg3); border: 1px solid var(--border); color: var(--text2); padding: 6px 12px; border-radius: 9px; font-size: 12px; font-weight: 600; }
.periodos > button.on { color: var(--orange2); background: var(--orange-dim); border-color: rgba(249,115,22,.3); }
.datas-linha { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; color: var(--text3); } .datas-linha input { width: auto; }
.ads-kpis { grid-template-columns: repeat(auto-fit, minmax(116px, 1fr)); }
.ads-kpis .kpi::before { background: var(--orange); }
.saldo { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; } .saldo b { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--accent); } .saldo b.baixo { color: var(--red); } .saldo span { color: var(--text3); font-size: 12.5px; }
.saldo-det { display: flex; justify-content: space-between; font-size: 12.5px; padding: 6px 0; border-top: 1px solid var(--border); color: var(--text2); } .saldo-det b { color: var(--text); }
.grafico { width: 100%; height: auto; display: block; }
.grafico text { fill: var(--text3); font: 500 10px var(--mono); }
.grafico-eixo line { stroke: var(--border2); stroke-width: 1; }

/* ---------- Clientes ---------- */
.grade-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.cliente { cursor: pointer; display: flex; flex-direction: column; gap: 14px; outline: none; }
.cliente:hover, .cliente:focus-visible { border-color: rgba(96,165,250,.45); transform: translateY(-1px); }
.cliente-topo { display: flex; align-items: center; gap: 12px; } .cliente-topo b { display: block; font-size: 14.5px; } .cliente-topo small { color: var(--text3); font-size: 11.5px; }
.cliente-meio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .cliente-meio small { display: block; color: var(--text3); font-size: 10px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .08em; } .cliente-meio b { font-size: 13.5px; }

/* ---------- Financeiro ---------- */
.mes-nav { display: flex; align-items: center; gap: 6px; margin-bottom: 16px; } .mes-nav h3 { font-size: 18px; letter-spacing: -.01em; min-width: 170px; text-align: center; }
.lanc-lista { display: flex; flex-direction: column; gap: 4px; }
.lanc { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 10px; font-size: 13px; transition: background .15s; } .lanc:hover { background: var(--bg3); }
.lanc-dia { font-family: var(--mono); font-size: 11px; color: var(--text3); width: 38px; flex: none; }
.lanc-valor { font-variant-numeric: tabular-nums; white-space: nowrap; } .lanc-valor.receita { color: var(--amber); } .lanc-valor.despesa { color: var(--red); }
.lanc.pago .lanc-valor { opacity: .75; }
.lanc button.tag { cursor: pointer; }

/* ---------- Infraestrutura ---------- */
.ativos { display: flex; flex-direction: column; gap: 2px; }
.ativo { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; font-size: 13px; } .ativo:hover { background: var(--bg3); }
.ativo small { color: var(--text3); font-size: 11.5px; }
.led-status { width: 10px; height: 10px; border-radius: 50%; flex: none; background: #475569; }
.led-status.ok { background: var(--ok); box-shadow: 0 0 9px var(--ok); } .led-status.lento { background: var(--aviso); box-shadow: 0 0 9px var(--aviso); } .led-status.fora { background: var(--erro); box-shadow: 0 0 9px var(--erro); animation: piscar 1.1s infinite; }

/* ---------- Agentes ---------- */
.contrato { margin-bottom: 16px; } .contrato summary { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13.5px; list-style: none; } .contrato summary::-webkit-details-marker { display: none; }
.contrato summary .texto-fraco { margin-left: auto; font-size: 11.5px; }
.contrato[open] summary { margin-bottom: 12px; }
.escopos { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; } .escopos small { color: var(--text3); }
.agente { display: flex; flex-direction: column; gap: 12px; }
.agente-rodape { display: flex; align-items: center; gap: 8px; font-size: 11.5px; border-top: 1px solid var(--border); padding-top: 12px; }
.token-caixa { display: flex; gap: 8px; margin: 14px 0; } .token-caixa input { font-family: var(--mono); font-size: 12px; }

/* ---------- Fluxos e atividade ---------- */
.fluxos-lista { display: flex; flex-direction: column; gap: 10px; }
.fluxo-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; flex-wrap: wrap; }
.fluxo-rota { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; min-width: 220px; }
.linha-tempo { display: flex; flex-direction: column; position: relative; }
.linha-tempo::before { content: ''; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 1px; background: var(--border2); }
.lt-item { display: flex; gap: 14px; padding: 9px 0; position: relative; font-size: 13px; align-items: flex-start; }
.lt-item > i { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex: none; position: relative; z-index: 1; box-shadow: 0 0 8px currentColor; }
.lt-item time { font-family: var(--mono); font-size: 10.5px; color: var(--text3); white-space: nowrap; margin-top: 3px; }

.chat-lado, .thread { min-width: 0; }
.so-mobile { display: none; }
@media (max-width: 900px) {
  .so-mobile { display: inline-flex; }
  .chat.com-thread .chat-lado { display: none; }
  .chat.com-thread .thread { min-height: calc(100dvh - 260px); }
  .chat:not(.com-thread) .thread { display: none; }
  .chat { grid-template-columns: minmax(0, 1fr); height: auto; }
  .chat-lado { max-height: 320px; border-right: none; border-bottom: 1px solid var(--border); }
  .thread { min-height: 420px; }
}