.mi-widget{
  position: fixed;
  z-index: var(--mi-z, 999999);
}

/* position */
.mi-widget.mi-left{ left: var(--mi-x, 24px); right: auto; }
.mi-widget.mi-right{ right: var(--mi-x, 24px); left: auto; }
.mi-widget.mi-bottom{ bottom: var(--mi-y, 24px); top: auto; }
.mi-widget.mi-top{ top: var(--mi-y, 24px); bottom: auto; }

.mi-anchor{
  position: relative;
  width: var(--mi-btn, 58px);
  height: var(--mi-btn, 58px);
}

/* main button */
.mi-toggle{
  width: var(--mi-btn, 58px);
  height: var(--mi-btn, 58px);
  border: var(--mi-btn-bw, 0px) solid var(--mi-btn-bc, #e5e7eb);
  padding: 0 !important;
  cursor: pointer;
  border-radius: var(--mi-btn-radius, 999px);
  background: var(--mi-btn-bg, #ffffff);
  box-shadow: var(--mi-btn-shadow, 0 12px 30px rgba(0,0,0,.18));
  transition: transform var(--mi-anim, 200ms) ease, box-shadow var(--mi-anim, 200ms) ease, background var(--mi-anim, 200ms) ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mi-toggle:hover{
  transform: translateY(calc(-1 * var(--mi-lift, 2px))) scale(var(--mi-scale, 1.03));
  background: var(--mi-btn-bg-hover, #ffffff);
}
.mi-toggle-icon{
  width: var(--mi-main-icon, 32px);
  /* height: var(--mi-main-icon, 32px); */
  display: block;
}

/* Tooltip */
.mi-tooltip{
  position: absolute;
  max-width: var(--mi-tip-max, 220px);
  padding: var(--mi-tip-py, 8px) var(--mi-tip-px, 12px);
  border-radius: var(--mi-tip-radius, 12px);
  background: var(--mi-tip-bg, rgba(17,24,39,.92));
  color: var(--mi-tip-color, #fff);
  box-shadow: var(--mi-tip-shadow, 0 10px 25px rgba(0,0,0,.18));
  font-size: var(--mi-tip-fs, 13px);
  line-height: 1.2;
  white-space: nowrap;
  opacity: 1;
  transition: opacity var(--mi-anim, 200ms) ease, transform var(--mi-anim, 200ms) ease;
  pointer-events: none;
}
.mi-widget.is-open .mi-tooltip{
  opacity: 0;
  transform: translateY(6px);
}
.mi-widget.mi-left .mi-tooltip.mi-tip-top,
.mi-widget.mi-left .mi-tooltip.mi-tip-bottom { left: 0; right: auto; }
.mi-widget.mi-right .mi-tooltip.mi-tip-top,
.mi-widget.mi-right .mi-tooltip.mi-tip-bottom { right: 0; left: auto; }

.mi-tooltip.mi-tip-top{
  bottom: calc(var(--mi-btn, 58px) + var(--mi-tip-gap, 10px));
}
.mi-tooltip.mi-tip-bottom{
  top: calc(var(--mi-btn, 58px) + var(--mi-tip-gap, 10px));
}
.mi-tooltip.mi-tip-left{
  right: calc(var(--mi-btn, 58px) + var(--mi-tip-gap, 10px));
  top: 50%;
  transform: translateY(-50%);
}
.mi-widget.is-open .mi-tooltip.mi-tip-left{
  transform: translateY(calc(-50% + 6px));
}
.mi-tooltip.mi-tip-right{
  left: calc(var(--mi-btn, 58px) + var(--mi-tip-gap, 10px));
  top: 50%;
  transform: translateY(-50%);
}
.mi-widget.is-open .mi-tooltip.mi-tip-right{
  transform: translateY(calc(-50% + 6px));
}

/* MENU */
.mi-menu{
  position: absolute;
  width: var(--mi-menu-w, 220px);
  padding: var(--mi-menu-pad, 10px);
  border-radius: var(--mi-menu-radius, 18px);
  background: var(--mi-menu-bg, rgba(255,255,255,.95));
  box-shadow: var(--mi-menu-shadow, 0 18px 55px rgba(0,0,0,.25));
  backdrop-filter: blur(var(--mi-menu-blur, 10px));
  opacity: 0;
  pointer-events: none;
  transform-origin: bottom left;
  transition: transform var(--mi-anim, 200ms) ease, opacity var(--mi-anim, 200ms) ease;
}
.mi-widget.mi-left .mi-menu{ left: 0; right: auto; }
.mi-widget.mi-right .mi-menu{ right: 0; left: auto; transform-origin: bottom right; }

.mi-widget.mi-bottom .mi-menu{
  bottom: calc(var(--mi-btn, 58px) + var(--mi-menu-offset, 14px));
}
.mi-widget.mi-top .mi-menu{
  top: calc(var(--mi-btn, 58px) + var(--mi-menu-offset, 14px));
}

/* Closed transforms by animation type */
.mi-widget.mi-anim-slide.mi-bottom .mi-menu{ transform: translateY(10px); }
.mi-widget.mi-anim-slide.mi-top .mi-menu{ transform: translateY(-10px); }

.mi-widget.mi-anim-fade .mi-menu{ transform: none; }

.mi-widget.mi-anim-zoom.mi-bottom .mi-menu{ transform: translateY(10px) scale(.96); }
.mi-widget.mi-anim-zoom.mi-top .mi-menu{ transform: translateY(-10px) scale(.96); }

.mi-widget.mi-anim-pop .mi-menu{ transform: scale(.86); }

.mi-widget.mi-anim-flip{ perspective: 900px; }
.mi-widget.mi-anim-flip.mi-bottom .mi-menu{ transform: translateY(10px) rotateX(10deg); }
.mi-widget.mi-anim-flip.mi-top .mi-menu{ transform: translateY(-10px) rotateX(-10deg); }

.mi-widget.is-open .mi-menu{
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

/* ===== Layouts ===== */
.mi-menu-grid{ gap: var(--mi-menu-gap, 10px); }

/* Grid */
.mi-widget.mi-layout-grid .mi-menu-grid{
  display: grid;
  grid-template-columns: repeat(var(--mi-menu-cols, 3), 1fr);
}

/* Row */
.mi-widget.mi-layout-row .mi-menu-grid{
  display: flex;
  flex-wrap: wrap;
}

/* List */
.mi-widget.mi-layout-list .mi-menu-grid{
  display: flex;
  flex-direction: column;
}

/* Item */
.mi-item{
  width: var(--mi-item, 56px);
  height: var(--mi-item, 56px);
  border-radius: var(--mi-item-radius, 16px);
  background: var(--mi-item-bg, #ffffff);
  box-shadow: var(--mi-item-shadow, 0 10px 25px rgba(0,0,0,.10));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--mi-anim, 200ms) ease, box-shadow var(--mi-anim, 200ms) ease;
  text-decoration: none;
}
.mi-item:hover{
  transform: translateY(calc(-1 * var(--mi-lift, 2px)));
  box-shadow: var(--mi-item-shadow-h, 0 14px 32px rgba(0,0,0,.14));
}

/* List item becomes full width */
.mi-widget.mi-layout-list .mi-item{
  width: 100%;
  height: auto;
  justify-content: flex-start;
  padding: 10px 12px;
}

/* inner */
.mi-item-inner{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--mi-label-gap, 6px);
}
.mi-widget.mi-layout-list .mi-item-inner{
  justify-content: flex-start;
  width: 100%;
}

/* icon */
.mi-item img{
  width: var(--mi-item-icon, 28px);
  height: var(--mi-item-icon, 28px);
  display: block;
}

/* label */
.mi-label{
  display: none;
  font-size: var(--mi-label-fs, 12px);
  color: var(--mi-label-color, #111827);
  line-height: 1.2;
}
.mi-widget.mi-label-on .mi-label{ display: inline-block; }

.mi-widget.mi-label-below .mi-item-inner{ flex-direction: column; }
.mi-widget.mi-label-right .mi-item-inner{ flex-direction: row; }

/* list + label below => align start */
.mi-widget.mi-layout-list.mi-label-below .mi-item-inner{
  align-items: flex-start;
}

/* Attention animations */
.mi-toggle-wrap{ display: inline-flex; }
.mi-widget.mi-attn-none .mi-toggle-wrap{ animation: none; }

.mi-widget.mi-attn-pulse:not(.is-open) .mi-toggle-wrap{
  animation: miPulse 1.8s ease-in-out infinite;
}
@keyframes miPulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }

.mi-widget.mi-attn-bounce:not(.is-open) .mi-toggle-wrap{
  animation: miBounce 1.8s ease-in-out infinite;
}
@keyframes miBounce{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

.mi-widget.mi-attn-shake:not(.is-open) .mi-toggle-wrap{
  animation: miShake 2.2s ease-in-out infinite;
}
@keyframes miShake{
  0%,100%{transform:rotate(0deg)}
  20%{transform:rotate(3deg)}
  40%{transform:rotate(-3deg)}
  60%{transform:rotate(2deg)}
  80%{transform:rotate(-2deg)}
}

.mi-widget.mi-attn-wiggle:not(.is-open) .mi-toggle-wrap{
  animation: miWiggle 2s ease-in-out infinite;
}
@keyframes miWiggle{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(3px)}
  50%{transform:translateX(-3px)}
  75%{transform:translateX(2px)}
}

.mi-widget.mi-attn-glow:not(.is-open) .mi-toggle{
  animation: miGlow 2s ease-in-out infinite;
}
@keyframes miGlow{
  0%,100%{filter:drop-shadow(0 0 0 rgba(0,0,0,0))}
  50%{filter:drop-shadow(0 10px 22px rgba(0,0,0,.28))}
}