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

package/src/components/MediaWidget/MediaItemWidget.css

@@ -1,1444 +0,0 @@
-.memori-media-items--grid {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    padding: 0.5rem 0;
-    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;
-    max-width: 100%;
-    height: 120px;
-    padding: 0;
-}
-
-.memori-media-item--link .memori-media-item--image > div {
-    height: 100%;
-}
-
-/* 2-4 images: Maximum 2 columns, responsive */
-.memori-media-items--grid.memori-media-items--few {
-    max-width: 100%;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-}
-
-/* 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 */
-.memori-media-items--grid.memori-media-items--many {
-    max-width: 100%;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-}
-
-/* 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));
-    }
-}
-
-/* Allineamento media per messaggi dell'utente */
-.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;
-}
-
-/* Allineamento media per messaggi dell'agente */
-.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;
-}
-
-.memori-media-item--card {
-    border: 1px solid var(--memori-border-color);
-    border-radius: var(--memori-radius-box);
-    margin-bottom: 0;
-    background: transparent;
-    box-shadow: none;
-    transition: box-shadow 0.2s ease;
-}
-
-.memori-media-item--card:hover {
-    /* box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); */
-    background: transparent;
-    cursor: pointer;
-    transform: none;
-}
-
-.memori-media-item--image .memori-card--content {
-    display: none;
-    padding: 0;
-}
-
-.memori-media-item--image .memori-card {
-    overflow: hidden;
-    border: 1px solid #e5e7eb;
-    border-radius: var(--memori-radius-box);
-    margin: 0;
-    background: #f9fafb;
-    box-shadow: none;
-}
-
-.memori-media-item .memori-card--cover {
-    height: auto;
-    border-radius: 0;
-    background: transparent;
-}
-
-.memori-media-item .memori-card--cover audio,
-.memori-media-item .memori-card--cover video {
-    border-radius: var(--memori-radius-box);
-}
-
-.memori-media-item--image .memori-card--cover {
-    overflow: hidden;
-    height: 100%;
-    padding: 0;
-    border: none;
-    border-radius: 0;
-    margin: 0;
-    background: transparent;
-}
-
-.memori-media-item--figure {
-    display: flex;
-    overflow: hidden;
-    width: 100%;
-    height: 100%;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    border-radius: var(--memori-radius-box);
-}
-
-/* Single image: max-height 400px */
-.memori-media-items--single .memori-media-item--figure {
-    min-height: 120px;
-    max-height: 120px;
-    background-color: var(--memori-secondary-background);
-}
-
-.memori-media-item--rgb-item {
-    width: 100%;
-    min-height: 100px;
-    flex: 1;
-}
-
-.memori-media-item--figure img {
-    display: block;
-    width: 100%;
-    height: auto;
-    max-height: inherit;
-    object-fit: cover;
-    object-position: center;
-}
-
-.memori-media-item--figure-caption {
-    display: -webkit-box;
-    overflow: hidden;
-    max-height: 2.6em;
-    padding: 0.5rem 0.75rem;
-    margin: 0.25rem 0;
-    -webkit-box-orient: vertical;
-    color: var(--memori-text-color);
-    font-size: 0.7rem;
-    font-style: italic;
-    font-weight: var(--memori-text-weight-normal);
-    -webkit-line-clamp: 2;
-    line-height: 1.3;
-    text-align: center;
-    word-break: break-word;
-}
-
-a.memori-media-item--link,
-div.memori-media-item--link.memori-media-item--image-link {
-    display: block;
-    overflow: hidden;
-    width: 100%;
-    height: 100%;
-    border-radius: var(--memori-radius-box);
-    text-decoration: none;
-    transition: box-shadow 0.2s ease, outline 0.2s ease, transform 0.2s ease;
-}
-
-/* Tab focus — focus is on the link wrapper, not the inner card/document */
-a.memori-media-item--link:focus-visible,
-div.memori-media-item--link:focus-visible {
-    overflow: visible;
-    box-shadow: var(--memori-focus-ring);
-    outline: 2px solid var(--memori-primary);
-    outline-offset: var(--memori-focus-ring-offset, 2px);
-    transform: scale(0.99);
-}
-
-.memori-media-item--icon {
-    width: 50%;
-    height: 50%;
-}
-
-.memori-media-item--modal .memori-media-item--figure {
-    position: relative;
-    z-index: 0;
-    width: 100%;
-    max-height: 100%;
-    flex-direction: row;
-}
-
-.memori-media-item--modal .memori-media-item--figure img {
-    object-fit: contain;
-}
-
-.memori-media-item--modal .memori-card {
-    width: 100%;
-    max-width: 100%;
-    height: 100%;
-    max-height: 100%;
-    border-radius: 0;
-    margin-bottom: 0;
-    box-shadow: none;
-}
-
-.memori-media-item--modal .memori-card--content {
-    display: none;
-}
-
-.memori-media-item--modal .memori-card--cover {
-    height: 100%;
-    border-radius: 0;
-}
-
-.memori-media-item--modal .memori-modal--panel {
-    max-width: 75vw;
-    max-height: 85vh;
-    -webkit-backdrop-filter: blur(var(--memori-blur-background, 10px));
-    backdrop-filter: blur(var(--memori-blur-background, 10px));
-    background: rgba(0, 0, 0, 0.25);
-}
-
-.memori-media-item--modal .memori-modal--panel .memori-card {
-    background: none;
-}
-
-.memori-media-item--modal .memori-modal--panel .memori-spin {
-    display: flex;
-    height: 100%;
-    align-items: center;
-    justify-content: center;
-}
-
-.memori-media-item--modal a.memori-media-item--link {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    align-items: center;
-    justify-content: center;
-}
-
-.memori-media-item--modal .memori-media-item--figure-caption {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    -webkit-backdrop-filter: blur(var(--memori-blur-background, 5px));
-    backdrop-filter: blur(var(--memori-blur-background, 5px));
-    background: rgba(255, 255, 255, 0.5);
-    color: var(--memori-text-color);
-}
-
-.memori-media-item--modal .memori-modal--close button {
-    border-color: #fff;
-    color: var(--memori-text-color);
-}
-
-.memori-media-item-preview--modal {
-    z-index: 1000;
-}
-
-.memori-media-item--modal-iframe-wrap {
-    display: flex;
-    overflow: hidden;
-    width: 100%;
-    min-width: 0;
-    max-width: 100%;
-    min-height: 60vh;
-    flex: 1;
-}
-
-.memori-media-item--modal-iframe {
-    width: 100%;
-    max-width: 100%;
-    min-height: 60vh;
-    flex: 1;
-    border: none;
-    border-radius: var(--memori-radius-box);
-}
-
-@media (max-width: 768px) {
-    .memori-media-item-preview--content {
-        min-width: 0;
-        max-width: 100%;
-        overflow-x: auto;
-    }
-
-    .memori-media-item--modal-iframe-wrap {
-        min-height: 50vh;
-    }
-
-    .memori-media-item--modal-iframe {
-        min-height: 50vh;
-    }
-}
-
-/* Video in modal */
-.memori-media-item--modal-video-wrap {
-    display: flex;
-    width: 100%;
-    min-height: 40vh;
-    max-height: 70vh;
-}
-
-.memori-media-item--modal-video {
-    width: 100%;
-    max-height: 70vh;
-    border-radius: var(--memori-radius-box);
-    object-fit: contain;
-}
-
-/* Audio in modal */
-.memori-media-item--modal-audio-wrap {
-    display: flex;
-    width: 100%;
-    flex-direction: column;
-    padding: var(--memori-spacing-lg) 0;
-    gap: var(--memori-spacing-lg);
-}
-
-.memori-media-item--modal-audio-title {
-    margin: 0;
-    color: var(--memori-text-color);
-    font-size: var(--memori-text-size-base);
-    font-weight: var(--memori-text-weight-semibold);
-}
-
-.memori-media-item--modal-audio {
-    width: 100%;
-    max-width: 400px;
-}
-
-/* 3D model in modal */
-.memori-media-item--modal-3d-wrap {
-    display: flex;
-    width: 100%;
-    min-height: 60vh;
-}
-
-.memori-media-item--modal-3d-wrap .model-viewer {
-    width: 100%;
-    min-height: 60vh;
-}
-
-/* Fallback when preview not available (Word, unknown types) */
-.memori-media-item--modal-fallback {
-    display: flex;
-    min-height: 200px;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: var(--memori-spacing-lg);
-    gap: var(--memori-spacing-lg);
-    text-align: center;
-}
-
-.memori-media-item--modal-fallback-message {
-    margin: 0;
-    color: var(--memori-text-color);
-    font-size: var(--memori-text-size-base);
-    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);
-}
-
-.memori-media-item--modal-fallback-actions {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: var(--memori-spacing-lg);
-}
-
-.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);
-    background: var(--memori-main-background);
-    color: var(--memori-primary);
-    font-size: var(--memori-text-size-small);
-    font-weight: var(--memori-text-weight-medium);
-    text-decoration: none;
-    transition: background 0.2s, border-color 0.2s;
-}
-
-.memori-media-item--modal-fallback-link:hover {
-    border-color: var(--memori-primary);
-    background: var(--memori-primary-subtle);
-}
-
-.memori-media-item--snippet-body {
-    display: flex;
-    width: 100%;
-    flex-direction: column;
-}
-
-.memori-media-item-preview--content {
-    display: flex;
-    overflow: hidden;
-    min-height: 60vh;
-    max-height: 80vh;
-    flex-direction: column;
-    padding: 0;
-    border: none;
-    border-radius: var(--memori-radius-box);
-    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);
-}
-
-.memori-media-item-preview--text {
-    color: var(--memori-text-color);
-    font-family: inherit;
-    font-size: var(--memori-text-size-small);
-    line-height: 1.6;
-    white-space: pre-wrap;
-    word-wrap: break-word;
-}
-
-.memori-media-item-preview--text h1,
-.memori-media-item-preview--text h2,
-.memori-media-item-preview--text h3,
-.memori-media-item-preview--text h4,
-.memori-media-item-preview--text h5,
-.memori-media-item-preview--text h6 {
-    margin-top: var(--memori-spacing-lg);
-    margin-bottom: var(--memori-spacing-sm);
-    color: var(--memori-text-color);
-    font-weight: var(--memori-text-weight-semibold);
-}
-
-.memori-media-item-preview--text p {
-    margin-bottom: var(--memori-spacing-lg);
-}
-
-.memori-media-item-preview--text ul,
-.memori-media-item-preview--text ol {
-    padding-left: var(--memori-spacing-lg);
-    margin-bottom: var(--memori-spacing-lg);
-}
-
-.memori-media-item-preview--text li {
-    margin-bottom: var(--memori-spacing-xs);
-}
-
-.memori-media-item-preview--text code {
-    padding: 0.125rem 0.25rem;
-    border-radius: var(--memori-radius-box);
-    background-color: var(--memori-primary-subtle);
-    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-    font-size: 0.875em;
-}
-
-.memori-media-item-preview--text pre {
-    padding: 1rem;
-    border: 1px solid var(--memori-border);
-    border-radius: 0.5rem;
-    margin: 1rem 0;
-    background-color: var(--memori-primary-subtle);
-    overflow-x: auto;
-}
-
-.memori-media-item-preview--text blockquote {
-    padding-left: 1rem;
-    border-left: var(--memori-spacing-xs) solid var(--memori-primary);
-    margin: 1rem 0;
-    color: color-mix(in oklch, var(--memori-text-color) 70%, transparent);
-    font-style: italic;
-}
-
-.memori-media-item-preview--text table {
-    width: 100%;
-    margin: 1rem 0;
-    border-collapse: collapse;
-}
-
-.memori-media-item-preview--text th,
-.memori-media-item-preview--text td {
-    padding: 0.5rem;
-    border: 1px solid var(--memori-border);
-    text-align: left;
-}
-
-.memori-media-item-preview--text th {
-    background-color: var(--memori-primary-subtle);
-    font-weight: var(--memori-text-weight-semibold);
-}
-
-.memori-media-item-preview--text a {
-    color: var(--memori-primary);
-    text-decoration: underline;
-}
-
-.memori-media-item-preview--text a:hover {
-    text-decoration: none;
-}
-
-.memori-media-item--snippet-title {
-    flex: 1;
-    margin: 0;
-    margin-bottom: var(--memori-spacing-sm);
-    -webkit-box-orient: vertical;
-    color: var(--memori-text-color);
-    direction: ltr;
-    font-size: var(--memori-text-size-small);
-    font-weight: var(--memori-text-weight-medium);
-}
-
-.memori-media-item--snippet-header {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    padding: 0.5rem 0.75rem;
-}
-
-.memori-media-item--snippet-meta {
-    color: var(--memori-text-color);
-    font-size: 12px;
-}
-
-.memori-media-item--snippet {
-    width: 100%;
-    min-width: 0;
-    max-width: 100%;
-}
-
-.memori-media-item--snippet-direct {
-    display: flex;
-    width: 100%;
-    min-width: 0;
-    max-width: 100%;
-    margin-bottom: var(--memori-spacing-lg);
-}
-
-/* Snippet card: full width of parent so it resizes with container */
-.memori-media-items--grid .memori-media-item:has(.memori-media-item--snippet) {
-    width: 100%;
-    min-width: 0;
-    max-width: 100%;
-}
-
-.memori-media-items--grid .memori-media-item--snippet-direct {
-    max-width: none;
-}
-
-.memori-media-items--grid .memori-media-item--snippet {
-    width: 100%;
-    min-width: 0;
-    max-width: 450px;
-    background: var(--memori-secondary-background);
-}
-
-.memori-media-item--snippet-direct .memori-media-item--snippet {
-    overflow: hidden;
-    width: 100%;
-    min-width: 0;
-    max-width: 100%;
-    box-sizing: border-box;
-    flex: 1 1 0;
-    border: 1px solid var(--memori-border, #e5e7eb);
-    border-radius: var(--memori-radius-box);
-    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;
-}
-
-.memori-media-item--snippet-direct .memori-media-item--snippet:hover {
-    box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.15);
-    transform: translateY(-1px);
-}
-
-.memori-media-item--snippet-direct .memori-snippet {
-    border-radius: var(--memori-radius-box);
-    /* background: #f8fafc; */
-}
-
-/* Lower specificity selectors must come before higher specificity ones */
-.memori-media-item--audio-icon svg {
-    width: 20px;
-    height: 20px;
-    color: var(--memori-text-color);
-}
-
-.memori-media-item--generic-file-icon svg {
-    width: 24px;
-    height: 24px;
-    color: var(--memori-text-color);
-}
-
-.memori-media-item--code-body pre {
-    padding: 0;
-    border: none;
-    margin: 0;
-    background: transparent;
-    color: var(--memori-text-color);
-    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
-    font-size: 13px;
-    line-height: 1.6;
-}
-
-.memori-media-item--code-body code {
-    padding: 0;
-    border-radius: 0;
-    background: transparent;
-}
-
-.memori-media-item--snippet-direct .memori-snippet pre {
-    padding: 1rem;
-    border: none;
-    margin: 0;
-    background: #f8fafc;
-    font-size: var(--memori-text-size-small);
-    line-height: 1.6;
-    overflow-x: auto;
-}
-
-.memori-media-item--snippet-direct .memori-snippet code {
-    padding: 0;
-    border-radius: 0;
-    background: transparent;
-    color: var(--memori-text-color);
-    font-family: 'Fira Code', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-}
-
-.memori-media-item--snippet-direct .memori-snippet--copy-button {
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    background: rgba(0, 0, 0, 0.05);
-    transition: all 0.2s ease;
-}
-
-.memori-media-item--snippet-direct .memori-snippet--copy-button svg {
-    width: 14px;
-    height: 14px;
-    color: var(--memori-text-color);
-}
-
-.memori-media-item--snippet-direct .memori-snippet--caption {
-    padding: 0.75rem 1rem;
-    border-top: 1px solid rgba(0, 0, 0, 0.05);
-    background: rgba(0, 0, 0, 0.02);
-    color: var(--memori-text-color);
-    font-size: 0.8rem;
-    font-weight: var(--memori-text-weight-medium);
-}
-
-/* Enhanced snippet styles for modal */
-.memori-media-item-preview--content .memori-snippet {
-    display: flex;
-    overflow: hidden;
-    height: 100%;
-    flex-direction: column;
-    border-radius: var(--memori-radius-box);
-    background: #1e1e1e;
-}
-
-.memori-media-item-preview--content .memori-snippet--content {
-    display: flex;
-    overflow: hidden;
-    flex: 1;
-    flex-direction: column;
-}
-
-.memori-media-item-preview--content .memori-snippet pre {
-    overflow: auto;
-    flex: 1;
-    padding: 1.5rem;
-    border: none;
-    border-radius: 0;
-    margin: 0;
-    background: #1e1e1e;
-    font-size: var(--memori-text-size-small);
-    line-height: 1.6;
-    white-space: pre-wrap;
-    word-break: break-word;
-    word-wrap: break-word;
-}
-
-.memori-media-item-preview--content .memori-snippet code {
-    padding: 0;
-    border-radius: 0;
-    background: transparent;
-    font-family: 'Fira Code', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-}
-
-.memori-media-item-preview--content .memori-snippet--copy-button {
-    position: absolute;
-    z-index: 10;
-    top: 1rem;
-    right: 1rem;
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    backdrop-filter: blur(10px);
-    background: rgba(255, 255, 255, 0.1);
-    transition: all 0.2s ease;
-}
-
-.memori-media-item-preview--content .memori-snippet--copy-button:hover {
-    border-color: rgba(255, 255, 255, 0.3);
-    background: rgba(255, 255, 255, 0.2);
-    transform: scale(1.05);
-}
-
-.memori-media-item-preview--content .memori-snippet--copy-button svg {
-    width: 16px;
-    height: 16px;
-    color: var(--memori-text-color);
-}
-
-.memori-media-item-preview--content .memori-snippet--caption {
-    padding: 1rem 1.5rem;
-    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-weight: var(--memori-text-weight-medium);
-}
-
-/* Responsive design */
-/* Mobile (≤640px): Force single column layout */
-@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;
-    }
-}
-
-/* Tablet (641px-1024px): 2 columns max, min 250px per column */
-@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--many {
-        max-width: 100%;
-        grid-template-columns: repeat(2, minmax(250px, 1fr));
-    }
-}
-
-/* Desktop (>1024px): 3 columns max 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));
-    }
-}
-
-/* Legacy mobile styles for backward compatibility */
-@media (max-width: 768px) {
-    .memori-media-items--grid {
-        padding: 0.75rem;
-        gap: var(--memori-spacing-sm);
-    }
-
-    .memori-media-item--figure-caption {
-        padding: 0.375rem 0.5rem;
-        font-size: 0.65rem;
-        line-height: var(--memori-text-line-tight);
-    }
-
-    .memori-media-item-preview--text {
-        font-size: 0.8rem;
-    }
-
-    .memori-media-item-preview--text pre {
-        padding: 0.75rem;
-    }
-
-    .memori-media-item-preview--content {
-        min-height: 40vh;
-        max-height: 50vh;
-    }
-
-    /* Mobile snippet improvements */
-    .memori-media-item--snippet-direct {
-        margin-bottom: var(--memori-spacing-lg);
-    }
-
-    .memori-media-item--snippet-direct .memori-snippet pre {
-        padding: 0.75rem;
-        font-size: 0.8rem;
-    }
-
-    .memori-media-item--snippet-direct .memori-snippet--copy-button {
-        top: 0.5rem;
-        right: 0.5rem;
-        width: 28px !important;
-        height: 28px !important;
-    }
-
-    .memori-media-item--snippet-direct .memori-snippet--copy-button svg {
-        width: 12px;
-        height: 12px;
-    }
-
-    .memori-media-item-preview--content .memori-snippet pre {
-        padding: 1rem;
-        font-size: 0.8rem;
-    }
-}
-
-/* ============================================
-   DOCUMENTS (Claude-style: filename, icon, meta)
-   ============================================ */
-a.memori-media-item--document-link {
-    display: block;
-    width: 100%;
-    color: inherit;
-    text-decoration: none;
-}
-
-.memori-media-item--document {
-    position: relative;
-    display: flex;
-    width: 100%;
-    min-height: 100px;
-    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);
-    cursor: pointer;
-    transition: box-shadow 0.2s ease;
-}
-
-.memori-media-item--document:hover {
-    border: 1px solid var(--memori-primary);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-}
-
-.memori-media-item--document-header {
-    display: flex;
-    align-items: flex-start;
-    gap: calc(var(--memori-spacing-sm) + var(--memori-spacing-xs));
-}
-
-.memori-media-item--document-icon {
-    display: flex;
-    width: 40px;
-    height: 40px;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    border-radius: var(--memori-radius-box);
-    background: #f3f4f6;
-    color: var(--memori-text-color);
-}
-
-.memori-media-item--document-icon-svg {
-    width: 20px;
-    height: 20px;
-    color: var(--memori-text-color);
-}
-
-.memori-media-item--document-title {
-    display: -webkit-box;
-    overflow: hidden;
-    flex: 1;
-    margin: 0;
-    -webkit-box-orient: vertical;
-    color: var(--memori-text-color);
-    direction: ltr;
-    font-size: var(--memori-text-size-small);
-    font-weight: var(--memori-text-weight-medium);
-    -webkit-line-clamp: 3;
-    overflow-wrap: break-word;
-}
-
-.memori-media-item--document-badge {
-    position: absolute;
-    right: 12px;
-    bottom: 12px;
-    padding: var(--memori-spacing-xs) var(--memori-spacing-sm);
-    border-radius: var(--memori-radius-box);
-    background: #f3f4f6;
-    color: #000;
-    font-size: 11px;
-    font-weight: var(--memori-text-weight-semibold);
-    letter-spacing: 0.02em;
-    text-transform: uppercase;
-}
-
-/* Document items in grid: compact, full width */
-.memori-media-items--grid .memori-media-item--document-link {
-    width: 100%;
-}
-
-.memori-media-items--grid .memori-media-item--document {
-    min-width: 120px;
-    max-width: 120px;
-    min-height: 120px;
-    box-sizing: border-box;
-    background-color: var(--memori-secondary-background);
-}
-
-/* Tab focus — focus is on the link wrapper, not the inner card/document */
-a.memori-media-item--link:focus-visible .memori-media-item--document,
-div.memori-media-item--link:focus-visible .memori-media-item--document {
-    border-color: var(--memori-border-primary, var(--memori-primary));
-}
-
-/* ============================================
-   VIDEOS (MP4, QuickTime, AVI, MPEG)
-   ============================================ */
-.memori-media-item--video-container {
-    position: relative;
-    overflow: hidden;
-    width: 100%;
-    border: 1px solid #e5e7eb;
-    border-radius: var(--memori-radius-box);
-    background: #000;
-    cursor: pointer;
-    transition: box-shadow 0.2s ease;
-}
-
-.memori-media-item--video-container:hover {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-}
-
-.memori-media-item--video-player {
-    display: block;
-    width: 100%;
-    height: auto;
-    min-height: 120px;
-    max-height: 400px;
-    border-radius: var(--memori-radius-box);
-}
-
-.memori-media-item--video-overlay {
-    position: absolute;
-    z-index: 1;
-    top: 50%;
-    left: 50%;
-    display: flex;
-    width: 64px;
-    height: 64px;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50%;
-    background: rgba(0, 0, 0, 0.6);
-    pointer-events: none;
-    transform: translate(-50%, -50%);
-    transition: opacity 0.2s ease;
-}
-
-.memori-media-item--video-container:hover .memori-media-item--video-overlay {
-    opacity: 0.8;
-}
-
-.memori-media-item--video-overlay.hidden {
-    display: none;
-}
-
-.memori-media-item--play-icon {
-    width: 32px;
-    height: 32px;
-    color: var(--memori-text-color);
-}
-
-/* ============================================
-   AUDIO (MP3, WAV, MPEG)
-   ============================================ */
-.memori-media-item--audio-container {
-    display: flex;
-    width: 100%;
-    min-height: 120px;
-    box-sizing: border-box;
-    align-items: center;
-    padding: var(--memori-spacing-md);
-    border: 1px solid #e5e7eb;
-    border-radius: var(--memori-radius-box);
-    background: #f9fafb;
-    gap: calc(var(--memori-spacing-sm) + var(--memori-spacing-xs));
-    transition: box-shadow 0.2s ease;
-}
-
-.memori-media-item--audio-container:hover {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-}
-
-.memori-media-item--audio-icon {
-    display: flex;
-    width: 40px;
-    height: 40px;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50%;
-    background: #3b82f6;
-}
-
-.memori-media-item--audio-player {
-    min-width: 0;
-    height: 32px;
-    flex: 1;
-}
-
-.memori-media-item--audio-player::-webkit-media-controls-panel {
-    background: transparent;
-}
-
-/* ============================================
-   3D MODELS (GLTF)
-   ============================================ */
-.memori-media-item--model-container {
-    position: relative;
-    overflow: hidden;
-    width: 100%;
-    height: 400px;
-    border: 1px solid #e5e7eb;
-    border-radius: var(--memori-radius-box);
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    cursor: grab;
-    transition: box-shadow 0.2s ease;
-}
-
-.memori-media-item--model-container:hover {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-}
-
-.memori-media-item--model-container:active {
-    cursor: grabbing;
-}
-
-.memori-media-item--model-viewer {
-    width: 100%;
-    height: 100%;
-}
-
-.memori-media-item--model-controls {
-    position: absolute;
-    z-index: 10;
-    right: 12px;
-    bottom: 12px;
-    display: flex;
-    gap: var(--memori-spacing-sm);
-}
-
-.memori-media-item--model-control-btn {
-    display: flex;
-    width: 32px;
-    height: 32px;
-    align-items: center;
-    justify-content: center;
-    border: none;
-    border-radius: var(--memori-radius-box);
-    background: rgba(0, 0, 0, 0.6);
-    color: var(--memori-text-color);
-    cursor: pointer;
-    transition: background 0.2s ease;
-}
-
-.memori-media-item--model-control-btn:hover {
-    background: rgba(0, 0, 0, 0.8);
-}
-
-/* ============================================
-   CODE SNIPPETS (Inline and Block)
-   ============================================ */
-.memori-media-item--code-snippet-inline {
-    display: flex;
-    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;
-    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
-    font-size: 13px;
-    gap: calc(var(--memori-spacing-sm) + var(--memori-spacing-xs));
-    transition: box-shadow 0.2s ease;
-}
-
-.memori-media-item--code-snippet-inline:hover {
-    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-}
-
-.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);
-    background: #3b82f6;
-    color: var(--memori-text-color);
-    font-size: 11px;
-    font-weight: var(--memori-text-weight-medium);
-    line-height: var(--memori-text-line-normal);
-    text-transform: uppercase;
-}
-
-.memori-media-item--code-content {
-    flex: 1;
-    margin: 0;
-    color: var(--memori-text-color);
-    line-height: var(--memori-text-line-normal);
-    overflow-x: auto;
-}
-
-.memori-media-item--code-snippet-block {
-    position: relative;
-    overflow: hidden;
-    width: 100%;
-    border: 1px solid #e5e7eb;
-    border-radius: var(--memori-radius-box);
-    background: #1e1e1e;
-    transition: box-shadow 0.2s ease;
-}
-
-.memori-media-item--code-snippet-block:hover {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-}
-
-.memori-media-item--code-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: var(--memori-spacing-sm) calc(var(--memori-spacing-sm) + var(--memori-spacing-xs));
-    border-bottom: 1px solid #3e3e3e;
-    background: #2d2d2d;
-}
-
-.memori-media-item--code-language {
-    margin: 0;
-    color: var(--memori-text-color);
-    font-size: 12px;
-    font-weight: var(--memori-text-weight-medium);
-    text-transform: uppercase;
-}
-
-.memori-media-item--code-actions {
-    display: flex;
-    gap: var(--memori-spacing-sm);
-}
-
-.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);
-    background: transparent;
-    color: var(--memori-text-color);
-    cursor: pointer;
-    font-size: 11px;
-    transition: all 0.2s ease;
-}
-
-.memori-media-item--code-action-btn:hover {
-    border-color: #6b7280;
-    background: #374151;
-    color: var(--memori-text-color);
-}
-
-.memori-media-item--code-body {
-    max-height: 400px;
-    padding: var(--memori-spacing-md);
-    overflow-x: auto;
-    overflow-y: auto;
-}
-
-/* Syntax highlighting colors (Prism-like) */
-.memori-media-item--code-body .token.comment {
-    color: #6a9955;
-}
-
-.memori-media-item--code-body .token.string {
-    color: #ce9178;
-}
-
-.memori-media-item--code-body .token.keyword {
-    color: #569cd6;
-}
-
-.memori-media-item--code-body .token.function {
-    color: #dcdcaa;
-}
-
-.memori-media-item--code-body .token.number {
-    color: #b5cea8;
-}
-
-.memori-media-item--code-body .token.operator {
-    color: var(--memori-text-color);
-}
-
-/* ============================================
-   HTML PREVIEW
-   ============================================ */
-.memori-media-item--html-preview {
-    overflow: auto;
-    width: 100%;
-    min-height: 200px;
-    max-height: 600px;
-    padding: var(--memori-spacing-md);
-    border: 1px solid #e5e7eb;
-    border-radius: var(--memori-radius-box);
-    background: white;
-    cursor: pointer;
-    transition: box-shadow 0.2s ease;
-}
-
-.memori-media-item--html-preview:hover {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-}
-
-.memori-media-item--html-preview-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding-bottom: var(--memori-spacing-sm);
-    border-bottom: 1px solid #e5e7eb;
-    margin-bottom: calc(var(--memori-spacing-sm) + var(--memori-spacing-xs));
-}
-
-.memori-media-item--html-preview-title {
-    margin: 0;
-    color: var(--memori-text-color);
-    font-size: 12px;
-    font-weight: var(--memori-text-weight-medium);
-    text-transform: uppercase;
-}
-
-.memori-media-item--html-preview-content {
-    color: var(--memori-text-color);
-    font-size: var(--memori-text-size-small);
-    line-height: 1.6;
-}
-
-/* ============================================
-   GENERIC FILES (Fallback)
-   ============================================ */
-.memori-media-item--generic-file {
-    display: flex;
-    width: 100%;
-    align-items: center;
-    padding: var(--memori-spacing-md);
-    border: 1px solid #e5e7eb;
-    border-radius: var(--memori-radius-box);
-    background: #f9fafb;
-    cursor: pointer;
-    gap: calc(var(--memori-spacing-sm) + var(--memori-spacing-xs));
-    transition: box-shadow 0.2s ease, transform 0.2s ease;
-}
-
-.memori-media-item--generic-file:hover {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-}
-
-.memori-media-item--generic-file:active {
-    transform: scale(0.98);
-}
-
-.memori-media-item--generic-file-icon {
-    display: flex;
-    width: 48px;
-    height: 48px;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    border-radius: var(--memori-radius-box);
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-}
-
-.memori-media-item--generic-file-info {
-    min-width: 0;
-    flex: 1;
-}
-
-.memori-media-item--generic-file-name {
-    overflow: hidden;
-    margin: 0;
-    color: var(--memori-text-color);
-    font-size: var(--memori-text-size-small);
-    font-weight: var(--memori-text-weight-medium);
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.memori-media-item--generic-file-meta {
-    margin: 0;
-    margin-top: var(--memori-spacing-xs);
-    color: var(--memori-text-color);
-    font-size: 12px;
-}
-
-.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;
-    color: var(--memori-text-color);
-    cursor: pointer;
-    font-size: 12px;
-    transition: background 0.2s ease;
-}
-
-.memori-media-item--generic-file-action:hover {
-    background: #f9fafb;
-}
-
-/* ============================================
-   GRID LAYOUTS FOR MIXED MEDIA
-   ============================================ */
-/* Documents, audio, and generic files stack vertically */
-.memori-media-items--grid.list-items {
-    max-width: 600px;
-    grid-template-columns: 1fr;
-}
-
-/* Videos and 3D models can use 1-2 column layout */
-.memori-media-items--grid.large-media {
-    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
-}
-
-/* Code snippets can be mixed width */
-.memori-media-items--grid.code-snippets {
-    max-width: 800px;
-    grid-template-columns: 1fr;
-}
-
-/* Responsive adjustments for mixed media */
-@media (max-width: 640px) {
-    .memori-media-items--grid.large-media {
-        grid-template-columns: 1fr !important;
-    }
-
-    .memori-media-item--model-container {
-        height: 300px;
-    }
-
-    .memori-media-item--video-player {
-        max-height: 300px;
-    }
-}
-
-/* ============================================
-   DARK FILE CARDS (Files: TXT, HTML, PDF, DOC, etc.)
-   ============================================ */
-.memori-media-item--card-file {
-    position: relative;
-    display: flex;
-    min-height: 120px;
-    flex-direction: column;
-    padding: var(--memori-spacing-md);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: var(--memori-radius-box);
-    background: #363636;
-    transition: box-shadow 0.2s ease, transform 0.2s ease;
-}
-
-.memori-media-item--card-file:hover {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
-    cursor: pointer;
-}
-
-.memori-media-item--card-file:active {
-    transform: scale(0.98);
-}
-
-.memori-media-item--file-content {
-    position: relative;
-    display: flex;
-    height: 100%;
-    flex-direction: column;
-}
-
-.memori-media-item--file-title {
-    overflow: hidden;
-    flex: 1;
-    margin-bottom: var(--memori-spacing-sm);
-    color: var(--memori-text-color);
-    font-size: var(--memori-text-size-small);
-    font-weight: var(--memori-text-weight-medium);
-    line-height: 1.4;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.memori-media-item--file-meta {
-    margin-bottom: auto;
-    color: var(--memori-text-color);
-    font-size: 12px;
-    line-height: var(--memori-text-line-normal);
-}
-
-.memori-media-item--file-badge {
-    position: absolute;
-    bottom: 12px;
-    left: 12px;
-    padding: var(--memori-spacing-xs) var(--memori-spacing-sm);
-    border-radius: var(--memori-radius-box);
-    background: rgba(255, 255, 255, 0.2);
-    color: var(--memori-text-color);
-    font-size: 11px;
-    font-weight: var(--memori-text-weight-medium);
-    letter-spacing: 0.5px;
-    text-transform: uppercase;
-}
-
-/* Link preview card styles */
-.memori-media-item--card-cover-icon {
-    display: flex;
-    min-height: 120px;
-    align-items: center;
-    justify-content: center;
-    padding: 2rem;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-}
-
-.memori-media-item--card-cover-img {
-    display: block;
-    width: 100%;
-    height: auto;
-    max-height: 300px;
-    object-fit: cover;
-    object-position: center;
-}
-
-/* Responsive for file cards */
-@media (max-width: 640px) {
-    .memori-media-item--card-file {
-        min-height: 100px;
-        padding: calc(var(--memori-spacing-sm) + var(--memori-spacing-xs));
-    }
-}