.kuartal-bot { position: relative; width: var(--bot-size); height: var(--bot-size); flex: 0 0 auto; isolation: isolate; touch-action: pan-y; }
.kuartal-bot svg { position: relative; z-index: 1; display: block; width: 100%; height: 100%; overflow: visible; }
.bot-aura { position: absolute; inset: 20%; border-radius: 50%; background: var(--bot-color); opacity: .15; filter: blur(46px); transform: scale(1.15); transition: opacity .4s ease, background .3s ease; }
.bot-character { transform-origin: 50% 55%; animation: bot-float 4.8s ease-in-out infinite; transition: opacity .3s ease, filter .3s ease; }
.bot-shadow { fill: #000; opacity: .2; filter: blur(8px); transform-origin: center; animation: shadow-breathe 4.8s ease-in-out infinite; }
.bot-shape { fill: var(--bot-color); filter: drop-shadow(0 12px 9px #14201938); transition: fill .3s ease; }
.bot-volume { opacity: 1; pointer-events: none; }
.bot-display, .bot-keys { filter: drop-shadow(0 3px 2px #0002); }

.bot-hand { fill: var(--bot-color); filter: drop-shadow(0 8px 6px #1420192e); transition: fill .3s ease; }
.bot-arm { transform-box: fill-box; transform-origin: center; transition: transform .3s ease; animation: hand-float 3.9s ease-in-out infinite; }
.bot-arm-right { animation-delay: -.9s; }
:is(.state-success, .state-happy) .bot-arm-left { transform: translate(-5px, -24px) rotate(-22deg); }
:is(.state-success, .state-happy) .bot-arm-right { transform: translate(5px, -24px) rotate(22deg); }

.bot-face { transition: transform .16s ease-out; }
.bot-eye { transform-box: fill-box; transform-origin: center; animation: bot-blink 5.2s infinite; transition: transform .2s ease; }
.bot-eye-glint { fill: #fff; opacity: .96; pointer-events: none; }
.bot-happy-eyes, .bot-sleepy-eyes, .bot-angry-brows, .bot-sad-lines, .bot-sad-tears { display: none; }
.bot-happy-eyes path, .bot-sleepy-eye { fill: #111713; }
.bot-eye-crease { fill: none; stroke: #111713; stroke-width: 3; stroke-linecap: round; opacity: .42; }
.bot-sad-tear { fill: #c4e8ff; opacity: 0; transform-box: fill-box; transform-origin: center; animation: tear-fall 4.6s ease-in infinite; }
.bot-sad-tear-2 { animation-delay: 2.3s; }
.bot-angry-brows path { fill: none; stroke: #1b1212; stroke-width: 7; stroke-linecap: round; }
.bot-sad-lines path { fill: none; stroke: #233f5c; stroke-width: 5; stroke-linecap: round; opacity: .52; }
.bot-display { fill: #d4fff0; opacity: .72; }
.bot-keys rect { fill: #d8fff1; opacity: .65; }
.bot-glass { fill: #fff0b9; }
.bot-sand { fill: #f2b62f; opacity: .78; }
.bot-sand-stream { fill: none; stroke: #e6a928; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 3 8; animation: sand-fall 1.2s linear infinite; }
.bot-cap { fill: #79573d; }

.bot-spark { fill: var(--bot-color); transform-box: fill-box; transform-origin: center; }
.bot-accents { opacity: .9; }
.accent-primary { animation: spark-breathe 3.8s ease-in-out infinite; }
.accent-secondary { opacity: .55; animation: spark-breathe 3.8s 1.1s ease-in-out infinite; }
.bot-orbit, .bot-success-burst, .bot-listening-waves { opacity: 0; }
.bot-orbit { transform-origin: 180px 180px; animation: bot-orbit 5s linear infinite; transition: opacity .3s ease; }
.bot-success-burst { transition: opacity .2s ease; }
.bot-success-burst .bot-spark { animation: success-pop .8s cubic-bezier(.2,.9,.25,1) both; }
.bot-success-burst > g:nth-child(2) .bot-spark { animation-delay: .08s; }
.bot-success-burst > g:nth-child(3) .bot-spark { animation-delay: .14s; }
.bot-listening-waves { fill: none; stroke: var(--bot-color); stroke-width: 6; stroke-linecap: round; transition: opacity .25s ease; }
.bot-listening-waves path { animation: wave-pulse 1.4s ease-in-out infinite; }
.bot-listening-waves path:last-child { animation-delay: .22s; }

.state-listening .bot-character { animation: bot-listen 1.8s ease-in-out infinite; }
.state-listening .bot-listening-waves { opacity: .8; }
.state-listening .bot-eye { transform: scale(1.16); }
.state-listening .bot-aura { opacity: .23; }
.state-thinking .bot-orbit, .state-streaming .bot-orbit { opacity: .8; }
.state-thinking .bot-character { animation: bot-think 3.4s ease-in-out infinite; }
.state-thinking .bot-open-eyes { transform: translate(5px, -6px); }
.state-thinking .bot-accents { opacity: .3; }
.state-streaming .bot-character { animation: bot-stream 1.8s ease-in-out infinite; }
.state-streaming .bot-open-eyes { animation: bot-read 2.2s ease-in-out infinite; }
.state-streaming .bot-orbit { animation-duration: 2.8s; }
:is(.state-success, .state-happy) .bot-character { animation: bot-success .85s cubic-bezier(.2,.8,.2,1) both; }
:is(.state-success, .state-happy, .state-approval) .bot-open-eyes { display: none; }
:is(.state-success, .state-happy, .state-approval) .bot-happy-eyes { display: block; }
:is(.state-success, .state-happy) .bot-success-burst { opacity: 1; }
:is(.state-success, .state-happy) .bot-accents { opacity: 0; }
:is(.state-success, .state-happy) .bot-aura { opacity: .3; }
.state-approval .bot-character { animation: bot-approval 2.3s ease-in-out infinite; }
.state-approval .accent-primary { animation: approval-star 1.2s ease-in-out infinite; }
.kuartal-bot:is(.state-error, .state-angry) { --bot-color: #e56c68 !important; }
:is(.state-error, .state-angry) .bot-character { animation: bot-error .45s ease-in-out 2; }
:is(.state-error, .state-angry) .bot-eye-left { transform: rotate(10deg) scaleY(.76); }
:is(.state-error, .state-angry) .bot-eye-right { transform: rotate(-10deg) scaleY(.76); }
:is(.state-error, .state-angry) .bot-angry-brows { display: block; }
:is(.state-error, .state-angry) .bot-aura { opacity: .24; }
.kuartal-bot.state-sad { --bot-color: #7398ba !important; }
.state-sad .bot-character { animation: bot-float 6s ease-in-out infinite; filter: saturate(.72); }
.state-sad .bot-sleepy-eyes { transform: translateY(4px); }
.state-sad .bot-eye-crease { display: none; }
.state-sad .bot-sad-tears { display: block; }
.state-sad .bot-sad-lines { display: block; }
.state-sad .bot-aura { opacity: .2; }
.state-sad .bot-accents, .state-sad .bot-orbit { opacity: 0; }
:is(.state-offline, .state-sleepy) .bot-character { animation: none; }
:is(.state-offline, .state-sleepy, .state-sad) .bot-open-eyes { display: none; }
:is(.state-offline, .state-sleepy, .state-sad) .bot-sleepy-eyes { display: block; }
:is(.state-offline, .state-sleepy, .state-sad) .bot-accents, :is(.state-offline, .state-sleepy, .state-sad) .bot-orbit { opacity: 0; }
.state-sleepy .bot-character { opacity: .72; filter: saturate(.65); }
.state-sleepy .bot-aura { opacity: .06; }
.state-offline .bot-character { opacity: .48; filter: saturate(.15); }
.state-offline .bot-aura { opacity: .03; }
.state-offline .bot-shadow { animation: none; opacity: .1; }
.agent-kai { --bot-color: #4e8cff; }
.agent-kori { --bot-color: #36cc64; }
.agent-tika { --bot-color: #67d5b5; }
.agent-timo { --bot-color: #ffc84a; }
.is-compact { pointer-events: none; }
.is-compact .bot-arm, .is-compact .bot-aura, .is-compact .bot-shadow, .is-compact .bot-orbit, .is-compact .bot-accents { display: none; }
.is-static *, .is-static *::before, .is-static *::after { animation: none !important; }
.is-static .bot-face { transform: none !important; }

@keyframes tear-fall { 0%,12% { opacity: 0; transform: translateY(0) scale(.65); } 20% { opacity: .95; } 62% { opacity: .9; } 82%,100% { opacity: 0; transform: translateY(42px) scale(.85); } }
@keyframes bot-float { 0%,100% { transform: translateY(0) rotate(-.6deg); } 50% { transform: translateY(-9px) rotate(.8deg); } }
@keyframes shadow-breathe { 0%,100% { transform: scaleX(1); opacity: .18; } 50% { transform: scaleX(.88); opacity: .12; } }
@keyframes hand-float { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-7px) rotate(4deg); } }
@keyframes bot-blink { 0%,44%,48%,100% { transform: scaleY(1); } 46% { transform: scaleY(.08); } }
@keyframes spark-breathe { 0%,100% { opacity: .55; transform: scale(.86) rotate(0); } 50% { opacity: 1; transform: scale(1.08) rotate(12deg); } }
@keyframes bot-orbit { to { transform: rotate(360deg); } }
@keyframes bot-listen { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-4px) scale(1.025); } }
@keyframes wave-pulse { 0%,100% { opacity: .2; transform: translateX(-3px); } 50% { opacity: 1; transform: translateX(4px); } }
@keyframes bot-think { 0%,100% { transform: rotate(-2.5deg) translateY(0); } 50% { transform: rotate(2.5deg) translateY(-7px); } }
@keyframes bot-stream { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes bot-read { 0%,100% { transform: translateX(-4px); } 50% { transform: translateX(5px); } }
@keyframes bot-success { 0% { transform: translateY(0) scale(1); } 42% { transform: translateY(-22px) scale(1.04) rotate(2deg); } 72% { transform: translateY(2px) scale(.99) rotate(-1deg); } 100% { transform: translateY(0) scale(1); } }
@keyframes success-pop { 0% { opacity: 0; transform: scale(.1) rotate(-25deg); } 60% { opacity: 1; transform: scale(1.2) rotate(8deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes bot-approval { 0%,100% { transform: rotate(0); } 50% { transform: rotate(3deg) translateY(-5px); } }
@keyframes approval-star { 0%,100% { transform: scale(.8); opacity: .45; } 50% { transform: scale(1.25); opacity: 1; } }
@keyframes bot-error { 0%,100% { transform: translateX(0) rotate(-2deg); } 25% { transform: translateX(-7px) rotate(-5deg); } 75% { transform: translateX(7px) rotate(2deg); } }
@keyframes sand-fall { to { stroke-dashoffset: -22; } }
@media (prefers-reduced-motion: reduce) { .kuartal-bot *, .kuartal-bot *::before, .kuartal-bot *::after { animation: none !important; transition: none !important; } }

/* Agent studio and workspace avatar sizes: no icon tiles behind small avatars. */
.mini-avatar,.side-agent-avatar,.home-agent-avatar,.template-avatar,.rt-agent-glyph{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible}
.mini-avatar .kuartal-bot{width:38px!important;height:38px!important}
.character-art{width:190px;height:190px;background:transparent!important;border:0!important;box-shadow:none!important}
.character-art .kuartal-bot{width:190px!important;height:190px!important}
.side-agent-avatar .kuartal-bot{width:30px!important;height:30px!important}
.home-agent-avatar .kuartal-bot{width:76px!important;height:76px!important}
.template-avatar .kuartal-bot{width:42px!important;height:42px!important}
.rt-agent-glyph .kuartal-bot{width:28px!important;height:28px!important}