/* =====================================================================
   CHAT EXPANDIDO (30/09, opção A do autor; migração 0175)
   Abas SISTEMA e ✉ com selo de não lidas, a lista de conversas, a conversa
   em balões, o menu do nome e o selo no botão 💬 CHAT. A base do painel
   continua em zodiac.css.
   ===================================================================== */
.col-chat-tabs{gap:3px}
.col-chat-tabs button{position:relative;min-width:0;padding:0 3px;letter-spacing:.4px}
.col-chat-tabs [data-chat-tab="pm"]{flex:0 0 34px;font-size:calc(12px*var(--text-scale,1))}
.col-chat-tabs .col-chat-min{flex:0 0 26px!important}
.col-chat-badge{position:absolute;top:-6px;right:1px;min-width:15px;height:15px;padding:0 4px;border-radius:8px;
  background:#c0392b;color:#fff;font-size:9px;font-weight:900;line-height:15px;letter-spacing:0;text-align:center;
  box-shadow:0 0 0 2px rgba(9,9,13,.94);pointer-events:none}
.col-chat-badge.hidden{display:none}
.col-chat-toggle{position:relative}
.col-chat-toggle .col-chat-badge{top:-7px;right:-6px;color:#fff}
.col-chat-form.hidden,#colChatItemBtn.hidden{display:none}

/* SISTEMA: só leitura, com a barra âmbar do canal. */
.col-chat-sistema{border-left:2px solid #e6a23c;padding-left:7px}
.col-chat-sistema .col-chat-msg-head b{color:#e6a23c;letter-spacing:1px}

/* ✉ a lista de conversas */
.col-chat-conversa{position:relative;display:flex;align-items:center;gap:8px;width:100%;padding:7px 8px;border-radius:5px;
  border:1px solid rgba(120,110,100,.25);background:rgba(25,20,15,.6);color:#ddd5ca;cursor:var(--cur-mao,pointer);text-align:left}
.col-chat-conversa:hover,.col-chat-conversa:focus-visible{border-color:#c79a4a;background:rgba(60,45,25,.55)}
.col-chat-conversa.nova{border-color:rgba(217,138,216,.55)}
.col-chat-conversa .col-chat-rosto{flex:0 0 auto}
.col-chat-conversa-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.col-chat-conversa-txt b{color:#f0e2cc;font-size:calc(10.5px*var(--text-scale,1))}
.col-chat-conversa-txt small{color:#8f857a;font-size:calc(9px*var(--text-scale,1));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.col-chat-conversa .col-chat-badge{position:static;box-shadow:none}
.col-chat-online{display:inline-block;width:7px;height:7px;margin-left:5px;border-radius:50%;background:#3fbf5f;vertical-align:middle}
.col-chat-amigo{color:#e8cf9c}
.col-chat-bloqueados-link{margin-top:auto;align-self:center;border:0;background:none;color:#7d746a;cursor:var(--cur-mao,pointer);
  font-size:calc(9px*var(--text-scale,1));padding:4px}
.col-chat-bloqueados-link:hover{color:#e07a5f}

/* ✉ a conversa */
.col-chat-pm-head{display:flex;align-items:center;gap:7px;padding:6px 8px;border-bottom:1px solid rgba(255,255,255,.07)}
.col-chat-pm-head.hidden{display:none}
.col-chat-voltar,.col-chat-pm-mais{flex:0 0 auto;border:1px solid rgba(120,110,100,.35);background:rgba(20,17,14,.6);color:#d8c39c;
  border-radius:4px;padding:3px 8px;cursor:var(--cur-mao,pointer);font-size:calc(9.5px*var(--text-scale,1))}
.col-chat-pm-mais{margin-left:auto;font-size:14px;line-height:1}
.col-chat-pm-quem{display:flex;align-items:center;gap:7px;min-width:0;border:0;background:none;color:inherit;cursor:var(--cur-mao,pointer);text-align:left;padding:0}
.col-chat-pm-quem span{display:flex;flex-direction:column;min-width:0}
.col-chat-pm-quem b{color:#f0e2cc;font-size:calc(10.5px*var(--text-scale,1))}
.col-chat-pm-quem small{color:#8f857a;font-size:calc(9px*var(--text-scale,1));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.col-chat-balao{position:relative;max-width:80%;padding:6px 9px;border-radius:9px;word-break:break-word}
.col-chat-balao p{margin:0;color:#ece3d6;font-size:calc(10.5px*var(--text-scale,1));line-height:1.4}
.col-chat-balao time{display:block;margin-top:2px;color:#8f857a;font-size:calc(8px*var(--text-scale,1));text-align:right}
.col-chat-balao.outro{align-self:flex-start;background:rgba(70,45,70,.55);border:1px solid rgba(217,138,216,.35)}
.col-chat-balao.eu{align-self:flex-end;background:rgba(60,45,25,.75);border:1px solid rgba(199,154,74,.45)}
.col-chat-balao .col-chat-denunciar{position:absolute;top:3px;right:-16px}

/* O menu do nome */
.col-chat-menu{position:fixed;z-index:1210;width:200px;padding:6px;border-radius:7px;border:1px solid #8a6b36;
  background:linear-gradient(#211a12,#140f0a);box-shadow:0 10px 30px rgba(0,0,0,.6)}
.col-chat-menu h6{margin:2px 4px 6px;color:#f0e2cc;font-size:calc(11px*var(--text-scale,1))}
.col-chat-menu h6 small{display:block;color:#8f857a;font-size:calc(9px*var(--text-scale,1));font-weight:400}
.col-chat-menu button{display:flex;gap:8px;width:100%;padding:7px 8px;border:0;border-radius:4px;background:none;color:#ddd5ca;
  font-size:calc(11px*var(--text-scale,1));text-align:left;cursor:var(--cur-mao,pointer)}
.col-chat-menu button:hover:not(:disabled),.col-chat-menu button:focus-visible{background:rgba(199,154,74,.15)}
.col-chat-menu button.principal:not(:disabled){background:rgba(217,138,216,.15);color:#f3c6f2}
.col-chat-menu button.perigo{color:#e07a5f}
.col-chat-menu button:disabled{color:#5f574f;cursor:var(--cur-seta,default)}

/* Celular: o painel já vira folha; a aba ✉ fica compacta. */
@media (max-width:640px){
  .col-chat-tabs button{letter-spacing:.3px}
  .col-chat-balao .col-chat-denunciar{right:-14px}
}

/* CHAT COM LETRA MAIOR (03/10, pedido do autor: "aumente os textos do chat").
   Antes a mensagem era 10px e o nome 9px. A janela cresce um pouco no PC para
   caber a letra nova sem quebrar cada frase em três linhas. */
#colChatPanel .col-chat-body{width:min(390px,calc(100vw - 24px));height:min(440px,58dvh)}
#colChatPanel .col-chat-tabs button{font-size:calc(10px*var(--text-scale,1))}
#colChatPanel .col-chat-msg-head b{font-size:calc(11.5px*var(--text-scale,1))}
#colChatPanel .col-chat-msg-head time{font-size:calc(9.5px*var(--text-scale,1))}
#colChatPanel .col-chat-identidade{font-size:calc(9.5px*var(--text-scale,1))}
#colChatPanel .col-chat-text{font-size:calc(12.5px*var(--text-scale,1));line-height:1.4}
#colChatPanel .col-chat-empty{font-size:calc(11px*var(--text-scale,1))}
#colChatPanel .col-chat-item-link{font-size:calc(12px*var(--text-scale,1))}
#colChatPanel .col-chat-form input{font-size:calc(12.5px*var(--text-scale,1))}
#colChatPanel .col-chat-region{font-size:calc(10.5px*var(--text-scale,1))}
#colChatPanel .col-chat-region select{font-size:calc(11.5px*var(--text-scale,1))}
#colChatPanel .col-chat-conversa-txt b,#colChatPanel .col-chat-pm-quem b{font-size:calc(12px*var(--text-scale,1))}
#colChatPanel .col-chat-conversa-txt small,#colChatPanel .col-chat-pm-quem small{font-size:calc(10px*var(--text-scale,1))}
#colChatPanel .col-chat-balao p{font-size:calc(12.5px*var(--text-scale,1))}
#colChatPanel .col-chat-balao time{font-size:calc(9px*var(--text-scale,1))}
#colChatPanel .col-chat-denunciar{font-size:calc(11px*var(--text-scale,1))}
@media(max-width:620px){#colChatPanel .col-chat-body{width:auto;height:min(340px,48dvh)}}
/* SELOS VIP E FUNDADOR (03/10, foto do autor: "o vip ... ta quase saindo da caixa"). A regra do
   nome acima (11,5px) vencia o 8px do selo (styles/vip.css) e a caixa tinha 15px fixos. Aqui o
   selo tem letra própria, cresce com o texto e ganha folga em volta. */
#colChatPanel .col-chat-msg-head .col-chat-vip,#colChatPanel .col-chat-msg-head .col-chat-fundador{
  box-sizing:border-box;height:auto;min-height:calc(17px*var(--text-scale,1));padding:2px 7px 2px 2px;vertical-align:middle;align-self:center}
#colChatPanel .col-chat-msg-head .col-chat-fundador{padding:2px 7px}
#colChatPanel .col-chat-msg-head .col-chat-vip>b,#colChatPanel .col-chat-msg-head .col-chat-fundador>b{font-size:calc(9px*var(--text-scale,1))}
#colChatPanel .col-chat-msg-head .col-chat-vip>.col-icone,#colChatPanel .col-chat-msg-head .col-chat-vip>.col-icone img{
  width:calc(13px*var(--text-scale,1));height:calc(13px*var(--text-scale,1))}

/* TRAVA DE 5 SEGUNDOS (03/10): o ➤ mostra quanto falta e não envia antes. */
#colChatPanel .col-chat-form button[type=submit].col-chat-espera{color:#c79a4a;font-weight:900;
  font-size:calc(11px*var(--text-scale,1));cursor:var(--cur-seta,default);opacity:.85}

/* O ITEM APARECE ANTES DE ANEXAR (03/10, pedido do autor: "é ruim saber pelo nome").
   O seletor mostra a arte de cada item, com +N e a cor da raridade; o anexo
   escolhido aparece com a arte em cima do campo de mensagem. */
#colChatPanel .col-chat-attach{font-size:calc(11px*var(--text-scale,1))}
.col-chat-attach-icone,.col-chat-picker-icone{flex:none;object-fit:contain;border-radius:4px;
  background:rgba(0,0,0,.35);border:1px solid rgba(216,163,74,.25)}
.col-chat-attach-icone{width:40px;height:40px}
.col-chat-attach>span{flex:1;min-width:0;overflow-wrap:anywhere}
.col-chat-picker-card.col-chat-picker-grade{width:min(460px,100%)}
.col-chat-picker-grade .col-chat-picker-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px}
.col-chat-picker-grade .col-chat-picker-item{display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:6px 4px;text-align:center;font-size:calc(10px*var(--text-scale,1));line-height:1.2;min-width:0}
.col-chat-picker-icone{width:56px;height:56px}
.col-chat-picker-nome{display:block;max-width:100%;overflow-wrap:anywhere}
.col-chat-picker-mais{color:#ffd56a;font-weight:900}

/* Nível na linha do nome quando o retrato tem moldura (04/10, src/ui/chat-ui.js nivelNaLinha): mesma cor do R. */
.col-chat-identidade .col-chat-nivel{color:#a99d86;font-weight:600;letter-spacing:.02em}

/* MERCADO NO CHAT (07/10, 1030): "@fulano acabou de anunciar [ITEM] no Mercado", 2 min no GLOBAL; o toque leva ao anúncio. */
.col-chat-mercado{border-left:2px solid #4fb3a5;padding-left:7px;cursor:var(--cur-mao,pointer);background:rgba(40,70,64,.18);border-radius:0 5px 5px 0}
.col-chat-mercado:hover,.col-chat-mercado:focus-visible{background:rgba(60,110,100,.3);outline:none}
.col-chat-mercado .col-chat-msg-head b{color:#6fd3c3;letter-spacing:1px}
.col-chat-mercado .col-chat-text{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.col-chat-mercado-nome{color:#f0c96a}
.col-chat-mercado .col-chat-mercado-item{align-self:center;pointer-events:none;padding:2px 8px 2px 2px}
.col-chat-mercado .col-chat-mercado-item .col-chat-item-link-icone{width:26px;height:26px}
.col-chat-mercado-sub{display:block;color:#9fc9c1;font-size:calc(10.5px*var(--text-scale,1));margin-top:2px}
/* PK no chat (22/10, SQL 1767): toda luta de PK, o Herói, quem virou PK alto e a recompensa resgatada */
.col-chat-pk{border-left:2px solid #a3342a;padding-left:7px;background:rgba(90,24,18,.2);border-radius:0 5px 5px 0}
.col-chat-pk .col-chat-msg-head b{color:#ff8f78;letter-spacing:1px}
.col-chat-pk.col-chat-pk-heroi{border-left-color:#3a7ac8;background:rgba(30,60,110,.22)}
.col-chat-pk.col-chat-pk-cabeca{border-left-color:#c8a03a;background:rgba(90,68,16,.22)}
.col-chat-pk .col-chat-pk-nome{color:#f0c96a}
.col-chat-pk .col-chat-pk-vermelho{color:#ff5a48}
.col-chat-pk .col-chat-pk-heroi{color:#9fd6ff}
.col-chat-pk .col-chat-pk-mapa{color:#e6d6bc;font-weight:700}
.col-chat-pk .col-chat-pk-num{color:#f3d58a}
/* 31/10: link do parceiro ativo no chat (src/ui/chat-ui.js textoComLinks). Quebra no meio para URL longa não vazar da caixa. */
#colChatPanel .col-chat-link,.col-chat-link{color:#7fd3ff;text-decoration:underline;overflow-wrap:anywhere;word-break:break-all}
#colChatPanel .col-chat-link:hover,.col-chat-link:hover{color:#b8e8ff}

/* AVISO DE MENSAGEM PRIVADA (06/11, opção B do autor). O selo do botão CHAT é só das
   privadas: roxo, com envelope e o número. O SISTEMA (correio, GvG) vira um pontinho
   âmbar no pé do botão. O balão com rosto, nome e começo da mensagem fica 8 s ao lado
   do chat (no celular, em cima do círculo). Sem brilho. */
.col-chat-toggle .col-chat-badge.col-chat-badge-pm{display:flex;align-items:center;gap:3px;top:-9px;right:-4px;height:20px;min-width:0;
  padding:0 6px 0 5px;border-radius:10px;background:#b04aae;font-size:11px;line-height:20px;box-shadow:0 0 0 2px rgba(9,9,13,.94);z-index:3}
.col-chat-toggle .col-chat-badge.col-chat-badge-pm.hidden{display:none}
.col-chat-badge-pm svg{width:13px;height:13px;flex:0 0 13px}
.col-chat-ponto-sistema{position:absolute;bottom:-2px;right:-2px;width:10px;height:10px;border-radius:50%;background:#e6a23c;
  box-shadow:0 0 0 2px rgba(9,9,13,.94);pointer-events:none}
.col-chat-ponto-sistema.hidden{display:none}
html.col-no-jogo .col-chat.is-collapsed .col-chat-toggle>.col-chat-badge.col-chat-badge-pm{top:-9px;right:-4px}
.col-chat:not(.is-collapsed) .col-chat-ponto-sistema{display:none}
.col-chat-balao-pm{position:fixed;z-index:1160;display:flex;align-items:center;gap:8px;max-width:min(260px,calc(100vw - 12px));
  padding:7px 22px 7px 7px;border-radius:9px;background:rgba(18,14,20,.97);border:1px solid #b04aae;color:#eee3d4;
  cursor:var(--cur-mao,pointer);text-align:left}
.col-chat-balao-pm::after{content:"";position:absolute;right:-7px;bottom:14px;border:7px solid transparent;border-right:0;border-left-color:#b04aae}
.col-chat-balao-pm.em-cima::after{right:16px;bottom:-7px;border:7px solid transparent;border-bottom:0;border-top-color:#b04aae}
.col-chat-balao-pm:hover,.col-chat-balao-pm:focus-visible{border-color:#d27fd0;outline:none}
.col-chat-balao-pm .col-chat-rosto{flex:0 0 auto}
.col-chat-balao-txt{min-width:0;display:flex;flex-direction:column;gap:2px}
.col-chat-balao-txt b{color:#e7a6e5;font-size:calc(12px*var(--text-scale,1));line-height:1.2;overflow-wrap:anywhere}
.col-chat-balao-txt small{color:#cfc5b8;font-size:calc(11.5px*var(--text-scale,1));line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.col-chat-balao-x{position:absolute;top:3px;right:4px;border:0;background:none;color:#8b8079;font-size:11px;line-height:1;padding:3px;cursor:var(--cur-mao,pointer)}
.col-chat-balao-x:hover{color:#f0e2cc}