Update css and keep input and textarea values across toggles

css/converse.css

@@ -1691,8 +1691,8 @@
       margin: 0;
       padding: 0;
       position: relative; }
-  #converse-embedded-chat .chatbox form.sendXMPPMessage,
-  #conversejs .chatbox form.sendXMPPMessage {
+  #converse-embedded-chat .chatbox .sendXMPPMessage,
+  #conversejs .chatbox .sendXMPPMessage {
     -moz-background-clip: padding;
     -webkit-background-clip: padding-box;
     border-bottom-left-radius: 4px;
@@ -1706,18 +1706,18 @@
     height: 95px;
     min-width: 200px; }
     @media screen and (max-height: 450px) {
-      #converse-embedded-chat .chatbox form.sendXMPPMessage,
-      #conversejs .chatbox form.sendXMPPMessage {
+      #converse-embedded-chat .chatbox .sendXMPPMessage,
+      #conversejs .chatbox .sendXMPPMessage {
         width: 100%; } }
     @media screen and (max-width: 480px) {
-      #converse-embedded-chat .chatbox form.sendXMPPMessage,
-      #conversejs .chatbox form.sendXMPPMessage {
+      #converse-embedded-chat .chatbox .sendXMPPMessage,
+      #conversejs .chatbox .sendXMPPMessage {
         width: 100%; } }
-    #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-textarea-hint,
-    #conversejs .chatbox form.sendXMPPMessage .chat-textarea-hint {
+    #converse-embedded-chat .chatbox .sendXMPPMessage .spoiler-hint,
+    #conversejs .chatbox .sendXMPPMessage .spoiler-hint {
       width: 100%; }
-    #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-textarea,
-    #conversejs .chatbox form.sendXMPPMessage .chat-textarea {
+    #converse-embedded-chat .chatbox .sendXMPPMessage .chat-textarea,
+    #conversejs .chatbox .sendXMPPMessage .chat-textarea {
       border-bottom-left-radius: 4px;
       border-bottom-right-radius: 4px;
       border: 0;
@@ -1725,12 +1725,12 @@
       padding: 0.5em;
       width: 100%;
       resize: none; }
-      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-textarea.spoiler,
-      #conversejs .chatbox form.sendXMPPMessage .chat-textarea.spoiler {
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-textarea.spoiler,
+      #conversejs .chatbox .sendXMPPMessage .chat-textarea.spoiler {
         background-color: #e7f7ee;
         height: 42px; }
-    #converse-embedded-chat .chatbox form.sendXMPPMessage .send-button,
-    #conversejs .chatbox form.sendXMPPMessage .send-button {
+    #converse-embedded-chat .chatbox .sendXMPPMessage .send-button,
+    #conversejs .chatbox .sendXMPPMessage .send-button {
       position: absolute;
       left: 3px;
       width: -webkit-calc(100% - 6px);
@@ -1740,63 +1740,63 @@
       font-size: 80%;
       height: 27px;
       bottom: -30px; }
-    #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar,
-    #conversejs .chatbox form.sendXMPPMessage .chat-toolbar {
+    #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar,
+    #conversejs .chatbox .sendXMPPMessage .chat-toolbar {
       box-sizing: border-box;
       margin: 0;
       padding: 5px;
       height: 25px;
       display: block;
       background-color: #E7FBF0; }
-      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar a,
-      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar a {
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar a,
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar a {
         font-size: 14px;
         color: #777;
         text-decoration: none;
         text-shadow: none; }
-      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text,
-      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text {
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .chat-toolbar-text,
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .chat-toolbar-text {
         font-size: 12px;
         padding-right: 3px; }
-      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a,
-      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted,
-      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a,
-      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted {
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a,
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted,
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a,
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted {
         color: #777; }
-        #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-menu a,
-        #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted .toolbar-menu a,
-        #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-menu a,
-        #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted .toolbar-menu a {
+        #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-menu a,
+        #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted .toolbar-menu a,
+        #conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-menu a,
+        #conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted .toolbar-menu a {
           color: #578EA9; }
-      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unverified a,
-      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unverified,
-      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unverified a,
-      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unverified {
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unverified a,
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unverified,
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .unverified a,
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .unverified {
         color: #cf5300; }
-      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .private a,
-      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .private,
-      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .private a,
-      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .private {
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .private a,
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .private,
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .private a,
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .private {
         color: #4b7003; }
-      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-occupants,
-      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-clear,
-      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr,
-      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-occupants,
-      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-clear,
-      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr {
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .toggle-occupants,
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .toggle-clear,
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .toggle-otr,
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .toggle-occupants,
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .toggle-clear,
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .toggle-otr {
         float: right; }
-      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li,
-      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li {
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li,
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar li {
         cursor: pointer;
         display: inline-block;
         list-style: none;
         margin-top: 1px;
         padding: 0 3px 0 3px; }
-        #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li:hover,
-        #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li:hover {
+        #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li:hover,
+        #conversejs .chatbox .sendXMPPMessage .chat-toolbar li:hover {
           cursor: pointer; }
-        #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu,
-        #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu {
+        #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu,
+        #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu {
           background-color: #fff;
           bottom: 100%;
           box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
@@ -1804,71 +1804,71 @@
           margin: 0;
           position: absolute;
           right: 0; }
-          #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu a,
-          #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu a {
+          #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a,
+          #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a {
             color: #578EA9; }
-          #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker,
-          #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker {
+          #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker,
+          #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker {
             height: 100px;
             overflow: scroll;
             padding: 0.5em; }
-          #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
-          #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
+          #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
+          #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
             /* offset-x | offset-y | blur-radius | spread-radius | color */
             box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.4); }
-          #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
-          #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
+          #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
+          #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
             overflow: hidden;
             left: 0; }
-            #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .picked,
-            #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .picked {
+            #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .picked,
+            #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .picked {
               background-color: #DCF9F6; }
-            #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li,
-            #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li {
+            #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li,
+            #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li {
               height: 30px;
               padding: 4px;
               z-index: 98; }
-              #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li.emoji a,
-              #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li.emoji a {
+              #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li.emoji a,
+              #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li.emoji a {
                 font-size: 20px; }
-          #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li,
-          #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li {
+          #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li,
+          #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li {
             margin-left: 0;
             cursor: pointer;
             list-style: none;
             position: relative; }
-            #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji,
-            #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji {
+            #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji,
+            #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji {
               padding: 0.3em; }
-              #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover,
-              #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover {
+              #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover,
+              #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover {
                 background-color: #DCF9F6; }
-            #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover,
-            #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover {
+            #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover,
+            #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover {
               color: #8f2831; }
-        #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu,
-        #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu {
+        #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu,
+        #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu {
           color: #777; }
-        #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley,
-        #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley {
+        #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley,
+        #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley {
           padding-left: 5px; }
-          #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
-          #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover,
-          #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
-          #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover {
+          #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
+          #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover,
+          #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
+          #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover {
             background-color: #DCF9F6; }
-        #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul,
-        #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul {
+        #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul,
+        #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul {
           z-index: 99; }
-          #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li,
-          #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li {
+          #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li,
+          #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li {
             display: block;
             padding: 7px; }
-            #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li:hover,
-            #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li:hover {
+            #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li:hover,
+            #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li:hover {
               background-color: #DCF9F6; }
-            #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li a,
-            #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li a {
+            #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li a,
+            #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li a {
               display: block; }
   #converse-embedded-chat .chatbox .dragresize,
   #conversejs .chatbox .dragresize {

css/inverse.css

@@ -1756,8 +1756,8 @@ body {
       margin: 0;
       padding: 0;
       position: relative; }
-  #converse-embedded-chat .chatbox form.sendXMPPMessage,
-  #conversejs .chatbox form.sendXMPPMessage {
+  #converse-embedded-chat .chatbox .sendXMPPMessage,
+  #conversejs .chatbox .sendXMPPMessage {
     -moz-background-clip: padding;
     -webkit-background-clip: padding-box;
     border-bottom-left-radius: 0;
@@ -1771,18 +1771,18 @@ body {
     height: 99px;
     min-width: 100%; }
     @media screen and (max-height: 450px) {
-      #converse-embedded-chat .chatbox form.sendXMPPMessage,
-      #conversejs .chatbox form.sendXMPPMessage {
+      #converse-embedded-chat .chatbox .sendXMPPMessage,
+      #conversejs .chatbox .sendXMPPMessage {
         width: 100%; } }
     @media screen and (max-width: 480px) {
-      #converse-embedded-chat .chatbox form.sendXMPPMessage,
-      #conversejs .chatbox form.sendXMPPMessage {
+      #converse-embedded-chat .chatbox .sendXMPPMessage,
+      #conversejs .chatbox .sendXMPPMessage {
         width: 100%; } }
-    #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-textarea-hint,
-    #conversejs .chatbox form.sendXMPPMessage .chat-textarea-hint {
+    #converse-embedded-chat .chatbox .sendXMPPMessage .spoiler-hint,
+    #conversejs .chatbox .sendXMPPMessage .spoiler-hint {
       width: 100%; }
-    #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-textarea,
-    #conversejs .chatbox form.sendXMPPMessage .chat-textarea {
+    #converse-embedded-chat .chatbox .sendXMPPMessage .chat-textarea,
+    #conversejs .chatbox .sendXMPPMessage .chat-textarea {
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
       border: 0;
@@ -1790,12 +1790,12 @@ body {
       padding: 0.5em;
       width: 100%;
       resize: none; }
-      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-textarea.spoiler,
-      #conversejs .chatbox form.sendXMPPMessage .chat-textarea.spoiler {
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-textarea.spoiler,
+      #conversejs .chatbox .sendXMPPMessage .chat-textarea.spoiler {
         background-color: #e7f7ee;
         height: 42px; }
-    #converse-embedded-chat .chatbox form.sendXMPPMessage .send-button,
-    #conversejs .chatbox form.sendXMPPMessage .send-button {
+    #converse-embedded-chat .chatbox .sendXMPPMessage .send-button,
+    #conversejs .chatbox .sendXMPPMessage .send-button {
       position: absolute;
       left: 3px;
       width: -webkit-calc(100% - 6px);
@@ -1805,63 +1805,63 @@ body {
       font-size: 80%;
       height: 27px;
       bottom: -30px; }
-    #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar,
-    #conversejs .chatbox form.sendXMPPMessage .chat-toolbar {
+    #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar,
+    #conversejs .chatbox .sendXMPPMessage .chat-toolbar {
       box-sizing: border-box;
       margin: 0;
       padding: 5px;
       height: 29px;
       display: block;
       background-color: #E7FBF0; }
-      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar a,
-      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar a {
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar a,
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar a {
         font-size: 16px;
         color: #777;
         text-decoration: none;
         text-shadow: none; }
-      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text,
-      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text {
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .chat-toolbar-text,
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .chat-toolbar-text {
         font-size: 12px;
         padding-right: 3px; }
-      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a,
-      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted,
-      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a,
-      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted {
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a,
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted,
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a,
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted {
         color: #777; }
-        #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-menu a,
-        #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted .toolbar-menu a,
-        #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-menu a,
-        #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted .toolbar-menu a {
+        #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-menu a,
+        #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted .toolbar-menu a,
+        #conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-menu a,
+        #conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted .toolbar-menu a {
           color: #578EA9; }
-      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unverified a,
-      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unverified,
-      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unverified a,
-      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unverified {
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unverified a,
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unverified,
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .unverified a,
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .unverified {
         color: #cf5300; }
-      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .private a,
-      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .private,
-      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .private a,
-      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .private {
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .private a,
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .private,
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .private a,
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .private {
         color: #4b7003; }
-      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-occupants,
-      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-clear,
-      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr,
-      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-occupants,
-      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-clear,
-      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr {
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .toggle-occupants,
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .toggle-clear,
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .toggle-otr,
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .toggle-occupants,
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .toggle-clear,
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar .toggle-otr {
         float: right; }
-      #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li,
-      #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li {
+      #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li,
+      #conversejs .chatbox .sendXMPPMessage .chat-toolbar li {
         cursor: pointer;
         display: inline-block;
         list-style: none;
         margin-top: 1px;
         padding: 0 3px 0 3px; }
-        #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li:hover,
-        #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li:hover {
+        #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li:hover,
+        #conversejs .chatbox .sendXMPPMessage .chat-toolbar li:hover {
           cursor: pointer; }
-        #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu,
-        #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu {
+        #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu,
+        #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu {
           background-color: #fff;
           bottom: 100%;
           box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
@@ -1869,71 +1869,71 @@ body {
           margin: 0;
           position: absolute;
           right: 0; }
-          #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu a,
-          #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu a {
+          #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a,
+          #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a {
             color: #578EA9; }
-          #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker,
-          #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker {
+          #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker,
+          #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker {
             height: 150px;
             overflow: scroll;
             padding: 0.5em; }
-          #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
-          #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
+          #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
+          #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
             /* offset-x | offset-y | blur-radius | spread-radius | color */
             box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.4); }
-          #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
-          #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
+          #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
+          #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
             overflow: hidden;
             left: 0; }
-            #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .picked,
-            #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .picked {
+            #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .picked,
+            #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .picked {
               background-color: #DCF9F6; }
-            #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li,
-            #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li {
+            #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li,
+            #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li {
               height: 32px;
               padding: 4px;
               z-index: 98; }
-              #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li.emoji a,
-              #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li.emoji a {
+              #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li.emoji a,
+              #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar li.emoji a {
                 font-size: 26px; }
-          #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li,
-          #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li {
+          #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li,
+          #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li {
             margin-left: 0;
             cursor: pointer;
             list-style: none;
             position: relative; }
-            #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji,
-            #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji {
+            #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji,
+            #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji {
               padding: 0.3em; }
-              #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover,
-              #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover {
+              #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover,
+              #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover {
                 background-color: #DCF9F6; }
-            #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover,
-            #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover {
+            #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover,
+            #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li a:hover {
               color: #8f2831; }
-        #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu,
-        #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu {
+        #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu,
+        #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-toolbar-menu {
           color: #777; }
-        #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley,
-        #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley {
+        #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley,
+        #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley {
           padding-left: 5px; }
-          #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
-          #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover,
-          #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
-          #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover {
+          #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
+          #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover,
+          #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
+          #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover {
             background-color: #DCF9F6; }
-        #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul,
-        #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul {
+        #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul,
+        #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul {
           z-index: 99; }
-          #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li,
-          #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li {
+          #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li,
+          #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li {
             display: block;
             padding: 7px; }
-            #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li:hover,
-            #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li:hover {
+            #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li:hover,
+            #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li:hover {
               background-color: #DCF9F6; }
-            #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li a,
-            #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li.toggle-otr ul li a {
+            #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li a,
+            #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li a {
               display: block; }
   #converse-embedded-chat .chatbox .dragresize,
   #conversejs .chatbox .dragresize {

sass/_chatbox.scss

@@ -230,7 +230,8 @@
                 position: relative;
             }
         }
-        form.sendXMPPMessage {
+
+        .sendXMPPMessage {
             -moz-background-clip: padding;
             -webkit-background-clip: padding-box;
             @include border-bottom-radius($chatbox-border-radius);
@@ -248,9 +249,10 @@
             @media screen and (max-width: $mobile-portrait-length) {
                 width: 100%;
             }
-            .chat-textarea-hint {
+            .spoiler-hint {
                 width: 100%;
             }
+
             .chat-textarea {
                 @include border-bottom-radius($chatbox-border-radius);
                 border: 0;

src/converse-chatview.js

@@ -284,7 +284,9 @@
                             'label_send': __('Send'),
                             'show_send_button': _converse.show_send_button,
                             'show_textarea': true,
-                            'show_toolbar': _converse.show_toolbar
+                            'show_toolbar': _converse.show_toolbar,
+                            'hint_value': _.get(this.el.querySelector('.spoiler-hint'), 'value'),
+                            'message_value': _.get(this.el.querySelector('.chat-textarea'), 'value')
                         }));
                 },
 
@@ -784,9 +786,9 @@
                           .c(_converse.ACTIVE, {'xmlns': Strophe.NS.CHATSTATES}).up();
 
                     if (this.message_form_view.model.get('sending_spoiler')) {
-                        const has_hint = this.el.querySelector('.chat-textarea-hint').value.length > 0;
+                        const has_hint = this.el.querySelector('.spoiler-hint').value.length > 0;
                         if (has_hint) {
-                            const hint = document.querySelector('.chat-textarea-hint').value;
+                            const hint = document.querySelector('.spoiler-hint').value;
                             stanza.c('spoiler', {'xmlns': Strophe.NS.SPOILER }, hint);
                         } else {
                             stanza.c('spoiler', {'xmlns': Strophe.NS.SPOILER });
@@ -867,7 +869,7 @@
                             'is_spoiler': is_spoiler
                         };
                     if (is_spoiler) {
-                        const spoiler = this.el.querySelector('.chat-textarea-hint')
+                        const spoiler = this.el.querySelector('.spoiler-hint')
                         attrs.spoiler_hint = spoiler.textContent.length > 0 ? spoiler.textContent : __('Spoiler');
                     }
                     return attrs;

src/templates/chatbox_message_form.html

@@ -5,15 +5,15 @@
         <ul class="chat-toolbar no-text-select"></ul>
     {[ } ]}
     {[ if (o.allow_spoiler_messages) { ]}
-        <input type="text" placeholder="{{o.label_spoiler_hint}}"
-            class="{[ if (!o.sending_spoiler) { ]} hidden {[ } ]} chat-textarea-hint"/>
+        <input type="text" placeholder="{{o.label_spoiler_hint}}" value="{{ o.hint_value }}"
+            class="{[ if (!o.sending_spoiler) { ]} hidden {[ } ]} spoiler-hint"/>
     {[ } ]}
     <textarea
         type="text"
         class="chat-textarea
             {[ if (o.show_send_button) { ]} chat-textarea-send-button {[ } ]}
             {[ if (o.sending_spoiler) { ]} spoiler {[ } ]}"
-        placeholder="{{{o.label_personal_message}}}"></textarea>
+        placeholder="{{{o.label_personal_message}}}">{{ o.message_value }}</textarea>
     {[ if (o.show_send_button) { ]}
         <button type="submit" class="pure-button send-button">{{{ o.label_send }}}</button>
     {[ } ]}