front-end restructuring, chat shows message ownership

resources/js/pages/Dynamics/Show.vue

@@ -76,11 +76,15 @@ const breadcrumbs = [
 }
 
 .c-dynamic-show__card {
-    @apply overflow-hidden bg-white shadow-sm sm:rounded-lg dark:bg-gray-800;
+    @apply overflow-hidden;
+    background-color: var(--card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
 }
 
 .c-dynamic-show__body {
-    @apply p-6 text-gray-900 dark:text-gray-100;
+    @apply p-6;
+    color: var(--foreground);
 }
 
 .c-dynamic-show__title {

resources/js/pages/Ledgers/Show.vue

@@ -250,26 +250,20 @@ function isOwnerUser(userId: number): boolean {
     </div>
 
     <!-- Lightbox Modal -->
-    <div
-        v-if="activeLightboxUrl"
-        class="c-ledger-show__lightbox"
-        @click="closeLightbox"
-    >
-        <button @click="closeLightbox" class="c-ledger-show__lightbox-close">
-            ✕
-        </button>
-        <div class="c-ledger-show__lightbox-content" @click.stop>
+    <div v-if="activeLightboxUrl" class="c-lightbox" @click="closeLightbox">
+        <button @click="closeLightbox" class="c-lightbox__close">✕</button>
+        <div class="c-lightbox__content" @click.stop>
             <img
                 v-if="activeLightboxType === 'image'"
                 :src="activeLightboxUrl"
-                class="c-ledger-show__lightbox-img"
+                class="c-lightbox__image"
             />
             <video
                 v-else-if="activeLightboxType === 'video'"
                 :src="activeLightboxUrl"
                 controls
                 autoplay
-                class="c-ledger-show__lightbox-video"
+                class="c-lightbox__video"
             ></video>
         </div>
     </div>
@@ -361,24 +355,4 @@ function isOwnerUser(userId: number): boolean {
 .c-ledger-show__media-video-overlay {
     @apply absolute inset-0 flex items-center justify-center bg-black/40 text-2xl font-bold text-white;
 }
-
-.c-ledger-show__lightbox {
-    @apply fixed inset-0 z-50 flex items-center justify-center bg-black/95 p-4;
-}
-
-.c-ledger-show__lightbox-close {
-    @apply absolute top-6 right-6 cursor-pointer text-3xl text-white transition-colors duration-200 hover:text-red-500;
-}
-
-.c-ledger-show__lightbox-content {
-    @apply max-h-full max-w-full;
-}
-
-.c-ledger-show__lightbox-img {
-    @apply max-h-[90vh] max-w-full rounded object-contain shadow-lg;
-}
-
-.c-ledger-show__lightbox-video {
-    @apply max-h-[90vh] max-w-full rounded shadow-lg;
-}
 </style>