/* generated by scripts/css-min.php from ../widget.css — edit the source, never this file */
.sa-launcher { position: fixed; right: var(--vonnik-space-6); bottom: calc(var(--vonnik-space-6) + max(var(--sa-dock, 0px), var(--sa-lift, 0px))); z-index: var(--vonnik-layer-sheet); display: flex; align-items: center; justify-content: center; width: var(--vonnik-control-height-touch); height: var(--vonnik-control-height-touch); padding: 0; border: 0; border-radius: var(--vonnik-radius-round); background: var(--vonnik-navy); color: var(--vonnik-on-action); cursor: pointer; box-shadow: 0 0 0 var(--vonnik-border-select) var(--vonnik-surface), 0 6px 20px rgba(0, 10, 60, .25); } .sa-launcher span { display: flex; } .sa-launcher svg { display: block; width: var(--vonnik-space-7); height: var(--vonnik-space-7); } .sa-launcher:hover { background: var(--vonnik-blue); } .sa-launcher[hidden] { display: none; } .sa-panel { position: fixed; left: auto; top: auto; right: var(--vonnik-space-6); bottom: calc(var(--vonnik-space-6) + max(var(--sa-dock, 0px), var(--sa-lift, 0px))); z-index: 9001; width: 400px; max-width: calc(100vw - var(--vonnik-space-9)); height: 640px; max-height: calc(100vh - var(--vonnik-space-9) - var(--sa-dock, 0px)); display: flex; flex-direction: column; color: var(--vonnik-navy); font-family: inherit; } .sa-panel[hidden] { display: none; } .sa-head { display: flex; align-items: center; gap: var(--vonnik-space-3); padding: var(--vonnik-space-4) var(--vonnik-space-5); background: var(--vonnik-navy); color: var(--vonnik-on-action); } .sa-panel .sa-head__title { font-size: var(--vonnik-text-l); font-weight: var(--vonnik-weight-black); text-transform: uppercase; letter-spacing: var(--vonnik-tracking-text); margin: 0; color: var(--vonnik-on-action); } .sa-head__spacer { flex: 1 1 auto; } .sa-close { border: 0; background: transparent; color: var(--vonnik-on-action); min-width: var(--vonnik-control-tap); min-height: var(--vonnik-control-tap); cursor: pointer; font-size: var(--vonnik-text-xxl); line-height: 1; } .sa-log { flex: 1 1 auto; overflow-y: auto; padding: var(--vonnik-space-5); display: flex; flex-direction: column; gap: var(--vonnik-stack-m); scroll-behavior: smooth; } .sa-msg { max-width: 88%; padding: var(--vonnik-space-3) var(--vonnik-space-4); font-size: var(--vonnik-text-m); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; } .sa-msg--user { align-self: flex-end; background: var(--vonnik-blue); color: var(--vonnik-on-action); } .sa-msg--bot { align-self: flex-start; background: var(--vonnik-grey-card); } .sa-msg--bot small { display: block; margin-top: var(--vonnik-space-3); font-size: var(--vonnik-text-xs); color: var(--vonnik-ink-soft); } .sa-msg ul { margin: var(--vonnik-space-2) 0 0 var(--vonnik-space-5); padding: 0; } .sa-cards { display: flex; flex-direction: column; gap: var(--vonnik-space-3); max-width: 88%; } .sa-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--vonnik-stack-s); font-size: var(--vonnik-text-s); } .sa-card > .sa-btn, .sa-card > p:has(> .sa-btn) { margin-top: var(--vonnik-space-1); } .vonnik-card.sa-card p + p { margin-top: 0; } .sa-card__title { font-weight: var(--vonnik-weight-black); text-transform: uppercase; font-size: var(--vonnik-text-s); } .sa-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--vonnik-grey-card); } .sa-card form { display: grid; gap: var(--vonnik-space-2); width: 100%; } .sa-card form[hidden], .sa-card [hidden] { display: none; } .sa-card input, .sa-card textarea, .sa-card select { width: 100%; } .sa-card .sa-ok { color: #0b7a3e; font-weight: var(--vonnik-weight-bold); } .sa-chips { display: flex; flex-wrap: wrap; gap: var(--vonnik-space-2); } .sa-fb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vonnik-space-2); font-size: var(--vonnik-text-xs); color: var(--vonnik-ink-soft); } .sa-fb > button { border: var(--vonnik-border-hairline) solid var(--vonnik-border-control); background: var(--vonnik-surface); min-width: var(--vonnik-control-tap); min-height: var(--vonnik-control-tap); cursor: pointer; font-size: var(--vonnik-text-s); line-height: 1; } .sa-fb > button[aria-pressed="true"] { background: var(--vonnik-navy); color: var(--vonnik-on-action); border-color: var(--vonnik-navy); } .sa-fb .sa-chips { flex-basis: 100%; align-items: center; } .sa-typing { font-size: var(--vonnik-text-s); color: var(--vonnik-ink-soft); align-self: flex-start; padding: var(--vonnik-space-3) 0; display: flex; gap: var(--vonnik-space-1); align-items: center; min-height: var(--vonnik-space-6); } .sa-typing i { width: var(--vonnik-space-2); height: var(--vonnik-space-2); border-radius: var(--vonnik-radius-round); background: var(--vonnik-ink-soft); opacity: .25; } @media (prefers-reduced-motion: no-preference) { .sa-typing i { animation: sa-dot 1.4s infinite ease-in-out; } .sa-typing i:nth-child(2) { animation-delay: .16s; } .sa-typing i:nth-child(3) { animation-delay: .32s; } @keyframes sa-dot { 0%, 70%, 100% { opacity: .25; transform: scale(.8); } 35% { opacity: .9; transform: scale(1); } } } .sa-foot { border-top: var(--vonnik-border-hairline) solid var(--vonnik-border); padding: var(--vonnik-space-4) var(--vonnik-space-5); } .sa-actions { display: flex; gap: var(--vonnik-space-3); margin: 0 0 var(--vonnik-space-3); } .sa-actions button { border: 0; background: transparent; color: var(--vonnik-blue); font-weight: var(--vonnik-weight-bold); font-size: var(--vonnik-text-s); line-height: var(--vonnik-line-tight); font-family: inherit; cursor: pointer; min-height: var(--vonnik-control-tap); padding: 0; } .sa-actions button + button { margin-left: auto; color: var(--vonnik-ink-soft); font-weight: var(--vonnik-weight-medium); } .sa-form { display: flex; gap: var(--vonnik-space-3); } .sa-form textarea { flex: 1 1 auto; resize: none; height: auto; min-height: var(--vonnik-control-tap); } .sa-form button { min-width: var(--vonnik-control-tap); min-height: var(--vonnik-control-tap); border: 0; background: var(--vonnik-blue); color: var(--vonnik-on-action); cursor: pointer; font-size: var(--vonnik-text-xl); } .sa-form button:disabled { opacity: var(--vonnik-disabled); cursor: default; } .sa-info { margin: var(--vonnik-space-3) 0 0; line-height: 1.4; } .sa-info a { color: var(--vonnik-blue); text-decoration: underline; } .sa-info a:hover { color: var(--vonnik-blue-dark); } @media (max-width: 999.98px) { .sa-chips { flex-direction: column; align-items: stretch; } .sa-launcher { display: none; } body.single-product .sa-launcher { display: flex; } } body:has(.cookie-notification) .sa-launcher { display: none; } @media (max-width: 689.98px) { .sa-panel { inset-inline: 0; top: auto; bottom: 0; width: 100%; max-width: none; height: var(--vonnik-sheet); max-height: var(--vonnik-sheet); } } @media (max-width: 689.98px) { .sa-launcher { right: var(--vonnik-space-5); } .sa-msg { max-width: 92%; } } @media (prefers-reduced-motion: no-preference) { .sa-panel { animation: sa-in .18s ease-out; } @keyframes sa-in { from { transform: translateY(var(--vonnik-space-4)); opacity: 0; } to { transform: none; opacity: 1; } } } .sa-close { font-size: 0; position: relative; } .sa-close::before { content: ""; position: absolute; inset: 0; -webkit-mask: var(--lucide-x) center / var(--vonnik-icon) no-repeat; mask: var(--lucide-x) center / var(--vonnik-icon) no-repeat; background-color: currentColor; }