body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.Popup{z-index:99999999999999999999;position:fixed;top:50%;left:50%;width:calc(100% * var(--popup-scale, 1));height:calc(var(--vh, 1vh) * 100 * var(--popup-scale, 1));background-color:#000c;border-radius:4svh;display:flex;justify-content:center;align-items:center;font-size:5svh;color:#fff;border:2px solid #fff;translate:-50% -50%;flex-direction:column;overflow:hidden;display:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0}@media screen and (orientation: portrait){.Popup{width:90%}}.PopupHeader{width:100%;height:80px;display:flex;justify-content:center;align-items:center;background-color:#3339;color:#fff}.PopupHeader p{font-size:48px;font-weight:700;padding:10px 0}.PopupContent{z-index:9999;font-size:5svh;text-align:center;width:100%;height:100%;flex-grow:1;display:flex;justify-content:center;align-items:center;flex-direction:column;overflow:hidden}.PopupShow{animation:popup-show .8s cubic-bezier(.68,-.55,.27,1.55) forwards}.PopupHide{animation:popup-hide .3s ease-in-out forwards}@keyframes popup-show{0%{height:0vh;opacity:0}to{height:calc(100vh * var(--popup-scale, 1));opacity:1}}@keyframes popup-hide{0%{height:calc(100vh * var(--popup-scale, 1));opacity:1}to{height:0vh;opacity:0}}.CloseButton{position:absolute;right:20px;border-radius:999px;height:40px;aspect-ratio:1;border:none;background-color:#000a;color:#fff;display:flex;justify-content:center;align-items:center;font-size:24px;cursor:pointer;transition:scale .2s ease}*{font-family:Rubik!important}:root{--background-panel: #1f1f23dd;--left-panel-bg: var(--background-panel);--panel-border: #2d2d32dd;--message-bg: #1f1f23c2;--background: #131317;--primary: #ffffff;--secondary: #aaaaaa}@media screen and (orientation: portrait){:root{--left-panel-bg: #00000066}}html,body,#root{height:100%;margin:0;padding:0;background-color:var(--background)}.App{text-align:center;display:flex;justify-content:center;align-items:center;padding:10px;gap:34px;transition:all .3s ease-in-out;background:linear-gradient(0deg,var(--background));background-size:cover;filter:blur(0px);overflow:hidden}p{color:var(--primary)}.LeftPanel{display:flex;justify-content:left;flex-direction:column;width:400px;height:calc(var(--vh, 1vh) * 100 - 40px);gap:10px;transition:all .5s cubic-bezier(.175,.885,.32,1.275);z-index:9999}@media screen and (orientation: portrait){.LeftPanel{position:fixed;top:0;left:0;width:calc(100vw - 40px);height:calc(var(--vh, 1vh) * 100 - 60px);translate:-110% 10px}.LeftPanel.show{translate:10px 10px;opacity:1}}.ChatsPanel{display:flex;background:var(--left-panel-bg);border:var(--panel-border) 2px solid;border-radius:2svh;flex-direction:column;gap:10px;width:100%;height:calc(100% - 120px);padding:10px;will-change:translate;overflow-x:hidden;overflow-y:auto}@media screen and (orientation: portrait){.ChatsPanel{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}}.UserPanel{display:flex;background:var(--left-panel-bg);border:var(--panel-border) 2px solid;border-radius:2svh;justify-content:center;align-items:center;width:100%;height:60px;padding:10px}@media screen and (orientation: portrait){.UserPanel{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}}.UserPanelContent{display:flex;justify-content:center;align-items:center;flex-direction:row;width:100%;height:100%;gap:10px}.RightPanel{width:100%;height:calc(var(--vh, 1vh) * 100 - 40px);display:flex;justify-content:center;align-items:center;flex-direction:column;padding:0 10px;gap:0;transition:gap .3s cubic-bezier(.175,.885,.32,2);transition:filter .3s ease-in-out}.TopPanel{margin:0;background:var(--background-panel);border:var(--panel-border) 2px solid;border-bottom:0px solid;border-radius:2svh 2svh 0 0;width:100%;height:60px;padding:10px;display:flex;justify-content:center;align-items:center;gap:20px;transition:all .2s ease-in-out}.TopPanel.shown{border:var(--panel-border) 2px solid;border-radius:2svh}.TopPanelContent{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.TopPanelThing{display:flex;justify-content:center;align-items:center;height:80%;gap:15px;background-color:#aaa1;padding:10px 20px;border-radius:2svh;transition:all .3s cubic-bezier(.175,.885,.32,1.275);translate:0 -12vh}.TopPanelThing img{height:100%;border-radius:999px}.TopPanelThing p{font-size:2svh;font-weight:700;color:var(--primary)}.ContentPanel{margin:0;overflow-x:hidden;overflow-y:auto;background:var(--background-panel);border:var(--panel-border) 2px solid;border-top:0px solid;border-radius:0 0 2svh 2svh;width:100%;height:100%;padding:10px;transition:all .2s ease-in-out}.ContentPanel.shown{border:var(--panel-border) 2px solid;border-radius:2svh}*::-webkit-scrollbar{width:4px}*::-webkit-scrollbar-track{background:transparent;margin:30px}*::-webkit-scrollbar-thumb{background-color:#aaa;border-radius:10px}*::-webkit-scrollbar-thumb:hover{background-color:#888}.InputPanel{display:flex;justify-content:center;align-items:center;flex-direction:row;background:var(--message-bg);border-radius:2svh;width:calc(100vw - 440px);height:70px;padding:10px;gap:10px;overflow:hidden;transition:all .3s cubic-bezier(.175,.885,.32,1.275),opacity .5s ease;position:absolute;bottom:25px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:var(--panel-border) 2px solid;translate:0 150%;opacity:0}.InputPanel.expanded{height:200px}.InputPanel.shown{translate:0 0;opacity:1}@media screen and (orientation: portrait){.InputPanel{width:calc(100vw - 80px)}}.MessageInput{width:100%;height:100%;background-color:transparent;border:none;outline:none;color:var(--primary);padding:0 1svh;font-size:16px;overflow:hidden;translate:0 150%;padding-top:38px;transition:all .3s cubic-bezier(.175,.885,.32,1.275)}.MessageInput.expanded{padding-top:10px}.MessageInput::placeholder{color:var(--secondary)}.InputButton{height:100%;aspect-ratio:1;background-color:transparent;border:none;color:var(--secondary);font-size:30px;translate:150% 0;transition:all .3s cubic-bezier(.175,.885,.32,1.275);overflow:hidden}.InputButton:hover{scale:1.1}.InputButton:active{scale:.9}.AttachButton{translate:-150% 0}.scrollable-y{width:100%;height:100%;overflow-y:scroll}.MenuButton{display:flex;justify-content:center;align-items:center;height:50px;background-color:#aaa1;padding:10px;border-radius:2svh;border:none;color:#fff;font-size:2svh;cursor:pointer;aspect-ratio:1;margin:0;position:absolute;left:30px;opacity:1}@media screen and (orientation: landscape){.MenuButton{display:none;opacity:0}}.UserControlButton{display:flex;justify-content:center;align-items:center;height:50px;aspect-ratio:1;background-color:transparent;border:none;color:var(--secondary);font-size:20px;cursor:pointer;transition:all .2s ease}.UserControlButton.logout{color:#b99d9d}.UserControlButton:hover{color:#fff;font-size:30px}.UserControlButton:hover.logout{color:#ff8c8c}input:not(.MessageInput){border:2px var(--primary) solid;border-radius:999px;font-size:24px;text-align:center;background-color:#3339;color:var(--primary);transition:all .5s ease,scale .2s ease;opacity:.8;min-width:200px;width:fit-content}input:not(.MessageInput):hover{opacity:1;scale:1.1}.fade{transition:opacity 1s ease;opacity:0}.ImageOverlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#000d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;z-index:9999999;display:flex;justify-content:center;align-items:center;pointer-events:none;transition:all .3s ease}.ImageOverlay.show{pointer-events:auto;opacity:1}.ImageOverlay.hide{pointer-events:none;opacity:0}.ImageOverlayContent{width:100%;height:100%;display:flex;justify-content:center;align-items:center;scale:0;transition:all .5s cubic-bezier(.175,.885,.32,1.275);opacity:1}.ImageOverlayContent.show{scale:1;pointer-events:auto}.ImageOverlayContent.hide{opacity:0;pointer-events:none}.ImageFromOverlay{height:80%;object-fit:contain;max-width:80%;border-radius:1svh;cursor:zoom-in;z-index:1000000;transform-origin:0 0}.ProfilePopup{z-index:99999;position:fixed;top:50%;left:50%;height:90%;aspect-ratio:1/2;opacity:1;background-color:#111a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:2svh;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;border:2px solid #fff;overflow:hidden;translate:-50% -50%}@media screen and (orientation: landscape){.ProfilePopup{left:0%;translate:10px -50%}}.ProfilePopupHeader{width:100%;height:60px;display:flex;justify-content:center;align-items:center;background-color:#3339}.ProfilePopupHeader p{color:#fff;font-size:1.5em;font-weight:700}.CloseButton{position:absolute;right:10px;border-radius:999px;height:40px;aspect-ratio:1;border:none;background-color:#000a;color:#fff;display:flex;justify-content:center;align-items:center;font-size:24px;cursor:pointer;transition:scale .2s ease}.CloseButton:hover{scale:1.1}.ProfilePopupContent{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px}.ProfilePopupAvatar{aspect-ratio:1;width:40%;border-radius:999px}.ProfilePopupUsername{color:#fff;font-size:28px;font-weight:700;margin-top:5px}.ProfilePopupBottom{width:100%;display:flex;justify-content:end;align-items:end;position:absolute;bottom:0;padding:10px;margin-right:10px}.MessageButton{background-color:#000a;color:#fff;font-size:24px;border:none;display:flex;justify-content:center;align-items:center;flex-direction:row;border-radius:999px;padding:0 20px;width:80px;height:80px;transition:all .3s cubic-bezier(.175,.885,.32,1.275);cursor:pointer}.MessageButton p{opacity:0;width:150px;transform:translate(-20px) scale(.95);transition:opacity .4s ease,transform .6s cubic-bezier(.68,-.6,.32,1.6)}.MessageButton .icon{margin-right:100px;transition:all .3s ease}.MessageButton:hover{width:200px}.MessageButton:hover .icon{margin-right:0}.MessageButton:hover p{transform:translate(0) scale(1);opacity:1}.Filler{width:100%;height:100%}.PulloutButton{height:80px;width:80px;background-color:#000;border-radius:999px;display:flex;justify-content:center;align-items:center;flex-direction:row-reverse;color:#fff;transition:all .3s ease;cursor:pointer}.PulloutButton p{opacity:0;position:fixed;transition:all .3s ease;text-align:center;width:fit-content;background-color:#000;height:80px;border-radius:999px;display:flex;justify-content:center;align-items:center;padding:0 20px;scale:0;font-size:16px}.PulloutButton .icon{z-index:1000}.PulloutButton:hover{border-radius:0 999px 999px 0}.PulloutButton:hover p{opacity:1;transform:translate(-50%);border-radius:999px 0 0 999px;scale:1}