:root .sig--vis-ai { text-align: left; }
:root .sig--vis-ai svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:root .sig--vis-ai .va, :root .sig--vis-ai.va { position: absolute; inset: clamp(10px, 2.4vw, 22px); display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: linear-gradient(180deg, #17141c, #121015); border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); }
:root .sig--vis-ai .va__head, :root .sig--vis-ai.va__head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
:root .sig--vis-ai .va__head b, :root .sig--vis-ai.va__head b { font: 600 14px/1 var(--f-display); color: #fff; letter-spacing: -.01em; }
:root .sig--vis-ai .va__logo, :root .sig--vis-ai.va__logo { width: 30px; height: 30px; padding: 6px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, #a100ff, #5b00a8); color: #fff; }
:root .sig--vis-ai .va__logo svg, :root .sig--vis-ai.va__logo svg, :root .sig--vis-ai .va__ai svg, :root .sig--vis-ai.va__ai svg { stroke-width: 1.6; }
:root .sig--vis-ai .va__dots, :root .sig--vis-ai.va__dots { margin-left: auto; display: flex; gap: 4px; }
:root .sig--vis-ai .va__dots i, :root .sig--vis-ai.va__dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .25); }
:root .sig--vis-ai .va__msgs, :root .sig--vis-ai.va__msgs { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: 16px; }
:root .sig--vis-ai .va__q, :root .sig--vis-ai.va__q { align-self: flex-end; max-width: 82%; padding: 11px 15px; border-radius: 18px 18px 6px 18px; background: #a100ff; color: #fff; font: 500 14px/1.4 var(--f-body); opacity: 0; transform: translateY(26px) scale(.96); transform-origin: 100% 100%; transition: opacity .4s, transform .7s var(--ease-out); }
:root .sig--vis-ai .is-q .va__q, :root .sig--vis-ai.is-q .va__q { opacity: 1; transform: none; }
:root .sig--vis-ai .va__q:empty, :root .sig--vis-ai.va__q:empty { display: none; }
:root .sig--vis-ai .va__think, :root .sig--vis-ai.va__think { display: none; align-items: center; gap: 10px; font: 500 13px/1 var(--f-body); color: var(--ink-2); }
:root .sig--vis-ai .is-think .va__think, :root .sig--vis-ai.is-think .va__think { display: flex; }
:root .sig--vis-ai .va__think em, :root .sig--vis-ai.va__think em { font-style: normal; color: var(--ink-2); animation: vaPulse .9s ease-in-out infinite alternate; }
@keyframes vaPulse{ to { opacity: .4; } }
:root .sig--vis-ai .va__fav, :root .sig--vis-ai.va__fav { display: flex; }
:root .sig--vis-ai .va__fav i, :root .sig--vis-ai.va__fav i { width: 22px; height: 22px; margin-left: -6px; border-radius: 50%; display: grid; place-items: center; border: 2px solid #141118; background: #2c2633; color: #d9c8ea; font: 600 9px/1 var(--f-display); font-style: normal; animation: vaHop 1.2s var(--ease-out) infinite; }
:root .sig--vis-ai .va__fav i:first-child, :root .sig--vis-ai.va__fav i:first-child { margin-left: 0; background: #a100ff; color: #fff; }
:root .sig--vis-ai .va__fav i:nth-child(2), :root .sig--vis-ai.va__fav i:nth-child(2) { animation-delay: .15s; }
:root .sig--vis-ai .va__fav i:nth-child(3), :root .sig--vis-ai.va__fav i:nth-child(3) { animation-delay: .3s; }
:root .sig--vis-ai .va__fav i:nth-child(4), :root .sig--vis-ai.va__fav i:nth-child(4) { animation-delay: .45s; }
@keyframes vaHop{ 30% { transform: translateY(-5px); } 60% { transform: none; } }
:root .sig--vis-ai .va__a, :root .sig--vis-ai.va__a { display: none; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; }
:root .sig--vis-ai .is-a .va__a, :root .sig--vis-ai.is-a .va__a { display: grid; }
:root .sig--vis-ai .va__ai, :root .sig--vis-ai.va__ai { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: rgba(161, 0, 255, .18); color: var(--lilac); }
:root .sig--vis-ai .va__txt, :root .sig--vis-ai.va__txt { margin: 0; font: 400 clamp(13.5px, 1.25vw, 15px)/1.6 var(--f-body); color: #e6e0ec; }
:root .sig--vis-ai .va__w, :root .sig--vis-ai.va__w { opacity: 0; filter: blur(4px); transition: opacity .45s, filter .45s; }
:root .sig--vis-ai .va__w.on, :root .sig--vis-ai.va__w.on { opacity: 1; filter: none; }
:root .sig--vis-ai .va__me, :root .sig--vis-ai.va__me { color: #fff; font-weight: 600; padding: 0 3px; margin: 0 -1px; border-radius: 5px; background: linear-gradient(90deg, rgba(161, 0, 255, .55), rgba(161, 0, 255, .55)) 0 0 / 0% 100% no-repeat; transition: opacity .45s, filter .45s, background-size 1s var(--ease-out); }
:root .sig--vis-ai .is-me .va__me, :root .sig--vis-ai.is-me .va__me { background-size: 100% 100%; }
:root .sig--vis-ai .va__cite, :root .sig--vis-ai.va__cite { display: inline-grid; place-items: center; width: 17px; height: 17px; margin: 0 2px; border-radius: 50%; background: #2e2836; color: var(--lilac); font: 600 10px/1 var(--f-display); vertical-align: 3px; }
:root .sig--vis-ai .is-me .va__cite:first-of-type, :root .sig--vis-ai.is-me .va__cite:first-of-type { background: #a100ff; color: #fff; }
:root .sig--vis-ai .va__src, :root .sig--vis-ai.va__src { display: none; padding-left: 36px; }
:root .sig--vis-ai .is-src .va__src, :root .sig--vis-ai.is-src .va__src { display: block; }
:root .sig--vis-ai .va__src small, :root .sig--vis-ai.va__src small { display: block; margin-bottom: 8px; font: 500 11px/1 var(--f-body); color: var(--ink-3); letter-spacing: .02em; }
:root .sig--vis-ai .va__chips, :root .sig--vis-ai.va__chips { display: flex; flex-wrap: wrap; gap: 6px; }
:root .sig--vis-ai .va__chip, :root .sig--vis-ai.va__chip { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 6px; border-radius: 999px; background: #221e28; border: 1px solid rgba(255, 255, 255, .08); color: #cfc6d8; font: 500 12px/1 var(--f-body); opacity: 0; transform: translateY(8px) scale(.9); transition: opacity .35s, transform .55s var(--ease-back), background .5s, border-color .5s, box-shadow .6s, color .5s; }
:root .sig--vis-ai .va__chip.on, :root .sig--vis-ai.va__chip.on { opacity: 1; transform: none; }
:root .sig--vis-ai .va__chip em, :root .sig--vis-ai.va__chip em { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: #342d3c; color: var(--lilac); font: 600 10px/1 var(--f-display); font-style: normal; }
:root .sig--vis-ai .va__ok, :root .sig--vis-ai.va__ok { width: 0; height: 16px; overflow: hidden; color: #fff; transition: width .5s var(--ease-out); }
:root .sig--vis-ai .va__ok svg, :root .sig--vis-ai.va__ok svg { width: 16px; stroke-width: 2.6; }
:root .sig--vis-ai .is-me .va__chip--me, :root .sig--vis-ai.is-me .va__chip--me { background: rgba(161, 0, 255, .26); border-color: #a100ff; color: #fff; box-shadow: 0 0 0 4px rgba(161, 0, 255, .14), 0 10px 30px -8px rgba(161, 0, 255, .7); }
:root .sig--vis-ai .is-me .va__chip--me em, :root .sig--vis-ai.is-me .va__chip--me em { background: #a100ff; color: #fff; }
:root .sig--vis-ai .is-me .va__ok, :root .sig--vis-ai.is-me .va__ok { width: 16px; }
:root .sig--vis-ai .va__in, :root .sig--vis-ai.va__in { display: flex; align-items: center; gap: 8px; margin: 0 12px 12px; padding: 0 6px 0 16px; height: 46px; border-radius: 999px; background: #211d26; border: 1px solid rgba(255, 255, 255, .08); font: 400 13.5px/1 var(--f-body); color: #fff; transition: border-color .4s, box-shadow .4s; }
:root .sig--vis-ai .va__it, :root .sig--vis-ai.va__it { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: clip; direction: ltr; }
:root .sig--vis-ai .va__it:empty::before, :root .sig--vis-ai.va__it:empty::before { content: "frag mich etwas …"; color: #8a8292; }
:root .sig--vis-ai .is-typing .va__it:empty::before, :root .sig--vis-ai.is-typing .va__it:empty::before { content: ""; }
:root .sig--vis-ai .va__caret, :root .sig--vis-ai.va__caret { width: 1.5px; height: 17px; margin-left: -6px; background: var(--lilac); opacity: 0; }
:root .sig--vis-ai .is-typing .va__caret, :root .sig--vis-ai.is-typing .va__caret { opacity: 1; animation: vaBlink .8s steps(2) infinite; }
@keyframes vaBlink{ 50% { opacity: 0; } }
:root .sig--vis-ai .is-typing .va__in, :root .sig--vis-ai.is-typing .va__in { border-color: rgba(161, 0, 255, .55); box-shadow: 0 0 0 4px rgba(161, 0, 255, .12); }
:root .sig--vis-ai .va__send, :root .sig--vis-ai.va__send { width: 34px; height: 34px; flex: none; padding: 8px; border-radius: 50%; background: #3a3342; color: #fff; transition: background .3s, transform .3s var(--ease-back); }
:root .sig--vis-ai .va__send svg, :root .sig--vis-ai.va__send svg { stroke-width: 2.4; }
:root .sig--vis-ai .is-typing .va__send, :root .sig--vis-ai.is-typing .va__send { background: #a100ff; }
:root .sig--vis-ai .is-send .va__send, :root .sig--vis-ai.is-send .va__send { transform: scale(.85); }
:root .sig--vis-ai .is-out .va__msgs > *, :root .sig--vis-ai.is-out .va__msgs > * { opacity: 0 !important; transition: opacity .5s; }
@media (max-width: 480px){:root .sig--vis-ai .va__src, :root .sig--vis-ai.va__src { padding-left: 0; }
:root .sig--vis-ai .va__head, :root .sig--vis-ai.va__head { padding: 12px; }
:root .sig--vis-ai .va__msgs, :root .sig--vis-ai.va__msgs { padding: 12px; }
 }
@media (max-width: 600px){:root .sig.sig--vis-ai { min-height: 470px; }
:root .sig--vis-ai .va__txt, :root .sig--vis-ai.va__txt { font-size: 13.5px; line-height: 1.5; }
:root .sig--vis-ai .va__q, :root .sig--vis-ai.va__q { font-size: 13px; }

}
@media (prefers-reduced-motion: reduce){:root .sig--vis-ai .va__fav i, :root .sig--vis-ai.va__fav i, :root .sig--vis-ai .va__think em, :root .sig--vis-ai.va__think em, :root .sig--vis-ai .va__caret, :root .sig--vis-ai.va__caret { animation: none !important; }
 }