CSS fixes to embedded chat

* Don't change styling based on media queries
* Fix offsets so that an embedded chat fits properly inside container element

sass/_chatbox.scss

-#converse-embedded-chat,
 #conversejs {
     .flyout {
         border-radius: $chatbox-border-radius;
+        bottom: $chatbox-hover-height;
+        position: absolute;
+
         @media screen and (max-height: $mobile-landscape-height) {
             border-radius: 0;
         }
         @media screen and (max-width: $mobile-portrait-length) {
             border-radius: 0;
         }
-        bottom: $chatbox-hover-height;
-        position: absolute;
 
         @media screen and (max-height: $mobile-landscape-height) {
             bottom: 0;
@@ -518,7 +518,7 @@
 }
 
 @media screen and (max-width: 767px) {
-    #conversejs  {
+    #conversejs:not(.converse-embedded)  {
         > .row {
             flex-direction: row-reverse;
         }

sass/_chatrooms.scss

@@ -308,7 +308,7 @@
 }
 
 @media screen and (max-width: 767px) {
-    #conversejs  {
+    #conversejs:not(.converse-embedded)  {
         .chatbox {
             .box-flyout {
                 .chatroom-body {

sass/_controlbox.scss

@@ -432,7 +432,7 @@
 
 @include media-breakpoint-down(sm) {
 
-    #conversejs {
+    #conversejs:not(.converse-embedded)  {
         left: 0;
         right: 0;
         padding-left: env(safe-area-inset-left);

sass/_core.scss

@@ -363,7 +363,7 @@ body.reset {
     }
 
     .avatar {
-        border-radius: 25%;
+        border-radius: 10%;
     }
 
     .activated {
@@ -459,7 +459,7 @@ body.reset {
         font-size: 3.75em;
         }
     }
-    #conversejs {
+    #conversejs:not(.converse-embedded)  {
         .chatbox  {
             .chat-body {
                 border-radius: $chatbox-border-radius;

sass/_muc_embedded.scss

@@ -8,10 +8,10 @@
     }
 
     bottom: auto;
-    right: auto;
+    height: 100%; // When embedded, it fills the containing element
     position: relative;
+    right: auto;
     width: 100%;
-    height: 100%; // When embedded, it fills the containing element
 
     .converse-chatboxes {
         z-index: 1031; // One more than bootstrap navbar
@@ -21,6 +21,10 @@
         width: 100%;
     }
 
+    .flyout {
+        bottom: 0;
+	}
+
     .chatroom {
         margin: 0;
         width: 100%;

sass/converse/_chatbox.scss

@@ -59,7 +59,7 @@
 }
 
 @include media-breakpoint-down(sm) {
-	#conversejs:not(.fullscreen) {
+	#conversejs:not(.converse-fullscreen):not(.converse-embedded) {
 		> .row {
 			flex-direction: column;
 

sass/inverse/_chatbox.scss

@@ -94,7 +94,7 @@
 }
 
 @media screen and (max-width: 767px) {
-    #conversejs.fullscreen  {
+    #conversejs:not(.converse-embedded).fullscreen {
         .chatbox {
             width: calc(100% - 50px);
         }