.hp-ai {
--hp-red: #b71923;
--hp-red-deep: #821018;
--hp-red-soft: #f7e9ea;
--hp-gold: #f4b41f;
--hp-ink: #202328;
--hp-muted: #697077;
--hp-card: #ffffff;
position: fixed;
right: 24px;
bottom: 18px;
z-index: 999999;
color: var(--hp-ink);
font: 14px/1.45 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.hp-ai *,
.hp-ai *::before,
.hp-ai *::after {
box-sizing: border-box;
}
.hp-ai button,
.hp-ai input {
font: inherit;
}
.hp-ai button:focus-visible,
.hp-ai a:focus-visible,
.hp-ai input:focus-visible {
outline: 3px solid #f3b6bb;
outline-offset: 3px;
} .hp-toribio-launcher {
position: relative;
width: 390px;
height: 280px;
pointer-events: none;
transition: width .3s ease, height .3s ease;
}
.hp-toribio-character,
.hp-toribio-bubble {
pointer-events: auto;
}
.hp-toribio-glow {
position: absolute;
right: 10px;
bottom: 2px;
width: 190px;
height: 190px;
border-radius: 50%;
background:
radial-gradient(circle at center, rgba(183,25,35,.22) 0 26%, rgba(244,180,31,.11) 48%, transparent 72%);
filter: blur(3px);
animation: hp-toribio-glow 6.5s ease-in-out infinite;
}
.hp-toribio-character {
position: absolute;
right: 0;
bottom: 0;
width: 185px;
height: 250px;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
transform-origin: 70% 100%;
animation: hp-toribio-float 7.2s cubic-bezier(.45,.05,.55,.95) infinite;
transition: transform .24s ease, opacity .24s ease, filter .24s ease;
}
.hp-toribio-character:hover {
animation-play-state: paused;
transform: translateY(-6px) rotate(-1.5deg) scale(1.04);
}
.hp-toribio-character.hp-toribio-greeting {
animation: hp-toribio-greeting 2.6s cubic-bezier(.35,.05,.25,1) 1;
}
@keyframes hp-toribio-greeting {
0%, 12%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
28% { transform: translateY(-4px) rotate(-1.1deg) scale(1.01); }
42% { transform: translateY(-5px) rotate(1.25deg) scale(1.012); }
56% { transform: translateY(-5px) rotate(-.75deg) scale(1.01); }
70% { transform: translateY(-3px) rotate(.45deg) scale(1.006); }
84% { transform: translateY(-1px) rotate(0deg) scale(1.002); }
}
.hp-toribio-image-wrap {
position: absolute;
inset: 0;
display: block;
overflow: hidden;
border-radius: 44% 44% 28px 28px;
filter: drop-shadow(0 15px 18px rgba(29,12,12,.23));
}
.hp-toribio-image-wrap::after {
content: "";
position: absolute;
inset: auto 0 0;
height: 30%;
background: linear-gradient(to bottom, transparent, rgba(255,255,255,.95) 72%, #fff 100%);
pointer-events: none;
}
.hp-toribio-character img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: 50% 10%;
transform: scale(1.16);
transform-origin: 50% 10%;
mix-blend-mode: multiply;
user-select: none;
-webkit-user-drag: none;
}
.hp-toribio-status {
position: absolute;
right: 18px;
top: 20px;
z-index: 3;
width: 15px;
height: 15px;
border: 3px solid #fff;
border-radius: 50%;
background: #25c56a;
box-shadow: 0 0 0 0 rgba(37,197,106,.55);
animation: hp-toribio-status 3.6s infinite;
}
.hp-toribio-bubble {
position: absolute;
left: 0;
bottom: 88px;
width: 235px;
min-height: 112px;
padding: 15px 42px 14px 17px;
border: 1px solid rgba(183,25,35,.12);
border-radius: 22px 22px 5px 22px;
background:
linear-gradient(#fff,#fff) padding-box,
linear-gradient(145deg, rgba(183,25,35,.4), rgba(244,180,31,.35)) border-box;
box-shadow: 0 16px 38px rgba(54,15,18,.18), 0 3px 8px rgba(0,0,0,.07);
color: var(--hp-ink);
text-align: left;
cursor: pointer;
animation: hp-toribio-bubble-in .6s cubic-bezier(.2,.8,.2,1) both;
transition: transform .2s ease, box-shadow .2s ease;
}
.hp-toribio-bubble:hover {
transform: translateY(-3px);
box-shadow: 0 19px 42px rgba(54,15,18,.23), 0 4px 10px rgba(0,0,0,.08);
}
.hp-toribio-bubble::after {
content: "";
position: absolute;
right: -14px;
bottom: 20px;
width: 28px;
height: 28px;
background: #fff;
clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.hp-toribio-bubble-kicker {
display: block;
margin-bottom: 4px;
color: var(--hp-red);
font-size: 10px;
font-weight: 900;
letter-spacing: .09em;
}
.hp-toribio-bubble-title {
display: block;
margin-bottom: 5px;
color: #241f20;
font-size: 16px;
line-height: 1.2;
}
.hp-toribio-bubble-message {
display: block;
color: #5f6268;
font-size: 12px;
line-height: 1.4;
transition: opacity .18s ease, transform .18s ease;
}
.hp-toribio-bubble-message.hp-toribio-bubble-fade {
opacity: 0;
transform: translateY(4px);
}
.hp-toribio-bubble-arrow {
position: absolute;
right: 15px;
top: 50%;
display: grid;
place-items: center;
width: 26px;
height: 26px;
margin-top: -13px;
border-radius: 50%;
background: var(--hp-red);
color: #fff;
font-size: 15px;
font-weight: 900;
}
.hp-toribio-launcher-open {
width: 120px;
height: 115px;
}
.hp-toribio-launcher-open .hp-toribio-bubble,
.hp-toribio-launcher-open .hp-toribio-glow {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.hp-toribio-launcher-open .hp-toribio-character {
width: 92px;
height: 112px;
right: 0;
bottom: 0;
animation: hp-toribio-mini 7s ease-in-out infinite;
}
.hp-toribio-launcher-open .hp-toribio-status {
width: 13px;
height: 13px;
right: 7px;
top: 7px;
} .hp-ai-panel {
position: absolute;
right: 0;
bottom: 126px;
display: flex;
flex-direction: column;
width: min(410px, calc(100vw - 28px));
height: min(610px, calc(100dvh - 154px));
min-height: 360px;
overflow: hidden;
border: 1px solid #eadfe0;
border-radius: 24px;
background: #fff;
box-shadow: 0 26px 75px rgba(43,12,15,.3), 0 6px 18px rgba(0,0,0,.08);
transform-origin: 90% 100%;
animation: hp-ai-panel-in .28s cubic-bezier(.2,.8,.2,1);
}
.hp-ai-panel[hidden] {
display: none;
}
.hp-ai .hp-ai-header {
display: flex;
align-items: center;
gap: 12px;
min-height: 78px;
padding: 12px 15px;
background:
radial-gradient(circle at 92% -10%, rgba(244,180,31,.36), transparent 34%),
linear-gradient(120deg, var(--hp-red-deep), var(--hp-red));
color: #fff;
flex: none;
}
.hp-ai-avatar {
display: grid;
place-items: center;
width: 50px;
height: 50px;
overflow: hidden;
border: 2px solid rgba(255,255,255,.78);
border-radius: 50%;
background: #fff;
flex: none;
box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.hp-ai-avatar img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: 50% 10%;
transform: scale(1.2);
mix-blend-mode: multiply;
}
.hp-ai-heading {
display: flex;
flex-direction: column;
min-width: 0;
line-height: 1.22;
}
.hp-ai-heading strong {
color: #fff;
font-size: 18px;
font-weight: 850;
}
.hp-ai-heading small {
display: flex;
align-items: center;
gap: 6px;
margin-top: 4px;
color: #fff;
font-size: 11px;
opacity: .94;
}
.hp-ai-online-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #5df29a;
box-shadow: 0 0 0 3px rgba(93,242,154,.16);
}
.hp-ai-close {
display: grid;
place-items: center;
width: 38px;
height: 38px;
margin-left: auto;
padding: 0;
border: 0;
border-radius: 12px;
background: rgba(255,255,255,.14);
color: #fff;
font-size: 25px !important;
line-height: 1;
cursor: pointer;
}
.hp-ai-close:hover {
background: rgba(255,255,255,.26);
}
.hp-ai-welcome {
display: grid;
gap: 3px;
padding: 12px 16px;
border-bottom: 1px solid #f0e7e7;
background: linear-gradient(135deg,#fff8f8,#fffdf7);
color: #4e4244;
flex: none;
}
.hp-ai-welcome strong {
color: var(--hp-red);
font-size: 13px;
}
.hp-ai-welcome span {
font-size: 11px;
line-height: 1.45;
}
.hp-ai-messages {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 16px 15px 10px;
background:
radial-gradient(circle at 90% 5%, rgba(183,25,35,.035), transparent 28%),
#fbf8f7;
overscroll-behavior: contain;
}
.hp-ai-line {
max-width: 88%;
width: fit-content;
margin: 0 0 11px;
padding: 11px 13px;
border-radius: 16px;
white-space: pre-wrap;
overflow-wrap: anywhere;
line-height: 1.5;
}
.hp-ai-assistant {
border: 1px solid #eee5e3;
border-bottom-left-radius: 5px;
background: #fff;
box-shadow: 0 3px 9px rgba(41,24,23,.05);
}
.hp-ai-user {
margin-left: auto;
border-bottom-right-radius: 5px;
background: linear-gradient(135deg,var(--hp-red),var(--hp-red-deep));
color: #fff;
box-shadow: 0 4px 10px rgba(135,16,25,.16);
}
.hp-ai-product {
display: flex;
align-items: center;
gap: 11px;
margin: 0 0 9px;
padding: 9px;
border: 1px solid #eee4e2;
border-radius: 15px;
background: #fff;
box-shadow: 0 3px 10px rgba(41,24,23,.05);
color: var(--hp-ink) !important;
text-decoration: none !important;
transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.hp-ai-product:hover {
border-color: #d7a4a8;
transform: translateY(-2px);
box-shadow: 0 7px 18px rgba(74,23,27,.1);
}
.hp-ai-product img {
width: 64px;
height: 64px;
flex: none;
object-fit: cover;
border-radius: 11px;
background: #f6f1ef;
}
.hp-ai-product span {
display: grid;
min-width: 0;
gap: 3px;
}
.hp-ai-product strong {
color: var(--hp-ink);
font-size: 13px;
line-height: 1.3;
}
.hp-ai-product small {
color: var(--hp-muted);
font-size: 12px;
}
.hp-ai-product .hp-ai-buy-label {
margin-top: 2px;
color: var(--hp-red);
font-weight: 800;
}
.hp-ai-location {
display: grid;
gap: 3px;
margin: 0 0 9px;
padding: 11px 12px;
border: 1px solid #eadfe0;
border-radius: 14px;
background: #fff;
color: var(--hp-ink) !important;
text-decoration: none !important;
}
.hp-ai-location strong {
font-size: 13px;
}
.hp-ai-location small {
color: var(--hp-muted);
font-size: 12px;
}
.hp-ai-location span {
color: var(--hp-red);
font-size: 12px;
font-weight: 800;
}
.hp-ai-whatsapp {
display: block;
margin: 10px 0 14px;
padding: 10px 12px;
border: 1px solid #b8dec5;
border-radius: 11px;
background: #eef9f1;
color: #176537 !important;
text-align: center;
text-decoration: none !important;
font-weight: 750;
}
.hp-ai-suggestions {
display: flex;
gap: 7px;
padding: 8px 12px 2px;
overflow-x: auto;
background: #fff;
flex: none;
scrollbar-width: none;
}
.hp-ai-suggestions::-webkit-scrollbar {
display: none;
}
.hp-ai-suggestions button {
flex: none;
padding: 7px 10px;
border: 1px solid #eadadb;
border-radius: 999px;
background: #fff8f8;
color: #6e3035;
font-size: 11px;
font-weight: 750;
cursor: pointer;
transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.hp-ai-suggestions button:hover {
border-color: #d6a0a4;
background: #fff0f1;
transform: translateY(-1px);
}
.hp-ai-form {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
padding: 10px 12px 5px;
background: #fff;
flex: none;
}
.hp-ai-form input {
flex: 1;
min-width: 0;
height: 44px;
margin: 0;
padding: 0 13px;
border: 1px solid #ddd5d5;
border-radius: 13px;
background: #fff;
color: var(--hp-ink);
box-shadow: inset 0 1px 2px rgba(0,0,0,.02);
outline: none;
}
.hp-ai-form input:focus {
border-color: var(--hp-red);
box-shadow: 0 0 0 3px rgba(183,25,35,.08);
}
.hp-ai-form input::placeholder {
color: #909399;
}
.hp-ai-form button {
display: inline-flex;
align-items: center;
gap: 6px;
min-width: 88px;
height: 44px;
padding: 0 12px;
border: 0;
border-radius: 13px;
background: linear-gradient(135deg,var(--hp-red),var(--hp-red-deep));
color: #fff;
font-weight: 800;
cursor: pointer;
}
.hp-ai-form button svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.hp-ai-form button:disabled {
opacity: .6;
cursor: wait;
}
.hp-ai-note {
margin: 0;
padding: 5px 14px 10px;
background: #fff;
color: #8a8587;
font-size: 9.5px;
line-height: 1.3;
text-align: center;
flex: none;
}
.hp-ai-line.hp-ai-pending {
min-width: 185px;
}
.hp-ai-typing {
display: inline-flex;
align-items: center;
gap: 4px;
color: #8e454b;
font-weight: 650;
}
.hp-ai-typing i {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
animation: hp-ai-typing-dot 1.15s ease-in-out infinite;
}
.hp-ai-typing i:nth-child(2) { animation-delay: .12s; }
.hp-ai-typing i:nth-child(3) { animation-delay: .24s; }
@keyframes hp-toribio-float {
0%, 14%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
28% { transform: translateY(-4px) rotate(-0.35deg) scale(1.004); }
42% { transform: translateY(-7px) rotate(0.45deg) scale(1.008); }
56% { transform: translateY(-5px) rotate(0deg) scale(1.006); }
72% { transform: translateY(-2px) rotate(-0.2deg) scale(1.002); }
86% { transform: translateY(0) rotate(0deg) scale(1); }
}
@keyframes hp-toribio-mini {
0%, 18%, 100% { transform: translateY(0) rotate(0deg); }
42% { transform: translateY(-3px) rotate(.25deg); }
65% { transform: translateY(-1px) rotate(-.15deg); }
}
@keyframes hp-toribio-glow {
0%,100% { transform: scale(.96); opacity: .72; }
50% { transform: scale(1.06); opacity: 1; }
}
@keyframes hp-toribio-status {
0% { box-shadow: 0 0 0 0 rgba(37,197,106,.55); }
70% { box-shadow: 0 0 0 8px rgba(37,197,106,0); }
100% { box-shadow: 0 0 0 0 rgba(37,197,106,0); }
}
@keyframes hp-toribio-bubble-in {
from { opacity: 0; transform: translateX(12px) translateY(10px) scale(.96); }
to { opacity: 1; transform: translateX(0) translateY(0) scale(1); }
}
@keyframes hp-ai-panel-in {
from { opacity: 0; transform: translateY(12px) scale(.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes hp-ai-typing-dot {
0%,60%,100% { transform: translateY(0); opacity: .35; }
30% { transform: translateY(-4px); opacity: 1; }
}
@media (max-width: 720px) {
.hp-ai {
right: 10px;
bottom: max(8px, env(safe-area-inset-bottom));
}
.hp-toribio-launcher {
width: 285px;
height: 205px;
}
.hp-toribio-character {
width: 128px;
height: 182px;
}
.hp-toribio-glow {
width: 135px;
height: 135px;
}
.hp-toribio-bubble {
width: 178px;
min-height: 92px;
bottom: 62px;
padding: 12px 34px 11px 13px;
border-radius: 18px 18px 5px 18px;
}
.hp-toribio-bubble-kicker {
font-size: 8px;
}
.hp-toribio-bubble-title {
font-size: 13px;
}
.hp-toribio-bubble-message {
font-size: 10px;
}
.hp-toribio-bubble-arrow {
right: 10px;
width: 23px;
height: 23px;
}
.hp-toribio-launcher-open {
width: 84px;
height: 92px;
}
.hp-toribio-launcher-open .hp-toribio-character {
width: 72px;
height: 88px;
}
.hp-ai-panel {
position: fixed;
right: 10px;
bottom: calc(96px + env(safe-area-inset-bottom));
width: calc(100vw - 20px);
height: min(650px, calc(100dvh - 116px - env(safe-area-inset-bottom)));
border-radius: 20px;
}
.hp-ai-welcome {
padding: 10px 13px;
}
.hp-ai-form button span {
display: none;
}
.hp-ai-form button {
min-width: 46px;
width: 46px;
justify-content: center;
}
}
@media (max-width: 380px) {
.hp-toribio-launcher {
width: 250px;
}
.hp-toribio-bubble {
width: 158px;
}
.hp-toribio-character {
width: 116px;
height: 165px;
}
}
@media (prefers-reduced-motion: reduce) {
.hp-toribio-character,
.hp-toribio-glow,
.hp-toribio-status,
.hp-toribio-bubble,
.hp-ai-panel,
.hp-ai-typing i {
animation: none !important;
}
.hp-toribio-bubble,
.hp-toribio-character,
.hp-ai-product,
.hp-ai-suggestions button {
transition: none !important;
}
} .hp-toribio-image-wrap {
overflow: visible !important;
}
.hp-toribio-pose {
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
display: block;
object-fit: contain !important;
object-position: center bottom !important;
transform: none !important;
mix-blend-mode: normal !important;
opacity: 1;
transition: opacity .52s cubic-bezier(.22,.61,.36,1);
will-change: opacity;
}
.hp-toribio-pose-b { opacity: 0; }
.hp-ai[data-toribio-pose="wave"] .hp-toribio-character {
animation: hp-pose-wave 3.6s ease-in-out infinite !important;
}
.hp-ai[data-toribio-pose="thinking"] .hp-toribio-character {
animation: hp-pose-thinking 4.8s ease-in-out infinite !important;
}
.hp-ai[data-toribio-pose="listening"] .hp-toribio-character {
animation: hp-pose-listening 5.2s ease-in-out infinite !important;
}
.hp-ai[data-toribio-pose="pointing"] .hp-toribio-character {
animation: hp-pose-pointing 4.2s ease-in-out infinite !important;
}
.hp-ai[data-toribio-pose="thumbsup"] .hp-toribio-character {
animation: hp-pose-thumbsup 3.8s ease-in-out infinite !important;
}
.hp-ai[data-toribio-pose="idle"] .hp-toribio-character {
animation: hp-pose-idle 6.8s ease-in-out infinite !important;
}
@keyframes hp-pose-idle {
0%,100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-2px) scale(1.003); }
}
@keyframes hp-pose-wave {
0%,100% { transform: translateY(0) rotate(0deg); }
40% { transform: translateY(-4px) rotate(-.6deg); }
65% { transform: translateY(-3px) rotate(.45deg); }
}
@keyframes hp-pose-thinking {
0%,100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-2px) rotate(.28deg); }
}
@keyframes hp-pose-listening {
0%,100% { transform: translateY(0); }
50% { transform: translateY(-2px); }
}
@keyframes hp-pose-pointing {
0%,100% { transform: translateX(0) translateY(0); }
50% { transform: translateX(-3px) translateY(-2px); }
}
@keyframes hp-pose-thumbsup {
0%,100% { transform: translateY(0) scale(1); }
45% { transform: translateY(-3px) scale(1.007); }
} .hp-toribio-canvas{display:block;width:100%;height:100%;object-fit:contain}
.hp-toribio-image-wrap,.hp-toribio-character,.hp-toribio-pose{animation:none!important;transform:none!important}
.hp-toribio-image-wrap{aspect-ratio:2/3}
.hp-ai .hp-toribio-character{width:168px;height:252px}
.hp-ai .hp-toribio-image-wrap{width:100%;height:100%;aspect-ratio:auto;border-radius:0;inset:0}
.hp-ai .hp-toribio-image-wrap::after{display:none}
.hp-ai .hp-toribio-launcher-open .hp-toribio-character{width:64px;height:96px}
@media(max-width:600px){.hp-ai .hp-toribio-character{width:112px;height:168px}.hp-ai .hp-toribio-launcher-open .hp-toribio-character{width:56px;height:84px}} .hp-ai .hp-toribio-character{
width:168px !important;
height:252px !important;
animation:none !important;
transform:none !important;
}
.hp-ai .hp-toribio-image-wrap{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
overflow:visible !important;
border-radius:0 !important;
filter:none !important;
animation:none !important;
transform:none !important;
}
.hp-ai .hp-toribio-image-wrap::after{display:none !important}
.hp-ai .hp-toribio-fallback,
.hp-ai .hp-toribio-canvas{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
display:block !important;
}
.hp-ai .hp-toribio-fallback{
z-index:1 !important;
object-fit:contain !important;
object-position:center bottom !important;
transform:none !important;
mix-blend-mode:normal !important;
opacity:1 !important;
visibility:visible !important;
filter:drop-shadow(0 14px 16px rgba(29,12,12,.20));
}
.hp-ai .hp-toribio-canvas{
z-index:2 !important;
opacity:1 !important;
visibility:visible !important;
pointer-events:auto !important;
background:transparent !important;
}
.hp-ai .hp-toribio-launcher-open .hp-toribio-character{
width:64px !important;
height:96px !important;
}
@media(max-width:600px){
.hp-ai .hp-toribio-character{width:112px !important;height:168px !important}
.hp-ai .hp-toribio-launcher-open .hp-toribio-character{width:56px !important;height:84px !important}
} .hp-ai .hp-toribio-fallback{padding:2%;box-sizing:border-box}
.hp-ai .hp-toribio-canvas{max-width:none!important;max-height:none!important} .hp-ai .hp-toribio-launcher,.hp-ai .hp-toribio-character,
.hp-ai .hp-toribio-image-wrap,.hp-ai .hp-toribio-canvas{
animation:none!important;transform:none!important;transition:none!important;
}
.hp-ai .hp-toribio-glow{animation:none!important;transform:none!important}
.hp-ai .hp-toribio-fallback{padding:5%!important} .hp-ai .hp-ai-avatar{position:relative!important;overflow:hidden!important}
.hp-ai .hp-ai-avatar img{
position:absolute!important;width:219.5122%!important;height:329.2683%!important;
max-width:none!important;max-height:none!important;min-width:0!important;
left:-63.4146%!important;top:-9.7561%!important;
object-fit:fill!important;object-position:center!important;
transform:none!important;mix-blend-mode:normal!important;
filter:none!important;image-rendering:auto!important;
} .hp-ai{left:24px!important;right:auto!important;bottom:88px!important}
.hp-ai .hp-toribio-character{left:0!important;right:auto!important}
.hp-ai .hp-toribio-glow{left:0;right:auto}
.hp-ai .hp-toribio-bubble{left:auto;right:0;border-radius:22px 22px 22px 5px}
.hp-ai .hp-toribio-bubble::after{left:-14px;right:auto;clip-path:polygon(100% 0,100% 100%,0 50%)}
.hp-ai .hp-ai-panel{left:0;right:auto;bottom:112px;transform-origin:10% 100%;min-height:0;height:min(610px,calc(100dvh - 224px))}
@media(max-width:600px){
.hp-ai{left:10px!important;bottom:calc(88px + env(safe-area-inset-bottom))!important}
.hp-ai .hp-ai-panel{left:10px;right:auto;bottom:calc(184px + env(safe-area-inset-bottom));height:min(650px,calc(100dvh - 204px - env(safe-area-inset-bottom)))}
.hp-ai .hp-toribio-bubble{border-radius:18px 18px 18px 5px}
}