--- a/sat_templates/templates/bulma/static/chat.css	Sat Oct 26 22:53:26 2024 +0200
+++ b/sat_templates/templates/bulma/static/chat.css	Fri Apr 11 21:32:05 2025 +0200
@@ -1,66 +1,220 @@
-#chat-panel {
-    height: calc(100vh - 3.25rem);
+html, body, #body {
+    height: 100%;
+    overflow: hidden;
+}
+
+
+.chat-main {
+    /* Base colors */
+    --color-background: #ffffff;
+    --color-text: #4a4a4a;
+
+    /* Message colors */
+    --message-background: #f5f5f5;
+    --message-hover-background: #e8e8e8;
+
+    /* Reaction colors */
+    --reaction-background: #ffffff;
+    --reaction-hover-background: #f5f5f5;
+    --reaction-border: #dbdbdb;
+
+    /* User reaction colors */
+    --reaction-user-background: #eef6fc;
+    --reaction-user-hover-background: #e3f1fc;
+    --reaction-user-border: #3273dc;
+
+    /* Spacing */
+    --reaction-padding: 0.25rem 0.5rem;
+    --reaction-gap: 0.5rem;
+    --reaction-margin-top: 0.5rem;
+
+    /* Typography */
+    --reaction-font-size: 0.875rem;
+    --reaction-counter-font-size: 0.75rem;
+}
+
+[data-theme="dark"] .chat-main {
+    --color-background: #2c2c2c;
+    --color-text: #ffffff;
+
+    --message-background: #363636;
+    --message-hover-background: #404040;
+
+    --reaction-background: #2c2c2c;
+    --reaction-hover-background: #404040;
+    --reaction-border: #4a4a4a;
+
+    --reaction-user-background: #1a3b5c;
+    --reaction-user-hover-background: #234875;
+    --reaction-user-border: #3273dc;
+}
+
+.chat-container {
+    height: 100%;
+    overflow-y: auto;
+}
+
+.chat-main {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.chat-header {
+    border-bottom: 1px solid #dbdbdb;
+    padding: 0.5rem 1rem;
+}
+
+
+/* Sidebar toggle transitions */
+.chat-sidebar, .chat-details {
+    transition: transform 0.3s ease, max-width 0.3s ease, opacity 0.3s ease;
+    overflow-x: hidden;
+}
+
+.chat-sidebar.is-collapsed {
+    transform: translateX(-100%);
+    max-width: 0;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+}
+
+.chat-details.is-collapsed {
+    transform: translateX(100%);
+    max-width: 0;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+}
+
+.chat-main.is-expanded-left {
+    margin-left: 0;
 }
 
+.chat-main.is-expanded-right {
+    margin-right: 0;
+}
+
+.columns.is-gapless.chat-container {
+    flex-wrap: nowrap;
+}
+
+.author {
+    font-weight: bold;
+}
 #messages {
+    flex-grow: 1;
     overflow-y: auto;
+    padding: 1rem;
 }
 
+#left_panel a {
+    background-color: inherit;
+}
+
+#left_panel a:hover {
+    background-color: #444;
+}
+
+.chat-input {
+    border-top: 1px solid #dbdbdb;
+    padding: 1rem;
+}
+
+.chat-input button {
+    height: 100%;
+}
+
+.chat-message {
+    max-width: 95%;
+}
+
+.message-core {
+    margin-bottom: 1rem;
+    padding: 0.75rem;
+    border-radius: 0.5rem;
+    overflow-wrap: anywhere;
+    background-color: #f5f5f5;
+    transition: background-color 0.2s, border-left 0.2s;
+}
+.message-core:hover, .message-core.has-popup-focus {
+    background-color: #e8e8e8;
+    border-left: 4px solid #3273dc;
+}
+
+.message-actions {
+    display: none;
+}
+
+.message-core:hover .message-actions,
+.message-core.has-popup-focus .message-actions
+{
+    display: flex;
+}
+
+.reactions-container {
+    gap: var(--reaction-gap);
+    margin-top: var(--reaction-margin-top);
+}
+.reaction {
+    padding: var(--reaction-padding);
+    border-radius: 1rem;
+    background-color: var(--reaction-background);
+    font-size: var(--reaction-font-size);
+    cursor: pointer;
+    transition: all 0.2s ease;
+    border: 1px solid var(--reaction-border);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.reaction:hover {
+    background-color: var(--reaction-hover-background);
+}
+
+.reaction .counter {
+    margin-left: 0.25rem;
+    font-size: var(--reaction-counter-font-size);
+    color: var(--color-text);
+}
+
+.reaction.own-reaction {
+    background-color: var(--reaction-user-background);
+    border-color: var(--reaction-user-border);
+}
+
+.reaction.own-reaction:hover {
+    background-color: var(--reaction-user-hover-background);
+}
+
+
 #attachments {
     overflow-x: auto;
     white-space: nowrap;
 }
 
-#message_input {
-    resize: None;
-    max-height: 20rem;
-    min-height: 48px;
-}
-
-/* Input "edit" mode */
-#message_input.mode_edit {
-    background-color: #d1ecf1;
-}
-
-.is-chat-message {
-    transition: all 0.3s ease;
-}
-
-.is-chat-message:hover, .is-chat-message.has-popup-focus {
+.message-core:hover, .message-core.has-popup-focus {
     background-color: #f5f5f5;
     box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
 }
 
-.media.is-chat-message.is-retracted {
-    padding: 0.5em;
-    border-left: 3px solid #ff3860; /* Reddish border for distinction */
-    background-color: #f5f5f5; /* Light grey background */
-    color: #636363; /* Slightly darker text for better readability */
+.message-body {
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
 }
 
 .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, .chat-message-highlight .actions {
-    opacity: 1;
+    display: inline;
 }
 
 .action-button {
     box-sizing: border-box;
     margin: 0 0.2rem;
     user-select: none;
+    cursor: pointer;
     z-index: 10;
 }
 
@@ -70,34 +224,6 @@
     transition: box-shadow 0.3s ease;
 }
 
-.has-padding-left {
-    padding-left: 0.5em;
-}
-
-#attach_button, #send_button {
-    height: 100%;
-}
-
-/* URL previews */
-
-.url-preview-iframe-container {
-  position: relative;
-  padding-bottom: 56.25%;
-  height: 0;
-  overflow: hidden;
-  max-width: 100%;
-  background: #000;
-}
-
-.url-preview-iframe {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  border: 0;
-}
-
 /* Attachments */
 
 #attachments {
@@ -125,48 +251,3 @@
     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;
-}