/* Fine charcoal: approved artwork, shared across every community utility surface. */
html body.charcoalWidgets[class]:has(#guildChatWidget){--chat-ink:#292824;--chat-cream:#f7ecd4;--chat-muted:#736858;--chat-ember:#ab4d21;--chat-line:#73624736;--chat-font:'DM Sans',system-ui,sans-serif}
html body.charcoalWidgets[class]:has(#guildChatWidget) .guildUtilityDock{gap:12px}
html body.charcoalWidgets[class]:has(#guildChatWidget) .guildUtilityDock :is(.messageChatToggle,.messageNoticeToggle){width:62px!important;height:62px!important;min-width:62px!important;min-height:62px!important;padding:0!important;border:0!important;border-radius:12px!important;background:transparent!important;box-shadow:none!important;overflow:visible!important;isolation:isolate;transition:transform .2s ease,filter .2s ease;filter:drop-shadow(0 4px 6px #0005)}
html body.charcoalWidgets[class]:has(#guildChatWidget) .guildUtilityDock button::before,html body.charcoalWidgets[class]:has(#guildChatWidget) .guildUtilityDock button::after{content:none!important;display:none!important}
html body.charcoalWidgets[class]:has(#guildChatWidget) .guildUtilityDock .guildUtilityIcon{width:70px!important;height:70px!important;max-width:none!important;content:normal!important;filter:none!important;object-fit:contain;transform:none!important}
html body.charcoalWidgets[class]:has(#guildChatWidget) .guildUtilityDock .messageChatToggle .guildUtilityIcon{width:72px!important;height:72px!important}
html body.charcoalWidgets[class]:has(#guildChatWidget) .guildUtilityDock button:hover{transform:translateY(-3px) rotate(-2deg);background:transparent!important;box-shadow:none!important;filter:drop-shadow(0 5px 8px #0006)}
html body.charcoalWidgets[class]:has(#guildChatWidget) .guildUtilityDock button:focus-visible{outline:2px solid #ffdf9c;outline-offset:5px}
html body.charcoalWidgets[class]:has(#guildChatWidget) .guildUnreadBadge{background:#a44a25!important;border:2px solid #f7ecd4!important;color:#fff9ec!important;box-shadow:0 1px 3px #0003!important;right:-3px;top:-3px;z-index:2;font:700 11px/1 var(--chat-font)}
html body.charcoalWidgets[class]:has(#guildChatWidget) #guildChatWidget.messageChatWidget,
html body.charcoalWidgets[class]:has(#guildChatWidget) :is(.messageNoticeDialog,.messageMemberDialog,.messageActionDialog,.messageReportDialog),
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageCenter{
 color:var(--chat-ink)!important;font-family:var(--chat-font)!important;background:#f7ecd4!important;background-clip:padding-box!important;
 border:18px solid transparent!important;border-image:url('assets/ui/fine-charcoal-frame.webp') 70 fill / 18px stretch!important;border-radius:16px!important;
 box-shadow:0 12px 42px #0005!important;clip-path:none!important;box-sizing:border-box;
}
html body.charcoalWidgets[class]:has(#guildChatWidget) #guildChatWidget.messageChatWidget{inset:16px 16px 16px auto!important;width:min(440px,calc(100vw - 32px));height:calc(100dvh - 32px);max-height:none!important;padding:6px 14px 12px!important;overflow:hidden}
html body.charcoalWidgets[class]:has(#guildChatWidget) #guildChatWidget.messageChatWidget::before,html body.charcoalWidgets[class]:has(#guildChatWidget) #guildChatWidget.messageChatWidget::after,
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageCenter::before,html body.charcoalWidgets[class]:has(#guildChatWidget) .messageCenter::after{content:none!important;display:none!important}
html body.charcoalWidgets[class]:has(#guildChatWidget) #guildChatWidget.messageChatWidget :is(.messageWidgetBody,.messageCenter,.messageOnlinePanel){background:transparent!important;color:var(--chat-ink)!important;box-shadow:none!important}
html body.charcoalWidgets[class]:has(#guildChatWidget) #guildChatWidget.messageChatWidget .messageCenter{border:0!important;border-image:none!important;padding:14px 0 0!important;border-radius:0!important;overflow:hidden}
html body.charcoalWidgets[class]:has(#guildChatWidget) #guildChatWidget .messageWidgetHead{padding:4px 0 14px;min-height:56px;background:transparent!important;border:0!important;border-bottom:1px solid var(--chat-line)!important;box-shadow:none!important}
html body.charcoalWidgets[class]:has(#guildChatWidget) #guildChatWidget .messageWidgetHead::before,html body.charcoalWidgets[class]:has(#guildChatWidget) #guildChatWidget .messageWidgetHead::after{content:none!important;display:none!important}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageWidgetHead strong,html body.charcoalWidgets[class]:has(#guildChatWidget) .messageDialogHead h2,html body.charcoalWidgets[class]:has(#guildChatWidget) .messageCenter h2{font:400 28px/1.2 Marcellus,Georgia,serif!important;letter-spacing:-.02em!important;color:var(--chat-ink)!important;text-shadow:none!important;text-transform:none!important}
html body.charcoalWidgets[class]:has(#guildChatWidget) #guildChatWidget .messageWidgetHead>.messageQuiet,html body.charcoalWidgets[class]:has(#guildChatWidget) .messageClose{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:50%!important;color:var(--chat-muted)!important;font:28px/1 system-ui!important;width:40px;height:40px;min-height:40px;padding:0!important;flex-shrink:0}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageWidgetTabs{margin:0;border:0;border-bottom:1px solid var(--chat-line)!important;gap:14px}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageWidgetTab{background:transparent!important;color:var(--chat-muted)!important;min-height:43px;font:500 14px/1.2 var(--chat-font)!important;letter-spacing:0!important;padding:10px 8px;box-shadow:none!important}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageWidgetTab[aria-selected=true]{color:var(--chat-ink)!important;box-shadow:inset 0 -2px #a75329!important}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageDialogHead{margin:0 0 16px;padding:0 0 14px;border-bottom:1px solid var(--chat-line)!important;gap:12px}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageDialogHead::before,html body.charcoalWidgets[class]:has(#guildChatWidget) .messageDialogHead::after{content:none!important}
html body.charcoalWidgets[class]:has(#guildChatWidget) :is(.messageNoticeDialog,.messageMemberDialog,.messageActionDialog,.messageReportDialog){padding:14px 14px 18px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 32px);font:15px/1.5 var(--chat-font)!important;scrollbar-color:#b6a48a transparent}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageNoticeDialog{width:460px;overflow:hidden}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageNoticeDialog[open]{display:flex;flex-direction:column}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageNoticeList{overflow:auto;min-height:0;overscroll-behavior:contain;padding:0 2px;scrollbar-width:thin;scrollbar-color:#b6a48a transparent}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageNotice{position:relative;padding:20px 0;border:0!important;border-bottom:1px solid var(--chat-line)!important;background:transparent!important;box-shadow:none!important}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageNotice.unread{padding-right:16px}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageNotice.unread::after{content:'';width:6px;height:6px;border-radius:50%;background:#c65c24;position:absolute;right:1px;top:28px}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageNotice a{color:var(--chat-ink)!important;font:600 16px/1.4 var(--chat-font)!important;text-decoration:none}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageNotice p{color:#675f53!important;font:14px/1.6 var(--chat-font)!important;margin:8px 0;white-space:pre-wrap;overflow-wrap:anywhere}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageNotice time{font:12px/1.5 var(--chat-font)!important;color:var(--chat-muted)!important}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageNoticeTools{display:flex;justify-content:flex-end;margin:-6px 0 0}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageNoticeTools button,html body.charcoalWidgets[class]:has(#guildChatWidget) .messageNotice .messageQuiet{border:0!important;background:transparent!important;padding:6px 0!important;color:var(--chat-ember)!important;font:12px/1.5 var(--chat-font)!important;min-height:32px;box-shadow:none!important}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageQuiet{min-height:38px;padding:8px 12px;border:1px solid #73624755!important;background:#fff6e733!important;color:var(--chat-ink)!important;font:13px/1.4 var(--chat-font)!important;border-radius:9px 7px 10px 8px!important;box-shadow:none!important;letter-spacing:0!important;text-transform:none!important}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageQuiet:hover{background:#73624713!important}
html body.charcoalWidgets[class]:has(#guildChatWidget) :is(.messagePrimary,.messageLeaderAction){border:1px solid #272923!important;background:#30312b!important;color:#fff4dc!important;font:600 14px/1.3 var(--chat-font)!important;letter-spacing:0!important;text-transform:none!important;border-radius:10px 8px 11px 9px!important;box-shadow:none!important;min-height:44px;padding:10px 16px}
html body.charcoalWidgets[class]:has(#guildChatWidget) :is(.messagePrimary,.messageLeaderAction):hover{background:#494438!important}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageNoticeDialog>.messagePrimary{flex-shrink:0;margin-top:18px;align-self:stretch;text-align:center}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageCenter{padding:18px!important}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageInboxLabel{font:400 20px/1.3 Marcellus,Georgia,serif!important;color:var(--chat-ink)!important}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageInbox .messageConversation{padding:15px 8px!important;color:#6b6255!important;background:transparent!important;border:0!important;border-bottom:1px solid var(--chat-line)!important;min-height:52px}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageInbox .messageConversation.selected{background:#b79b6820!important;color:var(--chat-ink)!important;border-radius:6px}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageInbox .messageConversation.unread{color:var(--chat-ink)!important;background:#cf793914!important}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageConversation strong{font:500 15px/1.5 var(--chat-font)!important}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageComposeButtons{gap:7px}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageToolbar{gap:12px;flex-wrap:wrap}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageComposeButtons .messageQuiet{font-size:12px!important;padding:8px 10px}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageThreadTitle{color:var(--chat-ink)!important;font:600 18px/1.4 var(--chat-font)!important;text-transform:none!important;margin:0 0 10px!important;letter-spacing:0!important;min-width:0;overflow-wrap:anywhere}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageConversationHead{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-bottom:8px;min-width:0}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageConversationHead .messageBack{width:36px;min-width:36px;min-height:36px;height:36px;font-size:22px!important;border:0!important;padding:0!important;margin:0!important;border-radius:50%!important}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageConversationHead .messageThreadTitle{margin:0!important;flex:1}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageActions{justify-content:flex-end;gap:14px;padding-bottom:10px;border-bottom:1px solid var(--chat-line);margin:0 0 2px}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageActions .messageQuiet{padding:4px 0!important;border:0!important;background:transparent!important;min-height:30px;font:12px/1.5 var(--chat-font)!important;color:var(--chat-muted)!important}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageActions .messageDelete{color:#98502a!important}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageThread{background:transparent!important;border:0!important;box-shadow:none!important;padding:8px 2px 14px!important;gap:10px!important;scrollbar-width:thin;scrollbar-color:#b6a48a transparent}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageTimeDivider{font:12px/1.5 var(--chat-font)!important;color:var(--chat-muted)!important;margin:14px 0 12px!important;letter-spacing:0}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageCenter .messageBubble{color:var(--chat-ink)!important;background:#95815c16!important;border:1px solid #95815c22!important;box-shadow:none!important;border-radius:13px 13px 13px 4px!important;padding:10px 13px!important;max-width:86%;position:relative}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageCenter .messageBubble.mine{background:#df8d4220!important;border-color:#c6854b30!important;border-radius:13px 13px 4px 13px!important}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageBubble p,html body.charcoalWidgets[class]:has(#guildChatWidget) .messageBubble strong{color:var(--chat-ink)!important;font-family:var(--chat-font)!important}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageCenter .messageBubble p{font:15px/1.55 var(--chat-font)!important;margin:0!important}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageBubble .messageReportButton{background:transparent!important;border:0!important;color:var(--chat-muted)!important;font:11px/1.5 var(--chat-font)!important;min-height:28px;margin:2px 0 -4px;padding:5px 0!important;text-decoration:underline;text-underline-offset:3px}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageReadReceipt{color:var(--chat-muted)!important;font:11px/1.5 var(--chat-font)!important;margin-top:6px}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageReadChecks{color:#ac5528;font-size:14px}
html body.charcoalWidgets[class]:has(#guildChatWidget) #guildChatWidget.messageChatWidget .messageReading .messageReply,html body.charcoalWidgets[class]:has(#guildChatWidget) .messageReply{background:transparent!important;border-top:1px solid var(--chat-line);padding-top:12px;margin-top:8px;gap:8px;align-items:end}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageCenter :is(.messageSearch,.messageRecipient,.messageDraft),html body.charcoalWidgets[class]:has(#guildChatWidget) .messageActionDialog>input,html body.charcoalWidgets[class]:has(#guildChatWidget) .messageActionDialog>select,html body.charcoalWidgets[class]:has(#guildChatWidget) .messageActionDialog>textarea,html body.charcoalWidgets[class]:has(#guildChatWidget) .messageReportDialog textarea{background:#fff9ec77!important;border:1px solid #8e765345!important;border-radius:11px!important;color:var(--chat-ink)!important;box-shadow:none!important;outline-offset:2px;font:15px/1.5 var(--chat-font)!important;padding:11px 13px!important}
html body.charcoalWidgets[class]:has(#guildChatWidget) #guildChatWidget .messageDraft{height:48px;min-height:48px;max-height:100px;resize:none;border-radius:13px!important}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageCenter .messageDraft::placeholder{color:#847863!important}
html body.charcoalWidgets[class]:has(#guildChatWidget) #guildChatWidget .messageSend{min-height:48px;height:48px;padding:10px 13px!important}
html body.charcoalWidgets[class]:has(#guildChatWidget) :is(.messagePrivacyNotice,.messageCenterHelp,.messageCenterStatus,.messageEmpty,.messageTyping,.messageGroupChoice,.messageGroupMember,.messageForwardNote){color:var(--chat-muted)!important;font-family:var(--chat-font)!important}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messagePrivacyNotice{font-size:11px;margin:10px 0 0}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messagePrivacyNotice a{color:var(--chat-muted)!important}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageOnlineMember{color:var(--chat-ink)!important;border-bottom:1px solid var(--chat-line);background:transparent!important}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageOnlineMember:hover{background:#95815c12!important}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageReportDialog fieldset{border-color:var(--chat-line);border-radius:8px}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageReportReason,html body.charcoalWidgets[class]:has(#guildChatWidget) .messageReportWarning{color:var(--chat-ink)!important}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageReportWarning{border-left-color:#ab4d21;background:#b06b2910;border-radius:0 6px 6px 0}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageGroupChoice input,html body.charcoalWidgets[class]:has(#guildChatWidget) .messageReportReason input{accent-color:#a85a30}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageActionStatus{color:#984d2b}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageGroupChoice,html body.charcoalWidgets[class]:has(#guildChatWidget) .messageGroupMember{border-color:var(--chat-line)}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageForwarded summary{color:#945123}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageForwardQuote{border-color:#b79b68}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageToast{border:12px solid transparent!important;border-image:url('assets/ui/fine-charcoal-frame.webp') 70 fill / 12px stretch!important;padding:6px;background:transparent!important;border-radius:10px;box-shadow:0 8px 28px #0004;color:var(--chat-ink)!important}
html body.charcoalWidgets[class]:has(#guildChatWidget) .messageToastOpen{color:var(--chat-ink)!important;font:14px/1.5 var(--chat-font)}
html body.charcoalWidgets[class]:has(#guildChatWidget) :is(.messageChatWidget,.messageNoticeDialog,.messageMemberDialog,.messageActionDialog,.messageReportDialog,.messageCenter) :is(button,a,input,select,textarea):focus-visible{outline:2px solid #a85a30!important;outline-offset:3px}
html body.charcoalWidgets[class]:has(#guildChatWidget) :is(.messageChatWidget,.messageNoticeDialog,.messageMemberDialog,.messageActionDialog,.messageReportDialog) :is(button,input,textarea):disabled{opacity:.5;cursor:default}
@media(max-width:700px){
 html body.charcoalWidgets[class]:has(#guildChatWidget) #guildChatWidget.messageChatWidget{inset:6px!important;width:calc(100vw - 12px);height:calc(100dvh - 12px);border-width:14px!important;border-image-width:14px!important;padding:8px 10px max(12px,env(safe-area-inset-bottom))!important}
 html body.charcoalWidgets[class]:has(#guildChatWidget) .messageWidgetHead strong,html body.charcoalWidgets[class]:has(#guildChatWidget) .messageDialogHead h2{font-size:26px!important}
 html body.charcoalWidgets[class]:has(#guildChatWidget) .guildUtilityDock{gap:10px}
 html body.charcoalWidgets[class]:has(#guildChatWidget) .guildUtilityDock :is(.messageChatToggle,.messageNoticeToggle){width:56px!important;height:56px!important;min-width:56px!important;min-height:56px!important}
 html body.charcoalWidgets[class]:has(#guildChatWidget) .guildUtilityDock .guildUtilityIcon{width:64px!important;height:64px!important}
 html body.charcoalWidgets[class]:has(#guildChatWidget) .guildUtilityDock .messageChatToggle .guildUtilityIcon{width:66px!important;height:66px!important}
 html body.charcoalWidgets[class]:has(#guildChatWidget) :is(.messageNoticeDialog,.messageMemberDialog,.messageActionDialog,.messageReportDialog){border-width:14px!important;border-image-width:14px!important;padding:12px 10px 16px;max-height:calc(100dvh - 20px);max-width:calc(100vw - 12px)}
 html body.charcoalWidgets[class]:has(#guildChatWidget) .messageCenter .messageBubble{max-width:89%}
}
@media(max-height:560px){
 html body.charcoalWidgets[class]:has(#guildChatWidget) #guildChatWidget .messageWidgetHead{min-height:38px;padding:0 0 4px}
 html body.charcoalWidgets[class]:has(#guildChatWidget) #guildChatWidget .messageWidgetHead strong{font-size:22px!important}
 html body.charcoalWidgets[class]:has(#guildChatWidget) #guildChatWidget .messageWidgetTab{min-height:34px;padding:6px}
 html body.charcoalWidgets[class]:has(#guildChatWidget) #guildChatWidget.messageChatWidget .messageCenter{padding-top:5px!important}
 html body.charcoalWidgets[class]:has(#guildChatWidget) .messageConversationHead{margin-bottom:2px}
 html body.charcoalWidgets[class]:has(#guildChatWidget) .messageActions{padding-bottom:3px;margin-bottom:0}
 html body.charcoalWidgets[class]:has(#guildChatWidget) #guildChatWidget .messageReading .messageReply{margin-top:4px;padding-top:5px}
 html body.charcoalWidgets[class]:has(#guildChatWidget) .messagePrivacyNotice{margin-top:4px}
}
@media(prefers-reduced-motion:reduce){html body.charcoalWidgets[class]:has(#guildChatWidget) .guildUtilityDock button{transition:none!important}html body.charcoalWidgets[class]:has(#guildChatWidget) .guildUtilityDock button:hover{transform:none!important}}

/* The shared widget root also outranks legacy game-theme ID selectors. */
html body.charcoalWidgets:has(#guildChatWidget) :is(.messageQuiet,.messagePrimary,.messageClose,.messageLeaderAction){clip-path:none!important;filter:none!important;transform:none!important}
html body.charcoalWidgets :is(#guildChatWidget,.messageNoticeDialog,.messageMemberDialog,.messageActionDialog,.messageReportDialog,.messageCenter,.messageToast) button::before,
html body.charcoalWidgets :is(#guildChatWidget,.messageNoticeDialog,.messageMemberDialog,.messageActionDialog,.messageReportDialog,.messageCenter,.messageToast) button::after{content:none!important;display:none!important}