@memori.ai/memori-react 8.15.0 → 8.16.0

package/src/components/layouts/website-assistant.css

@@ -1,36 +1,69 @@
+/* ============================================
+   MOBILE-FIRST WEBSITE ASSISTANT LAYOUT
+   Enhanced UI/UX with modern design patterns
+   ============================================ */
+
+/* ============================================
+   TRIGGER BUTTON (Mobile First)
+   ============================================ */
+
 .memori-website_assistant--trigger {
     position: fixed;
-    right: 0.5em;
-    bottom: 0.5em;
+    z-index: 10000;
+    right: 0px;
+    bottom: 0px;
     display: flex;
+    opacity: 1;
+    pointer-events: all;
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    visibility: visible;
 }
 
-.memori-website_assistant--trigger-button {
-    position: relative;
-    width: 120px;
-    height: 120px;
-    padding: 1em;
-    cursor: pointer;
+.memori-website_assistant--trigger-button .memori-blob .mainDiv {
+    width: 64px !important;
+    height: 64px !important;
+    box-shadow: 0 0 0.5em 0.2em rgba(0, 0, 0, 0.15) inset, 0 0 0.15em 0 rgba(255, 255, 255, 0.9),
+        0 2px 8px rgba(130, 70, 175, 0.2);
+    transition: all 0.3s ease;
 }
 
-@media (max-width: 600px) {
-    .memori-website_assistant--trigger-button {
-        width: 80px;
-        height: 80px;
-        padding: 1em;
-    }
+.memori-website_assistant--trigger-button .memori-blob,
+.memori-website_assistant--trigger-button .memori-blob .mainDiv,
+.memori-website_assistant--trigger-button .memori-blob figure {
+    pointer-events: none;
+    touch-action: none;
 }
 
-.memori-website_assistant--close-button-wrapper {
-    position: absolute;
-    z-index: 1;
-    top: 100%;
-    right: 0;
+.memori-website_assistant--trigger-button:hover .memori-blob .mainDiv {
+    box-shadow: 0 0 0.6em 0.25em rgba(0, 0, 0, 0.1) inset, 0 0 0.2em 0 rgba(255, 255, 255, 0.95),
+        0 4px 16px rgba(130, 70, 175, 0.3);
 }
 
-.memori-website_assistant--close-button-wrapper button.memori-website_assistant--close-button {
-    padding: 1rem;
-    font-size: 16px;
+.memori-website_assistant--trigger:hover {
+    transform: scale(1.05);
+}
+
+.memori-website_assistant--trigger:active {
+    transform: scale(0.95);
+}
+
+.memori-website_assistant--trigger-button {
+    position: relative;
+    width: 64px;
+    height: 64px;
+    padding: 0;
+    border: none !important;
+    border-radius: 50%;
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    background: transparent !important;
+    box-shadow: none !important;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.memori-website_assistant--trigger-button:active {
+    transform: translateY(0) scale(0.95);
 }
 
 .memori-website_assistant--trigger-button .memori-blob {
@@ -41,82 +74,75 @@
     width: 100%;
     height: 100%;
     margin: 0;
+    transform: translate(-25%, -25%);
 }
 
-.memori-website_assistant--trigger-button .memori-blob .mainDiv {
-    width: 120px !important;
-    height: 120px !important;
-    box-shadow: 0 0 0.5em 0.2em rgba(0, 0, 0, 0.85) inset, 0 0 0.15em 0 rgba(255, 255, 255, 0.85);
-}
-
-.memori-website_assistant--trigger-button .memori-blob,
-.memori-website_assistant--trigger-button .memori-blob .mainDiv,
 .memori-website_assistant--trigger-button .memori-blob figure {
-    pointer-events: none;
-    touch-action: none;
+    width: 85%;
+    border-radius: 0;
+    opacity: 1;
+    transition: transform 0.3s ease;
 }
 
-@media (max-width: 768px) {
-    .memori-website_assistant--trigger-button .memori-blob {
-        min-height: 0;
-    }
-
-    .memori-website_assistant--trigger-button .memori-blob figure {
-        position: absolute;
-        transform: translate(-50%, -50%);
-    }
-
-    .memori-website_assistant--trigger-button .memori-blob .mainDiv:nth-of-type(1) {
-        --memori-blob-x: -53%;
-        --memori-blob-y: -53%;
-        --memori-blob-t: 37;
-    }
-
-    .memori-website_assistant--trigger-button .memori-blob .mainDiv:nth-of-type(2) {
-        --memori-blob-x: -47%;
-        --memori-blob-y: -52%;
-        --memori-blob-t: 58;
-    }
-
-    .memori-website_assistant--trigger-button .memori-blob .mainDiv:nth-of-type(3) {
-        --memori-blob-x: -45%;
-        --memori-blob-y: -50%;
-        --memori-blob-t: 46;
+/* Tablet and up */
+@media (min-width: 601px) {
+    .memori-website_assistant--trigger-button {
+        width: 80px;
+        height: 80px;
     }
 
-    .memori-website_assistant--trigger-button .memori-blob .mainDiv:nth-of-type(4) {
-        --memori-blob-x: -53%;
-        --memori-blob-y: -45%;
-        --memori-blob-t: 72;
+    .memori-website_assistant--trigger-button .memori-blob .mainDiv {
+        width: 80px !important;
+        height: 80px !important;
     }
+}
 
-    .memori-website_assistant--trigger-button .memori-blob .mainDiv:nth-of-type(5) {
-        --memori-blob-x: -55%;
-        --memori-blob-y: -45%;
-        --memori-blob-t: 62;
+/* Desktop */
+@media (min-width: 1024px) {
+    .memori-website_assistant--trigger-button {
+        width: 96px;
+        height: 96px;
     }
-}
 
-@media (max-width: 600px) {
     .memori-website_assistant--trigger-button .memori-blob .mainDiv {
-        width: 80px !important;
-        height: 80px !important;
+        width: 96px !important;
+        height: 96px !important;
     }
 }
 
-.memori-website_assistant--trigger-button .memori-blob figure {
-    width: 85%;
-    border-radius: 0;
-    opacity: 1;
+/* ============================================
+   CLOSE BUTTON
+   ============================================ */
+
+.memori-website_assistant--close-button-wrapper {
+    position: absolute;
+    z-index: 1001;
+    top: 0.75rem;
+    left: 0.75rem;
+    transition: transform 0.2s ease;
 }
 
-.memori-website_assistant-layout .memori--powered-by {
-    top: calc(100% + 10px);
-    right: auto;
-    left: 0;
-    background-color: transparent !important;
+.memori-website_assistant--close-button-wrapper:hover {
+    transform: scale(1.1);
 }
 
+.memori-website_assistant--close-button-wrapper button.memori-website_assistant--close-button {
+    width: 44px;
+    height: 44px;
+    padding: 0.75rem;
+    border: 2px solid rgba(130, 70, 175, 0.1);
+    border-radius: 50%;
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
+    font-size: 18px;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* ============================================
+   MAIN CONTAINER (Mobile First)
+   ============================================ */
+
 .memori-widget.memori-layout-website_assistant {
     position: relative;
     z-index: 10;
@@ -128,60 +154,160 @@
     position: fixed;
     right: 0;
     bottom: 0;
-    width: 30vw !important;
-    min-width: 320px !important;
+    overflow: hidden;
+    width: 100vw;
     max-width: 100vw;
-    height: 100% !important;
-    max-height: 0;
-    transition: all 0.3s ease-in-out;
+    border-radius: 24px 24px 0 0;
+    -webkit-backdrop-filter: blur(20px);
+    backdrop-filter: blur(20px);
+    background: rgba(255, 255, 255, 0.98);
+    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12), 0 -2px 8px rgba(0, 0, 0, 0.08);
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.memori-widget.memori-layout-website_assistant .memori-website_assistant--collapsed {
+    overflow: visible;
+    height: 0;
+    opacity: 0;
+    pointer-events: none;
+}
+
+/* Ensure trigger button is always visible even when container is collapsed */
+.memori-widget.memori-layout-website_assistant .memori-website_assistant--collapsed .memori-website_assistant--trigger {
+    opacity: 1;
+    pointer-events: all;
+    visibility: visible;
 }
 
 .memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded {
-    max-height: 60vh !important;
-    margin-bottom: 60px;
+    height: min(85vh, calc(100vh - 80px));
+    padding: 0.5rem 0rem;
+    margin-bottom: 0;
+    opacity: 1;
+    pointer-events: all;
+}
+
+/* Tablet */
+@media (min-width: 601px) {
+    .memori-widget.memori-layout-website_assistant .memori-website_assistant--collapsed,
+    .memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded {
+        right: 0;
+        width: 90vw;
+        max-width: 480px;
+        border-radius: 24px 0 0 0;
+    }
+
+    .memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded {
+        height: min(75vh, calc(100vh - 80px));
+    }
+}
+
+/* Desktop */
+@media (min-width: 1024px) {
+    .memori-widget.memori-layout-website_assistant .memori-website_assistant--collapsed,
+    .memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded {
+        width: 30vw;
+        min-width: 400px;
+        max-width: 480px;
+        border-radius: 24px 0 0 0;
+    }
+
+    .memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded {
+        height: 100vh;
+        border-radius: 0;
+        margin-bottom: 0;
+    }
 }
 
+/* ============================================
+   ANIMATIONS
+   ============================================ */
+
 @keyframes showup {
     0% {
         opacity: 0;
-        transform: translateY(100%);
+        transform: translateY(20px) scale(0.95);
     }
-
     100% {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+@keyframes slideUp {
+    from {
+        opacity: 0;
+        transform: translateY(100%);
+    }
+    to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 .memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded .memori-website_assistant-layout {
-    animation: showup 0.3s ease-in-out;
+    animation: showup 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
+/* ============================================
+   LAYOUT STRUCTURE
+   ============================================ */
 
-@media (max-width: 600px) {
-    .memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded {
-        min-width: 100% !important;
-    }
+.memori-widget .memori-spin.memori-website_assistant-layout {
+    position: relative;
+    display: flex;
+    height: 100%;
+    flex-direction: column;
 }
 
 .memori-widget.memori-layout-website_assistant .memori--global-background {
     background: none;
 }
 
-.memori-widget .memori-spin.memori-website_assistant-layout {
-    display: flex;
-    height: 100%;
-    flex-direction: column;
+.memori-website_assistant-layout .memori--powered-by {
+    right: auto;
+    left: 0.75rem;
+    background-color: transparent !important;
+    font-size: 0.75rem;
+    opacity: 0.7;
 }
 
+/* ============================================
+   HEADER
+   ============================================ */
+
 .memori-website_assistant-layout--header {
     position: absolute;
     z-index: 1000;
-    top: 0;
-    right: 0;
+    top: 0.75rem;
+    right: 0.75rem;
+    padding: 0.5rem;
+    border-radius: 12px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
     text-align: right;
 }
 
+.memori-website_assistant-layout--header-hidden {
+    display: none;
+}
+
+.memori-website_assistant-layout .memori-header {
+    position: relative;
+    z-index: 1000;
+    display: inline-flex;
+    width: auto;
+    height: auto;
+    flex-direction: column;
+    padding: 0.5rem;
+    gap: 0.5rem;
+}
+
+.memori-website_assistant-layout .memori-header .memori-share-button,
+.memori-website_assistant-layout .memori-header .memori-header--button + .memori-header--button {
+    margin-top: 0;
+    margin-left: 0;
+}
+
 .memori-widget.memori-layout-website_assistant .memori-share-button .memori-share-button--overlay {
     z-index: 1000;
     top: -6rem;
@@ -191,7 +317,15 @@
     display: none;
 }
 
+/* ============================================
+   AVATAR SECTION
+   ============================================ */
+
 .memori-website_assistant-layout--avatar {
+    position: relative;
+    overflow: hidden;
+    min-height: 0;
+    max-height: 35%;
     flex: 1;
 }
 
@@ -209,53 +343,74 @@
     display: block;
 }
 
-@media (max-width: 480px) {
-    .memori-website_assistant-layout--avatar .memori--blob-container {
-        display: block;
-    }
+.memori-website_assistant-layout--avatar .memori-blob {
+    z-index: 2;
 }
 
-@media (max-width: 870px) {
-    .memori-website_assistant-layout--avatar .memori--blob-container {
-        display: block;
-    }
+.memori-website_assistant-layout--avatar .memori--avatar-wrapper .avatar-loader {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    transform: none !important;
 }
 
-.memori-website_assistant-layout .memori-header {
-    position: relative;
-    z-index: 1000;
-    display: inline-flex;
-    width: auto;
-    height: auto;
-    flex-direction: column;
+.memori-layout-website_assistant .memori--avatar-wrapper > div {
+    overflow: visible !important;
+    width: auto !important;
+    height: 100%;
+    border-radius: 0;
 }
 
-.memori-website_assistant-layout .memori-header .memori-share-button,
-.memori-website_assistant-layout .memori-header .memori-header--button+.memori-header--button {
-    margin-top: 0.25rem;
-    margin-left: 0;
+.memori-layout-website_assistant .memori--avatar-wrapper > div canvas + div {
+    position: absolute !important;
+    width: 100%;
+    height: 100%;
+    transform: none !important;
 }
 
-.memori-website_assistant-layout .memori-chat--cover {
-    display: none;
+.memori-layout-website_assistant.memori--avatar-readyplayerme-full .memori--avatar-wrapper > div {
+    transform: scale(1.7) translate(0px, 10vh);
 }
 
-.memori-website_assistant-layout .memori--cover {
-    padding: 0;
-    background: none;
+.memori-website_assistant-layout--avatar .memori--avatar-wrapper canvas {
+    width: auto !important;
+    max-width: 100%;
+    height: 100%;
+    object-fit: contain;
 }
 
-.memori-website_assistant-layout .memori-chat--bubble-initial+.memori-chat--bubble-container {
-    margin-top: auto;
+.memori-website_assistant-layout--avatar .memori--avatar-wrapper .avatar-loader figure {
+    text-align: center;
+}
+
+.memori-layout-website_assistant.memori--avatar-readyplayerme
+    .memori-website_assistant--trigger-button
+    .memori-blob
+    figure {
+    width: 100%;
 }
 
+.memori-website_assistant-layout--avatar .memori--avatar-wrapper .avatar-loader .memori-spin--spinner {
+    background: none;
+}
+
+/* ============================================
+   CONTROLS SECTION
+   ============================================ */
+
 .memori-website_assistant-layout--controls {
     position: relative;
     z-index: 5;
     display: flex;
-    height: calc(100% - 60px);
+    min-height: 0;
+    flex: 1;
     flex-direction: column;
-    justify-content: flex-end;
+    padding: 1rem;
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    background: linear-gradient(to top, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 50%, transparent 100%);
 }
 
 .memori-website_assistant-layout--controls .memori-chat--history,
@@ -274,6 +429,10 @@
     padding: 0;
 }
 
+.memori-website_assistant-layout--controls .memori-chat--bubble-initial + .memori-chat--bubble-container {
+    margin-top: auto;
+}
+
 .memori-website_assistant-layout--controls .memori-chat--content .memori-chat--bubble-container:first-of-type {
     margin-top: auto;
 }
@@ -281,41 +440,85 @@
 .memori-website_assistant-layout--controls .memori--start-panel,
 .memori-website_assistant-layout--controls .memori-chat--wrapper {
     width: 100%;
-    max-width: 800px;
-    padding: 1rem;
+    max-width: 100%;
+    padding: 0;
     margin: 0 auto;
 }
 
 .memori-website_assistant-layout--controls .memori-chat--wrapper {
-    height: calc(100% - 1rem);
+    display: flex;
+    min-height: 0;
+    flex: 1;
+    flex-direction: column;
+    padding: 0.75rem;
 }
 
 .memori-website_assistant-layout--controls .memori--start-panel {
-    margin: 1rem;
+    padding: 1rem;
+    border-radius: 16px;
+    margin: 0.75rem;
 }
 
-@media (max-width: 870px) {
-
+/* Tablet and up */
+@media (min-width: 601px) {
     .memori-website_assistant-layout--controls .memori--start-panel,
     .memori-website_assistant-layout--controls .memori-chat--wrapper {
-        width: 100%;
+        max-width: 100%;
     }
 
     .memori-website_assistant-layout--controls .memori-chat--wrapper {
-        padding: 0;
+        padding: 1rem;
     }
-}
 
-@media (max-width: 480px) {
-    .memori-website_assistant-layout .memori-send-on-enter-menu {
-        display: none;
+    .memori-website_assistant-layout--controls .memori--start-panel {
+        padding: 1.5rem;
+        margin: 1rem;
     }
+}
 
-    .memori-website_assistant-layout .memori-header--button-settings {
-        display: none;
+/* Desktop */
+@media (min-width: 1024px) {
+    .memori-website_assistant-layout--controls .memori--start-panel,
+    .memori-website_assistant-layout--controls .memori-chat--wrapper {
+        max-width: 800px;
     }
 }
 
+/* ============================================
+   CHAT STYLING
+   ============================================ */
+
+.memori-website_assistant-layout .memori-chat--cover {
+    display: none;
+}
+
+.memori-website_assistant-layout .memori--cover {
+    padding: 0;
+    background: none;
+}
+
+.memori-website_assistant-layout .memori-chat--bubble,
+.memori-website_assistant-layout .memori-chat--bubble.memori-chat--user-bubble {
+    animation: showup 0.3s ease-out;
+    opacity: 1;
+    transition: all 0.2s ease-in-out;
+}
+
+.memori-website_assistant-layout .memori-chat--bubble:hover,
+.memori-website_assistant-layout .memori-chat--bubble.memori-chat--user-bubble:hover {
+    opacity: 1;
+    transform: translateY(-1px);
+}
+
+.memori-website_assistant-layout .memori-chat--bubble p,
+.memori-website_assistant-layout .memori-chat--bubble.memori-chat--user-bubble p {
+    opacity: 1;
+}
+
+/* ============================================
+   OTHER ELEMENTS
+   ============================================ */
+
 .memori-website_assistant-layout .memori--avatar-toggle {
     display: none;
     width: 100%;
@@ -332,76 +535,81 @@
     background: none;
 }
 
-.memori-website_assistant-layout--avatar .memori-blob {
-    z-index: 2;
+.memori-website_assistant-layout .memori--description-text,
+.memori-website_assistant-layout .memori--translation-toggle {
+    display: none;
 }
 
-.memori-website_assistant-layout--avatar .memori--avatar-wrapper .avatar-loader {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    align-items: center;
-    justify-content: center;
-    transform: none !important;
-}
+/* ============================================
+   RESPONSIVE ADJUSTMENTS
+   ============================================ */
 
-.memori-layout-website_assistant .memori--avatar-wrapper>div {
-    overflow: visible !important;
-    /* width: 100% !important;
-    height: 100% !important; */
-    width: auto !important;
-    height: 90% !important;
-    max-height: 90%;
-    border-radius: 0;
-}
+@media (max-width: 480px) {
+    .memori-website_assistant-layout .memori-send-on-enter-menu {
+        display: none;
+    }
 
-.memori-layout-website_assistant .memori--avatar-wrapper>div canvas+div {
-    position: absolute !important;
-    width: 100%;
-    height: 100%;
-    transform: none !important;
-}
+    .memori-website_assistant-layout .memori-header--button-settings {
+        display: none;
+    }
 
-.memori-layout-website_assistant.memori--avatar-readyplayerme-full .memori--avatar-wrapper>div {
-    transform: scale(1.7) translate(0px, 10vh);
-}
+    .memori-website_assistant-layout--controls {
+        padding: 0.75rem;
+    }
 
-.memori-website_assistant-layout--avatar .memori--avatar-wrapper canvas {
-    width: auto !important;
-    max-width: 100%;
-    height: 100% !important;
-    max-height: 100%;
-}
+    .memori-website_assistant-layout--controls .memori-chat--wrapper {
+        padding: 0.5rem;
+    }
 
-.memori-website_assistant-layout--avatar .memori--avatar-wrapper .avatar-loader figure {
-    text-align: center;
+    .memori-website_assistant-layout--controls .memori--start-panel {
+        padding: 1rem;
+        margin: 0.5rem;
+    }
 }
 
-.memori-layout-website_assistant.memori--avatar-readyplayerme .memori-website_assistant--trigger-button .memori-blob figure {
-    width: 100%;
-}
+@media (max-width: 768px) {
+    .memori-website_assistant--trigger-button .memori-blob {
+        transform: translate(-50%, -40%);
+    }
 
-.memori-website_assistant-layout--avatar .memori--avatar-wrapper .avatar-loader .memori-spin--spinner {
-    background: none;
+    .memori-website_assistant--trigger-button {
+        width: 80px !important;
+        height: 80px !important;
+    }
 }
 
-.memori-website_assistant-layout .memori--description-text,
-.memori-website_assistant-layout .memori--translation-toggle {
-    display: none;
+/* ============================================
+   ACCESSIBILITY & PERFORMANCE
+   ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+    .memori-website_assistant--trigger,
+    .memori-website_assistant--trigger-button,
+    .memori-website_assistant--close-button-wrapper,
+    .memori-widget.memori-layout-website_assistant .memori-website_assistant--collapsed,
+    .memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded,
+    .memori-widget.memori-layout-website_assistant .memori-website_assistant--expanded .memori-website_assistant-layout,
+    .memori-website_assistant-layout .memori-chat--bubble {
+        animation: none !important;
+        transition: none !important;
+    }
 }
 
-.memori-website_assistant-layout .memori-chat--bubble,
-.memori-website_assistant-layout .memori-chat--bubble.memori-chat--user-bubble {
-    opacity: 1;
-    transition: opacity 0.2s ease-in-out;
-}
+/* Touch device optimizations */
+@media (hover: none) and (pointer: coarse) {
+    .memori-website_assistant--trigger-button {
+        width: 80px;
+        height: 80px;
+    }
 
-.memori-website_assistant-layout .memori-chat--bubble p,
-.memori-website_assistant-layout .memori-chat--bubble.memori-chat--user-bubble p {
-    opacity: 1;
-}
+    .memori-website_assistant--trigger-button .memori-blob .mainDiv {
+        width: 72px !important;
+        height: 72px !important;
+    }
 
-.memori-website_assistant-layout .memori-chat--bubble:hover,
-.memori-website_assistant-layout .memori-chat--bubble.memori-chat--user-bubble:hover {
-    opacity: 1;
+    .memori-website_assistant--close-button-wrapper button.memori-website_assistant--close-button {
+        width: 48px;
+        height: 48px;
+        padding: 0.875rem;
+    }
 }