#nomi-widget { --nomi-size: 72px; --nomi-light: #588dff; --nomi-blue: #2155f4; --nomi-dark: #08175c;
--nomi-float: -3px; --nomi-period: 5s;
--nomi-breath: 1.012; --nomi-breath-period: 6.5s; --nomi-hover-lift: -2px;
--nomi-offset: 24px;
position: fixed; right: max(var(--nomi-offset), env(safe-area-inset-right));
bottom: max(var(--nomi-offset), env(safe-area-inset-bottom));
width: var(--nomi-size); height: calc(var(--nomi-size) * 76 / 72);
z-index: 99999; isolation: isolate; direction: ltr;
font: 400 var(--nomi-size)/1 Arial, sans-serif;
}
#nomi-widget, #nomi-widget * { box-sizing: border-box; }
#nomi-widget [hidden] { display: none !important; }
#nomi-widget .nomi-chat {
--nomi-ink: #17223c; --nomi-muted: #66738b;
position: absolute; right: 0; bottom: calc(100% + 14px);
width: min(420px, calc(100vw - 32px)); height: min(590px, calc(100dvh - 128px)); min-height: 200px;
display: flex; flex-direction: column; overflow: hidden;
color: #fff; background: radial-gradient(ellipse at 85% 20%, #243c79 0%, transparent 60%), #111d3a;
border: 1px solid #ffffff24; border-radius: 30px;
box-shadow: 0 28px 90px -20px #0d1d5452, 0 3px 12px #0d1d5410;
font: 400 14px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; text-align: left;
transform-origin: calc(100% - 36px) calc(100% + 22px);
}
#nomi-widget .nomi-chat button { font-family: inherit; cursor: pointer; text-transform: none; letter-spacing: normal; box-shadow: none; }
#nomi-widget .nomi-chat button:focus-visible { outline: 2px solid #819fff; outline-offset: 3px; }
#nomi-widget .nomi-chat-header { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 17px 22px; flex-shrink: 0; }
#nomi-widget .nomi-brand { display: flex; align-items: center; gap: 10px; }
#nomi-widget .nomi-header-dock { display: none; width: 44px; height: 46px; }
#nomi-widget .nomi-chat h2 { font: 650 24px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; letter-spacing: -1px; margin: 0; color: #fff; }
#nomi-widget .nomi-chat h2 span { color: #8baaff; }
#nomi-widget .nomi-chat-header p { margin: 4px 0 0; font-size: 11px; color: #b5c3e1; }
#nomi-widget .nomi-close { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; padding: 0; border: 1px solid #ffffff1f; border-radius: 50%; background: #ffffff08; color: #c2cde6; font-size: 25px; line-height: 1; transition: background .2s; }
#nomi-widget .nomi-close:hover { background: #ffffff17; }
#nomi-widget .nomi-chat-content { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 24px 18px; scrollbar-width: thin; }
#nomi-widget .nomi-welcome { display: flex; flex-direction: column; align-items: center; text-align: center; }
#nomi-widget .nomi-home-dock { position: relative; width: 86px; height: 91px; flex-shrink: 0; margin: 10px 0 6px; }
#nomi-widget .nomi-welcome h3 { font: 500 39px/1.08 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #fff; margin: 8px 0 16px; letter-spacing: -1.5px; }
#nomi-widget .nomi-welcome h3 span { color: #9db9ff; }
#nomi-widget .nomi-welcome p { margin: 0; color: #bbc7e2; line-height: 1.65; font-size: 13px; }
#nomi-widget .nomi-compose { margin: 0 7px 7px; padding: 16px 15px 13px; flex-shrink: 0; border-radius: 23px; background: #fff; color: var(--nomi-ink); box-shadow: 0 -4px 30px #0d193322; }
#nomi-widget .nomi-advisor { padding: 1px 4px 15px; }
#nomi-widget .nomi-advisor p { margin: 0; font-size: 12px; line-height: 1.6; color: #66738b; }
#nomi-widget .nomi-advisor .nomi-advisor-title { margin-bottom: 5px; font-size: 14px; font-weight: 600; letter-spacing: -.15px; color: #17223c; }
#nomi-widget .nomi-input-row { display: flex; align-items: flex-end; gap: 8px; padding: 9px; border: 1px solid #e1e6f0; border-radius: 17px; background: #fff; transition: border-color .2s, box-shadow .2s; }
#nomi-widget .nomi-input-row:focus-within { border-color: #9caff1; box-shadow: 0 0 0 3px #2155f409; }
#nomi-widget textarea { display: block; flex: 1; min-width: 0; width: 100%; height: 44px; max-height: 100px; resize: none; border: 0; border-radius: 9px; box-shadow: none; background: transparent; color: var(--nomi-ink); padding: 11px 5px; font: 400 16px/22px -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
#nomi-widget textarea:focus-visible { outline: 1px solid #b9c7ef; outline-offset: -1px; }
#nomi-widget textarea::placeholder { color: #7b879d; opacity: 1; }
#nomi-widget .nomi-send { flex-shrink: 0; width: 44px; height: 44px; border: 0; border-radius: 13px; background: var(--nomi-blue); color: #fff; padding: 0; font-size: 25px; line-height: 1; transition: background .2s; }
#nomi-widget .nomi-send:disabled { background: #f0f3f9; color: #8b98b0; cursor: default; }
#nomi-widget .nomi-caption { margin: 10px 0 0; text-align: center; color: #7a859b; font-size: 11px; line-height: 1.4; }
#nomi-widget .nomi-history { display: flex; flex-direction: column; gap: 22px; }
#nomi-widget .nomi-entry { max-width: 96%; align-self: flex-start; margin: 0; padding: 0 2px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
#nomi-widget .nomi-author { display: block; margin-bottom: 7px; color: #52679f; font-size: 11px; font-weight: 600; }
#nomi-widget .nomi-entry-user { max-width: 88%; align-self: flex-end; padding: 11px 15px; background: #edf1ff; color: #233766; border-radius: 18px 18px 5px 18px; }
#nomi-widget .nomi-pending { padding: 0 24px; color: #66738b; font-size: 12px; flex-shrink: 0; }
#nomi-widget .nomi-pending:not(:empty) { padding-top: 8px; padding-bottom: 8px; }
#nomi-widget .nomi-chat.nomi-has-messages { background: #fff; color: var(--nomi-ink); border-color: #e4e9f4; }
#nomi-widget .nomi-has-messages .nomi-chat-header { background: #142241; }
#nomi-widget .nomi-has-messages .nomi-header-dock { display: block; }
#nomi-widget.nomi-compact .nomi-header-dock { display: block; }
#nomi-widget .nomi-has-messages .nomi-chat-content { padding-top: 22px; }
#nomi-widget .nomi-has-messages .nomi-compose { box-shadow: none; margin: 0; padding: 12px 16px 15px; border-radius: 0; }
#nomi-widget .nomi-chat.nomi-has-messages h2 { font-size: 20px; }
#nomi-widget.nomi-open::before { opacity: 0; animation: none; }
#nomi-widget .nomi-button { z-index: 2; transform-origin: center; transition: transform .6s cubic-bezier(.22,1,.36,1); }
#nomi-widget.nomi-open .nomi-button { transform: translate(var(--nomi-dock-x, 0px), var(--nomi-dock-y, 0px)) scale(var(--nomi-dock-scale, 1)); }
#nomi-widget.nomi-open .nomi-button:focus-visible { outline-color: #9db9ff; }
@media (max-width: 380px) {
#nomi-widget .nomi-chat-header { padding: 14px 16px; }
#nomi-widget .nomi-chat-content { padding-left: 16px; padding-right: 16px; }
#nomi-widget .nomi-welcome h3 { font-size: 33px; }
#nomi-widget .nomi-compose { padding: 12px 10px; }
}
@media (max-height: 620px) {
#nomi-widget .nomi-home-dock { width: 60px; height: 63px; margin: 0 0 4px; }
#nomi-widget .nomi-welcome h3 { font-size: 28px; margin: 4px 0 8px; }
#nomi-widget .nomi-welcome p { font-size: 12px; }
#nomi-widget .nomi-chat-header { padding-top: 10px; padding-bottom: 10px; }
}
@media (max-height: 460px) {
#nomi-widget .nomi-home-dock, #nomi-widget .nomi-welcome p,
#nomi-widget .nomi-advisor, #nomi-widget .nomi-caption { display: none; }
#nomi-widget .nomi-header-dock { display: block; }
#nomi-widget .nomi-welcome h3 { font-size: 23px; margin: 8px 0; }
#nomi-widget .nomi-compose { padding: 8px; }
#nomi-widget .nomi-chat-header { padding-top: 8px; padding-bottom: 8px; }
}
#nomi-widget .nomi-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#nomi-widget::before {
content: ''; position: absolute; left: 22%; bottom: 0; width: 56%; height: 7%;
border-radius: 50%; background: rgb(10 30 90 / .14); filter: blur(3px);
animation: nomi-shadow var(--nomi-period) ease-in-out infinite; pointer-events: none;
}
#nomi-widget .nomi-button {
all: unset; display: block; position: relative; width: 100%; height: 100%;
min-width: 44px; min-height: 44px; cursor: pointer; touch-action: manipulation;
border-radius: 18px; -webkit-tap-highlight-color: transparent;
z-index: 2; transform-origin: center; transition: transform .6s cubic-bezier(.22,1,.36,1);
}
#nomi-widget .nomi-button::before, #nomi-widget .nomi-button::after { content: none; }
#nomi-widget .nomi-button:focus-visible { outline: 3px solid var(--nomi-blue); outline-offset: 5px; }
#nomi-widget .nomi-character {
position: absolute; inset: 0; display: block;
animation: nomi-float var(--nomi-period) ease-in-out infinite;
filter: drop-shadow(0 3px 3px rgb(8 23 92 / .13)); transition: filter .25s ease;
}
#nomi-widget .nomi-shape { display: block; width: 100%; height: 100%; overflow: visible; }
#nomi-widget .nomi-pose, #nomi-widget .nomi-surface { position: absolute; inset: 0; display: block; transform-origin: 50% 65%; }
#nomi-widget .nomi-pose { transform: translateY(var(--nomi-lift, 0px)) rotate(var(--nomi-tilt, 0deg)); transition: transform .7s ease; }
#nomi-widget .nomi-surface { animation: nomi-breathe var(--nomi-breath-period) ease-in-out infinite; }
#nomi-widget.nomi-attentive .nomi-surface, #nomi-widget.nomi-gesturing .nomi-surface { animation: none; }
#nomi-widget.nomi-tapped .nomi-surface { animation: nomi-tap .36s ease-out; }
#nomi-widget.nomi-reply .nomi-surface { animation: nomi-reply .7s ease-in-out; }
#nomi-widget.nomi-reply .nomi-eye { animation: nomi-bright-eyes .7s ease-in-out; }
#nomi-widget.nomi-goodbye .nomi-surface { animation: nomi-goodbye .8s ease-in-out; }
#nomi-widget.nomi-waking .nomi-surface { animation: nomi-stretch .85s ease-in-out; }
#nomi-widget.nomi-waking .nomi-eye { animation: nomi-wake-eyes .85s ease-in-out; }
@keyframes nomi-reply { 40% { transform: translateY(-2px) scale(.99,1.025); } }
@keyframes nomi-bright-eyes { 40% { transform: scaleY(1.1); } }
@keyframes nomi-goodbye { 45% { transform: rotate(-3deg) translateY(1px); } }
@keyframes nomi-stretch { 45% { transform: scale(.985,1.035); } }
@keyframes nomi-wake-eyes { 0%, 100% { transform: scaleY(1); } 20%, 55% { transform: scaleY(.1); } 37%, 72% { transform: scaleY(1); } }
#nomi-widget.nomi-sleepy .nomi-eye { transform: scaleY(.55); transition: transform .8s ease; }
#nomi-widget .nomi-eye { transition: transform .2s ease; }
@keyframes nomi-breathe { 50% { transform: scale(var(--nomi-breath)); } }
@keyframes nomi-tap { 0%, 100% { transform: scale(1); } 28% { transform: scale(1.045,.94); } 65% { transform: scale(.99,1.02); } }
#nomi-widget .nomi-light { stop-color: var(--nomi-light); }
#nomi-widget .nomi-blue { stop-color: var(--nomi-blue); }
#nomi-widget .nomi-dark { stop-color: var(--nomi-dark); }
#nomi-widget .nomi-eyes { position: absolute; left: 30.5%; top: 36%; display: flex; gap: .15em; }
#nomi-widget .nomi-eye {
position: relative; display: block; width: .125em; height: .18em;
background: #fff; border-radius: 50%; overflow: hidden;
transform-origin: center; transition: transform .3s ease-in-out;
}
#nomi-widget .nomi-pupil {
display: block; position: absolute; left: .035em; top: .05em;
width: .055em; height: .08em; border-radius: 50%; background: #0a206f;
transform: translate(var(--nomi-x, 0px), var(--nomi-y, 0px));
transition: transform 220ms ease-out;
}
#nomi-widget.nomi-blinking .nomi-eye { transform: scaleY(.08); transition-duration: 80ms; }
#nomi-widget .nomi-message {
position: absolute; right: 8px; bottom: calc(100% + 10px); width: max-content;
max-width: min(240px, calc(100vw - 64px)); padding: 12px 16px;
font: 400 13px/1.5 Arial, sans-serif; text-align: center; color: #202743;
background: #fff; border: 1px solid #edf0fa; border-radius: 15px 15px 5px 15px;
box-shadow: 0 5px 22px rgb(20 36 90 / .10); pointer-events: none;
opacity: 0; visibility: hidden; transform: translateY(5px);
transition: opacity .3s ease, transform .3s ease, visibility .3s;
}
#nomi-widget .nomi-message::after {
content: ''; position: absolute; right: 22px; bottom: -5px; width: 8px; height: 8px;
background: #fff; border-right: 1px solid #edf0fa; border-bottom: 1px solid #edf0fa;
transform: rotate(45deg);
}
#nomi-widget .nomi-message.nomi-visible { opacity: 1; visibility: visible; transform: translateY(0); }
#nomi-widget.nomi-paused *, #nomi-widget.nomi-paused::before { animation-play-state: paused; }
@keyframes nomi-float { 50% { transform: translateY(var(--nomi-float)); } }
@keyframes nomi-shadow { 50% { transform: scale(.88); opacity: .65; } }
@media (hover: hover) { #nomi-widget .nomi-button:hover .nomi-character { filter: brightness(1.06) drop-shadow(0 3px 3px rgb(8 23 92 / .13)); } }
@media (max-width: 767px) { #nomi-widget { --nomi-offset: 16px; } }
@media (prefers-reduced-motion: reduce) {
#nomi-widget *, #nomi-widget::before { animation: none !important; transition: none !important; }
#nomi-widget .nomi-pose, #nomi-widget .nomi-surface, #nomi-widget .nomi-eye { transform: none !important; }
}
#nomi-widget .nomi-reset { display:block; margin:6px auto 0; border:0; background:transparent; color:#536584; padding:4px; font-size:11px; }
#nomi-widget .nomi-sources { margin-top:8px; font-size:12px; }
#nomi-widget .nomi-sources a { display:block; color:#254bc1; overflow-wrap:anywhere; }
#nomi-widget .nomi-products { margin-top:16px; white-space:normal; }
#nomi-widget .nomi-products-title { margin:0 0 8px; font-size:12px; color:#52679f; font-weight:600; }
#nomi-widget .nomi-product { display:flex; gap:12px; align-items:center; margin:8px 0; padding:12px; border:1px solid #e3e9f5; border-radius:16px; background:#f8faff; color:#17223c; text-decoration:none; }
#nomi-widget .nomi-product:hover { border-color:#8baaff; background:#f0f4ff; }
#nomi-widget .nomi-product:focus-visible { outline:2px solid #2155f4; outline-offset:2px; }
#nomi-widget .nomi-product img { width:72px; height:72px; object-fit:contain; background:white; border-radius:10px; flex-shrink:0; }
#nomi-widget .nomi-product-info { display:flex; flex-direction:column; min-width:0; gap:3px; line-height:1.4; }
#nomi-widget .nomi-product-info strong { font-size:13px; }
#nomi-widget .nomi-product-price { font-size:13px; font-weight:600; }
#nomi-widget .nomi-product-stock, #nomi-widget .nomi-products-note { font-size:10px; color:#66738b; }
#nomi-widget .nomi-product-action { font-size:11px; color:#254bc1; margin-top:4px; }
#nomi-widget .nomi-products-note { margin:6px 0; line-height:1.4; }