/*
 * CHAT NO JEITO DO CLIENTE DOADOR (20/10/2026 — "esse chat tá esquisito,
 * tanto no celular quanto no PC… veja no cliente doador"). O game_chat do
 * PKA/OTClient: uma janela de console encostada embaixo à esquerda, abas de
 * texto em cima (a ativa em branco, as outras apagadas), as mensagens em
 * texto corrido `13:45 Nome [76]: texto` com a cor do canal, o campo de
 * escrever embaixo; fechado, as últimas mensagens passam por cima do mapa e
 * somem (a "prévia"). Vem depois do <style> do index.html e antes do
 * mobile.css.
 */
#cidade-chat {
  width: 430px; padding: 0; gap: 0; border-radius: 10px; overflow: hidden;
  background: linear-gradient(180deg, rgba(20, 21, 26, .86), rgba(10, 11, 14, .9));
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .05);
}
/* Barra das abas */
#cidade-chat header {
  gap: 4px; padding: 0 6px 0 4px; min-height: 30px;
  background: rgba(0, 0, 0, .35); border-bottom: 1px solid rgba(255, 255, 255, .07);
}
#cc-abas { gap: 0; align-self: stretch; }
#cc-abas button {
  padding: 0 12px; height: 30px; border: 0; border-radius: 0; background: transparent;
  font-size: 12px; font-weight: 700; color: #aaa; opacity: .65; box-shadow: none;
  border-bottom: 2px solid transparent;
}
#cc-abas button:hover { opacity: .9; color: #d8e7f0; }
#cc-abas button.on { opacity: 1; color: #fff; border-bottom-color: rgba(var(--accent-rgb), .95); background: rgba(255, 255, 255, .04); }
#cc-abas button i { top: 3px; right: 1px; min-width: 8px; width: 8px; height: 8px; padding: 0; font-size: 0; line-height: 0; }
#cc-estado { margin-left: auto; font-size: 10.5px; }
#cc-limpar, #cc-min {
  margin: 0; width: 26px; height: 26px; padding: 0; display: grid; place-items: center;
  background: transparent; border: 0; box-shadow: none; color: #9aa0a6; border-radius: 6px; font-size: 13px;
}
#cc-limpar:hover, #cc-min:hover { color: #fff; background: rgba(255, 255, 255, .08); }

/* As mensagens: texto corrido, cor do canal, sombra para ler em cima do mapa */
#cc-lista {
  /* Tamanho FIXO (21/10/2026: "não ir digitando e aumentar"); rola por dentro. */
  height: 190px; max-height: 190px; min-height: 190px; flex: 0 0 auto; overflow-y: auto; padding: 6px 10px 4px; gap: 1px;
  font-size: 12.5px; line-height: 1.4; font-family: Verdana, "Segoe UI", system-ui, sans-serif;
}
.cc-msg { color: #f2e36c; text-shadow: 0 1px 1px rgba(0, 0, 0, .8); overflow-wrap: anywhere; }
.cc-msg.cc-help { color: #9fd6ff; }
.cc-msg.cc-trade { color: #f6b25a; }
.cc-msg.minha { color: #f4f4f4; }
.cc-msg .hora { color: inherit; opacity: .55; font-size: 11px; margin: 0; }
.cc-msg b.nome, .cc-msg.cc-trade b, .cc-msg.cc-help b, .cc-msg.minha b { color: inherit; font-weight: 700; margin: 0; }
.cc-msg .nv { color: inherit; opacity: .7; font-weight: 400; font-size: 11px; margin: 0; }
.cc-msg span, .cc-msg .txt { color: inherit; }
.cc-msg .selo-vip {
  display: inline-block; padding: 0 4px; border-radius: 3px; font-style: normal; font-size: 9.5px; font-weight: 800;
  line-height: 14px; vertical-align: 1px; background: linear-gradient(180deg, #ffd66b, #e8a930); color: #2a1c00; text-shadow: none;
}
.cc-vazio { color: #8b9097; font-style: italic; }

/* O campo de escrever */
#cc-form { gap: 0; margin: 4px 8px 8px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 8px; background: rgba(0, 0, 0, .4); overflow: hidden; }
#cc-input { border: 0; border-radius: 0; background: transparent; padding: 7px 10px; font-size: 12.5px; }
#cc-input:focus { outline: none; }
#cc-form:focus-within { border-color: rgba(var(--accent-rgb), .6); }
#cc-form button { border: 0; border-radius: 0; padding: 0 14px; background: rgba(var(--accent-rgb), .85); color: #fff; font-weight: 700; box-shadow: none; }

/* A PRÉVIA (chat fechado): até 4 linhas por cima do mapa, sem fundo, somem sozinhas. */
#cc-previa {
  position: fixed; left: 14px; bottom: calc(var(--dock-h, 74px) + 74px); z-index: 18;
  width: min(420px, 60vw); display: flex; flex-direction: column; gap: 2px;
  pointer-events: none; font-family: Verdana, "Segoe UI", system-ui, sans-serif; font-size: 12.5px; line-height: 1.35;
}
#cc-previa[hidden] { display: none; }
#cc-previa .cc-msg { pointer-events: auto; cursor: pointer; text-shadow: 0 1px 2px #000, 0 0 4px #000, 0 0 1px #000; animation: cc-entra .25s ease-out; transition: opacity .6s ease; }
#cc-previa .cc-msg.saindo { opacity: 0; }
@keyframes cc-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
body.hud-oculto #cc-previa, body.dialogo-aberto #cc-previa { display: none; }
body.joy-on #cc-previa { left: auto; right: 10px; text-align: right; }

/* ── Celular: aberto vira uma folha larga por cima do jogo; fechado, o botão + a prévia ── */
@media (max-width: 720px) {
  #cidade-chat {
    left: 4px !important; right: 4px !important; width: auto !important; height: auto !important;
    top: auto !important; transform: none !important; border-radius: 14px;
  }
  #cidade-chat .cc-canto { display: none; }
  #cidade-chat header { min-height: 40px; }
  #cc-abas button { height: 40px; padding: 0 14px; font-size: 13.5px; }
  #cc-limpar, #cc-min { width: 38px; height: 38px; }
  #cc-lista { height: 30vh !important; max-height: 30vh !important; min-height: 30vh !important; font-size: 13.5px; }
  #cc-form button { padding: 0 16px; font-size: 14px; }
  #cc-previa { left: 52px; bottom: calc(var(--dock-h, 110px) + env(safe-area-inset-bottom) + 84px); width: calc(100vw - 160px); font-size: 12.5px; }
  #cc-previa .cc-msg { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
/* As mensagens encostam embaixo, perto do campo de escrever (como no console do doador). */
#cc-lista > :first-child { margin-top: auto; }