diff --git a/public/assets/chat/chat.css b/public/assets/chat/chat.css
index 56fff2478..640fb0e16 100644
--- a/public/assets/chat/chat.css
+++ b/public/assets/chat/chat.css
@@ -8,15 +8,10 @@
   box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
   border-radius: 5px 5px 0 0;
   will-change: bottom;
-  display: none;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column; }
+  display: none; }
 
 .zammad-chat.zammad-chat-is-open {
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex; }
+  display: block; }
 
 .zammad-chat-icon {
   height: 2em;
@@ -90,7 +85,7 @@
   padding: 0 0.7em;
   border-radius: 1em;
   background: rgba(0, 0, 0, 0.1);
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04); }
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04) inset; }
 
 .zammad-chat-agent-status:before {
   content: "";
@@ -102,7 +97,7 @@
   position: relative;
   margin-right: 0.3em;
   vertical-align: middle;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04); }
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04) inset; }
 
 .zammad-chat-agent-status[data-status="online"]:before {
   background: #52c782; }
@@ -136,24 +131,22 @@
   position: absolute;
   left: 0;
   right: 0;
-  bottom: 0;
   top: 3.5em;
+  bottom: 0;
   margin-top: 1px;
   text-align: center;
   background: white;
   z-index: 1;
-  padding: 20px;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center; }
+  padding: 20px; }
+
+.zammad-chat-modal-center {
+  display: table;
+  width: 100%;
+  height: 100%; }
 
 .zammad-chat-modal-text {
+  display: table-cell;
+  vertical-align: middle;
   font-size: 1.3em;
   line-height: 1.45; }
   .zammad-chat-modal-text .zammad-chat-loading-animation {
@@ -262,12 +255,6 @@
 
 .zammad-chat-controls {
   overflow: hidden;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: flex-start;
-  -ms-flex-align: start;
-  align-items: flex-start;
   border-top: 1px solid #ededed;
   padding: 0;
   line-height: 1.4em;
@@ -277,6 +264,7 @@
 
 .zammad-chat-input {
   float: left;
+  width: 62%;
   font-family: inherit;
   line-height: inherit;
   font-size: inherit;
@@ -286,13 +274,11 @@
   border: none;
   background: none;
   box-shadow: none;
-  padding: 1em 2em;
+  padding: 1em 0;
   outline: none;
   resize: none;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  max-height: 6em; }
+  max-height: 6em;
+  margin: 0 5%; }
 
 .zammad-chat-input::-webkit-input-placeholder {
   color: #d9d9d9; }
@@ -315,7 +301,11 @@
   display: inline-block; }
 
 .zammad-chat-send {
-  float: right; }
+  float: right;
+  width: 20%;
+  box-sizing: border-box;
+  margin-left: 2%;
+  margin-right: 2%; }
 
 .zammad-chat-is-hidden {
   display: none; }
@@ -353,7 +343,14 @@
     left: 0;
     right: 0;
     width: auto;
-    height: 100vh; }
+    height: 100vh;
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column; }
+  .zammad-chat.zammad-chat-is-open {
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex; }
   .zammad-chat-body {
     height: auto;
     -webkit-flex: 1;
diff --git a/public/assets/chat/chat.scss b/public/assets/chat/chat.scss
index 0d898fb20..f8d09eb69 100644
--- a/public/assets/chat/chat.scss
+++ b/public/assets/chat/chat.scss
@@ -9,10 +9,9 @@
   border-radius: 5px 5px 0 0;
   will-change: bottom;
   display: none;
-  flex-direction: column;
 }
 .zammad-chat.zammad-chat-is-open {
-  display: flex;
+  display: block;
 }
 
 .zammad-chat-icon {
@@ -104,7 +103,7 @@
   padding: 0 .7em;
   border-radius: 1em;
   background: rgba(0,0,0,.1);
-  box-shadow: 0 0 0 1px rgba(0,0,0,.04);
+  box-shadow: 0 0 0 1px rgba(0,0,0,.04) inset;
 }
 
 .zammad-chat-agent-status:before {
@@ -117,7 +116,7 @@
   position: relative;
   margin-right: 0.3em;
   vertical-align: middle;
-  box-shadow: 0 0 0 1px rgba(0,0,0,.04);
+  box-shadow: 0 0 0 1px rgba(0,0,0,.04) inset;
 }
 
 .zammad-chat-agent-status[data-status="online"]:before {
@@ -138,19 +137,24 @@
   position: absolute;
   left: 0;
   right: 0;
-  bottom: 0;
   top: 3.5em;
+  bottom: 0;
   margin-top: 1px;
   text-align: center;
   background: white;
   z-index: 1;
   padding: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+}
+
+.zammad-chat-modal-center {
+  display: table;
+  width: 100%;
+  height: 100%;
 }
 
 .zammad-chat-modal-text {
+  display: table-cell;
+  vertical-align: middle;
   font-size: 1.3em;
   line-height: 1.45;
   
@@ -262,8 +266,6 @@
 
 .zammad-chat-controls {
   overflow: hidden;
-  display: flex;
-  align-items: flex-start;
   border-top: 1px solid hsl(0,0%,93%);
   padding: 0;
   line-height: 1.4em;
@@ -276,6 +278,7 @@
 
 .zammad-chat-input {
   float: left;
+  width: 62%;
   font-family: inherit;
   line-height: inherit;
   font-size: inherit;
@@ -283,11 +286,11 @@
   border: none;
   background: none;
   box-shadow: none;
-  padding: 1em 2em;
+  padding: 1em 0;
   outline: none;
   resize: none;
-  flex: 1;
   max-height: 6em;
+  margin: 0 5%;
 }
 
 .zammad-chat-input::-webkit-input-placeholder {
@@ -315,6 +318,10 @@
 
 .zammad-chat-send {
   float: right;
+  width: 20%;
+  box-sizing: border-box;
+  margin-left: 2%;
+  margin-right: 2%;
 }
 
 .zammad-chat-is-hidden {
@@ -359,6 +366,10 @@
     right: 0;
     width: auto;
     height: 100vh;
+    flex-direction: column;
+  }
+  .zammad-chat.zammad-chat-is-open {
+    display: flex;
   }
   .zammad-chat-body {
     height: auto;
diff --git a/public/assets/chat/views/loader.eco b/public/assets/chat/views/loader.eco
index 5350be7b0..98b03c5af 100644
--- a/public/assets/chat/views/loader.eco
+++ b/public/assets/chat/views/loader.eco
@@ -1,8 +1,12 @@
 <div class="zammad-chat-modal">
-  <span class="zammad-chat-loading-animation">
-    <span class="zammad-chat-loading-circle"></span>
-    <span class="zammad-chat-loading-circle"></span>
-    <span class="zammad-chat-loading-circle"></span>
-  </span>
-  <span class="zammad-chat-modal-text"><%= @T('Connecting') %></span>
+  <div class="zammad-chat-modal-center">
+    <div class="zammad-chat-modal-text">
+      <span class="zammad-chat-loading-animation">
+        <span class="zammad-chat-loading-circle"></span>
+        <span class="zammad-chat-loading-circle"></span>
+        <span class="zammad-chat-loading-circle"></span>
+      </span>
+      <%= @T('Connecting') %>
+    </div>
+  </div>
 </div>
\ No newline at end of file
diff --git a/public/assets/chat/views/timeout.eco b/public/assets/chat/views/timeout.eco
index f67b9bdc1..f25e7eddb 100644
--- a/public/assets/chat/views/timeout.eco
+++ b/public/assets/chat/views/timeout.eco
@@ -1,6 +1,8 @@
 <div class="zammad-chat-modal">
-  <div class="zammad-chat-modal-text">
-    <%- @T('Since you didn\'t respond in the last %s your conversation with <strong>%s</strong> got closed.', "#{ @delay } #{ @unit }", @agent) %><br>
-    <div class="zammad-chat-button"<%= " style='background: #{ @background }'" if @background %>><%= @T('Start new conversation') %></div>
+  <div class="zammad-chat-modal-center">
+    <div class="zammad-chat-modal-text">
+      <%- @T('Since you didn\'t respond in the last %s your conversation with <strong>%s</strong> got closed.', "#{ @delay } #{ @unit }", @agent) %><br>
+      <div class="zammad-chat-button"<%= " style='background: #{ @background }'" if @background %>><%= @T('Start new conversation') %></div>
+    </div>
   </div>
 </div>
\ No newline at end of file
diff --git a/public/assets/chat/views/waiting.eco b/public/assets/chat/views/waiting.eco
index 63170af5a..ca9e5d837 100644
--- a/public/assets/chat/views/waiting.eco
+++ b/public/assets/chat/views/waiting.eco
@@ -1,11 +1,13 @@
 <div class="zammad-chat-modal">
-  <div class="zammad-chat-modal-text">
-    <span class="zammad-chat-loading-animation">
-      <span class="zammad-chat-loading-circle"></span>
-      <span class="zammad-chat-loading-circle"></span>
-      <span class="zammad-chat-loading-circle"></span>
-    </span>
-    <%- @T('All colleges are busy.') %><br>
-    <%- @T('You are on waiting list position <strong>%s</strong>.', @position) %>
+  <div class="zammad-chat-modal-center">
+    <div class="zammad-chat-modal-text">
+      <span class="zammad-chat-loading-animation">
+        <span class="zammad-chat-loading-circle"></span>
+        <span class="zammad-chat-loading-circle"></span>
+        <span class="zammad-chat-loading-circle"></span>
+      </span>
+      <%- @T('All colleges are busy.') %><br>
+      <%- @T('You are on waiting list position <strong>%s</strong>.', @position) %>
+    </div>
   </div>
 </div>
\ No newline at end of file