Initial chat message description design change

module/documents/chatMessage.mjs

@@ -101,7 +101,7 @@ export default class DhpChatMessage extends foundry.documents.ChatMessage {
                     CONFIG.DH.id,
                     CONFIG.DH.SETTINGS.gameSettings.appearance
                 ).expandRollMessage,
-                rollSections = html.querySelectorAll('.roll-part'),
+                rollSections = html.querySelectorAll('.roll-part, .description-section'),
                 itemDesc = html.querySelector('.domain-card-move');
             rollSections.forEach(s => {
                 if (s.classList.contains('roll-section')) {

styles/less/ui/chat/chat.less

@@ -574,6 +574,39 @@
             }
         }
 
+        .chat-roll .description-section {
+            background: @dark-80;
+            border-radius: 6px;
+
+            .description-header {
+                width: 100%;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                gap: 2px;
+
+                .description-header-title {
+                    color: @golden;
+                    font-size: var(--font-size-16);
+                }
+
+                .description-header-subtitle {
+                    font-size: var(--font-size-14);
+                    padding-bottom: 2px;
+                }
+            }
+
+            .roll-part-content .dice-tooltip .wrapper {
+                i {
+                    margin: 0;
+                }
+
+                > :first-child:not(.target-selector) {
+                    margin: 0;
+                }
+            }
+        }
+
         .roll-buttons {
             display: flex;
             gap: 5px;

templates/ui/chat/parts/description-part.hbs

@@ -1,5 +1,8 @@
-<div class="roll-part dice-roll description-section" data-action="expandRoll">
+<div class="dice-roll description-section" data-action="expandRoll">
-    <div class="roll-part-header"><div><span>{{localize "DAGGERHEART.GENERAL.description"}}</span></div></div>
+    <div class="description-header">
+        <div class="description-header-title">{{title}}</div>
+        <div class="description-header-subtitle">{{title}}</div>
+    </div>
 
     <div class="roll-part-content description-content">
         <div class="dice-tooltip">