/* ------------------------------ 0) Design Tokens ------------------------------ */ :root { --icon-mic-on-data: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iaWNvbiBpY29uLXRhYmxlciBpY29ucy10YWJsZXItb3V0bGluZSBpY29uLXRhYmxlci1taWNyb3Bob25lIj4KICA8cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiIC8+CiAgPHBhdGggZD0iTTkgMm0wIDNhMyAzIDAgMCAxIDMgLTNoMGEzIDMgMCAwIDEgMyAzdjVhMyAzIDAgMCAxIC0zIDNoMGEzIDMgMCAwIDEgLTMgLTN6IiAvPgogIDxwYXRoIGQ9Ik01IDEwYTcgNyAwIDAgMCAxNCAwIiAvPgogIDxwYXRoIGQ9Ik04IDIxbDggMCIgLz4KICA8cGF0aCBkPSJNMTIgMTdsMCA0IiAvPgo8L3N2Zz4="); --icon-mic-off-data: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iaWNvbiBpY29uLXRhYmxlciBpY29ucy10YWJsZXItb3V0bGluZSBpY29uLXRhYmxlci1taWNyb3Bob25lLW9mZiI+CiAgPHBhdGggc3Ryb2tlPSJub25lIiBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIiAvPgogIDxwYXRoIGQ9Ik0zIDNsMTggMTgiIC8+CiAgPHBhdGggZD0iTTkgNWEzIDMgMCAwIDEgNiAwdjVhMyAzIDAgMCAxIC0uMTMgLjg3NG0tMiAyYTMgMyAwIDAgMSAtMy44NyAtMi44NzJ2LTEiIC8+CiAgPHBhdGggZD0iTTUgMTBhNyA3IDAgMCAwIDEwLjg0NiA1Ljg1bTIgLTJhNi45NjcgNi45NjcgMCAwIDAgMS4xNTIgLTMuODUiIC8+CiAgPHBhdGggZD0iTTggMjFsOCAwIiAvPgogIDxwYXRoIGQ9Ik0xMiAxN2wwIDQiIC8+Cjwvc3ZnPg=="); --icon-vid-on-data: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iaWNvbiBpY29uLXRhYmxlciBpY29ucy10YWJsZXItb3V0bGluZSBpY29uLXRhYmxlci12aWRlbyI+CiAgPHBhdGggc3Ryb2tlPSJub25lIiBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+CiAgPHBhdGggZD0iTTE1IDEwbDQuNTUzIC0yLjI3NmExIDEgMCAwIDEgMS40NDcgLjg5NHY2Ljc2NGExIDEgMCAwIDEgLTEuNDQ3IC44OTRsLTQuNTUzIC0yLjI3NnYtNHoiLz4KICA8cGF0aCBkPSJNMyA2bTAgMmEyIDIgMCAwIDEgMiAtMmg4YTIgMiAwIDAgMSAyIDJ2OGEyIDIgMCAwIDEgLTIgMmgtOGEyIDIgMCAwIDEgLTIgLTJ6Ii8+Cjwvc3ZnPg=="); --icon-vid-off-data: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iaWNvbiBpY29uLXRhYmxlciBpY29ucy10YWJsZXItb3V0bGluZSBpY29uLXRhYmxlci12aWRlby1vZmYiPgogIDxwYXRoIHN0cm9rZT0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPgogIDxwYXRoIGQ9Ik0zIDNsMTggMTgiLz4KICA8cGF0aCBkPSJNMTUgMTF2LTFsNC41NTMgLTIuMjc2YTEgMSAwIDAgMSAxLjQ0NyAuODk0djYuNzY0YTEgMSAwIDAgMSAtLjY3NSAuOTQ2Ii8+CiAgPHBhdGggZD0iTTEwIDZoM2EyIDIgMCAwIDEgMiAydjNtMCA0djFhMiAyIDAgMCAxIC0yIDJoLThhMiAyIDAgMCAxIC0yIC0ydi04YTIgMiAwIDAgMSAyIC0yaDEiLz4KPC9zdmc+"); --icon-copy-data: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTIyLjYgMTIyLjg4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxMjIuNiAxMjIuODgiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGQ9Ik0xMTAuNiw3Mi41OGMwLTMuMTksMi41OS01Ljc4LDUuNzgtNS43OGMzLjE5LDAsNS43OCwyLjU5LDUuNzgsNS43OHYzMy4xOWMwLDQuNzEtMS45Miw4Ljk5LTUuMDIsMTIuMDkgYy0zLjEsMy4xLTcuMzgsNS4wMi0xMi4wOSw1LjAySDE3LjExYy00LjcxLDAtOC45OS0xLjkyLTEyLjA5LTUuMDJjLTMuMS0zLjEtNS4wMi03LjM4LTUuMDItMTIuMDlWMTcuMTkgQzAsMTIuNDgsMS45Miw4LjIsNS4wMiw1LjFDOC4xMiwyLDEyLjQsMC4wOCwxNy4xMSwwLjA4aDMyLjk4YzMuMTksMCw1Ljc4LDIuNTksNS43OCw1Ljc4YzAsMy4xOS0yLjU5LDUuNzgtNS43OCw1Ljc4SDE3LjExIGMtMS41MiwwLTIuOSwwLjYzLTMuOTEsMS42M2MtMS4wMSwxLjAxLTEuNjMsMi4zOS0xLjYzLDMuOTF2ODguNThjMCwxLjUyLDAuNjMsMi45LDEuNjMsMy45MWMxLjAxLDEuMDEsMi4zOSwxLjYzLDMuOTEsMS42M2g4Ny45NSBjMS41MiwwLDIuOS0wLjYzLDMuOTEtMS42M3MxLjYzLTIuMzksMS42My0zLjkxVjcyLjU4TDExMC42LDcyLjU4eiBNMTEyLjQyLDE3LjQ2TDU0LjAxLDc2LjZjLTIuMjMsMi4yNy01Ljg5LDIuMy04LjE2LDAuMDcgYy0yLjI3LTIuMjMtMi4zLTUuODktMC4wNy04LjE2bDU2LjE2LTU2Ljg3SDc4LjU2Yy0zLjE5LDAtNS43OC0yLjU5LTUuNzgtNS43OGMwLTMuMTksMi41OS01Ljc4LDUuNzgtNS43OGgyNi41IGM1LjEyLDAsMTEuNzItMC44NywxNS42NSwzLjFjMi40OCwyLjUxLDEuOTMsMjIuNTIsMS42MSwzNC4xMWMtMC4wOCwzLTAuMTUsNS4yOS0wLjE1LDYuOTNjMCwzLjE5LTIuNTksNS43OC01Ljc4LDUuNzggYy0zLjE5LDAtNS43OC0yLjU5LTUuNzgtNS43OGMwLTAuMzEsMC4wOC0zLjMyLDAuMTktNy4yNEMxMTAuOTYsMzAuOTQsMTExLjkzLDIyLjk0LDExMi40MiwxNy40NkwxMTIuNDIsMTcuNDZ6Ii8+PC9nPjwvc3ZnPg=="); --icon-hang-up-data: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPgo8c3ZnIGZpbGw9IiMwMDAwMDAiIHdpZHRoPSI4MDBweCIgaGVpZ2h0PSI4MDBweCIgdmlld0JveD0iMCAwIDI0IDI0IiBpZD0iaGFuZy11cCIgZGF0YS1uYW1lPSJMaW5lIENvbG9yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJpY29uIGxpbmUtY29sb3IiPjxwYXRoIGlkPSJwcmltYXJ5IiBkPSJNNS42OCwxNWMtLjU0LS41My0xLjQtMS4zOS0yLjA5LTIuMDlhMS40OCwxLjQ4LDAsMCwxLC4xNi0yLjI4LDEzLjYxLDEzLjYxLDAsMCwxLDE2LjYzLDAsMS40OCwxLjQ4LDAsMCwxLC4xNiwyLjI4TDE4LjQ1LDE1YS43NS43NSwwLDAsMS0xLC4wNiw4LjI0LDguMjQsMCwwLDAtMi41NS0xLjQ5Ljc0Ljc0LDAsMCwxLS40NS0uOWwuMi0uNzJBLjc4Ljc4LDAsMCwwLDE0LDExYTEwLjQ0LDEwLjQ0LDAsMCwwLTMuOTQsMCwuNzcuNzcsMCwwLDAtLjYuOTVsLjIuNzJhLjc0Ljc0LDAsMCwxLS40Ni45LDguMzYsOC4zNiwwLDAsMC0yLjU1LDEuNDlBLjc0Ljc0LDAsMCwxLDUuNjgsMTVaIiBzdHlsZT0iZmlsbDogbm9uZTsgc3Ryb2tlOiByZ2IoMCwgMCwgMCk7IHN0cm9rZS1saW5lY2FwOiByb3VuZDsgc3Ryb2tlLWxpbmVqb2luOiByb3VuZDsgc3Ryb2tlLXdpZHRoOiAyOyI+PC9wYXRoPjwvc3ZnPg=="); --icon-volume-on-data: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iaWNvbiBpY29uLXRhYmxlciBpY29ucy10YWJsZXItb3V0bGluZSBpY29uLXRhYmxlci12b2x1bWUiPgogIDxwYXRoIHN0cm9rZT0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIgLz4KICA8cGF0aCBkPSJNMTUgOGE1IDUgMCAwIDEgMCA4IiAvPgogIDxwYXRoIGQ9Ik0xNy43IDVhOSA5IDAgMCAxIDAgMTQiIC8+CiAgPHBhdGggZD0iTTYgMTVoLTJhMSAxIDAgMCAxIC0xIC0xdi00YTEgMSAwIDAgMSAxIC0xaDJsMy41IC00LjVhLjggLjggMCAwIDEgMS41IC41djE0YS44IC44IDAgMCAxIC0xLjUgLjVsLTMuNSAtNC41IiAvPgo8L3N2Zz4="); --icon-volume-off-data: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iaWNvbiBpY29uLXRhYmxlciBpY29ucy10YWJsZXItb3V0bGluZSBpY29uLXRhYmxlci12b2x1bWUtb2ZmIj4KICA8cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiIC8+CiAgPHBhdGggZD0iTTE1IDhhNSA1IDAgMCAxIDEuOTEyIDQuOTM0bS0xLjM3NyAyLjYwMmE1IDUgMCAwIDEgLS41MzUgLjQ2NCIgLz4KICA8cGF0aCBkPSJNMTcuNyA1YTkgOSAwIDAgMSAyLjM2MiAxMS4wODZtLTEuNjc2IDIuMjk5YTkgOSAwIDAgMSAtLjY4NiAuNjE1IiAvPgogIDxwYXRoIGQ9Ik05LjA2OSA1LjA1NGwuNDMxIC0uNTU0YS44IC44IDAgMCAxIDEuNSAuNXYybTAgNHY4YS44IC44IDAgMCAxIC0xLjUgLjVsLTMuNSAtNC41aC0yYTEgMSAwIDAgMSAtMSAtMXYtNGExIDEgMCAwIDEgMSAtMWgybDEuMjk0IC0xLjY2NCIgLz4KICA8cGF0aCBkPSJNMyAzbDE4IDE4IiAvPgo8L3N2Zz4="); --icon-fullscreen-data: url("data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgd2lkdGg9IjI0IiAgaGVpZ2h0PSIyNCIgIHZpZXdCb3g9IjAgMCAyNCAyNCIgIGZpbGw9Im5vbmUiICBzdHJva2U9IiNGRkZGRkYiICBzdHJva2Utd2lkdGg9IjIiICBzdHJva2UtbGluZWNhcD0icm91bmQiICBzdHJva2UtbGluZWpvaW49InJvdW5kIiAgY2xhc3M9Imljb24gaWNvbi10YWJsZXIgaWNvbnMtdGFibGVyLW91dGxpbmUgaWNvbi10YWJsZXItbWF4aW1pemUiPjxwYXRoIHN0cm9rZT0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik00IDh2LTJhMiAyIDAgMCAxIDIgLTJoMiIgLz48cGF0aCBkPSJNNCAxNnYyYTIgMiAwIDAgMCAyIDJoMiIgLz48cGF0aCBkPSJNMTYgNGgyYTIgMiAwIDAgMSAyIDJ2MiIgLz48cGF0aCBkPSJNMTYgMjBoMmEyIDIgMCAwIDAgMiAtMnYtMiIgLz48L3N2Zz4="); --icon-emoji-data: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPg0KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGQ9Ik04LjUgMTFDOS4zMjg0MyAxMSAxMCAxMC4zMjg0IDEwIDkuNUMxMCA4LjY3MTU3IDkuMzI4NDMgOCA4LjUgOEM3LjY3MTU3IDggNyA4LjY3MTU3IDcgOS41QzcgMTAuMzI4NCA3LjY3MTU3IDExIDguNSAxMVoiIGZpbGw9IiMwRjBGMEYiLz4NCjxwYXRoIGQ9Ik0xNyA5LjVDMTcgMTAuMzI4NCAxNi4zMjg0IDExIDE1LjUgMTFDMTQuNjcxNiAxMSAxNCAxMC4zMjg0IDE0IDkuNUMxNCA4LjY3MTU3IDE0LjY3MTYgOCAxNS41IDhDMTYuMzI4NCA4IDE3IDguNjcxNTcgMTcgOS41WiIgZmlsbD0iIzBGMEYwRiIvPg0KPHBhdGggZD0iTTguODg4NzUgMTMuNTQxNEM4LjYzODIyIDEzLjA1NTkgOC4wNDMxIDEyLjg2MDcgNy41NTMwMSAxMy4xMDU4QzcuMDU5MDMgMTMuMzUyOCA2Ljg1ODggMTMuOTUzNSA3LjEwNTc5IDE0LjQ0NzRDNy4xODgyNSAxNC42MTE4IDcuMjkzMjYgMTQuNzY1OSA3LjQwMzM0IDE0LjkxMjdDNy41ODYxNSAxNS4xNTY1IDcuODYyMSAxNS40NzA0IDguMjUwNTIgMTUuNzgxMUM5LjA0MDA1IDE2LjQxMjcgMTAuMjU3MyAxNy4wMDAyIDEyLjAwMDIgMTcuMDAwMkMxMy43NDMxIDE3LjAwMDIgMTQuOTYwNCAxNi40MTI3IDE1Ljc0OTkgMTUuNzgxMUMxNi4xMzgzIDE1LjQ3MDQgMTYuNDE0MyAxNS4xNTY1IDE2LjU5NzEgMTQuOTEyN0MxNi43MDc2IDE0Ljc2NTQgMTYuODA4MSAxNC42MTEzIDE2Ljg5NDEgMTQuNDQ4NUMxNy4xMzg3IDEzLjk2MSAxNi45MzUyIDEzLjM0OTcgMTYuNDQ3NCAxMy4xMDU4QzE1Ljk1NzMgMTIuODYwNyAxNS4zNjIyIDEzLjA1NTkgMTUuMTExNyAxMy41NDE0QzE1LjA5NzkgMTMuNTY2MyAxNC45MDk3IDEzLjg5MiAxNC41MDA1IDE0LjIxOTRDMTQuMDQwMSAxNC41ODc3IDEzLjI1NzMgMTUuMDAwMiAxMi4wMDAyIDE1LjAwMDJDMTAuNzQzMSAxNS4wMDAyIDkuOTYwMzggMTQuNTg3NyA5LjQ5OTkxIDE0LjIxOTRDOS4wOTA3MSAxMy44OTIgOC45MDI1NSAxMy41NjYzIDguODg4NzUgMTMuNTQxNFoiIGZpbGw9IiMwRjBGMEYiLz4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTIgMjNDMTguMDc1MSAyMyAyMyAxOC4wNzUxIDIzIDEyQzIzIDUuOTI0ODcgMTguMDc1MSAxIDEyIDFDNS45MjQ4NyAxIDEgNS45MjQ4NyAxIDEyQzEgMTguMDc1MSA1LjkyNDg3IDIzIDEyIDIzWk0xMiAyMC45OTMyQzcuMDMzMjEgMjAuOTkzMiAzLjAwNjgzIDE2Ljk2NjggMy4wMDY4MyAxMkMzLjAwNjgzIDcuMDMzMjEgNy4wMzMyMSAzLjAwNjgzIDEyIDMuMDA2ODNDMTYuOTY2OCAzLjAwNjgzIDIwLjk5MzIgNy4wMzMyMSAyMC45OTMyIDEyQzIwLjk5MzIgMTYuOTY2OCAxNi45NjY4IDIwLjk5MzIgMTIgMjAuOTkzMloiIGZpbGw9IiMwRjBGMEYiLz4NCjwvc3ZnPg=="); --icon-hand-on-data: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iaWNvbiBpY29uLXRhYmxlciBpY29ucy10YWJsZXItb3V0bGluZSBpY29uLXRhYmxlci1oYW5kLXN0b3AiPgogIDxwYXRoIHN0cm9rZT0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIgLz4KICA8cGF0aCBkPSJNOCAxM3YtNy41YTEuNSAxLjUgMCAwIDEgMyAwdjYuNSIgLz4KICA8cGF0aCBkPSJNMTEgNS41di0yYTEuNSAxLjUgMCAxIDEgMyAwdjguNSIgLz4KICA8cGF0aCBkPSJNMTQgNS41YTEuNSAxLjUgMCAwIDEgMyAwdjYuNSIgLz4KICA8cGF0aCBkPSJNMTcgNy41YTEuNSAxLjUgMCAwIDEgMyAwdjguNWE2IDYgMCAwIDEgLTYgNmgtMmguMjA4YTYgNiAwIDAgMSAtNS4wMTIgLTIuN2E2OS43NCA2OS43NCAwIDAgMSAtLjE5NiAtLjNjLS4zMTIgLS40NzkgLTEuNDA3IC0yLjM4OCAtMy4yODYgLTUuNzI4YTEuNSAxLjUgMCAwIDEgLjUzNiAtMi4wMjJhMS44NjcgMS44NjcgMCAwIDEgMi4yOCAuMjhsMS40NyAxLjQ3IiAvPgo8L3N2Zz4="); --icon-screen-share-on-data: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMHB4IiBoZWlnaHQ9IjIwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9Imljb24gaWNvbi10YWJsZXIgaWNvbnMtdGFibGVyLW91dGxpbmUgaWNvbi10YWJsZXItc2NyZWVuLXNoYXJlIj4KICA8cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiIC8+CiAgPHBhdGggZD0iTTIxIDEydjNhMSAxIDAgMCAxIC0xIDFoLTE2YTEgMSAwIDAgMSAtMSAtMXYtMTBhMSAxIDAgMCAxIDEgLTFoOSIgLz4KICA8cGF0aCBkPSJNNyAyMGwxMCAwIiAvPgogIDxwYXRoIGQ9Ik05IDE2bDAgNCIgLz4KICA8cGF0aCBkPSJNMTUgMTZsMCA0IiAvPgogIDxwYXRoIGQ9Ik0xNyA0aDR2NCIgLz4KICA8cGF0aCBkPSJNMTYgOWw1IC01IiAvPgo8L3N2Zz4="); --icon-users-users-data: url("data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgd2lkdGg9IjI0IiAgaGVpZ2h0PSIyNCIgIHZpZXdCb3g9IjAgMCAyNCAyNCIgIGZpbGw9Im5vbmUiICBzdHJva2U9IiNGRkZGRkYiICBzdHJva2Utd2lkdGg9IjIiICBzdHJva2UtbGluZWNhcD0icm91bmQiICBzdHJva2UtbGluZWpvaW49InJvdW5kIiAgY2xhc3M9Imljb24gaWNvbi10YWJsZXIgaWNvbnMtdGFibGVyLW91dGxpbmUgaWNvbi10YWJsZXItdXNlcnMiPjxwYXRoIHN0cm9rZT0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik05IDdtLTQgMGE0IDQgMCAxIDAgOCAwYTQgNCAwIDEgMCAtOCAwIiAvPjxwYXRoIGQ9Ik0zIDIxdi0yYTQgNCAwIDAgMSA0IC00aDRhNCA0IDAgMCAxIDQgNHYyIiAvPjxwYXRoIGQ9Ik0xNiAzLjEzYTQgNCAwIDAgMSAwIDcuNzUiIC8+PHBhdGggZD0iTTIxIDIxdi0yYTQgNCAwIDAgMCAtMyAtMy44NSIgLz48L3N2Zz4="); --icon-chat-data: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIgogICAgIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjVweCIgaGVpZ2h0PSIyNXB4IiB2aWV3Qm94PSIwIDAgMTExLjY4NiAxMjIuODc5IgogICAgIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDExMS42ODYgMTIyLjg3OSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CiAgPGc+CiAgICA8cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNODMuODk2LDUuMDhIMjcuNzg5Yy0xMi40OTEsMC0yMi43MDksMTAuMjE5LTIyLjcwOSwyMi43MXY0MC4wNzljMCwxMi40ODksMTAuMjIsMjIuNzEsMjIuNzA5LDIyLjcxaDE3LjY0MwogICAgICBjLTIuNTI0LDkuOTg2LTUuNTgxLDE4Ljk1OS0xNC45MiwyNy4yNDFjMTcuODU3LTQuNTY3LDMxLjY0Mi0xMy44LDQxLjc1OS0yNy4yNDFoMy4wNTFjMTIuNDg4LDAsMzEuMjg1LTEwLjIxOSwzMS4yODUtMjIuNzFWMjcuNzkKICAgICAgQzEwNi42MDUsMTUuMjk5LDk2LjM4Nyw1LjA4LDgzLjg5Niw1LjA4TDgzLjg5Niw1LjA4eiBNODEuMTI5LDQxLjA2OWMtNC41NTEsMC04LjI0LDMuNjkxLTguMjQsOC4yNDJzMy42ODksOC4yNDIsOC4yNCw4LjI0MgogICAgICBjNC41NTMsMCw4LjI0Mi0zLjY5MSw4LjI0Mi04LjI0MlM4NS42ODIsNDEuMDY5LDgxLjEyOSw0MS4wNjlMODEuMTI5LDQxLjA2OXogTTMwLjU1Niw0MS4wNjljLTQuNTUyLDAtOC4yNDIsMy42OTEtOC4yNDIsOC4yNDIKICAgICAgczMuNjksOC4yNDIsOC4yNDIsOC4yNDJjNC41NTEsMCw4LjI0Mi0zLjY5MSw4LjI0Mi04LjI0MlMzNS4xMDcsNDEuMDY5LDMwLjU1Niw0MS4wNjlMMzAuNTU2LDQxLjA2OXogTTU1Ljg0Myw0MS4wNjkKICAgICAgYy00LjU1MSwwLTguMjQyLDMuNjkxLTguMjQyLDguMjQyczMuNjkxLDguMjQyLDguMjQyLDguMjQyYzQuNTUyLDAsOC4yNDEtMy42OTEsOC4yNDEtOC4yNDJTNjAuMzk1LDQxLjA2OSw1NS44NDMsNDEuMDY5CiAgICAgIEw1NS44NDMsNDEuMDY5eiBNMjcuNzg5LDBoNTYuMTA4aDAuMDA2djAuMDJjNy42NTgsMC4wMDIsMTQuNjA0LDMuMTE5LDE5LjYyMyw4LjEzOWwtMC4wMSwwLjAxCiAgICAgIGM1LjAyNyw1LjAzMyw4LjE0OCwxMS45NzcsOC4xNSwxOS42MThoMC4wMnYwLjAwM2gtMC4wMnY0MC4wNzloMC4wMnYwLjAwNGgtMC4wMmMtMC4wMDQsOC4xNy01LjY4LDE1LjI4OS0xMy4yNCwyMC4yNjEKICAgICAgYy03LjA0MSw0LjYyOS0xNS45MzIsNy41MDQtMjMuMTA0LDcuNTA1djAuMDIxSDc1LjMydi0wLjAyMWgtMC41NzZjLTUuMDY0LDYuMzA5LTEwLjk0MSwxMS42OTQtMTcuNjc0LDE2LjExNQogICAgICBjLTcuNDQzLDQuODg4LTE1Ljg2NCw4LjU3MS0yNS4zMSwxMC45ODdsLTAuMDA0LTAuMDE2Yy0xLjc3OCwwLjQ1LTMuNzM3LTAuMDg1LTUuMDM2LTEuNTUyYy0xLjg1Mi0yLjA5My0xLjY1Ni01LjI5MiwwLjQzNy03LjE0NAogICAgICBjNC4xMTgtMy42NTEsNi44NDktNy40NTEsOC44MjYtMTEuNDM0YzEuMTAxLTIuMjE5LDEuOTg2LTQuNTM0LDIuNzU1LTYuOTM4aC0xMC45NWgtMC4wMDd2LTAuMDIxCiAgICAgIGMtNy42NTYtMC4wMDItMTQuNjAyLTMuMTE5LTE5LjYyMi04LjEzOUMzLjEzOCw4Mi40NzgsMC4wMjEsNzUuNTMsMC4wMiw2Ny44NzFIMHYtMC4wMDNoMC4wMlYyNy43OUgwdi0wLjAwN2gwLjAyCiAgICAgIEMwLjAyMSwyMC4yODIsMy4wMjMsMTMuNDYsNy44NzgsOC40NjRDNy45NjcsOC4zNiw4LjA1OSw4LjI1OCw4LjE1Nyw4LjE2YzUuMDIxLTUuMDIxLDExLjk2OC04LjE0LDE5LjYyOC04LjE0MVYwSDI3Ljc4OUwyNy43ODksMAogICAgICB6Ii8+CiAgPC9nPgo8L3N2Zz4="); --icon-settings-data: url("data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgd2lkdGg9IjI0IiAgaGVpZ2h0PSIyNCIgIHZpZXdCb3g9IjAgMCAyNCAyNCIgIGZpbGw9Im5vbmUiICBzdHJva2U9IiNGRkZGRkYiICBzdHJva2Utd2lkdGg9IjIiICBzdHJva2UtbGluZWNhcD0icm91bmQiICBzdHJva2UtbGluZWpvaW49InJvdW5kIiAgY2xhc3M9Imljb24gaWNvbi10YWJsZXIgaWNvbnMtdGFibGVyLW91dGxpbmUgaWNvbi10YWJsZXItc2V0dGluZ3MiPjxwYXRoIHN0cm9rZT0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik0xMC4zMjUgNC4zMTdjLjQyNiAtMS43NTYgMi45MjQgLTEuNzU2IDMuMzUgMGExLjcyNCAxLjcyNCAwIDAgMCAyLjU3MyAxLjA2NmMxLjU0MyAtLjk0IDMuMzEgLjgyNiAyLjM3IDIuMzdhMS43MjQgMS43MjQgMCAwIDAgMS4wNjUgMi41NzJjMS43NTYgLjQyNiAxLjc1NiAyLjkyNCAwIDMuMzVhMS43MjQgMS43MjQgMCAwIDAgLTEuMDY2IDIuNTczYy45NCAxLjU0MyAtLjgyNiAzLjMxIC0yLjM3IDIuMzdhMS43MjQgMS43MjQgMCAwIDAgLTIuNTcyIDEuMDY1Yy0uNDI2IDEuNzU2IC0yLjkyNCAxLjc1NiAtMy4zNSAwYTEuNzI0IDEuNzI0IDAgMCAwIC0yLjU3MyAtMS4wNjZjLTEuNTQzIC45NCAtMy4zMSAtLjgyNiAtMi4zNyAtMi4zN2ExLjcyNCAxLjcyNCAwIDAgMCAtMS4wNjUgLTIuNTcyYy0xLjc1NiAtLjQyNiAtMS43NTYgLTIuOTI0IDAgLTMuMzVhMS43MjQgMS43MjQgMCAwIDAgMS4wNjYgLTIuNTczYy0uOTQgLTEuNTQzIC44MjYgLTMuMzEgMi4zNyAtMi4zN2MxIC42MDggMi4yOTYgLjA3IDIuNTcyIC0xLjA2NXoiIC8+PHBhdGggZD0iTTkgMTJhMyAzIDAgMSAwIDYgMGEzIDMgMCAwIDAgLTYgMCIgLz48L3N2Zz4="); --icon-logo-svg-data: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTY0IiBoZWlnaHQ9IjIwMiIgdmlld0JveD0iMCAwIDk2NCAyMDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNjUuNDkxNSAxNDEuMjY0QzU1LjUxNTQgMTI5LjM1OCAzOS4xNTc5IDEyNC45NjUgMjQuNTYzNyAxMzAuMjc0QzkuOTY1MTQgMTM1LjU4MyAwLjI1Mzc0NyAxNDkuNDU5IDAuMjYwMjU3IDE2NC45OTRDMC4yNjQ1OTcgMTgwLjUyMyA5Ljk5MzM2IDE5NC4zOTMgMjQuNTkzIDE5OS42ODlDMzkuMTkzNyAyMDQuOTg2IDU1LjUyNjIgMjAwLjYwNSA2NS40OTE1IDE4OC42OTJDODIuNTE1MiAxNjguMzM3IDExMS4wMTcgMTYxLjc2NCAxMzUuMjU2IDE3Mi41NjVDMTM0LjQ4NyAxNjcuNTM2IDEzNC40ODcgMTYyLjQxNSAxMzUuMjU2IDE1Ny4zODVDMTExLjAyNiAxNjguMjA2IDgyLjUyOTMgMTYxLjYwMyA2NS40OTE1IDE0MS4yNjRaTTkwNy4zNTYgMTAyLjY1M0w5NjAuNzQ4IDM3Ljc1OEM5NjUuMzU4IDMyLjE1MDMgOTY0LjU1IDIzLjg3MTIgOTU4Ljk0OCAxOS4yNTc1Qzk1My4zNDMgMTQuNjQ5MiA5NDUuMDY0IDE1LjQ1MzIgOTQwLjQ1MSAyMS4wNTc2TDg5MC4zMzkgODEuOTcwM0w4NDAuMjI2IDIxLjA1NzZDODM1LjYxNiAxNS40NTMyIDgyNy4zMzIgMTQuNjQ5MiA4MjEuNzI5IDE5LjI1NzVDODE2LjEyMyAyMy44NzEyIDgxNS4zMTcgMzIuMTUwMyA4MTkuOTI5IDM3Ljc1OEw4NzMuMzIgMTAyLjY1M0w4MTkuOTI5IDE2Ny41NUM4MTUuMzE4IDE3My4xNTMgODE2LjEyMyAxODEuNDM1IDgyMS43MjkgMTg2LjA0NEM4MjQuMTc1IDE4OC4wNTcgODI3LjEzMSAxODkuMDQxIDgzMC4wNjkgMTg5LjA0MUM4MzMuODY0IDE4OS4wNDEgODM3LjYyOCAxODcuNDA2IDg0MC4yMjYgMTg0LjI0OEw4OTAuMzM5IDEyMy4zMzhMOTQwLjQ1MiAxODQuMjQ4Qzk0My4wNDkgMTg3LjQwNiA5NDYuODExIDE4OS4wNDEgOTUwLjYwNSAxODkuMDQxQzk1My41NDYgMTg5LjA0MSA5NTYuNTAyIDE4OC4wNTcgOTU4Ljk0OCAxODYuMDQ0Qzk2NC41NTEgMTgxLjQzNSA5NjUuMzU3IDE3My4xNTMgOTYwLjc0NyAxNjcuNTVMOTA3LjM1NiAxMDIuNjUzWk00NTQuMzQyIDE0NS41MDlDNDQzLjUwOSAxMzQuNjg2IDQzNy40MTMgMTE5LjkyNiA0MzcuNDA2IDEwNC42MTVWMjIuMjQyNkg0MjUuMTFINDEyLjgxNlYxMDQuNjE1QzQxMi44MzEgMTI2LjQ3NiA0MjEuNTI4IDE0Ny40MzUgNDM2Ljk5MSAxNjIuODgyQzQ1Mi40NiAxNzguMzMgNDgwLjgzMiAxODYuOTk4IDUwMi42OTEgMTg2Ljk4NEw1MDYuODk0IDE4Ni45ODdWMTc0LjY4OFYxNjIuMzkzSDUwMi42OTFDNDg3LjM3NyAxNjIuNDA1IDQ2NS4xNzkgMTU2LjMyOSA0NTQuMzQyIDE0NS41MDlaTTcyMS43MjYgNDguMzMyQzc0My4zMTMgNDMuMTUwOCA3NjYuMTUzIDUxLjA1OTkgNzgwLjE2MSA2OC4yODMzTDc4OS4wODMgNTkuMzYxOEw3OTcuNjE2IDUwLjgyNDRDNzc1LjEzNSAyNC43ODE2IDczOC44MjggMTUuNDU5OCA3MDYuNTggMjcuNDYwN0M2NzQuMzM4IDM5LjQ1ODMgNjUyLjk1MiA3MC4yNDcyIDY1Mi45NjcgMTA0LjY1NkM2NTIuOTg3IDEzOS4wNTkgNjc0LjM5NyAxNjkuODMgNzA2LjY1NCAxODEuNzk4QzczOC45MTIgMTkzLjc2NiA3NzUuMTYxIDE4NC40NzEgNzk3LjYxNiAxNTguNEw3ODkuMDgzIDE0OS44N0w3ODAuMTYxIDE0MC45NDhDNzY2LjI1MiAxNTguMjQ3IDc0My42NDggMTY2LjAzMiA3MjIuMDM3IDE2MC45NzNDNzAwLjQyMyAxNTUuOTA3IDY4My41NjMgMTM4LjU4NyA2NzguNzc3IDExNi45MUg3ODAuMjRWMTA0LjYxNVY5Mi4zMjA5SDY3OC43NzdDNjgzLjQ0IDcwLjYxODQgNzAwLjE0MiA1My41MTIxIDcyMS43MjYgNDguMzMyWk01MDYuODc4IDQ2LjgzNTdINTUyLjQwMkM1NTQuMTk3IDQ2LjgzMTQgNTU1LjkyMyA0Ny41NDc1IDU1Ny4xOTMgNDguODE1OUM1NTguNDYyIDUwLjA4NDQgNTU5LjE4IDUxLjgxNCA1NTkuMTgyIDUzLjYxNDFWMTg2Ljk4NEg1NzEuNDc5SDU4My43N1Y1My42MTQxQzU4My43NyA1MS44MTQgNTg0LjQ4MiA1MC4wOTUzIDU4NS43NTIgNDguODIyNUM1ODcuMDIyIDQ3LjU1MTkgNTg4Ljc1NCA0Ni44MzU3IDU5MC41NTMgNDYuODM1N0g2MzYuMDc2VjIyLjI0MjZINTA2Ljg3OFY0Ni44MzU3Wk0zMDcuNTU5IDQ4LjMzMkMzMjkuMTQ0IDQzLjE1MDggMzUxLjk4OSA1MS4wNTk5IDM2NS45OTQgNjguMjgzM0wzNzQuOTE1IDU5LjM2MThMMzgzLjQ1MSA1MC44MjQ0QzM2MC45NzEgMjQuNzgxNiAzMjQuNjYyIDE1LjQ1OTggMjkyLjQxNSAyNy40NjA3QzI2MC4xNjkgMzkuNDU4MyAyMzguNzg1IDcwLjI0NzIgMjM4LjgwMSAxMDQuNjU2QzIzOC44MTggMTM5LjA1OSAyNjAuMjMzIDE2OS44MyAyOTIuNDg3IDE4MS43OThDMzI0Ljc0NyAxOTMuNzY2IDM2MC45OTQgMTg0LjQ3MSAzODMuNDUxIDE1OC40TDM3NC45MTUgMTQ5Ljg3TDM2NS45OTQgMTQwLjk0OEMzNTIuMDg1IDE1OC4yNDcgMzI5LjQ4MyAxNjYuMDMyIDMwNy44NyAxNjAuOTczQzI4Ni4yNTcgMTU1LjkwNyAyNjkuMzk0IDEzOC41ODcgMjY0LjYxMiAxMTYuOTFIMzY0LjE5NlYxMDQuNjE1VjkyLjMyMDlIMjY0LjYxMkMyNjkuMjc0IDcwLjYxODQgMjg1Ljk3NSA1My41MTIxIDMwNy41NTkgNDguMzMyWk0xMTcuNDIyIDczLjM4NjRDMTMyLjcyIDcwLjcwMyAxNDQuNzAyIDU4LjczMTMgMTQ3LjQgNDMuNDMxOEMxNTAuMDk4IDI4LjEzOTkgMTQyLjk0IDEyLjc5MTYgMTI5LjQ4NSA1LjAzMjIyQzExNi4wMzMgLTIuNzMxNDcgOTkuMTYzNSAtMS4yNDE3MiA4Ny4yNzU1IDguNzU1MDZDNzUuMzg4NSAxOC43NDk3IDcxLjAxMTMgMzUuMDgzMyA3Ni4zNDc3IDQ5LjY3MUM4NS40NjQ1IDc0LjU5MTggNzYuOTAzMyAxMDIuNTYxIDU1LjQzMDggMTE4LjE1MkM2MC4xNzA0IDEyMC4wMDMgNjQuNjAyOSAxMjIuNTYgNjguNTc3NSAxMjUuNzQyQzcxLjMyMjcgOTkuMzQ4OSA5MS4yODgxIDc3Ljk3MyAxMTcuNDIyIDczLjM4NjRaTTE5MS4zMTQgMTI4LjU4NUMxNjUuMTc0IDEyNC4wMTkgMTQ1LjIzNCAxMDIuNjIxIDE0Mi40NjggNzYuMjI3MUMxMzguNDk1IDc5LjQwOTYgMTM0LjA2MSA4MS45NzA0IDEyOS4zMjMgODMuODE3MkMxNTAuODA2IDk5LjM5MDEgMTU5LjMzNiAxMjcuMzcgMTUwLjI0IDE1Mi4yOTlDMTQ0LjkxOCAxNjYuODg5IDE0OS4yOTQgMTgzLjI1MSAxNjEuMTg4IDE5My4yMzhDMTczLjA4NyAyMDMuMjIyIDE4OS45NTYgMjA0LjY5NyAyMDMuNDA1IDE5Ni45MjNDMjE2Ljg1IDE4OS4xNTMgMjI0LjAwMSAxNzMuNzk4IDIyMS4yODUgMTU4LjUwNEMyMTguNTcyIDE0My4yMTUgMjA2LjYxNCAxMzEuMjU4IDE5MS4zMTQgMTI4LjU4NVoiIGZpbGw9IiNGRUZFRkUiLz4KPC9zdmc+Cg=="); --bg: #141417; --bg-button: #4f4f51; --panel: #23232a; --panel-2: #1a1a20; --text: #ffffff; --muted: #b5b7c0; --border: #4f4f51; --wall: color-mix(in srgb, #fff 10%, var(--bg)); --accent: rgba(255, 255, 255, 0.1); --accent-hover: rgba(255, 255, 255, 0.2); --danger: rgba(255, 4, 4, .2); --success: #45a049; --chat-panel: #4f4f51; --setting-shadow: rgba(0, 0, 0, .702); --notification: #222228; --input-border: rgba(255, 255, 255, .08); --input-bg: rgb(33, 37, 44); --hover-brightness: 1.1; --overlay: rgba(0, 0, 0, 0.6); --overlay-strong: rgba(0, 0, 0, 0.85); --top-fg: rgb(209 213 219); --ease: cubic-bezier(.2, .7, .3, 1); --shadow-1: 0 5px 12px 2px rgba(17, 17, 17, 0.5); --shadow-2: 0 6px 20px rgba(0, 0, 0, .35); --sidebar-w: 360px; --toolbar-h: 78px; --gap: 10px; --draw-toolbar-h: 56px; --r-4: 4px; --r-6: 6px; --r-8: 8px; --radius-md: 10px; --r-12: 12px; --s-2: 2px; --s-4: 4px; --s-6: 6px; --s-8: 8px; --s-10: 10px; --s-12: 12px; --s-14: 14px; --s-16: 16px; --s-18: 18px; --s-20: 20px; --cb-font: 14px; --cb-h: 44px; --cb-pad: 0 14px; --cb-icon: 18px; --cb-gap: 6px; --cb-radius: 12px; --cb-font-s: 14px; --cb-h-s: 36px; --cb-pad-s: 0 10px; --cb-icon-s: 20px; --cb-gap-s: 6px; --cb-radius-s: 10px; --cb-font-m: 14px; --cb-h-m: 40px; --cb-pad-m: 0 12px; --cb-icon-m: 22px; --cb-gap-m: 8px; --cb-radius-m: 10px; --cb-font-l: 15px; --cb-h-l: 44px; --cb-pad-l: 0 14px; --cb-icon-l: 24px; --cb-gap-l: 10px; --cb-radius-l: 12px; --cb-font-xl: 16px; --cb-h-xl: 48px; --cb-pad-xl: 0 16px; --cb-icon-xl: 26px; --cb-gap-xl: 12px; --cb-radius-xl: 12px; --cb-font-xxl: 16px; --cb-h-xxl: 56px; --cb-pad-xxl: 0 18px; --cb-icon-xxl: 28px; --cb-gap-xxl: 12px; --cb-radius-xxl: 14px; --z-wall: 0; --z-floating: 1; --z-popover: 2; --z-toolbar: 1000; --z-modal: 1001; --z-toast: 1100; --z-emoji: 1101; --vol-width: 180px; --vol-height: 34px; --vol-track-h: 8px; --vol-thumb: 16px; --vol-focus: #5899ff; --menu-icon: 18px; --menu-gap: 15px; --video-fit: cover; } :root[data-theme="light"] { --bg: #f4f7fb; --bg-button: #c5c3c3; --panel: #ffffff; --panel-2: #ffffff; --chat-panel: #ffffff; --text: #0f1b2b; --muted: #516079; --border: #d8e0ea; --wall: #d8e0ea; --accent: rgba(0, 0, 0, 0.06); --accent-hover: rgba(0, 0, 0, 0.1); --danger: #d93025; --success: #1e8e3e; --notification: #ffffff; --input-border: #d8e0ea; --input-bg: #f1f5f9; --overlay: rgba(15, 27, 43, 0.08); --overlay-strong: rgba(15, 27, 43, 0.12); --top-fg: #475569; } #root-layout { container: layout / inline-size; } #root-layout>.container_main, #root-layout>.sidebar_main { min-width: 0; } .root.rowLayout_main { display: flex; flex-direction: row; height: 100%; width: 100%; contain: layout paint; } /* ------------------------------ 1) Base / Reset ------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html, body, #root { height: 100%; } body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji"; color: var(--text); background-color: var(--bg); overflow-x: hidden; overflow-y: auto; } .hidden { display: none !important; } .visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; border: 0; padding: 0; margin: -1px; } .icon { display: inline-block; width: 24px; height: 24px; vertical-align: middle; color: var(--text); background-color: currentColor; -webkit-mask: var(--icon) no-repeat center / contain; mask: var(--icon) no-repeat center / contain; transition: color .2s var(--ease), opacity .2s var(--ease); } .icon { display: inline-block; width: 24px; height: 24px; vertical-align: middle; color: var(--text); background-color: currentColor; -webkit-mask: var(--icon) no-repeat center / contain; mask: var(--icon) no-repeat center / contain; transition: color .2s var(--ease), opacity .2s var(--ease); } button:hover .icon { color: var(--top-fg); } .icon-users-list { --icon: var(--icon-users-users-data, url("/images/users-users.svg")); } .icon-board { --icon: url("/images/board.svg"); } .icon-task-list { --icon: url("/images/task-list.svg"); } .icon-record { --icon: url("/images/record-btn.svg"); } .icon-chat { --icon: var(--icon-chat-data, url("/images/chat.svg")); } .icon-exit { --icon: var(--icon-hang-up-data, url("/images/hang-up.svg")); } .icon-fullscreen { --icon: var(--icon-fullscreen-data, url("/images/window-maxsize.svg")); } .icon-volume-on { --icon: var(--icon-volume-on-data, url("/images/volume-on.svg")); } .icon-volume-off { --icon: var(--icon-volume-off-data, url("/images/volume-off.svg")); } .icon-mic-on { --icon: var(--icon-mic-on-data, url("/images/mic-on.svg")); } .icon-mic-off { --icon: var(--icon-mic-off-data, url("/images/mic-off.svg")); } .icon-info { --icon: url("/images/info.svg"); } .icon-infoBig { --icon: url("/images/infoBig.svg"); } .icon-cross { --icon: url("/images/cross-icon.svg"); } .icon-hand-on { --icon: var(--icon-hand-on-data, url("/images/hand-on.svg")); } .icon-hand-off { --icon: url("/images/hand-off.svg"); } .icon-screen-share-on { --icon: var(--icon-screen-share-on-data, url("/images/screen-share-on.svg")); } .icon-screen-share-off { --icon: url("/images/screen-share-off.svg"); } .icon-mic-on { --icon: var(--icon-mic-on-data, url("/images/mic-on.svg")); } .icon-mic-off { --icon: var(--icon-mic-off-data, url("/images/mic-off.svg")); } .icon-vid-on { --icon: var(--icon-vid-on-data, url("/images/vid-on.svg")); } .icon-vid-off { --icon: var(--icon-vid-off-data, url("/images/vid-off.svg")); } .icon-settings { --icon: var(--icon-settings-data, url("/images/settings.svg")); } .icon-copy { --icon: var(--icon-copy-data, url("/images/copy-icon.svg")); } .icon-delete-button { --icon: url("/images/delete-btn.svg"); color: var(--text); } .icon-export-task { --icon: url("/images/export-task.svg"); } .icon-logo-svg { --icon: var(--icon-logo-svg-data, url("/images/Eltex-logo.svg")); display: block; width: 100%; height: auto; aspect-ratio: 964 / 202; -webkit-mask-size: contain; mask-size: contain; opacity: 0.9; transition: opacity .3s, transform .2s; } .icon-gallery-view { --icon: url("/images/gallery-view.svg"); } .icon-speak-view { --icon: url("/images/speak-view.svg"); } .icon-screen-cast { --icon: url("/images/screen-cast-btn.svg"); } .icon-presentation-cast { --icon: url("/images/presentation-share.svg"); } .icon-emoji { --icon: var(--icon-emoji-data, url("/images/emoji.svg")); } .toolbar_main { container: toolbar / inline-size; grid-row: 2 / 3; position: sticky; bottom: 0; width: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .25)); padding: 8px 10px 10px; z-index: 10; } @media (max-width: 991.98px), (hover: none) and (pointer: coarse) { #toolbar.toolbar_main, .toolbar_main { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; grid-row: unset !important; width: 100vw !important; max-width: 100vw !important; padding: 8px 12px calc(10px + env(safe-area-inset-bottom)) !important; background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .35)) !important; } .container_main > .toolbar_main { grid-row: unset !important; } .container_main { height: 100vh !important; max-height: 100vh !important; overflow: hidden !important; } #root_main { height: 100% !important; max-height: 100% !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; } #wall { height: 100% !important; max-height: 100% !important; padding-bottom: 100px !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; } #root-layout { overflow: visible !important; height: 100vh !important; max-height: 100vh !important; } .root.rowLayout_main { contain: none !important; } #root-layout > .container_main { overflow: hidden !important; } body { overflow-x: hidden !important; height: 100vh !important; max-height: 100vh !important; } html { height: 100vh !important; max-height: 100vh !important; overflow-x: hidden !important; } } /* ------------------------------ 2) Top brand + invite ------------------------------ */ .eltex-logo { position: absolute; top: 1%; right: 1%; width: 124px; z-index: 1000; display: inline-block; padding: 8px 10px; background: var(--bg-button); border-radius: 25px; } .eltex-logo:hover .icon-logo-svg { opacity: 1; transform: translateY(-1px); } .notification { position: fixed; top: 20px; right: 20px; background-color: var(--notification); color: var(--text); padding: 10px 14px; border-radius: 8px; font-size: 14px; box-shadow: var(--shadow-1); opacity: 0; transition: opacity 0.2s ease-in-out; z-index: 2; } .notificationBtn { position: relative; top: 5px; right: -35%; background-color: rgba(0, 0, 0, 0.5); color: white; cursor: pointer; z-index: 3; } .notificationBtn:hover { background-color: rgba(0, 0, 0, 0.8); } .notification.visible { opacity: 1; } /* ------------------------------ 3) Wall & video tiles ------------------------------ */ #wall { inset: 0; padding: 60px 10px 0px; display: flex; flex-wrap: wrap; --gap: 10px; gap: var(--gap); height: 100%; overflow-x: hidden; overflow-y: auto; align-content: flex-start; justify-content: center; --cols: calc(var(--wall-cols, var(--max-wall-cols, 4))); } #wall>* { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); min-width: 0; } @media (min-width: 1920px) { #wall { --max-wall-cols: 4; } } @media (max-width: 991.98px) { #wall { --max-wall-cols: 2; } #drawingBoard { height: calc(100dvh - var(--draw-toolbar-h) - env(safe-area-inset-bottom, 0px)); } } @media (max-width: 575.98px) { #wall { --max-wall-cols: 1; grid-auto-rows: max-content; } } @media (max-width: 375.98px) { #wall { grid-auto-rows: max-content; --max-wall-cols: 1; } } #wall>div { color: var(--text); display: flex; align-items: center; justify-content: center; position: relative; margin: 0; border-width: 0; background: var(--wall); background-size: contain; background-position: center; background-repeat: no-repeat; overflow: hidden; font-size: 24px; font-weight: bold; min-height: 0; } #wall.speaker-mode { display: grid; grid-template-rows: auto 1fr; grid-template-columns: 100%; row-gap: var(--gap); align-content: start; justify-items: center; overflow: hidden; } #thumbRail { --thumb-size: 120px; display: grid; grid-auto-flow: column; grid-auto-columns: var(--thumb-size); gap: var(--gap); width: max-content; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; border-radius: 14px; padding: 10px; } #thumbRail.hidden { display: none; } #thumbRail .video-container { width: var(--thumb-size); height: var(--thumb-size); aspect-ratio: 1 / 1; flex: none; cursor: pointer; scroll-snap-align: start; } #wall.speaker-mode>.video-container { flex: initial !important; width: 70%; aspect-ratio: 16 / 9; } #thumbRail .video-container>video, #thumbRail .video-container .users_video { object-fit: cover; } #wall.speaker-mode .video-container:not(.stage) .mute-button { display: none !important; } @media (max-width: 1300px) { /* #wall { width: clamp(300px, 95%, 1600px); } */ #thumbRail { width: clamp(300px, 95%, 1600px); } } #thumbSlider { width: 100%; margin-top: 6px; height: 8px; border-radius: 999px; background: var(--border); outline: none; -webkit-appearance: none; appearance: none; } #thumbSlider:disabled { opacity: .5; } #thumbSlider::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: var(--border); } #thumbSlider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -5px; border-radius: 50%; background: var(--bg-button); border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(0, 0, 0, .15); } #thumbSlider::-moz-range-track { height: 8px; border-radius: 999px; background: var(--border); } #thumbSlider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--bg-button); border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(0, 0, 0, .15); } #thumbWrap { position: relative; width: 70%; display: grid; place-items: center; border-radius: 14px; } #thumbWrap.hidden { display: none; } #thumbRail { width: 100%; } .video-container { position: relative; display: flex; width: 100%; aspect-ratio: 16 / 12; overflow: hidden; z-index: var(--z-wall); cursor: grab; border: 2px solid transparent; border-radius: 14px; overflow: hidden; transition: transform .2s var(--ease), border .3s var(--ease); flex: 0 0 auto; min-height: 0; } .video-container>video, .video-container .users_video { border-radius: inherit; } .video-container:active { cursor: grabbing; } .users_video { width: 100%; height: 100%; object-fit: var(--video-fit); } .video-label { position: absolute; top: 5px; left: 5px; background: var(--bg-button); color: var(--text); padding: 2px 5px; border-radius: var(--r-4); font-size: 14px; } .mic-indicator { position: absolute; bottom: 10px; left: 10px; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 16px; background: var(--bg-button); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); z-index: 2; } .self-badge { position: absolute; top: 5px; left: 5px; background: var(--bg-button); color: var(--text); padding: 2px 6px; border-radius: 12px; padding: 2px 8px; font-size: 14px; } .active-speaking { box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.8); z-index: 1; } .screen-share-container { bottom: 20px; left: 400px; position: fixed; display: flex; max-width: 300px; aspect-ratio: 4 / 3; border: 1px solid rgba(255, 255, 255, 0.15); box-sizing: border-box; object-fit: cover; z-index: var(--z-floating); } .hidden-no-video { display: none !important; } /* ------------------------------ 4) Chat ------------------------------ */ .sidebar_main .pane { position: relative; transform: none; min-width: 0; height: 100%; } #chat-container { top: 0; right: 0; bottom: 0; position: relative; transform: none; } #chat-messages { flex-grow: 1; overflow-y: auto; padding: 10px; color: var(--text); font-size: 14px; white-space: pre-wrap; word-wrap: break-word; } .chat-input-container { position: sticky; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid rgba(255, 255, 255, .06); background: transparent } #chat-input { flex-grow: 1; color: var(--text); border: none; resize: none; outline: none; font-size: 14px; border-radius: 999px; background: var(--input-bg); border: 1px solid var(--input-border); } .pane { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; } .pane-chat .chat-messages { flex: 1 1 auto; overflow: auto; padding: 12px; display: grid; gap: 8px; } .pane-chat .chat-messages, .chat-messages { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 0; } .chat-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .chat-actions button { height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); cursor: pointer; } .chat-actions button:hover { background: color-mix(in srgb, var(--panel-2) 80%, var(--accent) 20%); } #upload-button, #send-button { border: none; padding: 5px 10px; cursor: pointer; z-index: var(--z-modal); } #upload-button { background: var(--accent); color: #fff; } #upload-button:hover { background: var(--accent-hover); } #send-button { background: var(--accent); color: var(--text) } #send-button:hover { background: var(--accent-hover); } .chat-date-sep { text-align: center; margin: 10px 0; font-size: 12px; opacity: .7; } #friendsincomingEmpty, #friendsoutgoingEmpty, #friendsacceptedEmpty { margin-left: 20px; margin-top: 8px; } .tab-panel { position: relative; display: none; } .tab-panel.is-active { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .topbar-chat { max-width: 1200px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 16px; } .nav-link-friend { background: transparent; border: none; color: var(--top-fg); cursor: pointer; padding: 8px 10px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; gap: 8px; position: relative; white-space: nowrap; } .nav-link-friend:hover { opacity: .9; } .nav-link-friend.is-active::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -8px; height: 2px; border-radius: 999px; background: #5ea3ff; } .friends-wall { display: flex; flex-direction: column; min-height: 0; } .icon-more { appearance: none; border: 0; border-radius: var(--radius-md); padding: 10px 14px; background: var(--accent); color: var(--text); font-size: 15px; cursor: pointer; } .chat-search__item, .create-group, .open-search { display: block; width: 100%; padding: 10px 12px; background: transparent; color: var(--text); border: 0; text-align: left; cursor: pointer; } .chat-search__menu { display: none; position: absolute; top: 3.3%; margin-top: 6px; z-index: 1000; min-width: 180px; background: var(--panel); border: 0; border-radius: var(--radius-md); } .chatSearchBack { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-sm); color: var(--icon); border: 0; box-shadow: var(--shadow-1); cursor: pointer; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease-in-out; } #friendsacceptedList { margin: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; overflow: auto; } .friends-list { list-style: none; margin: 10px 8px; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-height: 0; overflow: auto; } .friend-section { overflow: hidden; } .friend-section .section-header { padding: 10px 12px; font-weight: 600; } .friend-section .section-list { list-style: none; margin: 0; padding: 0; } .friend-section .section-list .friend-item { background: transparent; border: 0; border-radius: 0; padding: 10px 12px; } .friend-item { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: transparent; cursor: pointer; transition: background .15s ease; } .friend-item:hover { background: rgba(255, 255, 255, .04); } .friend-item.is-active { background: rgba(59, 130, 246, .14); } .friend-item.is-active, .friend-item:focus-visible { outline: 0; background-color: var(--accent) !important; } .avatar { inline-size: 40px; block-size: 40px; border-radius: 50%; overflow: hidden; background: var(--accent); border: 0; } .avatar-32 { inline-size: 32px; block-size: 32px; } .avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .avatar .initials { font-size: 12px; font-weight: 700; display: grid; place-items: center; inline-size: 100%; block-size: 100%; } .friends-tab-panel.is-active { display: grid; grid-template-columns: 1fr; min-height: 100%; } .chat-back { display: inline-flex; align-items: center; justify-content: center; } .friends-chatUser { flex: 1 1 auto; overflow: visible; } .friends-chatUser .chat-input { background: transparent; } .chat-input .input-wrap { padding: 0; } .unread-counter { display: inline-flex; align-items: center; justify-content: center; width: var(--cb-icon); height: var(--cb-icon); font-size: var(--cb-icon) / 2; background: red; color: white; border-radius: 50%; margin-right: 6px; font-weight: bold; line-height: 1; flex-shrink: 0; } /* ------------------------------ 5) Drawing board ------------------------------ */ #drawingContainer { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 2px solid #333; border-radius: 8px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); background: white; z-index: 1000; } #drawingBoard { cursor: crosshair; background: white; } .drawing-controls { background: #f0f0f0; padding: 10px; display: flex; gap: 10px; align-items: center; border-bottom: 1px solid #ccc; } .drawing-controls input, .drawing-controls button { padding: 5px 10px; border-radius: 4px; border: 1px solid #ccc; } .drawing-controls .draw-close { margin-left: auto; background: transparent; border: 0; padding: 6px; border-radius: 8px; line-height: 0; color: #222; cursor: pointer; } /* ------------------------------ 6) Task & Users modals ------------------------------ */ .task-text { margin: 0; font-size: 14px; color: var(--text); } .taskModal { position: fixed; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; min-width: 320px; background: var(--chat-panel); max-width: 100%; height: 100%; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-left: 1px solid var(--accent); border-radius: 0; display: flex !important; flex-direction: column; overflow: hidden; box-shadow: var(--shadow-1); z-index: var(--z-modal); transform: translateX(100%); transition: transform .3s var(--ease); } #taskListContainer, #usersListContainer { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-height: 0; } .task-toolbar { flex: 0 0 auto; position: sticky; top: 0; background: var(--chat-panel); z-index: 1; } #taskList, #usersList { flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-gutter: stable; padding-right: 6px; } #taskList li { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 15px; padding: 10px; background-color: var(--accent); border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); transition: background-color 0.3s ease; } #taskList li h3 { font-size: 16px; color: white; margin: 0 0 10px 0; } .taskListLiInput { background-color: var(--accent); color: var(--text); width: calc(100% - 20px); padding: 8px; font-size: 14px; border: 1px solid var(--accent); border-radius: 5px; margin-bottom: 10px; transition: border-color 0.3s ease; } .taskListLiInput:focus { outline: none; border-color: rgba(255, 255, 255, 0.7); } .taskListLiInputUser { color: var(--text); font-size: 14px; padding: 8px; border: none; background: transparent; cursor: text; } #taskList li img { width: 20px; height: 20px; cursor: pointer; align-self: flex-end; margin-top: 5px; color: var(--text); } #addTask { margin: 0 auto 15px auto; display: block; padding: 10px 20px; font-size: 16px; background-color: var(--accent); color: var(--text); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease; } #addTask:hover { background-color: var(--accent-hover); color: black; } #exportTask { position: absolute; top: 10px; right: 10px; padding: 5px 10px; font-size: 12px; background-color: var(--accent); color: var(--text); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease; } #exportTask:hover { background-color: var(--accent-hover); color: black; } .usersListText { color: var(--text); text-align: center; font-size: 1.2em; font-weight: bold; margin-bottom: 10px; } .userListLi { list-style: none; margin: 0; padding: 0; text-align: left; } .userListLi li { display: flex; justify-content: space-between; align-items: center; background-color: var(--accent); color: var(--text); font-size: 1em; padding: 10px; margin: 5px 0; border-radius: 5px; transition: background-color 0.3s ease; cursor: pointer; } .userListLi li:hover { background-color: var(--accent-hover); } #usersListContainer { padding: 15px; } .userListLi button { background-color: var(--panel); color: var(--text); border: none; border-radius: 5px; padding: 5px 10px; font-size: 0.9em; font-weight: bold; cursor: pointer; transition: background-color 0.3s ease; margin-left: 10px; } .userListLi button:hover { background-color: rgba(255, 255, 255, 0.8); color: black; } .pending-approvals { margin-bottom: 10px; padding: 0; } .pending-approvals .pending-item { display: flex; justify-content: space-between; align-items: center; background-color: var(--accent); color: var(--text); font-size: 1em; padding: 10px; margin: 5px 0; border-radius: 5px; transition: background-color 0.3s ease; cursor: pointer; } .pending-approvals .pending-item:hover { background-color: var(--accent-hover); } .pending-approvals .pendingBtn { background-color: var(--panel); color: var(--text); border: none; border-radius: 5px; padding: 5px 10px; font-size: 0.9em; font-weight: bold; cursor: pointer; transition: background-color 0.3s ease; margin-left: 10px; } .pending-approvals .pendingBtn:hover { background-color: rgba(255, 255, 255, 0.8); color: black; } .pending-approvals .pending-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ------------------------------ 7) State indicator ------------------------------ */ .state { position: fixed; z-index: var(--z-floating); display: flex; flex-direction: row; justify-content: center; align-items: center; border-radius: 25px; background-color: var(--bg-button); color: color-mix(in srgb, var(--text) 80%, transparent); width: 20%; } .state .icon { flex: 0 0 auto; border-radius: 100%; } .state .icon.new, .state .icon.closed { background-color: rgba(170, 170, 170, 0.5); } .state .icon.connecting { animation: Room-info-state-connecting 0.75s infinite linear; } .state .icon.connected { background-color: rgba(48, 189, 24, 0.75); } .state .text { flex: 100 0 auto; -webkit-user-select: none; user-select: none; pointer-events: none; text-align: center; text-transform: uppercase; font-family: 'Roboto', sans-serif; font-weight: 400; color: var(--text); font-size: 12px; } @keyframes Room-info-state-connecting { 50% { background-color: rgba(255, 165, 0, 0.75); } } /* ------------------------------ 8) Presentation (PDF) ------------------------------ */ .presentation-container { position: relative; display: flex; flex-direction: column; width: 100%; height: 95%; background: #000; } .presentation-container canvas { flex: 1 1 auto; width: 100%; height: auto; object-fit: contain; } .presentation-container .pdf-controls { position: absolute; bottom: 0; left: 0; width: 100%; box-sizing: border-box; padding: 4px; background-color: #1e3047; display: flex; justify-content: center; align-items: center; } .presentation-container .pdf-controls button { margin: 0 8px; background-color: rgba(0, 0, 0, 0.6); color: white; border: none; border-radius: 5px; padding: 5px 10px; font-size: 0.6em; cursor: pointer; } /* ------------------------------ 10) Control buttons ------------------------------ */ .control-buttons { position: relative; left: 50%; transform: translateX(-50%); bottom: 12px; width: calc(100% - 24px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 0 10px; z-index: 1000; font-family: "YS Text Medium", "Helvetica Neue", Helvetica, Arial, sans-serif; --cb-font: var(--cb-font-m); --cb-h: var(--cb-h-m); --cb-pad: var(--cb-pad-m); --cb-icon: var(--cb-icon-m); --cb-gap: var(--cb-gap-m); --cb-radius: var(--cb-radius-m); } .control-buttons .group { display: flex; gap: var(--cb-gap); align-items: center; } .control-buttons .group.left { justify-content: flex-start; padding-left: 6px; } .control-buttons .group.center { justify-content: center; } .control-buttons .group.right { justify-content: flex-end; padding-right: 6px; } .control-buttons button { position: relative; background: var(--bg-button); color: var(--text); border-width: 0; border-radius: var(--cb-radius); padding: var(--cb-pad); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--cb-gap); min-width: var(--cb-h); height: var(--cb-h); font-size: var(--cb-font); line-height: 1; transition: background-color .2s ease, border-color .2s ease, transform .08s ease; } .control-buttons button:hover { filter: brightness(var(--hover-brightness)); } .control-buttons button:active { transform: translateY(1px) scale(.98); } .control-buttons button .icon { width: var(--cb-icon); height: var(--cb-icon); } .control-buttons button .tooltip { position: absolute; bottom: calc(var(--cb-h) + 6px); left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, .7); color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; } .control-buttons button:hover .tooltip { opacity: 1; transform: translateX(-50%) translateY(-2px); } .share-dropdown, .more-dropdown { position: relative; display: inline-block; } .share-menu, .more-menu { position: absolute; bottom: calc(var(--cb-h) + 10px); left: 0; display: flex; flex-direction: column; background-color: var(--bg-button); border: 1px solid var(--border); border-radius: 8px; padding: 8px; min-width: 180px; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); z-index: 1000; } .share-menu button, .more-menu button { display: grid; grid-template-columns: var(--menu-icon) 1fr; column-gap: var(--menu-gap); align-items: center; background: var(--bg-button); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; text-align: left; } .more-menu .icon { grid-column: 1; justify-self: start; width: var(--menu-icon); height: var(--menu-icon); display: inline-block; } .more-menu .menu-text { grid-column: 2; justify-self: stretch; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .share-menu button:hover, .more-menu button:hover { background: var(--accent-hover); } .more-menu.hidden, .share-menu.hidden { display: none !important; } .dots { font-size: 22px; line-height: 0; } /* < 992 */ @media (max-width: 991.98px) { .control-buttons .share-label { display: none; } } /* ≥1920 — XXL */ @media (min-width: 1920px) { .control-buttons { --cb-font: var(--cb-font-xxl); --cb-h: var(--cb-h-xxl); --cb-pad: var(--cb-pad-xxl); --cb-icon: var(--cb-icon-xxl); --cb-gap: var(--cb-gap-xxl); --cb-radius: var(--cb-radius-xxl); } } /* 1200–1919 — XL */ @media (min-width: 1200px) and (max-width: 1919.98px) { .control-buttons { --cb-font: var(--cb-font-xl); --cb-h: var(--cb-h-xl); --cb-pad: var(--cb-pad-xl); --cb-icon: var(--cb-icon-xl); --cb-gap: var(--cb-gap-xl); --cb-radius: var(--cb-radius-xl); } } /* 992–1199 — L */ @media (min-width: 992px) and (max-width: 1199.98px) { .control-buttons { --cb-font: var(--cb-font-l); --cb-h: var(--cb-h-l); --cb-pad: var(--cb-pad-l); --cb-icon: var(--cb-icon-l); --cb-gap: var(--cb-gap-l); --cb-radius: var(--cb-radius-l); } } /* 768–991 — M */ @media (min-width: 768px) and (max-width: 991.98px) { .control-buttons { --cb-font: var(--cb-font-m); --cb-h: var(--cb-h-m); --cb-pad: var(--cb-pad-m); --cb-icon: var(--cb-icon-m); --cb-gap: var(--cb-gap-m); --cb-radius: var(--cb-radius-m); } } /* 576–767 — S */ @media (min-width: 576px) and (max-width: 767.98px) { .control-buttons { --cb-font: var(--cb-font-s); --cb-h: var(--cb-h-s); --cb-pad: var(--cb-pad-s); --cb-icon: var(--cb-icon-s); --cb-gap: var(--cb-gap-s); --cb-radius: var(--cb-radius-s); } } /* ≤575 — S */ @media (max-width: 575.98px) { .control-buttons { --cb-font: var(--cb-font-s); --cb-h: var(--cb-h-s); --cb-pad: 0 8px; --cb-icon: var(--cb-icon-s); --cb-gap: 6px; --cb-radius: var(--cb-radius-s); padding-inline: 8px; gap: 10px; } } .more-menu .menu-item--chat, .more-menu .menu-item--center-fallback { display: none !important; } /* < 768 */ @media (max-width: 767.98px) { #openChat { display: none !important; } .more-menu .menu-item--chat { display: flex !important; } .control-buttons .group.center .more-dropdown .more-menu { left: 50% !important; right: auto !important; transform: translateX(-50%); } .control-buttons .more-menu { align-items: stretch; min-width: 220px; } .control-buttons .more-menu button { width: 100%; box-sizing: border-box; justify-content: flex-start; text-align: left; } #drawingContainer { position: fixed; inset: 0; transform: none; width: 100vw; height: 100dvh; border: 0; border-radius: 0; z-index: var(--z-modal, 1001); padding-top: var(--draw-toolbar-h); } .drawing-controls { position: fixed; top: max(0px, env(safe-area-inset-top)); left: 0; right: 0; height: var(--draw-toolbar-h); display: flex; align-items: center; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-top)) 10px; border-bottom: 1px solid var(--border, #2a2a2a); z-index: calc(var(--z-modal, 1001) + 1); overflow-x: auto; } .drawing-controls button, .drawing-controls input[type="color"], .drawing-controls input[type="range"] { min-height: 40px; } .drawing-controls input[type="color"] { inline-size: 44px; block-size: 32px; padding: 0; } .drawing-controls input[type="range"] { inline-size: 120px; } #drawingBoard { display: block; width: 100vw; height: calc(100dvh - var(--draw-toolbar-h) - env(safe-area-inset-bottom, 0px)); touch-action: none; } } /* < 576 */ @media (max-width: 575.98px) { .control-buttons .group.center> :not(.more-dropdown) { display: none !important; } .more-menu .menu-item--center-fallback { display: flex !important; } .control-buttons .group.center .more-dropdown .more-menu { min-width: 200px; } .control-buttons .group.center .more-dropdown .more-menu button { text-align: center; } .setting-aria-content { width: 100% !important } .eltex-logo { width: 124px; top: 8px; right: 8px; } } @media (max-width: 375.98px) { .control-buttons { padding-inline: 6px; gap: 8px; } .control-buttons .group { gap: calc(var(--cb-gap) - 2px); } .drawing-controls { gap: 6px; padding: 6px 8px; } .drawing-controls input[type="range"] { inline-size: 100px; } } @container toolbar (min-width: 1920px) { .control-buttons { --cb-font: var(--cb-font-xxl); --cb-h: var(--cb-h-xxl); --cb-pad: var(--cb-pad-xxl); --cb-icon: var(--cb-icon-xxl); --cb-gap: var(--cb-gap-xxl); --cb-radius: var(--cb-radius-xxl); } } @container toolbar (min-width: 1200px) and (max-width: 1919.98px) { .control-buttons { --cb-font: var(--cb-font-xl); --cb-h: var(--cb-h-xl); --cb-pad: var(--cb-pad-xl); --cb-icon: var(--cb-icon-xl); --cb-gap: var(--cb-gap-xl); --cb-radius: var(--cb-radius-xl); } } @container toolbar (min-width: 992px) and (max-width: 1199.98px) { .control-buttons { --cb-font: var(--cb-font-l); --cb-h: var(--cb-h-l); --cb-pad: var(--cb-pad-l); --cb-icon: var(--cb-icon-l); --cb-gap: var(--cb-gap-l); --cb-radius: var(--cb-radius-l); } } @container toolbar (min-width: 768px) and (max-width: 991.98px) { .control-buttons { --cb-font: var(--cb-font-s); --cb-h: var(--cb-h-s); --cb-pad: var(--cb-pad-s); --cb-icon: var(--cb-icon-s); --cb-gap: var(--cb-gap-s); --cb-radius: var(--cb-radius-s); } } @container toolbar (min-width: 576px) and (max-width: 767.98px) { .control-buttons { --cb-font: var(--cb-font-s); --cb-h: var(--cb-h-s); --cb-pad: var(--cb-pad-s); --cb-icon: var(--cb-icon-s); --cb-gap: var(--cb-gap-s); --cb-radius: var(--cb-radius-s); } } @container toolbar (max-width: 575.98px) { .control-buttons { --cb-font: var(--cb-font-s); --cb-h: var(--cb-h-s); --cb-pad: 0 8px; --cb-icon: var(--cb-icon-s); --cb-gap: 6px; --cb-radius: var(--cb-radius-s); padding-inline: 8px; gap: 10px; } .sidebar_main.visible_main { width: 100%; flex-basis: 100%; } .sidebar_main:not(.visible_main) { width: 0; flex-basis: 0; } } @container toolbar (max-width: 767.98px) { #openChat { display: none !important; } .more-menu .menu-item--chat { display: flex !important; } .control-buttons .group.center .more-dropdown .more-menu { left: 50% !important; right: auto !important; transform: translateX(-50%); } .control-buttons .more-menu { align-items: stretch; min-width: 220px; } .control-buttons .more-menu button { width: 100%; box-sizing: border-box; justify-content: flex-start; text-align: left; } } @container toolbar (max-width: 375.98px) { .control-buttons { padding-inline: 6px; gap: 8px; } .control-buttons .group { gap: calc(var(--cb-gap) - 2px); } } /* ------------------------------ 11) Elements ------------------------------ */ #server-timer-settings { color: var(--text); font-size: 12px; z-index: var(--z-floating); } .conference-time { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: var(--z-floating); background: var(--bg-button); border: 0; border-radius: 12px; padding: 6px 12px; font-size: 12px; font-family: 'Roboto', sans-serif; color: var(--text); box-shadow: var(--shadow-2); pointer-events: none; } @media (max-width: 575.98px) { .conference-time { display: none; } } #exitButton { background-color: #e74c3c; border-color: #e74c3c; } #exitButton:hover { filter: brightness(var(--hover-brightness)); } /* ------------------------------ 12) Sidebar ------------------------------ */ .sidebar_main { position: relative; flex: 0 0 0; width: 0; background: transparent; transition: width .25s ease, flex-basis .25s ease; color: var(--text); overflow: hidden; transition: width .25s ease; display: flex; flex-direction: column; min-height: 100%; padding: 0 0 0 0; z-index: 11; } .sidebar_main.visible_main { width: var(--sidebar-w); flex-basis: var(--sidebar-w); padding: 8px 8px 8px 0; } .sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--border); background: transparent; } .sidebar-title { margin: 0; font-size: 16px; } .sidebar-close { border: 0; background: transparent; color: var(--text); cursor: pointer; font-size: 18px; padding: 6px; border-radius: 8px; } .sidebar-close:hover { background: color-mix(in srgb, var(--panel-2) 75%, var(--accent) 25%); } @container layout (max-width: 575.98px) { .sidebar_main.visible_main { width: 100%; flex-basis: 100%; padding: 0 0 0; } .sidebar_main:not(.visible_main) { width: 0; flex-basis: 0; } } .container_main { position: relative; flex: 1 1 auto; min-width: 0; height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 0; background: transparent; transition: margin-right .25s ease, width .25s ease; } .sidebar-container { position: relative; background: var(--chat-panel); border-radius: 16px; height: 100%; min-height: 100%; display: flex; flex-direction: column; } /* .sidebar_main { position: relative; flex: 0 0 0; width: 0; background: var(--bg); transition: width .25s ease, flex-basis .25s ease; color: var(--text); overflow: hidden; transition: width .25s ease; display: flex; flex-direction: column; padding: 8px 8px 8px 0; z-index: 11; } */ /* ------------------------------ 13) Setting ------------------------------ */ .setting-overlay { position: fixed; inset: 0; background: var(--overlay-strong); display: none; z-index: var(--z-modal); } .setting-overlay.visible_main { display: block; } .setting-modal { position: fixed; inset: 0; display: grid; place-items: center; padding: 56px 16px; } .setting-aria-content { display: flex; flex-direction: column; background: color-mix(in srgb, var(--panel) 100%, transparent); border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); border-radius: 16px; width: min(980px, 100%); max-height: 90vh; box-shadow: var(--shadow-2); overflow: hidden; outline: none; } .setting-navigationBar { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 16px 20px; border-bottom: 1px solid var(--border); } .setting-navigationBar-title { margin: 0; font-size: 18px; } .setting-close { border: 0; background: transparent; color: var(--text); font-size: 20px; line-height: 1; padding: 6px 8px; border-radius: 10px; cursor: pointer; } .setting-close:hover { background: var(--accent); } .setting-layout { display: grid; grid-template-columns: 240px 1fr; gap: 0; min-height: 400px; } .setting-menu { display: flex; flex-direction: column; border-right: 1px solid var(--border); padding: 12px; background: color-mix(in srgb, var(--panel-2) 70%, transparent); } .setting-menu .setting-tab { appearance: none; border: 0; background: transparent; color: var(--text); text-align: left; padding: 10px 12px; margin: 2px 0; border-radius: 10px; cursor: pointer; font-size: 14px; display: flex; } .setting-menu .setting-tab .icon { width: 18px; height: 18px; padding-left: 10px; color: currentColor; flex: 0 0 18px; margin-right: 5px; } .setting-menu .setting-tab:hover { background: var(--accent); } .setting-menu .setting-tab.is-active { background: var(--accent-hover); outline: 1px solid var(--border); } .setting-content { padding: 16px 20px 20px; overflow: auto; width: 380px; min-width: 0; scrollbar-gutter: stable both-edges; } .setting-panel[data-panel="general"] .form-row { grid-template-columns: none !important; gap: 10px; } .form-row { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 12px; align-items: center; margin-bottom: 12px; } .form-row .muted, .video-preview { grid-column: 1 / -1; } .form-row select, .form-row input[type="text"] { width: 100%; } .form-row>*:only-child { grid-column: 1 / -1; } .form-row>label { color: var(--top-fg); } .form-row select, .form-row input[type="text"] { width: 100%; background: var(--bg-button); color: var(--text); border: 1px solid var(--border); border-radius: 10px; height: 38px; padding: 0 10px; } .toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; -webkit-user-select: none; user-select: none; } .toggle>input[type="checkbox"] { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); } .toggle-ui { position: relative; width: 44px; height: 24px; border-radius: 999px; background: #9aa0a6; transition: background .2s ease; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); } .toggle-ui::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: left .2s ease, transform .2s ease; } .toggle>input[type="checkbox"]:checked+.toggle-ui { background: #22c55e; } .toggle>input[type="checkbox"]:checked+.toggle-ui::after { left: 22px; } .toggle>input[type="checkbox"]:focus-visible+.toggle-ui { outline: 2px solid #3b82f6; outline-offset: 3px; } .toggle>input[type="checkbox"]:disabled+.toggle-ui { opacity: .5; cursor: not-allowed; } .toggle .toggle-ui { margin-left: auto; } .toggle-text { font-size: 14px; } .toggle .toggle-text { order: -1; } .switch { display: inline-flex; align-items: center; gap: 8px; } .muted { color: var(--muted); font-size: 12px; } .video-preview { margin-top: 10px; border: 1px dashed var(--border); border-radius: 12px; padding: 8px; aspect-ratio: 16/10; max-width: 560px; background: var(--panel-2); } .video-preview video { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; } .setting-panel { display: none; width: 100%; padding-inline: 0; } .setting-panel.is-active { display: block; } .meter-row { display: flex; align-items: center; gap: 10px; min-height: 32px; } .vu { position: relative; flex: 1 1 auto; height: 10px; background: color-mix(in srgb, var(--accent) 70%, var(--panel) 30%); border-radius: 6px; overflow: hidden; } .vu>span { position: absolute; inset: 0 auto 0 0; width: 0%; background: linear-gradient(90deg, #43a047, #fdd835, #e53935); transition: width .08s linear; } .setting-panel .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 100px; height: var(--cb-h-s); padding: 0px; border-radius: var(--cb-radius-s); font-size: var(--cb-font-s); background: var(--panel-2); color: var(--text); border: 0; cursor: pointer; transition: background-color .2s var(--ease), border-color .2s var(--ease), transform .06s ease; } .setting-panel .btn:hover { background: color-mix(in srgb, var(--panel-2) 80%, var(--accent) 20%); } .setting-panel .btn:active { transform: translateY(1px); } .setting-panel .btn .icon { width: 18px; height: 18px; } .setting-panel .btn.btn-ghost { background: color-mix(in srgb, var(--panel-2) 70%, transparent); border-color: var(--border); } .setting-panel .btn.btn-ghost:hover { background: var(--accent-hover); } .setting-panel .btn.highlighted { background: color-mix(in srgb, var(--success) 25%, var(--panel-2) 75%); border-color: var(--success); } .setting-panel .meter-row { display: grid; grid-template-columns: 1fr; gap: 10px; } .gain-control { display: flex; flex-direction: column; gap: var(--s-8); width: 100%; } .gain-control input[type="range"] { width: 100%; height: var(--vol-height); -webkit-appearance: none; appearance: none; background: transparent; outline: none; padding: 0; margin: 0; } .gain-control input[type="range"]::-webkit-slider-runnable-track { width: 100%; height: var(--vol-track-h); background: var(--input-bg); border-radius: var(--vol-track-h); border: 1px solid var(--input-border); cursor: pointer; } .gain-control input[type="range"]::-moz-range-track { width: 100%; height: var(--vol-track-h); background: var(--input-bg); border-radius: var(--vol-track-h); border: 1px solid var(--input-border); cursor: pointer; } .gain-control input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: var(--vol-thumb); height: var(--vol-thumb); border-radius: 50%; background: var(--text); cursor: pointer; margin-top: calc((var(--vol-track-h) - var(--vol-thumb)) / 2 - 1px); border: 2px solid var(--panel); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); transition: transform 0.2s var(--ease), background-color 0.2s var(--ease); } .gain-control input[type="range"]::-moz-range-thumb { width: var(--vol-thumb); height: var(--vol-thumb); border-radius: 50%; background: var(--text); cursor: pointer; border: 2px solid var(--panel); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); transition: transform 0.2s var(--ease), background-color 0.2s var(--ease); } .gain-values { display: flex; justify-content: space-between; width: 100%; font-size: var(--cb-font-s); color: var(--top-fg); padding: 0 var(--s-4); } .gain-values span { position: relative; top: var(--s-2); transform: translateX(-50%); white-space: nowrap; } .gain-values span:first-child { transform: translateX(0); } .gain-values span:last-child { transform: translateX(-100%); } .gain-value-display { font-size: var(--cb-font-s); font-weight: 500; color: var(--top-fg); text-align: center; padding-top: var(--s-4); } #micTestBtn, #speakerTestBtn { width: 100%; justify-content: center; } .setting-menu .setting-tab[data-tab="general"] .icon { --icon: url("/images/user.svg"); } .setting-menu .setting-tab[data-tab="audio"] .icon { --icon: url("/images/mic-on.svg"); } .setting-menu .setting-tab[data-tab="video"] .icon { --icon: url("/images/vid-on.svg"); } .setting-menu .setting-tab[data-tab="about"] .icon { --icon: url("/images/info.svg"); } .setting-menu .setting-tab[data-tab="effects"] .icon { --icon: url("/images/effectDesired.svg"); } .image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; } #bg-image-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; } .conf-bg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; } .conf-bg-pick { padding: 0; margin: 0; border: 1px solid var(--border); background: transparent; border-radius: 10px; overflow: hidden; cursor: pointer; line-height: 0; transition: box-shadow .15s var(--ease), border-color .15s var(--ease), transform .08s var(--ease); } .conf-bg-pick img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; filter: brightness(.95); transition: transform .15s var(--ease), filter .15s var(--ease); } .conf-bg-pick:hover img { transform: scale(1.02); filter: brightness(1); } .conf-bg-pick.selected { outline: 2px solid var(--accent-hover); box-shadow: 0 0 0 2px var(--accent-hover) inset; border-color: var(--accent-hover); } .conf-bg-pick img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .bg-pick { padding: 0; margin: 0; border: 1px solid var(--border); background: transparent; border-radius: 10px; overflow: hidden; cursor: pointer; line-height: 0; transition: box-shadow .15s var(--ease), border-color .15s var(--ease), transform .08s var(--ease); } .bg-pick img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; filter: brightness(.95); transition: transform .15s var(--ease), filter .15s var(--ease); } .bg-pick:hover img { transform: scale(1.02); filter: brightness(1); } .bg-pick.selected { outline: 2px solid var(--accent-hover); box-shadow: 0 0 0 2px var(--accent-hover) inset; border-color: var(--accent-hover); } @media (min-width: 1100px) { .image-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); } } @media (max-width: 480px) { .image-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); } } @media (max-width: 860px) { .form-row { grid-template-columns: 1fr; } .setting-layout { grid-template-columns: 1fr; } .setting-menu { flex-direction: row; gap: 8px; border-right: 0; border-bottom: 1px solid var(--border); height: 75px; } .setting-content { width: 100%; } .setting-menu .setting-tab { flex: 1 1 auto; text-align: center; height: 50px; font-size: 0; gap: 0; padding: 8px; } .setting-menu .setting-tab .icon { width: 24px; height: 24px; margin: 0; } } /* ------------------------------ 14) Emoji ------------------------------ */ #emoji-stream { position: fixed; left: 0; bottom: 0; top: 60px; width: 120px; pointer-events: none; overflow: visible; z-index: var(--z-emoji); } .emoji-bubble { position: absolute; bottom: -40px; right: 0; font-size: var(--size, 28px); filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35)); transform: translate3d(0, 0, 0); will-change: transform, opacity; animation: emoji-fly var(--dur, 4s) linear forwards, emoji-tilt var(--dur, 4s) ease-in-out forwards; opacity: .95; } @keyframes emoji-fly { 0% { transform: translate(0, 0) scale(1); opacity: .95; } 70% { opacity: .95; } 100% { transform: translate(var(--dx, -40px), -110%) scale(1.1); opacity: 0; } } @keyframes emoji-tilt { 0% { rotate: 0deg; } 50% { rotate: var(--rot, 12deg); } 100% { rotate: 0deg; } } .reactions-dropdown { position: relative; display: inline-block; } .reactions-menu { position: absolute; bottom: calc(var(--cb-h) + 10px); left: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; padding: 8px; background: var(--bg-button); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-2); z-index: 1000; } .reactions-menu.hidden { display: none !important; } .reactions-menu button { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 10px; width: 36px; height: 36px; font-size: 20px; line-height: 1; cursor: pointer; } .reactions-menu button:hover { background: var(--accent-hover); } /* ------------------------------ 14) Аватарка ------------------------------ */ .letterDiv { position: absolute; font-size: 48px; color: var(--text); z-index: -1; } .avatar-placeholder { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: -1; } .avatar-circle { --avatar-size: 96px; inline-size: var(--avatar-size); block-size: var(--avatar-size); border-radius: 50%; background: var(--accent); box-shadow: var(--shadow-1); overflow: hidden; display: grid; place-items: center; } .avatar-circle img { inline-size: 100%; block-size: 100%; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .avatar-initials { font-weight: 700; font-size: calc(var(--avatar-size) / 2.8); letter-spacing: .3px; opacity: .95; color: var(--text-contrast, #fff); display: grid; place-items: center; inline-size: 100%; block-size: 100%; } @media (max-width: 860px) { .avatar-circle { --avatar-size: 70px; } } /* -------------------------------------------------- 14) Подтверждение удаления -------------------------------------------------- */ .confirm-overlay { position: fixed; inset: 0; z-index: 500; } .confirm-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .confirm-modal { position: absolute; left: 50%; top: 50%; width: min(520px, 92vw); transform: translate(-50%, -50%); background: var(--panel, #111); color: var(--top-fg, #e5e7eb); border: 0; border-radius: var(--radius-lg, 16px); box-shadow: 0 10px 30px rgba(0, 0, 0, .4); display: grid; grid-template-rows: auto 1fr auto; } .confirm-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; } .confirm-header h3 { margin: 0; font-size: 18px; font-weight: 600; } .confirm-close { width: 36px; height: 36px; border: 0; background: transparent; color: inherit; border-radius: 10px; cursor: pointer; position: relative; } .confirm-close::before, .confirm-close::after { content: ""; position: absolute; left: 10px; right: 10px; top: 17px; height: 2px; background: currentColor; } .confirm-close::before { transform: rotate(45deg); } .confirm-close::after { transform: rotate(-45deg); } .confirm-body { padding: 16px; font-size: 15px; line-height: 1.45; } .confirm-footer { padding: 12px 16px 16px; display: flex; justify-content: flex-end; gap: 8px; } .btn-confirm { padding: 10px 14px; border-radius: var(--radius-md, 12px); border: 0; background: color-mix(in srgb, var(--accent, #6b8afd) 18%, transparent); color: var(--top-fg, #e5e7eb); cursor: pointer; font-weight: 600; } .btn-confirm:hover { filter: brightness(1.08); } .btn-confirm:active { transform: translateY(1px); } .btn-confirm-secondary { background: var(--accent); } .btn-confirm-danger { background: color-mix(in srgb, #e74c3c 52%, #000 0%); border-color: color-mix(in srgb, #e74c3c 40%, var(--border, #2a2a2a)); } .btn-confirm-primary { background: color-mix(in srgb, #e74c3c 52%, #000 0%); border-color: color-mix(in srgb, #e74c3c 40%, var(--border, #2a2a2a)); } /* ------------------------------ 16) Responsive rules others ------------------------------ */ @media (min-device-width: 721px) { .state { top: 5px; left: 5px; width: 124px; } } @media (max-device-width: 720px) { .state { top: 5px; left: 5px; width: 110px; } } @media (min-device-width: 721px) { .state .icon { margin: 6px 0 6px 6px; height: 16px; width: 16px; } } @media (max-device-width: 720px) { .state .icon { margin: 4px 0 4px 4px; height: 16px; width: 16px; } } /* Размеры */ @media (max-width: 991px) { .self_video { width: 250px; } .taskModal { width: 45%; right: 10%; } .drawing-controls { top: 20px; left: 20px; right: 20px; border-radius: 8px; } .control-buttons button { padding: 5px; } } @media (max-width: 767px) { .self_video { width: 200px; } .state .icon.connected { display: none; } .state .text { font-size: 12px; } .taskModal { width: 45%; right: 10%; } .screen-share-container { bottom: 180px; } .control-buttons button { height: 33px; } #drawingContainer { padding: 10px; align-items: flex-start; justify-content: flex-start; } } @media (max-width: 480px) { .state { display: none; } .taskModal { right: 1%; bottom: 180px; width: 75%; } .control-buttons button { width: 33px; height: 33px; } .drawing-controls { position: fixed; top: 10px; left: 10px; right: 10px; width: auto; } } /* distribute */ .lists .icon { width: 22px; height: 22px; } .modalPresentation.hidden { display: none; } .modalPresentation { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; } .modalPresentation-content { position: relative; width: 80%; height: 80%; background: #fff; border-radius: 8px; overflow: hidden; } #presentation-frame { width: 100%; height: 100%; border: none; } #close-presentation { position: absolute; top: 8px; right: 12px; background: transparent; border: none; font-size: 24px; cursor: pointer; } #btnEraser.active { background-color: #ff6b6b; color: white; } .admin-approval-waiting { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.7); padding: 30px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); z-index: 1000; color: white; text-align: center; max-width: 300px; } .admin-approval-waiting p { margin-bottom: 15px; font-size: 16px; } .admin-approval-waiting button { background-color: var(--accent); color: white; border: none; padding: 10px 15px; border-radius: 4px; cursor: pointer; font-size: 14px; transition: background-color 0.3s ease; } /* Стили для окна ожидания */ .u_alredy_logged { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.85); padding: 30px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); z-index: 1000; color: white; text-align: center; max-width: 300px; width: 90%; font-size: 16px; line-height: 1.5; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); border: 1px solid var(--accent); animation: fadeIn 0.3s ease-out; } /* Выход */ .exit-button:hover { opacity: 1; background-color: var(--accent-hover); color: black; } .exit-tooltip { position: absolute; right: 50px; background: rgba(0, 0, 0, 0.7); color: white; padding: 5px 10px; border-radius: 4px; font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.3s; pointer-events: none; } .exit-button:hover .exit-tooltip { opacity: 1; } /* Подсказки */ .tooltip { position: absolute; bottom: 0px; left: 50px; background-color: rgba(0, 0, 0, 0.8); color: white; padding: 5px 10px; border-radius: 3px; font-size: 14px; opacity: 0; transition: opacity 0.3s; white-space: nowrap; pointer-events: none; z-index: 2; } .tooltipself { position: absolute; bottom: 45px; right: 10px; background-color: rgba(0, 0, 0, 0.8); color: white; padding: 5px 10px; border-radius: 3px; font-size: 14px; opacity: 0; transition: opacity 0.3s; white-space: nowrap; pointer-events: none; z-index: 2; } /* name input */ .is-me { position: absolute; bottom: 140%; left: 1%; right: 1%; cursor: pointer; padding: 5px; z-index: 10; pointer-events: auto; color: var(--text); } /* infoBig */ .infoBig-button { position: absolute; top: 5px; right: 50px; color: var(--text); background: var(--bg-button); border: 1px solid var(--border); padding: 6px; border-radius: 3px; cursor: pointer; z-index: 10; display: none; } .infoBig-button:hover { background-color: rgba(0, 0, 0, 0.8); } .infoBig-container { position: fixed; z-index: 1000; top: 0; bottom: 0; right: 0; width: 25%; overflow: hidden; pointer-events: none; transform: translate(100%); opacity: 0; transition: transform 0.25s, opacity 0.25s; background: #ffffffec; } .infoBig-content { position: relative; height: 100%; pointer-events: auto; transition: transform 0.25s, opacity 0.25s; } .infoBig-header { position: absolute; z-index: 2; top: 0; left: 0; right: 0; padding: 0 28px; background: linear-gradient(to bottom, #fff, #fff, #ffffffe6, #fff0); } .infoBig-header .infoBig-info { display: flex; justify-content: space-between; align-items: center; height: 80px; } .infoBig-header .infoBig-info .infoBig-close-icon { width: 28px; height: 28px; cursor: pointer; } .infoBig-header .infoBig-list { height: 150px; display: flex; flex-direction: column; justify-content: flex-start; padding: 10px; } .infoBig-header .infoBig-list p { margin-bottom: 5px; color: #243b55bf; font-size: 14px; } .infoBig-header .infoBig-list p a { text-decoration: none; color: #6b93c0bf; font-size: 12px; } .close-button img { width: 24px; height: 24px; cursor: pointer; display: block; transition: transform 0.2s ease, opacity 0.2s ease; color: var(--text); } .close-button img:hover { transform: scale(1.1); opacity: 0.8; } /* info */ .info-button { position: absolute; top: 5px; right: 10px; color: var(--text); background: var(--bg-button); border: 1px solid var(--border); border-radius: 3px; cursor: pointer; padding: 6px; z-index: 10; display: none; } .info-button:hover { background-color: rgba(0, 0, 0, 0.8); } .stats-container { position: absolute; background-color: rgba(0, 0, 0, 0.8); color: white; padding: 10px; border-radius: 4px; z-index: 1000; top: 30px; right: 10px; } .menu-button { position: absolute; top: 5px; right: 5px; background-color: rgba(0, 0, 0, 0.5); color: white; border: none; cursor: pointer; padding: 5px; z-index: 10; pointer-events: auto; } .menu-button:hover { background-color: rgba(0, 0, 0, 0.8); } .kick-menu { position: absolute; top: 30px; right: 5px; background-color: rgba(0, 0, 0, 0.5); border: none; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); padding: 5px; z-index: 11; } .kick-menu button { color: white; background-color: transparent; border: none; padding: 5px 10px; cursor: pointer; } .kick-menu:hover { background-color: rgba(0, 0, 0, 0.8); } /* mute button */ .mute-button { position: absolute; bottom: 10px; right: 60px; color: var(--text); background: var(--bg-button); border: 1px solid var(--border); padding: 5px 10px; cursor: pointer; border-radius: 3px; font-size: 16px; z-index: 2; pointer-events: auto; overflow: hidden; transition: transform .06s ease, filter .15s ease, background .15s ease; } .mute-button:hover { filter: brightness(var(--hover-brightness)); } .mute-button:active { transform: translateY(1px) scale(.98); } .mute-button:hover+.tooltipself { filter: brightness(var(--hover-brightness)); } .mute-background { position: absolute; bottom: 10px; right: 103px; height: 34px; width: 19%; background-color: var(--bg-button); border-radius: 3px; z-index: 0; pointer-events: none; } .volume-value { position: absolute; bottom: calc(10px + var(--vol-height, 34px) + 6px); right: calc(60px + 12px); z-index: 2; display: none; padding: 2px 8px; font-size: 12px; line-height: 16px; color: var(--text); background: var(--bg-button); border: 1px solid var(--border); border-radius: 999px; pointer-events: none; } .volume-slider { position: absolute; bottom: 17px; right: 110px; width: 15%; background-color: rgba(0, 0, 0, 0.5); accent-color: white; transition: opacity 0.3s ease-in-out; pointer-events: auto; z-index: 2; border-radius: 3px; outline: none; padding: 0; } .volume-slider:focus-visible { /* outline: 2px solid var(--vol-focus); */ outline-offset: 2px; } /* fullscreen button */ .fullscreen-button { position: absolute; bottom: 10px; right: 10px; color: var(--text); background: var(--bg-button); border: 1px solid var(--border); padding: 5px 10px; cursor: pointer; border-radius: 3px; z-index: 1; pointer-events: auto; } .fullscreen-button:hover { filter: brightness(var(--hover-brightness)); } .fullscreen-button:active { transform: translateY(1px) scale(.98); } .fullscreen-button:hover+.tooltipself { opacity: 1; } button.highlighted { border: 2px solid yellow; background-color: rgb(138, 138, 0); } .media-selection { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; } .media-selection label { font-size: 12px; color: white; margin-bottom: 2px; } .media-selection select { padding: 5px; font-size: 12px; width: 100%; box-sizing: border-box; } /* Камеры */ .highlight { border: 2px solid yellow !important; transition: all 0.3s ease; } .video-label { position: absolute; top: 5px; left: 5px; background: var(--bg-button); color: var(--text); padding: 2px 5px; border-radius: 12px; font-size: 14px; } button, .btn, [role="button"], .control-buttons button, .share-menu button, .more-menu button, .chat-actions button, .task-toolbar button, .sidebar-close { -webkit-transition: background-color .15s linear, border-color .15s linear, color .15s linear, box-shadow .15s linear; transition: background-color .15s linear, border-color .15s linear, color .15s linear, box-shadow .15s linear; } #guestNameInput { right: 10px; min-height: 10px; width: 78%; margin-left: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--input-border, rgba(255, 255, 255, .12)); background: var(--input-bg, rgba(255, 255, 255, .04)); color: var(--text, #fff); font-size: 14px; line-height: 1.45; } .preview-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; } .preview-modal.hidden { display: none; } .preview-container { position: relative; width: 100%; max-width: 1000px; background: var(--panel); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); overflow: hidden; } .preview-close { position: absolute; top: 16px; right: 16px; z-index: 10; width: 40px; height: 40px; border: none; background: rgba(0, 0, 0, 0.5); color: var(--text); border-radius: 50%; cursor: pointer; font-size: 20px; display: flex; align-items: center; justify-content: center; transition: background 0.2s; } .preview-close:hover { background: rgba(0, 0, 0, 0.7); } .preview-content { display: flex; flex-direction: column; gap: 20px; padding: 20px; } .preview-video-section { position: relative; width: 100%; aspect-ratio: 4 / 3; background: #000; border-radius: var(--radius-md); overflow: hidden; } .preview-video { width: 100%; height: 100%; object-fit: cover; } .preview-user-info { position: absolute; bottom: 20px; left: 20px; right: 20px; color: var(--text); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8); } .preview-name { font-size: 28px; font-weight: 600; margin: 0 0 4px 0; } .preview-email { font-size: 14px; color: rgba(255, 255, 255, 0.8); } .preview-controls-section { display: flex; flex-direction: column; gap: 16px; } .preview-device-controls { display: flex; justify-content: center; gap: 12px; } .preview-control-btn { width: 56px; height: 56px; border: none; background: var(--accent); color: var(--text); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .preview-control-btn:hover { background: var(--accent-hover); } .preview-control-btn.muted { background: var(--danger); } .preview-control-btn .icon { font-size: 24px; } .preview-settings { display: flex; justify-content: center; } .preview-settings-btn { width: 40px; height: 40px; border: none; background: transparent; color: var(--text); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; } .preview-settings-btn:hover { background: var(--accent); } .preview-settings-btn.active { background: var(--accent); } .preview-join-btn { width: 100%; max-width: 400px; margin: 0 auto; padding: 16px 32px; border: none; background: #25d366; color: #fff; font-size: 16px; font-weight: 600; border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s; } .preview-join-btn:hover { background: #1fb855; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3); } .preview-join-btn:active { transform: translateY(0); } .preview-settings-panel { background: var(--bg); border-radius: var(--radius-md); padding: 20px; display: flex; flex-direction: column; gap: 16px; animation: slideDown 0.2s ease-out; } .preview-settings-panel.hidden { display: none; } .preview-setting-group { display: flex; flex-direction: column; gap: 0px; } .preview-setting-group label { font-size: 14px; color: var(--muted); font-weight: 500; } .preview-select, .preview-input { width: 100%; padding: 12px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 14px; outline: none; transition: border-color 0.2s; } .preview-select:focus, .preview-input:focus { border-color: #25d366; } .preview-select option { background: var(--panel); color: var(--text); } .preview-test-group { padding-top: 16px; } .preview-test-btn { width: 100%; padding: 12px 16px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 14px; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.2s; } .preview-test-btn:hover { background: var(--accent); border-color: var(--accent); } .preview-test-btn.active { background: #e74c3c; border-color: #e74c3c; color: #fff; } .preview-test-btn .icon { width: 18px; height: 18px; } .preview-test-status { margin-top: 8px; font-size: 12px; color: var(--muted); text-align: center; min-height: 18px; } .preview-test-status.success { color: #25d366; } .preview-test-status.error { color: #e74c3c; } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 768px) { .preview-video-section { aspect-ratio: 16 / 9; } .preview-container { max-width: 100%; border-radius: 0; } .preview-name { font-size: 22px; } .preview-email { font-size: 12px; } .preview-control-btn { width: 48px; height: 48px; } .preview-join-btn { font-size: 14px; padding: 14px 28px; } .preview-user-info { bottom: 12px; left: 12px; right: 12px; } } @media (max-width: 480px) { .preview-video-section { aspect-ratio: 16 / 9; } .preview-content { padding: 12px; gap: 12px; } .preview-device-controls { gap: 8px; } .preview-settings-panel { padding: 16px; gap: 0px; } .preview-name { font-size: 18px; } .preview-close { width: 36px; height: 36px; top: 12px; right: 12px; } .preview-setting-group { gap: 0px; } } @media (min-width: 769px) { .preview-content { flex-direction: row; gap: 30px; } .preview-video-section { flex: 1; } .preview-controls-section { width: 300px; justify-content: space-between; } .preview-device-controls { justify-content: flex-start; } .preview-join-btn { margin-top: auto; } }