/* Approved artwork sliced into a flexible frame. Icons and text never stretch with it. */
.nw-game{--chat-height:290px}.nw-game.chat-collapsed{--chat-height:60px}
.ninja-chat,.ninja-chat.is-collapsed{--dock-left:clamp(145px,26cqw,250px);--dock-center:28px;--dock-button:32px;background:none;margin:0;overflow:visible;isolation:isolate}
.ninja-chat.is-collapsed{--dock-center:25px}.chat-footer-art,.chat-unread-summary{display:none}
.ninja-chat:not(.is-collapsed) .chat-art{inset:0;width:100%;height:100%;overflow:visible}
.ninja-chat.is-collapsed>.chat-footer-art{display:grid!important;position:absolute;bottom:0;left:0;width:100%;height:146.371%;grid-template-columns:var(--dock-left) minmax(0,1fr) 40px;direction:ltr;pointer-events:none;z-index:-1}
.chat-footer-art svg{display:block;width:100%;height:100%;overflow:hidden}
.ninja-chat .chat-title,.ninja-chat.is-collapsed .chat-title{position:absolute;top:var(--dock-center);height:30px;transform:translateY(-50%);left:auto;right:115px;width:125px;margin:0;display:flex;justify-content:flex-end;align-items:center;font-size:14px;font-weight:700;line-height:1;color:#ffeac1;text-shadow:0 1px 2px #1b0a00;white-space:nowrap}
.ninja-chat .chat-title:after{content:none}.ninja-chat .chat-title small{position:absolute;right:150%;width:200px;text-align:center;font-size:10px;font-weight:400;color:#ebcf9e;overflow:hidden;text-overflow:ellipsis}.ninja-chat.is-collapsed .chat-title small{display:none}
.ninja-chat .chat-online-title,.ninja-chat.is-collapsed .chat-online-title{display:flex!important;position:absolute;left:calc(var(--dock-left)*.35);right:auto;top:var(--dock-center);height:30px;transform:translateY(-50%);width:calc(var(--dock-left)*.57);margin:0;gap:.4ch;justify-content:flex-start;align-items:center;direction:rtl;font-size:13px;font-weight:700;color:#ffeac1;text-shadow:0 1px 2px #1b0a00;white-space:nowrap}
.chat-online-icon,.chat-bubble-icon{position:absolute;display:block!important;top:var(--dock-center);transform:translateY(-50%);width:25px;height:25px;pointer-events:none}.chat-online-icon{left:calc(var(--dock-left)*.2)}.chat-bubble-icon{right:87px;width:23px;height:23px}
.ninja-chat .chat-toggle,.ninja-chat.is-collapsed .chat-toggle{position:absolute;inset:var(--dock-center) 48px auto auto;transform:translateY(-50%);width:var(--dock-button);height:var(--dock-button);min-width:0;min-height:0;padding:0;border:0;border-radius:6px;background:none;box-shadow:none;filter:none;color:transparent;font-size:0;transition:none}
.chat-toggle:before{content:none!important}.chat-toggle-art{display:block;width:100%;height:100%;pointer-events:none;overflow:hidden;transform:rotate(180deg)}.is-collapsed .chat-toggle-art{transform:none}.chat-toggle-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.ninja-chat .chat-toggle:hover{filter:brightness(1.1);box-shadow:none}.ninja-chat .chat-toggle:focus-visible{outline:2px solid #fff1b4;outline-offset:2px}
.ninja-chat.is-collapsed>.chat-unread-summary{display:flex!important;position:absolute;left:43%;top:var(--dock-center);transform:translateY(-50%);height:28px;gap:8px;align-items:center;direction:ltr;color:#ffeac1;font-size:13px;font-weight:700;white-space:nowrap;text-shadow:0 1px 2px #1b0a00;pointer-events:none}
.chat-badge-art{width:25px;height:25px;display:block}.chat-unread-summary b{position:absolute;left:0;top:0;width:25px;height:28px;display:grid;place-items:center;direction:ltr;font-size:13px;color:#432106;text-shadow:none}.chat-unread-summary span{font-size:13px}
.ninja-chat:not(.is-collapsed) .chat-online-list{left:2.6%;width:20.5%;top:20%;bottom:19%;padding:0 1%;direction:ltr}
.chat-person{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:5px 4px;text-align:start;border:0;border-bottom:1px solid #b27e301c;border-radius:3px;background:none}.chat-person b{font-size:13px;color:#4c2b12;max-width:100%}.chat-person small{display:block;font-size:10px;margin:0;color:#866545}.chat-person .chat-presence-dot{display:none}
.ninja-chat:not(.is-collapsed) .chat-messages{left:26.3%;right:3%;top:20%;bottom:19%;padding:0 4px}
.chat-message{display:grid;grid-template-columns:65px minmax(0,1fr);grid-template-areas:'sender content' 'time content';column-gap:9px;row-gap:0;margin:0 0 6px;padding:2px 4px;direction:rtl;background:none;box-shadow:none;font-size:13px;line-height:1.4}
.chat-sender{grid-area:sender;align-self:end;font-size:13px;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#502e15}.chat-message time{grid-area:time;align-self:start;display:block;margin:0;font-size:10px;color:#92754f}
.chat-message-text{grid-area:content;justify-self:start;align-self:center;max-width:100%;padding:6px 10px;background:#fff7dfba;border:1px solid #c99e5866;border-radius:9px;box-shadow:0 1px 2px #75410e14;white-space:pre-wrap;color:#4c2d13}.chat-directed .chat-message-text{background:#ffe5a6;border-color:#dfae51}.chat-mention{background:#f9c14f;color:#3f230a;border-color:#dc9b21;white-space:pre-wrap}.chat-mention-self{background:#f8bb3d;color:#341e06;border-color:#d89725}
.ninja-chat:not(.is-collapsed) .chat-input{left:20%;right:4.3%;top:86.5%;height:8.7%;padding:3px 8px;color:#583819;font-size:13px;line-height:1.4}
.ninja-chat:not(.is-collapsed) .chat-send{left:3.4%;width:13.5%;top:85.5%;height:11%;background:none;border:0;color:#ffeac1;font-size:14px;font-weight:700;text-shadow:0 1px 2px #281103;border-radius:8px;box-shadow:none}.ninja-chat .chat-send:hover{filter:brightness(1.12);box-shadow:none}.ninja-chat .chat-send:disabled{opacity:.55;background:none;filter:none}
.chat-empty{left:28%;right:4%;top:43%;font-size:12px}.chat-suggestions{right:4.5%;bottom:16%;width:min(320px,65%)}.chat-new{bottom:19%;left:50%}
@media(max-width:700px){
.nw-game{--chat-height:270px}.ninja-chat{--dock-center:26px}.ninja-chat .chat-title small,.chat-unread-summary span{display:none}
.ninja-chat .chat-title,.ninja-chat.is-collapsed .chat-title{right:80px;width:90px;font-size:12px}.chat-bubble-icon{right:57px;width:19px;height:19px}.ninja-chat .chat-toggle,.ninja-chat.is-collapsed .chat-toggle{right:22px}.ninja-chat .chat-online-title,.ninja-chat.is-collapsed .chat-online-title{font-size:11px}
.chat-online-icon{width:22px;height:22px}.ninja-chat.is-collapsed>.chat-unread-summary{left:46%;height:25px}.chat-badge-art{width:22px;height:22px}.chat-unread-summary b{width:22px;height:25px;font-size:12px}
.chat-person{padding:5px 0}.chat-person b{font-size:12px}.chat-person small{font-size:10px;display:block}.chat-message{column-gap:5px;font-size:12px;grid-template-columns:45px minmax(0,1fr)}.chat-sender{font-size:11px}.chat-message time{display:block;font-size:9px}.chat-message-text{padding:5px 7px}.ninja-chat:not(.is-collapsed) .chat-input{font-size:12px;padding:3px 4px}
}

/* Keep the title next to its icon in both interface languages. */
.ninja-chat .chat-title,.ninja-chat.is-collapsed .chat-title{display:block;text-align:right;line-height:30px}