- reduced custom styles, use mostly tailwind classes

- updated markdown css for extrausercontent

webroot/styles/chat.css

@@ -1,28 +1,58 @@
+#chat-container {
+  position: fixed;
+  z-index: 9;
+  top: var(--header-height);
+  right: 0;
+  width: var(--right-col-width);
+
+  height: calc(100vh - var(--header-height));
+
+  /* overflow: hidden; */
+  /* display: flex;
+  flex-direction: column;
+  justify-content: flex-end; */
+}
+
+.touch-screen #chat-container {
+  height: calc(100vh - var(--header-height) - 3vh);
+}
+
+
+.no-chat #chat-container-wrap {
+  display: none;
+}
+
+.chat #chat-container-wrap {
+  display: block;
+}
+
+
 
 #messages-container {
-  overflow: auto;
-  padding: 1em 0;
+  /* overflow: auto;
+  padding: 1em 0; */
 }
 
 #message-input-container {
-  width: 100%;
-  padding: 1em;
+  /* width: 100%; */
+  /* padding: 1em; */
 }
 
 /******************************/
 /******************************/
 #message-input {
-  height: 5rem;
-  font-size: .85em;
+  /* height: 5rem; */
+  /* font-size: .85em; */
 }
 #message-input img {
   display: inline;
   vertical-align: middle;
-  padding: 5px;
+  padding: .25rem;
 }
 
 #message-input .emoji {
-  width: 2.2em;
+  width: 2.2rem;
+  padding: .25rem;
 }
 
 
@@ -61,23 +91,23 @@
 
 
 #message-form-actions {
-  flex-direction: row;
+  /* flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  width: 100%;
+  width: 100%; */
 }
 
 #message-form-actions-buttons {
-  flex-direction: row;
+  /* flex-direction: row;
   justify-content: flex-end;
-  align-items: center;
+  align-items: center; */
 }
 
 /* Emoji picker button */
 #emoji-button {
-  font-size: 1.75em;
-  cursor: pointer;
-  margin-right: .5em;
+  /* font-size: 1.75em; */
+  /* cursor: pointer;
+  margin-right: .5em; */
 }
 .emoji-picker__emoji {
   border-radius: 10px;
@@ -85,11 +115,13 @@
 
 
 .message {
-  padding: .85em;
-  align-items: flex-start;
+  /* padding: .85em; */
+  /* align-items: flex-start; */
 }
 .message-avatar {
-  margin-right: .75em;
+  height: 3.0em;
+  width: 3.0em;
+  /* margin-right: .75em; */
 }
 .message-avatar img {
   max-width: unset;
@@ -99,17 +131,17 @@
 }
 
 .message-content {
-  font-size: .85em;
+  /* font-size: .85em; */
   max-width: 85%;
-  word-wrap: break-word;
+  /* word-wrap: break-word; */
 }
 
 
 
 
-/* MESSAGE TEXT CONTENT */
-/* MESSAGE TEXT CONTENT */
-/* MESSAGE TEXT CONTENT */
+/* MESSAGE TEXT HTML */
+/* MESSAGE TEXT HTML */
+/* MESSAGE TEXT HTML */
 .message-text a {
   color: #7F9CF5; /* indigo-400 */
 }
@@ -119,41 +151,43 @@
 
 .message-text img {
   display: inline;
-  padding-left: 5px;
-  padding-right: 5px;
+  padding-left: 0 .25rem;
+}
+
+
+
+.message-text .emoji {
+  width: 3rem;
+  padding: .25rem
 }
 
 .message-text code {
+  font-family: monospace;
   background-color:darkslategrey;
-  padding: 3px;
+  padding: .25rem;
 }
 
-.message-text .emoji {
-  width: 60px;
-}
-
-
 .message-text iframe {
   width: 100%;
-  height: 170px;
-  border-radius: 15px;
+  height: 12rem;
+  border-radius: 1rem;
 }
 
 .message-text .instagram-embed {
-  height: 314px;
+  height: 22em;
 }
 
 .message-text .embedded-image {
   width: 100%;
-  height: 170px;
-  border-radius: 15px;
+  display: block;
+  height: 15rem;
+  border-radius: 1rem;
 }
 
 .message-text .highlighted {
-  color: orange;
+  /* color: orange;
   font-weight: 400;
-  font-size: 14px;
-}
+} */
 /* MESSAGE TEXT CONTENT */
 /* MESSAGE TEXT CONTENT */
 /* MESSAGE TEXT CONTENT */