@memori.ai/memori-react 8.43.0 → 8.45.0

package/dist/components/layouts/fullpage.css

@@ -1,522 +0,0 @@
-/* FullPage layout – spacing, typography and structure using global design tokens */
-
-.memori-widget.memori-layout-fullpage {
-    /* max-width: var(--memori-layout-max-width); */
-    /* min-height: 100vh;
-    min-height: 100dvh; */
-    padding: var(--memori-spacing-md);
-    margin-right: auto;
-    margin-left: auto;
-}
-
-.memori-widget.memori-layout-fullpage > .memori-spin,
-.memori-widget.memori-layout-fullpage > .memori-widget__surface > .memori-spin {
-    display: flex;
-    overflow: hidden;
-    height: 100%;
-    min-height: 0;
-    flex: 1 1 auto;
-    flex-direction: column;
-    gap: 0;
-}
-/* "Powered by" lives in the conversation footer under the chat input. */
-
-/* Header spacing + fullpage chrome (brand + actions bar) */
-.memori-widget.memori-layout-fullpage .memori-fullpage-top-header {
-    position: relative;
-    z-index: 6;
-    width: 100%;
-    flex-shrink: 0;
-    padding: 0;
-    padding-bottom: 0;
-    margin-bottom: var(--memori-spacing-sm);
-}
-
-.memori-widget.memori-layout-fullpage .memori-fullpage-header-row,
-.memori-widget.memori-layout-chat .memori-fullpage-header-row {
-    position: sticky;
-    z-index: 6;
-    top: 0;
-    display: flex;
-    width: 100%;
-    min-height: 48px;
-    flex-wrap: nowrap;
-    align-items: center;
-    justify-content: flex-end;
-    padding: var(--memori-spacing-md);
-    border-bottom: 1px solid var(--memori-border-color);
-    background: transparent;
-    gap: var(--memori-spacing-md);
-    transition: background-color var(--memori-motion-duration-fast, 0.15s) var(--memori-motion-ease, ease);
-}
-
-/* FULLPAGE header shares the same content axis as .memori--grid, so brand,
-   actions and the divider stay aligned with the card edges at any width. */
-.memori-widget.memori-layout-fullpage .memori-fullpage-header-row {
-    max-width: var(--memori-layout-max-width);
-    padding-right: var(--memori-spacing-md);
-    padding-left: var(--memori-spacing-md);
-    margin-right: auto;
-    margin-left: auto;
-}
-
-.memori-widget.memori-layout-fullpage .memori-fullpage-header-row.memori-header--scrolled,
-.memori-widget.memori-layout-chat .memori-fullpage-header-row.memori-header--scrolled,
-.memori-widget.memori-layout-fullpage .memori-chat-layout--header.memori-header--scrolled,
-.memori-widget.memori-layout-chat .memori-chat-layout--header.memori-header--scrolled,
-.memori-widget.memori-layout-fullpage .memori-fullpage-top-header.memori-header--scrolled {
-    background: var(--memori-secondary-background);
-}
-
-.memori-widget.memori-layout-fullpage .memori-chat-layout--header {
-    min-width: 100%;
-    flex-shrink: 0;
-    -webkit-backdrop-filter: none;
-    backdrop-filter: none;
-    background: transparent;
-}
-
-.memori-widget.memori-layout-fullpage .memori-chat-layout--controls .memori-chat--history {
-    min-height: 0;
-    flex: 1 1 auto;
-    border: none;
-    border-radius: var(--memori-radius-box);
-    margin-bottom: 0;
-    background-color: var(--memori-secondary-background);
-}
-
-.memori-widget.memori-layout-fullpage .memori-fullpage-header-brand,
-.memori-widget.memori-layout-chat .memori-fullpage-header-brand {
-    display: inline-flex;
-    overflow: hidden;
-    min-width: 0;
-    flex: 1 1 auto;
-    flex-wrap: nowrap;
-    align-items: center;
-    margin-right: auto;
-    gap: 0.625rem;
-    white-space: nowrap;
-}
-
-.memori-widget.memori-layout-fullpage .memori-fullpage-header-brand-text,
-.memori-widget.memori-layout-chat .memori-fullpage-header-brand-text {
-    display: flex;
-    overflow: hidden;
-    min-width: 0;
-    flex: 1 1 auto;
-    flex-direction: column;
-    gap: 0.125rem;
-}
-
-.memori-widget.memori-layout-fullpage .memori-fullpage-header-brand-icon,
-.memori-widget.memori-layout-chat .memori-fullpage-header-brand-icon {
-    display: block;
-    width: 30px;
-    height: 30px;
-    flex-shrink: 0;
-    border-radius: 50%;
-    background: var(--memori-primary);
-}
-
-.memori-widget.memori-layout-fullpage .memori-fullpage-header-brand-icon--avatar,
-.memori-widget.memori-layout-chat .memori-fullpage-header-brand-icon--avatar {
-    flex-shrink: 0;
-    border: 0;
-    background: none;
-    box-shadow: none;
-    object-fit: cover;
-}
-
-.memori-widget.memori-layout-fullpage .memori-fullpage-header-brand-name,
-.memori-widget.memori-layout-chat .memori-fullpage-header-brand-name {
-    display: block;
-    overflow: hidden;
-    min-width: 0;
-    max-width: 100%;
-    color: var(--memori-text-color, #1f2937);
-    font-size: 1.05rem;
-    font-weight: 700;
-    letter-spacing: -0.02em;
-    line-height: 1.2;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.memori-widget.memori-layout-fullpage .memori-fullpage-header-brand-role,
-.memori-widget.memori-layout-chat .memori-fullpage-header-brand-role {
-    display: block;
-    overflow: hidden;
-    min-width: 0;
-    max-width: 100%;
-    color: color-mix(in srgb, var(--memori-text-color) 72%, transparent);
-    font-size: var(--memori-text-size-sm, 0.8125rem);
-    font-weight: var(--memori-text-weight-normal, 400);
-    line-height: 1.3;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.memori-widget.memori-layout-fullpage .memori-fullpage-header-actions,
-.memori-widget.memori-layout-chat .memori-fullpage-header-actions {
-    display: flex;
-    min-width: 0;
-    flex: 0 0 auto;
-    align-items: center;
-    justify-content: flex-end;
-    margin-left: auto;
-}
-
-/* FullPage / Chat / Zoomed header controls: compact square actions + rounded login CTA */
-.memori-widget.memori-layout-fullpage .memori-header.memori-header--fullpage,
-.memori-widget.memori-layout-chat .memori-header.memori-header--fullpage {
-    width: auto;
-    min-width: 0;
-    flex-wrap: nowrap;
-    justify-content: flex-end;
-    margin-left: auto;
-    gap: 0.5rem;
-}
-
-.memori-widget.memori-layout-fullpage .memori-header--fullpage-primary,
-.memori-widget.memori-layout-fullpage .memori-header--fullpage-secondary,
-.memori-widget.memori-layout-chat .memori-header--fullpage-primary,
-.memori-widget.memori-layout-chat .memori-header--fullpage-secondary {
-    flex-wrap: nowrap;
-    gap: 0.5rem;
-}
-
-.memori-widget.memori-layout-fullpage .memori-header--fullpage-divider,
-.memori-widget.memori-layout-chat .memori-header--fullpage-divider {
-    min-height: 26px;
-    margin: 0;
-}
-
-/* CHAT: title block a sinistra, controlli allineati a destra. */
-.memori-widget.memori-layout-chat .memori-fullpage-header-row {
-    justify-content: flex-end;
-}
-
-.memori-widget.memori-layout-chat .memori-fullpage-header-brand {
-    margin-right: auto;
-}
-
-.memori-widget.memori-layout-chat .memori-fullpage-header-actions {
-    flex: 0 0 auto;
-}
-
-/* Full-height flex row: [grid] [artifact column] — outside the grid so artifact
-   spans the entire content height without inheriting grid padding/max-width */
-.memori-widget.memori-layout-fullpage .memori-fullpage-content-row {
-    display: flex;
-    overflow: hidden;
-    min-height: 0;
-    flex: 1 1 0%;
-    flex-direction: row;
-    align-items: stretch;
-}
-
-/* Grid holds avatar + chat as two separate panels: no outer frame, vertical breathing room. */
-.memori-widget.memori-layout-fullpage .memori--grid {
-    display: flex;
-    overflow: hidden;
-    width: 100%;
-    max-width: var(--memori-layout-max-width);
-    height: 100%;
-    min-height: 0;
-    flex: 1 1 0%;
-    align-items: stretch;
-    justify-content: center;
-    padding: var(--memori-spacing-md);
-    border: none;
-    margin: 0 auto;
-    background: var(--memori-secondary-background);
-    gap: var(--memori-spacing-md);
-}
-
-/* Avatar column: its own rounded panel, wider than the chat sidebar it replaced. */
-.memori-widget.memori-layout-fullpage .memori--grid-column-left {
-    position: relative;
-    display: flex;
-    overflow: hidden;
-    width: clamp(240px, 34%, 420px);
-    height: 100%;
-    min-height: 0;
-    flex-direction: column;
-    flex-shrink: 0;
-    align-items: stretch;
-    align-self: stretch;
-    border: none;
-    border-radius: 12px;
-    margin-right: 0;
-    background: color-mix(in srgb, var(--memori-text-color) 4%, var(--memori-secondary-background));
-}
-
-/* Agent status indicator above the avatar. */
-.memori-widget.memori-layout-fullpage .memori-fullpage-agent-status {
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    padding: var(--memori-spacing-sm) var(--memori-spacing-md);
-    color: color-mix(in srgb, var(--memori-text-color) 72%, transparent);
-    font-size: var(--memori-text-size-sm, 0.8125rem);
-    gap: var(--memori-spacing-xs);
-    line-height: 1.2;
-    text-align: center;
-}
-
-.memori-widget.memori-layout-fullpage .memori-fullpage-agent-status--dot {
-    display: inline-block;
-    width: 8px;
-    height: 8px;
-    flex-shrink: 0;
-    border-radius: 50%;
-    background: currentColor;
-}
-
-.memori-widget.memori-layout-fullpage .memori-fullpage-agent-status--dot-speaking {
-    background: var(--memori-primary);
-}
-
-.memori-widget.memori-layout-fullpage .memori-fullpage-agent-status--dot-processing {
-    background: color-mix(in srgb, var(--memori-text-color) 55%, transparent);
-}
-
-.memori-widget.memori-layout-fullpage .memori-fullpage-agent-status--dot-listening {
-    background: var(--memori-primary);
-}
-
-/* Cover banner is removed in FULLPAGE — it wastes the most valuable space. */
-.memori-widget.memori-layout-fullpage .memori-chat--cover {
-    display: none;
-}
-
-.memori-widget.memori-layout-fullpage .memori--grid-column-left .memori--avatar-wrapper {
-    position: relative;
-    display: flex;
-    width: 100%;
-    height: 100%;
-    min-height: 0;
-    flex: 1 1 0%;
-    align-items: stretch;
-    justify-content: center;
-    padding-top: 0;
-}
-
-.memori-widget.memori-layout-fullpage .memori--grid-column-left .memori--avatar-wrapper model-viewer,
-.memori-widget.memori-layout-fullpage .memori--grid-column-left .memori--avatar-wrapper canvas,
-.memori-widget.memori-layout-fullpage .memori--grid-column-left .memori--avatar-wrapper > div {
-    width: 100% !important;
-    max-width: 100%;
-    height: 100% !important;
-    max-height: 100%;
-}
-
-.memori-widget.memori-layout-fullpage .memori-chat-layout--main {
-    display: flex;
-    min-width: 0;
-    height: 100%;
-    min-height: 0;
-    flex: 1;
-    flex-direction: column;
-    align-items: stretch;
-    align-self: stretch;
-    justify-content: stretch;
-}
-
-/* Artifact column — flex sibling of .memori--grid inside .memori-fullpage-content-row.
-   Sits outside the padded grid so it spans the full content height with no padding gaps. */
-.memori-widget.memori-layout-fullpage .memori--grid-column-artifact {
-    overflow: hidden;
-    width: 0;
-    min-width: 0;
-    flex-shrink: 0;
-    transition: width 0.25s ease;
-}
-
-.memori-widget.memori-layout-fullpage .memori--grid-column-artifact--open {
-    width: 700px;
-    border-left: 1px solid color-mix(in srgb, var(--memori-text-color, #111827) 10%, transparent);
-    background: var(--memori-secondary-background);
-}
-
-/* Hide avatar column when artifact drawer is open.
-   Selector updated: artifact is now a sibling of .memori--grid, not inside it. */
-.memori-widget.memori-layout-fullpage
-    .memori-fullpage-content-row:has(.memori--grid-column-artifact--open)
-    .memori--grid-column-left {
-    display: none;
-}
-
-@media (max-width: 1260px) {
-    .memori-widget.memori-layout-fullpage .memori--grid-column-artifact {
-        display: none;
-    }
-}
-
-.memori-widget.memori-layout-fullpage .memori-chat-layout--controls {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    min-height: 0;
-    max-height: 100%;
-    flex: 1 1 0%;
-    flex-direction: column;
-    align-items: stretch;
-    padding: 0;
-    background: var(--memori-secondary-background);
-}
-
-.memori-widget.memori-layout-fullpage .memori-conversation-column {
-    display: flex;
-    width: 100%;
-    max-width: none;
-    min-height: 0;
-    flex: 1 1 0%;
-    flex-direction: column;
-    padding-inline: 0;
-}
-
-.memori-widget.memori-layout-fullpage .memori-chat-layout--controls .memori--start-panel,
-.memori-widget.memori-layout-fullpage .memori-chat-layout--controls .memori-chat--wrapper {
-    display: flex;
-    width: 100%;
-    max-width: 100%;
-    height: 100%;
-    min-height: 0;
-    flex: 1 1 0%;
-    flex-direction: column;
-    padding: 0 !important;
-    margin-right: 0;
-    margin-left: 0;
-}
-
-/* Typography: title and description in fullpage left column */
-.memori-widget.memori-layout-fullpage .memori--title {
-    margin-bottom: var(--memori-spacing-xs);
-    color: var(--memori-text-color);
-    font-size: var(--memori-text-size-heading-large);
-    font-weight: var(--memori-text-weight-semibold);
-    line-height: var(--memori-text-line-tight);
-}
-
-.memori-widget.memori-layout-fullpage .memori--description,
-.memori-widget.memori-layout-fullpage .memori--needsPosition {
-    padding: var(--memori-spacing-lg);
-    padding-top: var(--memori-spacing-xs);
-    color: var(--memori-text-color);
-    font-size: var(--memori-text-size-base);
-    line-height: var(--memori-text-line-relaxed);
-}
-
-/* Fullpage: Memori brand lives in the header; no footer watermark.
-   Input bar styles live in ChatInputs.css (layout-scoped dark pill). */
-
-/* Keep the input bar inside the chat panel, pinned to the bottom of the column */
-.memori-widget.memori-layout-fullpage .memori-chat-layout--controls .memori-chat--wrapper {
-    display: flex;
-    min-height: 0;
-    flex: 1 1 0%;
-    flex-direction: column;
-}
-
-.memori-widget.memori-layout-fullpage .memori-chat-layout--controls .memori-chat-inputs-wrapper {
-    width: 100%;
-    flex-shrink: 0;
-    border: none;
-    border-radius: 0;
-    background: var(--memori-secondary-background);
-}
-
-@media (max-width: 870px) {
-    .memori-widget.memori-layout-fullpage {
-        padding: var(--memori-spacing-sm);
-    }
-    /* 
-    .memori-widget.memori-layout-fullpage > .memori-spin {
-        height: calc(100vh - 100px);
-        height: calc(100dvh - 100px);
-        gap: var(--memori-spacing-md);
-    } */
-
-    .memori-widget.memori-layout-fullpage .memori-fullpage-top-header {
-        padding: 0;
-        margin-bottom: var(--memori-spacing-md);
-    }
-
-    .memori-widget.memori-layout-fullpage .memori--grid-column-left {
-        display: none;
-    }
-
-    .memori-widget.memori-layout-fullpage .memori--grid {
-        padding: var(--memori-spacing-sm);
-        gap: var(--memori-spacing-sm);
-    }
-
-    .memori-widget.memori-layout-fullpage .memori-chat-layout--controls {
-        padding: 0;
-    }
-}
-
-@media (max-width: 480px) {
-    .memori-widget.memori-layout-fullpage .memori-fullpage-top-header {
-        padding: 0;
-    }
-
-    .memori-widget.memori-layout-fullpage .memori-fullpage-header-brand-name {
-        font-size: 1.1rem;
-    }
-
-    .memori-widget.memori-layout-fullpage .memori-chat-layout--controls {
-        padding: 0;
-    }
-
-    .memori-widget.memori-layout-fullpage .memori--grid {
-        padding: var(--memori-spacing-xs) var(--memori-spacing-sm);
-    }
-
-    .memori-widget.memori-layout-fullpage .memori-fullpage-header-row,
-    .memori-widget.memori-layout-chat .memori-fullpage-header-row {
-        /* flex-wrap: wrap; */
-        align-items: flex-start;
-    }
-
-    .memori-widget.memori-layout-fullpage .memori-fullpage-header-brand,
-    .memori-widget.memori-layout-chat .memori-fullpage-header-brand {
-        min-width: 0;
-        max-width: calc(100% - 6.5rem);
-        flex: 1 1 auto;
-    }
-
-    .memori-widget.memori-layout-fullpage .memori-fullpage-header-actions {
-        flex: 0 0 auto;
-        justify-content: flex-end;
-    }
-
-    /* CHAT: keep agent title + toolbar on one row on small phones */
-    .memori-widget.memori-layout-chat .memori-fullpage-header-row {
-        flex-wrap: nowrap;
-        align-items: center;
-    }
-
-    .memori-widget.memori-layout-chat .memori-fullpage-header-actions {
-        min-width: 0;
-        flex: 1 1 auto;
-        flex-wrap: nowrap;
-        justify-content: flex-end;
-        -webkit-overflow-scrolling: touch;
-        overflow-x: auto;
-        overflow-y: hidden;
-    }
-
-    .memori-widget.memori-layout-chat .memori-fullpage-header-actions .memori-header.memori-header--fullpage {
-        min-width: max-content;
-        flex-shrink: 0;
-        flex-wrap: nowrap;
-    }
-
-    .memori-widget.memori-layout-chat .memori-fullpage-header-actions .memori-icon-button,
-    .memori-widget.memori-layout-chat .memori-fullpage-header-actions .memori-button {
-        flex-shrink: 0;
-    }
-}