fix bg color on start button and input width on mobile

src/components/_chat.scss

@@ -1,4 +1,4 @@
-
+* { min-height: 0 } /* hacky fix for overflow scroll bug in nexted flex containers in firefox */
 
 @keyframes slideInUp {
   from {
@@ -46,6 +46,8 @@
   color: $white;
   font-size: 1rem;
   line-height: 1;
+  background-color: transparent;
+  padding: 5px;
 
   #open-chatbox-label {
     background: $theme-color;
@@ -166,6 +168,7 @@
   .docked-widget {
     right: 0;
     left: 0;
+    bottom: 0;
   }
 
   .dock, .widget {
@@ -181,6 +184,7 @@
   height: 60vh;
   max-height: 100vh;
   min-height: 180px;
+  padding: 5px;
 
   a {
     color: inherit;
@@ -191,7 +195,7 @@
     border: 1px solid $dark-color;
     flex: 1 1 auto;
     padding: 0.5rem;
-    overflow: auto;
+    overflow: scroll;
     display: flex;
     flex-direction: column-reverse;
     justify-content: space-between;
@@ -259,11 +263,17 @@
       margin-bottom: 0;
     }
 
+    input[placeholder] {
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+
     input[type="text"] {
       font-size: 1rem;
       padding: 0.5rem;
       border: none;
-      flex: 1 0 auto;
+      display: flex;
+      flex: 1 1 auto;
       border: 1px solid $dark-color;
       background: $light-color;
       color: $dark-color;
@@ -285,6 +295,8 @@
       border: 1px solid $theme-color;
       font-family: $theme-font;
       cursor: pointer;
+      display: flex;
+      flex: 1 0 auto;
     }
   }