/* ===== css/chat.css ===== */
/* Chat MU: compacto por padrão e histórico expandido pelo F4. */
.city-chat {
    position: absolute !important;
    z-index: 30 !important;
    left: 5px !important;
    bottom: 12px !important;
    width: 330px !important;
    height: 160px !important;
    display: block !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    color: #dbe8e8 !important;
    border: 1px solid #46575b !important;
    background: linear-gradient(145deg, rgba(16,25,25,.94), rgba(3,8,8,.96)) !important;
    box-shadow: 0 0 0 1px rgba(0,0,0,.82), inset 0 0 0 1px #0b1111, inset 0 0 20px #000b, 0 5px 18px #000b !important;
    font: 11px Arial, sans-serif !important;
    transition: height .18s ease, width .18s ease !important;
}

/* A borda inferior permanece fixa: somente o histórico cresce para cima. */
.city-chat.expanded { height: 340px !important; }
/* Minimizado o chat não é uma barra: é só um balão. A janela inteira sai de
   cena (borda, fundo e título) e sobra o botão redondo. */
.city-chat.minimized { width: 42px !important; height: 42px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
.city-chat.minimized .city-chat-body,
.city-chat.minimized .city-chat-title { display: none !important; }
.city-chat.minimized .city-chat-bubble { display: grid !important; }

.city-chat-bubble { display: none; position: absolute; bottom: 0; left: 0; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid #6f8f95; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #2b4448, #0a1112 72%); box-shadow: 0 0 0 1px #050a0b, 0 3px 10px rgba(0,0,0,.7), inset 0 0 12px rgba(0,0,0,.7); cursor: pointer; }
.city-chat-bubble:hover { border-color: #9adbe8; filter: brightness(1.2); }
.city-chat-bubble i { font-size: 19px; line-height: 1; filter: drop-shadow(0 1px 2px #000); }
.city-chat-bubble-dot { position: absolute; top: 2px; right: 2px; width: 9px; height: 9px; border-radius: 50%; background: #da3633; box-shadow: 0 0 6px #da3633; }
.city-chat-bubble-dot[hidden] { display: none; }

.city-chat-title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid #53676b !important;
    background: linear-gradient(90deg, rgba(35,51,52,.92), rgba(10,16,16,.66)) !important;
    color: #e9f3f3 !important;
    font: 700 13px Georgia, serif !important;
    text-shadow: 1px 1px #000 !important;
}
.city-chat-title::before { content: ''; width: 5px; height: 14px; background: linear-gradient(#74d1e0,#236c7a); box-shadow: 0 0 7px #52d5ec; }
/* O subtítulo "COMUNICAÇÃO" saiu do markup; a regra fica só para o caso de
   algum outro texto pequeno entrar aqui no futuro. */
.city-chat-title small { display: none; }
.city-chat-title > span { margin-right: auto; }
/* A barra de título é a alça de arrasto da janela (ver ChatRuntime.enableDrag).
   O cursor precisa dizer isso antes do jogador tentar. Os botões dentro dela
   voltam ao cursor de clique. */
.city-chat-title { cursor: move !important; user-select: none !important; touch-action: none !important; }
.city-chat-title button { cursor: pointer !important; }
.city-chat-bubble { touch-action: none; }
.city-chat.is-dragging { cursor: move !important; transition: none !important; opacity: .92 !important; }
.city-chat.is-dragging .city-chat-title { cursor: move !important; }
#city-chat-minimize { margin-left: auto; width: 20px; height: 19px; padding: 0; border: 1px solid #536a70; background: linear-gradient(#263639,#101718); color: #d7e5e7; font: 700 15px/16px Arial,sans-serif; cursor: pointer; }
#city-chat-minimize:hover { color:#fff; background:#344c50; }

.city-chat-body {
    height: calc(100% - 28px) !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}
.city-chat-tabs { display:grid !important; grid-template-columns:repeat(6,1fr) !important; gap:2px !important; padding:4px !important; border-bottom:1px solid #3c4c4f !important; background:rgba(4,9,9,.62) !important; }
.city-chat-tabs button { min-width:0; padding:5px 2px; border:1px solid #2d3a3c; border-radius:1px; background:linear-gradient(#1d2829,#0b1111); color:#b7c9ca; font:700 11px Georgia,serif; text-shadow:1px 1px #000; cursor:pointer; position:relative; }
.city-chat-tabs button:hover { border-color:#6d9ca5; color:#e5f7f8; }
.city-chat-tabs button.active { border-color:#77b6c2 !important; background:linear-gradient(#31545b,#16272a) !important; color:#f0ffff !important; box-shadow:inset 0 0 8px #4db5c333; }

.city-chat-log { flex:1 1 auto !important; min-height:0 !important; overflow-y:auto !important; padding:7px 9px !important; box-sizing:border-box !important; background:linear-gradient(90deg,rgba(3,8,7,.45),rgba(0,0,0,.16)) !important; color:#d9e3df !important; font:11px/1.48 Arial,sans-serif !important; scrollbar-width:thin; scrollbar-color:#607d82 #0a0f0f; }
.city-chat-log div { overflow-wrap:anywhere; }
.city-chat-log b { color:#72e7ad; font-weight:700; }
.chat-message { margin:0 0 3px; padding:2px 3px; border-radius:2px; overflow-wrap:anywhere; }
.chat-message b { margin-right:3px; }
.chat-message-self { color:#dffcff; background:linear-gradient(90deg,rgba(33,104,116,.38),rgba(27,87,98,.1)); border-left:2px solid #5be2ed; }
.chat-message-self b { color:#8df7ff; }
.chat-message-remote { color:#dfe7e3; }
.chat-message-remote b { color:#75e9ad; }
.channel-party .chat-message-remote b { color:#8ce7a8; }
/* /local: conversa de quem está no mesmo mapa. O âmbar separa do verde do
   /post à primeira vista, sem precisar olhar a aba ativa. */
.channel-local .chat-message-remote { color:#f0e2c8; }
.channel-local .chat-message-remote b { color:#f2c470; }
.channel-private .chat-message-remote { color:#ffd1cd; background:rgba(102,37,36,.16); }
.channel-private .chat-message-remote b { color:#ff958b; }

.chat-message-system { color:#a7bac0; font-style:italic; }

/* ---- Canal /system: mural de avisos do jogo ---- */
/* Cada linha traz o horário e a cor do tom do aviso, os mesmos quatro tons
   dos toasts (sucesso, atenção, informação, tesouro). */
.channel-system .chat-message-system { display:flex; gap:6px; align-items:baseline; margin:0 0 2px; padding:2px 4px; border-left:2px solid #4a5f64; background:rgba(8,16,17,.35); color:#c8d5d6; font-style:normal; }
.channel-system .chat-message-system time { flex:0 0 auto; color:#6e858a; font:700 11px Consolas,monospace; }
.channel-system .chat-message-system span { flex:1 1 auto; overflow-wrap:anywhere; }
.channel-system .chat-message-system.tone-success { border-left-color:#43b96a; color:#cdf3d8; }
.channel-system .chat-message-system.tone-error { border-left-color:#d1493f; color:#ffd2cd; }
.channel-system .chat-message-system.tone-info { border-left-color:#4f93c4; color:#d3e7f6; }
.channel-system .chat-message-system.tone-gold { border-left-color:#d9ac47; color:#f6e3ac; }
.chat-system-repeat { flex:0 0 auto; padding:0 4px; border:1px solid #55686c; border-radius:8px; color:#9fb3b7; font:700 11px Arial,sans-serif; font-style:normal; }
.chat-system-empty { padding:8px 4px; color:#7b8f93; font-style:italic; text-align:center; }
.chat-system-badge { background:#d9ac47 !important; box-shadow:0 0 6px #d9ac47 !important; }

/* Sino: alterna entre pop-up para tudo e pop-up só para o que pede reação. */
#city-chat-toast-mode { margin-left:auto; padding:0 2px; border:0; background:none; color:#cfe4e6; font-size:12px; line-height:16px; cursor:pointer; }
#city-chat-toast-mode:hover { color:#fff; filter:drop-shadow(0 0 4px #79b7c2); }
#city-chat-toast-mode.is-quiet { color:#7d9195; }
#city-chat-minimize { margin-left:4px; }

/* Fichas de assunto do /system, fixas no topo da lista. */
.chat-system-filters { position:sticky; top:-7px; z-index:2; display:flex; flex-wrap:wrap; gap:2px; margin:-7px -9px 5px; padding:4px 6px; background:linear-gradient(#08100fee,#08100fcc); border-bottom:1px solid #2c3b3d; }
.chat-system-filter { display:inline-flex; align-items:center; gap:2px; padding:1px 4px; border:1px solid #35484b; border-radius:8px; background:rgba(14,24,25,.8); color:#a8bcbe; font:700 10px Georgia,serif; white-space:nowrap; cursor:pointer; }
.chat-system-filter:hover { border-color:#6d9ca5; color:#e8fbfd; }
.chat-system-filter.is-active { border-color:#77b6c2; background:linear-gradient(#2c4f56,#15262a); color:#f2ffff; }
.chat-system-filter.is-empty { opacity:.45; }
.chat-system-filter i { padding:0 2px; border-radius:5px; background:rgba(255,255,255,.09); font:700 10px Arial,sans-serif; font-style:normal; }

/* Atalho do aviso: leva direto para onde a ação acontece. */
.chat-system-action { flex:0 0 auto; padding:1px 6px; border:1px solid currentColor; border-radius:2px; background:transparent; color:inherit; font:700 11px Georgia,serif; opacity:.85; cursor:pointer; }
.chat-system-action:hover { opacity:1; background:rgba(255,255,255,.09); }

/* Avisos vindos do disco entram apagados, com um divisor antes dos novos. */
.channel-system .chat-message-system.is-stale { opacity:.62; }
.chat-system-divider { display:flex; align-items:center; gap:6px; margin:6px 0 4px; color:#6e858a; font:700 10px Georgia,serif; letter-spacing:1px; text-transform:uppercase; }
.chat-system-divider::before, .chat-system-divider::after { content:''; flex:1 1 auto; height:1px; background:linear-gradient(90deg,transparent,#3c5154,transparent); }
.city-chat-log::-webkit-scrollbar { width:6px; }
.city-chat-log::-webkit-scrollbar-track { background:#0a0f0f; }
.city-chat-log::-webkit-scrollbar-thumb { background:#48666b; }

/* A entrada nunca se move: a área acima dela é a única que aumenta com F4. */
.city-chat-entry { display:flex !important; align-items:center !important; flex:0 0 29px !important; min-height:29px !important; box-sizing:border-box !important; border-top:1px solid #46585a !important; background:linear-gradient(90deg,#111c1b,#07100f) !important; }
.city-chat-entry span { flex:0 0 59px; padding:0 7px; box-sizing:border-box; color:#aee8f3; font:700 11px Georgia,serif; text-align:center; text-shadow:1px 1px #000; }
.city-chat-entry input, #city-chat-input { flex:1 !important; width:auto !important; height:28px !important; box-sizing:border-box !important; padding:7px 8px !important; border:0 !important; border-left:1px solid #344447 !important; outline:none !important; background:transparent !important; color:#eef8f4 !important; font:11px Arial,sans-serif !important; }
.city-chat-entry input::placeholder { color:#708385; }
.city-chat-entry input:disabled { cursor:not-allowed; color:#758487; background:rgba(0,0,0,.18)!important; }
.city-chat-item-help { flex:0 0 42px; width:42px; height:28px; padding:0; border:0; border-left:1px solid #344447; background:linear-gradient(#1a2928,#0a1212); color:#aee8d0; font:700 10px Georgia,serif; letter-spacing:.2px; cursor:pointer; text-shadow:1px 1px #000; }
.city-chat-item-help:hover { background:linear-gradient(#294543,#10201e); color:#dcfff0; }
.city-chat-item-slot { position:relative; flex:0 0 28px; width:28px; height:28px; padding:1px; border:0; border-left:1px solid #344447; background:#090e0e; cursor:pointer; }
.city-chat-item-slot.has-item { display:flex; align-items:center; gap:3px; flex:0 1 132px; width:auto; min-width:28px; padding:1px 16px 1px 2px; border-color:#7a7041; background:linear-gradient(90deg,#202015,#0a100e); }
.city-chat-item-slot[hidden] { display:none!important; }
.city-chat-item-slot:hover { background:#182526; }
.city-chat-item-slot .chat-item-icon { display:block; width:24px; height:24px; margin:auto; background-repeat:no-repeat; background-position:center; filter:drop-shadow(0 1px 2px #000); }
.city-chat-item-slot.has-item .chat-item-icon { flex:0 0 24px; margin:0; }
.city-chat-item-slot em { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#f0d783; font:700 11px Georgia,serif; font-style:normal; text-shadow:1px 1px #000; }
.city-chat-item-slot b { position:absolute; top:0; right:1px; color:#ff9b89; font:700 11px Arial,sans-serif; text-shadow:1px 1px #000; }
.city-chat-item-picker { position:absolute; z-index:80; left:0; bottom:31px; width:min(590px, calc(100vw - 20px)); max-height:285px; overflow:auto; border:1px solid #708287; background:linear-gradient(145deg,#152022,#060b0c); box-shadow:0 10px 25px #000c,inset 0 0 18px #000; }
.city-chat-item-picker.is-empty { width:min(300px,calc(100vw - 20px)); max-height:none; border-color:#596a6d; box-shadow:0 6px 16px rgba(0,0,0,.72),inset 0 0 12px #000; }
.city-chat-item-picker header { display:flex; align-items:center; justify-content:space-between; min-height:30px; padding:0 8px; border-bottom:1px solid #506066; color:#f0d783; font:700 12px Georgia,serif; }
.city-chat-item-picker header button,.chat-item-preview-close { border:0; background:transparent; color:#cbe5e7; font:700 20px/20px Arial,sans-serif; cursor:pointer; }
.city-chat-item-browser { display:grid; grid-template-columns:minmax(0,1fr) minmax(205px,.92fr); align-items:start; }
.city-chat-item-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; padding:6px; }
.city-chat-item-list button { display:flex; align-items:center; gap:6px; min-width:0; min-height:42px; padding:4px; border:1px solid #34484c; background:linear-gradient(100deg,#152124,#090f10); color:#d9e6e4; text-align:left; cursor:pointer; }
.city-chat-item-list button:hover { border-color:#85b9c1; background:linear-gradient(100deg,#243d40,#101d1e); }
.city-chat-picker-icon { display:block; width:32px; height:32px; flex:0 0 32px; background-repeat:no-repeat; background-position:center; filter:drop-shadow(0 1px 2px #000); }
.city-chat-item-list span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:700 11px Georgia,serif; }
.city-chat-item-inspector { position:sticky; top:0; display:grid; grid-template-columns:54px minmax(0,1fr); gap:9px; min-height:160px; margin:6px 6px 6px 0; padding:9px; border:1px solid #53666a; background:linear-gradient(135deg,#192629,#080d0e); box-shadow:inset 0 0 14px #000; color:#9fb1b4; font:11px/1.35 Arial,sans-serif; }
.city-chat-item-inspector .city-chat-picker-detail-icon { width:50px; height:50px; }
.city-chat-item-inspector strong { display:block; margin-bottom:5px; color:#f0d783; font:700 12px Georgia,serif; }
.city-chat-item-inspector .tooltip-section { display:grid; gap:2px; color:#d4e1df; font-size:11px; line-height:1.25; }
.city-chat-item-picker p { margin:0; padding:14px 10px; color:#aebfc1; font-size:11px; line-height:1.4; }
.city-chat-item-empty { display:grid; gap:4px; padding:10px!important; color:#aabbbd!important; font:11px/1.32 Arial,sans-serif!important; }
.city-chat-item-empty b { color:#e4cf83; font:700 11px Georgia,serif; }
.city-chat-item-list span { display:grid; gap:2px; }
.city-chat-item-list span small { color:#78b9c1; font:700 10px Arial,sans-serif; letter-spacing:.35px; }

/* Seletor no formato vertical do inventário: equipamento em cima e mochila
   embaixo. Ele abre ao lado do chat para não esconder a conversa. */
.city-chat-item-picker.inventory-picker { position:absolute; left:calc(100% + 12px); bottom:0; width:390px; max-width:calc(100vw - 34px); max-height:calc(100vh - 24px); overflow:auto; border:2px solid #b6a776; background:linear-gradient(145deg,#4d4a3b 0,#151610 7%,#090a09 52%,#27261f 100%); box-shadow:inset 0 0 0 3px #090a08,inset 0 0 0 5px #5c573f,0 12px 30px rgba(0,0,0,.82); }
.inventory-picker>header { min-height:34px; padding:0 11px; border-bottom:1px solid #71694b; background:linear-gradient(90deg,#33352e,#131513 62%,#24251f); color:#f2df99; text-shadow:1px 1px #000; }
.city-chat-inventory-browser { position:relative; }
.city-chat-picker-cols { display:grid; grid-template-columns:1fr; align-items:start; min-width:0; }
.city-chat-picker-equipment,.city-chat-picker-inventory { min-width:0; padding:9px 10px; background:linear-gradient(145deg,rgba(31,34,28,.94),rgba(8,10,8,.95)); }
.city-chat-picker-equipment { border-bottom:1px solid #71694b; }
.city-chat-picker-inventory { background:linear-gradient(145deg,rgba(39,39,29,.9),rgba(10,11,8,.96)); }
.city-chat-picker-equipment h4,.city-chat-picker-inventory h4 { margin:0 0 7px; color:#e6d694; font:700 11px Georgia,serif; letter-spacing:.35px; text-align:center; text-shadow:1px 1px #000; }
.city-chat-picker-inventory h4 small { color:#9a8f66; font:400 11px Arial,sans-serif; }
/* Herdam a moldura de .inventory-grid; só a contagem de colunas muda. */
.city-chat-item-picker .mu-equipment-layout.city-chat-equipment-grid { display:grid!important; grid-template-columns:repeat(5,52px)!important; grid-template-rows:repeat(3,52px)!important; grid-template-areas:'wings . helm . pet' 'weapon necklace armor shield .' 'gloves ring1 pants ring2 boots'!important; gap:4px!important; width:max-content!important; margin:0 auto!important; padding:8px!important; border:2px solid #8d835d; background:radial-gradient(circle at center,#1e211d 0%,#070807 100%); box-shadow:inset 0 0 0 2px #050605,0 4px 12px rgba(0,0,0,.8); }
.city-chat-item-picker .city-chat-equipment-slot { position:relative; display:grid!important; place-items:center!important; width:52px!important; min-width:52px!important; height:52px!important; min-height:52px!important; overflow:hidden; padding:3px!important; border:1px solid #726c51; border-radius:4px; background:linear-gradient(135deg,#3a3a2e,#12130f 40%,#1f2018); box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),inset 0 0 8px #000; box-sizing:border-box!important; }
.city-chat-item-picker .city-chat-equipment-slot::before { content:''; position:absolute; inset:4px; z-index:0; opacity:.3; background-image:url('../assets/img/items/equipment-slot-silhouettes-source.png'); background-repeat:no-repeat; background-size:400% 300%; filter:grayscale(1) contrast(.9) brightness(.9); pointer-events:none; }
.city-chat-item-picker .city-chat-equipment-slot.filled { border-color:#5c6370; background-color:#161b20; background-image:radial-gradient(circle,#2d3139 0%,#13171f 80%); box-shadow:inset 0 0 6px rgba(0,0,0,.9),0 0 5px rgba(92,99,112,.3); }.city-chat-item-picker .city-chat-equipment-slot.filled::before { display:none; }
.city-chat-item-picker .city-chat-equipment-slot.item-excellent { border-color:#2ea043; background-color:#0d1b13; background-image:radial-gradient(circle,#1a3b2b 0%,#0d1b13 80%); box-shadow:inset 0 0 0 2px #08261b,inset 0 0 12px #1eea8a44,0 0 10px rgba(46,160,67,.5); }
.city-chat-item-picker .equipment-slot-wings{grid-area:wings}.city-chat-item-picker .equipment-slot-helm{grid-area:helm}.city-chat-item-picker .equipment-slot-pet{grid-area:pet}.city-chat-item-picker .equipment-slot-weapon{grid-area:weapon}.city-chat-item-picker .equipment-slot-necklace{grid-area:necklace}.city-chat-item-picker .equipment-slot-armor{grid-area:armor}.city-chat-item-picker .equipment-slot-shield{grid-area:shield}.city-chat-item-picker .equipment-slot-gloves{grid-area:gloves}.city-chat-item-picker .equipment-slot-ring1{grid-area:ring1}.city-chat-item-picker .equipment-slot-pants{grid-area:pants}.city-chat-item-picker .equipment-slot-ring2{grid-area:ring2}.city-chat-item-picker .equipment-slot-boots{grid-area:boots}
.city-chat-item-picker .equipment-slot-helm::before{background-position:0 0}.city-chat-item-picker .equipment-slot-wings::before{background-position:33.333% 0}.city-chat-item-picker .equipment-slot-pet::before{background-position:66.667% 0}.city-chat-item-picker .equipment-slot-weapon::before{background-position:100% 0}.city-chat-item-picker .equipment-slot-necklace::before{background-position:0 50%}.city-chat-item-picker .equipment-slot-armor::before{background-position:33.333% 50%}.city-chat-item-picker .equipment-slot-shield::before{background-position:66.667% 50%}.city-chat-item-picker .equipment-slot-gloves::before{background-position:100% 50%}.city-chat-item-picker .equipment-slot-ring1::before,.city-chat-item-picker .equipment-slot-ring2::before{background-position:0 100%}.city-chat-item-picker .equipment-slot-pants::before{background-position:33.333% 100%}.city-chat-item-picker .equipment-slot-boots::before{background-position:100% 100%}
.city-chat-item-picker .city-chat-equipment-slot .eq-item-icon { position:relative; z-index:1; width:42px!important; height:42px!important; margin:0!important; background-repeat:no-repeat; background-position:center; }
.city-chat-item-picker .city-chat-equipment-slot .eq-item-level { position:absolute; z-index:4; left:1px; top:0; color:#ecf5e9; font:700 11px Arial,sans-serif; text-shadow:1px 1px #000; }
.city-chat-item-picker .city-chat-equipment-slot.is-locked { filter:grayscale(.92) brightness(.5); opacity:.6; cursor:not-allowed; }.city-chat-item-picker .city-chat-equipment-slot.is-locked::after { content:''; position:absolute; z-index:3; inset:0; background:rgba(0,0,0,.42); pointer-events:none; }
.city-chat-inventory-grid { grid-template-columns:repeat(5,1fr); gap:4px; max-height:290px; overflow-y:auto; padding:7px; scrollbar-color:#7c7455 #0a0b09; scrollbar-width:thin; }
/* Slots são os do inventário de verdade (.inv-slot-box). Aqui só ajustamos o
   tamanho, o destaque de seleção e o estado bloqueado. */
.city-chat-item-picker .inv-slot-box { width:auto; min-width:0; aspect-ratio:1; padding:2px; border-color:#68634c; background:linear-gradient(135deg,#34352c,#10110e 40%,#23241d); box-shadow:inset 0 0 0 2px #090a08,inset 0 0 7px #000; }
.city-chat-item-picker .inv-slot-box.is-shareable:hover { z-index:2; border-color:#dfc56d; box-shadow:inset 0 0 7px #000,0 0 9px rgba(223,197,109,.45); transform:translateY(-1px); }
.city-chat-item-picker .inv-slot-box.slot-excellent { border-color:#2f8f5b; }
.city-chat-item-picker .inv-slot-box.is-locked { filter:grayscale(.92) brightness(.5); opacity:.6; cursor:not-allowed; }
.city-chat-item-picker .inv-slot-box.is-locked::after { content:''; position:absolute; inset:0; background:rgba(0,0,0,.42); pointer-events:none; }
.city-chat-item-picker .inv-slot-box.is-empty { border-style:solid; border-color:#2a2d26; background:#0a0b08; cursor:default; }
.city-chat-item-picker .slot-level,.city-chat-item-picker .slot-count { position:absolute; z-index:3; font-style:normal; text-shadow:1px 1px #000; }
.city-chat-item-picker .item-tooltip { display:none!important; }
.city-chat-item-picker .slot-level { left:2px; top:1px; color:#ecf5e9; font:700 11px Arial,sans-serif; }
.city-chat-item-picker .slot-count { right:2px; bottom:1px; color:#fff0a8; font:700 10px Arial,sans-serif; }
.city-chat-inventory-icon { position:relative; z-index:1; display:block; width:86%; height:86%; background-repeat:no-repeat; background-position:center; filter:drop-shadow(0 2px 2px #000); }
.city-chat-item-fallback { display:grid; place-items:center; width:100%; height:100%; padding:1px; overflow:hidden; color:#cfbf87; font:700 10px/1.1 Arial,sans-serif; text-align:center; word-break:break-word; }
.city-chat-inventory-slot>b,.city-chat-inventory-slot>em,.city-chat-inventory-slot>i { position:absolute; z-index:3; text-shadow:1px 1px #000; font-style:normal; }
.city-chat-inventory-slot>b { left:1px; top:0; color:#ecf5e9; font:700 11px Arial,sans-serif; }
.city-chat-inventory-slot>em { right:1px; bottom:0; color:#fff0a8; font:700 10px Arial,sans-serif; }
.city-chat-inventory-slot>i { right:1px; top:0; font-size:10px; filter:none; }
.city-chat-grid-empty { grid-column:1/-1; display:block; padding:16px 4px; color:#84928c; font:11px Arial,sans-serif; text-align:center; }
@media (max-width:760px) { .city-chat-item-picker.inventory-picker { position:fixed; left:50%; bottom:16px; width:min(390px,calc(100vw - 20px)); transform:translateX(-50%); } .city-chat-inventory-grid { max-height:230px; } }
.city-chat-picker-details { display:grid; grid-template-columns:58px minmax(0,1fr); gap:10px; padding:10px; color:#d7e4e2; }
.city-chat-picker-detail-icon { display:block; width:54px; height:54px; margin-top:4px; background-repeat:no-repeat; background-position:center; filter:drop-shadow(0 2px 3px #000); }
.city-chat-picker-details strong { display:block; margin-bottom:5px; font:700 13px Georgia,serif; }
.city-chat-picker-details .tooltip-section { display:grid; gap:2px; font-size:11px; line-height:1.25; }
.city-chat-item-picker footer { display:flex; justify-content:flex-end; gap:6px; padding:7px; border-top:1px solid #405155; }
.city-chat-item-picker footer button { min-height:27px; padding:0 9px; border:1px solid #68777a; background:linear-gradient(#2a3738,#0c1212); color:#dce9e8; font:700 11px Georgia,serif; cursor:pointer; }
.city-chat-item-picker footer [data-picker-send] { border-color:#ad9045; background:linear-gradient(#745d25,#251d0d); color:#fff0b3; }
.chat-item-link { display:inline; margin-left:5px; padding:0; border:0; background:transparent; color:#f0d783; font:700 11px Georgia,serif; text-decoration:underline; text-decoration-style:dotted; cursor:pointer; text-shadow:1px 1px #000; }
.chat-item-link:hover { color:#fff1ad; text-decoration-style:solid; }
.chat-item-preview-overlay { position:fixed; z-index:14000; inset:0; display:grid; place-items:center; padding:20px; background:rgba(2,6,7,.58); }
.chat-item-preview { position:relative; display:grid; grid-template-columns:72px minmax(200px,1fr); gap:12px; width:min(410px,calc(100vw - 36px)); padding:17px; border:1px solid #70858a; background:linear-gradient(145deg,#182326,#070b0c); box-shadow:0 18px 48px #000,inset 0 0 22px #000; color:#dce9e6; }
.chat-item-preview-close { position:absolute; top:6px; right:7px; }
.chat-item-preview-icon { display:block; width:64px; height:64px; margin-top:4px; background-repeat:no-repeat; background-position:center; filter:drop-shadow(0 2px 3px #000); }
.chat-item-preview-copy > strong { display:block; margin:1px 22px 7px 0; color:#f0d783; font:700 15px Georgia,serif; }
.chat-item-preview-copy .tooltip-section { display:grid; gap:3px; color:#c8d8d7; font-size:11px; line-height:1.3; }
.chat-item-card { display:grid; grid-template-columns:34px minmax(0,1fr); gap:5px; align-items:start; margin:4px 0 2px; padding:4px; border:1px solid #52656a; background:linear-gradient(100deg,rgba(11,20,22,.94),rgba(4,8,9,.94)); box-shadow:inset 0 0 9px #0008; color:#d7e5e5; }
.chat-item-card-icon { display:block; width:30px; height:30px; background-repeat:no-repeat; background-position:center; filter:drop-shadow(0 1px 2px #000); }
.chat-item-card strong { display:block; margin-bottom:2px; color:#f0d783; font:700 11px Georgia,serif; }
.chat-item-card .tooltip-section { display:grid; gap:1px; color:#c8d8d7; font-size:11px; line-height:1.18; }
.chat-item-card .item-class-line,.chat-item-card .item-excellent-line { font-size:11px; }
#city-chat-channel { position:relative; }
#city-chat-channel.has-unread-whisper::after { content:''; position:absolute; top:-4px; right:5px; width:7px; height:7px; border-radius:50%; background:#e44b4b; box-shadow:0 0 6px #f34343; }

.chat-whisper-badge { position:absolute; top:-3px; right:-3px; width:8px; height:8px; border-radius:50%; background:#da3633; box-shadow:0 0 6px #da3633; animation:chat-badge-pulse 1.2s infinite alternate; }
@keyframes chat-badge-pulse { from { transform:scale(.9); } to { transform:scale(1.2); } }
.city-chat, .city-chat * { pointer-events:auto; }

/* Cores e interatividade para os nicks clicáveis no chat */
.chat-nick-link {
    cursor: pointer;
    text-decoration: underline dotted rgba(255, 255, 255, 0.4);
}
.chat-nick-link:hover {
    color: #ffffff !important;
    text-decoration: underline solid #ffffff;
}

/* Cores oficiais e definitivas dos cargos no chat da guilda */
.channel-guild .chat-message.guild-master,
.channel-guild .chat-message.guild-leader,
.channel-guild .chat-message-self.guild-master,
.channel-guild .chat-message-self.guild-leader,
.channel-guild .chat-message.guild-master b,
.channel-guild .chat-message.guild-leader b,
.channel-guild .chat-message-self.guild-master b,
.channel-guild .chat-message-self.guild-leader b,
.channel-guild .chat-message.guild-master span,
.channel-guild .chat-message.guild-leader span,
.channel-guild .chat-message-self.guild-master span,
.channel-guild .chat-message-self.guild-leader span { 
    color: #f0883e !important; 
    text-shadow: 0 0 4px rgba(240, 136, 62, 0.4); 
}

.channel-guild .chat-message.guild-assistant,
.channel-guild .chat-message-self.guild-assistant,
.channel-guild .chat-message.guild-assistant b,
.channel-guild .chat-message-self.guild-assistant b { 
    color: #52b8ff !important; 
    text-shadow: 0 0 5px rgba(82,184,255,.45); 
}

.channel-guild .chat-message.guild-battle_master,
.channel-guild .chat-message-self.guild-battle_master,
.channel-guild .chat-message.guild-battle_master b,
.channel-guild .chat-message-self.guild-battle_master b { 
    color: #d96cff !important; 
    text-shadow: 0 0 5px rgba(217,108,255,.35); 
}

.channel-guild .chat-message.guild-member,
.channel-guild .chat-message-self.guild-member,
.channel-guild .chat-message.guild-member b,
.channel-guild .chat-message-self.guild-member b { 
    color: #c9d1d9 !important; 
}

/* Chat legível em monitores grandes, apoiado sobre o mapa sem criar uma faixa vazia. */
@media (min-width: 960px) {
    .city-chat {
        left: 16px !important;
        bottom: 136px !important;
        width: 460px !important;
        height: 235px !important;
        font-size: 13px !important;
    }
    .city-chat.expanded { height: 440px !important; }
    .city-chat-title { height: 34px !important; padding:0 10px !important; font-size:16px !important; }
    .city-chat-title small { font-size:11px !important; }
    #city-chat-minimize { width:24px; height:23px; font-size:18px; line-height:19px; }
    .city-chat-tabs { padding:5px !important; gap:3px !important; }
    .city-chat-tabs button { padding:7px 3px !important; font-size:11px !important; }
    .city-chat-log { padding:9px 11px !important; font-size:13px !important; line-height:1.5 !important; }
    .city-chat-entry { flex-basis:35px !important; min-height:35px !important; }
    .city-chat-entry span { flex-basis:67px; font-size:11px; }
    .city-chat-entry input, #city-chat-input { height:34px !important; padding:8px 9px !important; font-size:12px !important; }
    .city-chat-item-help { flex-basis:50px; width:50px; height:34px; font-size:11px; }
    .city-chat-item-slot { flex-basis:34px; width:34px; height:34px; }
    .city-chat-item-slot.has-item { flex-basis:160px; height:34px; }
    .city-chat-item-slot .chat-item-icon { width:29px; height:29px; }
    .city-chat-item-picker { bottom:36px; width:620px; max-height:340px; }
    .city-chat-item-list button { min-height:50px; }
    .city-chat-picker-icon { width:38px; height:38px; flex-basis:38px; }
    .city-chat-item-inspector { grid-template-columns:68px minmax(0,1fr); min-height:190px; padding:12px; font-size:12px; }
    .city-chat-item-inspector .city-chat-picker-detail-icon { width:64px; height:64px; }
    .city-chat-item-inspector .tooltip-section { font-size:11px; }
    .city-chat-picker-details { grid-template-columns:72px minmax(0,1fr); padding:12px; }
    .city-chat-picker-detail-icon { width:66px; height:66px; }
    .city-chat-picker-details .tooltip-section { font-size:11px; }
    .city-chat-item-list span { font-size:11px; }
    .chat-item-link { font-size:13px; }
}

/* O estado minimizado precisa vir DEPOIS de todas as media queries: a de
   min-width:960px redefine a largura da janela e, vindo antes, era ela que
   ficava valendo — o balao aparecia, mas a caixa invisivel de 460px continuava
   ocupando (e bloqueando) o canto do mapa. */
.city-chat.minimized, .city-chat.minimized.expanded {
    width: 42px !important;
    height: 42px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}