#socialDock{position:absolute;left:16px;bottom:100px;z-index:9;font-size:13px;pointer-events:auto}#chatToggle{padding:9px 14px;background:#102d40;border-color:#6eacb4;box-shadow:0 3px 15px #0008}#chatUnread:not(:empty){display:inline-block;background:#edb858;color:#182530;padding:1px 6px;border-radius:9px;margin-left:4px}#chatPanel{position:absolute;left:0;bottom:45px;width:385px;max-width:calc(100vw - 24px);background:#091a29f5;border:1px solid #74a7b6;border-radius:8px;box-shadow:0 10px 45px #000b;overflow:hidden}#chatPanel[hidden],#chatPanel [hidden]{display:none!important}#chatPanel header{display:flex;align-items:center;gap:7px;padding:10px;background:#18394a}#chatPanel header strong{flex:1;color:#e7d2a6}#chatPanel button{font-size:12px;padding:7px 9px}#chatPanel nav{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;padding:7px}#chatPanel nav button[aria-pressed=true]{background:#287178;border-color:#82e0d8}#chatScope{padding:2px 12px 7px;color:#98bfcc;font-size:11px}#chatHistory{height:180px;overflow:auto;padding:0 12px;overscroll-behavior:contain;scrollbar-width:thin}.chat-line{margin:7px 0;line-height:1.6;overflow-wrap:anywhere}.chat-line time{font-size:10px;color:#668693;margin-right:6px}.chat-line b{color:#8ddcdf;margin-right:7px}.chat-line.mine b{color:#edd39a}.chat-line span{white-space:pre-wrap}.chat-empty{color:#7d9ba9;text-align:center;padding:45px 0}#chatForm{display:flex;gap:6px;padding:9px;border-top:1px solid #34505c}#chatForm input{min-width:0;flex:1;background:#06131f;color:#edf3f5;border:1px solid #4a7589;border-radius:5px;padding:9px;font-size:14px}#chatForm button{background:#287178}#chatNotice{padding:0 10px;color:#ecc17d}#chatNotice:empty{display:none}#groupPanel{max-height:340px;overflow:auto;padding:0 12px 12px;overscroll-behavior:contain}#groupPanel h3{font-size:14px;color:#efd4a0;margin:14px 0 8px}.group-section{border-bottom:1px solid #2b4552;padding-bottom:12px}.group-section form{display:flex;gap:5px}.group-section input{min-width:0;width:100%;background:#06131f;color:#e0edf0;border:1px solid #476879;padding:8px;border-radius:5px;font-size:14px}.group-section form button{white-space:nowrap}.group-heading{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.group-heading small{color:#9ab0bf}.group-heading button{margin-left:auto}.social-person{display:flex;gap:5px;align-items:center;padding:9px 0;border-bottom:1px solid #223b47}.social-person>span{flex:1;min-width:0;overflow-wrap:anywhere}.social-person small,.group-invite small{display:block;color:#8faeba;font-size:10px}.presence{display:inline-block;width:7px;height:7px;border-radius:50%;background:#62717b;margin-right:6px}.presence.online{background:#83e5b0}.group-invite{background:#26414b;border:1px solid #9ec1a2;border-radius:5px;padding:9px;margin:7px 0}.group-invite button{margin-top:6px}.chat-open #questTracker,.chat-open #messages{visibility:hidden}@media(max-width:850px) and (orientation:portrait){#socialDock{left:10px;bottom:171px}#chatPanel{width:370px;bottom:42px;max-height:calc(100dvh - 220px)}#chatHistory{height:160px}#groupPanel{max-height:285px}.in-town #socialDock{bottom:80px}.in-town #chatPanel{max-height:calc(100dvh - 165px)}#chatForm input{font-size:16px}}@media(max-height:560px) and (orientation:landscape){#socialDock{bottom:83px}#chatPanel{bottom:38px}#chatHistory{height:95px}#groupPanel{max-height:170px}}

#chatPanel nav{grid-template-columns:repeat(5,minmax(0,1fr))}#chatPanel nav button{padding:7px 3px;font-size:11px}.event-line b{color:#9fbed0}.event-loot span{color:#f2d089}.event-level span{color:#8aefb7}.event-boss span,.event-sale span{color:#ffbd82}.event-danger span{color:#ff9f9f}

/* Compact, expandable chat with a transparent battlefield backdrop. */
#socialDock{left:12px;bottom:12px}#chatToggle{padding:7px 10px;background:#0c2533aa;box-shadow:none;font-size:12px}#chatPanel{width:330px;bottom:40px;max-height:calc(100dvh - 100px);background:#07182670;border-color:#8fbdc166;box-shadow:none;backdrop-filter:none;text-shadow:0 1px 3px #000;display:flex;flex-direction:column}#chatPanel header{padding:5px 7px;background:#15334280}#chatPanel header strong{font-size:12px}#chatPanel header button{font-size:10px;padding:6px}#chatPanel nav{padding:5px}#chatPanel nav button{background:#15344777}#chatScope{font-size:10px}#chatHistory{height:115px;flex:0 1 auto;min-height:50px}#chatForm{padding:6px;background:#07162355}#chatForm input{background:#05152280;font-size:14px;padding:7px}.chat-line{font-size:12px}.chat-line time{color:#bed4dd}.chat-empty{padding:15px 0;color:#b2c8d1}#socialDock.expanded #chatPanel{width:520px;max-width:calc(100vw - 24px);background:#071826aa}#socialDock.expanded #chatHistory{height:280px}#socialDock.expanded .chat-line{font-size:15px}#socialDock.expanded #chatPanel header strong{font-size:14px}
@media(max-height:600px) and (max-width:1200px) and (orientation:landscape){#socialDock{bottom:100px;left:10px}#chatPanel{width:300px;bottom:35px;max-height:calc(100dvh - 148px)}#chatHistory{height:72px;min-height:32px}#chatPanel header,#chatPanel nav{padding:3px}#chatPanel header strong{font-size:10px}#chatPanel button{padding:4px;font-size:10px}#chatScope{display:none}#chatForm{padding:4px}#chatForm input{padding:5px;font-size:16px}#socialDock.expanded #chatPanel{width:430px}#socialDock.expanded #chatHistory{height:160px}#socialDock.expanded .chat-line{font-size:14px}.in-town #socialDock{bottom:72px}}

/* Group management opens as a readable panel instead of a cramped chat box. */
body.groups-open #chatPanel{position:fixed!important;left:50%!important;top:50%!important;bottom:auto!important;transform:translate(-50%,-50%);width:min(520px,calc(100vw - 24px))!important;max-width:calc(100vw - 24px)!important;max-height:calc(100dvh - 32px)!important;background:#091c2af5;z-index:40}
body.groups-open #socialDock{z-index:40}body.groups-open #groupPanel{max-height:calc(100dvh - 165px);flex:1;min-height:0;overflow:auto}body.groups-open #chatPanel header{flex-wrap:wrap}body.groups-open #chatPanel button{min-height:44px}body.groups-open .social-person{flex-wrap:wrap}body.groups-open .social-person>span{flex-basis:45%}body.groups-open #chatPanel nav{display:none}.topnav [data-social-open]:not([data-invites="0"])::after{content:attr(data-invites);color:#ffe295;margin-left:4px}

#chatPanel .chat-player-name{display:inline;padding:2px 3px;margin:0 5px 0 0;min-height:28px;font:inherit;font-weight:700;color:#8ddcdf;border:0;background:transparent;white-space:normal;overflow-wrap:anywhere;text-decoration:underline;text-underline-offset:3px}#chatPanel .chat-player-name:hover,#chatPanel .chat-player-name:focus-visible{background:#26535ecc;outline:1px solid #8ddcdf}#chatPlayerActions{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:7px 10px;background:#102e3bf5;border-top:1px solid #547782}#chatPlayerActions strong{min-width:0;overflow-wrap:anywhere;flex:1}#chatPlayerActions span{color:#ecd398}#chatPlayerActions button{min-height:32px}#chatPlayerActions [data-chat-player-close]{margin-left:auto}

#whisperRecipientRow{display:flex;align-items:center;gap:8px;padding:6px 10px;font-size:11px;color:#d6b4ee}#whisperRecipientRow[hidden]{display:none}#whisperRecipient{min-width:0;flex:1;min-height:36px;padding:6px 8px}.whisper-route{display:block;color:#d6b4ee;font-size:10px}.chat-line [data-whisper-reply]{min-width:32px;min-height:32px;padding:3px}#chatPanel nav{flex-wrap:wrap}

/* Keep the composer visible when the recipient row is open. */
#chatPanel>header,#chatPanel>nav,#chatScope,#whisperRecipientRow,#chatForm{flex-shrink:0}#chatHistory{min-height:0;flex:1 1 auto}#chatPanel nav{grid-template-columns:repeat(6,minmax(0,1fr))}#chatPanel nav button{min-width:0;padding-inline:2px}

#chatPanel nav{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}#chatPanel nav button{flex:0 0 auto;min-width:44px;min-height:44px;padding:5px 9px}#chatPanel [data-channel=system]{color:#b5efc8}#chatPanel [data-channel=system][aria-pressed=true]{background:#275d43;border-color:#79df9b}.event-purchase span,.event-craft span{color:#b7f6cd}.event-forge span{color:#ffe19b}.event-system span{color:#c7d6e5}

/* Expanded mobile System chat must keep its close button above the Options HUD. */
@media(max-width:1200px),(max-height:600px) and (max-width:1200px){body.chat-open #menuToggle{visibility:hidden!important}}