.franco-widget { position: fixed; z-index: 80; left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); width: 104px; height: 156px; pointer-events: none; font-family: Inter, sans-serif; color: #30213e; }
.franco-widget[hidden], .franco-widget [hidden] { display: none !important; }
body:has(#chat-command-box:not([hidden])) .franco-widget,
body:has(#mention-box:not([hidden])) .franco-widget { visibility: hidden; }
.franco-widget.is-chat { bottom: max(96px, calc(env(safe-area-inset-bottom) + 96px)); }
.franco-character { width: 100%; height: 100%; filter: drop-shadow(0 5px 4px #3b215329); font-size: 60px; pointer-events: auto; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.franco-character svg { display: block; width: 100%; height: 100%; overflow: visible; transform-origin: 50% 95%; transform: rotate(var(--body-lean, 0deg)); transition: transform .15s ease-out; }
.franco-character:focus-visible, .franco-widget button:focus-visible { outline: 2px solid #0b63ce; outline-offset: 3px; border-radius: 8px; }
.franco-widget.is-dragging .franco-character { cursor: grabbing; }
.franco-widget.is-dragging .franco-character svg { transform: rotate(-5deg); }
.franco-panel { position: absolute; left: 90px; top: 12px; box-sizing: border-box; width: min(290px, calc(100vw - 20px)); display: flex; align-items: flex-start; gap: 6px; padding: 10px 8px 10px 12px; pointer-events: auto; border: 1px solid #e6ddec; background: #fffcff; border-radius: 12px; box-shadow: 0 5px 20px #40215b18; }
.franco-copy { min-width: 0; flex: 1; font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; }
.franco-copy strong { color: #713790; font-size: 10px; font-weight: 750; margin-right: 6px; }
.franco-advice { font-weight: 500; }
.franco-controls { display: flex; gap: 1px; flex-shrink: 0; }
.franco-widget button { display: grid; place-items: center; pointer-events: auto; cursor: pointer; width: 20px; height: 20px; padding: 3px; border: 0; border-radius: 5px; background: transparent; color: #8c7898; }
.franco-widget button svg { width: 14px; height: 14px; }
.franco-widget button:hover { background: #f0e6f7; color: #61317b; }
.franco-compact-pause { position: absolute; right: 0; bottom: 0; background: #fffcff !important; box-shadow: 0 2px 8px #40215b22; }
.prof-pupils { transform: translate(calc(var(--look-x, 0px) + var(--emotion-x, 0px)), calc(var(--look-y, 0px) + var(--emotion-y, 0px))); transition: transform .14s ease-out; }
.prof-body { transform-origin: 50% 95%; animation: franco-breathe 3s ease-in-out infinite; }
.prof-head { transform-origin: 133px 173px; transition: transform .5s; }
.prof-eyes { transform-origin: 133px 109px; animation: franco-blink 5.2s infinite; }
.prof-brow { transform-box: fill-box; transform-origin: center; transition: transform .45s; }
.prof-mouth-smile, .prof-mouth-open, .prof-steam { display: none; }
.prof-arm { transform-box: fill-box; transform-origin: top; transition: transform .5s; }
.prof-wing { transform-box: fill-box; transform-origin: top; animation: franco-wing 2.8s ease-in-out infinite; }
.prof-antennae { transform-origin: 130px 66px; animation: franco-antenna 3s ease-in-out infinite alternate; }
.is-talking .prof-mouth { transform-origin: 132px 144px; animation: franco-talk .3s ease-in-out infinite alternate; }
.is-talking .prof-arm-left { animation: franco-point .8s ease-in-out 4 alternate; }
[data-emotion="angry"] .prof-brow-left { transform: rotate(18deg) translateY(3px); }
[data-emotion="angry"] .prof-brow-right { transform: rotate(-18deg) translateY(3px); }
[data-emotion="angry"] .prof-steam { display: block; animation: franco-steam 1.3s infinite alternate; }
[data-emotion="angry"] .prof-head { transform: rotate(-5deg); }
[data-emotion="angry"] .prof-arm-right { transform: rotate(-22deg); }
[data-emotion="exasperated"] .prof-head { transform: rotate(10deg) translateY(-2px); }
[data-emotion="exasperated"] .prof-brow-left { transform: rotate(18deg); }
[data-emotion="exasperated"] .prof-arm-right { transform: rotate(-48deg); }
[data-emotion="skeptical"] .prof-brow-right { transform: translateY(-10px) rotate(-10deg); }
[data-emotion="skeptical"] .prof-head { transform: rotate(-8deg); }
[data-emotion="smug"] .prof-mouth-frown, [data-emotion="pleased"] .prof-mouth-frown, [data-emotion="surprised"] .prof-mouth-frown, [data-emotion="tired"] .prof-mouth-frown { display: none; }
[data-emotion="smug"] .prof-mouth-smile, [data-emotion="pleased"] .prof-mouth-smile, [data-emotion="surprised"] .prof-mouth-open, [data-emotion="tired"] .prof-mouth-open { display: block; }
[data-emotion="smug"] .prof-head { transform: rotate(-7deg) translateY(-3px); }
[data-emotion="smug"] .prof-brow-left { transform: translateY(-5px); }
[data-emotion="thoughtful"] .prof-head { transform: rotate(7deg); }
[data-emotion="thoughtful"] .prof-pupils { --emotion-x: -2px; }
[data-emotion="thoughtful"] .prof-arm-right { transform: rotate(-32deg); }
[data-emotion="surprised"] .prof-brow { transform: translateY(-12px); }
[data-emotion="surprised"] .prof-arm-right { transform: rotate(-65deg); }
[data-emotion="pleased"] .prof-brow { transform: translateY(-4px); }
[data-emotion="pleased"] .prof-head { transform: rotate(4deg); }
[data-emotion="tired"] .prof-head { transform: rotate(11deg) translateY(4px); }
[data-emotion="tired"] .prof-pupils { --emotion-y: 2px; }
[data-emotion="tired"] .prof-brow { transform: translateY(5px); }
.is-paused .franco-character * { animation-play-state: paused !important; }
@keyframes franco-breathe { 50% { transform: translateY(-3px) rotate(.6deg); } }
@keyframes franco-blink { 0%, 42%, 46%, 100% { transform: scaleY(1); } 44% { transform: scaleY(.1); } }
@keyframes franco-wing { 50% { transform: scaleX(.88); } }
@keyframes franco-antenna { to { transform: rotate(4deg); } }
@keyframes franco-talk { to { transform: scaleY(.65); } }
@keyframes franco-point { to { transform: rotate(13deg); } }
@keyframes franco-steam { to { opacity: .2; transform: translateY(-5px); } }

[data-reaction="crown"] .prof-crown { animation: francisco-crown .45s ease-in-out 3; }
[data-reaction="head"] .prof-head, [data-reaction="eyes"] .prof-head { animation: francisco-no .3s ease-in-out 4; }
[data-reaction="mouth"] .prof-mouth { transform-origin: 132px 144px; animation: franco-talk .18s ease-in-out 8 alternate; }
[data-reaction="antennae"] .prof-antennae { animation-duration: .16s; }
[data-reaction="arms"] .prof-arm-right { animation: francisco-wave .35s ease-in-out 4; }
[data-reaction="wings"] .prof-wing { animation-duration: .12s; }
[data-reaction="belly"] .prof-body { animation: francisco-tickle .15s ease-in-out 7; }
[data-reaction="feet"] .prof-leg-right { transform-origin: 148px 280px; animation: francisco-foot .3s ease-in-out 4; }
@keyframes francisco-crown { 50% { transform: translateY(-6px) rotate(2deg); } }
@keyframes francisco-no { 25% { transform: rotate(-9deg); } 75% { transform: rotate(8deg); } }
@keyframes francisco-wave { 50% { transform: rotate(-65deg); } }
@keyframes francisco-tickle { 50% { transform: translateX(3px) rotate(-2deg); } }
@keyframes francisco-foot { 50% { transform: rotate(-13deg); } }
@media (max-width: 600px) { .franco-widget { width: 86px; height: 130px; } .franco-panel { width: min(268px, calc(100vw - 20px)); } }
@media (prefers-reduced-motion: reduce) { .franco-character * { animation: none !important; transition: none !important; } .franco-character svg, .prof-pupils { transform: none !important; } }
html.theme-dark .franco-panel { background: #281f35; color: #f5eafe; border-color: #563c6a; }
html.theme-dark .franco-copy strong { color: #dab3f0; }
html.theme-dark .franco-widget button { color: #c8b4d9; }
html.theme-dark .franco-widget button:hover { background: #493255; }