--- a/sat_templates/templates/bulma/static/chat.css	Thu Jun 22 16:31:26 2023 +0200
+++ b/sat_templates/templates/bulma/static/chat.css	Wed Jun 28 10:40:50 2023 +0200
@@ -1,10 +1,139 @@
 #chat-panel {
-	height: calc(100vh - 3.25rem);
-    padding-top: 1rem;
-    display: flex;
-    flex-direction: column;
+    height: calc(100vh - 3.25rem);
 }
 
 #messages {
-    overflow: auto;
+    overflow-y: auto;
+}
+
+#attachments {
+    overflow-x: auto;
+    white-space: nowrap;
+}
+
+#message_input {
+    resize: None;
+    max-height: 20rem;
+    min-height: 48px;
+}
+
+.is-chat-message {
+    transition: all 0.3s ease;
+    padding-left: 1.5em;
+}
+
+.is-chat-message:hover {
+    background-color: #f5f5f5;
+    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
+}
+
+.message-attachment {
+    max-width: 20rem;
+}
+
+.status-icons {
+    padding-bottom: 0.4rem;
+}
+
+.actions {
+    position: absolute;
+    right: 5px;
+    bottom: 5px;
+    opacity: 0;
+}
+
+.is-chat-message:hover .actions {
+    opacity: 1;
+}
+
+.action-button {
+    box-sizing: border-box;
+    margin: 0 0.2rem;
+}
+
+.action-button:hover {
+    box-shadow: 0 0 0 10px rgba(0,0,0,0.1);
+    border-radius: 50%;
+    transition: box-shadow 0.3s ease;
+}
+
+.has-padding-left {
+    padding-left: 0.5em;
+}
+
+#attach_button, #send_button {
+    height: 100%;
 }
+
+/* attachments */
+
+#attachments {
+    opacity: 1;
+    max-height: 1000px;
+    transition: opacity 0.5s ease-in-out, max-height 0.5s ease-in-out, padding 0.5s ease-in-out, margin 0.5s ease-in-out;
+    overflow-x: auto;
+    overflow-y: hidden;
+    padding: 1.25rem 0;
+    margin: 0;
+}
+
+#attachments.is-contracted {
+    opacity: 0;
+    max-height: 0;
+    padding: 0;
+}
+
+.attachment-preview {
+    position: relative;
+    border: 1px solid #dbdbdb;
+    padding: 0.3rem 0.5rem;
+    border-radius: 4px;
+    background-color: #f5f5f5;
+    width: 9rem;
+    height: 6rem;
+}
+
+.thumbnail-container {
+    width: 150px;
+    height: 80px;
+    overflow: hidden;
+    position: relative;
+}
+.icon {
+    width: 60px;
+    height: 60px;
+}
+
+.thumbnail-image {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    height: 100%;
+    width: auto;
+    transform: translate(-50%, -50%);
+}
+
+.attachment-name {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    max-width: 100%;
+    font-size: 0.8em;
+    letter-spacing: 0.02em;
+    text-align: center;
+    margin-top: auto;
+}
+
+.thumbnail-image:empty {
+    left: 50%;
+    top: 50%;
+    width: 8rem;
+    height: auto;
+    transform: translate(-50%, -50%);
+}
+
+.attachment-delete-button {
+    position: absolute;
+    top: -10px;
+    right: -10px;
+}