/* --- Scope root --- */
.cfm{
  position:fixed;
  z-index:99999;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
  font-style: normal;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  isolation: isolate; /* prevent weird blend/stack contexts from themes */
}
.cfm, .cfm *{ box-sizing:border-box; }

/* --- Local "defensive reset" (only inside widget) --- */
.cfm :where(button, [type="button"], [type="submit"], a){
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  line-height: inherit;
  color: inherit;
}

.cfm :where(button, [type="button"], [type="submit"]){
  -webkit-appearance: none;
  appearance: none;
  background: none;
  background-image: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;
  text-shadow: none;
  outline: none;
  cursor: pointer;
}

.cfm :where(a){
  text-decoration: none;
  background: none;
  background-image: none;
  box-shadow: none;
  outline: none;
}

/* --- Button --- */
/* NOTE: doubled .cfm to beat global selectors like button, [type=button] */
.cfm.cfm .cfm-btn{
  width:var(--cfm-btn);
  height:var(--cfm-btn);
  border:0 !important;
  border-radius:var(--cfm-radius);
  padding:0 !important;
  margin:0;

  background:var(--cfm-btn-bg) !important;
  color:var(--cfm-btn-fg) !important;

  display:flex;
  align-items:center;
  justify-content:center;

  position:relative;
  cursor:pointer;

  /* prevent theme button styles */
  background-image:none !important;
  box-shadow:none; /* shadow is controlled by .cfm-shadow */
  text-shadow:none !important;
  filter:none !important;
  transform: translateZ(0); /* stable animations */
  user-select:none;
  -webkit-tap-highlight-color: transparent;

  transition:
    transform var(--cfm-btn-ms) ease,
    background var(--cfm-btn-ms) ease,
    color var(--cfm-btn-ms) ease;
  opacity: var(--cfm-opacity, 1);
}

.cfm-shadow{
  box-shadow: 0 12px 30px rgba(15,23,42,.18), 0 2px 6px rgba(15,23,42,.12);
}

/* Hover/active/focus parity */
.cfm.cfm .cfm-btn:hover,
.cfm.cfm .cfm-btn:focus,
.cfm.cfm .cfm-btn:active{
  background:var(--cfm-btn-bg-h) !important;
  color:var(--cfm-btn-fg-h) !important;
}

.cfm.cfm .cfm-btn:focus-visible{
  outline: none !important;
  background:var(--cfm-btn-bg-h) !important;
  color:var(--cfm-btn-fg-h) !important;
  box-shadow: 0 0 0 var(--cfm-ring-w) var(--cfm-ring),
              0 12px 30px rgba(15,23,42,.18),
              0 2px 6px rgba(15,23,42,.12);
}

/* Idle animation layers */
.cfm .cfm-btn::before,
.cfm .cfm-btn::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius: calc(var(--cfm-radius) + 8px);
  pointer-events:none;
  opacity:0;
}

/* Idle: breath (soft) */
.cfm .cfm-btn-idle-breath::before{
  border: 2px solid currentColor;
  animation: cfmIdleBreath var(--cfm-idle-ms) ease-in-out infinite;
}
@keyframes cfmIdleBreath{
  0%,100%{ opacity:0; transform: scale(1); }
  50%{ opacity:.18; transform: scale(1.08); }
}

/* Idle: pulse ring */
.cfm .cfm-btn-idle-pulse_ring::after{
  border: 2px solid currentColor;
  animation: cfmIdleRing var(--cfm-idle-ms) ease-out infinite;
}
@keyframes cfmIdleRing{
  0%{ opacity:0; transform: scale(1); }
  18%{ opacity:.22; }
  100%{ opacity:0; transform: scale(1.35); }
}

/* Idle: glow */
.cfm .cfm-btn-idle-glow::before{
  border: 0;
  box-shadow: 0 0 0 0 currentColor;
  animation: cfmIdleGlow var(--cfm-idle-ms) ease-in-out infinite;
}
@keyframes cfmIdleGlow{
  0%,100%{ opacity:0; box-shadow: 0 0 0 0 currentColor; }
  50%{ opacity:.16; box-shadow: 0 0 18px 6px currentColor; }
}

/* Idle: wiggle icon only */
.cfm .cfm-btn-idle-icon_wiggle .cfm-btn-ico{
  animation: cfmIdleIconWiggle var(--cfm-idle-ms) ease-in-out infinite;
  transform-origin: 50% 60%;
}
@keyframes cfmIdleIconWiggle{
  0%,86%,100%{ transform: rotate(0deg); }
  90%{ transform: rotate(6deg); }
  94%{ transform: rotate(-6deg); }
  98%{ transform: rotate(3deg); }
}

@media (prefers-reduced-motion: reduce){
  .cfm:not(.cfm-rm-override) .cfm-btn::before,
  .cfm:not(.cfm-rm-override) .cfm-btn::after,
  .cfm:not(.cfm-rm-override) .cfm-btn-idle-icon_wiggle .cfm-btn-ico{
    animation: none !important;
  }
}

/* Icon */
.cfm-btn-ico{
  display:flex;
  width:var(--cfm-ico);
  height:var(--cfm-ico);
  align-items:center;
  justify-content:center;
  line-height: 1;
}
.cfm-plus{ font-size:28px; line-height:1; font-weight:600; }

.cfm-icon-main{
  color: var(--cfm-main-svg);
  width:var(--cfm-ico);
  height:var(--cfm-ico);
}
.cfm .cfm-btn:hover .cfm-icon-main,
.cfm .cfm-btn:focus-visible .cfm-icon-main{ color: var(--cfm-main-svg-h); }

.cfm-icon{
  width:var(--cfm-ico);
  height:var(--cfm-ico);
  display:block;
}

/* Hover + Focus-visible animations */
.cfm .cfm-btn-anim-lift:hover,
.cfm .cfm-btn-anim-lift:focus-visible{ transform: translateY(-2px) scale(1.02); }

.cfm .cfm-btn-anim-rotate:hover,
.cfm .cfm-btn-anim-rotate:focus-visible{ transform: rotate(6deg) scale(1.02); }

.cfm .cfm-btn-anim-wiggle:hover,
.cfm .cfm-btn-anim-wiggle:focus-visible{ animation: cfmWiggle var(--cfm-btn-ms) ease-in-out 1; }

.cfm .cfm-btn-anim-glow:hover,
.cfm .cfm-btn-anim-glow:focus-visible{
  box-shadow: 0 0 0 0 rgba(37,99,235,.0), 0 16px 40px rgba(37,99,235,.22);
  transform: translateY(-1px);
}

.cfm .cfm-btn-anim-pulse:hover,
.cfm .cfm-btn-anim-pulse:focus-visible{ animation: cfmPulse 900ms ease-in-out infinite; }

@keyframes cfmWiggle{ 0%{transform:rotate(0deg)} 25%{transform:rotate(6deg)} 50%{transform:rotate(-6deg)} 75%{transform:rotate(3deg)} 100%{transform:rotate(0deg)} }
@keyframes cfmPulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }

/* --- Panel --- */
.cfm-panel{
  position:absolute;
  min-width: var(--cfm-panel-w);
  background: var(--cfm-panel-bg);
  border-radius: var(--cfm-panel-r);
  padding: var(--cfm-panel-p);

  /* defensive */
  box-shadow: -1px -1px 4px 0px #00000026, 1px 1px 4px 0px #00000026;
  border: 0;
  backdrop-filter: none;
  filter: none;

  display:block;
  visibility:hidden;
  opacity:0;
  transform: translateY(8px) scale(.98);
  pointer-events:none;
}

/* placement */
.cfm[data-lang] .cfm-panel{ bottom: calc(var(--cfm-btn) + 10px); right:0; }
.cfm[data-lang][style*="left"] .cfm-panel{ left:0; right:auto; }
.cfm[data-lang][style*="top"] .cfm-panel{ top: calc(var(--cfm-btn) + 10px); bottom:auto; }

.cfm.is-open .cfm-panel{ visibility:visible; pointer-events:auto; }
.cfm.is-closing .cfm-panel{ visibility:visible; pointer-events:none; }

.cfm-list{ display:flex; flex-direction:column; gap: var(--cfm-panel-gap); }

/* Panel links */
.cfm.cfm .cfm-item-link{
  display:flex;
  align-items:center;
  gap:10px;

  padding:10px 10px;
  border-radius: 14px;

  text-decoration:none !important;
  color: var(--cfm-text) !important;

  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  line-height: 1.2;

  transition: background var(--cfm-panel-ms) ease, color var(--cfm-panel-ms) ease;
}
.cfm .cfm-item-link:hover{ background: rgba(15,23,42,.04) !important; color: var(--cfm-text-h) !important; }

.cfm .cfm-item-link:focus-visible{
  outline:none !important;
  background: rgba(15,23,42,.04) !important;
  color: var(--cfm-text-h) !important;
  box-shadow: 0 0 0 var(--cfm-ring-w) var(--cfm-ring) !important;
}

.cfm-ico{
  width:40px;
  height:40px;
  border-radius: 14px;
  background: var(--cfm-ibg);
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--cfm-ifg);
  transition: color var(--cfm-panel-ms) ease;
  flex: 0 0 auto;
}
.cfm .cfm-item-link:hover .cfm-ico,
.cfm .cfm-item-link:focus-visible .cfm-ico{ color: var(--cfm-ifg-h); }

.cfm-title{ font-size:14px; font-weight:600; }
.cfm-dot{ width:10px; height:10px; border-radius:999px; background: currentColor; }

/* Panel animations */
.cfm-anim-none{ transition:none !important; }

.cfm-anim-fade_scale{ transition: opacity var(--cfm-panel-ms) ease, transform var(--cfm-panel-ms) ease; }
.cfm.is-open .cfm-anim-fade_scale{ opacity:1; transform: translateY(0) scale(1); }

.cfm-anim-fade{ transition: opacity var(--cfm-panel-ms) ease; transform:none; }
.cfm.is-open .cfm-anim-fade{ opacity:1; }

.cfm-anim-scale{ transition: opacity var(--cfm-panel-ms) ease, transform var(--cfm-panel-ms) ease; transform: scale(.92); }
.cfm.is-open .cfm-anim-scale{ opacity:1; transform: scale(1); }

.cfm-anim-slide_y{ transition: opacity var(--cfm-panel-ms) ease, transform var(--cfm-panel-ms) ease; transform: translateY(14px); }
.cfm.is-open .cfm-anim-slide_y{ opacity:1; transform: translateY(0); }

.cfm-anim-slide_x{ transition: opacity var(--cfm-panel-ms) ease, transform var(--cfm-panel-ms) ease; transform: translateX(14px); }
.cfm[style*="left"] .cfm-anim-slide_x{ transform: translateX(-14px); }
.cfm.is-open .cfm-anim-slide_x{ opacity:1; transform: translateX(0); }

.cfm-anim-zoom{ transition: opacity var(--cfm-panel-ms) ease, transform var(--cfm-panel-ms) ease; transform: scale(.85); }
.cfm.is-open .cfm-anim-zoom{ opacity:1; transform: scale(1); }

.cfm-anim-flip{
  transition: opacity var(--cfm-panel-ms) ease, transform var(--cfm-panel-ms) ease;
  transform: rotateX(-12deg) translateY(6px);
  transform-origin: top;
}
.cfm.is-open .cfm-anim-flip{ opacity:1; transform: rotateX(0) translateY(0); }

.cfm-anim-bounce{ transition: opacity var(--cfm-panel-ms) ease; transform: translateY(16px); }
.cfm.is-open .cfm-anim-bounce{ opacity:1; animation: cfmBounce var(--cfm-panel-ms) ease-out 1; transform:none; }
@keyframes cfmBounce{ 0%{ transform: translateY(16px);} 60%{ transform: translateY(-6px);} 100%{ transform: translateY(0);} }

/* Reduced-motion override opt-in */
.cfm.cfm-rm-override .cfm-btn{ transition-duration: var(--cfm-btn-ms) !important; }
.cfm.cfm-rm-override .cfm-panel{ transition-duration: var(--cfm-panel-ms) !important; }
.cfm.cfm-rm-override .cfm-item-link,
.cfm.cfm-rm-override .cfm-ico{ transition-duration: var(--cfm-panel-ms) !important; }