/* Existing layout and state geometry; extracted from the actual application. Visual tokens and components are maintained separately. */
@layer layout{
*{
box-sizing:border-box
}
html,body{
margin:0;
min-height:100%
}
body{
min-height:100vh;
overflow-x:hidden
}
button{
border-width:0
}
.screen{
min-height:100vh;
padding:max(18px,var(--safe-t)) 18px calc(22px + var(--safe-b))
}
.hidden{
display:none!important
}
.center{
max-width:520px;
margin:0 auto
}
.brand{
padding:56px 8px 30px;
text-align:center
}
.brandmark{
width:74px;
height:74px;
margin:auto;
display:grid;
place-items:center
}
.brand h1{
margin:18px 0 5px
}
.card{
border-width:1px;
border-style:solid;
overflow:hidden
}
.pad{
padding:18px
}
.seg{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:3px;
padding:3px
}
.seg button{
padding:9px 6px
}
.pane{
padding:20px
}
.field{
margin:0 0 13px
}
.field label{
display:block;
margin:0 0 7px 4px
}
.input{
width:100%;
border-width:1px;
border-style:solid;
padding:14px 15px
}
.primary{
width:100%;
padding:14px 16px
}
.secondary{
padding:13px 15px
}
.ghost{
padding:10px
}
.error{
min-height:18px;
margin-top:10px
}
.lock{
display:flex;
align-items:center;
justify-content:center;
text-align:center
}
.lockbox{
width:min(390px,100%)
}
.lockicon{
width:82px;
height:82px;
margin:0 auto 18px;
display:grid;
place-items:center
}
.pinDots{
height:34px;
display:flex;
justify-content:center;
gap:14px;
margin:20px 0
}
.dot{
width:12px;
height:12px;
border-width:1.5px;
border-style:solid
}
.keypad{
display:grid;
grid-template-columns:repeat(3,76px);
gap:14px 22px;
justify-content:center;
margin:8px auto 20px
}
.key{
width:76px;
height:76px
}
.bioBtn{
display:flex;
gap:10px;
align-items:center;
justify-content:center;
margin:auto;
padding:12px 18px
}
.locklinks{
display:flex;
justify-content:center;
gap:14px;
margin-top:4px
}
.shell{
min-height:100vh;
padding-top:var(--safe-t);
padding-bottom:calc(82px + var(--safe-b))
}
.topbar{
height:58px;
display:flex;
align-items:center;
gap:12px;
padding:0 18px;
position:sticky;
top:0;
z-index:20;
border-bottom-width:1px;
border-bottom-style:solid
}
.statusDot{
width:8px;
height:8px
}
.topSpacer{
flex:1
}
.iconBtn{
width:36px;
height:36px;
display:grid;
place-items:center
}
.content{
max-width:780px;
margin:auto;
padding:18px
}
.sectionTitle{
margin:12px 0 6px
}
.sectionSub{
margin:0 0 22px
}
.nav{
position:fixed;
z-index:30;
bottom:0;
left:0;
right:0;
display:grid;
grid-template-columns:repeat(3,1fr);
padding:7px 8px calc(7px + var(--safe-b));
border-top-width:1px;
border-top-style:solid
}
.nav button{
padding:6px 2px 3px
}
.nav .nicon{
display:block;
margin-bottom:2px
}
.list{
display:flex;
flex-direction:column;
gap:10px
}
.rowCard{
border-width:1px;
border-style:solid;
padding:15px 16px;
text-align:left
}
.rowTitle{
margin-bottom:4px
}
.rowPreview{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis
}
.rowMeta{
margin-top:8px
}
.heroAction{
padding:20px;
border-width:1px;
border-style:solid;
margin-bottom:18px
}
.heroAction h3{
margin:0 0 6px
}
.actions{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-top:14px
}
.actions .secondary,.actions .primary{
width:auto
}
.workHero{
border-left-width:3px;
border-left-style:solid
}
.settingsGroup{
overflow:hidden;
margin-bottom:18px
}
.settingRow{
min-height:54px;
padding:12px 15px;
display:flex;
align-items:center;
gap:12px;
border-bottom-width:1px;
border-bottom-style:solid
}
.settingRow:last-child{
border-bottom-width:0
}
.settingRow .grow{
flex:1
}
.switch{
width:50px;
height:30px;
padding:2px
}
.switch i{
display:block;
width:26px;
height:26px
}
.switch.on i{
transform:translateX(20px)
}
.chatScreen{
display:flex;
flex-direction:column;
height:calc(100vh - var(--safe-t));
padding-bottom:0
}
.chatHead{
height:58px;
display:flex;
align-items:center;
padding:0 12px;
border-bottom-width:1px;
border-bottom-style:solid
}
.back{
padding:10px 8px
}
.chatHeadTitle{
flex:1;
text-align:center;
margin-right:54px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis
}
.messages{
flex:1;
overflow:auto;
padding:18px max(14px,calc((100vw - 760px)/2)) 20px;
display:flex;
flex-direction:column;
gap:8px
}
.bubble{
max-width:min(78%,620px);
padding:10px 14px;
white-space:pre-wrap;
word-break:break-word
}
.bubble.user{
align-self:flex-end
}
.bubble.assistant{
align-self:flex-start
}
.bubbleTools{
display:flex;
gap:6px;
margin-top:8px
}
.mini{
padding:6px 8px
}
.composer{
display:flex;
align-items:flex-end;
gap:8px;
padding:9px 12px calc(10px + var(--safe-b));
border-top-width:1px;
border-top-style:solid
}
.composer textarea{
flex:1;
resize:none;
max-height:120px;
min-height:42px;
border-width:0;
padding:11px 14px
}
.round{
width:42px;
height:42px;
display:grid;
place-items:center
}
.round:disabled{
opacity:.35
}
.thinking{
padding:5px 4px
}
.contactSearch{
margin:4px 0 16px
}
.contactLine{
display:flex;
align-items:center;
gap:12px
}
.contactAvatar{
width:44px;
height:44px;
display:grid;
place-items:center;
flex:none
}
.contactBody{
min-width:0;
flex:1
}
.contactBody b,.contactBody span{
display:block;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}
.contactBody span{
margin-top:3px
}
.unread{
min-width:22px;
height:22px;
padding:2px 6px;
display:grid;
place-items:center
}
.secureNote{
text-align:center;
padding:8px 14px
}
.directTime{
opacity:.58;
margin-top:4px;
text-align:right
}
.overlay{
position:fixed;
z-index:80;
inset:0;
display:flex;
align-items:flex-end;
justify-content:center
}
.sheet{
width:min(560px,100%);
padding:10px 18px calc(22px + var(--safe-b))
}
.grab{
width:38px;
height:5px;
margin:0 auto 15px
}
.sheet h2{
margin:5px 0 6px
}
.choice{
width:100%;
display:flex;
align-items:center;
gap:13px;
text-align:left;
padding:14px;
margin:9px 0
}
.choiceIcon{
width:38px;
height:38px;
display:grid;
place-items:center
}
.choiceText{
flex:1
}
.choiceText b{
display:block
}
.choiceText span{
display:block;
margin-top:2px
}
.sep{
height:1px;
margin:15px 0
}
@media(min-width:760px){
.nav{
width:460px;
left:50%;
right:auto;
transform:translateX(-50%);
bottom:14px;
border-width:1px;
border-style:solid;
padding:7px
}
.shell{
padding-bottom:110px
}
.sheet{
margin-bottom:18px
}
.brand{
padding-top:78px
}
}
.nav{
grid-template-columns:repeat(2,1fr)
}
.menuButton{
width:38px;
height:38px;
padding:2px;
display:grid;
place-items:center
}
.menuButton:active{
transform:scale(.92)
}
.menuButton[aria-expanded="true"]{
transform:rotate(-6deg)
}
.menuButton[aria-expanded="true"] .topAppIcon{
transform:scale(.82) rotate(12deg)
}
.drawerLayer{
position:fixed;
z-index:70;
inset:0;
visibility:hidden;
pointer-events:none
}
.drawerLayer.open{
visibility:visible;
pointer-events:auto
}
.drawerBackdrop{
position:absolute;
inset:0
}
.sideDrawer{
position:absolute;
inset:0 auto 0 0;
width:min(84vw,340px);
padding:calc(18px + var(--safe-t)) max(12px,var(--safe-r)) calc(18px + var(--safe-b)) max(12px,var(--safe-l));
transform:translateX(-105%);
display:flex;
flex-direction:column
}
.drawerLayer.open .sideDrawer{
transform:translateX(0)
}
.drawerHead{
display:flex;
align-items:center;
gap:12px;
padding:7px 10px 22px
}
.drawerHead img{
width:48px;
height:48px;
object-fit:cover
}
.drawerIdentity{
min-width:0
}
.drawerIdentity b,.drawerIdentity span{
display:block;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}
.drawerIdentity span{
margin-top:3px
}
.drawerNav{
display:flex;
flex-direction:column;
gap:4px
}
.drawerNav button{
width:100%;
min-height:52px;
padding:10px 14px;
display:flex;
align-items:center;
gap:16px;
text-align:left
}
.drawerIcon{
width:26px;
text-align:center
}
body.drawerOpen{
overflow:hidden;
touch-action:none
}
@media(max-width:420px){
.content{
padding-top:14px
}
.topbar{
gap:9px
}
.sideDrawer{
width:min(88vw,330px)
}
}
@supports(padding:max(0px)){
.topbar{
padding-left:max(18px,var(--safe-l));
padding-right:max(18px,var(--safe-r))
}
.content{
padding-left:max(18px,var(--safe-l));
padding-right:max(18px,var(--safe-r))
}
.nav{
padding-left:max(8px,var(--safe-l));
padding-right:max(8px,var(--safe-r))
}
}
#authScreen{
padding:0 0 calc(22px + var(--safe-b));
overflow:hidden
}
.authHero{
position:relative;
width:100%;
height:clamp(210px,33vw,390px);
isolation:isolate
}
.authHero:after{
content:"";
position:absolute;
inset:0;
pointer-events:none
}
.authTerminal{
position:absolute;
z-index:2;
left:50%;
bottom:32px;
transform:translateX(-50%);
width:min(92vw,760px);
text-align:center
}
.authCursor{
display:inline-block
}
.authBody{
position:relative;
z-index:3;
padding:0 18px;
margin-top:-22px
}
.brand.compact{
padding:0 8px 14px
}
.lockicon{
overflow:hidden
}
.lockicon img{
width:100%;
height:100%;
object-fit:cover
}
.topAppIcon{
width:32px;
height:32px;
object-fit:cover
}
.iconChoiceGrid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
margin:14px 0
}
.iconChoice{
border-width:1px;
border-style:solid;
padding:12px;
text-align:left
}
.iconChoice img{
width:100%;
aspect-ratio:1;
object-fit:cover;
display:block;
margin-bottom:10px
}
.iconChoice b{
display:block
}
.iconChoice span{
display:block;
margin-top:3px
}
@media(max-width:560px){
.authHero{
height:220px
}
.authTerminal{
bottom:18px;
padding:0 18px
}
.authBody{
margin-top:-10px
}
}
.directAttachmentPreview{
margin:8px 12px 0;
padding:8px 12px
}
.directAttachmentPreview button{
float:right
}
.attachmentCard{
display:flex;
flex-direction:column;
gap:7px;
margin-top:8px
}
.attachmentCard img,.attachmentCard video{
max-width:min(70vw,360px);
max-height:260px;
object-fit:contain
}
.attachmentCard audio{
max-width:min(70vw,360px)
}
.attachmentDownload{
display:inline-flex;
align-items:center;
gap:7px;
padding:8px 11px
}
.content{
max-width:1040px
}
.card,.settingsGroup,.rowCard,.heroAction{
border-width:1px;
border-style:solid
}
.secondary,.iconBtn{
border-width:1px;
border-style:solid
}
.masterBadge{
display:none;
align-items:center;
gap:8px;
border-width:1px;
border-style:solid;
padding:7px 11px
}
.masterBadge.show{
display:flex
}
.masterIcon{
width:30px;
height:30px;
object-fit:cover;
border-width:1px;
border-style:solid
}
.authHero{
width:100%;
height:auto;
min-height:0;
aspect-ratio:3/1;
margin:0;
position:relative
}
.authHero:after{
content:'';
position:absolute;
inset:0
}
.authBody{
margin-top:0
}
.terminalLine{
min-height:22px;
text-align:center;
margin-top:8px
}
.iconPicker{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
margin-top:12px
}
.iconChoice{
padding:7px;
border-width:1px;
border-style:solid;
position:relative
}
.iconChoice img{
display:block;
width:100%;
aspect-ratio:1;
object-fit:cover
}
.iconChoice span{
display:block;
text-align:center;
padding:7px 2px 2px
}
.adminOnly{
display:none
}
.adminOnly.show{
display:block
}
.themeChooser{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px
}
.themeBtn{
padding:14px;
border-width:1px;
border-style:solid
}
.themeSwatch{
display:block;
height:36px;
margin-bottom:8px
}
@media(min-width:900px){
.shell{
padding-left:235px
}
.nav{
position:fixed;
left:0;
top:0;
bottom:0;
transform:none;
width:235px;
border-width:0;
border-right-width:1px;
border-right-style:solid;
display:flex;
flex-direction:column;
padding:130px 12px 20px;
gap:8px
}
.nav button{
text-align:left;
padding:12px 16px
}
.nav .nicon{
display:inline-block;
width:32px
}
.content{
padding:28px 38px
}
}
@media(max-width:520px){
.authHero{
min-height:150px
}
.iconPicker{
grid-template-columns:repeat(2,minmax(0,1fr))
}
.masterBadge{
padding:5px 7px
}
.masterBadge span{
display:none
}
.themeChooser{
grid-template-columns:1fr 1fr
}
}
.adminToolbar{
display:flex;
flex-wrap:wrap;
gap:10px;
align-items:center;
margin:14px 0 18px
}
.adminTabs{
display:flex;
gap:8px;
overflow:auto;
padding-bottom:4px
}
.adminTab{
padding:10px 14px;
border-width:1px;
border-style:solid;
white-space:nowrap
}
.adminGrid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px
}
.adminStat{
padding:16px;
border-width:1px;
border-style:solid
}
.adminStat strong{
display:block;
margin-top:5px
}
.adminList{
display:grid;
gap:10px
}
.adminUser{
display:grid;
grid-template-columns:minmax(150px,1fr) auto;
gap:12px;
padding:14px;
border-width:1px;
border-style:solid
}
.adminUserMeta{
display:flex;
gap:8px;
flex-wrap:wrap;
margin-top:6px
}
.pill{
padding:3px 8px;
border-width:1px;
border-style:solid
}
.adminUserActions{
display:flex;
gap:7px;
align-items:center;
flex-wrap:wrap;
justify-content:flex-end
}
.adminUserActions select{
min-width:120px
}
.adminInvite{
display:grid;
grid-template-columns:1fr auto;
gap:12px;
align-items:center;
padding:13px;
border-width:1px;
border-style:solid
}
.auditRow{
padding:11px 13px;
border-bottom-width:1px;
border-bottom-style:solid
}
.adminEmpty{
padding:25px;
text-align:center
}
.adminForm{
display:grid;
grid-template-columns:1fr 1fr auto;
gap:10px;
align-items:end;
margin:14px 0
}
.adminForm .field{
margin:0
}
.adminPanelTitle{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px
}
.adminPanelTitle .badge{
border-width:1px;
border-style:solid;
padding:6px 9px
}
@media(max-width:760px){
.adminGrid{
grid-template-columns:1fr
}
.adminUser{
grid-template-columns:1fr
}
.adminUserActions{
justify-content:flex-start
}
.adminForm{
grid-template-columns:1fr
}
.adminInvite{
grid-template-columns:1fr
}
.adminToolbar{
align-items:stretch
}
.adminTabs{
width:100%
}
}
.nav.hasAdmin{
grid-template-columns:repeat(4,1fr)
}
html[data-theme="light"] .composer textarea{
border-width:1px;
border-style:solid
}
@media(min-width:900px){
.nav.hasAdmin{
display:flex
}
}
.composer .round svg{
width:21px;
height:21px
}
.composer #micBtn{
order:3
}
.composer #sendBtn{
order:4
}
.composer #messageInput{
order:2
}
.composer #voiceCancelBtn{
order:1
}
.composer #voiceCancelBtn.hidden{
display:none!important
}
.thoughtStream{
align-self:flex-start;
max-width:min(82%,640px);
padding:5px 4px;
opacity:.94
}
.thoughtLine+.thoughtLine{
margin-top:5px
}
.thoughtStream::after{
content:'  ▍'
}
.thoughtHistory{
align-self:flex-start;
max-width:min(82%,640px)
}
.thoughtHistory summary{
cursor:pointer;
list-style:none;
padding:5px 4px
}
.thoughtHistory summary::-webkit-details-marker{
display:none
}
.thoughtHistory summary::before{
content:'›';
display:inline-block;
margin-right:7px
}
.thoughtHistory[open] summary::before{
transform:rotate(90deg)
}
.thoughtHistory .thoughtBody{
padding:2px 4px 7px 16px
}
.liveVoiceBtn{
position:fixed;
right:18px;
bottom:calc(86px + var(--safe-b));
z-index:55;
width:68px;
height:68px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:2px;
border-width:1px;
border-style:solid
}
.liveVoiceBtn svg{
width:31px;
height:31px
}
.liveVoiceOverlay{
position:fixed;
z-index:90;
inset:0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:24px
}
.liveVoiceClose{
position:absolute;
right:22px;
top:calc(18px + var(--safe-t));
width:46px;
height:46px;
border-width:1px;
border-style:solid
}
.liveVoiceCore{
position:relative;
width:154px;
height:154px;
display:grid;
place-items:center;
border-width:1px;
border-style:solid
}
.liveVoiceCore>svg{
width:72px;
height:72px
}
.liveVoiceRings,.liveVoiceRings i{
position:absolute;
inset:0
}
.liveVoiceRings i{
border-width:1px;
border-style:solid
}
.liveVoiceStatus{
margin-top:34px
}
.liveVoiceHint{
margin-top:9px;
max-width:420px;
text-align:center
}
@media(min-width:900px){
.liveVoiceBtn{
right:28px;
bottom:28px
}
}
.musicHero{
display:flex;
align-items:center;
gap:14px;
padding:18px;
margin-bottom:18px;
border-width:1px;
border-style:solid
}
.musicHero>div:nth-child(2){
flex:1
}
.musicHero h3{
margin:0 0 4px
}
.musicHero .primary{
width:auto
}
.musicNote{
width:48px;
height:48px;
display:grid;
place-items:center
}
.musicList{
display:flex;
flex-direction:column;
gap:9px
}
.musicTrack{
display:flex;
align-items:center;
gap:13px;
padding:12px 13px;
border-width:1px;
border-style:solid
}
.musicPlay{
width:42px;
height:42px;
flex:0 0 42px
}
.musicInfo{
min-width:0;
flex:1;
display:flex;
flex-direction:column;
gap:4px
}
.musicInfo b,.musicInfo span{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}
.musicDelete{
width:34px;
height:34px
}
.musicEmpty{
text-align:center;
padding:42px 18px
}
@media(max-width:520px){
.musicHero{
align-items:flex-start;
flex-wrap:wrap
}
.musicHero .primary{
width:100%
}
}
.musicHeroActions{
display:flex;
gap:9px;
flex-wrap:wrap;
justify-content:flex-end
}
.musicHeroActions .primary,.musicHeroActions .secondary{
width:auto;
padding:11px 14px
}
.musicSection{
margin:24px 0
}
.musicSectionHead{
display:flex;
align-items:center;
justify-content:space-between;
margin:0 2px 11px
}
.musicSectionHead h2{
margin:0
}
.musicTrack{
cursor:pointer
}
.musicTrack:active{
transform:scale(.992)
}
.playlistGrid{
display:grid;
gap:9px
}
.musicPlaylist{
display:grid;
grid-template-columns:44px minmax(0,1fr) auto;
align-items:center;
gap:12px;
padding:12px 13px;
border-width:1px;
border-style:solid
}
.musicPlaylistIcon{
width:44px;
height:44px;
display:grid;
place-items:center
}
.musicPlaylistInfo{
min-width:0
}
.musicPlaylistInfo b,.musicPlaylistInfo span{
display:block;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}
.musicPlaylistInfo span{
margin-top:4px
}
.musicPlaylistActions{
display:flex;
gap:5px
}
.musicPlaylistActions button{
width:34px;
height:34px
}
.musicPlaylistActions button:disabled{
opacity:.3
}
.musicEmpty.compact{
padding:24px 16px
}
.playlistTrackPicker{
display:grid;
gap:7px;
max-height:min(48vh,430px);
overflow:auto;
margin:4px 0 16px;
padding:2px
}
.playlistTrackChoice{
display:flex;
align-items:center;
gap:11px;
padding:11px;
border-width:1px;
border-style:solid;
cursor:pointer
}
.playlistTrackChoice input{
width:20px;
height:20px;
flex:none
}
.playlistTrackChoice span{
min-width:0
}
.playlistTrackChoice b,.playlistTrackChoice small{
display:block;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}
.playlistTrackChoice small{
margin-top:3px
}
.musicPlayerDock{
position:fixed;
z-index:75;
left:50%;
bottom:calc(76px + var(--safe-b));
width:min(720px,calc(100vw - 20px));
transform:translateX(-50%);
padding:13px 15px 12px;
border-width:1px;
border-style:solid
}
.musicPlayerTop{
display:flex;
align-items:center;
gap:11px
}
.musicPlayerArtwork{
width:43px;
height:43px;
flex:none;
display:grid;
place-items:center
}
.musicPlayerMeta{
min-width:0;
flex:1
}
.musicPlayerMeta b,.musicPlayerMeta span,.musicPlayerMeta small{
display:block;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}
.musicPlayerMeta span{
margin-top:2px
}
.musicPlayerMeta small{
margin-top:2px
}
.musicTimeline{
margin:8px 1px 3px
}
.musicTimeline input,.musicVolume input{
display:block;
width:100%;
height:18px;
margin:0
}
.musicTimeline>div{
display:flex;
justify-content:space-between;
margin-top:-2px
}
.musicControls{
display:grid;
grid-template-columns:38px 42px 50px 42px minmax(72px,1fr);
align-items:center;
justify-content:center;
gap:7px
}
.musicControl{
width:38px;
height:38px;
display:grid;
place-items:center
}
.musicControl.main{
width:48px;
height:48px
}
.musicVolume{
display:grid;
grid-template-columns:16px 1fr;
align-items:center;
gap:4px
}
.musicVolume input{
height:22px
}
.musicPlayerDock.playerCollapsed{
display:none
}
.musicFloat{
position:fixed;
z-index:76;
right:18px;
bottom:calc(88px + var(--safe-b));
width:60px;
height:60px;
padding:0;
display:grid;
place-items:center;
touch-action:none;
user-select:none;
-webkit-user-select:none;
border-width:1px;
border-style:solid
}
.musicFloat span{
pointer-events:none
}
.musicFloat.dragging{
transform:scale(1.08)
}
.musicFloat.hidden{
display:none
}
@media(min-width:760px){
.musicPlayerDock{
bottom:94px
}
}
@media(min-width:900px){
.musicPlayerDock{
left:calc(50% + 117px);
width:min(720px,calc(100vw - 275px))
}
}
@media(max-width:620px){
.musicHeroActions{
width:100%;
display:grid;
grid-template-columns:1fr 1fr
}
.musicHeroActions .primary,.musicHeroActions .secondary{
width:100%;
padding:11px 8px
}
.musicPlaylist{
grid-template-columns:40px minmax(0,1fr)
}
.musicPlaylistIcon{
width:40px;
height:40px
}
.musicPlaylistActions{
grid-column:1/-1;
justify-content:flex-end
}
.musicPlaylistActions button{
width:40px
}
.musicPlayerDock{
padding:10px 12px 9px
}
.musicPlayerArtwork{
width:39px;
height:39px
}
.musicControls{
grid-template-columns:36px 38px 46px 38px minmax(58px,1fr);
gap:4px
}
.musicControl{
width:35px;
height:35px
}
.musicControl.main{
width:44px;
height:44px
}
.musicVolume{
min-width:0
}
}
.bubble{
position:relative
}
.bubbleTools{
opacity:.72
}
.bubble:hover .bubbleTools,.bubble:focus-within .bubbleTools{
opacity:1
}
.chatActivity{
min-height:27px;
padding:4px max(16px,calc((100vw - 760px)/2)) 7px
}
.chatActivity.active::after,.directTyping.on::after{
content:'…';
display:inline-block;
width:1.4em;
overflow:hidden;
vertical-align:bottom
}
.chatActivity.recording::before{
content:'●';
display:inline-block;
margin-right:7px
}
.composer #micBtn.recording{
position:relative;
overflow:hidden
}
.composer #micBtn.recording::after{
content:'';
position:absolute;
inset:-45%
}
.directTyping{
height:15px;
text-align:center;
margin-top:1px
}
.chatHead>div:has(#directTitle){
flex:1;
min-width:0;
margin-right:54px
}
.chatHead>div:has(#directTitle) .chatHeadTitle{
margin-right:0
}
.directAvatar{
width:38px;
height:38px;
flex:0 0 38px;
padding:0;
overflow:hidden;
display:grid;
place-items:center
}
.directAvatar img{
width:100%;
height:100%;
object-fit:cover
}
.contactProfileView{
text-align:center;
padding:12px 0 18px
}
.contactProfilePhoto{
width:116px;
height:116px;
object-fit:cover;
margin:0 auto 14px
}
.contactProfileFallback{
display:grid;
place-items:center
}
.contactProfileView h2{
margin-bottom:4px
}
.directTime{
display:flex;
align-items:center;
justify-content:flex-end;
gap:5px
}
.notifyBanner{
position:fixed;
z-index:120;
top:calc(10px + var(--safe-t));
left:50%;
width:min(94vw,520px);
transform:translate(-50%,-130%);
opacity:0;
display:grid;
grid-template-columns:1fr auto;
gap:4px 12px;
padding:13px 14px;
border-width:1px;
border-style:solid
}
.notifyBanner.show{
transform:translate(-50%,0);
opacity:1
}
.notifyBanner span{
grid-column:1
}
.notifyBanner button{
grid-column:2;
grid-row:1/3;
align-self:center;
padding:8px 11px
}
.notifyBannerClose{
position:absolute;
right:-7px;
top:-7px;
width:22px;
height:22px;
padding:0
}
.toast{
position:fixed;
z-index:130;
left:50%;
bottom:calc(92px + var(--safe-b));
transform:translate(-50%,16px);
opacity:0;
padding:9px 13px
}
.toast.show{
transform:translate(-50%,0);
opacity:1
}
.profileHero{
display:flex;
align-items:center;
gap:16px;
margin:8px 0 24px;
padding:17px;
border-width:1px;
border-style:solid
}
.profileHero h2{
margin:0 0 4px
}
.profileAvatar{
position:relative;
width:76px;
height:76px;
flex:none;
padding:0;
overflow:hidden;
display:grid;
place-items:center
}
.profileAvatar img{
width:100%;
height:100%;
object-fit:cover
}
.profileAvatar i{
position:absolute;
inset:auto 0 0;
padding:4px 2px
}
.profileForm{
padding:15px
}
.profileForm .field:last-child{
margin-bottom:0
}
.profileForm .field>span{
display:block;
margin:0 0 7px 3px
}
.profileForm textarea{
resize:vertical;
min-height:88px
}
.profileForm small{
display:block;
margin:6px 3px 0
}
.profileContacts{
display:grid;
gap:9px
}
.profileContact{
display:grid;
grid-template-columns:minmax(110px,.55fr) minmax(150px,1fr) 38px;
gap:8px
}
.profileContact .input{
padding:11px 12px
}
.profileAdd{
margin:10px 0 4px
}
.profileSave{
margin:8px 0 26px
}
.profileLink{
width:100%;
text-align:left
}
.profileSectionIcon{
width:30px;
text-align:center
}
.contactAvatar img{
width:100%;
height:100%;
object-fit:cover
}
@media(max-width:560px){
.profileContact{
grid-template-columns:1fr 42px
}
.profileContact .contactValue{
grid-column:1
}
.profileContact .removeContact{
grid-column:2;
grid-row:1/3;
align-self:center
}
}
.topAppIcon.profileChromeAvatar,.drawerHead img.profileChromeAvatar{
object-fit:cover
}
.avatarCropViewport{
position:relative;
width:min(78vw,340px);
aspect-ratio:1;
margin:16px auto;
overflow:hidden;
touch-action:none;
user-select:none
}
.avatarCropViewport>img{
position:absolute;
max-width:none;
max-height:none;
pointer-events:none;
will-change:left,top,width,height
}
.avatarCropFrame{
position:absolute;
inset:0;
border-width:2px;
border-style:solid;
pointer-events:none
}
.avatarCropFrame:before,.avatarCropFrame:after{
content:'';
position:absolute
}
.avatarCropFrame:before{
left:33.333%;
right:33.333%;
top:0;
bottom:0;
border-left-width:1px;
border-left-style:solid;
border-right-width:1px;
border-right-style:solid
}
.avatarCropFrame:after{
top:33.333%;
bottom:33.333%;
left:0;
right:0;
border-top-width:1px;
border-top-style:solid;
border-bottom-width:1px;
border-bottom-style:solid
}
.avatarZoom{
display:grid;
grid-template-columns:auto 1fr;
align-items:center;
gap:12px;
margin:5px 0 12px
}
.avatarZoom input{
width:100%
}
#avatarCropInfo{
text-align:center;
margin:0 0 13px
}
.uploadProgress{
display:flex;
align-items:center;
gap:9px;
margin-top:11px;
max-width:330px
}
.uploadProgressTrack{
height:7px;
flex:1;
overflow:hidden
}
.uploadProgressTrack i{
display:block;
width:0;
height:100%
}
.uploadProgress>b{
min-width:35px
}
.uploadStatus{
min-height:17px;
margin-top:5px
}
.avatarFullscreen{
position:fixed;
z-index:160;
inset:0;
display:flex;
align-items:center;
justify-content:center;
padding:max(20px,var(--safe-t)) max(16px,var(--safe-r)) max(80px,var(--safe-b))
}
.avatarFullscreen.hidden{
display:none
}
.avatarFullscreen>img{
display:block;
max-width:100%;
max-height:100%;
width:auto;
height:auto;
object-fit:contain
}
.avatarFullscreenClose{
position:absolute;
z-index:2;
top:max(15px,var(--safe-t));
right:max(15px,var(--safe-r));
width:44px;
height:44px
}
.avatarFullscreenChange{
position:absolute;
z-index:2;
bottom:max(22px,var(--safe-b));
left:50%;
transform:translateX(-50%);
padding:12px 18px;
white-space:nowrap
}
#chatScreen,#directChatScreen{
position:relative;
overflow:hidden;
isolation:isolate
}
#chatScreen::before,#directChatScreen::before{
content:'';
position:absolute;
z-index:-1;
inset:0;
pointer-events:none
}
#chatScreen .chatHead,#directChatScreen .chatHead{
height:64px;
flex:0 0 64px;
border-bottom-width:1px;
border-bottom-style:solid
}
#chatScreen .messages,#directChatScreen .messages{
gap:17px;
padding-top:16px;
padding-bottom:24px;
scrollbar-color:#764aff44 transparent
}
#chatScreen .bubble,#directChatScreen .bubble{
position:relative;
isolation:isolate;
max-width:min(78%,620px);
padding:14px 18px 12px;
border-width:1px;
border-style:solid;
overflow:hidden
}
#chatScreen .bubble::before,#directChatScreen .bubble::before{
content:'';
position:absolute;
z-index:-1;
inset:0;
pointer-events:none
}
#chatScreen .bubble.user,#directChatScreen .bubble.user{
align-self:flex-end
}
#chatScreen .bubble.assistant,#directChatScreen .bubble.assistant{
align-self:flex-start
}
#chatScreen .bubbleTools,#directChatScreen .bubbleTools{
margin-top:9px;
opacity:.68
}
#chatScreen .mini,#directChatScreen .mini{
padding:5px 8px;
border-width:1px;
border-style:solid
}
#chatScreen .directTime,#directChatScreen .directTime{
margin-top:7px;
opacity:.72
}
#chatScreen .secureNote,#directChatScreen .secureNote{
border-bottom-width:1px;
border-bottom-style:solid
}
#chatScreen .chatActivity,#directChatScreen .chatActivity{
padding-top:7px
}
#chatScreen .composer,#directChatScreen .composer{
padding:10px 14px calc(11px + var(--safe-b));
border-top-width:1px;
border-top-style:solid
}
#chatScreen .composer textarea,#directChatScreen .composer textarea{
min-height:46px;
padding:12px 17px;
border-width:1px;
border-style:solid
}
#chatScreen .round,#directChatScreen .round{
border-width:1px;
border-style:solid
}
#directChatScreen .directAvatar{
border-width:1px;
border-style:solid
}
.content>.list .rowCard{
border-width:1px;
border-style:solid
}
.content>.list .rowCard:active{
transform:scale(.985)
}
@media(max-width:520px){
#chatScreen .bubble,#directChatScreen .bubble{
max-width:84%;
padding:12px 15px 11px
}
#chatScreen .messages,#directChatScreen .messages{
gap:14px;
padding-left:12px;
padding-right:12px
}
}
#directComposer{
display:flex;
flex-wrap:wrap;
align-items:flex-end;
overflow:hidden
}
#directComposer .directAttachmentPreview{
order:-1;
position:relative;
float:none;
width:100%;
margin:0 0 8px;
padding:9px 42px 9px 12px;
display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;
gap:3px 8px;
border-width:1px;
border-style:solid
}
#directComposer .directAttachmentPreview.hidden{
display:none!important
}
#directComposer .directAttachmentPreview .attachmentType{
grid-column:1/-1
}
#directComposer .directAttachmentPreview b{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}
#directComposer .directAttachmentPreview>button{
position:absolute;
right:10px;
top:50%;
transform:translateY(-50%);
float:none;
width:28px;
height:28px
}
#directComposer #directAttach{
flex:0 0 42px;
order:1
}
#directComposer #directInput{
order:2;
min-width:70px;
flex:1 1 180px
}
#directComposer #directSend{
flex:0 0 42px;
order:4
}
#directComposer .compressSend{
display:grid;
flex:0 0 42px;
order:3;
transform:translateX(0) scale(1);
opacity:1
}
#directComposer .compressSend.hidden{
display:none!important
}
#directComposer .compressSend:disabled{
opacity:.45
}
#directComposer.hasCompress #directInput{
flex-basis:115px
}
#chatScreen,#directChatScreen{
width:100%;
height:100vh;
min-height:0;
padding-top:var(--safe-t);
}
@supports(height:100dvh){
#chatScreen,#directChatScreen{
height:100dvh
}
}
#chatScreen .chatHead,#directChatScreen .chatHead,
#chatScreen .composer,#directChatScreen .composer,
#chatScreen .chatActivity,#directChatScreen .chatActivity,
#directChatScreen .secureNote{
flex-shrink:0
}
#chatScreen .messages,#directChatScreen .messages{
min-width:0;
min-height:0;
overflow-x:hidden;
overflow-y:auto;
overscroll-behavior-x:none;
-webkit-overflow-scrolling:touch;
padding-bottom:104px;
scroll-padding-bottom:104px;
}
#chatScreen .bubble,#directChatScreen .bubble{
flex:0 0 auto;
width:fit-content;
min-width:0;
height:auto;
min-height:44px;
max-height:none;
box-sizing:border-box;
overflow:visible;
white-space:pre-wrap;
overflow-wrap:anywhere;
word-break:break-word;
}
#chatScreen .bubble>span:first-child,#directChatScreen .bubble>span:first-child{
display:block;
min-width:0;
max-width:100%;
white-space:inherit;
overflow-wrap:inherit;
word-break:inherit;
}
#chatScreen .composer,#directChatScreen .composer{
position:relative;
z-index:4;
min-width:0;
padding-left:max(14px,var(--safe-l));
padding-right:max(14px,var(--safe-r));
}
#chatScreen .composer textarea,#directChatScreen .composer textarea{
min-width:0
}
#chatScreen .round,#directChatScreen .round{
flex:0 0 42px
}
@media(min-width:900px){
#chatScreen .messages,#directChatScreen .messages{
padding-bottom:24px;
scroll-padding-bottom:24px
}
}
@media(max-width:520px){
#chatScreen .bubble,#directChatScreen .bubble{
max-width:85%
}
.liveVoiceBtn{
right:max(12px,var(--safe-r));
bottom:calc(78px + var(--safe-b));
width:62px;
height:62px
}
}
.chatScreen .messageText{
display:block
}
.chatScreen .messageExpand{
display:block;
width:100%;
margin:9px 0 0;
padding:8px 2px 2px;
border-top-width:1px;
border-top-style:solid;
text-align:left
}
#chatScreen.chatScreen,#directChatScreen.chatScreen{
height:100dvh;
min-height:100dvh;
padding:0
}
#chatScreen .chatHead,#directChatScreen .chatHead{
box-sizing:content-box;
height:51px;
flex-basis:51px;
padding:var(--safe-t) 17px 0;
border-width:0;
border-bottom-width:1px;
border-bottom-style:solid
}
#chatScreen .back,#directChatScreen .back{
min-width:82px;
padding:10px 2px;
text-align:left
}
#chatScreen .messages,#directChatScreen .messages{
width:min(100%,780px);
margin:0 auto;
padding:10px 27px 22px;
gap:20px;
scrollbar-width:none
}
#chatScreen .messages::-webkit-scrollbar,#directChatScreen .messages::-webkit-scrollbar{
display:none
}
#chatScreen .bubble,#directChatScreen .bubble{
max-width:76%;
padding:13px 17px 11px;
overflow:visible
}
#chatScreen .bubble::before,#directChatScreen .bubble::before{
inset:0
}
#chatScreen .bubble::after,#directChatScreen .bubble::after{
content:'';
position:absolute;
z-index:-2;
inset:-1px;
pointer-events:none
}
#chatScreen .bubble.user,#directChatScreen .bubble.user{
align-self:flex-end;
margin-right:0;
border-width:1px;
border-style:solid
}
#chatScreen .bubble.assistant,#directChatScreen .bubble.assistant{
align-self:flex-start;
margin-left:0;
border-width:1px;
border-style:solid
}
#chatScreen .bubble .directTime,#directChatScreen .bubble .directTime{
min-height:13px;
margin:5px 1px -2px;
justify-content:flex-end;
opacity:.76
}
#chatScreen .bubbleTools,#directChatScreen .bubbleTools{
display:none!important;
margin:9px 0 0;
padding-top:7px;
border-top-width:1px;
border-top-style:solid;
opacity:1
}
#chatScreen .bubble.actionsVisible .bubbleTools,#directChatScreen .bubble.actionsVisible .bubbleTools{
display:flex!important
}
#chatScreen .mini,#directChatScreen .mini{
padding:5px 7px;
border-width:0
}
#chatScreen .messageExpand,#directChatScreen .messageExpand{
margin-top:8px;
padding-top:7px
}
#chatScreen .thinking,#directChatScreen .thinking{
max-width:74%;
padding:0 2px
}
#chatScreen .chatActivity,#directChatScreen .chatActivity{
min-height:34px;
padding:6px max(29px,calc((100vw - 724px)/2)) 8px;
border-width:0
}
#chatScreen .chatActivity.active::before,#directChatScreen .chatActivity.active::before{
content:'';
display:inline-block;
width:12px;
height:12px;
margin-right:9px;
vertical-align:-1px
}
#chatScreen .secureNote,#directChatScreen .secureNote{
padding:6px 14px;
border-width:0
}
#chatScreen .composer,#directChatScreen .composer{
min-height:74px;
padding:10px 19px calc(10px + var(--safe-b));
gap:9px;
border-width:0;
border-top-width:1px;
border-top-style:solid
}
#chatScreen .composer textarea,#directChatScreen .composer textarea{
height:48px;
min-height:48px;
padding:13px 17px;
border-width:1px;
border-style:solid
}
#chatScreen .composer .round,#directChatScreen .composer .round{
width:48px;
height:48px;
flex:0 0 48px;
border-width:0
}
#chatScreen .composer svg,#directChatScreen .composer svg{
width:23px;
height:23px
}
#directChatScreen .directAvatar{
width:34px;
height:34px;
flex-basis:34px;
margin-right:7px;
border-width:1px;
border-style:solid
}
@media(max-width:520px){
#chatScreen .messages,#directChatScreen .messages{
padding-left:27px;
padding-right:27px
}
#chatScreen .bubble,#directChatScreen .bubble{
max-width:78%
}
#chatScreen .composer,#directChatScreen .composer{
padding-left:19px;
padding-right:19px;
gap:9px
}
#chatScreen .composer .round,#directChatScreen .composer .round{
width:46px;
height:46px;
flex-basis:46px
}
#chatScreen .composer textarea,#directChatScreen .composer textarea{
height:46px;
min-height:46px
}
}
.appMaintenance{
display:none;
max-width:1040px;
margin:34px auto 10px;
padding:18px;
text-align:center;
border-top-width:1px;
border-top-style:solid
}
.shell.settingsOpen .appMaintenance{
display:block
}
.clearAppCache{
padding:10px 14px;
border-width:1px;
border-style:solid
}
.clearAppCache:active{
transform:scale(.98)
}
.clearAppCache:disabled{
opacity:.55
}
.appMaintenance>span{
display:block;
margin-top:7px
}
@media(min-width:900px){
.appMaintenance{
padding-left:38px;
padding-right:38px
}
}
@media(max-width:700px){
#chatScreen .chatHead,#directChatScreen .chatHead{
padding-top:max(var(--safe-t),30px)
}
#chatScreen .messages,#directChatScreen .messages{
padding:10px 27px 24px;
gap:20px
}
#chatScreen .bubble,#directChatScreen .bubble{
max-width:73%
}
#chatScreen .composer,#directChatScreen .composer{
min-height:68px;
padding:9px 12px calc(9px + var(--safe-b));
gap:8px
}
#chatScreen .composer .round,#directChatScreen .composer .round{
width:38px;
height:38px;
flex-basis:38px
}
#chatScreen .composer textarea,#directChatScreen .composer textarea{
height:42px;
min-height:42px;
padding:10px 15px;
white-space:nowrap;
overflow:hidden
}
}
.pinnedBar{
flex:0 0 auto;
width:100%;
min-height:42px;
padding:7px max(18px,calc((100vw - 744px)/2));
display:grid;
grid-template-columns:22px minmax(0,1fr);
align-items:center;
gap:8px;
border-width:0;
border-bottom-width:1px;
border-bottom-style:solid;
text-align:left
}
.pinnedBar.hidden{
display:none!important
}
.pinnedBar b{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}
.pinnedMessage{
border-style:double
}
#rootComposer,#directComposer{
flex-wrap:wrap
}
#rootComposer .rootImagePreview{
order:-1;
position:relative;
width:100%;
margin:0 0 7px;
padding:9px 40px 9px 12px;
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:3px 8px;
border-width:1px;
border-style:solid
}
#rootComposer .rootImagePreview.hidden{
display:none!important
}
#rootComposer .rootImagePreview span{
grid-column:1/-1
}
#rootComposer .rootImagePreview b{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}
#rootComposer .rootImagePreview button{
position:absolute;
right:9px;
top:50%;
transform:translateY(-50%);
width:27px;
height:27px
}
#chatScreen .composer textarea,#directChatScreen .composer textarea{
white-space:pre-wrap;
overflow-y:auto;
resize:none
}
#directComposer .directEditNotice{
order:-2;
position:relative;
width:100%;
min-height:38px;
margin:0 0 7px;
padding:9px 42px 9px 12px;
border-width:1px;
border-style:solid
}
#directComposer .directEditNotice.hidden{
display:none!important
}
#directComposer .directEditNotice button{
position:absolute;
right:9px;
top:50%;
transform:translateY(-50%);
width:27px;
height:27px
}
#directComposer #directVoice{
order:4
}
#directComposer #directSend{
order:5
}
.voiceRecordingLabel i{
display:inline-block;
width:7px;
height:7px;
margin-right:5px
}
#directChatScreen .editedMarker{
margin-right:auto
}
#directChatScreen .bubbleTools{
flex-wrap:wrap;
gap:4px
}
.broadcastCard{
margin:18px 0 28px;
padding:18px;
border-width:1px;
border-style:solid
}
.broadcastCard>label{
display:block;
margin:0 0 9px
}
.broadcastText{
width:100%;
min-height:150px;
resize:vertical
}
.broadcastActions{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
gap:10px;
margin-top:14px
}
.broadcastActions .primary,.broadcastActions .ghost{
min-height:44px
}
.broadcastImagePreview{
position:relative;
display:grid;
grid-template-columns:72px minmax(0,1fr) 32px;
align-items:center;
gap:11px;
margin-top:12px;
padding:10px;
border-width:1px;
border-style:solid
}
.broadcastImagePreview img{
width:72px;
height:72px;
object-fit:cover
}
.broadcastImagePreview span{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}
.broadcastImagePreview button{
width:30px;
height:30px
}
.broadcastHistory{
padding:14px;
border-width:1px;
border-style:solid
}
.broadcastHistory b,.broadcastHistory span{
display:block
}
.broadcastHistory b{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}
.broadcastHistory span{
margin-top:5px
}
#broadcastStatus{
min-height:18px;
margin-top:10px
}
.chatDeleteButton{
width:40px;
height:40px;
flex:none;
margin-left:auto
}
.systemChatAvatar{
width:40px;
height:40px;
display:grid;
place-items:center;
flex:none
}
.conversationDelete{
position:absolute;
right:11px;
top:50%;
width:36px;
height:36px;
display:grid;
place-items:center;
transform:translateY(-50%)
}
.content>.list .rowCard[data-cid]{
position:relative;
padding-right:58px
}
#systemChatScreen{
position:relative;
height:100dvh;
min-height:100dvh;
display:flex;
flex-direction:column;
padding:0;
overflow:hidden;
isolation:isolate
}
#systemChatScreen.hidden{
display:none
}
#systemChatScreen::before{
content:'';
position:absolute;
z-index:-1;
inset:0
}
#systemChatScreen .chatHead{
box-sizing:content-box;
height:51px;
flex:0 0 51px;
padding:var(--safe-t) 17px 0;
border-width:0;
border-bottom-width:1px;
border-bottom-style:solid
}
#systemChatScreen .chatHeadTitle{
min-width:0;
margin:0 8px;
text-align:left
}
#systemChatScreen .messages{
width:min(100%,780px);
margin:0 auto;
padding:18px 27px 26px;
gap:20px;
scrollbar-width:none
}
#systemChatScreen .messages::-webkit-scrollbar{
display:none
}
#systemChatScreen .bubble{
max-width:min(88%,660px);
padding:15px 18px 13px;
border-width:1px;
border-style:solid;
white-space:pre-wrap
}
.systemNotificationImage img{
width:min(100%,520px);
max-height:520px;
object-fit:contain
}
.systemNotificationImage .attachmentDownload{
width:max-content
}
@media(max-width:560px){
.broadcastActions{
display:grid;
grid-template-columns:1fr
}
.broadcastActions button{
width:100%
}
#systemChatScreen .messages{
padding-left:20px;
padding-right:20px
}
#systemChatScreen .bubble{
max-width:92%
}
}
#directComposer .directReplyNotice{
order:-2;
position:relative;
width:100%;
min-height:44px;
margin:0 0 7px;
padding:8px 42px 8px 13px;
border-width:1px;
border-style:solid;
border-left-width:3px;
border-left-style:solid
}
#directComposer .directReplyNotice.hidden{
display:none!important
}
#directComposer .directReplyNotice>span{
display:grid;
gap:2px;
min-width:0
}
#directComposer .directReplyNotice small{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}
#directComposer .directReplyNotice>button{
position:absolute;
right:9px;
top:50%;
transform:translateY(-50%);
width:27px;
height:27px
}
#chatScreen .bubbleTools,#directChatScreen .bubbleTools{
align-items:center;
gap:6px
}
#chatScreen .bubbleTools .actionIcon,#directChatScreen .bubbleTools .actionIcon{
display:grid!important;
place-items:center;
width:31px;
height:31px;
min-width:31px;
padding:0;
border-width:1px;
border-style:solid
}
#chatScreen .bubbleTools .actionIcon svg,#directChatScreen .bubbleTools .actionIcon svg{
width:16px;
height:16px
}
#directChatScreen .messageReplyQuote{
display:grid;
width:100%;
margin:0 0 9px;
padding:5px 8px 6px;
border-width:0;
border-left-width:3px;
border-left-style:solid;
text-align:left
}
#directChatScreen .messageReplyQuote b{
display:block;
min-width:0;
margin-top:2px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}
#directChatScreen .attachmentCard,#chatScreen .rootMessageImage{
align-items:stretch;
gap:8px;
margin-top:4px
}
#directChatScreen .attachmentCard img,#directChatScreen .attachmentCard video,#chatScreen .rootMessageImage img{
display:block;
width:100%;
max-width:min(68vw,360px);
max-height:320px;
object-fit:contain
}
#directChatScreen .attachmentCard audio{
display:block;
width:min(64vw,280px);
max-width:100%;
height:40px
}
#directChatScreen .genericFile{
display:grid;
place-items:center;
width:min(64vw,220px);
height:92px;
border-width:1px;
border-style:solid
}
#directChatScreen .genericFile svg{
width:44px;
height:44px
}
#directChatScreen .attachmentDownload,#chatScreen .rootMessageImage .attachmentDownload{
display:flex;
align-items:center;
justify-content:center;
gap:7px;
width:100%;
min-height:34px;
padding:7px 12px;
border-width:1px;
border-style:solid
}
#directChatScreen .attachmentDownload svg,#chatScreen .rootMessageImage .attachmentDownload svg{
width:15px;
height:15px
}
#directChatScreen .bubble.attachmentOnly{
max-width:88%;
padding:7px 7px 9px
}
#directChatScreen .bubble.attachmentOnly .directTime{
padding:0 7px;
margin-top:7px
}
#directChatScreen .bubble.attachmentOnly .bubbleTools{
margin-left:6px;
margin-right:6px
}
html,body{
width:100%;
max-width:100%;
overflow-x:clip
}
body{
min-height:100dvh
}
.shell{
width:100%;
max-width:100%;
min-height:100dvh;
overflow-x:hidden
}
.content,.content>*,.adminPanelTitle,.adminPanelTitle>div,.adminList,.broadcastCard,.broadcastHistory{
min-width:0;
max-width:100%
}
.adminPanelTitle{
align-items:flex-start;
flex-wrap:wrap
}
.adminPanelTitle .badge{
flex:none
}
.broadcastHistoryText{
min-width:0;
overflow:hidden
}
.broadcastHistoryText b{
max-width:100%;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}
.broadcastHistoryText span{
overflow-wrap:anywhere
}
.chatScreen{
width:100%;
max-width:100%;
overflow-x:hidden
}
@supports(height:100dvh){
.screen{
min-height:100dvh
}
.shell{
min-height:100dvh
}
#chatScreen.chatScreen,#directChatScreen.chatScreen,#systemChatScreen.chatScreen{
height:100dvh;
min-height:100dvh
}
}
@media(max-width:520px){
.adminPanelTitle{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:8px
}
.adminPanelTitle .sectionTitle{
overflow-wrap:anywhere
}
.adminPanelTitle .sectionSub{
grid-column:1/-1
}
.adminPanelTitle .badge{
padding:5px 7px
}
.content{
width:100%;
padding-left:max(14px,var(--safe-l));
padding-right:max(14px,var(--safe-r))
}
.broadcastCard{
padding:14px
}
.broadcastHistory{
padding:12px
}
}
.broadcastHistory{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:9px 12px;
overflow:hidden
}
.notificationSummary{
align-self:start;
text-align:right
}
.notificationSummary strong,.notificationSummary span{
display:block
}
.notificationSummary span{
margin-top:1px
}
.notificationRecipientList{
grid-column:1/-1;
display:grid;
gap:3px;
min-width:0
}
.notificationRecipient{
min-width:0;
min-height:25px;
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:center;
gap:8px;
padding:4px 8px
}
.notificationRecipientName{
min-width:0;
margin:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}
.notificationExpand{
grid-column:1/-1;
justify-self:start;
padding:6px 9px
}
.broadcastHistory.expanded .notificationRecipientList{
max-height:48vh;
overflow:auto;
padding-right:2px
}
.systemNoticeModal{
position:fixed;
z-index:150;
inset:0;
display:grid;
place-items:center;
padding:max(14px,var(--safe-t)) max(14px,var(--safe-r)) max(14px,var(--safe-b)) max(14px,var(--safe-l));
opacity:0
}
.systemNoticeModal.show{
opacity:1
}
.systemNoticeWindow{
width:min(520px,100%);
max-height:min(78dvh,720px);
display:flex;
flex-direction:column;
overflow:hidden;
border-width:1px;
border-style:solid
}
.systemNoticeScroll{
min-height:0;
overflow:auto;
padding:24px 22px 16px;
text-align:center
}
.systemNoticeMark{
width:46px;
height:46px;
margin:0 auto 10px;
display:grid;
place-items:center;
border-width:1px;
border-style:solid
}
.systemNoticeEyebrow{
margin:0
}
.systemNoticeWindow h2{
margin:5px 0 5px
}
.systemNoticeSubtitle{
margin:0 0 16px
}
.systemNoticeBody{
max-height:190px;
overflow:hidden;
text-align:left
}
.systemNoticeText{
padding:14px;
border-width:1px;
border-style:solid;
white-space:pre-wrap;
overflow-wrap:anywhere
}
.systemNoticeImage{
margin-top:11px
}
.systemNoticeImage img{
display:block;
width:100%;
max-height:320px;
object-fit:contain
}
.systemNoticeExpand{
margin-top:11px;
padding:8px 12px
}
.systemNoticeFooter{
flex:none;
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:center;
gap:12px;
padding:13px 18px calc(13px + var(--safe-b));
border-top-width:1px;
border-top-style:solid
}
.systemNoticeFooter .primary{
width:auto;
min-width:134px;
padding:12px 16px
}
.systemNoticeWindow.expanded{
position:fixed;
inset:var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);
width:auto;
max-height:none
}
.systemNoticeWindow.expanded .systemNoticeScroll{
padding-top:24px
}
.systemNoticeWindow.expanded .systemNoticeBody{
max-height:none;
overflow:visible
}
.systemNoticeWindow.expanded .systemNoticeImage img{
max-height:none
}
.systemNoticeWindow.expanded .systemNoticeExpand{
position:sticky;
bottom:0
}
.localStorageRange{
padding:5px 15px 15px
}
.localStorageRange input{
width:100%
}
.localStorageRange .small{
margin-top:5px
}
.localStorageSliderRow strong{
flex:none
}
.localStorageGroup .settingRow:last-child{
flex-wrap:wrap
}
.appMaintenance .clearAppCache+.clearAppCache{
margin-left:7px
}
@media(max-width:520px){
.systemNoticeWindow{
max-height:calc(100dvh - var(--safe-t) - var(--safe-b) - 20px)
}
.systemNoticeScroll{
padding:20px 16px 14px
}
.systemNoticeFooter{
grid-template-columns:1fr
}
.systemNoticeFooter span{
text-align:center
}
.systemNoticeFooter .primary{
width:100%
}
.appMaintenance .clearAppCache{
display:block;
width:100%;
margin:7px 0 0
}
}
.shell{
position:relative
}
.shell::before{
content:"";
position:fixed;
inset:0;
pointer-events:none;
opacity:.16;
mask-image:linear-gradient(to bottom,#000,transparent 76%)
}
.topbar{
height:68px;
padding-left:max(16px,var(--safe-l));
padding-right:max(16px,var(--safe-r));
border-bottom-width:1px;
border-bottom-style:solid
}
.topTitle{
min-width:0
}
.topTitle::before{
content:"SYSTEM ERROR";
display:block;
margin-bottom:4px
}
.statusDot{
width:7px;
height:7px
}
.iconBtn,.menuButton{
width:42px;
height:42px;
border-width:1px;
border-style:solid
}
.content{
position:relative;
width:min(100%,780px);
max-width:780px;
padding:20px 16px 22px
}
.sectionTitle{
margin:7px 0 7px
}
.sectionSub{
margin-bottom:18px
}
.nav{
display:grid!important;
grid-template-columns:none;
grid-auto-flow:column;
grid-auto-columns:1fr;
min-height:72px;
padding:7px 14px calc(7px + var(--safe-b));
border-top-width:1px;
border-top-style:solid
}
.nav button{
position:relative;
min-height:52px
}
.nav button.on::before{
content:"";
position:absolute;
top:0;
left:50%;
width:28px;
height:2px;
transform:translateX(-50%)
}
.card,.settingsGroup,.rowCard,.heroAction,.broadcastCard,.broadcastHistory{
border-width:1px;
border-style:solid
}
.rowCard{
padding:13px 14px
}
.rowCard:active{
transform:scale(.992)
}
.heroAction{
padding:16px
}
.workHero{
border-left-width:1px;
border-left-style:solid
}
.primary{
border-width:1px;
border-style:solid
}
.secondary{
border-width:1px;
border-style:solid
}
.input{
border-width:1px;
border-style:solid
}
.settingsGroup{
overflow:hidden
}
.settingRow{
min-height:62px;
padding:11px 14px;
border-bottom-width:1px;
border-bottom-style:solid
}
.settingRow .small{
margin-top:3px
}
.switch{
border-width:1px;
border-style:solid
}
.sideDrawer{
width:min(86vw,355px);
padding:calc(14px + var(--safe-t)) 14px calc(14px + var(--safe-b));
border-right-width:1px;
border-right-style:solid
}
.drawerBrand{
display:flex!important;
align-items:center;
gap:10px;
margin:4px 8px 8px
}
.drawerBrand img{
width:36px;
height:36px
}
.drawerBrand span{
display:flex;
flex-direction:column
}
.drawerBrand small{
margin-top:2px
}
.drawerHead{
margin:8px 0 12px;
padding:14px;
border-width:1px;
border-style:solid
}
.drawerHead img{
width:46px;
height:46px;
border-width:1px;
border-style:solid
}
.drawerNav{
gap:3px
}
.drawerNav button{
min-height:48px
}
.drawerFooter{
margin-top:auto;
padding-top:12px;
border-top-width:1px;
border-top-style:solid
}
.drawerFooter>div{
display:flex;
align-items:center;
gap:9px;
padding:8px 10px
}
.drawerFooter button{
width:100%;
min-height:44px;
text-align:left;
padding:0 10px
}
#chatScreen .chatHead,#directChatScreen .chatHead,#systemChatScreen .chatHead{
border-bottom-width:1px;
border-bottom-style:solid
}
#chatScreen .messages,#directChatScreen .messages,#systemChatScreen .messages{
gap:10px;
padding-left:16px;
padding-right:16px
}
#chatScreen .bubble,#directChatScreen .bubble,#systemChatScreen .bubble{
max-width:82%;
padding:10px 13px 12px
}
#chatScreen .bubble.user,#directChatScreen .bubble.user{
border-width:1px;
border-style:solid
}
#chatScreen .bubble.assistant{
border-width:1px;
border-style:solid
}
#directChatScreen .bubble.assistant,#systemChatScreen .bubble{
border-width:1px;
border-style:solid
}
.secureNote{
border-bottom-width:1px;
border-bottom-style:solid
}
#chatScreen .composer,#directChatScreen .composer{
min-height:68px;
padding:8px 12px calc(8px + var(--safe-b));
border-top-width:1px;
border-top-style:solid
}
.composer textarea{
min-height:44px;
border-width:1px;
border-style:solid
}
.composer .round{
width:44px;
height:44px;
flex-basis:44px;
border-width:1px;
border-style:solid
}
.directAvatar{
border-width:1px;
border-style:solid
}
.authBody .card{
width:min(100%,410px);
margin:0 auto
}
.seg{
border-width:1px;
border-style:solid;
padding:4px
}
.key{
width:62px;
height:62px;
border-width:1px;
border-style:solid
}
.musicNote,.musicPlaylistIcon,.musicPlayerArtwork{
border-width:1px;
border-style:solid
}
.musicPlay{
border-width:1px;
border-style:solid
}
.musicFloat{
width:52px;
height:52px
}
.profileAvatar{
border-width:1px;
border-style:solid
}
.broadcastText{
min-height:130px
}
.systemUpdateOverlay{
position:fixed;
z-index:220;
inset:0;
display:grid;
place-items:center;
padding:calc(16px + var(--safe-t)) 16px calc(16px + var(--safe-b));
overflow:hidden
}
.systemUpdateOverlay.hidden{
display:none!important
}
.systemUpdateOverlay.closing{
opacity:0
}
.updateTerminal{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
justify-content:center;
gap:12px;
padding:6vw;
overflow:hidden
}
.updateTerminal::after{
content:"";
position:absolute;
inset:0
}
.updateTerminal div{
display:flex;
gap:14px
}
.updateTerminal i{
width:8px;
height:14px
}
.updatePanel{
position:relative;
width:min(100%,430px);
max-height:calc(100dvh - 32px);
overflow:auto;
padding:23px;
border-width:1px;
border-style:solid;
text-align:center
}
.updatePanel header{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
margin-bottom:22px
}
.updatePanel header img{
width:42px;
height:42px
}
.updatePanel header span{
display:flex;
flex-direction:column;
text-align:left
}
.updatePanel header small{
margin-top:3px
}
.updateEyebrow{
margin:0
}
.updatePanel h1{
margin:7px 0
}
.updateLead{
max-width:300px;
margin:0 auto 16px
}
.updateTrack{
height:5px;
margin:9px 0 18px;
overflow:hidden
}
.updateTrack i{
display:block;
height:100%
}
.updateStages{
display:flex;
flex-direction:column;
text-align:left
}
.updateStages>div{
min-height:33px;
display:flex;
align-items:center;
gap:10px
}
.updateStages>div>i{
width:20px;
height:20px;
display:grid;
place-items:center;
border-width:1px;
border-style:solid
}
.updatePanel footer{
margin-top:17px
}
.updateAlert{
width:55px;
height:55px;
display:grid;
place-items:center;
margin:0 auto 14px
}
@media(max-width:390px){
.content{
padding-left:12px;
padding-right:12px
}
.topbar{
padding-left:max(12px,var(--safe-l));
padding-right:max(12px,var(--safe-r))
}
.drawerBrand{
margin-left:4px;
margin-right:4px
}
}
.shell{
padding-top:0
}
.content{
width:min(100%,780px);
padding:16px
}
.sectionTitle{
margin:7px 0 4px
}
.sectionSub{
margin:0 0 14px
}
#splashScreen{
position:fixed;
z-index:300;
inset:0;
display:grid;
place-items:center;
padding:max(24px,var(--safe-t)) 20px max(24px,var(--safe-b))
}
#splashScreen.hidden{
display:none!important
}
.splashInner{
width:min(100%,360px);
display:flex;
flex-direction:column;
align-items:center;
text-align:center
}
.splashInner img{
width:82px;
height:82px;
border-width:1px;
border-style:solid
}
.splashVersion{
margin-top:18px
}
.splashInner h1{
margin:7px 0 1px
}
.splashInner p{
margin:34px 0 18px
}
.splashProgress{
width:180px;
height:3px;
overflow:hidden
}
.splashProgress i{
display:block;
width:68%;
height:100%
}
.splashInner small{
margin-top:10px
}
.topbar{
box-sizing:border-box;
height:auto;
min-height:61px;
padding:max(8px,var(--safe-t)) max(14px,var(--safe-r)) 8px max(14px,var(--safe-l));
gap:9px;
border-bottom-width:1px;
border-bottom-style:solid
}
.topAppIcon{
width:34px;
height:34px;
border-width:1px;
border-style:solid
}
.statusDot{
width:7px;
height:7px
}
.iconBtn{
width:38px;
height:38px;
border-width:1px;
border-style:solid
}
.masterBadge{
display:none!important
}
@media(max-width:899px){
.nav{
grid-template-columns:repeat(3,1fr);
width:100%;
left:0;
right:0;
bottom:0;
transform:none;
padding:6px max(10px,var(--safe-l)) calc(6px + var(--safe-b)) max(10px,var(--safe-r));
border-width:0;
border-top-width:1px;
border-top-style:solid
}
.nav button{
min-height:50px
}
.nav .nicon{
margin-bottom:3px
}
.shell{
padding-bottom:calc(69px + var(--safe-b))
}
}
.conversationToolbar{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:8px;
align-items:center;
margin:0 0 12px
}
.conversationSearch{
min-height:42px;
display:flex;
align-items:center;
gap:8px;
padding:0 11px;
border-width:1px;
border-style:solid
}
.conversationSearch input{
min-width:0;
width:100%;
height:39px;
padding:0;
border-width:0
}
.conversationFilters{
display:flex;
gap:4px;
padding:3px;
border-width:1px;
border-style:solid
}
.conversationFilters button{
min-height:34px;
padding:0 10px
}
.heroAction:not(.workHero){
display:none!important
}
.content>.list{
gap:0;
overflow:hidden;
border-width:1px;
border-style:solid
}
.content>.list .rowCard{
min-height:64px;
margin:0;
padding:11px 13px;
border-width:0;
border-bottom-width:1px;
border-bottom-style:solid
}
.content>.list .rowCard:last-child{
border-bottom-width:0
}
.content>.list .rowCard:active{
transform:none
}
.rowPreview,.contactBody span{
margin-top:2px
}
.rowMeta{
margin-top:5px
}
.contactAvatar{
width:40px;
height:40px;
border-width:1px;
border-style:solid
}
.unread{
min-width:18px;
height:18px;
padding:1px 5px
}
.workHero{
padding:14px;
border-width:1px;
border-style:solid
}
.chatBrandAvatar{
width:32px;
height:32px;
flex:0 0 32px;
margin-right:8px;
border-width:1px;
border-style:solid;
object-fit:cover
}
.chatHead{
gap:4px
}
.chatHeadTitle{
text-align:left;
margin-right:0
}
.chatHead>div:has(#directTitle){
margin-right:6px
}
.secureNote{
padding:5px 12px
}
.messages{
gap:9px
}
.composer{
gap:5px
}
.composer .round{
width:40px;
height:40px;
flex-basis:40px
}
.directAvatar{
width:32px;
height:32px;
flex-basis:32px
}
#authScreen{
display:flex;
flex-direction:column;
justify-content:center;
min-height:100dvh;
padding:max(18px,var(--safe-t)) 16px max(18px,var(--safe-b))
}
.authHero{
flex:none;
width:min(100%,410px);
height:148px;
aspect-ratio:auto;
margin:0 auto
}
.authHero::before{
content:'SYSTEM ERROR';
position:absolute;
left:0;
right:0;
bottom:31px;
text-align:center
}
.authHero::after{
content:'ROOT SE';
position:absolute;
inset:auto 0 14px;
text-align:center
}
.authTerminal{
display:none!important
}
.authBody{
width:min(100%,410px);
padding:0;
margin:0 auto
}
.authBody .brand{
display:none!important
}
.pane{
padding:17px
}
.primary{
min-height:44px
}
.seg button{
min-height:34px
}
.sideDrawer{
width:min(85vw,350px)
}
.drawerBrand{
padding:4px 4px 7px
}
.drawerHead{
margin:6px 0 9px;
padding:11px
}
.drawerNav button{
min-height:44px;
padding:8px 11px
}
.settingsGroup{
margin-bottom:12px;
border-width:1px;
border-style:solid
}
.settingRow{
min-height:54px;
padding:9px 12px
}
.content>h3{
margin:15px 2px 7px
}
.profileAvatar{
width:72px;
height:72px
}
.adminGrid{
gap:8px
}
.adminStat{
padding:12px
}
.adminUser{
padding:11px
}
.adminTab{
padding:8px 11px
}
.broadcastCard{
padding:14px
}
.broadcastText{
min-height:118px
}
.musicHero{
padding:14px
}
.updatePanel{
width:min(100%,390px);
padding:21px
}
.updatePanel header{
margin-bottom:18px
}
.updateTrack{
height:4px
}
.updateTerminal{
opacity:.72
}
.updateStages>div{
min-height:29px
}
@media(max-width:430px){
.content{
padding:13px 13px 16px
}
.conversationToolbar{
grid-template-columns:1fr
}
.conversationFilters{
width:max-content
}
.topbar{
min-height:58px
}
.chatHead{
padding-left:12px;
padding-right:12px
}
.back{
min-width:auto;
margin-right:6px
}
.messages{
padding-left:13px;
padding-right:13px
}
.bubble{
max-width:82%
}
.composer{
padding-left:9px;
padding-right:9px
}
.authHero{
height:138px
}
.sideDrawer{
width:86vw
}
}
@media(prefers-reduced-motion:reduce){
.splashProgress i{
transform:none;
width:100%
}
}
.chatDeleteButton,.conversationDelete{
display:grid!important;
place-items:center;
padding:0;
overflow:visible;
border-width:1px;
border-style:solid;
cursor:pointer;
-webkit-tap-highlight-color:transparent;
}
.chatDeleteButton{
width:36px;
height:36px;
flex:0 0 36px;
margin-left:auto
}
.conversationDelete{
position:absolute;
right:11px;
top:50%;
width:32px;
height:32px;
transform:translateY(-50%)
}
.deleteCross{
width:18px;
height:18px;
overflow:visible;
pointer-events:none
}
.chatDeleteButton:active{
transform:translateY(1px) scale(.94)
}
.conversationDelete:active{
transform:translateY(calc(-50% + 1px)) scale(.94)
}
.content>.list .rowCard[data-cid]{
position:relative;
padding-right:56px
}
.content>.list .rowCard[data-cid] .conversationDelete{
z-index:2
}
#directChatScreen .chatDeleteButton,#systemChatScreen .chatDeleteButton{
margin-right:1px
}
.drawerNav .drawerIcon{
position:relative;
width:28px;
height:30px;
display:grid!important;
place-items:center;
flex:0 0 28px
}
.drawerNav .drawerIcon svg{
position:relative;
z-index:1;
width:21px;
height:21px
}
.drawerNav .drawerIcon::after{
content:"";
position:absolute;
left:6px;
right:6px;
bottom:1px;
height:3px;
opacity:.82;
pointer-events:none
}
.drawerNav button.on .drawerIcon::after{
opacity:1
}
.chatRequests{
margin:0 0 14px;
padding:10px;
border-width:1px;
border-style:solid
}
.chatRequestsHead{
display:flex;
align-items:center;
justify-content:space-between;
margin:1px 2px 8px
}
.chatRequestsHead span{
min-width:20px;
height:20px;
display:grid;
place-items:center
}
.chatRequestCard{
display:grid;
grid-template-columns:40px minmax(0,1fr) auto;
align-items:center;
gap:10px;
padding:10px 0;
border-top-width:1px;
border-top-style:solid
}
.chatRequestCard:first-of-type{
border-top-width:0
}
.chatRequestBody{
min-width:0
}
.chatRequestBody b,.chatRequestBody span{
display:block;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}
.chatRequestBody span{
margin-top:3px
}
.chatRequestActions{
display:flex;
gap:5px
}
.chatRequestActions button{
min-height:32px;
padding:0 9px
}
.requestAccept{
border-width:1px;
border-style:solid
}
.requestDecline{
border-width:1px;
border-style:solid
}
.directoryUser{
cursor:pointer
}
.hiddenProfileUser .contactBody span{
display:none
}
.directoryEmpty{
padding:18px 14px
}
@media(max-width:460px){
.chatRequestCard{
grid-template-columns:38px minmax(0,1fr)
}
.chatRequestActions{
grid-column:1/-1;
justify-content:flex-end
}
.chatRequestActions button{
min-height:34px;
padding:0 12px
}
}
.chatRequestSection{
margin:0 0 13px
}
.chatRequestTitle{
display:flex;
align-items:center;
justify-content:space-between;
margin:0 2px 7px
}
.chatRequestTitle b{
min-width:20px;
height:20px;
display:grid;
place-items:center;
padding:0 5px;
border-width:1px;
border-style:solid
}
.chatRequestList{
display:grid;
gap:7px
}
.chatRequestCard{
min-width:0;
display:grid;
grid-template-columns:40px minmax(0,1fr) auto;
align-items:center;
gap:10px;
padding:10px 11px;
border-width:1px;
border-style:solid
}
.chatRequestActions{
display:flex;
gap:6px
}
.chatRequestActions button{
min-height:34px;
padding:0 10px
}
.requestAccept{
border-width:1px;
border-style:solid
}
.requestDecline{
border-width:1px;
border-style:solid
}
.userDirectoryRow{
cursor:pointer
}
.chatStateIcon{
width:25px;
height:25px;
display:grid;
place-items:center;
flex:none;
border-width:1px;
border-style:solid
}
.userDirectoryEmpty{
padding:18px;
text-align:center
}
.userDirectoryRow .contactBody span:empty{
display:none
}
@media(max-width:520px){
.chatRequestCard{
grid-template-columns:38px minmax(0,1fr)
}
.chatRequestActions{
grid-column:1/-1;
display:grid;
grid-template-columns:1fr 1fr
}
.chatRequestActions button{
min-height:37px
}
}
.topbar{
position:fixed;
top:0;
left:0;
right:0;
z-index:66;
box-sizing:border-box;
height:var(--app-fixed-topbar-height);
min-height:var(--app-fixed-topbar-height);
padding:var(--safe-t) max(14px,var(--safe-r)) 0 max(14px,var(--safe-l));
}
.shell{
padding-top:var(--app-fixed-topbar-height)
}
.topTitle{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis
}
.nav .nicon svg{
width:21px;
height:21px;
display:block;
margin:0 auto
}
@media(max-width:899px){
.nav{
grid-template-columns:repeat(auto-fit,minmax(0,1fr))
}
.nav button{
min-width:0;
padding-left:1px;
padding-right:1px
}
}
@media(min-width:900px){
.topbar{
left:235px
}
}
.personalChatGroup{
margin:0 0 16px
}
.personalChatGroupTitle{
display:flex;
align-items:center;
justify-content:space-between;
margin:0 3px 7px
}
.personalChatGroupTitle b{
min-width:20px;
height:20px;
display:grid;
place-items:center;
padding:0 6px;
border-width:1px;
border-style:solid
}
.personalChatGroup>.list{
gap:0;
overflow:hidden;
border-width:1px;
border-style:solid
}
.personalChatGroup>.list .rowCard{
min-height:64px;
margin:0;
padding:11px 13px;
border-width:0;
border-bottom-width:1px;
border-bottom-style:solid
}
.personalChatGroup>.list .rowCard:last-child{
border-bottom-width:0
}
.contactNameLine{
min-width:0;
display:flex!important;
align-items:center;
gap:7px;
margin:0
}
.contactNameLine b{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}
.presenceDot{
width:7px;
height:7px;
flex:0 0 7px;
display:inline-block
}
.otherUsersGroup{
margin-top:20px;
padding-top:14px;
border-top-width:1px;
border-top-style:solid
}
.systemChatGroup{
margin-bottom:14px
}
.userDirectoryEmpty{
padding:17px 13px
}
html{
-webkit-text-size-adjust:100%;
text-size-adjust:100%;
scroll-padding-top:calc(var(--app-fixed-topbar-height) + 16px)
}
html,body{
max-width:100%;
overflow-x:clip
}
button,input,textarea,select{
-webkit-tap-highlight-color:transparent
}
button{
cursor:pointer
}
button:disabled{
cursor:default;
opacity:.55
}
.shell{
min-height:100vh;
min-height:100dvh;
padding-bottom:calc(var(--ui-nav-height) + 16px)
}
.content{
width:100%;
max-width:900px;
min-width:0;
padding:22px max(var(--ui-gutter),var(--safe-r)) 24px max(var(--ui-gutter),var(--safe-l));
}
.content>*,.content .list,.settingsGroup,.settingRow .grow,.profileHero>div{
min-width:0;
max-width:100%
}
.sectionTitle{
margin:2px 0 9px;
overflow-wrap:anywhere
}
.sectionSub{
margin-bottom:20px
}
.content>h3,#localStorageSettings>h3{
margin:22px 2px 9px
}
.rowTitle,.contactBody b{
overflow-wrap:anywhere
}
.content>.list .rowCard,.personalChatGroup>.list .rowCard{
padding:14px;
min-height:72px
}
.content>.list .rowCard[data-cid]{
padding-right:58px
}
.conversationFilters button{
min-height:38px
}
.primary,.secondary{
min-height:46px
}
.seg button{
min-height:38px
}
.topbar .topTitle::before{
display:none
}
.topbar .menuButton,.topbar .iconBtn{
flex:0 0 42px
}
.nav .nicon{
margin-bottom:4px
}
.sideDrawer{
max-height:100vh;
max-height:100dvh;
overflow-y:auto;
overscroll-behavior:contain
}
.drawerNav{
flex-shrink:0
}
.drawerNav button{
min-height:46px
}
.drawerFooter{
padding-top:18px
}
.settingRow{
gap:12px;
padding:12px 14px;
min-height:64px
}
.settingRow .grow{
overflow-wrap:anywhere
}
.settingRow .ghost{
min-height:44px;
padding:8px;
max-width:100%;
overflow-wrap:anywhere
}
.settingRow .switch{
flex:0 0 50px
}
.settingRow select{
max-width:52%;
min-width:0
}
.themeBtn{
padding:12px
}
.localStorageSliderRow strong{
white-space:nowrap
}
.localStorageRange{
padding:4px 14px 16px
}
.localStorageRange input{
height:32px;
margin:0;
cursor:pointer
}
.appMaintenance{
margin-top:24px;
padding:20px max(var(--ui-gutter),var(--safe-r)) 12px max(var(--ui-gutter),var(--safe-l))
}
.appMaintenance .clearAppCache{
display:block;
width:100%;
min-height:44px;
max-width:480px;
margin:10px auto 0
}
.appMaintenance>span{
max-width:480px;
margin:10px auto 0
}
.sheet{
max-height:calc(100vh - var(--safe-t) - 16px);
max-height:calc(100dvh - var(--safe-t) - 16px);
overflow-y:auto;
overscroll-behavior:contain
}
.updatePanel{
max-height:calc(100dvh - var(--safe-t) - var(--safe-b) - 32px)
}
#chatScreen.chatScreen,#directChatScreen.chatScreen,#systemChatScreen.chatScreen{
height:100vh;
height:100dvh;
min-height:0;
width:100%;
padding:0;
overflow:hidden;
}
#chatScreen .chatHead,#directChatScreen .chatHead,#systemChatScreen .chatHead{
box-sizing:border-box;
height:calc(58px + var(--safe-t));
flex:0 0 calc(58px + var(--safe-t));
min-width:0;
padding:var(--safe-t) max(12px,var(--safe-r)) 0 max(12px,var(--safe-l));
gap:8px;
}
#chatScreen .back,#directChatScreen .back,#systemChatScreen .back{
flex:none;
min-width:44px;
min-height:44px;
padding:10px 2px;
margin:0
}
#chatScreen .chatHeadTitle,#directChatScreen .chatHeadTitle,#systemChatScreen .chatHeadTitle{
min-width:0;
margin:0
}
#directChatScreen .chatHead>div:has(#directTitle){
flex:1;
min-width:0
}
.secureNote{
padding:7px max(14px,var(--safe-r)) 7px max(14px,var(--safe-l));
flex-shrink:0
}
#chatScreen .messages,#directChatScreen .messages,#systemChatScreen .messages{
flex:1 1 auto;
min-height:0;
min-width:0;
width:100%;
max-width:820px;
margin:0 auto;
padding:18px max(16px,var(--safe-r)) 20px max(16px,var(--safe-l));
gap:12px;
overflow-x:hidden;
overflow-y:auto;
overscroll-behavior:contain;
scroll-padding-bottom:20px;
}
#systemChatScreen .messages{
padding-bottom:calc(20px + var(--safe-b))
}
#chatScreen .bubble,#directChatScreen .bubble,#systemChatScreen .bubble{
flex-shrink:0;
max-width:min(84%,620px);
padding:11px 14px;
overflow-wrap:anywhere;
}
#systemChatScreen .bubble{
max-width:min(94%,680px)
}
#chatScreen .composer,#directChatScreen .composer{
flex-shrink:0;
min-width:0;
gap:8px;
min-height:0;
padding:10px max(12px,var(--safe-r)) calc(10px + var(--safe-b)) max(12px,var(--safe-l));
}
#chatScreen .composer textarea,#directChatScreen .composer textarea{
min-width:0;
min-height:44px;
max-height:120px;
max-width:100%;
padding:10px 13px;
}
#chatScreen .composer .round,#directChatScreen .composer .round{
width:44px;
height:44px;
flex:0 0 44px
}
#chatScreen .composer .round:not(.recording):not(.send):not(.stop),#directChatScreen .composer .round:not(.recording):not(.send):not(.stop){
border-width:1px;
border-style:solid
}
.pinnedBar{
padding-left:max(14px,var(--safe-l));
padding-right:max(14px,var(--safe-r))
}
.adminPanelTitle{
display:flex;
align-items:flex-start;
flex-wrap:wrap;
gap:12px;
min-width:0
}
.adminPanelTitle>div{
flex:1 1 220px;
min-width:0
}
.adminPanelTitle .badge{
flex:none;
padding:6px 9px;
white-space:nowrap
}
.adminKicker{
margin-bottom:10px
}
.broadcastCard{
margin:10px 0 26px;
padding:20px;
min-width:0
}
.broadcastCardHead{
display:flex;
align-items:flex-start;
gap:12px;
margin:0 0 22px;
padding-bottom:18px;
border-bottom-width:1px;
border-bottom-style:solid
}
.broadcastCardHead>div{
min-width:0
}
.broadcastCardIcon{
display:grid;
place-items:center;
width:38px;
height:38px;
flex:0 0 38px;
border-width:1px;
border-style:solid
}
.broadcastCardHead b{
display:block
}
.broadcastCardHead>div>span{
display:block;
margin-top:4px
}
.broadcastCard>label{
margin-bottom:9px
}
.broadcastText{
display:block;
min-width:0;
width:100%;
min-height:164px;
padding:14px;
resize:vertical
}
.broadcastText::placeholder{
opacity:1
}
.broadcastActions{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(150px,1fr);
gap:12px;
align-items:center;
margin-top:16px
}
.broadcastActions .ghost{
min-width:0;
width:100%;
min-height:46px;
padding:10px;
border-width:1px;
border-style:solid
}
.broadcastActions .primary{
min-width:0;
width:100%
}
.broadcastImagePreview{
grid-template-columns:56px minmax(0,1fr) 36px;
gap:10px;
max-width:100%;
padding:9px
}
.broadcastImagePreview img{
width:56px;
height:56px
}
.broadcastImagePreview button{
width:36px;
height:36px
}
#broadcastStatus{
min-height:0;
overflow-wrap:anywhere
}
#broadcastStatus:empty{
margin:0
}
.broadcastHistoryHeading{
display:flex;
align-items:baseline;
justify-content:space-between;
flex-wrap:wrap;
gap:5px 16px;
margin:0 2px 12px
}
.broadcastHistoryHeading h3{
margin:0
}
#notificationHistory{
display:grid;
grid-template-columns:minmax(0,1fr);
gap:14px;
width:100%;
min-width:0
}
#notificationHistory .broadcastHistory{
padding:16px;
grid-template-columns:minmax(0,1fr) auto;
gap:14px;
min-width:0
}
#notificationHistory .broadcastHistoryText{
align-self:center;
min-width:0;
overflow:hidden
}
#notificationHistory .broadcastHistoryText b{
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
white-space:normal;
overflow:hidden;
overflow-wrap:anywhere
}
#notificationHistory .broadcastHistoryText>span{
margin-top:7px;
overflow-wrap:anywhere
}
#notificationHistory .notificationSummary{
align-self:start;
min-width:64px;
padding:7px 9px;
border-width:1px;
border-style:solid;
text-align:center
}
#notificationHistory .notificationSummary span{
margin:3px 0 0
}
#notificationHistory .notificationRecipientList{
grid-column:1/-1;
gap:0;
border-top-width:1px;
border-top-style:solid;
padding-top:7px;
min-width:0
}
#notificationHistory .notificationRecipient{
grid-template-columns:minmax(0,1fr) auto;
min-height:30px;
gap:9px;
padding:6px 2px;
border-bottom-width:1px;
border-bottom-style:solid
}
#notificationHistory .notificationRecipient:last-child{
border-bottom-width:0
}
#notificationHistory .notificationRecipient>span{
margin:0
}
#notificationHistory .notificationExpand{
display:flex;
align-items:center;
justify-content:center;
gap:9px;
min-height:42px;
width:100%;
margin:0;
padding:8px 10px;
border-width:1px;
border-style:solid
}
#notificationHistory .notificationExpand::after{
content:'⌄'
}
#notificationHistory .expanded .notificationExpand::after{
transform:rotate(180deg)
}
#notificationHistory .expanded .notificationRecipientList{
max-height:50vh;
max-height:50dvh;
overflow-y:auto;
overscroll-behavior:contain;
scrollbar-width:thin;
scrollbar-color:var(--border-strong) transparent
}
.systemNoticeModal{
height:100vh;
height:100dvh;
box-sizing:border-box;
min-width:0;
overflow:hidden;
padding:calc(14px + var(--safe-t)) calc(14px + var(--safe-r)) calc(14px + var(--safe-b)) calc(14px + var(--safe-l));
overscroll-behavior:contain;
}
.systemNoticeWindow{
width:min(520px,100%);
min-width:0;
min-height:0;
max-height:100%;
border-width:1px;
border-style:solid;
}
.systemNoticeScroll{
flex:1 1 auto;
min-width:0;
min-height:0;
padding:24px 22px 18px;
overflow-x:hidden;
overflow-y:auto;
overscroll-behavior:contain;
scrollbar-width:thin;
scrollbar-color:var(--border-strong) transparent
}
.systemNoticeMark{
width:42px;
height:42px;
margin:0 auto 12px
}
.systemNoticeEyebrow{
margin:0
}
.systemNoticeWindow h2{
margin:7px 0 8px;
overflow-wrap:anywhere
}
.systemNoticeSubtitle{
max-width:330px;
margin:0 auto 20px
}
.systemNoticeBody{
max-height:190px;
min-width:0;
overflow:hidden
}
.systemNoticeText{
padding:15px;
border-width:1px;
border-style:solid;
white-space:pre-wrap;
overflow-wrap:anywhere
}
.systemNoticeImage img{
max-width:100%
}
.systemNoticeExpand{
display:block;
width:100%;
min-height:44px;
margin:14px 0 0;
padding:10px;
border-width:1px;
border-style:solid
}
.systemNoticeFooter{
grid-template-columns:minmax(0,1fr) auto;
gap:12px;
padding:16px 20px;
border-top-width:1px;
border-top-style:solid
}
.systemNoticeFooter>span{
text-align:left
}
.systemNoticeFooter .primary{
width:auto;
min-width:140px;
min-height:46px;
padding:12px 16px
}
.systemNoticeWindow.expanded{
position:absolute;
inset:var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);
width:auto;
max-width:none;
max-height:none;
min-height:0
}
.systemNoticeWindow.expanded .systemNoticeScroll{
padding:72px max(18px,calc((100% - 720px)/2)) 22px
}
.systemNoticeWindow.expanded .systemNoticeBody{
max-height:none;
overflow:visible
}
.systemNoticeWindow.expanded .systemNoticeExpand{
position:absolute;
z-index:2;
inset:12px 14px auto auto;
width:auto;
min-width:104px;
margin:0;
padding:10px 15px
}
.systemNoticeWindow.expanded .systemNoticeImage img{
max-height:none
}
.systemNoticeWindow.expanded .systemNoticeFooter{
padding-left:max(18px,calc((100% - 720px)/2));
padding-right:max(18px,calc((100% - 720px)/2))
}
@media(max-width:599px){
.content{
padding-top:20px
}
.adminPanelTitle:has(.adminKicker){
position:relative;
display:block
}
.adminPanelTitle:has(.adminKicker) .badge{
position:absolute;
top:0;
right:0
}
.adminKicker{
max-width:calc(100% - 93px);
margin-bottom:14px
}
.broadcastCard{
padding:16px
}
.broadcastActions{
grid-template-columns:minmax(0,1fr)
}
.broadcastCardHead{
margin-bottom:17px;
padding-bottom:16px
}
.broadcastHistoryHeading{
margin-top:22px
}
#notificationHistory .broadcastHistory{
padding:14px;
gap:12px
}
.systemNoticeWindow{
max-height:100%
}
.systemNoticeScroll{
padding:22px 17px 16px
}
.systemNoticeFooter{
padding:14px 17px
}
.settingRow select{
max-width:50%
}
.conversationToolbar{
grid-template-columns:minmax(0,1fr)
}
.conversationFilters{
max-width:100%;
overflow-x:auto
}
#authScreen .authHero{
height:144px
}
}
@media(max-width:359px){
.settingRow{
padding:11px 12px;
gap:8px
}
.broadcastCard{
padding:13px
}
.broadcastCardHead{
gap:9px
}
#notificationHistory .broadcastHistory{
padding:12px;
gap:10px
}
#notificationHistory .notificationRecipient{
gap:6px
}
.systemNoticeFooter{
grid-template-columns:minmax(0,1fr);
gap:9px
}
.systemNoticeFooter>span{
text-align:center
}
.systemNoticeFooter .primary{
width:100%
}
#chatScreen .composer,#directChatScreen .composer{
gap:6px;
padding-left:max(8px,var(--safe-l));
padding-right:max(8px,var(--safe-r))
}
}
@media(max-width:899px){
.nav{
height:var(--ui-nav-height);
min-height:var(--ui-nav-height);
padding:6px max(10px,var(--safe-r)) calc(6px + var(--safe-b)) max(10px,var(--safe-l))
}
.nav button{
min-height:52px;
min-width:0
}
}
@media(min-width:900px){
.shell{
padding-left:235px;
padding-bottom:24px
}
.content{
padding-top:32px
}
.nav{
display:flex!important;
flex-direction:column;
align-items:stretch;
justify-content:flex-start;
gap:8px;
position:fixed;
inset:0 auto 0 0;
transform:none;
width:235px;
height:100dvh;
border-width:0;
border-right-width:1px;
border-right-style:solid;
padding:calc(90px + var(--safe-t)) 14px calc(20px + var(--safe-b))
}
.nav button{
display:flex!important;
align-items:center;
gap:13px;
width:100%;
min-height:52px;
padding:12px 16px;
text-align:left
}
.nav .nicon{
margin:0;
flex:none
}
.nav button.on::before{
left:0;
top:50%;
width:2px;
height:24px;
transform:translateY(-50%)
}
.broadcastCard{
padding:24px
}
}
@media(orientation:landscape) and (max-height:500px){
#authScreen{
justify-content:flex-start
}
#authScreen .authHero{
height:116px
}
.systemNoticeScroll{
padding-top:14px;
padding-bottom:12px
}
.systemNoticeMark{
display:none
}
.systemNoticeSubtitle{
margin-bottom:12px
}
.systemNoticeFooter{
padding-top:10px;
padding-bottom:10px
}
.systemNoticeWindow.expanded .systemNoticeScroll{
padding-top:62px
}
}
html[data-theme="light"] #chatScreen .bubble .directTime,html[data-theme="light"] #directChatScreen .bubble .directTime,html[data-theme="light"] #systemChatScreen .bubble .directTime{
opacity:1
}
.topbar .menuSystemButton{
position:relative;
flex:0 0 auto;
width:auto;
min-width:78px;
height:42px;
display:flex!important;
align-items:center;
justify-content:flex-start;
gap:9px;
padding:0 10px;
border-width:0;
overflow:visible;
isolation:isolate;
}
.topbar .menuSystemButton .topAppIconLegacy{
display:none!important
}
.menuGlyph{
position:relative;
z-index:1;
width:20px;
height:15px;
display:flex;
flex:0 0 20px;
flex-direction:column;
justify-content:space-between
}
.menuGlyph i{
display:block;
width:20px;
height:2px
}
.menuLabel{
position:relative;
z-index:1
}
.topbar .menuSystemButton::after{
content:"";
position:absolute;
z-index:0;
left:8px;
bottom:3px;
width:62px;
height:7px;
opacity:.8;
pointer-events:none
}
.topbar .menuSystemButton:active{
transform:translateY(1px) scale(.97)
}
.topbar .menuSystemButton[aria-expanded="true"]::after{
opacity:1
}
@media(max-width:390px){
.topbar .menuSystemButton{
min-width:72px;
gap:7px;
padding-left:7px;
padding-right:7px
}
.menuGlyph,.menuGlyph i{
width:18px
}
}
.vkHead{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
margin:0 0 14px;
padding:14px;
border-width:1px;
border-style:solid
}
.vkIdentity{
min-width:0;
display:flex;
align-items:center;
gap:11px
}
.vkIdentity>img,.vkIdentity>span,.vkAvatar>img,.vkAvatar>span{
width:44px;
height:44px;
display:grid;
place-items:center;
flex:none;
object-fit:cover
}
.vkIdentity>div{
min-width:0
}
.vkIdentity b,.vkIdentity span{
display:block;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}
.vkIdentity span{
margin-top:3px
}
.vkHeadActions{
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
justify-content:flex-end
}
.vkHeadActions button{
min-height:40px;
padding:8px 12px
}
.vkConnectCard{
text-align:center;
padding:28px 18px;
border-width:1px;
border-style:solid
}
.vkLogo{
width:72px;
height:72px;
display:grid;
place-items:center;
margin:0 auto 14px
}
.vkConnectCard h2{
margin:0 0 8px
}
.vkConnectCard p{
max-width:480px;
margin:0 auto 17px
}
.vkConnectCard .primary{
width:min(100%,360px)
}
.vkConnectCard small{
display:block;
margin:10px auto 0;
max-width:420px
}
.vkTabs{
display:flex;
gap:6px;
margin:0 0 14px;
padding:4px;
overflow-x:auto;
border-width:1px;
border-style:solid;
scrollbar-width:none
}
.vkTabs::-webkit-scrollbar{
display:none
}
.vkTabs button{
flex:0 0 auto;
min-height:36px;
padding:0 12px
}
.vkBody{
min-height:260px
}
.vkLoading,.vkEmpty,.vkError{
padding:28px 15px;
text-align:center
}
.vkStories{
display:flex;
gap:11px;
margin:0 0 14px;
padding:4px 1px 9px;
overflow-x:auto;
scrollbar-width:none
}
.vkStories::-webkit-scrollbar{
display:none
}
.vkStory{
width:65px;
flex:0 0 65px;
padding:0;
text-align:center
}
.vkStory>span{
width:54px;
height:54px;
display:grid;
place-items:center;
margin:0 auto 5px;
padding:2px
}
.vkStory>span>img,.vkStory>span>span{
width:50px;
height:50px;
border-width:2px;
border-style:solid;
object-fit:cover
}
.vkStory b{
display:block;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}
.vkPost{
margin:0 0 12px;
overflow:hidden;
border-width:1px;
border-style:solid
}
.vkPost header{
display:flex;
align-items:center;
gap:10px;
padding:12px 13px
}
.vkPost header>img,.vkPost header>span{
width:39px;
height:39px;
object-fit:cover;
display:grid;
place-items:center
}
.vkPost header div{
min-width:0
}
.vkPost header b,.vkPost header span{
display:block
}
.vkPost header div span{
margin-top:2px
}
.vkPostText{
padding:0 13px 12px;
white-space:pre-wrap;
overflow-wrap:anywhere
}
.vkPostPhoto{
display:block;
width:100%;
max-height:620px;
object-fit:contain
}
.vkPost footer{
display:flex;
gap:7px;
padding:10px 12px;
border-top-width:1px;
border-top-style:solid
}
.vkPost footer button{
min-height:34px;
padding:0 11px
}
.vkSectionHead{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin:0 2px 9px
}
.vkSectionHead button{
min-height:36px;
padding:7px 11px
}
.vkDialogs,.vkUsers,.vkNotices{
overflow:hidden;
border-width:1px;
border-style:solid
}
.vkDialog,.vkUser{
width:100%;
min-width:0;
min-height:68px;
display:flex;
align-items:center;
gap:11px;
padding:11px 12px;
border-bottom-width:1px;
border-bottom-style:solid;
text-align:left
}
.vkDialog:last-child,.vkUser:last-child{
border-bottom-width:0
}
.vkAvatar{
width:44px;
height:44px;
flex:0 0 44px;
display:grid;
place-items:center
}
.vkDialogBody,.vkUserBody{
min-width:0;
flex:1
}
.vkDialogBody b,.vkDialogBody small,.vkUserBody b,.vkUserBody small{
display:block;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}
.vkDialogBody small,.vkUserBody small{
margin-top:4px
}
.vkDialog>i{
min-width:20px;
height:20px;
display:grid;
place-items:center;
padding:0 5px
}
.vkUser>button{
min-height:34px;
padding:0 10px
}
.vkChatHead{
display:flex;
align-items:center;
gap:12px;
margin-bottom:10px;
padding:9px 1px
}
.vkMessages{
height:min(52dvh,520px);
display:flex;
flex-direction:column;
gap:8px;
overflow:auto;
padding:12px;
border-width:1px;
border-style:solid
}
.vkBubble{
max-width:82%;
padding:9px 11px;
border-width:1px;
border-style:solid;
white-space:pre-wrap;
overflow-wrap:anywhere
}
.vkBubble.out{
align-self:flex-end
}
.vkBubble.in{
align-self:flex-start
}
.vkBubble small{
display:block;
margin-top:4px;
text-align:right
}
.vkComposer{
display:grid;
grid-template-columns:minmax(0,1fr) 44px;
gap:8px;
margin-top:9px
}
.vkComposer textarea{
min-width:0;
min-height:44px;
max-height:110px;
padding:11px 13px;
resize:none;
border-width:1px;
border-style:solid
}
.vkComposer button{
width:44px;
height:44px
}
.vkSearch{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:8px;
margin-bottom:10px
}
.vkSearch .primary{
min-width:82px;
padding:0 14px
}
.vkNotice{
display:flex;
gap:10px;
align-items:flex-start;
padding:12px;
border-bottom-width:1px;
border-bottom-style:solid
}
.vkNotice:last-child{
border-bottom-width:0
}
.vkNoticeIcon{
padding-top:4px
}
.vkNotice b,.vkNotice small{
display:block
}
.vkNotice small{
margin-top:3px
}
.vkComments{
max-height:44dvh;
overflow:auto;
margin:0 0 12px
}
.vkComment{
padding:9px 2px;
border-bottom-width:1px;
border-bottom-style:solid
}
.vkComment b,.vkComment span{
display:block
}
.vkComment span{
margin-top:3px
}
.vkNavBadge{
position:absolute;
top:3px;
left:calc(50% + 8px);
min-width:17px;
height:17px;
display:grid;
place-items:center;
padding:0 4px
}
.vkNavBadge.hidden{
display:none!important
}
@media(max-width:599px){
.vkHead{
align-items:flex-start;
flex-direction:column
}
.vkHeadActions{
width:100%;
display:grid;
grid-template-columns:1fr auto
}
.vkNative{
width:100%
}
.vkSearch{
grid-template-columns:1fr
}
.vkSearch .primary{
width:100%
}
.vkUser>button{
padding:0 8px
}
.vkMessages{
height:48dvh
}
}
.vkApiAccessCard .vkAccessList{
display:flex;
flex-wrap:wrap;
gap:7px;
margin:12px 0 16px
}
.vkApiAccessCard .vkAccessList span{
padding:7px 9px;
border-width:1px;
border-style:solid
}
.vkCapabilityPanel{
margin:0 0 14px;
padding:13px;
border-width:1px;
border-style:solid
}
.vkCapabilityPanel.compact{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px
}
.vkCapabilityGrid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:7px
}
.vkCapability{
min-width:0;
display:flex;
align-items:center;
gap:9px;
padding:9px 10px;
border-width:1px;
border-style:solid
}
.vkCapability>i{
width:8px;
height:8px;
flex:0 0 8px
}
.vkCapability span{
min-width:0
}
.vkCapability b,.vkCapability small{
display:block;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}
.vkCapability small{
margin-top:2px
}
.vkCapabilityActions{
display:flex;
justify-content:flex-end;
margin-top:10px
}
.vkClassicSteps{
display:grid;
gap:8px;
margin:14px 0;
text-align:left
}
.vkClassicSteps span{
display:flex;
align-items:flex-start;
gap:9px
}
.vkClassicSteps b{
width:22px;
height:22px;
display:grid;
place-items:center;
flex:0 0 22px;
border-width:1px;
border-style:solid
}
.vkUnavailable{
display:grid;
gap:9px;
padding:24px 16px;
border-width:1px;
border-style:dashed;
text-align:center
}
.vkUnavailable button{
justify-self:center
}
.vkTabs button:disabled{
opacity:.34;
cursor:not-allowed
}
@media(max-width:460px){
.vkCapabilityGrid{
grid-template-columns:1fr
}
.vkCapabilityPanel.compact{
align-items:flex-start;
flex-direction:column
}
.vkCapabilityPanel.compact button{
width:100%
}
}
.vkStatusCard,.vkCommunityHead{
margin:0 0 14px;
padding:14px;
border-width:1px;
border-style:solid
}
.vkStatusTitle,.vkCommunityHead{
display:flex;
align-items:center;
gap:11px
}
.vkStatusTitle>i{
width:10px;
height:10px
}
.vkStatusTitle>div{
min-width:0;
flex:1
}
.vkStatusTitle b,.vkStatusTitle span,.vkStatusCard>b,.vkStatusCard>span{
display:block
}
.vkStatusTitle span,.vkStatusCard>span{
margin-top:4px
}
.vkStatusCard .vkAccessList{
display:flex;
flex-wrap:wrap;
gap:7px;
margin:13px 0
}
.vkStatusCard .vkAccessList span{
padding:7px 9px;
border-width:1px;
border-style:solid
}
.vkQuickLinks{
display:flex;
gap:8px;
flex-wrap:wrap
}
.vkQuickLinks button{
min-height:36px
}
.vkCommunityCard{
margin-top:14px
}
.vkCommunityHead{
justify-content:space-between
}
.vkCommunityHead>.vkIdentity{
min-width:0
}
.vkCommunityHead>button{
flex:none
}
.vkCommunityHelp{
display:grid;
gap:8px;
margin:12px 0 14px
}
.vkCommunityHelp span{
display:flex;
gap:9px;
align-items:flex-start
}
.vkCommunityHelp b{
width:22px;
height:22px;
display:grid;
place-items:center;
flex:none
}
@media(max-width:599px){
.vkCommunityHead{
align-items:flex-start;
flex-direction:column
}
.vkCommunityHead>button{
width:100%
}
.vkQuickLinks{
display:grid;
grid-template-columns:1fr 1fr
}
}
.rootVoiceOnly{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:92px;
padding:10px 16px;
border-width:1px;
border-style:solid
}
.homeDashboard{
display:grid;
gap:16px;
padding-bottom:12px
}
.homeHero{
position:relative;
overflow:hidden;
padding:24px 21px;
border-width:1px;
border-style:solid
}
.homeHero::after{
content:"";
position:absolute;
right:-48px;
top:-68px;
width:180px;
height:180px;
pointer-events:none
}
.homeEyebrow{
display:block;
margin-bottom:10px
}
.homeHero h1{
margin:0 0 8px
}
.homeHero p{
max-width:560px;
margin:0
}
.homePlaceholder{
display:flex;
align-items:center;
gap:14px;
padding:18px;
border-width:1px;
border-style:dashed
}
.homePlaceholderIcon{
width:42px;
height:42px;
display:grid;
place-items:center;
flex:none;
border-width:1px;
border-style:solid
}
.homePlaceholder b,.homePlaceholder span{
display:block
}
.homePlaceholder div>span{
margin-top:5px
}
.homeSettingsDraft{
margin:14px 0;
padding:15px;
border-width:1px;
border-style:solid
}
.homeSettingsDraft b,.homeSettingsDraft span{
display:block
}
.homeSettingsDraft span{
margin-top:5px
}
#adminNav.adminDrawerEntry{
align-items:center;
min-height:60px;
border-width:1px;
border-style:solid
}
.adminNavLabel{
min-width:0;
display:flex;
flex-direction:column;
align-items:flex-start;
gap:4px
}
.adminNavLabel em{
display:inline-flex;
align-items:center;
min-height:18px;
padding:2px 7px;
border-width:1px;
border-style:solid
}
.drawerAdminMark{
display:inline-flex!important;
width:max-content;
max-width:100%;
margin-top:5px;
padding:2px 6px;
border-width:1px;
border-style:solid
}
.drawerAdminMark.hidden{
display:none!important
}
.adminInnerHeading{
margin:16px 1px 10px
}
.adminInnerHeading>span{
display:block
}
.adminInnerHeading h2{
margin:5px 0 4px
}
.adminInnerHeading p{
margin:0
}
.adminHomeLayout{
display:grid;
grid-template-columns:minmax(180px,235px) minmax(0,1fr);
gap:14px;
margin-top:14px
}
.adminHomeMenu{
display:flex;
flex-direction:column;
gap:5px;
padding:8px;
border-width:1px;
border-style:solid
}
.adminHomeMenu button{
min-width:0;
min-height:41px;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:9px 10px;
border-width:1px;
border-style:solid;
text-align:left
}
.adminHomeMenu button span{
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}
.adminHomeMenu button i{
flex:none
}
.adminHomeWorkspace{
min-width:0;
padding:17px;
border-width:1px;
border-style:solid
}
.adminHomeWorkspaceHead{
padding-bottom:14px;
border-bottom-width:1px;
border-bottom-style:solid
}
.adminHomeWorkspaceHead h2{
margin:5px 0 0
}
.adminHomePlaceholder{
margin-top:14px;
padding:15px;
border-width:1px;
border-style:dashed
}
.adminHomePlaceholder b,.adminHomePlaceholder span{
display:block
}
.adminHomePlaceholder span{
margin-top:5px
}
@media(max-width:700px){
.adminHomeLayout{
grid-template-columns:1fr
}
.adminHomeMenu{
display:grid;
grid-template-columns:1fr 1fr
}
.adminHomeMenu button{
min-height:39px
}
.adminHomeWorkspace{
padding:14px
}
}
@media(max-width:390px){
.adminHomeMenu{
grid-template-columns:1fr
}
}
.profileAdminWord{
display:block!important;
width:max-content;
margin-top:6px
}
.homeHeroWithAvatar{
padding-right:96px
}
.homeUserAvatar{
position:absolute;
z-index:2;
top:18px;
right:18px;
width:58px;
height:58px;
padding:0;
overflow:visible;
border-width:1px;
border-style:solid;
touch-action:none
}
.homeUserAvatar img{
display:block;
width:100%;
height:100%;
object-fit:cover
}
.homeUserAvatar.previewExitArmed:active{
transform:scale(.985)
}
.masterUserPreview #adminNav,.masterUserPreview #drawerAdminMark,.masterUserPreview .adminOnly{
display:none!important
}
.masterPreviewExit{
position:fixed;
z-index:10020;
top:max(12px,env(safe-area-inset-top));
right:max(12px,env(safe-area-inset-right));
dis:flex;
align-items:center;
gap:8px;
min-height:42px;
padding:9px 13px;
border:1px solid rgba(91,196,255,.58);
border-radius:13px;
background:rgba(4,10,18,.94);
color:#eefaff;
font:700 12px/1.1 inherit;
letter-spacing:.02em;
box-shadow:0 10px 28px rgba(0,0,0,.34),0 0 18px rgba(79,146,255,.18),inset 0 0 16px rgba(95,56,255,.08);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
cursor:pointer;
}
.masterPreviewExit:active{transform:translateY(1px) scale(.985)}
.masterPreviewExit:disabled{opacity:.6;pointer-events:none}
.masterPreviewExitIcon{font-size:18px;line-height:1;color:#7bd9ff}
@media(max-width:600px){.masterPreviewExit{top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));min-height:40px;padding:8px 11px;font-size:11px}}
.adminPreviewSetting{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:16px;
align-items:center;
margin-top:14px;
padding:16px;
border-width:1px;
border-style:solid
}
.adminPreviewSetting b,.adminPreviewSetting span,.adminPreviewSetting small{
display:block
}
.adminPreviewSetting span{
margin-top:5px
}
.adminPreviewSetting small{
margin-top:8px
}
.adminPreviewSetting .secondary{
min-width:190px
}
@media(max-width:600px){
.homeHeroWithAvatar{
padding-right:78px
}
.homeUserAvatar{
width:50px;
height:50px;
top:16px;
right:16px
}
.adminPreviewSetting{
grid-template-columns:1fr
}
.adminPreviewSetting .secondary{
width:100%;
min-width:0
}
}
.vkApiAccessCard .vkAccessList{
display:flex;
flex-wrap:wrap;
gap:7px;
margin:12px 0 16px
}
.vkApiAccessCard .vkAccessList span{
padding:7px 9px;
border-width:1px;
border-style:solid
}
.workTabs{
display:flex;
gap:6px;
overflow:auto;
margin:12px 0 18px;
padding-bottom:2px
}
.workTabs button{
white-space:nowrap;
border-width:1px;
border-style:solid;
padding:9px 12px
}
.wsStorage{
display:grid;
grid-template-columns:1fr auto;
gap:10px;
align-items:center;
border-width:1px;
border-style:solid;
padding:13px 14px;
margin-bottom:15px
}
.wsStorageBar{
grid-column:1/-1;
height:5px;
overflow:hidden
}
.wsStorageBar i{
display:block;
height:100%;
max-width:100%
}
.wsBoardGrid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
gap:11px
}
.wsBoardCard{
min-height:125px;
text-align:left;
padding:15px;
border-width:1px;
border-style:solid
}
.wsBoardCard b{
display:block;
margin-bottom:28px
}
.wsToolbar{
position:sticky;
top:58px;
z-index:21;
display:flex;
gap:6px;
overflow:auto;
padding:9px;
border-width:1px;
border-style:solid;
margin-bottom:10px
}
.wsToolbar button{
white-space:nowrap;
padding:9px 11px
}
.wsCanvasWrap{
overflow:auto;
height:calc(100vh - 210px);
min-height:480px;
border-width:1px;
border-style:solid
}
.wsCanvas{
position:relative;
width:1600px;
height:1100px;
touch-action:none
}
.wsItem{
position:absolute;
min-width:80px;
min-height:42px;
border-width:1px;
border-style:solid;
touch-action:none;
user-select:none
}
.wsItem img{
display:block;
width:100%;
height:100%;
object-fit:contain;
pointer-events:none
}
.wsText{
padding:10px 12px;
white-space:pre-wrap
}
.wsNote{
padding:12px;
white-space:pre-wrap
}
.wsSvg{
position:absolute;
inset:0;
width:1600px;
height:1100px;
pointer-events:none
}
.wsFileList{
display:flex;
flex-direction:column;
gap:9px
}
.wsFileRow{
display:flex;
align-items:center;
gap:10px;
padding:12px 13px;
border-width:1px;
border-style:solid
}
.wsFileRow .grow{
flex:1;
min-width:0
}
.wsFileRow b,.wsFileRow span{
display:block;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}
.wsCloudBadge{
padding:4px 7px
}
.wsLocalBadge{
padding:4px 7px
}
.wsMediaTray{
display:flex;
gap:9px;
overflow-x:auto;
padding:8px 2px 12px;
margin-bottom:8px;
scrollbar-width:thin
}
.wsMediaEmpty{
min-height:64px;
display:flex;
align-items:center;
padding:0 10px;
border-width:1px;
border-style:dashed;
min-width:260px
}
.wsMediaThumb{
position:relative;
flex:0 0 94px;
height:76px;
overflow:hidden;
border-width:1px;
border-style:solid;
cursor:pointer
}
.wsMediaThumb img{
width:100%;
height:100%;
object-fit:cover;
display:block;
opacity:.92
}
.wsMediaThumb span{
position:absolute;
left:6px;
bottom:5px;
max-width:70px;
padding:2px 5px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis
}
.wsTrayPin{
position:absolute;
right:5px;
top:5px;
width:25px;
height:25px;
border-width:0;
display:grid;
place-items:center;
padding:0
}
.wsCanvas{
isolation:isolate
}
.wsCanvas::before{
content:"";
position:absolute;
inset:0;
z-index:0;
pointer-events:none;
opacity:0
}
.wsCanvas.bg-dots::before{
opacity:1;
-webkit-mask-image:radial-gradient(ellipse at 42% 50%,#000 0 34%,#000b 52%,transparent 86%);
mask-image:radial-gradient(ellipse at 42% 50%,#000 0 34%,#000b 52%,transparent 86%)
}
.wsCanvas.bg-black::before{
opacity:0
}
.wsImageLayer,.wsAnnotationLayer{
position:absolute;
inset:0;
width:1600px;
height:1100px;
pointer-events:none
}
.wsImageLayer{
z-index:1
}
.wsAnnotationLayer{
z-index:2
}
.wsImageLayer .wsItem,.wsAnnotationLayer .wsItem{
pointer-events:auto
}
.wsSvg{
z-index:0
}
.wsAnnotationLayer>.wsItem{
z-index:1
}
.wsImageItem.movable{
cursor:grab
}
.wsImageItem.movable:active{
cursor:grabbing
}
.wsImageItem.pinned{
cursor:default
}
.wsPinButton{
position:absolute;
top:7px;
right:7px;
width:31px;
height:31px;
border-width:0;
display:grid;
place-items:center;
padding:0;
opacity:.82
}
.wsText,.wsNote{
mix-blend-mode:difference;
white-space:pre-wrap
}
.wsNote{
padding:12px
}
.wsText{
padding:10px 12px
}
.wsCutSelection{
pointer-events:none
}
.wsCutout{
opacity:.72;
border-width:1px;
border-style:dashed;
cursor:grab
}
.wsCutout.dragging{
opacity:.48;
cursor:grabbing
}
.wsCutoutInner{
position:relative;
width:100%;
height:100%;
overflow:visible
}
.wsCutoutSvg{
position:absolute;
inset:0;
width:100%;
height:100%;
overflow:visible;
pointer-events:none
}
.wsCutChild{
position:absolute;
pointer-events:none
}
.wsCanvas.cut-mode .wsImageLayer .wsItem,.wsCanvas.cut-mode .wsAnnotationLayer .wsItem{
pointer-events:none
}
.wsCanvas.cut-mode{
cursor:crosshair
}
.wsToolbar #wsCutApply{
border-width:1px;
border-style:solid
}
.wsToolbar #wsBg{
border-width:1px;
border-style:solid
}
@media(max-width:600px){
.wsMediaThumb{
flex-basis:82px;
height:68px
}
.wsCanvasWrap{
height:calc(100vh - 265px);
min-height:420px
}
.wsToolbar{
top:54px
}
}
.wsCanvas{
touch-action:pan-x pan-y
}
.wsCanvas.draw-mode{
touch-action:none
}
.wsCanvasWrap{
-webkit-overflow-scrolling:touch;
overscroll-behavior:contain
}
body.wsNoScroll{
overflow:hidden
}
.content.wsBoardActive{
max-width:none;
padding:8px 10px 10px
}
.wsWorkspaceShell{
position:relative;
display:flex;
flex-direction:column;
width:100%;
height:calc(100dvh - 132px);
min-height:540px;
overflow:hidden;
border-width:1px;
border-style:solid;
isolation:isolate
}
.wsTopChrome{
position:relative;
z-index:30;
display:flex;
align-items:center;
gap:6px;
min-height:42px;
padding:4px 7px
}
.wsTopBoardName{
min-width:0;
flex:1;
text-align:center;
pointer-events:none
}
.wsTopBoardName b{
display:block;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
opacity:.7
}
.wsTopBoardName span{
opacity:.42
}
.wsChromeBtn{
width:32px;
height:32px;
flex:0 0 32px;
border-width:1px;
border-style:solid;
display:grid;
place-items:center;
padding:0;
opacity:.38
}
.wsChromeBtn:hover,.wsChromeBtn:active,.wsChromeBtn.on{
opacity:.95
}
.wsSidePanel{
position:absolute;
z-index:40;
top:45px;
bottom:10px;
left:8px;
width:min(270px,82vw);
padding:10px;
overflow:auto;
transform:translateX(calc(-100% - 18px));
border-width:1px;
border-style:solid
}
.wsSidePanel.open{
transform:translateX(0)
}
.wsSideHead{
display:flex;
align-items:center;
justify-content:space-between;
padding:3px 4px 9px
}
.wsSideHead button{
width:29px;
height:29px
}
.wsToolGrid{
display:grid;
grid-template-columns:1fr 1fr;
gap:6px
}
.wsToolGrid button,.wsSideActions button{
min-height:38px;
padding:8px 10px;
border-width:1px;
border-style:solid;
text-align:left
}
.wsSideActions{
display:grid;
gap:6px;
margin-top:10px;
padding-top:10px;
border-top-width:1px;
border-top-style:solid
}
.wsWorkspaceShell .wsMediaTray{
position:absolute;
z-index:35;
top:45px;
left:48px;
right:48px;
display:none;
margin:0;
padding:8px;
min-height:86px;
border-width:1px;
border-style:solid
}
.wsWorkspaceShell .wsMediaTray.open{
display:flex
}
.wsWorkspaceShell .wsCanvasWrap{
flex:1;
min-height:0;
height:auto;
margin:0 7px 7px;
overflow:auto
}
.wsWorkspaceShell .wsCanvas{
width:max(1600px,100%);
height:max(1100px,100%)
}
.wsWorkspaceShell .wsImageLayer,.wsWorkspaceShell .wsAnnotationLayer,.wsWorkspaceShell .wsSvg{
width:100%;
height:100%
}
.wsImageItem img{
width:100%;
height:100%;
object-fit:contain;
display:block
}
.wsWorkspaceShell.is-fullscreen{
position:fixed;
z-index:10050;
inset:0;
width:100vw;
height:100dvh;
min-height:0;
border-width:0;
padding-top:env(safe-area-inset-top,0px);
padding-bottom:env(safe-area-inset-bottom,0px);
padding-left:env(safe-area-inset-left,0px);
padding-right:env(safe-area-inset-right,0px)
}
.wsWorkspaceShell.is-fullscreen .wsCanvasWrap{
margin:0;
border-width:0
}
.wsWorkspaceShell.is-fullscreen .wsTopChrome{
min-height:38px
}
@media(min-width:900px){
.content.wsBoardActive{
padding:8px
}
.wsWorkspaceShell{
height:calc(100dvh - 76px)
}
.wsSidePanel{
width:280px
}
.wsWorkspaceShell .wsMediaTray{
left:60px;
right:60px
}
}
@media(max-width:600px){
.content.wsBoardActive{
padding:2px 4px 4px
}
.wsWorkspaceShell{
height:calc(100dvh - 126px);
min-height:470px
}
.wsWorkspaceShell .wsCanvasWrap{
margin:0 3px 3px
}
.wsTopChrome{
min-height:38px;
padding:3px 5px
}
.wsChromeBtn{
width:30px;
height:30px;
flex-basis:30px
}
.wsWorkspaceShell .wsMediaTray{
top:41px;
left:38px;
right:8px
}
.wsSidePanel{
top:41px;
left:4px;
bottom:5px
}
}
.wsItemContent{
position:absolute;
inset:0;
width:100%;
height:100%;
transform-origin:50% 50%;
will-change:transform;
pointer-events:none
}
.wsImageItem .wsItemContent,.wsCutout .wsItemContent{
overflow:visible
}
.wsResizeHandle{
position:absolute;
z-index:12;
width:14px;
height:14px;
border-width:2px;
border-style:solid;
padding:0;
touch-action:none
}
.wsResizeHandle.tl{
left:-8px;
top:-8px
}
.wsResizeHandle.tm{
left:50%;
top:-8px;
transform:translateX(-50%)
}
.wsResizeHandle.tr{
right:-8px;
top:-8px
}
.wsResizeHandle.mr{
right:-8px;
top:50%;
transform:translateY(-50%)
}
.wsResizeHandle.br{
right:-8px;
bottom:-8px
}
.wsResizeHandle.bm{
left:50%;
bottom:-8px;
transform:translateX(-50%)
}
.wsResizeHandle.bl{
left:-8px;
bottom:-8px
}
.wsResizeHandle.ml{
left:-8px;
top:50%;
transform:translateY(-50%)
}
.wsRotateHandle{
position:absolute;
z-index:13;
left:50%;
top:-44px;
transform:translateX(-50%);
width:30px;
height:30px;
padding:0;
border-width:1px;
border-style:solid;
display:grid;
place-items:center;
touch-action:none;
cursor:grab
}
.wsRotateHandle:active{
cursor:grabbing
}
.wsRotateHandle:after{
content:"";
position:absolute;
width:1px;
height:13px;
left:50%;
top:29px;
pointer-events:none
}
.wsTransformBar{
position:absolute;
z-index:14;
left:50%;
top:-80px;
transform:translateX(-50%);
display:flex;
align-items:center;
gap:3px;
padding:3px 4px;
border-width:1px;
border-style:solid;
white-space:nowrap;
touch-action:manipulation
}
.wsTransformBar button{
width:28px;
height:27px;
border-width:0;
padding:0;
display:grid;
place-items:center
}
.wsAngleLabel{
min-width:37px;
padding:0 3px;
text-align:center
}
.wsImageItem.pinned .wsResizeHandle,.wsImageItem.pinned .wsRotateHandle,.wsImageItem.pinned .wsTransformBar{
opacity:.9
}
@media(max-width:600px){
.wsResizeHandle{
width:18px;
height:18px
}
.wsResizeHandle.tl{
left:-10px;
top:-10px
}
.wsResizeHandle.tm{
top:-10px
}
.wsResizeHandle.tr{
right:-10px;
top:-10px
}
.wsResizeHandle.mr{
right:-10px
}
.wsResizeHandle.br{
right:-10px;
bottom:-10px
}
.wsResizeHandle.bm{
bottom:-10px
}
.wsResizeHandle.bl{
left:-10px;
bottom:-10px
}
.wsResizeHandle.ml{
left:-10px
}
.wsTransformBar{
top:-84px
}
.wsTransformBar button{
width:31px;
height:30px
}
.wsRotateHandle{
top:-47px
}
}
.wsFileItem.movable{
cursor:grab
}
.wsFileItem.movable:active{
cursor:grabbing
}
.wsFileItem.pinned{
cursor:default
}
.wsFileVisual{
width:100%;
height:100%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:8px;
padding:14px;
border-width:1px;
border-style:solid;
text-align:center;
overflow:hidden
}
.wsFileVisual strong{
display:grid;
place-items:center;
min-width:54px;
height:38px;
padding:0 9px;
border-width:1px;
border-style:solid
}
.wsFileVisual span{
display:block;
width:100%;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}
.wsMediaFileIcon{
width:100%;
height:100%;
display:grid;
place-items:center
}
.wsCanvasStage{
position:relative;
flex:0 0 auto;
width:1600px;
height:1100px;
transform-origin:0 0
}
.wsCanvasStage>.wsCanvas{
transform-origin:0 0;
will-change:transform
}
.wsZoomLabel{
min-width:43px;
height:28px;
padding:0 6px;
border-width:1px;
border-style:solid;
opacity:.55
}
.wsZoomLabel:active{
opacity:1
}
.wsCanvasWrap{
touch-action:pan-x pan-y;
overscroll-behavior:contain;
-webkit-overflow-scrolling:touch
}
.wsCanvasWrap.pinching{
touch-action:none
}
@media(max-width:600px){
.wsZoomLabel{
min-width:39px;
height:26px;
padding:0 4px
}
.wsZoomBtn{
width:28px;
flex-basis:28px
}
}
.wsAudioItem{
min-width:64px;
min-height:64px
}
.wsAudioItem.movable{
cursor:grab
}
.wsAudioItem.movable:active{
cursor:grabbing
}
.wsAudioItem.pinned{
cursor:default
}
.wsAudioItem .wsItemContent{
pointer-events:auto;
overflow:visible
}
.wsAudioWidget{
container-type:size;
width:100%;
height:100%;
display:grid;
grid-template-columns:auto minmax(0,1fr);
align-items:center;
gap:10px;
padding:9px 11px;
border-width:1px;
border-style:solid;
overflow:hidden
}
.wsAudioControls{
display:flex;
align-items:center;
justify-content:center;
gap:6px;
pointer-events:auto
}
.wsAudioControl{
pointer-events:auto;
display:grid;
place-items:center;
min-width:35px;
height:35px;
padding:0 7px;
border-width:1px;
border-style:solid;
touch-action:manipulation
}
.wsAudioPlay{
width:47px;
height:47px;
padding-left:3px
}
.wsAudioMeta{
min-width:0;
display:none;
grid-template-columns:minmax(0,1fr) auto;
gap:2px 10px;
align-items:center
}
.wsAudioMeta b{
grid-column:1/-1;
display:block;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}
.wsAudioMeta small{
text-align:right
}
.wsAudioThumb{
display:grid;
place-items:center
}
.wsAudioMiniPlay{
position:relative;
z-index:2;
width:43px;
height:43px;
border-width:1px;
border-style:solid;
padding:0 0 0 2px;
touch-action:manipulation
}
.wsAudioThumb .wsTrayPin{
width:22px;
height:22px;
opacity:.72
}
@container (max-width:150px){
.wsAudioWidget{
display:grid;
grid-template-columns:1fr;
padding:6px
}
.wsAudioControls .wsAudioBack,.wsAudioControls .wsAudioForward,.wsAudioControls .wsAudioStop{
display:none
}
.wsAudioPlay{
width:46px;
height:46px
}
.wsAudioMeta{
display:none!important
}
}
@container (min-width:151px){
.wsAudioWidget{
grid-template-columns:1fr;
padding:7px
}
.wsAudioControls{
gap:5px
}
.wsAudioMeta{
display:none
}
}
@container (min-width:300px) and (min-height:95px){
.wsAudioWidget{
grid-template-columns:auto minmax(0,1fr);
padding:10px 13px
}
.wsAudioMeta{
display:grid
}
}
}

/* 2026-09-14 · ADMIN Главное publications */
.homePublications{display:grid;gap:12px;margin-top:16px}.homePublication{border:1px solid var(--line,rgba(255,255,255,.12));border-radius:18px;padding:16px;background:rgba(8,15,22,.78)}.homePublicationHead{display:flex;align-items:center;gap:9px;margin-bottom:10px}.homePublicationHead b{font-size:13px;letter-spacing:.04em}.homePublicationHead time{margin-left:auto;font-size:11px;opacity:.58}.homePublicationIcon{font-size:18px}.homePublicationText{white-space:pre-wrap;line-height:1.55;font-size:15px}.homePublication.urgent{border-color:rgba(255,67,76,.58);background:linear-gradient(135deg,rgba(96,8,15,.42),rgba(13,15,20,.88))}.homePublication.urgent .homePublicationHead b,.homePublication.urgent .homePublicationIcon{color:#ff5962}.homePublicationLoading{padding:18px;opacity:.62}.publicationEditor{min-height:145px;resize:vertical}.publicationEditorActions{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}.publicationPreviewCard{margin-top:12px;padding:14px;border:1px solid rgba(96,190,255,.25);border-radius:16px;background:rgba(15,22,30,.72)}.publicationPreviewCard>span{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.62;margin-bottom:8px}.publicationPreviewCard>div{white-space:pre-wrap;line-height:1.5}.publicationPreviewCard.urgent{border-color:rgba(255,67,76,.5);background:rgba(92,8,14,.24)}.adminHomePlaceholder .primary{margin-top:14px}

.homePublication.news{border-color:rgba(80,170,255,.36)}.homePublication.news .homePublicationHead b{color:#7cc4ff}.homePublication.updates{border-color:rgba(70,220,190,.32)}.homePublication.updates .homePublicationHead b{color:#73ddc5}.homePublication.whatsnew{border-color:rgba(180,115,255,.34)}.homePublication.whatsnew .homePublicationHead b{color:#c69aff}.homePublication.knowledge{border-color:rgba(245,190,80,.30)}.homePublication.knowledge .homePublicationHead b{color:#e9c06c}.homePublication.root{border-color:rgba(100,220,255,.32)}.homePublication.root .homePublicationHead b{color:#8fe6ff}.homePublication.project{border-color:rgba(130,150,255,.30)}.homePublication.project .homePublicationHead b{color:#aebaff}.homePublication.newpost{border-color:rgba(110,215,150,.30)}.homePublication.newpost .homePublicationHead b{color:#8ad9a8}.homePublication.press{border-color:rgba(220,140,190,.30)}.homePublication.press .homePublicationHead b{color:#dda0c7}

/* 2026-09-14 · публикации: изображения, аудио, файлы */
.homePublicationMedia{display:grid;gap:10px;margin-top:14px}.homePublicationImage{overflow:hidden;border:1px solid rgba(255,255,255,.1);border-radius:15px;background:rgba(1,5,9,.72)}.homePublicationImage img{display:block;width:100%;max-height:460px;object-fit:contain;background:#020609}.homePublicationAudio{display:grid;gap:9px;padding:11px 12px;border:1px solid rgba(122,164,255,.2);border-radius:14px;background:rgba(8,13,21,.72)}.homePublicationAudioMeta{display:flex;align-items:center;gap:10px;min-width:0}.homePublicationAudioMeta>span{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(115,81,255,.16);font-size:18px}.homePublicationAudioMeta>div{display:grid;min-width:0}.homePublicationAudioMeta b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.homePublicationAudioMeta small,.homePublicationFile small{opacity:.58;font-size:11px}.homePublicationAudio audio{display:block;width:100%;height:38px}.homePublicationFile{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px;padding:11px 12px;border:1px solid rgba(255,255,255,.11);border-radius:14px;background:rgba(8,13,19,.7);color:inherit;text-decoration:none}.homePublicationFileIcon{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:rgba(90,170,255,.12);font-size:19px}.homePublicationFile>span:nth-child(2){display:grid;min-width:0}.homePublicationFile b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.homePublicationFile i{font-style:normal;font-size:11px;opacity:.66}.publicationAttachBar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0}.publicationAttachBar button{min-height:42px}.publicationAttachmentPreview,.publicationPreviewMedia{display:grid;gap:9px;margin:10px 0}.publicationNoAttachments{display:block;padding:10px 12px;border:1px dashed rgba(255,255,255,.12);border-radius:12px;font-size:12px;opacity:.56}.publicationDraftImage{display:grid;gap:7px}.publicationDraftImage img{display:block;width:100%;max-height:280px;object-fit:contain;border-radius:13px;background:#020609;border:1px solid rgba(255,255,255,.1)}.publicationDraftImage span,.publicationDraftAudio>span{font-size:11px;opacity:.7}.publicationDraftAudio{display:grid;gap:7px;padding:10px 11px;border:1px solid rgba(122,164,255,.2);border-radius:13px;background:rgba(7,12,20,.7)}.publicationDraftAudio audio{width:100%;height:38px}.publicationDraftFile{display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;gap:9px;padding:10px 11px;border:1px solid rgba(255,255,255,.1);border-radius:13px;background:rgba(7,12,18,.68)}.publicationDraftFile>span{font-size:18px}.publicationDraftFile>div{display:grid;min-width:0}.publicationDraftFile b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.publicationDraftFile small{font-size:11px;opacity:.58}.publicationPreviewMedia:empty{display:none}@media(max-width:520px){.publicationAttachBar{grid-template-columns:1fr}.homePublication{padding:14px}.homePublicationImage img{max-height:360px}.homePublicationFile{grid-template-columns:36px minmax(0,1fr)}.homePublicationFile i{display:none}}

/* 2026-09-14 · SYSTEM ERROR internal share */
.musicShare{width:38px;height:38px;border-radius:12px;background:rgba(92,120,255,.12);color:#a9c8ff;font-size:19px;border:1px solid rgba(120,150,255,.22)}
.seShareSheet{display:grid;gap:10px}.seShareEyebrow{margin:0;color:#7fdcff;font-size:11px;letter-spacing:.12em}.seShareContactList{display:grid;gap:8px;max-height:52vh;overflow:auto}
.seShareContact{width:100%;display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:11px;padding:10px 11px;border-radius:15px;background:rgba(9,15,24,.78);border:1px solid rgba(123,159,255,.16);color:inherit;text-align:left}.seShareContact>span:nth-child(2){display:grid;gap:2px}.seShareContact b{font-size:14px}.seShareContact small{font-size:11px;opacity:.58}.seShareContact i{font-style:normal;opacity:.6;font-size:20px}.seShareAvatar{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:radial-gradient(circle at 30% 25%,rgba(98,202,255,.3),rgba(45,66,110,.7));border:1px solid rgba(120,205,255,.28);font-weight:700}
.internalShareCard{display:grid;gap:10px;margin-top:7px;padding:12px;border-radius:16px;border:1px solid rgba(104,178,255,.23);background:linear-gradient(145deg,rgba(8,16,27,.94),rgba(12,9,24,.9));box-shadow:0 0 24px rgba(55,110,255,.08) inset}.internalShareHead{display:grid;grid-template-columns:42px minmax(0,1fr);gap:10px;align-items:center}.internalShareIcon{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:linear-gradient(145deg,rgba(65,176,255,.18),rgba(145,66,255,.16));border:1px solid rgba(122,183,255,.22);font-size:19px}.internalShareHead>div{display:grid;gap:2px;min-width:0}.internalShareHead small{font-size:9px;letter-spacing:.1em;color:#7fdcff}.internalShareHead b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.internalShareHead span{font-size:11px;opacity:.58}.internalShareTracks{display:grid;gap:6px}.internalShareTrack{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:8px;padding:8px 9px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);color:inherit;text-align:left}.internalShareTrack>span{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:rgba(95,137,255,.13);font-size:12px}.internalShareTrack>div{display:grid;min-width:0}.internalShareTrack b,.internalShareTrack small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.internalShareTrack b{font-size:12px}.internalShareTrack small{font-size:10px;opacity:.56}.internalShareTrack.playing{border-color:rgba(90,210,255,.38);background:rgba(56,120,180,.1)}.internalShareAudio{width:100%;height:38px}.internalShareLoading,.internalShareUnavailable{display:grid;gap:4px;padding:8px;font-size:12px;opacity:.72}.internalShareUnavailable span{font-size:11px;opacity:.65}
@media(max-width:520px){.internalShareCard{padding:10px}.seShareContact{padding:9px}.internalShareTracks{max-height:250px;overflow:auto}}

/* VK Music compact icon button */
.musicVKButton{width:68px!important;min-width:68px!important;height:58px!important;padding:6px 8px!important;display:grid!important;grid-template-rows:1fr auto;place-items:center;gap:1px;border-radius:16px!important}
.musicVKButton .musicVKLogo{display:grid;place-items:center;width:34px;height:28px;border-radius:9px;background:#07f;color:#fff;font:800 12px/1 system-ui,sans-serif;letter-spacing:-.04em;box-shadow:0 0 18px rgba(0,119,255,.28)}
.musicVKButton small{font-size:10px;line-height:1;color:inherit;opacity:.78;letter-spacing:.02em}

/* Interactive weekly news · 2026-09-16 */
.homePublication.interactive{padding:12px;border-color:rgba(69,223,255,.32);box-shadow:0 0 28px rgba(69,223,255,.06)}
.homeInteractiveArticle{border:1px solid rgba(69,223,255,.18);border-radius:17px;overflow:hidden;background:linear-gradient(180deg,rgba(10,18,27,.96),rgba(6,11,17,.96))}
.homeInteractiveArticle>summary{list-style:none;cursor:pointer;padding:17px 16px;display:block}.homeInteractiveArticle>summary::-webkit-details-marker{display:none}
.homeNewsKicker{font-size:10px;font-weight:900;letter-spacing:.13em;color:#45dfff;text-transform:uppercase}.homeInteractiveSummary h3{margin:6px 0 5px;font-size:clamp(21px,5vw,31px);line-height:1.08;letter-spacing:-.025em}
.homeNewsPeriod{display:inline-flex;margin:5px 0 7px;padding:4px 9px;border:1px solid rgba(255,255,255,.10);border-radius:999px;font-size:11px;opacity:.7}.homeInteractiveSummary p{margin:5px 0 10px;line-height:1.5;color:rgba(235,244,255,.78)}
.homeNewsExpandHint{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;color:#8da0b6}.homeNewsExpandHint i{font-style:normal;color:#45dfff;font-size:20px}.homeInteractiveArticle[open] .homeNewsExpandHint i{transform:rotate(45deg)}
.homeInteractiveBody{padding:0 14px 15px}.homeNewsStats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 12px}.homeNewsStat{padding:11px;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:rgba(7,13,20,.76)}
.homeNewsStat b{display:block;font-size:20px}.homeNewsStat span{display:block;margin-top:2px;font-size:10px;line-height:1.25;opacity:.62}.homeNewsToolbar{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0 12px}.homeNewsToolbar button{border:1px solid rgba(69,223,255,.17);background:rgba(9,17,25,.88);color:inherit;border-radius:10px;padding:8px 10px;font-size:11px}
.homeNewsSection{margin:8px 0;border:1px solid rgba(255,255,255,.09);border-radius:13px;background:rgba(8,14,21,.78);overflow:hidden}.homeNewsSection>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px;padding:12px}.homeNewsSection>summary::-webkit-details-marker{display:none}
.homeNewsSection>summary b{font-size:13px;line-height:1.3}.homeNewsSection>summary i{font-style:normal;color:#45dfff;font-size:18px}.homeNewsSection[open]>summary i{transform:rotate(45deg)}.homeNewsSectionBody{padding:0 12px 12px;color:rgba(235,244,255,.78);font-size:13px}.homeNewsSectionBody p{margin:0 0 8px}.homeNewsSectionBody ul{margin:7px 0 0;padding-left:19px}.homeNewsSectionBody li{margin:5px 0}
.homeNewsStatus{font-size:8px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;padding:4px 6px;border-radius:999px;border:1px solid}.homeNewsStatus.done{color:#55e6a5;border-color:rgba(85,230,165,.28)}.homeNewsStatus.work{color:#ffd166;border-color:rgba(255,209,102,.28)}.homeNewsStatus.idea,.homeNewsStatus.next{color:#45dfff;border-color:rgba(69,223,255,.28)}.homeNewsStatus.risk{color:#ff6b79;border-color:rgba(255,107,121,.28)}
.homeNewsPriority{display:grid;gap:3px;margin-top:10px;padding:10px 11px;border-radius:11px;background:rgba(2,8,13,.7);border:1px solid rgba(69,223,255,.12)}.homeNewsPriority strong{font-size:10px;color:#fff}.homeNewsPriority span{font-size:12px;line-height:1.4}
.homeNewsActions{margin-top:14px;padding-top:13px;border-top:1px solid rgba(255,255,255,.08)}.homeNewsActionsTitle{font-size:11px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;color:#8da0b6;margin-bottom:8px}.homeNewsNext{display:grid;grid-template-columns:27px minmax(0,1fr);gap:9px;margin:8px 0}.homeNewsNext>span{display:grid;place-items:center;width:27px;height:27px;border-radius:9px;background:rgba(69,223,255,.10);color:#45dfff;font-weight:900}.homeNewsNext b{font-size:12px}.homeNewsNext p{margin:2px 0 0;font-size:11px;opacity:.65;line-height:1.4}
.homeNewsLink{display:flex;justify-content:center;margin-top:13px;padding:10px 12px;border-radius:11px;border:1px solid rgba(69,223,255,.22);background:rgba(69,223,255,.05);color:#dff9ff;text-decoration:none;font-size:12px;font-weight:800}
@media(min-width:720px){.homeNewsStats{grid-template-columns:repeat(4,minmax(0,1fr))}.homeInteractiveBody{padding:0 18px 18px}.homeInteractiveArticle>summary{padding:20px 19px}}