:root{
--mag-crimson:#8c1c2c;
--mag-crimson-light:#b32c3f;
--mag-navy:#12172b;
--mag-navy-glass:rgba(18,23,43,0.72);
--mag-white:#f7f5f2;
--mag-radius:22px;
}
#mag-trigger{
position:fixed;
bottom:0px;
right:24px;
z-index:99998;
width:84px;
height:130px;
border:none;
background:none;
box-shadow:none;
padding:0;
cursor:pointer;
display:flex;
align-items:flex-end;
justify-content:center;
transition:transform .2s ease;
animation:mag-float 2.8s ease-in-out infinite;
}
#mag-trigger:hover{ transform:scale(1.06); animation-play-state:paused; }
.mag-eleph-svg{
width:84px;
height:130px;
overflow:visible;
filter:drop-shadow(0 4px 6px rgba(0,0,0,0.25));
}
.mag-eleph-gif{
width:100%;
height:100%;
object-fit:contain;
display:block;
filter:drop-shadow(0 4px 6px rgba(0,0,0,0.25));
pointer-events:none;
}
.mag-shadow{
animation: mag-shadow-pulse 2.8s ease-in-out infinite;
transform-origin: 50px 147px;
}
.mag-ear-left{
transform-origin: 30px 50px;
animation: mag-ear-flap-l 2.4s ease-in-out infinite;
}
.mag-ear-right{
transform-origin: 70px 50px;
animation: mag-ear-flap-r 2.4s ease-in-out infinite;
}
.mag-trunk{
transform-origin: 50px 62px;
animation: mag-trunk-sway 3.2s ease-in-out infinite;
}
.mag-eyes{
animation: mag-blink 4.5s ease-in-out infinite;
transform-origin: 50px 52px;
}
@keyframes mag-ear-flap-l{
0%,100%{ transform:rotate(0deg); }
50%{ transform:rotate(-9deg); }
}
@keyframes mag-ear-flap-r{
0%,100%{ transform:rotate(0deg); }
50%{ transform:rotate(9deg); }
}
@keyframes mag-trunk-sway{
0%,100%{ transform:rotate(0deg); }
30%{ transform:rotate(6deg); }
70%{ transform:rotate(-6deg); }
}
@keyframes mag-blink{
0%,90%,100%{ transform:scaleY(1); }
95%{ transform:scaleY(0.15); }
}
@keyframes mag-float{
0%,100%{ transform:translateY(0); }
50%{ transform:translateY(-8px); }
}
@keyframes mag-shadow-pulse{
0%,100%{ transform:scale(1); opacity:0.28; }
50%{ transform:scale(0.78); opacity:0.16; }
}
#mag-trigger.mag-trigger-hide{
display:none;
}
@media (prefers-reduced-motion: reduce){
#mag-trigger, .mag-ear-left, .mag-ear-right, .mag-trunk, .mag-eyes, .mag-shadow{ animation:none; }
}
#mag-panel{
position:fixed;
top:0;
right:0;
height:100vh;
width:400px;
max-width:100vw;
z-index:99999;
display:flex;
flex-direction:column;
background:var(--mag-navy-glass);
backdrop-filter:blur(18px) saturate(140%);
-webkit-backdrop-filter:blur(18px) saturate(140%);
border-left:1px solid rgba(255,255,255,0.08);
box-shadow:-10px 0 40px rgba(0,0,0,0.35);
transform:translateX(100%);
transition:transform .32s cubic-bezier(.4,0,.2,1);
}
#mag-panel.mag-open{ transform:translateX(0); }
#mag-panel.mag-hidden{ display:flex; } .mag-header{
display:flex;
align-items:center;
justify-content:space-between;
padding:18px 20px;
border-bottom:1px solid rgba(255,255,255,0.08);
}
.mag-header-title{
color:var(--mag-white);
font-weight:600;
font-size:16px;
display:flex;
align-items:center;
gap:8px;
}
.mag-header-avatar{
font-size:19px;
width:30px;height:30px;
display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,0.08);
border-radius:50%;
}
.mag-header-dot{
width:8px;height:8px;border-radius:50%;
background:#3ddc84;
box-shadow:0 0 8px #3ddc84;
margin-left:2px;
}
#mag-close{
background:none;border:none;color:var(--mag-white);
font-size:26px;line-height:1;cursor:pointer;opacity:.7;
}
#mag-close:hover{ opacity:1; }
.mag-messages{
flex:1;
overflow-y:auto;
padding:20px;
display:flex;
flex-direction:column;
gap:12px;
}
.mag-msg{
max-width:85%;
padding:13px 17px;
border-radius:var(--mag-radius);
font-size:14.5px;
line-height:1.55;
overflow-wrap:anywhere;
}
.mag-msg-bot{
background:rgba(255,255,255,0.08);
color:var(--mag-white);
border-bottom-left-radius:6px;
align-self:flex-start;
display:flex;
align-items:flex-start;
gap:8px;
} .mag-msg-text{ flex:1; min-width:0; }
.mag-speak-btn{
flex-shrink:0;
width:26px;height:26px;
margin-top:1px;
border:none;
border-radius:50%;
background:rgba(255,255,255,0.12);
color:var(--mag-white);
display:flex;align-items:center;justify-content:center;
cursor:pointer;
opacity:.75;
padding:0;
}
.mag-speak-btn svg{
width:15px !important;
height:15px !important;
min-width:15px !important;
min-height:15px !important;
display:block !important;
flex-shrink:0 !important;
}
.mag-speak-btn:hover{ opacity:1; }
.mag-speak-btn.mag-speak-active{
background:var(--mag-crimson);
opacity:1;
}
.mag-msg-user{
background:linear-gradient(135deg,var(--mag-crimson) 0%,var(--mag-crimson-light) 100%);
color:#fff;
border-bottom-right-radius:6px;
align-self:flex-end;
}
.mag-msg-image{
padding:4px;
background:rgba(255,255,255,0.08);
}
.mag-msg-image img{
display:block;
max-width:220px;
max-height:220px;
width:100%;
height:auto;
border-radius:calc(var(--mag-radius) - 4px);
object-fit:cover;
}
.mag-quick-chips{
display:flex;
flex-wrap:wrap;
gap:9px;
margin-top:2px;
}
.mag-chip{
background:rgba(255,255,255,0.08);
border:1px solid rgba(255,255,255,0.15);
color:var(--mag-white);
padding:8px 16px;
border-radius:999px;
font-size:12.5px;
cursor:pointer;
transition:background .2s;
}
.mag-chip:hover{ background:rgba(255,255,255,0.16); }
.mag-input-row{
display:flex;
align-items:center;
gap:8px;
padding:14px 16px;
border-top:1px solid rgba(255,255,255,0.08);
}
#mag-input{
flex:1;
background:rgba(255,255,255,0.08);
border:1px solid rgba(255,255,255,0.12);
border-radius:999px;
padding:11px 16px;
color:var(--mag-white);
font-size:14px;
outline:none;
}
#mag-input::placeholder{ color:rgba(255,255,255,0.45); }
#mag-mic-btn, #mag-photo-btn, #mag-send{
width:42px;height:42px;
border-radius:50%;
border:none;
background:rgba(255,255,255,0.1);
color:var(--mag-white);
display:flex;align-items:center;justify-content:center;
cursor:pointer;
flex-shrink:0;
padding:0;
}
#mag-send{ background:var(--mag-crimson); }
#mag-mic-btn:hover, #mag-photo-btn:hover, #mag-send:hover{ opacity:.85; }
#mag-mic-btn.mag-mic-active{
background:var(--mag-crimson);
animation:mag-mic-pulse 1.2s ease-in-out infinite;
} @media (min-width: 901px){
#mag-panel #mag-photo-btn{ display:none; }
} #mag-mic-btn svg,
#mag-photo-btn svg,
#mag-send svg{
width:21px !important;
height:21px !important;
min-width:21px !important;
min-height:21px !important;
display:block !important;
flex-shrink:0 !important;
}
@keyframes mag-mic-pulse{
0%,100%{ box-shadow:0 0 0 0 rgba(140,28,44,0.5); }
50%{ box-shadow:0 0 0 8px rgba(140,28,44,0); }
}
.mag-hidden{ display:none; } .mag-visually-hidden{
position:absolute;
width:1px;height:1px;
padding:0;margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0;
} @media (max-width: 900px){
#mag-panel{
width:100vw;
height:100vh;
height:100dvh; border-left:none;
border-radius:0;
}
.mag-header{
padding-top:calc(16px + env(safe-area-inset-top));
}
.mag-input-row{
padding-bottom:calc(12px + env(safe-area-inset-bottom));
}
#mag-input{
font-size:16px; }
#mag-trigger{
bottom:env(safe-area-inset-bottom);
right:16px;
width:72px;
height:112px;
}
.mag-eleph-svg{ width:72px; height:112px; }
.mag-msg{ max-width:90%; }
} html.mag-lock, html.mag-lock body{
overflow:hidden;
height:100%;
overscroll-behavior:none;
} #mag-teaser{
position:fixed;
bottom:122px;
right:24px;
z-index:99997;
background:var(--mag-white);
color:var(--mag-navy);
padding:10px 16px;
border-radius:16px;
font-size:13.5px;
font-weight:600;
box-shadow:0 8px 24px rgba(0,0,0,0.25);
max-width:190px;
opacity:0;
transform:translateY(8px);
transition:opacity .3s ease, transform .3s ease;
pointer-events:none;
cursor:pointer;
}
#mag-teaser::after{
content:"";
position:absolute;
bottom:-6px;
right:28px;
width:12px;height:12px;
background:var(--mag-white);
transform:rotate(45deg);
}
#mag-teaser.mag-teaser-show{
opacity:1;
transform:translateY(0);
pointer-events:auto;
}
@media (max-width:900px){
#mag-teaser{
bottom:calc(108px + env(safe-area-inset-bottom));
right:16px;
}
}