: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; } /* keep flex layout, transform handles hiding */

.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;
}
/* min-width:0 is required here: without it, a flex item containing long
   text can be sized to its content instead of filling the row, which is
   what causes the "text splits into a narrow column with a big gap beside
   it" look instead of wrapping across the full bubble width. */
.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;
}
/* Desktop users have no camera to point at anything — on a full desktop
   browser the file picker just becomes a generic "upload any image" door,
   which invites unrelated uploads rather than genuine on-site photo ID.
   Scoped to #mag-panel (the embedded widget) only, so the test console
   page below — which intentionally wants photo testing on any device —
   keeps its camera button regardless of screen width. */
@media (min-width: 901px){
  #mag-panel #mag-photo-btn{ display:none; }
}
/* Defensive: forces our icon size regardless of any global "svg{...}" reset
   the surrounding theme might ship (a common cause of icons rendering as
   tiny/invisible dots inside someone else's site). */
#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; }

/* Keeps the file input technically visible/rendered (not display:none),
   which some mobile browsers — notably iOS Safari — require in order to
   honor a programmatic .click() and actually open the camera/file picker. */
.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;
}

/* ---------- MOBILE: full-screen modal instead of side panel ---------- */
@media (max-width: 900px){
  #mag-panel{
    width:100vw;
    height:100vh;
    height:100dvh; /* modern browsers: accounts for mobile browser chrome */
    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; /* prevents iOS Safari auto-zoom on focus */
  }
  #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%; }
}

/* Lock background scroll while the panel is open (mobile) */
html.mag-lock, html.mag-lock body{
  overflow:hidden;
  height:100%;
  overscroll-behavior:none;
}

/*NEW CHAT ICON TEXT BUBBLE*/
#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;
  }
}