/* The trade window (client/trade/): two columns, the picker of the bag, the lock button. */
.tr-cols { display: flex; gap: 10px; }
.tr-col { flex: 1 1 0; min-width: 0; border: 1px solid rgba(80, 60, 30, 0.55); border-radius: 6px; padding: 6px 8px; background: rgba(255, 248, 225, 0.35); }
.tr-col.locked { border-color: #4ade80; box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.5) inset; }
.tr-col h4 { margin: 0 0 6px; font-size: 13px; }
.tr-lock { color: #15803d; font-weight: 700; font-size: 11px; }
.tr-items { min-height: 64px; display: flex; flex-direction: column; gap: 4px; }
.tr-row { display: flex; align-items: center; gap: 6px; }
.tr-name { flex: 1; min-width: 0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-tile, .tr-pick { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid rgba(80, 60, 30, 0.6); border-radius: 5px; background: rgba(40, 30, 60, 0.12); padding: 0; cursor: pointer; }
.tr-tile.gone { opacity: 0.4; filter: grayscale(1); }
.tr-n { position: absolute; right: 2px; bottom: 0; font: 700 11px/1 "Trebuchet MS", sans-serif; font-style: normal; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.tr-money { margin-top: 8px; min-height: 26px; }
.tr-gold { width: 100%; box-sizing: border-box; }
.tr-add { margin: 8px 0 4px; }
.tr-picker { display: flex; flex-wrap: wrap; gap: 4px; max-height: 150px; overflow-y: auto; padding: 4px; border: 1px dashed rgba(80, 60, 30, 0.5); border-radius: 5px; }
.tr-warn { color: #b91c1c; font-size: 12px; margin: 4px 0; }
.tr-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

/* The mail (client/mail/): the blinking letter of the HUD and the mailbox window. */
.mail-icon { position: absolute; right: 14px; bottom: 118px; width: 40px; height: 34px; font-size: 20px; line-height: 1; pointer-events: auto; background: rgba(40, 30, 20, 0.85); border: 1px solid #e6c36a; border-radius: 6px; color: #ffe9a0; cursor: pointer; animation: mail-blink 1.1s ease-in-out infinite; z-index: 30; }
.mail-icon.hidden { display: none; }
.mail-n { position: absolute; right: -6px; top: -7px; min-width: 16px; padding: 0 3px; border-radius: 8px; background: #d33a2c; color: #fff; font: 700 11px/16px "Trebuchet MS", sans-serif; font-style: normal; text-align: center; }
.mail-n:empty { display: none; }
@keyframes mail-blink { 0%, 100% { box-shadow: 0 0 0 rgba(255, 233, 160, 0); opacity: 0.75; } 50% { box-shadow: 0 0 14px 3px rgba(255, 233, 160, 0.9); opacity: 1; } }
.ml-tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.ml-tabs .gf-btn.on { outline: 2px solid #c8962e; }
.ml-list { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; }
.ml-letter { border: 1px solid rgba(80, 60, 30, 0.55); border-radius: 6px; padding: 6px 8px; background: rgba(255, 248, 225, 0.35); }
.ml-letter.cod { border-color: #c8962e; box-shadow: 0 0 0 1px rgba(200, 150, 46, 0.45) inset; }
.ml-head { display: flex; flex-direction: column; gap: 2px; }
.ml-text { margin: 4px 0; font-size: 12px; font-style: italic; }
.ml-items, .ml-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.ml-gold, .ml-price { font-size: 12px; margin: 2px 0; }
.ml-actions { display: flex; gap: 6px; margin-top: 6px; justify-content: flex-end; }
.ml-compose { display: flex; flex-direction: column; gap: 6px; }
.ml-field { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.ml-field input { width: 100%; box-sizing: border-box; }
.ml-attach { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ml-chip { display: inline-flex; align-items: center; gap: 2px; cursor: pointer; font-size: 11px; }