further css centralization and footer injection

- mobile breakpoint change for mem dashboard (800=>960px)
- css cleanup and globalization
- final css cleanup

webui/components/settings/memory/memory-dashboard.html

@@ -11,12 +11,31 @@
     <div x-data>
         <template x-if="$store.memoryDashboardStore">
             <div x-create="$store.memoryDashboardStore.onOpen()"
-                x-destroy="$store.memoryDashboardStore.cleanup()" class="memory-dashboard">
+                x-destroy="$store.memoryDashboardStore.cleanup()" class="memory-dashboard" x-init="
+                // Inject footer into modal structure after component loads
+                $nextTick(() => {
+                    const modalInner = $el.closest('.modal-inner');
+                    if (modalInner && !modalInner.querySelector('.modal-footer')) {
+                        const footer = document.createElement('div');
+                        footer.className = 'modal-footer';
+                        footer.innerHTML = `
+                            <div id='buttons-container'>
+                                <button class='btn btn-ok' @click='$store.memoryDashboardStore.exportMemories()'>
+                                    Export Memories (JSON)
+                                </button>
+                            </div>
+                        `;
+                        modalInner.appendChild(footer);
+                        // Re-compile Alpine for the new footer
+                        Alpine.initTree(footer);
+                        
+                        // Add class to modal-inner for styling
+                        modalInner.classList.add('modal-with-footer');
+                    }
+                })">
 
-                <!-- Unified Filter Section -->
+                <!-- Search and Filters Section -->
                 <div class="memory-filters-header">
-                    <div class="filter-container-unified">
-                        <!-- All elements in single container for flexible layout -->
                         <div class="filter-group-inline filter-memory-dir">
                             <label for="memory-subdir-select">Memory Directory</label>
                             <select id="memory-subdir-select" x-model="$store.memoryDashboardStore.selectedMemorySubdir"
@@ -57,16 +76,15 @@
                             placeholder="Search memory content..."
                             @keyup.enter="$store.memoryDashboardStore.searchMemories()" />
                         
-                        <button class="btn primary btn-search" @click="$store.memoryDashboardStore.searchMemories()"
+                        <button class="btn btn-ok btn-search" @click="$store.memoryDashboardStore.searchMemories()"
                             :disabled="$store.memoryDashboardStore.loading || $store.memoryDashboardStore.loadingSubdirs">
                             <span x-show="!$store.memoryDashboardStore.initializingMemory">Search</span>
                             <span x-show="$store.memoryDashboardStore.initializingMemory">Init...</span>
                         </button>
 
-                        <button class="btn btn-clear" @click="$store.memoryDashboardStore.clearSearch()">
+                        <button class="btn btn-cancel btn-clear" @click="$store.memoryDashboardStore.clearSearch()">
                             Clear
                         </button>
-                    </div>
                 </div>
 
                 <!-- Loading state -->
@@ -85,7 +103,7 @@
                 <div x-show="!$store.memoryDashboardStore.loading && !$store.memoryDashboardStore.error"
                     class="memory-table-container">
 
-                    <!-- Compact Status Bar -->
+                    <!-- Status Bar -->
                     <div class="memory-status-bar" x-show="!$store.memoryDashboardStore.loading">
                         <div class="status-info">
                             <span class="status-item">
@@ -106,9 +124,9 @@
                             </span>
                         </div>
 
-                        <!-- Compact Pagination -->
+                        <!-- Pagination -->
                         <div class="status-pagination" x-show="$store.memoryDashboardStore.totalPages > 1">
-                            <button class="btn-icon" @click="$store.memoryDashboardStore.prevPage()"
+                            <button class="btn btn-icon" @click="$store.memoryDashboardStore.prevPage()"
                                 :disabled="$store.memoryDashboardStore.currentPage === 1"
                                 title="Previous Page">
                                 <span class="material-symbols-outlined">chevron_left</span>
@@ -122,8 +140,9 @@
                                        @keyup.enter="$store.memoryDashboardStore.goToPage($store.memoryDashboardStore.currentPage)"
                                        :min="1"
                                        :max="$store.memoryDashboardStore.totalPages" />
+                                <span class="page-total">of <strong x-text="$store.memoryDashboardStore.totalPages"></strong></span>
                             </div>
-                            <button class="btn-icon" @click="$store.memoryDashboardStore.nextPage()"
+                            <button class="btn btn-icon" @click="$store.memoryDashboardStore.nextPage()"
                                 :disabled="$store.memoryDashboardStore.currentPage === $store.memoryDashboardStore.totalPages"
                                 title="Next Page">
                                 <span class="material-symbols-outlined">chevron_right</span>
@@ -138,25 +157,25 @@
                         </div>
 
                         <div class="mass-actions">
-                            <button class="btn-mass copy" @click="$store.memoryDashboardStore.bulkCopyMemories()"
+                            <button class="btn btn-mass copy" @click="$store.memoryDashboardStore.bulkCopyMemories()"
                                 title="Copy Selected Content">
                                 <span class="material-symbols-outlined">content_copy</span>
                                 Copy
                             </button>
 
-                            <button class="btn-mass export" @click="$store.memoryDashboardStore.bulkExportMemories()"
+                            <button class="btn btn-mass export" @click="$store.memoryDashboardStore.bulkExportMemories()"
                                 title="Export Selected Memories">
                                 <span class="material-symbols-outlined">download</span>
                                 Export
                             </button>
 
-                            <button class="btn-mass delete" @click="$store.memoryDashboardStore.bulkDeleteMemories()"
+                            <button class="btn btn-mass delete" @click="$store.memoryDashboardStore.bulkDeleteMemories()"
                                 title="Delete Selected Memories">
                                 <span class="material-symbols-outlined">delete</span>
                                 Delete
                             </button>
 
-                            <button class="btn-mass clear" @click="$store.memoryDashboardStore.clearSelection()"
+                            <button class="btn btn-mass clear" @click="$store.memoryDashboardStore.clearSelection()"
                                 title="Clear Selection">
                                 <span class="material-symbols-outlined">close</span>
                                 Clear
@@ -227,13 +246,13 @@
                                         <!-- Actions -->
                                         <td class="actions-cell" @click.stop>
                                             <div class="actions-wrapper">
-                                                <button class="btn-action copy"
+                                                <button class="btn btn-action copy"
                                                     @click="$store.memoryDashboardStore.copyToClipboard($store.memoryDashboardStore.formatMemoryForCopy(memory))"
                                                     title="Copy Memory">
                                                     <span class="material-symbols-outlined">content_copy</span>
                                                 </button>
 
-                                                <button class="btn-action delete"
+                                                <button class="btn btn-action delete"
                                                     @click="$store.memoryDashboardStore.deleteMemory(memory)"
                                                     title="Delete Memory">
                                                     <span class="material-symbols-outlined">delete</span>
@@ -262,12 +281,6 @@
 
 
 
-                    <!-- Export button -->
-                    <div class="export-section">
-                        <button class="btn primary" @click="$store.memoryDashboardStore.exportMemories()">
-                            Export Memories (JSON)
-                        </button>
-                    </div>
                 </div>
 
 
@@ -277,33 +290,31 @@
     </div>
 
     <style>
-        [x-cloak] {
-            display: none !important;
+        .modal-inner.modal-with-footer {
+            display: flex;
+            flex-direction: column;
         }
-
-        .memory-dashboard {
-            padding: 1rem;
-            margin: 0 auto;
-            background: var(--color-background);
-            color: var(--color-text);
+        
+        .modal-inner.modal-with-footer .modal-scroll {
+            flex: 1;
+            min-height: 0;
         }
-
-        /* Compact Linear Filter Layout */
-        .memory-filters-header {
-            margin-bottom: 1rem;
-            padding: 1rem;
-            background: var(--color-panel);
-            border: 1px solid var(--color-border);
-            border-radius: 8px;
+        
+        .modal-inner.modal-with-footer .modal-footer {
+            flex-shrink: 0;
         }
 
-        /* Unified container using CSS Grid for desktop layout */
-        .filter-container-unified {
+        .memory-filters-header {
             display: grid;
             grid-template-columns: 35% 25% 10% auto;
             grid-template-rows: auto auto;
             gap: 0.75rem;
             align-items: center;
+            margin: 1rem 0;
+            padding: 1rem;
+            background: var(--color-panel);
+            border: 1px solid var(--color-border);
+            border-radius: 8px;
         }
 
         /* Grid positioning for desktop - 2 rows */
@@ -313,7 +324,7 @@
         .filter-threshold { grid-column: 4; grid-row: 2; }
         
         #search-input { grid-column: 1 / 3; grid-row: 2; }
-        .btn-search { grid-column: 3; grid-row: 2; }
+        .btn-search { grid-column: 3; grid-row: 2; justify-content: center; }
         .btn-clear { 
             grid-column: 4; 
             grid-row: 1;
@@ -322,9 +333,9 @@
 
         .filter-group-inline {
             display: flex;
+            flex: 1;
             align-items: center;
             gap: 0.5rem;
-            flex: 1;
         }
 
         .filter-group-inline label {
@@ -337,13 +348,7 @@
 
         .filter-group-inline select,
         .filter-group-inline input {
-            padding: 0.4rem 0.6rem;
             border: 1px solid var(--color-border);
-            background: var(--color-input);
-            color: var(--color-text);
-            border-radius: 4px;
-            font-size: 0.9rem;
-            height: 36px;
             flex: 0 auto;
             min-width: 0;
         }
@@ -360,17 +365,13 @@
         }
         
         .filter-limit input {
-            flex: 0 0 200%;
+            flex: 0 0 150%;
         }
 
 
         #search-input {
             flex: 1;
-            padding: 0.5rem 0.75rem;
             border: 1px solid var(--color-border);
-            background: var(--color-input);
-            color: var(--color-text);
-            border-radius: 4px;
             font-size: 0.9rem;
             height: 38px;
         }
@@ -381,63 +382,18 @@
             background: var(--color-input-focus);
         }
 
-        .filter-threshold {
-            display: flex;
-            align-items: center;
-            gap: 0.75rem;
-            padding: 0 0.5rem;
-        }
-
         .filter-threshold label {
             font-size: 0.85rem;
-            color: var(--color-text);
             opacity: 0.8;
-            white-space: nowrap;
-        }
-
-        .filter-threshold strong {
-            color: var(--color-primary);
-            font-weight: 600;
-            min-width: 3ch;
-            display: inline-block;
-        }
-
-        .filter-threshold input[type="range"] {
-            height: 4px;
-            -webkit-appearance: none;
-            appearance: none;
-            background: var(--color-border);
-            border-radius: 2px;
-            outline: none;
-        }
-
-        .filter-threshold input[type="range"]::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            appearance: none;
-            width: 16px;
-            height: 16px;
-            background: var(--color-primary);
-            border-radius: 50%;
-            cursor: pointer;
-        }
-
-        .filter-threshold input[type="range"]::-moz-range-thumb {
-            width: 16px;
-            height: 16px;
-            background: var(--color-primary);
-            border-radius: 50%;
-            cursor: pointer;
-            border: none;
         }
 
-        /* Compact Status Bar */
         .memory-status-bar {
             display: flex;
             justify-content: space-between;
             align-items: center;
             padding: 0.75rem 1rem;
             background: var(--color-panel);
-            border: 1px solid var(--color-border);
+            border-bottom: 1px solid var(--color-border);
             border-radius: 8px;
             margin-bottom: 1rem;
             font-size: 0.9rem;
@@ -454,8 +410,6 @@
             display: flex;
             align-items: center;
             gap: 0.25rem;
-            color: var(--color-text);
-            opacity: 0.8;
         }
 
         .status-item strong {
@@ -482,18 +436,17 @@
         .btn-icon {
             background: transparent;
             border: 1px solid var(--color-border);
-            border-radius: 4px;
-            padding: 0.25rem;
-            cursor: pointer;
             color: var(--color-text);
+            padding: 0.25rem;
             display: flex;
             align-items: center;
-            transition: all 0.2s;
+            font-size: 0;
         }
 
         .btn-icon:hover:not(:disabled) {
             background: var(--color-panel);
             border-color: var(--color-primary);
+            color: var(--color-text);
         }
 
         .btn-icon:disabled {
@@ -509,14 +462,24 @@
             display: flex;
             align-items: center;
             gap: 0.5rem;
-            font-size: 0.85rem;
-            color: var(--color-text);
         }
 
         .page-input-group label {
             opacity: 0.8;
         }
 
+        .page-total {
+            color: var(--color-text);
+            opacity: 0.8;
+            font-size: 0.85rem;
+            white-space: nowrap;
+        }
+
+        .page-total strong {
+            color: var(--color-primary);
+            font-weight: 600;
+        }
+
         .page-input {
             width: 60px;
             padding: 0.25rem 0.5rem;
@@ -535,7 +498,7 @@
             background: var(--color-input-focus);
         }
 
-        /* Remove spinner arrows for cleaner look */
+        /* Remove spinner arrows */
         .page-input::-webkit-inner-spin-button,
         .page-input::-webkit-outer-spin-button {
             -webkit-appearance: none;
@@ -547,13 +510,6 @@
             appearance: textfield;
         }
 
-        .loading-text {
-            font-size: 0.85rem;
-            color: var(--color-text);
-            opacity: 0.7;
-            font-style: italic;
-        }
-
         .loading-state,
         .error-state,
         .no-memories,
@@ -568,6 +524,11 @@
             margin: 1rem 0;
         }
 
+        .loading-state {
+            display: grid;
+            align-items: center;
+        }
+
         .init-message {
             color: var(--color-primary);
             border-color: var(--color-primary);
@@ -604,16 +565,8 @@
         }
 
         .memory-table-container {
-            background: var(--color-background);
             border: 1px solid var(--color-border);
             border-radius: 8px;
-            overflow: hidden;
-            margin-bottom: 1rem;
-        }
-
-        .table-wrapper {
-            width: 100%;
-            overflow-x: auto;
         }
 
         .memory-table {
@@ -622,7 +575,6 @@
             table-layout: fixed;
         }
 
-        /* Fixed column widths for proper fit */
         .col-select {
             width: 5%;
         }
@@ -648,7 +600,6 @@
             overflow: hidden;
         }
 
-        /* Metadata cell styling */
         .metadata-cell {
             overflow: visible;
             white-space: normal;
@@ -673,17 +624,19 @@
             font-family: monospace;
         }
 
-        .source-type {
-            font-size: 0.8rem;
-            color: var(--color-text);
-            font-weight: 500;
-        }
+        .area-badge {
+                color: white;
+                padding: 0.35rem 0.75rem;
+                border-radius: 16px;
+                font-size: 0.75rem;
+                font-weight: bold;
+                text-transform: uppercase;
+            }
 
-        /* Selection column styling */
         .select-cell,
         .col-select {
             text-align: center;
-            padding: 0.5rem !important;
+            padding: 0.65rem 0.5rem !important;
         }
 
         .select-cell input[type="checkbox"],
@@ -692,30 +645,44 @@
             transform: scale(1.2);
         }
 
-        /* Selected row styling */
         .memory-row.selected {
-            background: rgba(115, 122, 129, 0.2);
+            background: var(--color-panel);
             border-left: 3px solid var(--color-primary);
         }
 
-
-        /* Mass action toolbar */
         .mass-action-toolbar {
             display: flex;
             justify-content: space-between;
             align-items: center;
             padding: 1rem;
-            background: rgba(115, 122, 129, 0.2);
+            background: var(--color-panel);
             border: 1px solid var(--color-primary);
             border-radius: 8px;
             margin: 1rem 0;
             animation: slideDown 0.3s ease;
         }
 
+        .btn-mass {
+            align-items: center;
+            border: 1px solid var(--color-border);
+            gap: 0.25rem;
+            display: flex;
+            background: var(--color-background);
+            color: var(--color-text);
+        }
+
+        .btn-mass:hover {
+            border-color: var(--color-primary);
+            color: var(--color-primary);
+        }
+
+        .btn-mass.delete:hover {
+            border-color: var(--color-accent);
+            color: var(--color-accent);
+        }
 
         .selection-info {
             font-weight: 600;
-            color: var(--color-primary);
         }
 
         .mass-actions {
@@ -723,21 +690,6 @@
             gap: 0.5rem;
         }
 
-        .btn-mass {
-            display: flex;
-            align-items: center;
-            gap: 0.25rem;
-            padding: 0.4rem 0.8rem;
-            border: 1px solid var(--color-border);
-            background: var(--color-background);
-            color: var(--color-text);
-            border-radius: 4px;
-            cursor: pointer;
-            font-size: 0.85rem;
-            font-weight: 500;
-            transition: all 0.2s ease;
-        }
-
         .btn-mass .material-symbols-outlined {
             font-size: 18px;
         }
@@ -747,32 +699,16 @@
             background: var(--color-panel);
         }
 
-        .btn-mass.copy:hover {
-            border-color: var(--color-primary);
-            color: var(--color-primary);
-        }
-
-        .btn-mass.export:hover {
-            border-color: var(--color-primary);
-            color: var(--color-primary);
-        }
-
         .btn-mass.delete:hover {
             border-color: var(--color-accent);
             color: var(--color-accent);
         }
 
-        .btn-mass.clear:hover {
-            border-color: var(--color-primary);
-            color: var(--color-primary);
-        }
-
         @keyframes slideDown {
             from {
                 opacity: 0;
                 transform: translateY(-10px);
             }
-
             to {
                 opacity: 1;
                 transform: translateY(0);
@@ -806,37 +742,9 @@
             border-bottom: none;
         }
 
-        .area-badge {
-            padding: 0.25rem 0.5rem;
-            border-radius: 12px;
-            color: white;
-            font-size: 0.75rem;
-            font-weight: bold;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-        }
-
-
-        .timestamp-cell {
-            font-size: 0.85rem;
-            color: var(--color-text);
-            opacity: 0.7;
-            white-space: normal;
-            word-break: break-word;
-            font-family: monospace;
-            line-height: 1.2;
-        }
-
-        .source-info {
-            display: flex;
-            flex-direction: column;
-            gap: 0.25rem;
-            align-items: flex-start;
-        }
-
         .source-type {
             padding: 0.25rem 0.5rem;
-            border-radius: 6px;
+            border-radius: var(--border-radius);
             font-size: 0.75rem;
             font-weight: 500;
             text-align: center;
@@ -845,43 +753,10 @@
             flex-shrink: 0;
         }
 
-        .source-type.knowledge {
-            background: rgba(115, 122, 129, 0.2);
-            color: var(--color-primary);
-            border-color: var(--color-primary);
-        }
-
-
-        .source-type.conversation {
-            background: rgba(101, 101, 101, 0.2);
-            color: var(--color-text);
-            opacity: 0.8;
-            border-color: var(--color-border);
-        }
-
-
-        .source-file {
-            font-size: 0.7rem;
-            color: var(--color-text);
-            opacity: 0.7;
-            font-family: monospace;
-            background: var(--color-panel);
-            padding: 0.2rem 0.4rem;
-            border-radius: 4px;
-            border: 1px solid var(--color-border);
-            word-break: break-all;
-            white-space: normal;
-            max-width: 100%;
-            overflow-wrap: break-word;
-        }
-
         .content-preview {
             line-height: 1.4;
-            font-size: 0.9rem;
-            color: var(--color-text);
             word-wrap: break-word;
             overflow-wrap: break-word;
-            max-width: 100%;
             overflow: hidden;
             text-overflow: ellipsis;
         }
@@ -904,10 +779,7 @@
         }
 
         .actions-cell {
-            min-width: 60px;
-            width: 60px;
             padding: 0 !important;
-            height: 60px;
             position: relative;
         }
 
@@ -923,28 +795,15 @@
             justify-content: center;
         }
 
-        .actions-cell .btn-action {
-            display: block;
-            margin: 0.1rem 0;
-            width: 28px;
-            height: 28px;
-        }
-
+        /* Table action buttons - extends .btn */
         .btn-action {
             background: none;
             border: 1px solid var(--color-border);
             padding: 0.25rem;
             margin: 0 0.1rem;
-            cursor: pointer;
-            border-radius: 4px;
             color: var(--color-text);
             opacity: 0.7;
-            transition: all 0.2s ease;
             display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            min-width: 28px;
-            height: 28px;
         }
 
         .btn-action .material-symbols-outlined {
@@ -977,389 +836,48 @@
             color: var(--color-accent);
         }
 
+        /* Responsive design */
+        @media (max-width: 870px) {
+            .memory-dashboard {
+                padding: 0.5rem;
+            }
 
+            .memory-filters-header {
+                padding: 0.75rem;
+            }
 
-        .pagination-info-inline {
-            color: var(--color-text);
-            opacity: 0.7;
-            font-size: 0.9rem;
-        }
+            .memory-filters-header {
+                display: flex;
+                flex-wrap: wrap;
+                gap: 0.75rem;
+            }
+            
+            /* Reset grid positioning */
+            .filter-memory-dir,
+            .filter-area,
+            .filter-limit,
+            .filter-threshold,
+            #search-input,
+            .btn-search,
+            .btn-clear {
+                grid-column: auto;
+                grid-row: auto;
+            }
 
-        .pagination-controls {
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-        }
+            .filter-group-inline {
+                width: 100%;
+                flex-direction: row;
+                align-items: center;
+                gap: 0.5rem;
+            }
 
-        .page-select {
-            background: var(--color-background);
-            border: 1px solid var(--color-border);
-            color: var(--color-text);
-            padding: 0.5rem 0.75rem;
-            border-radius: 6px;
-            font-size: 0.9rem;
-            cursor: pointer;
-            min-width: 120px;
-        }
-
-        .page-select:focus {
-            outline: none;
-            border-color: var(--color-primary);
-            box-shadow: 0 0 0 2px rgba(115, 122, 129, 0.2);
-            background: var(--color-input-focus);
-        }
-
-
-
-
-        .export-section {
-            text-align: center;
-            margin-top: 1rem;
-            padding: 1rem;
-            background: var(--color-panel);
-            border: 1px solid var(--color-border);
-            border-radius: 8px;
-            border-top: 1px solid var(--color-border);
-        }
-
-        .modal-enter {
-            transition: all 0.3s ease;
-        }
-
-        .modal-enter-start {
-            opacity: 0;
-        }
-
-        .modal-enter-end {
-            opacity: 1;
-        }
-
-        .modal-leave {
-            transition: all 0.2s ease;
-        }
-
-        .modal-leave-start {
-            opacity: 1;
-        }
-
-        .modal-leave-end {
-            opacity: 0;
-        }
-
-        .memory-detail-modal {
-            background: var(--color-background);
-            border: 1px solid var(--color-border);
-            border-radius: 16px;
-            width: 95%;
-            max-width: 1200px;
-            max-height: 90vh;
-            min-height: 60vh;
-            overflow: hidden;
-            display: flex;
-            flex-direction: column;
-            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-            animation: modalSlideIn 0.3s ease-out;
-            margin: 0 auto;
-        }
-
-        @keyframes modalSlideIn {
-            from {
-                transform: translateY(20px) scale(0.95);
-                opacity: 0;
-            }
-
-            to {
-                transform: translateY(0) scale(1);
-                opacity: 1;
-            }
-        }
-
-        .header-left {
-            flex: 1;
-        }
-
-        .memory-title {
-            display: flex;
-            align-items: center;
-            gap: 1rem;
-            margin-bottom: 0.75rem;
-        }
-
-        .memory-title h3 {
-            margin: 0;
-            font-size: 1.5rem;
-            font-weight: 600;
-            color: var(--color-text);
-        }
-
-        .area-badge-large {
-            padding: 0.5rem 1rem;
-            border-radius: 20px;
-            color: white;
-            font-size: 0.75rem;
-            font-weight: 700;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-        }
-
-        .memory-meta-quick {
-            display: flex;
-            gap: 0.75rem;
-            align-items: center;
-            flex-wrap: wrap;
-        }
-
-        .timestamp-badge {
-            background: var(--color-panel);
-            border: 1px solid var(--color-border);
-            color: var(--color-text);
-            opacity: 0.8;
-            padding: 0.25rem 0.75rem;
-            border-radius: 12px;
-            font-size: 0.8rem;
-            font-weight: 500;
-        }
-
-        .source-badge {
-            padding: 0.25rem 0.75rem;
-            border-radius: 12px;
-            font-size: 0.8rem;
-            font-weight: 500;
-            border: 1px solid;
-        }
-
-        .source-badge.knowledge {
-            background: rgba(115, 122, 129, 0.1);
-            color: var(--color-primary);
-            border-color: var(--color-primary);
-        }
-
-        .source-badge.conversation {
-            background: rgba(101, 101, 101, 0.1);
-            color: var(--color-text);
-            opacity: 0.8;
-            border-color: var(--color-border);
-        }
-
-        .header-actions {
-            display: flex;
-            gap: 0.5rem;
-            align-items: flex-start;
-        }
-
-        .btn-action-header {
-            background: var(--color-background);
-            border: 1px solid var(--color-border);
-            padding: 0.75rem;
-            border-radius: 12px;
-            cursor: pointer;
-            color: var(--color-secondary);
-            transition: all 0.2s ease;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-        }
-
-        .btn-action-header:hover {
-            background: rgba(255, 255, 255, 0.1);
-            border-color: var(--color-primary);
-            transform: translateY(-1px);
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-        }
-
-        .btn-action-header.copy:hover {
-            background: rgba(76, 175, 80, 0.05);
-            border-color: #4CAF50;
-            color: #4CAF50;
-        }
-
-        .btn-action-header.delete:hover {
-            background: rgba(244, 67, 54, 0.05);
-            border-color: #f44336;
-            color: #f44336;
-        }
-
-        .btn-close-enhanced {
-            background: rgba(207, 102, 121, 0.1);
-            border: 1px solid var(--color-accent);
-            padding: 0.75rem;
-            border-radius: 12px;
-            cursor: pointer;
-            color: var(--color-accent);
-            transition: all 0.2s ease;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        .btn-close-enhanced:hover {
-            background: rgba(207, 102, 121, 0.15);
-            border-color: var(--color-accent);
-            transform: translateY(-1px);
-        }
-
-        .modal-body-enhanced {
-            display: flex;
-            flex: 1;
-            overflow: hidden;
-            min-height: 0;
-        }
-
-        .content-section-main {
-            flex: 2;
-            padding: 2rem;
-            overflow-y: auto;
-            background: var(--color-background);
-        }
-
-        .metadata-sidebar {
-            flex: 1;
-            min-width: 320px;
-            background: var(--color-panel);
-            border-left: 1px solid var(--color-border);
-            padding: 2rem;
-            overflow-y: auto;
-        }
-
-        .section-header {
-            margin-bottom: 1.5rem;
-        }
-
-        .section-header h4 {
-            margin: 0;
-            font-size: 1.1rem;
-            font-weight: 600;
-            color: var(--color-text);
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-        }
-
-        .content-display {
-            background: var(--color-background);
-            border: 1px solid var(--color-border);
-            border-radius: 12px;
-            padding: 1.5rem;
-            font-size: 0.95rem;
-            line-height: 1.6;
-            color: var(--color-text);
-            white-space: pre-wrap;
-            max-height: 60vh;
-            overflow-y: auto;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
-        }
-
-        .metadata-grid {
-            display: flex;
-            flex-direction: column;
-            gap: 1.25rem;
-        }
-
-        .metadata-item {
-            display: flex;
-            flex-direction: column;
-            gap: 0.5rem;
-        }
-
-        .metadata-item label {
-            font-size: 0.8rem;
-            font-weight: 600;
-            color: var(--color-secondary);
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-        }
-
-        .metadata-item value {
-            font-size: 0.9rem;
-            color: var(--color-text);
-            background: var(--color-background);
-            padding: 0.75rem;
-            border-radius: 8px;
-            border: 1px solid var(--color-border);
-            word-break: break-all;
-        }
-
-        .metadata-item value.monospace {
-            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-            font-size: 0.85rem;
-        }
-
-        .consolidation-badge {
-            background: var(--color-accent) !important;
-            color: white !important;
-            padding: 0.5rem 1rem !important;
-            border-radius: 20px !important;
-            font-weight: 600 !important;
-            text-transform: capitalize !important;
-            border: none !important;
-        }
-
-        .tags-display {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 0.5rem;
-            background: var(--color-background);
-            padding: 0.75rem;
-            border-radius: 8px;
-            border: 1px solid var(--color-border);
-        }
-
-        .tag-pill {
-            background: var(--color-primary);
-            color: white;
-            padding: 0.25rem 0.75rem;
-            border-radius: 12px;
-            font-size: 0.75rem;
-            font-weight: 500;
-        }
-
-        /* Responsive design */
-        @media (max-width: 768px) {
-            .memory-dashboard {
-                padding: 0.5rem;
-            }
-
-            .memory-filters-header {
-                padding: 0.75rem;
-            }
-
-            /* Transform grid to flex on mobile for reordering */
-            .filter-container-unified {
-                display: flex;
-                flex-wrap: wrap;
-                gap: 0.75rem;
-            }
-            
-            /* Reset grid positioning */
-            .filter-memory-dir,
-            .filter-area,
-            .filter-limit,
-            .filter-threshold,
-            #search-input,
-            .btn-search,
-            .btn-clear {
-                grid-column: auto;
-                grid-row: auto;
-            }
-
-            .filter-group-inline {
-                width: 100%;
-                flex-direction: row;
-                align-items: center;
-                gap: 0.5rem;
-            }
-
-            .filter-group-inline label {
-                font-size: 0.9rem;
-                margin-bottom: 0.25rem;
-            }
+            .filter-group-inline label {
+                font-size: 0.9rem;
+                margin-bottom: 0.25rem;
+            }
 
             .filter-group-inline select,
             .filter-group-inline input {
-                width: 100%;
-                max-width: 100%;
                 height: 42px;
                 font-size: 1rem;
             }
@@ -1369,7 +887,6 @@
             }
 
             .filter-limit input {
-                width: 100%;
                 flex: 1;
             }
 
@@ -1399,7 +916,6 @@
                 flex: auto;
                 width: 100%;
                 height: 42px;
-                font-size: 1rem;
             }
             
             /* Search button and threshold on same row */
@@ -1434,8 +950,6 @@
             .memory-status-bar {
                 flex-direction: column;
                 gap: 0.75rem;
-                padding: 0.75rem;
-                text-align: center;
             }
 
             .status-info {
@@ -1482,288 +996,12 @@
             .col-actions {
                 width: 10%;
             }
-
-            .memory-detail-modal {
-                width: 98%;
-                max-height: 95vh;
-                min-height: 50vh;
-                margin: 0;
-            }
-
-            .modal-body-enhanced {
-                flex-direction: column;
-            }
-
-            .metadata-sidebar {
-                min-width: unset;
-                border-left: none;
-                border-top: 1px solid var(--color-border);
-            }
-
-            .modal-header-enhanced {
-                padding: 1rem;
-            }
-
-            .memory-title {
-                flex-direction: column;
-                align-items: flex-start;
-                gap: 0.5rem;
-            }
-
-            .content-section-main,
-            .metadata-sidebar {
-                padding: 1rem;
-            }
-
-
-
-            .pagination-controls {
-                flex-wrap: wrap;
-            }
-        }
-
-        /* Memory Detail Modal Styles */
-        .modal-header-enhanced {
-            display: flex;
-            justify-content: space-between;
-            align-items: flex-start;
-            padding: 1.5rem;
-            border-bottom: 2px solid var(--color-border);
-            background: linear-gradient(135deg, var(--color-panel) 0%, var(--color-background) 100%);
-        }
-
-        .memory-title {
-            display: flex;
-            align-items: center;
-            gap: 1rem;
-            margin-bottom: 0.5rem;
-        }
-
-        .area-badge-large {
-            color: white;
-            padding: 0.5rem 1rem;
-            border-radius: 20px;
-            font-size: 0.8rem;
-            font-weight: bold;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-        }
-
-        .memory-meta-quick {
-            display: flex;
-            gap: 1rem;
-            align-items: center;
         }
 
-        .timestamp-badge,
-        .source-badge {
-            padding: 0.25rem 0.75rem;
-            border-radius: 12px;
-            font-size: 0.75rem;
-            font-weight: 500;
-            background: var(--color-panel);
-            border: 1px solid var(--color-border);
-        }
-
-        .source-badge.knowledge {
-            background: rgba(115, 122, 129, 0.1);
-            color: var(--color-primary);
-            border-color: var(--color-primary);
-        }
-
-        .source-badge.conversation {
-            background: rgba(101, 101, 101, 0.1);
-            color: var(--color-text);
-            opacity: 0.8;
-            border-color: var(--color-border);
-        }
-
-        .header-actions {
-            display: flex;
-            gap: 0.5rem;
-        }
-
-        .btn-action-header {
-            background: var(--color-background);
-            border: 1px solid var(--color-border);
-            color: var(--color-text);
-            padding: 0.5rem;
-            border-radius: 8px;
-            cursor: pointer;
-            transition: all 0.2s ease;
-        }
-
-        .btn-action-header:hover {
-            border-color: var(--color-primary);
-            background: rgba(115, 122, 129, 0.1);
-        }
-
-        .modal-body-enhanced {
-            display: flex;
-            min-height: 60vh;
-            max-height: 70vh;
-        }
-
-        .content-section-main {
-            flex: 1;
-            padding: 1.5rem;
-            overflow-y: auto;
-        }
-
-        .content-block {
-            margin-bottom: 2rem;
-        }
-
-        .content-block h4 {
-            margin: 0 0 1rem 0;
-            color: var(--color-primary);
-            font-size: 1.1rem;
-            font-weight: 600;
-            border-bottom: 1px solid var(--color-border);
-            padding-bottom: 0.5rem;
-        }
-
-        .memory-content-display {
-            background: var(--color-panel);
-            border: 1px solid var(--color-border);
-            border-radius: 8px;
-            padding: 1.5rem;
-            line-height: 1.6;
-            color: var(--color-text);
-            white-space: pre-wrap;
-            word-break: break-word;
-            max-height: 300px;
-            overflow-y: auto;
-        }
-
-        .tags-display {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 0.5rem;
-        }
-
-        .tag-display {
-            background: var(--color-primary);
-            color: white;
-            padding: 0.25rem 0.75rem;
-            border-radius: 12px;
-            font-size: 0.75rem;
-            font-weight: 500;
-        }
-
-        .metadata-sidebar {
-            min-width: 300px;
-            max-width: 350px;
-            background: var(--color-panel);
-            border-left: 1px solid var(--color-border);
-            padding: 1.5rem;
-            overflow-y: auto;
-        }
-
-        .metadata-sidebar h4 {
-            margin: 0 0 1rem 0;
-            color: var(--color-primary);
-            font-size: 1.1rem;
-            font-weight: 600;
-        }
-
-        .metadata-group {
-            margin-bottom: 1.5rem;
-        }
-
-        .metadata-group h5 {
-            margin: 0 0 0.75rem 0;
-            color: var(--color-text);
-            opacity: 0.7;
-            font-size: 0.9rem;
-            font-weight: 600;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-        }
-
-        .metadata-item {
-            display: flex;
-            flex-direction: column;
-            gap: 0.25rem;
-            margin-bottom: 0.75rem;
-            padding: 0.5rem;
-            background: var(--color-background);
-            border: 1px solid var(--color-border);
-            border-radius: 6px;
-        }
-
-        .metadata-label {
-            font-size: 0.8rem;
-            font-weight: 600;
-            color: var(--color-text);
-            opacity: 0.7;
-            text-transform: uppercase;
-            letter-spacing: 0.3px;
-        }
-
-        .metadata-value {
-            font-size: 0.9rem;
-            color: var(--color-text);
-            word-break: break-all;
-            line-height: 1.4;
-        }
-
-        .source-file-display {
-            font-family: monospace;
-            background: var(--color-panel);
-            padding: 0.5rem;
-            border-radius: 4px;
-            border: 1px solid var(--color-border);
-        }
-
-        .metadata-actions {
-            display: flex;
-            flex-direction: column;
-            gap: 0.5rem;
-        }
-
-        .metadata-actions .btn {
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            justify-content: flex-start;
-            font-size: 0.9rem;
-        }
-
-
-        /* Responsive design for modal */
-        @media (max-width: 768px) {
-            .modal-body-enhanced {
-                flex-direction: column;
-                max-height: 80vh;
-            }
-
-            .metadata-sidebar {
-                min-width: unset;
-                max-width: unset;
-                border-left: none;
-                border-top: 1px solid var(--color-border);
-            }
-
-            .modal-header-enhanced {
-                padding: 1rem;
-            }
-
-            .memory-title {
-                flex-direction: column;
-                align-items: flex-start;
-                gap: 0.5rem;
-            }
-
-            .content-section-main,
-            .metadata-sidebar {
-                padding: 1rem;
-            }
-        }
     </style>
 
     </template>
     </div>
 </body>
 
-</html>
 </html>

webui/components/settings/memory/memory-detail-modal.html

@@ -4,266 +4,17 @@
     <title>Memory Details</title>
 </head>
 
-<style>
-    /* Compact Modal Header */
-    .modal-header-compact {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 1rem 1.5rem;
-        border-bottom: 1px solid var(--color-border);
-        background: var(--color-panel);
-        position: sticky;
-        top: 0;
-        z-index: 100;
-    }
-
-    .header-info {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-        font-size: 0.9rem;
-    }
-
-    .area-badge {
-        color: white;
-        padding: 0.35rem 0.75rem;
-        border-radius: 16px;
-        font-size: 0.75rem;
-        font-weight: bold;
-        text-transform: uppercase;
-    }
-
-    .header-separator {
-        color: var(--color-border);
-        opacity: 0.6;
-    }
-
-    .timestamp-text,
-    .source-text {
-        color: var(--color-text);
-        opacity: 0.8;
-        font-size: 0.75rem;
-        padding: 0.25rem 0.6rem;
-        background: var(--color-background);
-        border: 1px solid var(--color-border);
-        border-radius: 12px;
-    }
-
-    .header-actions {
-        display: flex;
-        gap: 0.5rem;
-    }
-
-    .btn-action-header {
-        background: transparent;
-        border: 1px solid var(--color-border);
-        color: var(--color-text);
-        padding: 0.4rem 0.6rem;
-        border-radius: 4px;
-        cursor: pointer;
-        transition: all 0.2s ease;
-        display: flex;
-        align-items: center;
-        gap: 0.25rem;
-        font-size: 0.85rem;
-    }
-
-    .btn-action-header:hover {
-        border-color: var(--color-primary);
-        background: var(--color-panel);
-    }
-
-    .btn-action-header .material-symbols-outlined {
-        font-size: 18px;
-    }
-
-    .btn-action-header.delete:hover {
-        border-color: var(--color-accent);
-        color: var(--color-accent);
-    }
-
-    .modal-body-enhanced {
-        display: flex;
-        min-height: 60vh;
-        max-height: 70vh;
-    }
-
-    .content-section-main {
-        flex: 1;
-        padding: 1.5rem;
-        overflow-y: auto;
-    }
-
-    .content-block {
-        margin-bottom: 2rem;
-    }
-
-    .content-block h4 {
-        margin: 0 0 1rem 0;
-        color: var(--color-text);
-        font-size: 1.1rem;
-        font-weight: 600;
-        border-bottom: 1px solid var(--color-border);
-        padding-bottom: 0.5rem;
-    }
-
-    .memory-content-display {
-        background: var(--color-panel);
-        border: 1px solid var(--color-border);
-        border-radius: 8px;
-        padding: 1.5rem;
-        line-height: 1.6;
-        color: var(--color-text);
-        white-space: pre-wrap;
-        word-break: break-word;
-        max-height: 300px;
-        overflow-y: auto;
-    }
-
-    .tags-display {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 0.5rem;
-    }
-
-    .tag-display {
-        background: var(--color-primary);
-        color: white;
-        padding: 0.25rem 0.75rem;
-        border-radius: 12px;
-        font-size: 0.75rem;
-        font-weight: 500;
-    }
-
-    .metadata-sidebar {
-        min-width: 300px;
-        max-width: 350px;
-        background: var(--color-panel);
-        border-left: 1px solid var(--color-border);
-        padding: 1.5rem;
-        overflow-y: auto;
-    }
-
-    .metadata-sidebar h4 {
-        margin: 0 0 1rem 0;
-        color: var(--color-text);
-        font-size: 1.1rem;
-        font-weight: 600;
-    }
-
-    .metadata-group {
-        margin-bottom: 1.5rem;
-    }
-
-    .metadata-group h5 {
-        margin: 0 0 0.75rem 0;
-        color: var(--color-text);
-        opacity: 0.7;
-        font-size: 0.9rem;
-        font-weight: 600;
-        text-transform: uppercase;
-        letter-spacing: 0.5px;
-    }
-
-    .metadata-item {
-        display: flex;
-        flex-direction: column;
-        gap: 0.25rem;
-        margin-bottom: 0.75rem;
-        padding: 0.5rem;
-        background: var(--color-background);
-        border: 1px solid var(--color-border);
-        border-radius: 6px;
-    }
-
-    .metadata-label {
-        font-size: 0.8rem;
-        font-weight: 600;
-        color: var(--color-text);
-        opacity: 0.7;
-        text-transform: uppercase;
-        letter-spacing: 0.3px;
-    }
-
-    .metadata-value {
-        font-size: 0.9rem;
-        color: var(--color-text);
-        word-break: break-all;
-        line-height: 1.4;
-    }
-
-    .source-file-display {
-        font-family: monospace;
-        background: var(--color-panel);
-        padding: 0.5rem;
-        border-radius: 4px;
-        border: 1px solid var(--color-border);
-    }
-
-    .metadata-actions {
-        display: flex;
-        flex-direction: column;
-        gap: 0.5rem;
-    }
-
-    .metadata-actions .btn {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-        justify-content: flex-start;
-        font-size: 0.9rem;
-    }
-
-    /* Wider modal for better readability */
-    .modal-inner.modal-wide {
-        max-width: 1200px;
-    }
-
-    /* Responsive design for modal */
-    @media (max-width: 768px) {
-        .modal-body-enhanced {
-            flex-direction: column;
-            max-height: 80vh;
-        }
-
-        .metadata-sidebar {
-            min-width: unset;
-            max-width: unset;
-            border-left: none;
-            border-top: 1px solid var(--color-border);
-        }
-
-        .modal-header-compact {
-            padding: 0.75rem 1rem;
-            flex-wrap: wrap;
-            gap: 0.75rem;
-        }
-
-        .header-info {
-            flex-wrap: wrap;
-        }
-
-        .content-section-main,
-        .metadata-sidebar {
-            padding: 1rem;
-        }
-    }
-</style>
-
 <body>
     <div x-data>
         <template x-if="$store.memoryDashboardStore && $store.memoryDashboardStore.detailMemory">
-            <div>
+            <div class="memory-detail-container">
                 <!-- Compact Modal Header -->
-                <div class="modal-header-compact">
+                <div class="modal-header modal-header-compact">
                     <div class="header-info">
                         <span class="area-badge"
                               :style="`background-color: ${$store.memoryDashboardStore.getAreaColor($store.memoryDashboardStore.detailMemory?.area)}`"
                               x-text="$store.memoryDashboardStore.detailMemory?.area?.toUpperCase() || 'UNKNOWN'"></span>
-                        <span class="header-separator">•</span>
                         <span class="timestamp-text" x-text="$store.memoryDashboardStore.formatTimestamp($store.memoryDashboardStore.detailMemory?.timestamp, true)"></span>
-                        <span class="header-separator">•</span>
                         <span class="source-text" x-text="$store.memoryDashboardStore.detailMemory?.knowledge_source ? 'Knowledge' : 'Conversation'"></span>
                     </div>
                     <div class="header-actions">
@@ -271,20 +22,20 @@
                         <template x-if="!$store.memoryDashboardStore.editMode">
                             <div style="display: flex; gap: 0.5rem;">
                                 
-                                <button class="btn-action-header copy-all" @click="$store.memoryDashboardStore.copyToClipboard($store.memoryDashboardStore.formatMemoryForCopy($store.memoryDashboardStore.detailMemory))"
+                                <button class="btn btn-action-header copy-all" @click="$store.memoryDashboardStore.copyToClipboard($store.memoryDashboardStore.formatMemoryForCopy($store.memoryDashboardStore.detailMemory))"
                                         title="Copy Complete Memory with Metadata">
                                     <span class="material-symbols-outlined">copy_all</span> All
                                 </button>
-                                <button class="btn-action-header copy-content" @click="$store.memoryDashboardStore.copyToClipboard($store.memoryDashboardStore.detailMemory?.content_full)"
+                                <button class="btn btn-action-header copy-content" @click="$store.memoryDashboardStore.copyToClipboard($store.memoryDashboardStore.detailMemory?.content_full)"
                                         title="Copy Content Only">
                                     <span class="material-symbols-outlined">content_copy</span> Content
                                 </button>
                                 <div style="width:2em"></div>
-                                <button class="btn-action-header edit" @click="$store.memoryDashboardStore.enableEditMode()"
+                                <button class="btn btn-action-header edit" @click="$store.memoryDashboardStore.enableEditMode()"
                                         title="Edit Memory">
                                     <span class="material-symbols-outlined">edit_document</span>
                                 </button>
-                                <button class="btn-action-header delete danger" @click="$store.memoryDashboardStore.deleteMemory($store.memoryDashboardStore.detailMemory)"
+                                <button class="btn btn-action-header delete danger" @click="$store.memoryDashboardStore.deleteMemory($store.memoryDashboardStore.detailMemory)"
                                         title="Delete Memory">
                                     <span class="material-symbols-outlined">delete</span>
                                 </button>
@@ -293,11 +44,11 @@
                         <!-- Edit Mode Buttons -->
                         <template x-if="$store.memoryDashboardStore.editMode">
                             <div style="display: flex; gap: 0.5rem;">
-                                <button class="btn-action-header cancel" @click="$store.memoryDashboardStore.cancelEditMode()"
+                                <button class="btn btn-action-header cancel" @click="$store.memoryDashboardStore.cancelEditMode()"
                                         title="Cancel Edit">
                                     <span class="material-symbols-outlined">close</span>
                                 </button>
-                                <button class="btn-action-header confirm" @click="$store.memoryDashboardStore.confirmEditMode()"
+                                <button class="btn btn-action-header confirm" @click="$store.memoryDashboardStore.confirmEditMode()"
                                         title="Confirm Changes">
                                     <span class="material-symbols-outlined">check</span>
                                 </button>
@@ -308,7 +59,7 @@
                 </div>
 
                 <!-- Modal Body -->
-                <div class="modal-body-enhanced">
+                <div class="modal-body">
                     <!-- Main Content Section -->
                     <div class="content-section-main">
                         <div class="content-block">
@@ -384,6 +135,225 @@
                 </div>
             </div>
         </template>
+        <style>
+            .modal-header-compact {
+                background: linear-gradient(135deg, var(--color-panel) 0%, var(--color-background) 100%);
+                position: sticky;
+                top: 0;
+                z-index: 100;
+            }
+        
+            .header-info {
+                display: flex;
+                align-items: center;
+                gap: 0.5rem;
+                font-size: 0.9rem;
+            }
+        
+            .timestamp-text,
+            .source-text {
+                color: var(--color-text);
+                opacity: 0.8;
+                padding: 0.25rem 0.5rem;
+                border-radius: var(--border-radius);
+                font-size: 0.75rem;
+                font-weight: 500;
+                border: 1px solid;
+            }
+        
+            .btn-action-header {
+                padding: 0.4rem 0.6rem;
+                display: flex;
+                align-items: center;
+                gap: 0.25rem;
+            }
+        
+            .btn-action-header .material-symbols-outlined {
+                font-size: 18px;
+            }
+        
+            .btn-action-header.delete:hover {
+                border-color: var(--color-accent);
+                color: var(--color-accent);
+            }
+        
+            .btn-action-header.copy-all:hover,
+            .btn-action-header.copy-content:hover,
+            .btn-action-header.edit:hover {
+                border-color: var(--color-primary);
+                color: var(--color-primary);
+            }
+        
+            .btn-action-header.confirm:hover {
+                border-color: #4CAF50;
+                color: #4CAF50;
+                background: var(--color-background);
+            }
+        
+            .btn-action-header.cancel:hover {
+                border-color: var(--color-accent);
+                color: var(--color-accent);
+                background: var(--color-background);
+            }
+        
+            .modal-body {
+                display: flex;
+                min-height: 60vh;
+                max-height: 70vh;
+            }
+        
+            .content-section-main {
+                flex: 1;
+                padding: 1.5rem;
+                overflow-y: auto;
+            }
+        
+            .content-block {
+                margin-bottom: 3rem;
+            }
+        
+            .content-block h4 {
+                margin: 0 0 1rem 0;
+                color: var(--color-text);
+                font-size: 1.1rem;
+                font-weight: 600;
+                border-bottom: 1px solid var(--color-border);
+                padding-bottom: 0.5rem;
+            }
+        
+            .memory-content-display {
+                background: var(--color-panel);
+                border: 1px solid var(--color-border);
+                border-radius: 8px;
+                padding: 1.5rem;
+                line-height: 1.6;
+                color: var(--color-text);
+                white-space: pre-wrap;
+                word-break: break-word;
+                max-height: 300px;
+                overflow-y: auto;
+            }
+        
+            .tags-display {
+                display: flex;
+                flex-wrap: wrap;
+                gap: 0.5rem;
+                background: var(--color-background);
+                padding: 0.75rem;
+                border-radius: 8px;
+                border: 1px solid var(--color-border);
+            }
+        
+            .tag-display {
+                background: var(--color-primary);
+                color: white;
+                padding: 0.25rem 0.75rem;
+                border-radius: 12px;
+                font-size: 0.75rem;
+                font-weight: 500;
+            }
+        
+            .metadata-sidebar {
+                min-width: 300px;
+                max-width: 350px;
+                background: var(--color-panel);
+                border-left: 1px solid var(--color-border);
+                padding: 1.5rem;
+                overflow-y: auto;
+            }
+        
+            .metadata-sidebar h4 {
+                margin: 0 0 1rem 0;
+                color: var(--color-text);
+                font-size: 1.1rem;
+                font-weight: 600;
+            }
+        
+            .metadata-group {
+                margin-bottom: 1.5rem;
+            }
+        
+            .metadata-group h5 {
+                margin: 0 0 0.75rem 0;
+                color: var(--color-text);
+                opacity: 0.7;
+                font-size: 0.9rem;
+                font-weight: 600;
+                text-transform: uppercase;
+                letter-spacing: 0.5px;
+            }
+        
+            .metadata-item {
+                display: flex;
+                flex-direction: column;
+                gap: 0.25rem;
+                margin-bottom: 0.75rem;
+                padding: 0.5rem;
+                background: var(--color-background);
+                border: 1px solid var(--color-border);
+                border-radius: 6px;
+            }
+        
+            .metadata-label {
+                font-size: 0.8rem;
+                font-weight: 600;
+                color: var(--color-text);
+                opacity: 0.7;
+                text-transform: uppercase;
+                letter-spacing: 0.3px;
+            }
+        
+            .metadata-value {
+                font-size: 0.9rem;
+                color: var(--color-text);
+                word-break: break-all;
+                line-height: 1.4;
+            }
+        
+            .source-file-display {
+                font-family: monospace;
+                background: var(--color-panel);
+                padding: 0.5rem;
+                border-radius: 4px;
+                border: 1px solid var(--color-border);
+            }
+        
+            .memory-detail-container {
+                display: flex;
+                flex-direction: column;
+                height: 100%;
+            }
+            
+            /* Responsive design for modal */
+            @media (max-width: 870px) {
+                .modal-body {
+                    flex-direction: column;
+                    max-height: 80vh;
+                }
+        
+                .metadata-sidebar {
+                    min-width: unset;
+                    max-width: unset;
+                    border-left: none;
+                    border-top: 1px solid var(--color-border);
+                }
+        
+                .modal-header-compact {
+                    padding: 0.75rem 1rem;
+                    flex-wrap: wrap;
+                    gap: 0.75rem;
+                }
+        
+                .header-info {
+                    flex-wrap: wrap;
+                }
+        
+                .content-section-main,
+                .metadata-sidebar {
+                    padding: 1rem;
+                }
+            }
+        </style>
     </div>
 </body>
 

webui/css/modals.css

@@ -475,3 +475,40 @@
 .toolbar-button:disabled:hover {
   background-color: transparent;
 }
+
+/* Range Input Styles */
+
+input[type="range"] {
+  width: 100%;
+  cursor: pointer;
+  height: 4px;
+  -webkit-appearance: none;
+  appearance: none;
+  background: var(--color-border);
+  border-radius: 2px;
+  outline: none;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  background: var(--color-text);
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+input[type="range"]::-moz-range-thumb {
+  width: 16px;
+  height: 16px;
+  background: var(--color-text);
+  border-radius: 50%;
+  cursor: pointer;
+  border: none;
+}
+
+.range-value {
+  min-width: 3em;
+  text-align: right;
+}

webui/css/modals2.css

@@ -34,7 +34,7 @@ display: flex;
   transform: translate(-50%, -50%);
   background-color: var(--color-background-light);
   width: 90%;
-  max-width: 800px;
+  max-width: 960px;
   max-height: 90vh;
   border-radius: 8px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

webui/css/settings.css

@@ -128,17 +128,6 @@ input:checked + .toggler:before {
   transform: translateX(26px);
 }
 
-/* Range Input Styles */
-input[type="range"] {
-  width: 100%;
-  cursor: grab;
-}
-
-.range-value {
-  min-width: 3em;
-  text-align: right;
-}
-
 /* Select Styles */
 select {
   cursor: pointer;