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

package/esm/components/MemoriArtifactSystem/components/ArtifactDrawer/ArtifactDrawer.css

@@ -13,22 +13,47 @@
     --artifact-drawer-accent: var(--memori-primary);
     --artifact-drawer-shadow: var(--memori-shadow-lg);
     --artifact-drawer-shadow-lg: var(--memori-shadow-2xl);
-    --artifact-drawer-radius: var(--memori-radius-box);
-    --artifact-drawer-radius-lg: var(--memori-radius-box);
+    --artifact-drawer-radius: var(--memori-radius-overlay);
+    --artifact-drawer-radius-lg: var(--memori-radius-overlay);
 }
 
 /*
  * Split-panel width for ArtifactDrawer.
- * Must stay in sync with HiddenChat's sidebar shift (`right: 46%`).
+ * Must stay in sync with HiddenChat's sidebar shift (`right: 55%`).
  * @memori.ai/ui Drawer uses `--memori-modal-size-*` (not the legacy
- * `--memori-drawer--width-*` tokens), and size="md" maps to `--memori-modal-size-md`.
+ * size="md" maps to `--memori-modal-size-md`.
  */
 .memori-drawer--right.memori-drawer--size-md.memori-artifact-panel-drawer {
-    --memori-modal-size-md: 46%;
-    width: 46%;
+    --memori-modal-size-md: 55%;
+    width: 55%;
     max-width: 100vw;
 }
 
+@media (max-width: 1260px) {
+    .memori-drawer--right.memori-drawer--size-md.memori-artifact-panel-drawer,
+    .memori-drawer--right.memori-artifact-panel-drawer-fullscreen {
+        --memori-modal-size-md: 100%;
+        width: 100% !important;
+        max-width: 100% !important;
+        height: 100% !important;
+        max-height: 100dvh !important;
+        border-radius: 0;
+        border-left: none;
+        box-shadow: none;
+    }
+
+    .memori-artifact-panel-drawer .memori-drawer__body,
+    .memori-artifact-panel-drawer-fullscreen .memori-drawer__body {
+        display: flex;
+        overflow: hidden;
+        height: 100%;
+        min-height: 0;
+        flex: 1 1 auto;
+        flex-direction: column;
+        padding: 0;
+    }
+}
+
 .memori-drawer--right.memori-artifact-panel-drawer-fullscreen {
     --memori-modal-size-md: 100%;
     width: 100% !important;
@@ -44,14 +69,118 @@ body:has(.memori-artifact-panel-drawer-fullscreen) .memori-drawer__backdrop,
     display: none !important;
 }
 
-/* Inline layout column — renders inside the flex grid, not as a fixed overlay */
+/* Inline layout column — fills the layout flex slot, not a fixed overlay.
+   min-height: 0 (not 100vh) so opening the artifact cannot expand the page. */
 .memori-artifact-layout-column {
     display: flex;
     overflow: hidden;
     width: 100%;
     height: 100%;
-    min-height: 100vh;
+    min-height: 0;
     flex-direction: column;
+    background: #fbfaf8;
+}
+
+[data-theme='dark'] .memori-artifact-layout-column,
+.memori-widget[data-theme='dark'] .memori-artifact-layout-column {
+    background: color-mix(in srgb, var(--memori-text-color) 6%, var(--memori-secondary-background));
+}
+
+/* Toolbar: identity (title + type) stays visible even when the document
+   headings scroll away inside the reading column. */
+.memori-artifact-toolbar {
+    display: flex;
+    flex-shrink: 0;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--memori-spacing-sm) var(--memori-spacing-md);
+    border-bottom: 1px solid color-mix(in srgb, var(--memori-text-color, #111827) 10%, transparent);
+    background: inherit;
+    gap: var(--memori-spacing-sm);
+}
+
+.memori-artifact-toolbar--identity {
+    display: flex;
+    overflow: hidden;
+    min-width: 0;
+    flex: 1 1 12rem;
+    flex-direction: column;
+    gap: 0.125rem;
+}
+
+.memori-artifact-toolbar--title {
+    overflow: hidden;
+    margin: 0;
+    color: var(--artifact-drawer-text);
+    font-size: var(--memori-text-size-md);
+    font-weight: var(--memori-text-weight-semibold);
+    letter-spacing: -0.01em;
+    line-height: 1.25;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.memori-artifact-toolbar--type {
+    overflow: hidden;
+    color: color-mix(in srgb, var(--memori-text-color, #111827) 62%, transparent);
+    font-size: var(--memori-text-size-sm);
+    font-weight: var(--memori-text-weight-medium);
+    line-height: 1.2;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.memori-artifact-toolbar--controls {
+    display: flex;
+    flex: 0 0 auto;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    margin-left: auto;
+    gap: var(--memori-spacing-sm);
+}
+
+.memori-artifact-toolbar--mobile-actions {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: var(--memori-spacing-sm);
+}
+
+.memori-artifact-toolbar--chatlog {
+    width: 100%;
+    min-width: 0;
+    box-sizing: border-box;
+    padding-top: var(--memori-spacing-md);
+}
+
+.memori-artifact-toolbar--chatlog .memori-artifact-toolbar--controls {
+    width: 100%;
+    min-width: 0;
+    flex: 1 1 auto;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+}
+
+.memori-artifact-toolbar--chatlog .memori-tab-switch {
+    min-width: 0;
+    max-width: 100%;
+    flex: 1 1 auto;
+}
+
+.memori-artifact-toolbar--chatlog .memori-tab-switch__tab {
+    min-width: 0;
+    flex: 1 1 0;
+}
+
+.memori-artifact-toolbar--chatlog .memori-artifact-toolbar--mobile-actions {
+    flex-shrink: 0;
+}
+
+.memori-artifact-panel--chatlog {
+    width: 100%;
+    box-sizing: border-box;
 }
 
 /* Main Drawer Container (Mobile Only) */
@@ -94,7 +223,7 @@ body:has(.memori-artifact-panel-drawer-fullscreen) .memori-drawer__backdrop,
     flex-flow: column;
     align-items: flex-start;
     justify-content: space-between;
-    padding-top: 1rem;
+    padding: 1rem var(--memori-spacing-md) 0;
 }
 
 .memori-artifact-panel--header-content {
@@ -104,12 +233,10 @@ body:has(.memori-artifact-panel-drawer-fullscreen) .memori-drawer__backdrop,
 
 .memori-artifact-panel--title {
     overflow: hidden;
-    /* max-width: 90%; */
+    max-width: 100%;
     margin: 0 0 0.75rem;
-    background: white;
-    background-clip: text;
     color: var(--artifact-drawer-text);
-    font-size: var(--memori-text-size-heading-large);
+    font-size: var(--memori-text-size-2xl);
     font-weight: var(--memori-text-weight-bold);
     letter-spacing: -0.02em;
     line-height: var(--memori-text-line-tight);
@@ -120,7 +247,7 @@ body:has(.memori-artifact-panel-drawer-fullscreen) .memori-drawer__backdrop,
 .memori-artifact-panel--subtitle {
     margin: 0 0 1rem;
     color: var(--artifact-drawer-text-muted);
-    font-size: 0.95rem;
+    font-size: var(--memori-text-size-sm);
     font-weight: var(--memori-text-weight-medium);
     line-height: 1.4;
     opacity: 0.9;
@@ -142,9 +269,9 @@ body:has(.memori-artifact-panel-drawer-fullscreen) .memori-drawer__backdrop,
     overflow: hidden;
     align-items: center;
     padding: 0.25rem 0.75rem;
-    border: 1px solid rgba(0, 123, 255, 0.15);
-    border-radius: var(--memori-radius-box);
-    background: rgba(0, 123, 255, 0.08);
+    border: 1px solid color-mix(in oklch, var(--memori-primary), transparent 85%);
+    border-radius: var(--memori-radius-control);
+    background: color-mix(in oklch, var(--memori-primary), transparent 92%);
     gap: var(--memori-spacing-sm);
 }
 
@@ -182,32 +309,32 @@ body:has(.memori-artifact-panel-drawer-fullscreen) .memori-drawer__backdrop,
 .memori-artifact-panel--content {
     position: relative;
     display: flex;
-    overflow: visible;
-    height: 87vh;
+    overflow: hidden;
     min-height: 0;
-    max-height: 87vh;
-    flex: 1;
-    /* padding: 1.5rem 1.5rem; */
+    flex: 1 1 auto;
+    justify-content: center;
     gap: var(--memori-spacing-lg);
 }
 
 .memori-artifact-panel--main {
     position: relative;
     display: flex;
-    overflow: visible;
+    overflow: hidden;
+    width: 100%;
     min-width: 0;
-    flex: 1;
+    max-width: 720px;
+    flex: 1 1 auto;
     flex-direction: column;
+    margin-right: auto;
+    margin-left: auto;
+}
+
+.memori-artifact-panel--chatlog .memori-artifact-panel--main {
+    max-width: none;
 }
 
 .memori-artifact-panel--main::before {
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
-    height: 1px;
-    background: white;
-    content: '';
+    display: none;
 }
 
 .memori-artifact-drawer--backdrop {
@@ -218,7 +345,7 @@ body:has(.memori-artifact-panel-drawer-fullscreen) .memori-drawer__backdrop,
     width: 100%;
     height: 100%;
     backdrop-filter: blur(8px) saturate(180%);
-    background: white;
+    background: var(--memori-secondary-background);
 }
 
 .memori-artifact-drawer--container {
@@ -246,7 +373,7 @@ body:has(.memori-artifact-panel-drawer-fullscreen) .memori-drawer__backdrop,
     flex-direction: column;
     padding: 1.5rem 2rem 2rem;
     border-left: 1px solid rgba(255, 255, 255, 0.2);
-    background: white;
+    background: var(--memori-secondary-background);
     box-shadow: var(--artifact-drawer-shadow-lg);
     font-family: var(--memori-font-family);
     transform: opacity(0);
@@ -280,7 +407,7 @@ body:has(.memori-artifact-panel-drawer-fullscreen) .memori-drawer__backdrop,
     border-bottom: 1px solid var(--artifact-drawer-border);
     margin-bottom: var(--memori-spacing-lg);
     backdrop-filter: blur(20px);
-    background: white;
+    background: var(--memori-secondary-background);
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
 }
 
@@ -295,7 +422,7 @@ body:has(.memori-artifact-panel-drawer-fullscreen) .memori-drawer__backdrop,
     -webkit-background-clip: text;
     background-clip: text;
     color: var(--artifact-drawer-text);
-    font-size: var(--memori-text-size-heading-large);
+    font-size: var(--memori-text-size-2xl);
     font-weight: var(--memori-text-weight-bold);
     letter-spacing: -0.02em;
     line-height: var(--memori-text-line-tight);
@@ -305,7 +432,7 @@ body:has(.memori-artifact-panel-drawer-fullscreen) .memori-drawer__backdrop,
 .memori-artifact-drawer--subtitle {
     margin: 0 0 1rem;
     color: var(--artifact-drawer-text-muted);
-    font-size: 0.95rem;
+    font-size: var(--memori-text-size-sm);
     font-weight: var(--memori-text-weight-medium);
     line-height: 1.4;
     opacity: 0.9;
@@ -330,19 +457,12 @@ body:has(.memori-artifact-panel-drawer-fullscreen) .memori-drawer__backdrop,
     max-height: 40px;
     align-items: center;
     padding: 0.25rem 0.75rem;
-    border: 1px solid rgba(0, 123, 255, 0.15);
-    border-radius: var(--memori-radius-box);
-    background: rgba(0, 123, 255, 0.08);
+    border: 1px solid color-mix(in oklch, var(--memori-primary), transparent 85%);
+    border-radius: var(--memori-radius-control);
+    background: color-mix(in oklch, var(--memori-primary), transparent 92%);
     gap: var(--memori-spacing-sm);
 }
 
-.memori-artifact-panel-drawer-fullscreen > div > div > div {
-    width: 100% !important;
-    max-width: 100% !important;
-    box-shadow: none !important;
-    transform: translateX(0) !important;
-}
-
 .memori-artifact-drawer--header-actions {
     z-index: 100;
     display: flex;
@@ -383,7 +503,7 @@ body:has(.memori-artifact-panel-drawer-fullscreen) .memori-drawer__backdrop,
     overflow: hidden;
     align-items: center;
     border: 1px solid var(--artifact-drawer-border);
-    border-radius: var(--memori-radius-box);
+    border-radius: var(--memori-radius-control);
     background: var(--artifact-drawer-bg);
 }
 
@@ -427,7 +547,7 @@ body:has(.memori-artifact-panel-drawer-fullscreen) .memori-drawer__backdrop,
     align-items: center;
     justify-content: center;
     border: 1px solid var(--artifact-drawer-border);
-    border-radius: var(--memori-radius-box);
+    border-radius: var(--memori-radius-control);
     background: var(--artifact-drawer-bg);
     color: var(--artifact-drawer-text-muted);
     transition: all 0.2s ease;
@@ -445,7 +565,7 @@ body:has(.memori-artifact-panel-drawer-fullscreen) .memori-drawer__backdrop,
     overflow: hidden;
     align-items: center;
     border: 1px solid var(--artifact-drawer-border);
-    border-radius: var(--memori-radius-box);
+    border-radius: var(--memori-radius-control);
     background: var(--artifact-drawer-bg);
 }
 
@@ -458,7 +578,7 @@ body:has(.memori-artifact-panel-drawer-fullscreen) .memori-drawer__backdrop,
     background: transparent;
     color: var(--artifact-drawer-text);
     cursor: pointer;
-    font-size: var(--memori-text-size-small);
+    font-size: var(--memori-text-size-sm);
     font-weight: var(--memori-text-weight-medium);
     transition: all 0.2s ease;
 }
@@ -483,7 +603,7 @@ body:has(.memori-artifact-panel-drawer-fullscreen) .memori-drawer__backdrop,
 }
 
 .memori-artifact-copy-text {
-    font-size: var(--memori-text-size-small);
+    font-size: var(--memori-text-size-sm);
     font-weight: var(--memori-text-weight-medium);
 }
 
@@ -527,7 +647,7 @@ body:has(.memori-artifact-panel-drawer-fullscreen) .memori-drawer__backdrop,
     right: 0;
     min-width: 200px;
     border: 1px solid var(--artifact-drawer-border);
-    border-radius: var(--memori-radius-box);
+    border-radius: var(--memori-radius-surface);
     margin-top: var(--memori-spacing-xs);
     background: var(--artifact-drawer-bg);
     box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
@@ -546,7 +666,7 @@ body:has(.memori-artifact-panel-drawer-fullscreen) .memori-drawer__backdrop,
     background: transparent;
     color: var(--artifact-drawer-text);
     cursor: pointer;
-    font-size: var(--memori-text-size-small);
+    font-size: var(--memori-text-size-sm);
     text-align: left;
     transition: all 0.2s ease;
 }
@@ -559,7 +679,7 @@ body:has(.memori-artifact-panel-drawer-fullscreen) .memori-drawer__backdrop,
 
 .memori-artifact-copy-dropdown-text {
     margin-left: var(--memori-spacing-sm);
-    font-size: var(--memori-text-size-small);
+    font-size: var(--memori-text-size-sm);
     font-weight: var(--memori-text-weight-medium);
 }
 
@@ -569,11 +689,11 @@ body:has(.memori-artifact-panel-drawer-fullscreen) .memori-drawer__backdrop,
     align-items: center;
     padding: var(--memori-spacing-sm) var(--memori-spacing-md);
     border: 1px solid var(--artifact-drawer-border);
-    border-radius: var(--memori-radius-box);
+    border-radius: var(--memori-radius-control);
     background: var(--artifact-drawer-bg);
     color: var(--artifact-drawer-text);
     cursor: pointer;
-    font-size: var(--memori-text-size-small);
+    font-size: var(--memori-text-size-sm);
     font-weight: var(--memori-text-weight-medium);
     gap: var(--memori-spacing-sm);
     transition: all 0.2s ease;
@@ -586,7 +706,7 @@ body:has(.memori-artifact-panel-drawer-fullscreen) .memori-drawer__backdrop,
 }
 
 .memori-artifact-share-text {
-    font-size: var(--memori-text-size-small);
+    font-size: var(--memori-text-size-sm);
     font-weight: var(--memori-text-weight-medium);
 }
 
@@ -598,7 +718,7 @@ body:has(.memori-artifact-panel-drawer-fullscreen) .memori-drawer__backdrop,
     align-items: center;
     justify-content: center;
     border: 1px solid var(--artifact-drawer-border);
-    border-radius: var(--memori-radius-box);
+    border-radius: var(--memori-radius-control);
     background: var(--artifact-drawer-bg);
     color: var(--artifact-drawer-text-muted);
     cursor: pointer;
@@ -622,14 +742,38 @@ body:has(.memori-artifact-panel-drawer-fullscreen) .memori-drawer__backdrop,
     flex-flow: row;
     align-items: center;
     padding: 0 var(--memori-spacing-md);
+    padding-bottom: var(--memori-spacing-sm);
     margin-top: var(--memori-spacing-lg);
     /* justify-content: space-between; */
     gap: var(--memori-spacing-sm);
 }
 
 .memori-artifact-drawer--close-icon {
-    width: 18px;
-    height: 18px;
+    width: 16px;
+    height: 16px;
+}
+
+/* Keep close control the same size as other artifact header icons,
+   including Chat stories that do not wrap in .memori-widget. */
+.memori-artifact-drawer--close.memori-icon-button.memori-button {
+    display: inline-flex;
+    width: 2.5rem;
+    min-width: 2.5rem;
+    height: 2.5rem;
+    min-height: 2.5rem;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+}
+
+.memori-artifact-drawer--close .memori-icon-close,
+.memori-artifact-drawer--close svg {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    fill: none;
+    stroke: currentColor;
 }
 
 /* Content */
@@ -670,7 +814,42 @@ body:has(.memori-artifact-panel-drawer-fullscreen) .memori-drawer__backdrop,
 .memori-button--more-options {
     padding: var(--memori-spacing-sm) var(--memori-spacing-md);
     border: 1px solid var(--memori-border-color, #e1e5e9);
-    border-radius: var(--memori-radius-box);
+    border-radius: var(--memori-radius-control);
+}
+
+.memori-artifact-toolbar--chatlog .memori-button--more-options {
+    flex-shrink: 0;
+}
+
+@media (max-width: 768px) {
+    .memori-artifact-toolbar--chatlog .memori-tab-switch__tab {
+        position: relative;
+        min-width: 2.25rem;
+        padding: 0.35rem 0.5rem;
+    }
+
+    .memori-artifact-toolbar--chatlog .memori-tab-switch__label {
+        position: absolute;
+        overflow: hidden;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        border-width: 0;
+        margin: -1px;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+    }
+
+    .memori-artifact-toolbar--chatlog .memori-button--more-options {
+        display: flex;
+        width: 2.25rem;
+        min-width: 2.25rem;
+        height: 2.25rem;
+        min-height: 2.25rem;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+    }
 }
 
 .memori-artifact-drawer--sidebar {
@@ -678,24 +857,34 @@ body:has(.memori-artifact-panel-drawer-fullscreen) .memori-drawer__backdrop,
     flex-shrink: 0;
     padding: 1rem;
     padding-left: 1rem;
-    border-radius: var(--memori-radius-box);
+    border-radius: var(--memori-radius-surface);
     border-left: var(--memori-border) solid var(--memori-primary);
     background: var(--memori-primary-subtle);
 }
 
-.memori-artifact-drawer--close-desktop {
-    width: 48px;
-    min-width: 48px;
-    height: 48px;
-    min-height: 48px;
-    padding: 0;
-    border: var(--memori-border) solid var(--memori-border-color);
-    margin: 0;
-    margin-left: 0 !important;
+/* Match website_assistant / hidden_chat sidebar close — never outline primary fill */
+.memori-widget .memori-artifact-drawer--close.memori-icon-button.memori-button,
+.memori-widget
+    .memori-artifact-drawer--close.memori-icon-button.memori-button:hover:not(:disabled, .memori-button--disabled),
+.memori-widget
+    .memori-artifact-drawer--close.memori-icon-button.memori-button:active:not(:disabled, .memori-button--disabled) {
+    border: var(--memori-border, 1px) solid color-mix(in srgb, var(--memori-text-color, #111827) 18%, transparent);
+    background: transparent;
+    box-shadow: none;
+    color: var(--memori-text-color, #111827);
+    transform: none;
 }
 
-.memori-artifact-drawer--close-desktop:hover {
-    color: #fff !important;
+.memori-widget
+    .memori-artifact-drawer--close.memori-icon-button.memori-button:hover:not(:disabled, .memori-button--disabled) {
+    background: color-mix(in srgb, var(--memori-text-color, #111827) 6%, transparent);
+}
+
+.memori-widget .memori-artifact-drawer--close .memori-icon-close {
+    width: 16px;
+    height: 16px;
+    fill: none;
+    stroke: currentColor;
 }
 
 /* Mobile Drawer Panel */
@@ -718,17 +907,8 @@ body:has(.memori-artifact-panel-drawer-fullscreen) .memori-drawer__backdrop,
     font-family: var(--memori-font-family);
 }
 
-.memori-artifact-drawer--close {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: var(--memori-radius-box);
-    /* background: var(--artifact-drawer-bg); */
-    margin-left: auto;
-}
-
-.memori-artifact-actions {
-    flex: 1;
+.memori-artifact-toolbar .memori-artifact-actions {
+    flex: 0 0 auto;
 }
 
 @media (max-width: 1024px) {
@@ -744,48 +924,107 @@ body:has(.memori-artifact-panel-drawer-fullscreen) .memori-drawer__backdrop,
         display: none;
     }
 
-    /* Mobile header: full-width bar with tabs on left, actions on right */
+    /* Mobile header: full-width toolbar — tabs left, more+close right */
     .memori-artifact-drawer-top-right {
+        display: flex;
+        overflow: visible;
         width: 100%;
+        box-sizing: border-box;
+        flex-shrink: 0;
+        align-items: center;
         justify-content: space-between;
         padding: var(--memori-spacing-sm) var(--memori-spacing-md);
         border-bottom: 1px solid var(--memori-border-color);
-        margin-bottom: var(--memori-spacing-xs);
+        margin: 0;
+        background: var(--memori-secondary-background);
+        gap: var(--memori-spacing-sm);
     }
 
-    /* Make mobile action buttons match the tab switch height */
-    .memori-artifact-drawer-top-right .memori-button--more-options,
-    .memori-artifact-drawer-top-right .memori-artifact-drawer--close {
-        display: flex;
-        width: 40px;
+    .memori-artifact-drawer-top-right-actions {
+        display: inline-flex;
+        flex-shrink: 0;
+        align-items: center;
+        margin-left: auto;
+        gap: var(--memori-spacing-sm);
+    }
+
+    .memori-artifact-drawer-top-right .memori-mobile-actions-menu {
+        margin-left: 0;
+    }
+
+    /* Tabs.Root from @memori.ai/ui defaults to width:100% — that pushes actions off-screen */
+    .memori-artifact-drawer-top-right .memori-tab-switch,
+    .memori-artifact-drawer-top-right .memori-tabs {
+        width: auto;
+        max-width: fit-content;
+        flex: 0 0 auto;
+        justify-content: flex-start;
+        /* border: var(--memori-border, 1px) solid color-mix(in srgb, var(--memori-text-color, #111827) 18%, transparent); */
+    }
+
+    .memori-artifact-drawer-top-right .memori-tab-switch__tab {
         min-width: 40px;
-        height: 40px;
-        min-height: 40px;
+        flex: 0 0 auto;
+    }
+
+    /* Make mobile more-options match header toolbar buttons */
+    .memori-artifact-drawer-top-right .memori-button--more-options {
+        display: flex;
+        width: 2.5rem;
+        min-width: 2.5rem;
+        height: 2.5rem;
+        min-height: 2.5rem;
         align-items: center;
         justify-content: center;
         padding: 0;
-        border: 1px solid var(--memori-border-color);
-        border-radius: var(--memori-radius-box);
+        border: var(--memori-border, 1px) solid color-mix(in srgb, var(--memori-text-color, #111827) 18%, transparent);
+        border-radius: var(--memori-radius-control);
+        margin-left: 0;
     }
 
-    .memori-artifact-drawer-top-right .memori-artifact-drawer--close {
-        margin-left: 0;
+    .memori-artifact-drawer-top-right .memori-button--more-options:hover {
+        border-color: color-mix(in srgb, var(--memori-text-color, #111827) 18%, transparent);
+        background: color-mix(in srgb, var(--memori-text-color, #111827) 6%, transparent);
+    }
+
+    /* Content fills remaining viewport under the toolbar (no floating card) */
+    .memori-artifact-panel-drawer .memori-artifact-panel--content,
+    .memori-artifact-panel-drawer-fullscreen .memori-artifact-panel--content {
+        overflow: hidden;
+        width: 100%;
+        height: auto;
+        min-height: 0;
+        max-height: none;
+        flex: 1 1 auto;
+        gap: 0;
+    }
+
+    .memori-artifact-panel-drawer .memori-artifact-panel--main,
+    .memori-artifact-panel-drawer-fullscreen .memori-artifact-panel--main {
+        overflow: hidden;
+        min-height: 0;
+        flex: 1 1 auto;
+    }
+
+    .memori-artifact-panel-drawer .memori-artifact-preview,
+    .memori-artifact-panel-drawer-fullscreen .memori-artifact-preview,
+    .memori-artifact-panel-drawer .memori-artifact-preview-content,
+    .memori-artifact-panel-drawer-fullscreen .memori-artifact-preview-content,
+    .memori-artifact-panel-drawer .memori-artifact-tab-content--active,
+    .memori-artifact-panel-drawer-fullscreen .memori-artifact-tab-content--active,
+    .memori-artifact-panel-drawer .memori-artifact-content,
+    .memori-artifact-panel-drawer-fullscreen .memori-artifact-content {
+        border-radius: 0;
     }
 
-    /* Solid opaque dropdown popover on mobile */
-    .memori-artifact-drawer-top-right .memori-mobile-dropdown {
-        z-index: 1100;
-        border: 1px solid var(--memori-border-color);
-        backdrop-filter: none;
-        background: var(--memori-main-background, #fff);
-        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+    .memori-artifact-panel-drawer .memori-artifact-tab-content--active,
+    .memori-artifact-panel-drawer-fullscreen .memori-artifact-tab-content--active {
+        padding: 0;
     }
 
-    /* Dropdown icon visibility */
-    .memori-artifact-drawer-top-right .memori-mobile-dropdown .memori-artifact-action-icon {
-        width: 18px;
-        height: 18px;
-        color: var(--memori-text-color);
+    .memori-artifact-panel-drawer .memori-artifact-preview-content,
+    .memori-artifact-panel-drawer-fullscreen .memori-artifact-preview-content {
+        background: transparent;
     }
 }
 
@@ -954,139 +1193,82 @@ body:has(.memori-artifact-panel-drawer-fullscreen) .memori-drawer__backdrop,
     z-index: 1001;
     display: flex;
     align-items: center;
-    padding: 0rem 1rem;
     gap: var(--memori-spacing-sm);
 }
 
-/* Mobile Actions Dropdown */
+/* Mobile Actions Dropdown — portaled popup (not under .top-right) */
 .memori-mobile-actions-menu {
     position: relative;
     display: inline-block;
-    margin-left: auto;
 }
 
 .memori-mobile-actions-trigger {
     display: inline-block;
 }
 
+.memori-dropdown__popup.memori-mobile-dropdown,
 .memori-mobile-dropdown {
-    position: absolute;
-    z-index: 1000;
-    top: 100%;
-    right: 0;
+    z-index: 1100;
     min-width: 200px;
-    border: 1px solid var(--artifact-drawer-border);
-    border-radius: var(--artifact-drawer-radius);
-    margin-top: var(--memori-spacing-sm);
-    backdrop-filter: blur(10px);
-    background: var(--artifact-drawer-bg);
-    box-shadow: var(--artifact-drawer-shadow);
-}
-
-/* Mobile-specific dropdown positioning */
-@media (max-width: 1260px) {
-    .memori-artifact-drawer--close {
-        margin-left: 0;
-    }
-
-    .memori-artifact-panel--header {
-        margin-bottom: var(--memori-spacing-sm);
-    }
-
-    .memori-mobile-dropdown {
-        right: 0;
-        left: auto;
-        min-width: 180px;
-        max-width: calc(100vw - 2rem);
-    }
-
-    .memori-mobile-dropdown-list {
-        padding: 0.25rem;
-        gap: var(--memori-spacing-xs);
-    }
-
-    .memori-mobile-dropdown .memori-artifact-action-btn {
-        min-height: 44px; /* Ensure touch-friendly size */
-        padding: 0.625rem 0.75rem;
-        font-size: var(--memori-text-size-small);
-    }
-
-    .memori-mobile-dropdown .memori-artifact-action-text {
-        color: var(--artifact-drawer-text);
-        font-size: 0.8125rem;
-        font-weight: var(--memori-text-weight-semibold);
-    }
-
-    .memori-mobile-dropdown .memori-artifact-action-icon {
-        width: 16px;
-        height: 16px;
-        flex-shrink: 0;
-    }
-}
-
-.memori-mobile-dropdown-list {
-    display: flex;
-    flex-direction: column;
-    padding: 0.5rem;
-    gap: var(--memori-spacing-xs);
+    max-width: min(280px, calc(100vw - 1.5rem));
+    padding: var(--memori-spacing-xs);
+    border: 1px solid var(--memori-border-color);
+    border-radius: var(--memori-radius-surface);
+    /* Soft contrast vs canvas — not pure white / not heavy fill */
+    background: color-mix(in srgb, var(--memori-text-color) 6%, var(--memori-secondary-background)) !important;
+    box-shadow: var(--memori-shadow-lg);
+    color: var(--memori-text-color);
 }
 
-.memori-mobile-dropdown .memori-artifact-action-btn {
+.memori-mobile-dropdown .memori-artifact-action-btn,
+.memori-mobile-dropdown .memori-dropdown__item,
+.memori-dropdown__popup.memori-mobile-dropdown .memori-dropdown__item {
     display: flex;
     width: 100%;
+    min-height: 40px;
     align-items: center;
     justify-content: flex-start;
-    padding: var(--memori-spacing-sm) var(--memori-spacing-md);
+    padding: 0.5rem 0.75rem;
     border: 1px solid transparent;
-    border-radius: var(--artifact-drawer-radius);
+    border-radius: var(--memori-radius-control);
     background: transparent;
-    color: var(--artifact-drawer-text);
+    color: var(--memori-text-color);
+    font-size: var(--memori-text-size-sm);
+    font-weight: var(--memori-text-weight-medium);
+    gap: var(--memori-spacing-sm);
     text-align: left;
-    transition: all 0.2s ease;
 }
 
-.memori-mobile-dropdown .memori-artifact-action-btn:hover {
-    border-color: var(--memori-primary);
-    background: var(--memori-primary-subtle);
-    color: var(--memori-primary);
+.memori-mobile-dropdown .memori-artifact-action-btn:hover,
+.memori-mobile-dropdown .memori-dropdown__item:hover:not([data-disabled]),
+.memori-dropdown__popup.memori-mobile-dropdown .memori-dropdown__item:hover:not([data-disabled]),
+.memori-dropdown__popup.memori-mobile-dropdown .memori-dropdown__item[data-highlighted]:not([data-disabled]) {
+    border-color: transparent;
+    background: color-mix(in srgb, var(--memori-text-color) 10%, transparent) !important;
+    color: var(--memori-text-color);
 }
 
-.memori-mobile-dropdown .memori-artifact-action-text {
-    overflow: visible;
-    margin-left: var(--memori-spacing-sm);
+.memori-mobile-dropdown .memori-artifact-action-icon,
+.memori-mobile-dropdown .memori-dropdown__item-icon,
+.memori-mobile-dropdown .memori-dropdown__item-icon svg {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
     color: inherit;
-    font-size: var(--memori-text-size-small);
-    font-weight: var(--memori-text-weight-medium);
-    white-space: nowrap;
+    fill: none !important;
+    stroke: currentColor;
 }
 
-/* Mobile Dropdown Animations */
-.memori-mobile-dropdown-enter {
-    transition: all 0.2s ease-out;
-}
-
-.memori-mobile-dropdown-enter-from {
-    opacity: 0;
-    transform: translateY(-10px) scale(0.95);
-}
-
-.memori-mobile-dropdown-enter-to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-}
-
-.memori-mobile-dropdown-leave {
-    transition: all 0.15s ease-in;
-}
-
-.memori-mobile-dropdown-leave-from {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-}
+@media (max-width: 1260px) {
+    .memori-artifact-panel--header {
+        margin-bottom: var(--memori-spacing-sm);
+    }
 
-.memori-mobile-dropdown-leave-to {
-    opacity: 0;
-    transform: translateY(-10px) scale(0.95);
+    .memori-dropdown__popup.memori-mobile-dropdown,
+    .memori-mobile-dropdown {
+        min-width: 180px;
+        max-width: calc(100vw - 1.5rem);
+    }
 }
 
 /* Focus and Accessibility */