body.has-roti{padding-bottom:145px}
#roti-root{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:60;font-family:inherit;color:#f8eedc;pointer-events:none;max-width:calc(100vw - 24px)}
#roti-root[hidden],#roti-root [hidden]{display:none!important}
#roti-root button,#roti-root input,#roti-root select,#roti-root textarea{font:inherit}
.roti-launch{pointer-events:auto;display:flex;align-items:center;gap:12px;min-height:60px;padding:8px 14px 8px 8px;background:linear-gradient(140deg,#182d47,#061423);border:1px solid #e4bd73;border-radius:18px;box-shadow:0 8px 30px #0008,0 0 24px #d3a74326;text-align:left}
.roti-character{position:relative;display:block}.roti-character>img{display:block;width:96px;height:96px;object-fit:contain;border-radius:12px;box-shadow:0 0 12px #edbc582b}.roti-launch-caption{font-size:18px;color:#ffe0a2;letter-spacing:.08em}.roti-launch-caption>span{display:block;font-size:12px;letter-spacing:0;color:#c7d9eb;margin-top:4px}.roti-spark{position:absolute;right:0;top:-9px;color:#ffdc87;font-size:23px;text-shadow:0 0 12px #eaba50}
#roti-root[data-mascot=off] .roti-character{display:none}.roti-panel{pointer-events:auto;position:absolute;right:0;bottom:calc(100% + 12px);width:380px;max-width:calc(100vw - 24px);height:min(610px,calc(var(--roti-viewport-height,100dvh) - 155px));display:flex;flex-direction:column;overflow:hidden;border:1px solid #e2be7d99;border-radius:18px;background:#07182bf5;backdrop-filter:blur(12px);box-shadow:0 20px 70px #000b,0 0 30px #d3ac4e1a}
#roti-root .roti-head{display:flex;align-items:center;gap:10px;padding:12px;min-height:70px;margin:0;width:100%;background:linear-gradient(120deg,#162d45,#0b1929);border-bottom:1px solid #c7a36266;flex-shrink:0}
.roti-head>img{border-radius:10px;flex-shrink:0}.roti-head>div{flex:1;min-width:0;padding:0!important}.roti-head>div::before{display:none!important}.roti-head h2{font-size:18px}.roti-head p{font-size:12px;color:#c1d2e4;margin:3px 0}.roti-head button{padding:8px;min-width:44px;min-height:44px;background:#0c2136}
.roti-log{overflow-y:auto;overscroll-behavior:contain;padding:14px;flex:1;min-height:70px;scroll-behavior:auto}.roti-message{border:1px solid #7e77514d;border-radius:12px;background:#102942;padding:10px 12px;margin-bottom:12px;overflow-wrap:anywhere}.roti-message b{font-size:12px;color:#f2d590}.roti-message p{white-space:pre-wrap;font-size:14px;line-height:1.55;margin:5px 0}.roti-message.user{background:#233248;margin-left:25px}.roti-message.user b{color:#b8d2ee}.roti-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.roti-actions button{font-size:13px;min-height:44px;padding:9px}
.roti-quick{display:flex;gap:6px;flex-wrap:wrap;padding:0 12px 8px;flex-shrink:0}.roti-quick button{font-size:11px!important;padding:7px;min-height:36px;background:#10263b;color:#dac390}
.roti-compose{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:10px 12px;border-top:1px solid #b99a584d;flex-shrink:0}.roti-compose textarea{resize:none;min-height:48px;max-height:80px;font-size:16px}.roti-compose button{min-height:48px;align-self:start}.roti-status{grid-column:1/-1;font-size:11px;color:#bdcddc;margin:0}.roti-privacy{font-size:10px;color:#a3b7ce;padding:0 12px 10px;margin:0;flex-shrink:0}
.roti-settings{padding:10px 14px;border-bottom:1px solid #b99a584d;font-size:13px}.roti-settings label{display:flex;align-items:center;gap:10px;margin-bottom:8px}.roti-settings input{width:20px;min-height:20px}.roti-settings select{min-height:40px;font-size:14px}.roti-settings p{font-size:11px;color:#c4d1df;margin:0}.roti-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@keyframes roti-nod{0%,100%{transform:rotate(0)}40%{transform:rotate(-4deg)}70%{transform:rotate(3deg)}}
@keyframes roti-cheer{0%,100%{transform:translateY(0)}40%{transform:translateY(-7px)}70%{transform:translateY(-3px)}}
@media(prefers-reduced-motion:no-preference){#roti-root[data-motion=normal][data-state=happy] .roti-character{animation:roti-cheer .8s ease 2}#roti-root[data-motion=normal][data-state=thinking] .roti-character{animation:roti-nod 1.2s ease 1}}
#roti-root[data-motion=off] *,#roti-root[data-motion=less] *{animation:none!important}
@media(max-width:600px){body.has-roti{padding-bottom:110px}#roti-root{right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom))}.roti-character>img{width:58px;height:58px}.roti-launch{padding:6px 12px 6px 6px;gap:8px}.roti-launch-caption{font-size:15px}.roti-launch-caption>span{font-size:11px}.roti-panel{width:calc(100vw - 24px);height:min(590px,calc(var(--roti-viewport-height,100dvh) - 115px));bottom:calc(100% + 9px)}.roti-quick button{min-height:40px}.roti-head p{font-size:11px}}
@media(max-height:500px){#roti-root[data-open=true] .roti-launch{display:none}.roti-panel{bottom:0;height:calc(var(--roti-viewport-height,100dvh) - 24px)}.roti-quick{display:none}.roti-privacy{display:none}}
@media(prefers-reduced-motion:reduce){#roti-root *,#roti-root *::before,#roti-root *::after{animation:none!important;transition:none!important}}
@media print{#roti-root{display:none!important}body.has-roti{padding-bottom:0}}

#roti-root{bottom:calc(max(18px,env(safe-area-inset-bottom)) + var(--roti-keyboard-gap,0px))}
#roti-root[data-keyboard=on][data-open=true] .roti-launch{display:none}
#roti-root[data-keyboard=on] .roti-panel{bottom:0;height:calc(var(--roti-viewport-height,100dvh) - 24px)}
#roti-root[data-keyboard=on] .roti-quick,#roti-root[data-keyboard=on] .roti-privacy{display:none}
@media(max-width:600px){#roti-root{bottom:calc(max(12px,env(safe-area-inset-bottom)) + var(--roti-keyboard-gap,0px))}}

#roti-root .roti-head::before,#roti-root .roti-head::after{display:none!important}

/* Perspective is an interim presentation of the supplied image, not a 3D model. */
.roti-panel{backdrop-filter:none;background:#07182b;box-shadow:0 12px 30px #0009}
.roti-launch{perspective:650px;box-shadow:0 5px 16px #0007}
.roti-character{transform-style:preserve-3d;transition:transform .22s ease-out}
.roti-character>img{border:1px solid #d8b56e77;box-shadow:4px 5px 0 #07101b,7px 8px 0 #b68c3844,0 12px 18px #0008}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){#roti-root[data-motion=normal] .roti-launch:hover .roti-character{transform:rotateY(-16deg) rotateX(5deg) translateZ(12px)}}