body:not(:has(button.parameter.room.select[data-value="Special"])):not(:has(button.parameter.room.select[data-value="Roleplay"])):not(:has(button.parameter.room.select[data-value="Swamp"])) #message-container:not(.typewriter),#message-container.note{box-sizing:border-box;min-height:100%;flex:1;position:relative;background-color:var(--background);opacity:1;background-size:var(--line-height) var(--line-height);background-image:repeating-linear-gradient(0deg, var(--line), var(--line) 1.6px, var(--background) 1.6px, var(--background));border:1px solid var(--outline)}body:not(:has(button.parameter.room.select[data-value="Special"])):not(:has(button.parameter.room.select[data-value="Roleplay"])):not(:has(button.parameter.room.select[data-value="Swamp"])) #message-container:not(.typewriter) *,#message-container.note *{line-height:var(--line-height);margin:0}body:not(:has(button.parameter.room.select[data-value="Special"])):not(:has(button.parameter.room.select[data-value="Roleplay"])):not(:has(button.parameter.room.select[data-value="Swamp"])) #message-container:not(.typewriter) .group>.message,#message-container.note .group>.message{margin:0;position:relative;--message-width: 47.5%}body:not(:has(button.parameter.room.select[data-value="Special"])):not(:has(button.parameter.room.select[data-value="Roleplay"])):not(:has(button.parameter.room.select[data-value="Swamp"])) #message-container:not(.typewriter) .group>.message:first-child,#message-container.note .group>.message:first-child{margin-top:var(--line-height)}@media (max-width: 800px){body:not(:has(button.parameter.room.select[data-value="Special"])):not(:has(button.parameter.room.select[data-value="Roleplay"])):not(:has(button.parameter.room.select[data-value="Swamp"])) #message-container:not(.typewriter) .group>.message,#message-container.note .group>.message{margin-top:var(--line-height)}}body:not(:has(button.parameter.room.select[data-value="Special"])):not(:has(button.parameter.room.select[data-value="Roleplay"])):not(:has(button.parameter.room.select[data-value="Swamp"])) #message-container:not(.typewriter) .group>.message *,#message-container.note .group>.message *{font-family:"Bad Script", cursive;font-family:var(--bad-script)}body:not(:has(button.parameter.room.select[data-value="Special"])):not(:has(button.parameter.room.select[data-value="Roleplay"])):not(:has(button.parameter.room.select[data-value="Swamp"])) #message-container:not(.typewriter) .group>.message time,#message-container.note .group>.message time{margin:0;position:absolute;left:4px;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}body:not(:has(button.parameter.room.select[data-value="Special"])):not(:has(button.parameter.room.select[data-value="Roleplay"])):not(:has(button.parameter.room.select[data-value="Swamp"])) #message-container:not(.typewriter) .group>.message p,#message-container.note .group>.message p{--red-line-offset: calc(3rem + 4px + 1rem);--right-offset: 1rem;font-size:1.5rem;margin-left:var(--red-line-offset);margin-right:var(--right-offset);word-break:break-word}@media (max-width: 800px){body:not(:has(button.parameter.room.select[data-value="Special"])):not(:has(button.parameter.room.select[data-value="Roleplay"])):not(:has(button.parameter.room.select[data-value="Swamp"])) #message-container:not(.typewriter) .group>.message p,#message-container.note .group>.message p{margin-left:var(--red-line-offset) !important;margin-right:var(--right-offset) !important}}body:not(:has(button.parameter.room.select[data-value="Special"])):not(:has(button.parameter.room.select[data-value="Roleplay"])):not(:has(button.parameter.room.select[data-value="Swamp"])) #message-container:not(.typewriter) .group>.message.server p,#message-container.note .group>.message.server p{color:var(--server)}body:not(:has(button.parameter.room.select[data-value="Special"])):not(:has(button.parameter.room.select[data-value="Roleplay"])):not(:has(button.parameter.room.select[data-value="Swamp"])) #message-container:not(.typewriter) .group>.message.user p,#message-container.note .group>.message.user p{color:var(--user);margin-left:calc(var(--red-line-offset) + var(--message-width))}body:not(:has(button.parameter.room.select[data-value="Special"])):not(:has(button.parameter.room.select[data-value="Roleplay"])):not(:has(button.parameter.room.select[data-value="Swamp"])) #message-container:not(.typewriter) .group>.message.match p,#message-container.note .group>.message.match p{color:var(--match-user);margin-right:calc(var(--message-width) + var(--right-offset))}body:not(:has(button.parameter.room.select[data-value="Special"])):not(:has(button.parameter.room.select[data-value="Roleplay"])):not(:has(button.parameter.room.select[data-value="Swamp"])) #message-container:not(.typewriter):before,#message-container.note:before{content:"";position:absolute;width:2px;height:100%;border:2px solid var(--red-line);border-top:none;border-bottom:none;top:0;left:3rem}body:has(button.parameter.room.select[data-value="Special"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note),body:has(button.parameter.room.select[data-value="Roleplay"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note),body:has(button.parameter.room.select[data-value="Swamp"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note){position:relative;min-height:100%}body:has(button.parameter.room.select[data-value="Special"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note):before,body:has(button.parameter.room.select[data-value="Roleplay"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note):before,body:has(button.parameter.room.select[data-value="Swamp"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note):before{display:block;position:absolute;bottom:2px;width:100%;text-align:center;color:var(--secondary-text);content:"~~";font-family:"Ysabeau SC", sans-serif;font-family:var(--ysabeau);font-size:22px;font-weight:400}body:has(button.parameter.room.select[data-value="Special"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message,body:has(button.parameter.room.select[data-value="Roleplay"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message,body:has(button.parameter.room.select[data-value="Swamp"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message{display:flex;flex-direction:column-reverse;margin-bottom:0.5rem}body:has(button.parameter.room.select[data-value="Special"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message *,body:has(button.parameter.room.select[data-value="Roleplay"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message *,body:has(button.parameter.room.select[data-value="Swamp"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message *{font-family:"Ysabeau SC", sans-serif;font-family:var(--ysabeau);font-size:22px;font-weight:400}body:has(button.parameter.room.select[data-value="Special"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message time,body:has(button.parameter.room.select[data-value="Roleplay"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message time,body:has(button.parameter.room.select[data-value="Swamp"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message time{align-self:center;text-align:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;margin-bottom:0.5rem;color:var(--secondary-text)}body:has(button.parameter.room.select[data-value="Special"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message time:before,body:has(button.parameter.room.select[data-value="Roleplay"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message time:before,body:has(button.parameter.room.select[data-value="Swamp"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message time:before{content:"~~ "}body:has(button.parameter.room.select[data-value="Special"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message time:after,body:has(button.parameter.room.select[data-value="Roleplay"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message time:after,body:has(button.parameter.room.select[data-value="Swamp"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message time:after{content:" ~~"}body:has(button.parameter.room.select[data-value="Special"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message p,body:has(button.parameter.room.select[data-value="Roleplay"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message p,body:has(button.parameter.room.select[data-value="Swamp"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message p{--right-offset: 1rem;margin-top:0;margin-bottom:0.5rem;margin-right:var(--right-offset)}body:has(button.parameter.room.select[data-value="Special"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message:first-child p,body:has(button.parameter.room.select[data-value="Roleplay"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message:first-child p,body:has(button.parameter.room.select[data-value="Swamp"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message:first-child p{margin-top:1rem}body:has(button.parameter.room.select[data-value="Special"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message:last-child p,body:has(button.parameter.room.select[data-value="Roleplay"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message:last-child p,body:has(button.parameter.room.select[data-value="Swamp"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message:last-child p{margin-bottom:1rem}body:has(button.parameter.room.select[data-value="Special"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message.server p,body:has(button.parameter.room.select[data-value="Roleplay"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message.server p,body:has(button.parameter.room.select[data-value="Swamp"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message.server p{text-align:center;font-weight:500}body:has(button.parameter.room.select[data-value="Special"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message.match p,body:has(button.parameter.room.select[data-value="Special"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message.user p,body:has(button.parameter.room.select[data-value="Roleplay"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message.match p,body:has(button.parameter.room.select[data-value="Roleplay"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message.user p,body:has(button.parameter.room.select[data-value="Swamp"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message.match p,body:has(button.parameter.room.select[data-value="Swamp"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message.user p{max-width:65%}body:has(button.parameter.room.select[data-value="Special"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message.match,body:has(button.parameter.room.select[data-value="Roleplay"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message.match,body:has(button.parameter.room.select[data-value="Swamp"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message.match{align-items:flex-start}body:has(button.parameter.room.select[data-value="Special"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message.match p,body:has(button.parameter.room.select[data-value="Roleplay"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message.match p,body:has(button.parameter.room.select[data-value="Swamp"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message.match p{text-align:left}body:has(button.parameter.room.select[data-value="Special"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message.user,body:has(button.parameter.room.select[data-value="Roleplay"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message.user,body:has(button.parameter.room.select[data-value="Swamp"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message.user{align-items:flex-end}body:has(button.parameter.room.select[data-value="Special"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message.user p,body:has(button.parameter.room.select[data-value="Roleplay"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message.user p,body:has(button.parameter.room.select[data-value="Swamp"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message.user p{width:65%;text-align:left}body:has(button.parameter.room.select[data-value="Special"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message.user p.single-line,body:has(button.parameter.room.select[data-value="Roleplay"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message.user p.single-line,body:has(button.parameter.room.select[data-value="Swamp"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message.user p.single-line{text-align:right}body:has(button.parameter.room.select[data-value="Special"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message.user p.multi-line,body:has(button.parameter.room.select[data-value="Roleplay"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message.user p.multi-line,body:has(button.parameter.room.select[data-value="Swamp"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message.user p.multi-line{text-align:justify}body:has(button.parameter.room.select[data-value="Special"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message.user:has(.multi-line)~.message.user p.single-line,body:has(button.parameter.room.select[data-value="Roleplay"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message.user:has(.multi-line)~.message.user p.single-line,body:has(button.parameter.room.select[data-value="Swamp"]) .scrollable:not(:has(#message-container.note)) #message-container:not(.note) .group>.message.user:has(.multi-line)~.message.user p.single-line{text-align:left}body:has(button.parameter.room.select[data-value="Special"]) .scrollable:not(:has(#message-container.note)) #chat-bottom-decoration,body:has(button.parameter.room.select[data-value="Roleplay"]) .scrollable:not(:has(#message-container.note)) #chat-bottom-decoration,body:has(button.parameter.room.select[data-value="Swamp"]) .scrollable:not(:has(#message-container.note)) #chat-bottom-decoration{display:block;position:absolute;bottom:0;width:100%;text-align:center;color:var(--secondary-text);content:"~~"}.scrollable:has(#message-container.typewriter) #message-container.typewriter{position:relative;min-height:100%}.scrollable:has(#message-container.typewriter) #message-container.typewriter:before{display:block;position:absolute;bottom:2px;width:100%;text-align:center;color:var(--secondary-text);content:"~~";font-family:"Ysabeau SC", sans-serif;font-family:var(--ysabeau);font-size:22px;font-weight:400}.scrollable:has(#message-container.typewriter) #message-container.typewriter .group>.message{display:flex;flex-direction:column-reverse;margin-bottom:0.5rem}.scrollable:has(#message-container.typewriter) #message-container.typewriter .group>.message *{font-family:"Ysabeau SC", sans-serif;font-family:var(--ysabeau);font-size:22px;font-weight:400}.scrollable:has(#message-container.typewriter) #message-container.typewriter .group>.message time{align-self:center;text-align:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;margin-bottom:0.5rem;color:var(--secondary-text)}.scrollable:has(#message-container.typewriter) #message-container.typewriter .group>.message time:before{content:"~~ "}.scrollable:has(#message-container.typewriter) #message-container.typewriter .group>.message time:after{content:" ~~"}.scrollable:has(#message-container.typewriter) #message-container.typewriter .group>.message p{--right-offset: 1rem;margin-top:0;margin-bottom:0.5rem;margin-right:var(--right-offset)}.scrollable:has(#message-container.typewriter) #message-container.typewriter .group>.message:first-child p{margin-top:1rem}.scrollable:has(#message-container.typewriter) #message-container.typewriter .group>.message:last-child p{margin-bottom:1rem}.scrollable:has(#message-container.typewriter) #message-container.typewriter .group>.message.server p{text-align:center;font-weight:500}.scrollable:has(#message-container.typewriter) #message-container.typewriter .group>.message.match p,.scrollable:has(#message-container.typewriter) #message-container.typewriter .group>.message.user p{max-width:65%}.scrollable:has(#message-container.typewriter) #message-container.typewriter .group>.message.match{align-items:flex-start}.scrollable:has(#message-container.typewriter) #message-container.typewriter .group>.message.match p{text-align:left}.scrollable:has(#message-container.typewriter) #message-container.typewriter .group>.message.user{align-items:flex-end}.scrollable:has(#message-container.typewriter) #message-container.typewriter .group>.message.user p{width:65%;text-align:left}.scrollable:has(#message-container.typewriter) #message-container.typewriter .group>.message.user p.single-line{text-align:right}.scrollable:has(#message-container.typewriter) #message-container.typewriter .group>.message.user p.multi-line{text-align:justify}.scrollable:has(#message-container.typewriter) #message-container.typewriter .group>.message.user:has(.multi-line)~.message.user p.single-line{text-align:left}.scrollable:has(#message-container.typewriter) #chat-bottom-decoration{display:block;position:absolute;bottom:0;width:100%;text-align:center;color:var(--secondary-text);content:"~~"}#chat #message-container .message p{overflow-wrap:break-word;word-break:break-word}#chat #message-container:after{content:". . .";visibility:hidden;--red-line-offset: calc(3rem + 4px + 1rem);--right-offset: 1rem;font-size:1.5rem;margin-left:var(--red-line-offset);margin-right:var(--right-offset);word-break:break-word}@media (max-width: 800px){#chat #message-container:after{margin-left:var(--red-line-offset) !important;margin-right:var(--right-offset) !important}}#chat #message-container.typing:after{animation-name:expand;animation-duration:2.5s;animation-iteration-count:infinite;visibility:visible}@keyframes expand{50%{word-spacing:3px}}#chat #message-container.disconnect:after{display:block;content:'';background-image:var(--icon-disconnect);height:var(--line-height);width:32px;visibility:visible;--red-line-offset: calc(3rem + 4px + 1rem);--right-offset: 1rem;font-size:1.5rem;margin-left:var(--red-line-offset);margin-right:var(--right-offset);word-break:break-word;animation:blink 4s infinite both}@media (max-width: 800px){#chat #message-container.disconnect:after{margin-left:var(--red-line-offset) !important;margin-right:var(--right-offset) !important}}@keyframes blink{0%,50%,100%{opacity:1}25%,75%{opacity:0}}body{--icon-disconnect: url("data:image/svg+xml, %3Csvg width='32px' height='32px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 19.5001H12.01M2 8.81954C3.69692 7.30075 5.74166 6.1626 8 5.5393M5 12.8586C5.86251 12.0131 6.87754 11.3226 8 10.8322M16 5.5393C18.2583 6.1626 20.3031 7.30075 22 8.81954M16 10.8322C17.1225 11.3226 18.1375 12.0131 19 12.8586M12 4.50024V15.5001' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}body.dark{--icon-disconnect: url("data:image/svg+xml, %3Csvg width='32px' height='32px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 19.5001H12.01M2 8.81954C3.69692 7.30075 5.74166 6.1626 8 5.5393M5 12.8586C5.86251 12.0131 6.87754 11.3226 8 10.8322M16 5.5393C18.2583 6.1626 20.3031 7.30075 22 8.81954M16 10.8322C17.1225 11.3226 18.1375 12.0131 19 12.8586M12 4.50024V15.5001' stroke='rgb(234, 234, 234)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}@media (prefers-color-scheme: dark){body:not(.light){--icon-disconnect: url("data:image/svg+xml, %3Csvg width='32px' height='32px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 19.5001H12.01M2 8.81954C3.69692 7.30075 5.74166 6.1626 8 5.5393M5 12.8586C5.86251 12.0131 6.87754 11.3226 8 10.8322M16 5.5393C18.2583 6.1626 20.3031 7.30075 22 8.81954M16 10.8322C17.1225 11.3226 18.1375 12.0131 19 12.8586M12 4.50024V15.5001' stroke='rgb(234, 234, 234)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}}