@memori.ai/memori-react 9.0.0-alpha.8 → 9.0.0-rc.0

package/esm/components/MediaWidget/MediaItemWidget.css

@@ -6,71 +6,79 @@
     gap: var(--memori-spacing-sm);
 }
 
-/* Single image: Single column, centered, full width */
-.memori-media-items--grid.memori-media-items--single {
-    grid-template-rows: 1fr;
-    justify-items: center;
-}
-
-.memori-media-items--grid.memori-media-items--single .memori-media-item,
-.memori-media-item--link .memori-media-item--image {
-    width: 100%;
-    width: 120px;
+/*
+ * Image galleries must use a real CSS grid with reserved tile size.
+ * Previously few/many set grid-template-* on a flex container, so tiles
+ * sized to intrinsic screenshots and caused Safari scroll jumps / blanking.
+ */
+.memori-media-items--grid.memori-media-items--single,
+.memori-media-items--grid.memori-media-items--few,
+.memori-media-items--grid.memori-media-items--many {
+    display: grid;
+    min-width: 0;
     max-width: 100%;
-    height: 120px;
-    padding: 0;
+    align-content: start;
+    justify-content: start;
 }
 
-.memori-media-item--link .memori-media-item--image > div {
-    height: 100%;
+/* Single image: one reserved tile */
+.memori-media-items--grid.memori-media-items--single {
+    grid-template-columns: 120px;
+    justify-items: stretch;
 }
 
-/* 2-4 images: Maximum 2 columns, responsive */
+/* 2-4 images: two columns of reserved tiles */
 .memori-media-items--grid.memori-media-items--few {
-    max-width: 100%;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    grid-template-columns: repeat(2, 120px);
 }
 
-/* Limit to 2 columns for 2-4 images on tablet and desktop */
-@media (min-width: 641px) {
-    .memori-media-items--grid.memori-media-items--few {
-        grid-template-columns: repeat(2, minmax(200px, 1fr));
-    }
-}
-
-/* 5+ images: Maximum 3 columns on desktop */
+/* 5+ images: two columns by default, three on wide viewports */
 .memori-media-items--grid.memori-media-items--many {
-    max-width: 100%;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    grid-template-columns: repeat(2, 120px);
 }
 
-/* Limit to 3 columns for 5+ images on desktop */
 @media (min-width: 1025px) {
     .memori-media-items--grid.memori-media-items--many {
-        grid-template-columns: repeat(3, minmax(200px, 1fr));
+        grid-template-columns: repeat(3, 120px);
     }
 }
 
-/* Allineamento media per messaggi dell'utente */
+.memori-media-items--grid.memori-media-items--single .memori-media-item,
+.memori-media-items--grid.memori-media-items--few .memori-media-item,
+.memori-media-items--grid.memori-media-items--many .memori-media-item,
+.memori-media-item--link .memori-media-item--image {
+    width: 120px;
+    min-width: 0;
+    max-width: 120px;
+    height: 120px;
+    min-height: 120px;
+    box-sizing: border-box;
+    padding: 0;
+}
+
+.memori-media-item--link .memori-media-item--image > div {
+    height: 100%;
+}
+
+/* User media: keep chronological order; avoid direction:rtl (Safari scroll bugs) */
 .memori-media-items--grid.memori-media-items--user {
     max-width: 90%;
-    margin: 0 auto;
-    /* margin-right: var(--memori-spacing-lg); */
-    margin-left: calc(var(--memori-spacing-3xl) + var(--memori-spacing-sm));
-    direction: rtl;
+    justify-content: end;
+    margin-block: 0;
+    margin-inline-end: 0;
+    margin-inline-start: auto;
 }
 
-/* Allineamento media per messaggi dell'agente */
+/* Agent media: start-aligned */
 .memori-media-items--grid.memori-media-items--agent {
-    margin: 0 auto;
-    /* margin-right: var(--memori-spacing-sm); */
-    /* margin-left: calc(var(--memori-spacing-3xl) + var(--memori-spacing-sm)); */
-    direction: ltr;
+    justify-content: start;
+    margin-block: 0;
+    margin-inline: 0;
 }
 
 .memori-media-item--card {
     border: 1px solid var(--memori-border-color);
-    border-radius: var(--memori-radius-box);
+    border-radius: var(--memori-radius-surface);
     margin-bottom: 0;
     background: transparent;
     box-shadow: none;
@@ -91,10 +99,12 @@
 
 .memori-media-item--image .memori-card {
     overflow: hidden;
-    border: 1px solid #e5e7eb;
-    border-radius: var(--memori-radius-box);
+    width: 100%;
+    height: 100%;
+    border: 1px solid var(--memori-border-color);
+    border-radius: var(--memori-radius-surface);
     margin: 0;
-    background: #f9fafb;
+    background: var(--memori-main-background);
     box-shadow: none;
 }
 
@@ -106,7 +116,7 @@
 
 .memori-media-item .memori-card--cover audio,
 .memori-media-item .memori-card--cover video {
-    border-radius: var(--memori-radius-box);
+    border-radius: var(--memori-radius-surface);
 }
 
 .memori-media-item--image .memori-card--cover {
@@ -127,11 +137,13 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    border-radius: var(--memori-radius-box);
+    border-radius: var(--memori-radius-surface);
 }
 
-/* Single image: max-height 400px */
-.memori-media-items--single .memori-media-item--figure {
+/* Reserved tile for all image gallery sizes (prevents load-time layout shift) */
+.memori-media-items--single .memori-media-item--figure,
+.memori-media-items--few .memori-media-item--figure,
+.memori-media-items--many .memori-media-item--figure {
     min-height: 120px;
     max-height: 120px;
     background-color: var(--memori-secondary-background);
@@ -152,6 +164,15 @@
     object-position: center;
 }
 
+.memori-media-items--single .memori-media-item--figure img,
+.memori-media-items--few .memori-media-item--figure img,
+.memori-media-items--many .memori-media-item--figure img {
+    width: 100%;
+    height: 100%;
+    max-height: none;
+    object-fit: cover;
+}
+
 .memori-media-item--figure-caption {
     display: -webkit-box;
     overflow: hidden;
@@ -160,7 +181,7 @@
     margin: 0.25rem 0;
     -webkit-box-orient: vertical;
     color: var(--memori-text-color);
-    font-size: 0.7rem;
+    font-size: var(--memori-text-size-xs);
     font-style: italic;
     font-weight: var(--memori-text-weight-normal);
     -webkit-line-clamp: 2;
@@ -175,7 +196,7 @@ div.memori-media-item--link.memori-media-item--image-link {
     overflow: hidden;
     width: 100%;
     height: 100%;
-    border-radius: var(--memori-radius-box);
+    border-radius: var(--memori-radius-surface);
     text-decoration: none;
     transition: box-shadow 0.2s ease, outline 0.2s ease, transform 0.2s ease;
 }
@@ -288,7 +309,7 @@ div.memori-media-item--link:focus-visible {
     min-height: 60vh;
     flex: 1;
     border: none;
-    border-radius: var(--memori-radius-box);
+    border-radius: var(--memori-radius-surface);
 }
 
 @media (max-width: 768px) {
@@ -318,7 +339,7 @@ div.memori-media-item--link:focus-visible {
 .memori-media-item--modal-video {
     width: 100%;
     max-height: 70vh;
-    border-radius: var(--memori-radius-box);
+    border-radius: var(--memori-radius-surface);
     object-fit: contain;
 }
 
@@ -334,7 +355,7 @@ div.memori-media-item--link:focus-visible {
 .memori-media-item--modal-audio-title {
     margin: 0;
     color: var(--memori-text-color);
-    font-size: var(--memori-text-size-base);
+    font-size: var(--memori-text-size-md);
     font-weight: var(--memori-text-weight-semibold);
 }
 
@@ -370,14 +391,14 @@ div.memori-media-item--link:focus-visible {
 .memori-media-item--modal-fallback-message {
     margin: 0;
     color: var(--memori-text-color);
-    font-size: var(--memori-text-size-base);
+    font-size: var(--memori-text-size-md);
     font-weight: var(--memori-text-weight-medium);
 }
 
 .memori-media-item--modal-fallback-hint {
     margin: 0;
     color: color-mix(in oklch, var(--memori-text-color) 70%, transparent);
-    font-size: var(--memori-text-size-small);
+    font-size: var(--memori-text-size-sm);
 }
 
 .memori-media-item--modal-fallback-actions {
@@ -390,10 +411,10 @@ div.memori-media-item--link:focus-visible {
 .memori-media-item--modal-fallback-link {
     padding: var(--memori-spacing-sm) var(--memori-spacing-md);
     border: var(--memori-border) solid var(--memori-border-color);
-    border-radius: var(--memori-radius-box);
+    border-radius: var(--memori-radius-surface);
     background: var(--memori-main-background);
     color: var(--memori-primary);
-    font-size: var(--memori-text-size-small);
+    font-size: var(--memori-text-size-sm);
     font-weight: var(--memori-text-weight-medium);
     text-decoration: none;
     transition: background 0.2s, border-color 0.2s;
@@ -418,7 +439,7 @@ div.memori-media-item--link:focus-visible {
     flex-direction: column;
     padding: 0;
     border: none;
-    border-radius: var(--memori-radius-box);
+    border-radius: var(--memori-radius-surface);
     background-color: var(--memori-main-background);
     box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
 }
@@ -426,7 +447,7 @@ div.memori-media-item--link:focus-visible {
 .memori-media-item-preview--text {
     color: var(--memori-text-color);
     font-family: inherit;
-    font-size: var(--memori-text-size-small);
+    font-size: var(--memori-text-size-sm);
     line-height: 1.6;
     white-space: pre-wrap;
     word-wrap: break-word;
@@ -460,7 +481,7 @@ div.memori-media-item--link:focus-visible {
 
 .memori-media-item-preview--text code {
     padding: 0.125rem 0.25rem;
-    border-radius: var(--memori-radius-box);
+    border-radius: var(--memori-radius-surface);
     background-color: var(--memori-primary-subtle);
     font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
     font-size: 0.875em;
@@ -469,7 +490,7 @@ div.memori-media-item--link:focus-visible {
 .memori-media-item-preview--text pre {
     padding: 1rem;
     border: 1px solid var(--memori-border);
-    border-radius: 0.5rem;
+    border-radius: var(--memori-radius-surface);
     margin: 1rem 0;
     background-color: var(--memori-primary-subtle);
     overflow-x: auto;
@@ -517,7 +538,7 @@ div.memori-media-item--link:focus-visible {
     -webkit-box-orient: vertical;
     color: var(--memori-text-color);
     direction: ltr;
-    font-size: var(--memori-text-size-small);
+    font-size: var(--memori-text-size-sm);
     font-weight: var(--memori-text-weight-medium);
 }
 
@@ -572,8 +593,8 @@ div.memori-media-item--link:focus-visible {
     max-width: 100%;
     box-sizing: border-box;
     flex: 1 1 0;
-    border: 1px solid var(--memori-border, #e5e7eb);
-    border-radius: var(--memori-radius-box);
+    border: 1px solid var(--memori-border-color);
+    border-radius: var(--memori-radius-surface);
     background: color-mix(in oklch, var(--memori-main-background) 38%, transparent);
     box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1);
     transition: all 0.2s ease;
@@ -585,7 +606,7 @@ div.memori-media-item--link:focus-visible {
 }
 
 .memori-media-item--snippet-direct .memori-snippet {
-    border-radius: var(--memori-radius-box);
+    border-radius: var(--memori-radius-surface);
     /* background: #f8fafc; */
 }
 
@@ -624,7 +645,7 @@ div.memori-media-item--link:focus-visible {
     border: none;
     margin: 0;
     background: #f8fafc;
-    font-size: var(--memori-text-size-small);
+    font-size: var(--memori-text-size-sm);
     line-height: 1.6;
     overflow-x: auto;
 }
@@ -664,7 +685,7 @@ div.memori-media-item--link:focus-visible {
     overflow: hidden;
     height: 100%;
     flex-direction: column;
-    border-radius: var(--memori-radius-box);
+    border-radius: var(--memori-radius-surface);
     background: #1e1e1e;
 }
 
@@ -683,7 +704,7 @@ div.memori-media-item--link:focus-visible {
     border-radius: 0;
     margin: 0;
     background: #1e1e1e;
-    font-size: var(--memori-text-size-small);
+    font-size: var(--memori-text-size-sm);
     line-height: 1.6;
     white-space: pre-wrap;
     word-break: break-word;
@@ -725,44 +746,39 @@ div.memori-media-item--link:focus-visible {
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     background: rgba(0, 0, 0, 0.1);
     color: var(--memori-text-color);
-    font-size: var(--memori-text-size-small);
+    font-size: var(--memori-text-size-sm);
     font-weight: var(--memori-text-weight-medium);
 }
 
 /* Responsive design */
-/* Mobile (≤640px): Force single column layout */
+/* Mobile (≤640px): stack image tiles in one column, keep reserved 120px size */
 @media (max-width: 640px) {
     .memori-media-items--grid {
         padding: 0.75rem;
         gap: var(--memori-spacing-sm);
-        grid-template-columns: 1fr !important;
     }
 
     .memori-media-items--grid.memori-media-items--single,
     .memori-media-items--grid.memori-media-items--few,
     .memori-media-items--grid.memori-media-items--many {
-        grid-template-columns: 1fr !important;
+        grid-template-columns: 120px;
     }
 }
 
-/* Tablet (641px-1024px): 2 columns max, min 250px per column */
+/* Tablet (641px-1024px): two reserved tiles */
 @media (min-width: 641px) and (max-width: 1024px) {
-    .memori-media-items--grid.memori-media-items--few {
-        max-width: 100%;
-        grid-template-columns: repeat(2, minmax(250px, 1fr));
-    }
-
+    .memori-media-items--grid.memori-media-items--few,
     .memori-media-items--grid.memori-media-items--many {
         max-width: 100%;
-        grid-template-columns: repeat(2, minmax(250px, 1fr));
+        grid-template-columns: repeat(2, 120px);
     }
 }
 
-/* Desktop (>1024px): 3 columns max for 5+ images */
+/* Desktop (>1024px): three tiles for 5+ images */
 @media (min-width: 1025px) {
     .memori-media-items--grid.memori-media-items--many {
         max-width: 100%;
-        grid-template-columns: repeat(3, minmax(200px, 1fr));
+        grid-template-columns: repeat(3, 120px);
     }
 }
 
@@ -838,8 +854,8 @@ a.memori-media-item--document-link {
     flex-direction: column;
     padding: calc(var(--memori-spacing-sm) + var(--memori-spacing-xs));
     border: 1px solid var(--memori-border-color);
-    border-radius: var(--memori-radius-box);
-    background: color-mix(in oklch, var(--memori-main-background) 38%, transparent);
+    border-radius: var(--memori-radius-surface);
+    background: var(--memori-secondary-background);
     cursor: pointer;
     transition: box-shadow 0.2s ease;
 }
@@ -862,7 +878,7 @@ a.memori-media-item--document-link {
     flex-shrink: 0;
     align-items: center;
     justify-content: center;
-    border-radius: var(--memori-radius-box);
+    border-radius: var(--memori-radius-surface);
     background: #f3f4f6;
     color: var(--memori-text-color);
 }
@@ -881,7 +897,7 @@ a.memori-media-item--document-link {
     -webkit-box-orient: vertical;
     color: var(--memori-text-color);
     direction: ltr;
-    font-size: var(--memori-text-size-small);
+    font-size: var(--memori-text-size-sm);
     font-weight: var(--memori-text-weight-medium);
     -webkit-line-clamp: 3;
     overflow-wrap: break-word;
@@ -892,7 +908,7 @@ a.memori-media-item--document-link {
     right: 12px;
     bottom: 12px;
     padding: var(--memori-spacing-xs) var(--memori-spacing-sm);
-    border-radius: var(--memori-radius-box);
+    border-radius: var(--memori-radius-surface);
     background: #f3f4f6;
     color: #000;
     font-size: 11px;
@@ -901,14 +917,18 @@ a.memori-media-item--document-link {
     text-transform: uppercase;
 }
 
-/* Document items in grid: compact, full width */
+/* Document tiles in grid: fill the reserved 120px cell */
 .memori-media-items--grid .memori-media-item--document-link {
+    display: block;
     width: 100%;
+    height: 100%;
 }
 
 .memori-media-items--grid .memori-media-item--document {
-    min-width: 120px;
-    max-width: 120px;
+    width: 100%;
+    min-width: 0;
+    max-width: none;
+    height: 100%;
     min-height: 120px;
     box-sizing: border-box;
     background-color: var(--memori-secondary-background);
@@ -927,8 +947,8 @@ div.memori-media-item--link:focus-visible .memori-media-item--document {
     position: relative;
     overflow: hidden;
     width: 100%;
-    border: 1px solid #e5e7eb;
-    border-radius: var(--memori-radius-box);
+    border: 1px solid var(--memori-border-color);
+    border-radius: var(--memori-radius-surface);
     background: #000;
     cursor: pointer;
     transition: box-shadow 0.2s ease;
@@ -944,7 +964,7 @@ div.memori-media-item--link:focus-visible .memori-media-item--document {
     height: auto;
     min-height: 120px;
     max-height: 400px;
-    border-radius: var(--memori-radius-box);
+    border-radius: var(--memori-radius-surface);
 }
 
 .memori-media-item--video-overlay {
@@ -988,9 +1008,9 @@ div.memori-media-item--link:focus-visible .memori-media-item--document {
     box-sizing: border-box;
     align-items: center;
     padding: var(--memori-spacing-md);
-    border: 1px solid #e5e7eb;
-    border-radius: var(--memori-radius-box);
-    background: #f9fafb;
+    border: 1px solid var(--memori-border-color);
+    border-radius: var(--memori-radius-surface);
+    background: var(--memori-main-background);
     gap: calc(var(--memori-spacing-sm) + var(--memori-spacing-xs));
     transition: box-shadow 0.2s ease;
 }
@@ -1028,8 +1048,8 @@ div.memori-media-item--link:focus-visible .memori-media-item--document {
     overflow: hidden;
     width: 100%;
     height: 400px;
-    border: 1px solid #e5e7eb;
-    border-radius: var(--memori-radius-box);
+    border: 1px solid var(--memori-border-color);
+    border-radius: var(--memori-radius-surface);
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     cursor: grab;
     transition: box-shadow 0.2s ease;
@@ -1064,7 +1084,7 @@ div.memori-media-item--link:focus-visible .memori-media-item--document {
     align-items: center;
     justify-content: center;
     border: none;
-    border-radius: var(--memori-radius-box);
+    border-radius: var(--memori-radius-surface);
     background: rgba(0, 0, 0, 0.6);
     color: var(--memori-text-color);
     cursor: pointer;
@@ -1083,9 +1103,9 @@ div.memori-media-item--link:focus-visible .memori-media-item--document {
     width: 100%;
     align-items: flex-start;
     padding: calc(var(--memori-spacing-sm) + var(--memori-spacing-xs)) var(--memori-spacing-md);
-    border: 1px solid #e5e7eb;
-    border-radius: var(--memori-radius-box);
-    background: #f9fafb;
+    border: 1px solid var(--memori-border-color);
+    border-radius: var(--memori-radius-surface);
+    background: var(--memori-main-background);
     font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
     font-size: 13px;
     gap: calc(var(--memori-spacing-sm) + var(--memori-spacing-xs));
@@ -1099,7 +1119,7 @@ div.memori-media-item--link:focus-visible .memori-media-item--document {
 .memori-media-item--code-language-badge {
     flex-shrink: 0;
     padding: calc(var(--memori-spacing-xs) / 2) var(--memori-spacing-sm);
-    border-radius: var(--memori-radius-box);
+    border-radius: var(--memori-radius-surface);
     background: #3b82f6;
     color: var(--memori-text-color);
     font-size: 11px;
@@ -1120,8 +1140,8 @@ div.memori-media-item--link:focus-visible .memori-media-item--document {
     position: relative;
     overflow: hidden;
     width: 100%;
-    border: 1px solid #e5e7eb;
-    border-radius: var(--memori-radius-box);
+    border: 1px solid var(--memori-border-color);
+    border-radius: var(--memori-radius-surface);
     background: #1e1e1e;
     transition: box-shadow 0.2s ease;
 }
@@ -1155,7 +1175,7 @@ div.memori-media-item--link:focus-visible .memori-media-item--document {
 .memori-media-item--code-action-btn {
     padding: var(--memori-spacing-xs) var(--memori-spacing-sm);
     border: 1px solid #4b5563;
-    border-radius: var(--memori-radius-box);
+    border-radius: var(--memori-radius-surface);
     background: transparent;
     color: var(--memori-text-color);
     cursor: pointer;
@@ -1210,9 +1230,9 @@ div.memori-media-item--link:focus-visible .memori-media-item--document {
     min-height: 200px;
     max-height: 600px;
     padding: var(--memori-spacing-md);
-    border: 1px solid #e5e7eb;
-    border-radius: var(--memori-radius-box);
-    background: white;
+    border: 1px solid var(--memori-border-color);
+    border-radius: var(--memori-radius-surface);
+    background: var(--memori-secondary-background);
     cursor: pointer;
     transition: box-shadow 0.2s ease;
 }
@@ -1226,7 +1246,7 @@ div.memori-media-item--link:focus-visible .memori-media-item--document {
     align-items: center;
     justify-content: space-between;
     padding-bottom: var(--memori-spacing-sm);
-    border-bottom: 1px solid #e5e7eb;
+    border-bottom: 1px solid var(--memori-border-color);
     margin-bottom: calc(var(--memori-spacing-sm) + var(--memori-spacing-xs));
 }
 
@@ -1240,7 +1260,7 @@ div.memori-media-item--link:focus-visible .memori-media-item--document {
 
 .memori-media-item--html-preview-content {
     color: var(--memori-text-color);
-    font-size: var(--memori-text-size-small);
+    font-size: var(--memori-text-size-sm);
     line-height: 1.6;
 }
 
@@ -1252,9 +1272,9 @@ div.memori-media-item--link:focus-visible .memori-media-item--document {
     width: 100%;
     align-items: center;
     padding: var(--memori-spacing-md);
-    border: 1px solid #e5e7eb;
-    border-radius: var(--memori-radius-box);
-    background: #f9fafb;
+    border: 1px solid var(--memori-border-color);
+    border-radius: var(--memori-radius-surface);
+    background: var(--memori-main-background);
     cursor: pointer;
     gap: calc(var(--memori-spacing-sm) + var(--memori-spacing-xs));
     transition: box-shadow 0.2s ease, transform 0.2s ease;
@@ -1275,7 +1295,7 @@ div.memori-media-item--link:focus-visible .memori-media-item--document {
     flex-shrink: 0;
     align-items: center;
     justify-content: center;
-    border-radius: var(--memori-radius-box);
+    border-radius: var(--memori-radius-surface);
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 }
 
@@ -1288,7 +1308,7 @@ div.memori-media-item--link:focus-visible .memori-media-item--document {
     overflow: hidden;
     margin: 0;
     color: var(--memori-text-color);
-    font-size: var(--memori-text-size-small);
+    font-size: var(--memori-text-size-sm);
     font-weight: var(--memori-text-weight-medium);
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -1304,9 +1324,9 @@ div.memori-media-item--link:focus-visible .memori-media-item--document {
 .memori-media-item--generic-file-action {
     flex-shrink: 0;
     padding: calc(var(--memori-spacing-xs) + 2px) calc(var(--memori-spacing-sm) + var(--memori-spacing-xs));
-    border: 1px solid #e5e7eb;
-    border-radius: var(--memori-radius-box);
-    background: white;
+    border: 1px solid var(--memori-border-color);
+    border-radius: var(--memori-radius-surface);
+    background: var(--memori-secondary-background);
     color: var(--memori-text-color);
     cursor: pointer;
     font-size: 12px;
@@ -1314,7 +1334,7 @@ div.memori-media-item--link:focus-visible .memori-media-item--document {
 }
 
 .memori-media-item--generic-file-action:hover {
-    background: #f9fafb;
+    background: var(--memori-main-background);
 }
 
 /* ============================================
@@ -1362,7 +1382,7 @@ div.memori-media-item--link:focus-visible .memori-media-item--document {
     flex-direction: column;
     padding: var(--memori-spacing-md);
     border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: var(--memori-radius-box);
+    border-radius: var(--memori-radius-surface);
     background: #363636;
     transition: box-shadow 0.2s ease, transform 0.2s ease;
 }
@@ -1388,7 +1408,7 @@ div.memori-media-item--link:focus-visible .memori-media-item--document {
     flex: 1;
     margin-bottom: var(--memori-spacing-sm);
     color: var(--memori-text-color);
-    font-size: var(--memori-text-size-small);
+    font-size: var(--memori-text-size-sm);
     font-weight: var(--memori-text-weight-medium);
     line-height: 1.4;
     text-overflow: ellipsis;
@@ -1407,7 +1427,7 @@ div.memori-media-item--link:focus-visible .memori-media-item--document {
     bottom: 12px;
     left: 12px;
     padding: var(--memori-spacing-xs) var(--memori-spacing-sm);
-    border-radius: var(--memori-radius-box);
+    border-radius: var(--memori-radius-surface);
     background: rgba(255, 255, 255, 0.2);
     color: var(--memori-text-color);
     font-size: 11px;