.chatroomMessage{justify-content:flex-start;align-items:flex-start;gap:var(--spacing-sm);box-sizing:border-box;width:100%;padding:var(--spacing-xs)0;animation:slideIn var(--chatroom-transition-normal)ease-out;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;max-width:100%;display:flex;position:relative}@media (width>=481px){.chatroomMessage{gap:var(--spacing-md);padding:var(--spacing-sm)0}}@media (width>=769px){.chatroomMessage{max-width:calc(100% - var(--chatroom-sidebar-width-desktop))}}.chatroomMessage .chatroomMessageLog{color:var(--secondary-text-color);text-align:center;padding:var(--spacing-xs)var(--spacing-md);margin:var(--spacing-xs)auto;background-color:var(--tertiary-background-color);border-radius:var(--primary-border-radius);max-width:fit-content;font-size:.75rem;font-style:italic}@media (width>=481px){.chatroomMessage .chatroomMessageLog{font-size:.8125rem}}.chatroomMessage .userProfileImage{cursor:pointer;transition:transform var(--chatroom-transition-fast);background-color:#0000;border:none;border-radius:50%;outline:none;flex-shrink:0;width:32px;height:32px}@media (width>=481px){.chatroomMessage .userProfileImage{width:36px;height:36px}}@media (width>=769px){.chatroomMessage .userProfileImage{width:40px;height:40px}}.chatroomMessage .userProfileImage:hover{transform:scale(1.05)}.chatroomMessage .userProfileImage:active{transform:scale(.95)}.chatroomMessage .userProfileImage:focus-visible{outline:2px solid var(--primary-active-color);outline-offset:2px}.chatroomMessage .user-preview-image-icon{opacity:.7;flex-shrink:0}.chatroomMessage .chatroomMessageData{background-color:var(--tertiary-background-color);border-radius:var(--chatroom-message-bubble-radius);box-sizing:border-box;min-width:0;transition:all var(--chatroom-transition-fast);box-shadow:var(--chatroom-message-shadow);padding:var(--spacing-sm)var(--spacing-md);flex:1;min-width:200px;max-width:300px;position:relative}@media (width>=481px){.chatroomMessage .chatroomMessageData{padding:var(--spacing-md)var(--spacing-lg)}}@media (width>=769px){.chatroomMessage .chatroomMessageData:hover{box-shadow:var(--chatroom-message-hover-shadow);transform:translateY(-1px)}}.chatroomMessage .chatroomMessageData .chatroomMessageUsername{justify-content:space-between;align-items:center;gap:var(--spacing-sm);color:var(--primary-text-color);font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-xs);padding-right:28px;font-size:.8125rem;display:flex}@media (width>=481px){.chatroomMessage .chatroomMessageData .chatroomMessageUsername{font-size:.875rem}}.chatroomMessage .chatroomMessageData .chatroomMessageUsername .messageTimeStamp{font-size:.6875rem;font-weight:var(--font-weight-normal);color:var(--secondary-text-color);white-space:nowrap}@media (width>=481px){.chatroomMessage .chatroomMessageData .chatroomMessageUsername .messageTimeStamp{font-size:.75rem}}.chatroomMessage .chatroomMessageData .chatroomMessageContent{gap:var(--spacing-xs);width:100%;padding-bottom:var(--spacing-md);flex-direction:column;display:flex;position:relative}.chatroomMessage .chatroomMessageData .chatroomMessageContent .chatroomMessageText{color:var(--primary-text-color);word-wrap:break-word;overflow-wrap:break-word;white-space:pre-wrap;margin:0;font-size:.875rem;line-height:1.5}@media (width>=481px){.chatroomMessage .chatroomMessageData .chatroomMessageContent .chatroomMessageText{font-size:.9375rem}}@media (width>=769px){.chatroomMessage .chatroomMessageData .chatroomMessageContent .chatroomMessageText{font-size:1rem}}.chatroomMessage .chatroomMessageData .chatroomMessageContent .chatroomMessageImage{border-radius:var(--primary-border-radius);cursor:pointer;width:100%;height:auto;transition:transform var(--chatroom-transition-fast);margin-top:var(--spacing-xs);max-width:280px}@media (width>=481px){.chatroomMessage .chatroomMessageData .chatroomMessageContent .chatroomMessageImage{max-width:360px}}@media (width>=769px){.chatroomMessage .chatroomMessageData .chatroomMessageContent .chatroomMessageImage{max-width:450px}.chatroomMessage .chatroomMessageData .chatroomMessageContent .chatroomMessageImage:hover{transform:scale(1.02)}}.chatroomMessage .chatroomMessageData .chatroomMessageContent .chatroomMessageImage[src=""]{background-color:var(--quaternary-background-color);min-height:200px}.chatroomMessage .chatroomMessageData .chatroomMessageContent .chatroomMessageLargeViewWrapper{background-color:var(--chatroom-overlay-backdrop);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;cursor:pointer;width:100vw;height:100vh;animation:fadeIn var(--chatroom-transition-fast);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.chatroomMessage .chatroomMessageData .chatroomMessageContent .chatroomMessageLargeViewWrapper img{border-radius:var(--primary-border-radius);max-width:90vw;max-height:90vh;box-shadow:0 8px 32px #00000080}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.chatroomMessage+.chatroomMessage .chatroomMessageData{margin-top:0}
.messageMenu{top:var(--spacing-sm);right:var(--spacing-md);z-index:10;justify-content:center;align-items:center;display:flex;position:absolute}.messageMenu .messageMenuButton{border-radius:var(--primary-border-radius);width:20px;height:20px;color:var(--secondary-text-color);cursor:pointer;opacity:0;background-color:#0000;border:none;justify-content:center;align-items:center;padding:0;transition:all .2s;display:flex}.messageMenu .messageMenuButton svg{width:12px;height:12px}.messageMenu .messageMenuButton:hover{background-color:var(--tertiary-background-color);color:var(--primary-text-color)}.messageMenu .messageMenuButton:active{transform:scale(.95)}.messageMenu .messageMenuButton:focus-visible{outline:2px solid var(--primary-active-color);outline-offset:2px}.messageMenu .messageMenuPopup{top:calc(100% + var(--spacing-xs));background-color:var(--secondary-background-color);border:var(--default-border);border-radius:var(--primary-border-radius);box-shadow:0 4px 12px var(--dim-background-color);z-index:100;min-width:120px;padding:var(--spacing-xs)0;flex-direction:column;animation:.15s ease-out messageMenuFadeIn;display:flex;position:absolute;right:0;overflow:hidden}.messageMenu .messageMenuPopup .messageMenuItem{align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm)var(--spacing-md);color:var(--primary-text-color);cursor:pointer;text-align:left;white-space:nowrap;background-color:#0000;border:none;width:100%;font-size:.875rem;transition:background-color .2s,color .2s;display:flex}.messageMenu .messageMenuPopup .messageMenuItem svg{flex-shrink:0;width:14px;height:14px}.messageMenu .messageMenuPopup .messageMenuItem span{flex:1}.messageMenu .messageMenuPopup .messageMenuItem:hover{background-color:var(--tertiary-background-color)}.messageMenu .messageMenuPopup .messageMenuItem:active{transform:scale(.98)}.messageMenu .messageMenuPopup .messageMenuItem.replyMenuItem:hover{color:var(--primary-active-color)}.messageMenu .messageMenuPopup .messageMenuItem.deleteMenuItem:hover{color:var(--danger-button-link-background-color);background-color:#dc35451a}.messageMenu .messageMenuPopup .messageMenuItem:focus-visible{outline:2px solid var(--primary-active-color);outline-offset:-2px}.chatroomMessageData:hover .messageMenuButton{opacity:1}@keyframes messageMenuFadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.messageReactions{margin-top:var(--spacing-xs);gap:var(--spacing-xs);flex-wrap:wrap;justify-content:flex-end;align-items:center;display:flex;position:absolute;bottom:0;right:0}.messageReactions .reactionButtons{gap:var(--spacing-xs);flex-wrap:wrap;justify-content:flex-end;align-items:center;display:flex}.messageReactions .reactionButton{align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs)var(--spacing-sm);background-color:var(--tertiary-background-color);cursor:pointer;min-height:24px;box-shadow:0 1px 2px var(--dim-background-color);transition:all var(--chatroom-transition-fast);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:#0000;border:none;border-radius:16px;font-size:14px;display:flex;position:relative}.messageReactions .reactionButton:hover{background-color:var(--dim-background-color);transform:scale(1.05)}.messageReactions .reactionButton:active{transform:scale(.95)}.messageReactions .reactionButton.popoverOpen{background-color:var(--dim-background-color)}.messageReactions .reactionButton.reacted{background-color:var(--tertiary-background-color)}.messageReactions .reactionButton.reacted .count{color:var(--secondary-text-color);font-weight:600}.messageReactions .reactionButton .emoji{filter:drop-shadow(0 1px 1px var(--dim-background-color));font-size:16px;line-height:1;display:inline-block}.messageReactions .reactionButton .count{color:var(--secondary-text-color);text-align:center;min-width:12px;font-size:12px;font-weight:500;line-height:1}.messageReactions .replyButton,.messageReactions .addReactionButton{cursor:pointer;width:24px;height:24px;transition:all var(--chatroom-transition-fast);color:var(--secondary-text-color);opacity:.7;background-color:#0000;border:none;border-radius:50%;justify-content:center;align-items:center;display:flex}.messageReactions .replyButton svg,.messageReactions .addReactionButton svg{width:16px;height:16px}.messageReactions .replyButton:hover,.messageReactions .addReactionButton:hover{background-color:var(--tertiary-background-color);color:var(--primary-active-color);opacity:1;transform:scale(1.1)}.messageReactions .replyButton:active,.messageReactions .addReactionButton:active{transform:scale(.95)}.messageReactions .replyButton:focus-visible,.messageReactions .addReactionButton:focus-visible{outline:2px solid var(--primary-active-color);outline-offset:2px}.messageReactions .emojiPicker{bottom:calc(100% + var(--spacing-xs));background-color:var(--secondary-background-color);border:var(--default-border);border-radius:var(--primary-border-radius);box-shadow:0 4px 12px var(--dim-background-color);padding:var(--spacing-sm);z-index:1000;animation:emojiPickerFadeIn var(--chatroom-transition-fast)ease-out;position:absolute;right:0}.messageReactions .emojiPicker .emojiGrid{gap:var(--spacing-xs);grid-template-columns:repeat(4,1fr);display:grid}.messageReactions .emojiPicker .emojiOption{border-radius:var(--primary-border-radius);cursor:pointer;width:36px;height:36px;transition:all var(--chatroom-transition-fast);background-color:#0000;border:none;justify-content:center;align-items:center;font-size:20px;display:flex}.messageReactions .emojiPicker .emojiOption:hover{background-color:var(--tertiary-background-color);transform:scale(1.1)}.messageReactions .emojiPicker .emojiOption:active{transform:scale(.95)}.messageReactions .emojiPicker .emojiOption:disabled{opacity:.5;cursor:not-allowed;transform:none}.messageReactions .emojiPicker .emojiOption:focus-visible{outline:2px solid var(--primary-active-color);outline-offset:2px}@keyframes emojiPickerFadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.reactionUsersPopover{bottom:calc(100% + var(--spacing-xs));background-color:var(--secondary-background-color);border:var(--default-border);border-radius:var(--primary-border-radius);z-index:1001;opacity:0;min-width:240px;max-width:320px;max-height:300px;transition:all var(--chatroom-transition-fast)ease-out;pointer-events:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:absolute;right:0;overflow:hidden;transform:translateY(4px)scale(.95);box-shadow:0 4px 16px #0003}.reactionUsersPopover.visible{opacity:1;pointer-events:auto;transform:translateY(0)scale(1)}@media (width<=768px){.reactionUsersPopover{transform-origin:0 100%;min-width:200px;max-width:280px;max-height:250px;left:0;right:auto}}.reactionUsersPopover .popoverHeader{align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm);border-bottom:var(--default-border);background-color:var(--tertiary-background-color);display:flex}.reactionUsersPopover .popoverHeader .emoji{font-size:18px;line-height:1}.reactionUsersPopover .popoverHeader .count{color:var(--secondary-text-color);font-size:13px;font-weight:600}.reactionUsersPopover .popoverContent{max-height:240px;padding:var(--spacing-xs);overflow-y:auto}.reactionUsersPopover .popoverContent::-webkit-scrollbar{width:6px}.reactionUsersPopover .popoverContent::-webkit-scrollbar-track{background:var(--tertiary-background-color);border-radius:3px}.reactionUsersPopover .popoverContent::-webkit-scrollbar-thumb{background:var(--dim-background-color);border-radius:3px}.reactionUsersPopover .popoverContent::-webkit-scrollbar-thumb:hover{background:var(--secondary-text-color)}.reactionUsersPopover .reactionUserItem{align-items:center;gap:var(--spacing-sm);padding:var(--spacing-xs)var(--spacing-sm);border-radius:var(--primary-border-radius);color:var(--primary-text-color);transition:background-color var(--chatroom-transition-fast);cursor:pointer;-webkit-tap-highlight-color:#0000;text-decoration:none;display:flex}.reactionUsersPopover .reactionUserItem:hover,.reactionUsersPopover .reactionUserItem:focus-visible{background-color:var(--tertiary-background-color);outline:none}.reactionUsersPopover .reactionUserItem:active{background-color:var(--dim-background-color)}.reactionUsersPopover .reactionUserItem .username{color:var(--primary-text-color);text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:500;overflow:hidden}
.messageReply{background-color:var(--tertiary-background-color);border-left:3px solid var(--primary-active-color);border-radius:4px;align-items:flex-start;gap:8px;margin-bottom:8px;padding:8px 12px;font-size:14px;display:flex}.messageReply .replyIndicator{color:var(--primary-active-color);flex-shrink:0;margin-top:2px;font-size:12px}.messageReply .replyContent{flex:1;min-width:0}.messageReply .replyContent .replyAuthor{align-items:center;gap:6px;margin-bottom:4px;display:flex}.messageReply .replyContent .replyAuthor a{color:var(--primary-active-color);align-items:center;gap:6px;font-weight:500;text-decoration:none;display:flex}.messageReply .replyContent .replyAuthor a:hover{text-decoration:underline}.messageReply .replyContent .replyAuthor .authorName{color:var(--primary-active-color);font-size:13px}.messageReply .replyContent .replyPreview{align-items:center;gap:8px;display:flex}.messageReply .replyContent .replyPreview .replyImagePreview{-o-object-fit:cover;object-fit:cover;border-radius:4px;flex-shrink:0;width:32px;height:32px}.messageReply .replyContent .replyPreview .replyText{color:var(--secondary-text-color);word-break:break-word;line-height:1.4}
#chatroomMessageArea{width:100%;height:100%;padding:var(--spacing-sm);box-sizing:border-box;background-color:var(--primary-background-color);overscroll-behavior-y:contain;scroll-behavior:smooth;scroll-padding-bottom:var(--spacing-lg);will-change:scroll-position;-webkit-overflow-scrolling:touch;grid-area:chatroomMessagingArea;margin:0;position:relative;overflow:hidden auto}@media (width>=481px){#chatroomMessageArea{padding:var(--spacing-md)}}@media (width>=769px){#chatroomMessageArea{padding:var(--spacing-lg)}#chatroomMessageArea.with-sidebar{padding-right:var(--spacing-lg)}}#chatroomMessageArea .messageLoaderLoading{z-index:5;background:linear-gradient(to bottom,var(--primary-background-color)0%,var(--primary-background-color)70%,transparent 100%);width:100%;height:48px;margin-bottom:var(--spacing-sm);animation:fadeIn var(--chatroom-transition-normal);justify-content:center;align-items:center;display:flex;position:sticky;top:0}#chatroomMessageArea:empty:before{content:"No messages yet. Start the conversation!";height:100%;color:var(--secondary-text-color);text-align:center;padding:var(--spacing-xl);justify-content:center;align-items:center;font-size:.875rem;display:flex}#chatroomMessageArea>:not(:last-child){margin-bottom:var(--spacing-xs)}@media (width>=481px){#chatroomMessageArea>:not(:last-child){margin-bottom:var(--spacing-sm)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}#chatroomMessageArea::-webkit-scrollbar{width:8px}#chatroomMessageArea::-webkit-scrollbar-track{background-color:#0000}#chatroomMessageArea::-webkit-scrollbar-thumb{background-color:var(--quaternary-background-color);-webkit-transition:background-color var(--chatroom-transition-fast);transition:background-color var(--chatroom-transition-fast);border-radius:4px}#chatroomMessageArea::-webkit-scrollbar-thumb:hover{background-color:var(--secondary-text-color)}#chatroomMessageArea{scrollbar-width:thin;scrollbar-color:var(--quaternary-background-color)#0000}
.chatroomToolBoxNotLoggedIn{justify-content:center;align-items:center;gap:var(--spacing-md);background-color:var(--secondary-background-color);border-top:var(--primary-border);width:100%;height:100%;padding:0 var(--spacing-md)env(safe-area-inset-bottom,0px)var(--spacing-md);box-sizing:border-box;grid-area:chatroomToolBox;display:flex}@media (width>=481px){.chatroomToolBoxNotLoggedIn{gap:var(--spacing-lg)}}.chatroomToolBoxNotLoggedIn .btn{max-width:200px;min-height:var(--chatroom-touch-target-min);padding:var(--spacing-sm)var(--spacing-md);white-space:nowrap;flex:1;font-size:.875rem}@media (width>=481px){.chatroomToolBoxNotLoggedIn .btn{padding:var(--spacing-sm)var(--spacing-lg);font-size:1rem}}@media (width<=360px){.chatroomToolBoxNotLoggedIn .btn{padding:var(--spacing-xs)var(--spacing-sm);font-size:.8125rem}}#chatroomToolBox{box-sizing:border-box;background-color:var(--secondary-background-color);border-top:var(--primary-border);z-index:10;width:100%;height:100%;padding:var(--spacing-sm)var(--spacing-sm)calc(var(--spacing-sm) + env(safe-area-inset-bottom,0px))var(--spacing-sm);grid-area:chatroomToolBox;justify-content:center;align-items:center;display:flex;position:relative}@media (width>=481px){#chatroomToolBox{padding:var(--spacing-md)var(--spacing-md)calc(var(--spacing-md) + env(safe-area-inset-bottom,0px))var(--spacing-md)}}@media (width>=769px){#chatroomToolBox{padding:var(--spacing-md)var(--spacing-lg)calc(var(--spacing-md) + env(safe-area-inset-bottom,0px))var(--spacing-lg)}}#chatroomToolBox #someoneIsTyping{top:calc(-1*var(--spacing-lg));left:var(--spacing-md);background-color:var(--tertiary-background-color);color:var(--primary-text-color);padding:var(--spacing-xs)var(--spacing-sm);border-radius:var(--primary-border-radius);border:var(--primary-border);animation:fadeIn var(--chatroom-transition-fast);box-shadow:var(--chatroom-message-shadow);font-size:.75rem;position:absolute}@media (width>=481px){#chatroomToolBox #someoneIsTyping{left:var(--spacing-lg);font-size:.8125rem}}#chatroomToolBox #chatroomToolBoxItems{gap:var(--spacing-sm);width:100%;max-width:1200px;height:100%;transition:padding-right var(--chatroom-transition-normal);grid-template-columns:1fr auto;align-items:center;margin:0 auto;display:grid}@media (width>=481px){#chatroomToolBox #chatroomToolBoxItems{gap:var(--spacing-md)}}@media (width>=1200px){.chatroomPageContent.sidebarVisible #chatroomToolBox #chatroomToolBoxItems{padding-right:var(--chatroom-sidebar-width-desktop)}}@media (width>=769px) and (width<=1199px){.chatroomPageContent.sidebarVisible #chatroomToolBox #chatroomToolBoxItems{padding-right:var(--chatroom-sidebar-width-desktop);max-width:calc(100% - var(--chatroom-sidebar-width-desktop))}}#chatroomToolBox #chatroomToolBoxItems #chatroomToolBoxInput{background-color:var(--tertiary-background-color);width:100%;color:var(--primary-text-color);border:var(--primary-border);border-radius:calc(var(--primary-border-radius)*2);resize:none;box-sizing:border-box;transition:all var(--chatroom-transition-fast);height:var(--chatroom-input-height-mobile);padding:0 var(--spacing-md);outline:none;font-family:inherit;font-size:16px}@media (width>=481px){#chatroomToolBox #chatroomToolBoxItems #chatroomToolBoxInput{height:var(--chatroom-input-height-tablet);padding:0 var(--spacing-lg);font-size:.9375rem}}@media (width>=769px){#chatroomToolBox #chatroomToolBoxItems #chatroomToolBoxInput{height:var(--chatroom-input-height-desktop);font-size:1rem}}#chatroomToolBox #chatroomToolBoxItems #chatroomToolBoxInput::placeholder{color:var(--secondary-text-color)}#chatroomToolBox #chatroomToolBoxItems #chatroomToolBoxInput:hover{border-color:var(--primary-active-color)}#chatroomToolBox #chatroomToolBoxItems #chatroomToolBoxInput:focus{border-color:var(--primary-active-color);box-shadow:0 0 0 3px #ff99001a}#chatroomToolBox #chatroomToolBoxItems .chatroomToolBoxActionBtn{color:var(--primary-text-color);cursor:pointer;transition:all var(--chatroom-transition-fast);min-width:var(--chatroom-touch-target-min);min-height:var(--chatroom-touch-target-min);width:var(--chatroom-touch-target-min);height:var(--chatroom-touch-target-min);background-color:#0000;border:none;border-radius:50%;outline:none;flex-shrink:0;justify-content:center;align-items:center;display:flex}#chatroomToolBox #chatroomToolBoxItems .chatroomToolBoxActionBtn svg{width:var(--chatroom-icon-size-medium);height:var(--chatroom-icon-size-medium);transition:transform var(--chatroom-transition-fast)}#chatroomToolBox #chatroomToolBoxItems .chatroomToolBoxActionBtn:hover{background-color:var(--tertiary-background-color);color:var(--primary-active-color)}#chatroomToolBox #chatroomToolBoxItems .chatroomToolBoxActionBtn:active{transform:scale(.9)}#chatroomToolBox #chatroomToolBoxItems .chatroomToolBoxActionBtn:focus-visible{outline:2px solid var(--primary-active-color);outline-offset:2px}@media (width>=769px){#chatroomToolBox #chatroomToolBoxItems .chatroomToolBoxActionBtn svg{width:var(--chatroom-icon-size-large);height:var(--chatroom-icon-size-large)}}#chatroomToolBox #chatroomToolBoxItems .audioPlayer{width:100%;height:auto;padding:var(--spacing-xs);justify-content:center;align-items:center;display:flex}#chatroomToolBox #chatroomToolBoxItems .audioPlayer audio{width:100%;height:32px}@media (width>=481px){#chatroomToolBox #chatroomToolBoxItems .audioPlayer audio{height:36px}}#chatroomToolBox #chatroomToolBoxItems .audio-recording-animation{background-color:var(--chatroom-overlay-backdrop);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:1000;flex-direction:column;justify-content:center;align-items:center;animation:2s infinite pulsing;display:flex;position:fixed;inset:0}#chatroomToolBox #chatroomToolBoxItems .audio-recording-animation .counter{color:var(--primary-text-color);font-size:5rem;font-weight:var(--font-weight-bold);text-shadow:0 4px 12px #00000080}@media (width>=481px){#chatroomToolBox #chatroomToolBoxItems .audio-recording-animation .counter{font-size:7rem}}@media (width>=769px){#chatroomToolBox #chatroomToolBoxItems .audio-recording-animation .counter{font-size:9rem}}@keyframes pulsing{0%{opacity:1}50%{opacity:.8}to{opacity:1}}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.replyIndicator{background-color:var(--tertiary-background-color);border:1px solid var(--default-border-color);border-radius:8px;flex-direction:column;gap:4px;margin-bottom:8px;padding:8px 12px;display:flex}.replyIndicator .replyInfo{justify-content:space-between;align-items:center;display:flex}.replyIndicator .replyInfo .replyLabel{color:var(--primary-active-color);font-size:12px;font-weight:500}.replyIndicator .replyInfo .cancelReply{color:var(--secondary-text-color);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:16px;height:16px;padding:0;font-size:16px;line-height:1;display:flex}.replyIndicator .replyInfo .cancelReply:hover{background-color:var(--danger-button-link-background-color);color:var(--primary-text-color)}.replyIndicator .replyPreview{color:var(--secondary-text-color);word-break:break-word;text-overflow:ellipsis;max-height:32px;font-size:13px;line-height:1.4;overflow:hidden}
.mentionSelector{background-color:var(--secondary-background-color);border:1px solid var(--default-border-color);box-shadow:0 4px 12px var(--dim-background-color);z-index:1000;border-radius:8px;width:100%;max-height:200px;position:absolute;overflow-y:auto}.mentionSelector .mentionOption{cursor:pointer;align-items:center;gap:8px;padding:8px 12px;transition:background-color .2s;display:flex}.mentionSelector .mentionOption:hover,.mentionSelector .mentionOption.selected{background-color:var(--tertiary-background-color)}.mentionSelector .mentionOption .userAvatar{-o-object-fit:cover;object-fit:cover;border-radius:50%;flex-shrink:0;width:24px;height:24px}.mentionSelector .mentionOption .username{color:var(--primary-text-color);font-size:14px;font-weight:500}
.chatroomOnlineUsersListItem{border-radius:var(--primary-border-radius);padding:var(--spacing-xs)var(--spacing-sm);margin-bottom:var(--spacing-xs);transition:background-color var(--chatroom-transition-fast);background-color:#0000;flex-direction:column;justify-content:center;align-items:center;display:flex}.chatroomOnlineUsersListItem:hover{background-color:var(--tertiary-background-color)}.chatroomOnlineUsersListItem:last-child{margin-bottom:0}.chatroomOnlineUsersListItem .onlineUserDataWrapper{justify-content:space-between;align-items:center;gap:var(--spacing-sm);width:100%;display:flex}.chatroomOnlineUsersListItem .onlineUserDataWrapper .onlineUserData{flex:1;min-width:0}.chatroomOnlineUsersListItem .onlineUserDataWrapper .onlineUserData a{align-items:center;gap:var(--spacing-sm);transition:transform var(--chatroom-transition-fast);text-decoration:none;display:flex}.chatroomOnlineUsersListItem .onlineUserDataWrapper .onlineUserData a:hover{transform:translate(2px)}.chatroomOnlineUsersListItem .onlineUserDataWrapper .onlineUserData a img,.chatroomOnlineUsersListItem .onlineUserDataWrapper .onlineUserData a .user-preview-image{border-radius:50%;flex-shrink:0;width:32px;height:32px}@media (width>=481px){.chatroomOnlineUsersListItem .onlineUserDataWrapper .onlineUserData a img,.chatroomOnlineUsersListItem .onlineUserDataWrapper .onlineUserData a .user-preview-image{width:36px;height:36px}}.chatroomOnlineUsersListItem .onlineUserDataWrapper .onlineUserData a .onlineUserUsername{color:var(--primary-text-color);font-size:.875rem;font-weight:var(--font-weight-medium);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}@media (width>=481px){.chatroomOnlineUsersListItem .onlineUserDataWrapper .onlineUserData a .onlineUserUsername{font-size:.9375rem}}.chatroomOnlineUsersListItem .onlineUserDataWrapper:after{content:"";background-color:#28a745;border-radius:50%;flex-shrink:0;width:8px;height:8px;box-shadow:0 0 4px #28a745}
.chatroomOnlineUsersList{background-color:var(--secondary-background-color);box-sizing:border-box;z-index:100;transition:transform var(--chatroom-transition-normal),opacity var(--chatroom-transition-normal);-webkit-overflow-scrolling:touch;overscroll-behavior:contain;width:var(--chatroom-sidebar-width-mobile);max-width:85vw;padding:var(--spacing-md);border-left:var(--primary-border);scrollbar-width:thin;scrollbar-color:var(--quaternary-background-color)#0000;padding-top:calc(var(--chatroom-topbar-height-mobile) + env(safe-area-inset-top));padding-bottom:calc(var(--chatroom-toolbox-height-mobile) + env(safe-area-inset-bottom));position:fixed;top:0;bottom:0;right:0;overflow:hidden auto;box-shadow:-4px 0 16px #0000004d}@media (width>=481px){.chatroomOnlineUsersList{width:var(--chatroom-sidebar-width-tablet);padding:var(--spacing-md)var(--spacing-lg);padding-top:calc(var(--chatroom-topbar-height-tablet) + env(safe-area-inset-top));padding-bottom:calc(var(--chatroom-toolbox-height-tablet) + env(safe-area-inset-bottom))}}@media (width>=769px){.chatroomOnlineUsersList{width:var(--chatroom-sidebar-width-desktop);padding:var(--spacing-lg);padding-top:calc(var(--chatroom-topbar-height-desktop) + env(safe-area-inset-top));padding-bottom:calc(var(--chatroom-toolbox-height-desktop) + env(safe-area-inset-bottom));box-shadow:-2px 0 8px #0000001a}}.chatroomOnlineUsersList:empty:after{content:"No users online";text-align:center;color:var(--secondary-text-color);padding:var(--spacing-xl);font-size:.875rem;display:block}.chatroomOnlineUsersList::-webkit-scrollbar{width:6px}.chatroomOnlineUsersList::-webkit-scrollbar-track{background-color:#0000}.chatroomOnlineUsersList::-webkit-scrollbar-thumb{background-color:var(--quaternary-background-color);border-radius:3px}.chatroomOnlineUsersList::-webkit-scrollbar-thumb:hover{background-color:var(--secondary-text-color)}.chatroomOnlineUsersListHeader{justify-content:space-between;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md)0;margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-sm);border-bottom:var(--primary-border);background-color:var(--secondary-background-color);z-index:10;margin-top:calc(-1*var(--spacing-md));padding-top:var(--spacing-md);display:flex;position:sticky;top:0}@media (width>=481px){.chatroomOnlineUsersListHeader{padding:var(--spacing-lg)0;margin-bottom:var(--spacing-lg);padding-bottom:var(--spacing-sm);margin-top:calc(-1*var(--spacing-lg));padding-top:var(--spacing-lg)}}@media (width>=769px){.chatroomOnlineUsersListHeader{margin-top:calc(-1*var(--spacing-lg));padding-top:var(--spacing-lg)}}.chatroomOnlineUsersListTitle{font-size:.75rem;font-weight:var(--font-weight-bold);text-transform:uppercase;letter-spacing:.05em;color:var(--secondary-text-color);flex:1;line-height:1.2}@media (width>=481px){.chatroomOnlineUsersListTitle{font-size:.8125rem}}.chatroomOnlineUsersListCloseBtn{width:32px;min-width:32px;height:32px;min-height:32px;color:var(--secondary-text-color);cursor:pointer;transition:all var(--chatroom-transition-fast);background-color:#0000;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}.chatroomOnlineUsersListCloseBtn svg{width:14px;height:14px;transition:transform var(--chatroom-transition-fast)}.chatroomOnlineUsersListCloseBtn:hover{background-color:var(--tertiary-background-color);color:var(--primary-text-color)}.chatroomOnlineUsersListCloseBtn:hover svg{transform:rotate(90deg)}.chatroomOnlineUsersListCloseBtn:active{background-color:var(--quaternary-background-color);transform:scale(.9)}.chatroomOnlineUsersListCloseBtn:focus-visible{outline:2px solid var(--primary-active-color);outline-offset:2px}@media (width>=481px){.chatroomOnlineUsersListCloseBtn{width:36px;min-width:36px;height:36px;min-height:36px}.chatroomOnlineUsersListCloseBtn svg{width:16px;height:16px}}@media (width>=1200px){.chatroomOnlineUsersListCloseBtn{display:none}}.chatroomOnlineUsersListBackdrop{background-color:var(--chatroom-overlay-backdrop);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:99;animation:fadeIn var(--chatroom-transition-fast);position:fixed;inset:0}@media (width>=1200px){.chatroomOnlineUsersListBackdrop{display:none}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}
.chatroomPageContent{z-index:11;background-color:var(--primary-background-color);width:100%;height:100%;transition:grid-template-rows var(--chatroom-transition-normal);overscroll-behavior:none;grid-template-columns:1fr;grid-template-rows:calc(var(--chatroom-topbar-height-mobile) + env(safe-area-inset-top,0px))minmax(0,1fr)calc(var(--chatroom-toolbox-height-mobile) + env(safe-area-inset-bottom,0px));grid-template-areas:"chatroomTopbar""chatroomMessagingArea""chatroomToolBox";display:grid;position:relative;overflow:hidden}@media (width>=481px){.chatroomPageContent{grid-template-rows:calc(var(--chatroom-topbar-height-tablet) + env(safe-area-inset-top,0px))minmax(0,1fr)calc(var(--chatroom-toolbox-height-tablet) + env(safe-area-inset-bottom,0px))}}@media (width>=769px){.chatroomPageContent{grid-template-rows:calc(var(--chatroom-topbar-height-desktop) + env(safe-area-inset-top,0px))minmax(0,1fr)calc(var(--chatroom-toolbox-height-desktop) + env(safe-area-inset-bottom,0px))}}.chatroomPageMaximized{z-index:999}
body.chatroom-active{overflow:hidden}body:has(#content.chatroom-page-wrapper){overflow:hidden}body.chatroom-active .layout>:not(#page){display:none!important}body:has(#content.chatroom-page-wrapper) .layout>:not(#page){display:none!important}body.chatroom-active #page{height:100vh;position:fixed;inset:0;overflow:hidden;min-height:unset!important;flex:none!important;margin:0!important;padding:0!important}#page:has(#content.chatroom-page-wrapper){height:100vh;position:fixed;inset:0;overflow:hidden;min-height:unset!important;flex:none!important;margin:0!important;padding:0!important}@supports (height:100dvh){body.chatroom-active #page{height:100dvh}#page:has(#content.chatroom-page-wrapper){height:100dvh}}@supports (-webkit-touch-callout:none){body.chatroom-active #page{height:-webkit-fill-available}#page:has(#content.chatroom-page-wrapper){height:-webkit-fill-available}}#content.chatroom-page-wrapper{z-index:1;width:100vw;height:100vh;margin:0;padding:0;position:fixed;inset:0;overflow:hidden;grid-template-columns:unset!important;grid-template-rows:unset!important;grid-template-areas:unset!important;gap:0!important;display:block!important}@supports (height:100dvh){#content.chatroom-page-wrapper{height:100dvh}}@supports (-webkit-touch-callout:none){#content.chatroom-page-wrapper{height:-webkit-fill-available}}#content.chatroom-page-wrapper #primary{width:100%;height:100%;margin:0;padding:0;display:block;position:relative;overflow:hidden}#content.chatroom-page-wrapper .chatroom{background-color:var(--primary-background-color);width:100%;height:100%;margin:0;padding:0;display:block;position:relative;overflow:hidden}