/* lista de amigos (amigos.js): janela flutuante como as outras (.win do app.css), no jeito da do Huntera */
.am-b { display: flex; flex-direction: column; gap: 8px; resize: none; }
.am-sub { margin: 0; font-size: 12px; color: var(--dim); }
.am-add { display: flex; gap: 6px; }
.am-busca { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 0 8px; border-radius: 6px; background: #0a0c13; border: 1px solid #2a3044; }
.am-busca:focus-within { border-color: var(--gold); }
.am-busca span { color: #6f7586; font-size: 15px; line-height: 1; }
.g .am-busca input { flex: 1; min-width: 0; padding: 7px 0; border: 0; background: transparent; color: var(--txt); font-size: 13px; outline: none; }
.am-add .btn { padding: 6px 12px; }
.am-add .btn:disabled { opacity: .55; cursor: wait; }
.am-list { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding-right: 2px; }
.am-vazio { margin: 6px 2px; font-size: 12.5px; color: var(--dim); }
.am-gh { margin: 6px 2px 2px; font-size: 11px; font-weight: 800; letter-spacing: .08em; color: #8f95a6; }
.am-gh:first-child { margin-top: 0; }
.am-gh i { font-style: normal; }
.am-gh.on, .am-gh.on i { color: #3ccf6a; }
.am-it { position: relative; }
.g .am-row { width: 100%; display: grid; grid-template-columns: 8px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px;
  text-align: left; background: #121624; border: 1px solid #232838; font-size: 13px; }
.g .am-row:hover, .am-it.aberto .am-row { border-color: #6b5626; background: #19160e; }
.am-dot { width: 8px; height: 8px; border-radius: 50%; background: #5c6476; }
.am-row.on .am-dot { background: #3ccf6a; box-shadow: 0 0 5px #3ccf6a; }
.am-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.am-row.off b { color: #b9bfcc; }
.am-lv { font-size: 11.5px; color: var(--gold-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.am-st { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--dim); text-align: right; }
.am-row.on .am-st { color: #8fd8a0; }
/* menu do amigo: logo embaixo da linha dele */
.am-menu { margin: 2px 0 4px 16px; display: flex; flex-direction: column; padding: 4px; border-radius: 6px; background: #171b29; border: 1px solid #3a4258; box-shadow: 0 6px 18px #0009; }
.g .am-menu button { display: block; width: 100%; padding: 6px 8px; border-radius: 4px; text-align: left; font-size: 12.5px; color: #e2e5ec; }
.g .am-menu button:hover:not(:disabled) { background: #262b3c; }
.g .am-menu button:disabled { color: #6f7586; cursor: not-allowed; }
.am-menu small { display: block; margin-top: 1px; font-size: 10.5px; color: #8f95a6; }
.am-menu b { color: var(--gold-2); }
.g .am-menu .am-rm { color: #ffb4aa; }
.am-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid #2c3346; font-size: 12px; color: #c9cfdd; }
.am-foot .btn { padding: 5px 12px; }
/* abas PM do chat (app.js): o x fecha a conversa; a mensagem privada em azul claro, como no Tibia */
.g .chat-tabs button.pm { color: #9fd3ff; }
.g .chat-tabs button.pm.on { color: #c7e6ff; }
.chat-tabs [data-chclose] { font-style: normal; margin-left: 5px; padding: 0 3px; border-radius: 3px; color: #8f95a6; }
.chat-tabs [data-chclose]:hover { background: #3a4258; color: #fff; }
.chat-tabs { overflow-x: auto; scrollbar-width: none; }
.g .chat-tabs button { flex: none; }
.cm.ch-pm span { color: #9fd3ff; }
@media (max-width: 759px) {
  .am-list { max-height: none; }
  .am-st { max-width: 90px; }
}