/* Conversa: mesmo quadro dourado das janelas, mas encaixada no canto de
   baixo à esquerda em vez de flutuar no meio da tela. */

.chat-painel {
  --chanfro: 12px;
  width: 400px;
  display: grid;
  gap: 6px;
  padding: 8px 10px 10px;
}

.chat-topo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #3f3117;
}
.chat-topo h3 {
  margin: 0;
  flex: 1;
  font-size: 15px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ouro-claro);
}
.chat-recolhe {
  --chanfro: 5px;
  width: 28px; height: 24px;
  display: grid; place-items: center;
  border: 0; cursor: var(--cur-default), pointer;
  color: var(--ouro-claro);
  background: linear-gradient(180deg, #2a2118, #12100c);
  box-shadow: inset 0 0 0 1px #4a3a22;
  clip-path: polygon(
    var(--chanfro) 0, calc(100% - var(--chanfro)) 0, 100% var(--chanfro),
    100% calc(100% - var(--chanfro)), calc(100% - var(--chanfro)) 100%,
    var(--chanfro) 100%, 0 calc(100% - var(--chanfro)), 0 var(--chanfro)
  );
}
.chat-recolhe:hover { box-shadow: inset 0 0 0 1px var(--ouro-claro); }
.chat-recolhe .ic { width: 16px; height: 16px; transition: transform .18s; }

/* Recolhida sobra só a barra de título, para liberar a tela. */
.chat-painel.recolhido { gap: 0; padding-bottom: 8px; }
.chat-painel.recolhido .chat-topo { border-bottom: 0; padding-bottom: 0; }
.chat-painel.recolhido > :not(.chat-topo) { display: none; }
.chat-painel.recolhido .chat-recolhe .ic { transform: rotate(180deg); }

.chat-abas { gap: 3px; }
.chat-abas .aba { padding: 5px 3px; font-size: 11px; letter-spacing: .3px; }

.chat-linhas {
  height: 132px;
  overflow-y: auto;
  padding: 6px 8px;
  font-size: 12.5px;
  display: grid;
  align-content: start;
  gap: 2px;
  border-radius: 4px;
  background: #0b0907;
  box-shadow: inset 0 0 0 1px #3a2e21;
  scrollbar-width: thin;
  scrollbar-color: var(--ouro-fundo) transparent;
}
.chat-linhas div { word-break: break-word; color: #d8cdb6; }
.chat-linhas .oculto { display: none; }
.chat-linhas b { color: #fff; }

/* Cada canal com a sua cor, como no desenho. */
.chat-linhas .marca { font-weight: 700; margin-right: 4px; }
.chat-linhas .global .marca, .chat-linhas .global b { color: #5ac8f5; }
.chat-linhas .local .marca, .chat-linhas .local b { color: #f0a252; }
.chat-linhas .party .marca, .chat-linhas .party b { color: #5fe08a; }
.chat-linhas .sussurro .marca, .chat-linhas .sussurro b { color: #c58cf5; }
.chat-linhas .sistema .marca { color: var(--ouro-claro); }
.chat-linhas .sistema { color: #cbbda3; }
/* Destaques do registro da caçada. */
.chat-linhas .legend { color: var(--ouro-claro); }
.chat-linhas .epic { color: #c07af5; }
.chat-linhas .rare { color: #5aa9ff; }
.chat-linhas .good { color: var(--green); }
.chat-linhas .bad { color: var(--danger); }
.chat-linhas .aviso { color: var(--danger); }

.chat-forma { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.chat-forma input { padding: 7px 9px; font-size: 12.5px; }
.chat-forma .plate-btn { padding: 7px 14px; font-size: 13px; justify-content: center; min-width: 0; }

@media (max-width: 980px) { .chat-painel { width: 330px; } }
@media (max-width: 760px) {
  .chat-painel { width: auto; }
  .chat-linhas { height: 96px; }
  .chat-abas .aba { font-size: 10px; padding: 5px 2px; }
}

/* Segunda prancha: a conversa usa a mesma moldura azul/dourada da HUD. */
.chat-painel {
  --chanfro: 16px;
  width: 420px;
  gap: 8px;
  padding: 10px 12px 12px;
  background: linear-gradient(145deg, #ffe69c, #956820 37%, #e6bf64 70%, #75501e);
  filter: drop-shadow(0 6px 16px #000c);
}
.chat-painel::before {
  inset: 3px;
  background: linear-gradient(155deg, #0b3542, #041923 55%, #082a36);
  box-shadow: inset 0 0 0 1px #327184, inset 0 0 22px #001018;
}
.chat-painel.ornate::after {
  inset: 5px;
  opacity: 1;
  background:
    radial-gradient(circle, #e4ffff 0 20%, #28dce9 27% 47%, #a67b32 54% 69%, transparent 74%) 0 50% / 14px 14px no-repeat,
    radial-gradient(circle, #e4ffff 0 20%, #28dce9 27% 47%, #a67b32 54% 69%, transparent 74%) 100% 50% / 14px 14px no-repeat,
    linear-gradient(#e8c572, #946a27) 12px 2px / calc(100% - 24px) 2px no-repeat,
    linear-gradient(#845d25, #d6ac55) 12px calc(100% - 2px) / calc(100% - 24px) 2px no-repeat;
}
.chat-topo { padding: 1px 5px 8px; border-bottom-color: #a67b32; }
.chat-topo h3 { font: bold 17px Georgia, serif; letter-spacing: 1.4px; color: #ffe39b; }
.chat-recolhe {
  width: 30px;
  height: 27px;
  background: linear-gradient(180deg, #16404b, #061c28);
  box-shadow: inset 0 0 0 1px #c69a45;
  color: #ffe19b;
}
.chat-recolhe:hover,
.chat-recolhe:focus-visible { outline: 1px solid #43dfec; box-shadow: 0 0 8px #3fdded80; }
.chat-abas { gap: 4px; }
.chat-abas .aba {
  min-width: 0;
  padding: 7px 2px;
  background: linear-gradient(180deg, #103743, #061b27);
  box-shadow: inset 0 0 0 1px #b48a3e;
  color: #e2d4b7;
  font: 11px Georgia, serif;
}
.chat-abas .aba:hover,
.chat-abas .aba:focus-visible { color: #fff1c1; box-shadow: inset 0 0 0 1px #44dce7; }
.chat-abas .aba.on {
  color: #ffe399;
  background: linear-gradient(180deg, #44502a, #1a2b1d);
  box-shadow: inset 0 0 0 1px #ffe09a, 0 0 8px #d5a44855;
}
.chat-abas .aba.apagado { opacity: .56; }
.chat-linhas {
  height: 150px;
  padding: 8px 10px;
  border: 1px solid #967338;
  border-radius: 0;
  background: radial-gradient(ellipse at 50% 0, #0e3440, #041722 75%);
  box-shadow: inset 0 0 0 2px #092532, inset 0 0 14px #001018;
  scrollbar-color: #c39a4c #092631;
}
.chat-linhas div { color: #e5dac4; }
.chat-forma input {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid #ad843b;
  border-radius: 0;
  background: linear-gradient(180deg, #0b2e3b, #061b28);
  color: #f6e4bf;
}
.chat-forma input::placeholder { color: #9eb6c3; }
.chat-forma input:focus { border-color: #54dce6; box-shadow: 0 0 0 1px #54dce6; }
.chat-forma .plate-btn {
  border: 1px solid #dbad58;
  background: linear-gradient(180deg, #3d4828, #152519);
  color: #ffe3a0;
  font: bold 13px Georgia, serif;
}
.chat-forma .plate-btn:hover { box-shadow: inset 0 0 0 1px #ffe39a, 0 0 8px #d4a14680; }

@media (max-width: 980px) { .chat-painel { width: 330px; } }
@media (max-width: 760px) {
  .chat-painel { width: auto; }
  .chat-linhas { height: 96px; }
  .chat-abas .aba { font-size: 10px; padding: 6px 2px; }
}
@media (max-width: 390px) { .chat-abas .aba { font-size: 9px; } }