|  |  |  | .android { | 
					
						
							|  |  |  |   #header { | 
					
						
							|  |  |  |     background-color: $blue; | 
					
						
							|  |  |  |     color: white; | 
					
						
							|  |  |  |     transition: background-color 0.5s; | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |     &.inactive { | 
					
						
							|  |  |  |       background-color: $grey_l; | 
					
						
							|  |  |  |       color: $grey_d; | 
					
						
							|  |  |  |     } | 
					
						
							|  |  |  |   } | 
					
						
							|  |  |  |   .contact-details .name { | 
					
						
							|  |  |  |     font-weight: 400; | 
					
						
							|  |  |  |   } | 
					
						
							|  |  |  |   .conversation.placeholder .conversation-header { | 
					
						
							|  |  |  |     display: none; | 
					
						
							|  |  |  |   } | 
					
						
							|  |  |  |   .conversation-header, | 
					
						
							|  |  |  |   .bubble { | 
					
						
							|  |  |  |     @include avatar-colors; | 
					
						
							|  |  |  |   } | 
					
						
							|  |  |  |   .bottom-bar { | 
					
						
							|  |  |  |     min-height: 10px; | 
					
						
							|  |  |  |   } | 
					
						
							|  |  |  |   .bubble { | 
					
						
							|  |  |  |     padding: 9px 12px; | 
					
						
							|  |  |  |     border-radius: $border-radius; | 
					
						
							|  |  |  |     box-shadow: 0 3px 3px -4px black; | 
					
						
							|  |  |  |   } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   .outgoing .bubble { | 
					
						
							|  |  |  |     background-color: white; | 
					
						
							|  |  |  |   } | 
					
						
							|  |  |  |   .outgoing .hourglass { | 
					
						
							|  |  |  |     @include hourglass(#999); | 
					
						
							|  |  |  |   } | 
					
						
							|  |  |  |   .incoming .hourglass { | 
					
						
							|  |  |  |     @include hourglass(#fff); | 
					
						
							|  |  |  |   } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   .incoming .bubble { | 
					
						
							|  |  |  |     .sender, | 
					
						
							|  |  |  |     .content, | 
					
						
							|  |  |  |     .body, | 
					
						
							|  |  |  |     .meta, | 
					
						
							|  |  |  |     a, | 
					
						
							|  |  |  |     .fileView { | 
					
						
							|  |  |  |       @include invert-text-color; | 
					
						
							|  |  |  |     } | 
					
						
							|  |  |  |     .attachments, | 
					
						
							|  |  |  |     .content { | 
					
						
							|  |  |  |       a { | 
					
						
							|  |  |  |         color: $grey_l; | 
					
						
							|  |  |  |       } | 
					
						
							|  |  |  |     } | 
					
						
							|  |  |  |   } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   .incoming .bubble .fileView .icon { | 
					
						
							|  |  |  |     @include color-svg('../images/file.svg', white); | 
					
						
							|  |  |  |     &.audio { | 
					
						
							|  |  |  |       @include color-svg('../images/audio.svg', white); | 
					
						
							|  |  |  |     } | 
					
						
							|  |  |  |     &.video { | 
					
						
							|  |  |  |       @include color-svg('../images/video.svg', white); | 
					
						
							|  |  |  |     } | 
					
						
							|  |  |  |     &.voice { | 
					
						
							|  |  |  |       @include color-svg('../images/voice.svg', white); | 
					
						
							|  |  |  |     } | 
					
						
							|  |  |  |   } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  |   button.clock { | 
					
						
							|  |  |  |     @include header-icon-white('../images/clock.svg'); | 
					
						
							|  |  |  |   } | 
					
						
							|  |  |  |   .inactive button.clock { | 
					
						
							|  |  |  |     @include header-icon-black('../images/clock.svg'); | 
					
						
							|  |  |  |   } | 
					
						
							|  |  |  |   button.hamburger { | 
					
						
							|  |  |  |     @include header-icon-white('../images/menu.svg'); | 
					
						
							|  |  |  |   } | 
					
						
							|  |  |  |   .inactive button.hamburger { | 
					
						
							|  |  |  |     @include header-icon-black('../images/menu.svg'); | 
					
						
							|  |  |  |   } | 
					
						
							|  |  |  |   button.back { | 
					
						
							|  |  |  |     @include header-icon-white('../images/back.svg'); | 
					
						
							|  |  |  |   } | 
					
						
							|  |  |  |   .inactive button.back { | 
					
						
							|  |  |  |     @include header-icon-black('../images/back.svg'); | 
					
						
							|  |  |  |   } | 
					
						
							|  |  |  | } |