/* 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
}
.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)
}
.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
}
.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:0!important;
padding-bottom:calc(72px + var(--safe-b))!important
}
.topbar{left:0!important}
.nav{
position:fixed!important;
inset:auto 0 0 0!important;
transform:none!important;
width:100%!important;
height:calc(72px + var(--safe-b))!important;
border-width:0!important;
border-top-width:1px!important;
border-top-style:solid!important;
border-right-width:0!important;
display:flex!important;
flex-direction:row!important;
align-items:stretch!important;
justify-content:center!important;
padding:5px max(14px,var(--safe-r)) calc(5px + var(--safe-b)) max(14px,var(--safe-l))!important;
gap:0!important
}
.nav button{
flex:1 1 0!important;
max-width:150px!important;
min-width:88px!important;
text-align:center!important;
padding:5px 12px!important
}
.nav .nicon{
display:grid!important;
width:28px!important;
margin:0 auto!important
}
.content{
padding:28px 38px calc(94px + var(--safe-b))!important
}
}
@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
}
.adminPasswordReset{
padding:7px 9px!important;
min-height:32px!important;
font-size:12px!important;
white-space:nowrap
}
.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{
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
}
.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
}
.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){
}
.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:0!important
}
}
.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 .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:0!important;
padding-bottom:calc(72px + var(--safe-b))!important
}
.content{
padding-top:32px;
padding-bottom:calc(94px + var(--safe-b))!important
}
.nav{
display:flex!important;
flex-direction:row!important;
align-items:stretch!important;
justify-content:center!important;
gap:0!important;
position:fixed!important;
inset:auto 0 0 0!important;
transform:none!important;
width:100%!important;
height:calc(72px + var(--safe-b))!important;
border-width:0!important;
border-top-width:1px!important;
border-top-style:solid!important;
border-right-width:0!important;
padding:5px max(14px,var(--safe-r)) calc(5px + var(--safe-b)) max(14px,var(--safe-l))!important
}
.nav button{
display:flex!important;
flex:1 1 0!important;
max-width:150px!important;
min-width:88px!important;
align-items:center!important;
justify-content:center!important;
gap:3px!important;
min-height:58px!important;
padding:5px 12px!important;
text-align:center!important
}
.nav .nicon{
margin:0!important;
flex:none!important
}
.nav button.on::before{
left:50%!important;
top:0!important;
width:30px!important;
height:2px!important;
transform:translateX(-50%)!important
}
.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
}
.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(40,199,255,.58);background:linear-gradient(135deg,rgba(5,100,150,.42),rgba(13,15,20,.88))}.homePublication.urgent .homePublicationHead b,.homePublication.urgent .homePublicationIcon{color:#35c7ff}.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(40,199,255,.5);background:rgba(5,100,150,.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:#40c7ff;border-color:rgba(64,199,255,.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}}

/* ROOT Voice Nodes */
.voiceNodeGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin:14px 0}.voiceNodeCard{border:1px solid rgba(102,160,210,.22);border-radius:18px;background:linear-gradient(145deg,rgba(9,16,24,.92),rgba(6,10,16,.92));padding:16px;box-shadow:0 12px 34px rgba(0,0,0,.18)}.voiceNodeCard.primary{border-color:rgba(72,211,255,.48);box-shadow:0 0 28px rgba(72,211,255,.08)}.voiceNodeHead{display:flex;align-items:flex-start;gap:12px}.voiceNodeHead>div{min-width:0;flex:1}.voiceNodeHead h3{margin:3px 0 2px;font-size:17px}.voiceNodeHead p{margin:0;font-size:12px;opacity:.62}.voiceNodeModel{font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:#80dcff}.voiceNodeState{flex:0 0 auto;border:1px solid;border-radius:999px;padding:5px 8px;font-size:9px;font-weight:900;letter-spacing:.07em}.voiceNodeState.online{color:#60efaf;border-color:rgba(96,239,175,.32);background:rgba(96,239,175,.06)}.voiceNodeState.paired{color:#ffcb68;border-color:rgba(255,203,104,.32);background:rgba(255,203,104,.06)}.voiceNodeState.setup{color:#7fdcff;border-color:rgba(127,220,255,.32);background:rgba(127,220,255,.06)}.voiceNodeState.off{color:#9aa7b6;border-color:rgba(154,167,182,.25)}.voiceNodeMeta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}.voiceNodeMeta span{display:grid;min-width:0;padding:9px 10px;border:1px solid rgba(255,255,255,.07);border-radius:11px;background:rgba(255,255,255,.025);font-size:11px;overflow:hidden;text-overflow:ellipsis}.voiceNodeMeta b{font-size:9px;letter-spacing:.06em;text-transform:uppercase;opacity:.48;margin-bottom:3px}.voiceNodeActions{display:flex;gap:7px;flex-wrap:wrap}.voiceNodeActions button{min-height:36px;font-size:11px}.voiceNodePairBox{display:grid;gap:6px;padding:14px;border:1px solid rgba(92,205,255,.24);border-radius:14px;background:rgba(7,15,23,.86)}.voiceNodePairBox span{font-size:9px;letter-spacing:.08em;opacity:.52;margin-top:5px}.voiceNodePairBox code{display:block;white-space:pre-wrap;word-break:break-all;color:#dff6ff}.voiceNodeInfo{margin-top:16px}@media(max-width:520px){.voiceNodeGrid{grid-template-columns:1fr}.voiceNodeMeta{grid-template-columns:1fr}}
.voiceNodeWebBridge{position:fixed;inset:0;z-index:10050;background:rgba(1,4,8,.78);backdrop-filter:blur(14px);display:grid;place-items:center;padding:max(18px,env(safe-area-inset-top)) 16px max(18px,env(safe-area-inset-bottom))}.voiceNodeWebBridgeCard{width:min(560px,100%);border:1px solid rgba(77,214,255,.35);border-radius:22px;padding:18px;background:linear-gradient(155deg,rgba(8,18,28,.98),rgba(4,8,13,.98));box-shadow:0 0 50px rgba(62,201,255,.13)}.voiceNodeWebBridgeTop{display:flex;gap:12px;align-items:flex-start}.voiceNodeWebBridgeTop>div{flex:1}.voiceNodeWebBridgeTop span{font-size:10px;letter-spacing:.12em;color:#73ddff}.voiceNodeWebBridgeTop h3{margin:4px 0 0;font-size:20px}.voiceNodeWebState{display:flex;align-items:center;gap:9px;margin:18px 0;padding:11px 12px;border:1px solid rgba(81,212,255,.16);border-radius:13px;background:rgba(77,214,255,.04)}.voiceNodeWebState i{width:8px;height:8px;border-radius:50%;background:#55e6a5;box-shadow:0 0 14px #55e6a5}.voiceNodeWebState b{font-size:13px}.voiceNodeWebTranscript{margin:10px 0;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:rgba(255,255,255,.025)}.voiceNodeWebTranscript span{display:block;font-size:9px;letter-spacing:.1em;opacity:.45}.voiceNodeWebTranscript p{min-height:22px;margin:5px 0 0;white-space:pre-wrap}.voiceNodeWebBridgeCard>small{display:block;margin-top:12px;opacity:.55;line-height:1.45}

/* Voice Orb v3 · barge-in + wake word */
.liveVoiceBtn{
  border-radius:50%!important;overflow:visible!important;
  touch-action:none!important;overscroll-behavior:none!important;
  user-select:none!important;-webkit-user-select:none!important;-webkit-touch-callout:none!important;
  -webkit-user-drag:none!important;cursor:grab!important;will-change:left,top,transform;
  background:radial-gradient(circle at 32% 24%,rgba(255,255,255,.22),rgba(84,210,255,.10) 38%,rgba(3,12,20,.88) 72%)!important;
  border:1px solid rgba(118,226,255,.48)!important;
  box-shadow:inset 0 0 22px rgba(131,230,255,.10),0 8px 28px rgba(0,0,0,.36),0 0 28px rgba(77,207,255,.18)!important;
  backdrop-filter:blur(18px) saturate(145%);-webkit-backdrop-filter:blur(18px) saturate(145%);
  color:#eafaff!important;
}
.liveVoiceBtn>span:last-child{font-size:8px;letter-spacing:.16em;font-weight:800;opacity:.76}
.liveVoiceBtn.pressed{transform:scale(.96);transition:transform .07s ease!important}
.liveVoiceBtn.dragging{cursor:grabbing!important;transform:scale(1.06);transition:transform .08s ease!important;box-shadow:inset 0 0 25px rgba(131,230,255,.14),0 10px 34px rgba(0,0,0,.42),0 0 36px rgba(77,207,255,.28)!important}
.liveVoiceBtn.dragging *{pointer-events:none!important}
.liveVoiceMiniOrb{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:rgba(115,226,255,.08);border:1px solid rgba(146,233,255,.22);
  box-shadow:inset 0 0 16px rgba(96,218,255,.11),0 0 18px rgba(72,205,255,.10);
}
.liveVoiceOverlay{
  background:radial-gradient(circle at 50% 44%,rgba(22,74,96,.28),rgba(2,8,13,.88) 55%,rgba(1,5,9,.96))!important;
  backdrop-filter:blur(28px) saturate(130%);-webkit-backdrop-filter:blur(28px) saturate(130%);
}
.liveVoiceCore{
  --voice-level:0;width:190px!important;height:190px!important;border-radius:50%!important;
  background:radial-gradient(circle at 38% 30%,rgba(255,255,255,.18),rgba(89,218,255,.10) 30%,rgba(5,17,27,.74) 66%,rgba(2,8,13,.92))!important;
  border:1px solid rgba(118,226,255,.42)!important;

  box-shadow:inset 0 0 36px rgba(105,225,255,.10),0 0 34px rgba(73,205,255,.14),0 24px 70px rgba(0,0,0,.42)!important;
  transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease;
}
.liveVoiceAura{
  position:absolute;inset:-18px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(93,220,255,calc(.05 + var(--voice-level)*.16)),transparent 67%);
  filter:blur(5px);transition:opacity .12s linear;
}
.liveVoiceWave{position:relative;z-index:3;height:82px;display:flex;align-items:center;justify-content:center;gap:6px}
.liveVoiceWave i{
  display:block;width:5px;height:48px;border-radius:99px;transform:scaleY(.28);transform-origin:center;
  background:linear-gradient(180deg,#effcff 0%,#74e5ff 52%,#50a8ff 100%);
  box-shadow:0 0 10px rgba(102,224,255,.42);transition:transform 70ms linear,opacity .15s ease;
}
.liveVoiceMiniOrb .liveVoiceWave{height:28px;gap:3px}
.liveVoiceMiniOrb .liveVoiceWave i{width:3px;height:20px;box-shadow:0 0 7px rgba(102,224,255,.38)}
.liveVoiceCore.waiting .liveVoiceWave i{opacity:.42}
.liveVoiceCore.hearing{transform:scale(1.025);box-shadow:inset 0 0 42px rgba(105,225,255,.14),0 0 50px rgba(73,205,255,.28),0 24px 70px rgba(0,0,0,.42)!important}
.liveVoiceCore.thinking .liveVoiceWave i{animation:rootVoiceThink .9s ease-in-out infinite alternate}
.liveVoiceCore.speaking .liveVoiceWave i{animation:rootVoiceSpeak .56s ease-in-out infinite alternate}
.liveVoiceCore.interrupted{border-color:rgba(255,190,110,.55)!important}

.liveVoiceWave i:nth-child(2){animation-delay:-.12s}.liveVoiceWave i:nth-child(3){animation-delay:-.24s}
.liveVoiceWave i:nth-child(4){animation-delay:-.36s}.liveVoiceWave i:nth-child(5){animation-delay:-.18s}
.liveVoiceWave i:nth-child(6){animation-delay:-.30s}.liveVoiceWave i:nth-child(7){animation-delay:-.08s}
.liveVoiceRings i{border-radius:50%!important;border-color:rgba(112,226,255,.18)!important;animation:rootVoiceRing 2.4s ease-out infinite}
.liveVoiceRings i:nth-child(2){animation-delay:.8s}.liveVoiceRings i:nth-child(3){animation-delay:1.6s}
.liveVoiceStatus{font-size:18px;font-weight:720;letter-spacing:.01em}
.liveVoiceHint{font-size:13px;line-height:1.45;opacity:.68}
.liveVoiceControls{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.liveVoiceControl{
  min-height:46px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.07);color:inherit;display:flex;align-items:center;gap:8px;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);font-weight:700;
}
.liveVoiceControl svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8}
.liveVoiceControl.stop{border-color:rgba(62,199,255,.28);background:rgba(42,199,255,.08)}
.liveVoiceControl.wake.on{border-color:rgba(91,225,255,.44);background:rgba(67,203,255,.12);box-shadow:0 0 18px rgba(75,207,255,.10)}
.wakeDot{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor;opacity:.7}
.liveVoiceClose{border-radius:50%!important;background:rgba(5,14,22,.66)!important;backdrop-filter:blur(14px)}

@keyframes rootVoiceRing{0%{transform:scale(.78);opacity:.46}100%{transform:scale(1.38);opacity:0}}
@keyframes rootVoiceThink{from{transform:scaleY(.28);opacity:.55}to{transform:scaleY(.72);opacity:1}}
@keyframes rootVoiceSpeak{from{transform:scaleY(.30)}to{transform:scaleY(1.16)}}
@media(max-width:520px){
  .liveVoiceCore{width:170px!important;height:170px!important}
  .liveVoiceWave{height:72px;gap:5px}
  .liveVoiceWave i{height:42px}
  .liveVoiceControls{width:min(92vw,360px)}
  .liveVoiceControl{flex:1;justify-content:center;min-width:136px}
}

/* 2026-10-01 · publication type symbols + semantic accents */
.homePublication,.publicationPreviewCard{--pub-rgb:91,188,255;--pub-accent:rgb(var(--pub-rgb))}
.homePublication.urgent,.publicationPreviewCard.urgent{--pub-rgb:255,95,109}
.homePublication.news,.publicationPreviewCard.news{--pub-rgb:91,188,255}
.homePublication.updates,.publicationPreviewCard.updates{--pub-rgb:69,221,183}
.homePublication.whatsnew,.publicationPreviewCard.whatsnew{--pub-rgb:193,140,255}
.homePublication.knowledge,.publicationPreviewCard.knowledge{--pub-rgb:240,191,100}
.homePublication.root,.publicationPreviewCard.root{--pub-rgb:98,231,255}
.homePublication.project,.publicationPreviewCard.project{--pub-rgb:159,170,255}
.homePublication.newpost,.publicationPreviewCard.newpost{--pub-rgb:110,231,168}
.homePublication.press,.publicationPreviewCard.press{--pub-rgb:227,154,203}

.homePublication{
  border-color:rgba(var(--pub-rgb),.34)!important;
  background:
    linear-gradient(145deg,rgba(var(--pub-rgb),.075),rgba(8,15,22,.86) 42%,rgba(8,15,22,.82))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 12px 34px rgba(0,0,0,.16)
}
.homePublicationHead{
  display:grid!important;
  grid-template-columns:40px minmax(0,1fr) auto;
  align-items:center!important;
  gap:11px!important;
  margin-bottom:12px!important
}
.homePublicationIcon{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:13px;
  border:1px solid rgba(var(--pub-rgb),.34);
  background:rgba(var(--pub-rgb),.10);
  color:var(--pub-accent)!important;
  font:800 19px/1 ui-monospace,SFMono-Regular,Menlo,monospace!important;
  text-shadow:0 0 16px rgba(var(--pub-rgb),.32);
  box-shadow:inset 0 0 18px rgba(var(--pub-rgb),.045)
}
.homePublicationHead b{
  min-width:0;
  color:var(--pub-accent)!important;
  font-size:clamp(18px,4.7vw,23px)!important;
  line-height:1.08!important;
  font-weight:850!important;
  letter-spacing:-.018em!important;
  text-shadow:0 0 20px rgba(var(--pub-rgb),.12)
}
.homePublicationHead time{
  align-self:start;
  margin:4px 0 0!important;
  color:rgba(230,240,248,.55);
  white-space:nowrap
}
.homePublication .homeInteractiveSummary h3{
  color:var(--pub-accent)!important;
  text-shadow:0 0 22px rgba(var(--pub-rgb),.12)
}

.publicationPreviewCard{
  border-color:rgba(var(--pub-rgb),.34)!important;
  background:linear-gradient(145deg,rgba(var(--pub-rgb),.08),rgba(10,17,24,.78))!important
}
.publicationPreviewCard>span{
  color:var(--pub-accent)!important;
  opacity:.9!important;
  font-weight:800!important
}
.publicationEditorTitle{
  display:flex;
  align-items:center;
  gap:10px
}
.publicationEditorTitle>span{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:1px solid rgba(91,188,255,.25);
  border-radius:11px;
  background:rgba(91,188,255,.08);
  font:800 17px/1 ui-monospace,SFMono-Regular,Menlo,monospace
}

.adminHomeMenu button{
  grid-template-columns:30px minmax(0,1fr) auto!important
}
.adminHomeTypeIcon{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:9px;
  border:1px solid rgba(var(--pub-rgb,91,188,255),.22);
  background:rgba(var(--pub-rgb,91,188,255),.07);
  color:rgb(var(--pub-rgb,91,188,255));
  font:800 14px/1 ui-monospace,SFMono-Regular,Menlo,monospace
}
.adminHomeMenu button[data-admin-home="urgent"]{--pub-rgb:255,95,109}
.adminHomeMenu button[data-admin-home="news"]{--pub-rgb:91,188,255}
.adminHomeMenu button[data-admin-home="updates"]{--pub-rgb:69,221,183}
.adminHomeMenu button[data-admin-home="whatsnew"]{--pub-rgb:193,140,255}
.adminHomeMenu button[data-admin-home="knowledge"]{--pub-rgb:240,191,100}
.adminHomeMenu button[data-admin-home="root"]{--pub-rgb:98,231,255}
.adminHomeMenu button[data-admin-home="project"]{--pub-rgb:159,170,255}
.adminHomeMenu button[data-admin-home="newpost"]{--pub-rgb:110,231,168}
.adminHomeMenu button[data-admin-home="press"]{--pub-rgb:227,154,203}
.adminHomeMenu button[data-admin-home="posts"]{--pub-rgb:180,190,205}
.adminHomeMenu button[data-admin-home="settings"]{--pub-rgb:150,165,185}
.adminHomeMenu button.on{
  border-color:rgba(var(--pub-rgb),.42)!important;
  background:linear-gradient(135deg,rgba(var(--pub-rgb),.11),rgba(255,255,255,.025))!important
}
.adminHomeMenu button.on span{color:rgb(var(--pub-rgb));font-weight:800}

@media(max-width:520px){
  .homePublicationHead{grid-template-columns:36px minmax(0,1fr);gap:9px!important}
  .homePublicationIcon{width:36px;height:36px;border-radius:11px;font-size:17px!important}
  .homePublicationHead time{grid-column:2;margin-top:-4px!important;font-size:10px!important}
  .homePublicationHead b{font-size:clamp(18px,5.6vw,22px)!important}
}

.adminHomeMenu button{display:grid!important;align-items:center!important}
.publicationEditorTitle{--pub-rgb:91,188,255;color:rgb(var(--pub-rgb))!important}
.publicationEditorTitle.urgent{--pub-rgb:255,95,109}
.publicationEditorTitle.news{--pub-rgb:91,188,255}
.publicationEditorTitle.updates{--pub-rgb:69,221,183}
.publicationEditorTitle.whatsnew{--pub-rgb:193,140,255}
.publicationEditorTitle.knowledge{--pub-rgb:240,191,100}
.publicationEditorTitle.root{--pub-rgb:98,231,255}
.publicationEditorTitle.project{--pub-rgb:159,170,255}
.publicationEditorTitle.newpost{--pub-rgb:110,231,168}
.publicationEditorTitle.press{--pub-rgb:227,154,203}
.publicationEditorTitle>span{border-color:rgba(var(--pub-rgb),.32)!important;background:rgba(var(--pub-rgb),.10)!important;color:rgb(var(--pub-rgb))!important;box-shadow:0 0 18px rgba(var(--pub-rgb),.08)}
/* ROOT SE unified composer — final visual layer */
#rootComposer,#directComposer{
  gap:9px!important;
  padding:10px max(12px,var(--safe-r)) calc(11px + var(--safe-b)) max(12px,var(--safe-l))!important;
  border-top:1px solid rgba(19,199,255,.24)!important;
  background:linear-gradient(180deg,rgba(3,8,12,.82),rgba(1,4,7,.98))!important;
  box-shadow:0 -10px 32px rgba(0,0,0,.34),0 -1px 22px rgba(19,199,255,.08)!important;
  backdrop-filter:blur(22px) saturate(145%);
  -webkit-backdrop-filter:blur(22px) saturate(145%);
}
#rootComposer textarea,#directComposer textarea{
  min-height:44px!important;
  max-height:132px!important;
  padding:12px 15px!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:22px!important;
  background:rgba(18,20,23,.94)!important;
  color:var(--text-primary)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 0 1px rgba(19,199,255,.025)!important;
}
#rootComposer textarea:focus,#directComposer textarea:focus{
  border-color:var(--neon-red-border)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 3px rgba(19,199,255,.08),0 0 22px rgba(19,199,255,.10)!important;
}
#rootComposer .round,#directComposer .round{
  flex:0 0 44px!important;
  width:44px!important;height:44px!important;
  border-radius:50%!important;
  border:1px solid rgba(255,255,255,.12)!important;
  background:rgba(17,20,23,.96)!important;
  color:#f5f7f8!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px rgba(19,199,255,.02),0 0 16px rgba(19,199,255,.07)!important;
}
#rootComposer .round.send,#directComposer .round.send{
  border-color:rgba(19,199,255,.58)!important;
  background:radial-gradient(circle at 35% 28%,#2cc7ff,#08b0e2 62%,#047a9c)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 0 14px rgba(19,199,255,.34),0 0 28px rgba(19,199,255,.18)!important;
  color:#fff!important;font-weight:800!important;
}
#rootComposer .round.send:disabled,#directComposer .round.send:disabled{filter:saturate(.55);box-shadow:none!important}
#rootComposer .round.attach,#directComposer .round.attach{font-size:25px!important}
#rootComposer #micBtn,#directComposer .directVoice{font-size:20px!important}
.composerScrollControls{
  flex:0 0 34px;
  width:34px;
  height:44px;
  display:flex;
  flex-direction:column;
  gap:3px;
  align-items:stretch;
  justify-content:center;
}
.composerScrollBtn{
  width:34px;height:20px;padding:0!important;
  border:1px solid rgba(19,199,255,.24)!important;
  border-radius:9px!important;
  background:rgba(16,18,21,.94)!important;
  color:rgba(64,199,255,.96)!important;
  font-size:14px!important;line-height:18px!important;
  box-shadow:0 0 10px rgba(19,199,255,.06)!important;
}
.composerScrollBtn:active{transform:scale(.94);background:rgba(19,199,255,.12)!important}
.composerScrollBtn:disabled{opacity:.22!important;box-shadow:none!important}
#rootComposer .round:hover,#directComposer .round:hover{border-color:rgba(19,199,255,.34)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 20px rgba(19,199,255,.14)!important}
#rootComposer .round.send:hover,#directComposer .round.send:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 0 20px rgba(19,199,255,.44),0 0 36px rgba(19,199,255,.22)!important}
#rootComposer .round:focus-visible,#directComposer .round:focus-visible,.composerScrollBtn:focus-visible{outline:2px solid rgba(46,199,255,.75)!important;outline-offset:2px!important}
@media(max-width:560px){
  #rootComposer,#directComposer{gap:7px!important;padding-left:8px!important;padding-right:8px!important}
  #rootComposer .round,#directComposer .round{flex-basis:42px!important;width:42px!important;height:42px!important}
  #rootComposer textarea,#directComposer textarea{min-width:0!important;padding-left:13px!important;padding-right:13px!important}
  .composerScrollControls{flex-basis:31px;width:31px;height:42px}
  .composerScrollBtn{width:31px;height:19px}
}
@media(max-width:380px){
  #rootComposer .round.attach,#directComposer .round.attach{font-size:22px!important}
  #rootComposer .round,#directComposer .round{flex-basis:40px!important;width:40px!important;height:40px!important}
  .composerScrollControls{display:none}
}
/* Neon language for the navigation and primary interactive surfaces */
#appShell>.nav>button{position:relative;transition:color .18s ease,filter .18s ease,transform .18s ease}
#appShell>.nav>button.on{color:#fff!important;text-shadow:0 0 12px rgba(19,199,255,.42)}
#appShell>.nav>button.on::before{background:var(--neon-red)!important;box-shadow:0 0 12px rgba(19,199,255,.72),0 0 24px rgba(19,199,255,.32)!important}
#appShell>.nav>button.on .nicon{color:var(--neon-red-hot)!important;filter:drop-shadow(0 0 7px rgba(19,199,255,.50))}
#appShell>.nav>button:active{transform:translateY(1px) scale(.98)}
.topbar .iconBtn,#appShell .menuButton{transition:box-shadow .18s ease,border-color .18s ease,color .18s ease}
.topbar .iconBtn:hover,#appShell .menuButton:hover{border-color:rgba(19,199,255,.34)!important;box-shadow:0 0 18px rgba(19,199,255,.12)!important}
.drawerNav button.on{border-color:rgba(19,199,255,.30)!important;box-shadow:inset 3px 0 0 var(--neon-red),0 0 18px rgba(19,199,255,.08)!important}
.statusDot{box-shadow:0 0 8px currentColor,0 0 18px rgba(19,199,255,.30)!important}


/* ROOT system notices: opaque readable surfaces — 20261008-notice-bg1 */
#systemNoticeModal.systemNoticeModal{background:rgba(2,7,14,.78)!important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#systemNoticeModal .systemNoticeWindow{background:#0d1b2b!important;background-image:none!important;color:#edf6ff!important;border-color:#4d7395!important;border-radius:22px!important;box-shadow:0 22px 70px rgba(0,0,0,.7),0 0 24px rgba(76,160,255,.12)!important;opacity:1!important}
#systemNoticeModal .systemNoticeScroll{background:#0d1b2b!important;color:#edf6ff!important}
#systemNoticeModal .systemNoticeText{background:#152740!important;color:#edf6ff!important;border-color:#45617e!important;border-radius:12px;line-height:1.6!important;text-shadow:none!important}
#systemNoticeModal :is(h2,.systemNoticeEyebrow){color:#edf6ff!important;text-shadow:none!important}
#systemNoticeModal .systemNoticeSubtitle,#systemNoticeModal .systemNoticeFooter>span{color:#c4d6e8!important;text-shadow:none!important}
#systemNoticeModal .systemNoticeFooter{background:#101f31!important;color:#edf6ff!important;border-top:1px solid #45617e!important}
#systemNoticeModal .systemNoticeExpand{background:#20364e!important;color:#edf6ff!important;border:1px solid #6b8bab!important}
#systemNoticeModal .systemNoticeAck{background:#285a91!important;color:#ffffff!important;border:1px solid #7ab9f2!important}
#systemChatScreen .systemNotification{background:#12243a!important;color:#edf6ff!important;border-color:#45617e!important}
#systemUpdateOverlay .androidLiveUpdateCard{background:#0d1b2b!important;color:#edf6ff!important;opacity:1!important}
#systemUpdateOverlay .androidLiveUpdateText b{color:#edf6ff!important}
#systemUpdateOverlay .androidLiveUpdateText span{color:#c4d6e8!important}