#pixelito-root {
  --pixelito-primary: #8b35a8;
  --pixelito-primary-hover: #692281;
  --pixelito-surface: #fffdfa;
  --pixelito-muted: #5d6762;
  --pixelito-text: #1d2c28;
  --pixelito-border: #d9d2c7;
  --pixelito-success: #15803d;
  --pixelito-warning: #b45309;
  font-family: var(--font-body, system-ui, sans-serif);
  position: relative;
  z-index: 2147483000;
}
.pixelito-launcher { position: fixed; z-index: 2147483001; right: max(20px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); width: 86px; height: 126px; padding: 0; border: 0; background: transparent; cursor: pointer; overflow: visible; transition: transform .2s ease; }
.pixelito-launcher:hover { transform: translateY(-3px); }
#pixelito-root.pixelito-root--open .pixelito-launcher { opacity: 0; pointer-events: none; transform: translateY(10px) scale(.9); }
.pixelito-figure { position: relative; display: block; width: 100%; height: 100%; aspect-ratio: 768 / 922; contain: layout style paint; transform-origin: 50% 92%; user-select: none; -webkit-user-select: none; pointer-events: none; }
.pixelito-figure__layer { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; object-position: bottom center; opacity: 0; transform: translateZ(0); transition: opacity 180ms ease; will-change: opacity; }
.pixelito-figure__layer.is-active { opacity: 1; }
.pixelito-launcher__prompt { position: absolute; right: -10px; bottom: calc(100% - 14px); min-width: 132px; padding: 8px 10px; border: 1px solid var(--pixelito-border); border-radius: 10px; color: var(--pixelito-text); background: var(--pixelito-surface); box-shadow: 0 7px 18px rgba(29,44,40,.14); font-size: .76rem; font-weight: 700; line-height: 1.3; text-align: center; }
#pixelito-root[data-state="idle"] .pixelito-figure { animation: pixelito-idle-motion 3.2s ease-in-out infinite; }
#pixelito-root[data-state="welcome"] .pixelito-figure { animation: pixelito-wave .8s ease-in-out 2; }
#pixelito-root[data-state="listening"] .pixelito-figure { animation: pixelito-listen 1.4s ease-in-out infinite; }
#pixelito-root[data-state="thinking"] .pixelito-figure, #pixelito-root[data-state="searching"] .pixelito-figure { animation: pixelito-think 1.6s ease-in-out infinite; }
#pixelito-root[data-state="speaking"] .pixelito-figure { animation: pixelito-speak .32s ease-in-out infinite alternate; }
#pixelito-root[data-state="success"] .pixelito-figure { animation: pixelito-success .75s ease-out 2; }
.pixelito { position: fixed; z-index: 2147483002; right: max(20px, env(safe-area-inset-right)); bottom: max(96px, calc(env(safe-area-inset-bottom) + 76px)); display: flex; flex-direction: column; width: min(400px, calc(100vw - 40px)); max-height: min(680px, calc(100dvh - 116px)); color: var(--pixelito-text); background: var(--pixelito-surface); border: 1px solid var(--pixelito-border); border-radius: 16px; box-shadow: 0 24px 56px rgba(29,44,40,.24); opacity: 0; pointer-events: none; transform: translateY(12px) scale(.98); transition: opacity .18s ease, transform .18s ease; overflow: hidden; }
.pixelito--open { opacity: 1; pointer-events: auto; transform: none; }
.pixelito__header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid var(--pixelito-border); }
.pixelito__identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pixelito__identity h2 { margin: 0; font: 700 1rem/1.2 var(--font-display, sans-serif); }
.pixelito__identity p, .pixelito__request p { margin: 2px 0 0; color: var(--pixelito-muted); font-size: .78rem; }
.pixelito__avatar { display: grid; flex: 0 0 auto; place-items: center; width: 42px; height: 42px; overflow: hidden; border-radius: 50%; background: linear-gradient(145deg, #f3e6f8, #fffdfa); }
.pixelito__avatar img { display: block; width: 48px; height: 74px; max-width: none; object-fit: contain; object-position: bottom center; }
.pixelito__actions { display: flex; gap: 4px; }
.pixelito__icon-button, .pixelito__chat button { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 8px; color: var(--pixelito-text); background: transparent; cursor: pointer; }
.pixelito__icon-button:hover { background: #f1e7f5; }
.pixelito__content { display: flex; flex: 1; min-height: 0; flex-direction: column; }
.pixelito__language { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 10px 16px 0; color: var(--pixelito-muted); font-size: .75rem; }
.pixelito__language select { padding: 4px 6px; border: 1px solid var(--pixelito-border); border-radius: 6px; color: inherit; background: #fff; }
.pixelito__messages { flex: 1; min-height: 160px; padding: 16px; overflow-y: auto; }
.pixelito__message { max-width: 85%; margin-bottom: 10px; padding: 10px 12px; border-radius: 12px; font-size: .9rem; line-height: 1.45; }
.pixelito__message--assistant { border-bottom-left-radius: 3px; background: #f1e7f5; }
.pixelito__message--user { margin-left: auto; border-bottom-right-radius: 3px; color: #fff; background: var(--pixelito-primary); }
.pixelito__chat { display: flex; gap: 8px; align-items: end; padding: 12px 16px; border-top: 1px solid var(--pixelito-border); }
.pixelito__chat textarea, .pixelito__request input, .pixelito__request textarea { width: 100%; border: 1px solid var(--pixelito-border); border-radius: 8px; padding: 9px 10px; color: var(--pixelito-text); background: #fff; font-size: 16px; line-height: 1.35; resize: vertical; }
.pixelito__chat button { flex: 0 0 auto; color: #fff; background: var(--pixelito-primary); }
.pixelito__request { border-top: 1px solid var(--pixelito-border); }
.pixelito__request summary { padding: 12px 16px; color: var(--pixelito-primary); font-size: .86rem; font-weight: 700; cursor: pointer; }
.pixelito__request form { display: grid; gap: 10px; padding: 0 16px 16px; }
.pixelito__request h3 { margin: 0; font-size: 1rem; }
.pixelito__request label { display: grid; gap: 4px; color: var(--pixelito-text); font-size: .8rem; font-weight: 600; }
.pixelito__request .pixelito__consent { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; }
.pixelito__consent input { width: 16px; margin-top: 3px; }
.pixelito__privacy { font-size: .74rem !important; }
.pixelito__submit { min-height: 40px; border: 0; border-radius: 8px; color: #fff; background: var(--pixelito-primary); font-weight: 700; cursor: pointer; }
.pixelito__submit:hover, .pixelito__chat button:hover { background: var(--pixelito-primary-hover); }
.pixelito__submit:disabled { opacity: .55; cursor: wait; }
.pixelito--thinking .pixelito__avatar, .pixelito--listening .pixelito__avatar, .pixelito--speaking .pixelito__avatar { animation: pixelito-pulse 1.2s ease-in-out infinite; }
.pixelito--idle .pixelito__avatar, .pixelito--welcome .pixelito__avatar, .pixelito--standby .pixelito__avatar { background: var(--pixelito-primary); }
.pixelito--loading .pixelito__avatar, .pixelito--searching .pixelito__avatar { animation: pixelito-pulse .8s ease-in-out infinite; }
.pixelito--success .pixelito__avatar { background: var(--pixelito-success); }
.pixelito--warning .pixelito__avatar, .pixelito--apology .pixelito__avatar { background: var(--pixelito-warning); }
.pixelito--success [data-pixelito-form-status] { color: var(--pixelito-success); }
.pixelito--warning [data-pixelito-form-status], .pixelito--apology [data-pixelito-status] { color: var(--pixelito-warning); }
.pixelito--paused * { animation-play-state: paused !important; }
.pixelito__sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
#pixelito-root :focus-visible { outline: 3px solid var(--pixelito-primary); outline-offset: 2px; }
@keyframes pixelito-pulse { 50% { transform: scale(1.08); } }
@keyframes pixelito-idle-motion { 0%,100% { transform: translate(0,0) rotate(0); } 22% { transform: translate(-4px,-3px) rotate(-2deg); } 48% { transform: translate(4px,0) rotate(2deg); } 72% { transform: translate(-2px,-4px) rotate(-1deg); } }
@keyframes pixelito-wave { 50% { transform: rotate(-3deg) translateY(-4px); } }
@keyframes pixelito-listen { 50% { transform: rotate(-2deg) translateY(-3px); } }
@keyframes pixelito-think { 50% { transform: rotate(3deg) translateY(-5px); } }
@keyframes pixelito-speak { from { transform: translateY(0) scale(1); } to { transform: translateY(-2px) scale(1.015); } }
@keyframes pixelito-success { 50% { transform: translateY(-9px) rotate(3deg); } }
@media (max-width: 600px) { .pixelito { right: 0; bottom: 0; width: 100%; max-height: min(78dvh, 680px); border-radius: 16px 16px 0 0; } .pixelito-launcher { bottom: max(8px, env(safe-area-inset-bottom)); right: max(12px, env(safe-area-inset-right)); width: 74px; height: 110px; } .pixelito-launcher__prompt { right: -8px; bottom: calc(100% - 10px); min-width: 118px; font-size: .7rem; } .pixelito__messages { min-height: 120px; } }
@media (prefers-reduced-motion: reduce) { .pixelito, .pixelito-launcher, .pixelito-figure, .pixelito-figure__layer { transition-duration: 1ms !important; } .pixelito--thinking .pixelito__avatar, .pixelito--listening .pixelito__avatar, .pixelito--speaking .pixelito__avatar, .pixelito-figure { animation: none !important; } }