/* ==========================================================================
   GARFIX — microretailX AI interface
   Frontend v1.0
   ========================================================================== */

.mx-garfix{
  --gx-bg:rgba(3,3,3,.94);
  --gx-bg-soft:rgba(255,255,255,.035);
  --gx-bg-hover:rgba(255,255,255,.07);
  --gx-border:rgba(255,255,255,.13);
  --gx-border-strong:rgba(255,255,255,.21);
  --gx-text:rgba(255,255,255,.94);
  --gx-muted:rgba(255,255,255,.56);
  --gx-dim:rgba(255,255,255,.34);

  position:fixed;
  z-index:9000;

  inset-inline-end:
    max(
      16px,
      env(safe-area-inset-right)
    );

  bottom:
    max(
      16px,
      env(safe-area-inset-bottom)
    );

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    "Courier New",
    monospace;

  color:var(--gx-text);

  isolation:isolate;
}


/* ==========================================================================
   LAUNCHER
   ========================================================================== */

.mx-garfix-launcher{
  appearance:none;
  border:1px solid var(--gx-border);
  background:rgba(0,0,0,.90);
  color:var(--gx-text);

  min-height:46px;
  padding:0 15px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  margin-inline-start:auto;

  border-radius:999px;

  cursor:pointer;

  font:inherit;
  font-size:11px;
  font-weight:700;
  letter-spacing:.17em;

  box-shadow:
    0 12px 42px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.045);

  backdrop-filter:
    blur(16px)
    saturate(120%);

  -webkit-backdrop-filter:
    blur(16px)
    saturate(120%);

  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease;
}

.mx-garfix-launcher:hover{
  background:rgba(12,12,12,.96);
  border-color:var(--gx-border-strong);
}

.mx-garfix-launcher:active{
  transform:scale(.975);
}

.mx-garfix-launcher:focus-visible{
  outline:1px solid rgba(255,255,255,.68);
  outline-offset:3px;
}


.mx-garfix-launcher-dot{
  width:7px;
  height:7px;
  flex:0 0 auto;

  border-radius:50%;

  background:#fff;

  box-shadow:
    0 0 0 3px rgba(255,255,255,.07),
    0 0 14px rgba(255,255,255,.46);

  transition:
    opacity 160ms ease,
    box-shadow 160ms ease;
}


.mx-garfix[data-locked="1"]
.mx-garfix-launcher-dot{
  opacity:.58;

  box-shadow:
    0 0 0 3px rgba(255,255,255,.045),
    0 0 8px rgba(255,255,255,.18);
}


.mx-garfix-launcher-time{
  display:none;

  padding-inline-start:10px;

  border-inline-start:
    1px solid rgba(255,255,255,.12);

  color:rgba(255,255,255,.67);

  letter-spacing:.08em;
}


.mx-garfix[data-locked="1"]
.mx-garfix-launcher-time{
  display:inline;
}


/* ==========================================================================
   PANEL
   ========================================================================== */

.mx-garfix-panel{
  position:absolute;

  inset-inline-end:0;
  bottom:58px;

  width:min(
    390px,
    calc(100vw - 24px)
  );

  height:min(
    590px,
    calc(100dvh - 110px)
  );

  display:grid;

  grid-template-rows:
    auto
    1fr
    auto;

  overflow:hidden;

  border:
    1px solid
    var(--gx-border);

  border-radius:20px;

  background:var(--gx-bg);

  box-shadow:
    0 32px 100px rgba(0,0,0,.72),
    0 1px 0 rgba(255,255,255,.045) inset;

  backdrop-filter:
    blur(24px)
    saturate(125%);

  -webkit-backdrop-filter:
    blur(24px)
    saturate(125%);

  opacity:0;

  pointer-events:none;

  transform:
    translateY(12px)
    scale(.985);

  transform-origin:
    bottom right;

  transition:
    opacity 180ms ease,
    transform 200ms cubic-bezier(.2,.8,.2,1);
}


[dir="rtl"]
.mx-garfix-panel{
  transform-origin:
    bottom left;
}


.mx-garfix[data-open="1"]
.mx-garfix-panel{
  opacity:1;
  pointer-events:auto;

  transform:
    translateY(0)
    scale(1);
}


/* ==========================================================================
   HEADER
   ========================================================================== */

.mx-garfix-head{
  min-height:64px;

  padding:
    13px
    14px
    12px
    16px;

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

  gap:12px;

  border-bottom:
    1px solid
    rgba(255,255,255,.09);
}


.mx-garfix-identity{
  min-width:0;

  display:flex;
  align-items:center;
  gap:11px;
}


.mx-garfix-mark{
  width:34px;
  height:34px;

  flex:0 0 auto;

  display:grid;
  place-items:center;

  border:
    1px solid
    rgba(255,255,255,.14);

  border-radius:11px;

  background:
    rgba(255,255,255,.035);

  font-size:13px;
  font-weight:800;
  letter-spacing:.05em;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.04);
}


.mx-garfix-name{
  overflow:hidden;
}


.mx-garfix-name strong{
  display:block;

  font-size:12px;
  line-height:1.2;

  letter-spacing:.14em;
}


.mx-garfix-name span{
  display:block;

  margin-top:4px;

  color:var(--gx-muted);

  font-size:9px;
  line-height:1.2;

  letter-spacing:.12em;

  text-transform:uppercase;
}


.mx-garfix-close{
  appearance:none;

  width:34px;
  height:34px;

  flex:0 0 auto;

  display:grid;
  place-items:center;

  padding:0;

  border:
    1px solid
    transparent;

  border-radius:10px;

  background:transparent;

  color:
    rgba(255,255,255,.62);

  cursor:pointer;

  font-size:20px;
  line-height:1;

  transition:
    color 150ms ease,
    background 150ms ease,
    border-color 150ms ease;
}


.mx-garfix-close:hover{
  color:#fff;

  background:
    rgba(255,255,255,.05);

  border-color:
    rgba(255,255,255,.08);
}


/* ==========================================================================
   MESSAGES
   ========================================================================== */

.mx-garfix-body{
  min-height:0;

  overflow-y:auto;

  overscroll-behavior:contain;

  padding:
    17px
    15px
    18px;

  scrollbar-width:thin;

  scrollbar-color:
    rgba(255,255,255,.15)
    transparent;
}


.mx-garfix-body::-webkit-scrollbar{
  width:5px;
}

.mx-garfix-body::-webkit-scrollbar-thumb{
  background:
    rgba(255,255,255,.15);

  border-radius:999px;
}


.mx-garfix-message{
  max-width:88%;

  margin-bottom:13px;

  padding:
    10px
    12px;

  border:
    1px solid
    rgba(255,255,255,.085);

  border-radius:14px;

  background:
    rgba(255,255,255,.032);

  color:
    rgba(255,255,255,.84);

  font-size:11px;
  line-height:1.55;

  white-space:pre-wrap;
  overflow-wrap:anywhere;
}


.mx-garfix-message[data-role="user"]{
  margin-inline-start:auto;

  background:
    rgba(255,255,255,.085);

  border-color:
    rgba(255,255,255,.13);

  color:
    rgba(255,255,255,.94);
}


.mx-garfix-message[data-role="system"]{
  max-width:100%;

  padding:
    8px
    10px;

  border-style:dashed;

  background:
    transparent;

  color:
    var(--gx-muted);

  font-size:10px;
}


.mx-garfix-thinking{
  display:inline-flex;
  align-items:center;
  gap:4px;
}


.mx-garfix-thinking i{
  width:4px;
  height:4px;

  border-radius:50%;

  background:
    rgba(255,255,255,.6);

  animation:
    gxThinking
    1.1s
    infinite
    ease-in-out;
}


.mx-garfix-thinking i:nth-child(2){
  animation-delay:.13s;
}

.mx-garfix-thinking i:nth-child(3){
  animation-delay:.26s;
}


@keyframes gxThinking{
  0%,
  70%,
  100%{
    opacity:.25;
    transform:translateY(0);
  }

  35%{
    opacity:1;
    transform:translateY(-2px);
  }
}


/* ==========================================================================
   COOLDOWN
   ========================================================================== */

.mx-garfix-lock{
  display:none;

  margin:
    6px
    0
    16px;

  padding:
    17px;

  border:
    1px solid
    rgba(255,255,255,.13);

  border-radius:17px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.018)
    );

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.045);
}


.mx-garfix[data-locked="1"]
.mx-garfix-lock{
  display:block;
}


.mx-garfix-lock-top{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:12px;

  margin-bottom:14px;
}


.mx-garfix-lock-label{
  color:
    rgba(255,255,255,.48);

  font-size:9px;

  letter-spacing:.15em;

  text-transform:uppercase;
}


.mx-garfix-lock-level{
  padding:
    4px
    7px;

  border:
    1px solid
    rgba(255,255,255,.11);

  border-radius:999px;

  color:
    rgba(255,255,255,.58);

  font-size:8px;

  letter-spacing:.1em;
}


.mx-garfix-lock-message{
  margin:0;

  color:
    rgba(255,255,255,.78);

  font-size:11px;
  line-height:1.55;
}


.mx-garfix-lock-return{
  margin-top:17px;

  color:
    rgba(255,255,255,.43);

  font-size:9px;

  letter-spacing:.09em;

  text-transform:uppercase;
}


.mx-garfix-lock-time{
  margin-top:6px;

  color:#fff;

  font-size:32px;
  font-weight:700;
  line-height:1;

  letter-spacing:.07em;

  font-variant-numeric:
    tabular-nums;
}


.mx-garfix-lock-track{
  height:2px;

  margin-top:17px;

  overflow:hidden;

  border-radius:999px;

  background:
    rgba(255,255,255,.075);
}


.mx-garfix-lock-progress{
  width:100%;
  height:100%;

  transform-origin:left center;

  background:
    rgba(255,255,255,.58);

  transition:
    transform 300ms linear;
}


/* ==========================================================================
   COMPOSER
   ========================================================================== */

.mx-garfix-composer{
  padding:
    12px;

  border-top:
    1px solid
    rgba(255,255,255,.09);

  background:
    rgba(0,0,0,.34);
}


.mx-garfix-form{
  display:flex;
  align-items:flex-end;
  gap:8px;
}


.mx-garfix-input{
  width:100%;

  min-height:42px;
  max-height:120px;

  resize:none;

  padding:
    12px
    13px;

  border:
    1px solid
    rgba(255,255,255,.11);

  border-radius:13px;

  outline:none;

  background:
    rgba(255,255,255,.032);

  color:#fff;

  font:inherit;

  font-size:11px;
  line-height:1.4;

  scrollbar-width:thin;

  transition:
    border-color 150ms ease,
    background 150ms ease,
    opacity 150ms ease;
}


.mx-garfix-input::placeholder{
  color:
    rgba(255,255,255,.31);
}


.mx-garfix-input:focus{
  border-color:
    rgba(255,255,255,.24);

  background:
    rgba(255,255,255,.045);
}


.mx-garfix-send{
  appearance:none;

  width:42px;
  height:42px;

  flex:0 0 auto;

  display:grid;
  place-items:center;

  padding:0;

  border:
    1px solid
    rgba(255,255,255,.14);

  border-radius:13px;

  background:
    rgba(255,255,255,.92);

  color:#000;

  cursor:pointer;

  font-size:16px;

  transition:
    transform 150ms ease,
    opacity 150ms ease,
    background 150ms ease;
}


.mx-garfix-send:hover{
  background:#fff;
}

.mx-garfix-send:active{
  transform:scale(.96);
}


.mx-garfix-send:disabled,
.mx-garfix-input:disabled{
  cursor:not-allowed;
  opacity:.36;
}


.mx-garfix-footnote{
  margin-top:8px;

  text-align:center;

  color:
    rgba(255,255,255,.27);

  font-size:7.5px;

  letter-spacing:.12em;

  text-transform:uppercase;
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width:640px){

  .mx-garfix{
    inset-inline-end:
      max(
        10px,
        env(safe-area-inset-right)
      );

    bottom:
      max(
        10px,
        env(safe-area-inset-bottom)
      );
  }


  .mx-garfix-panel{
    width:
      calc(
        100vw - 20px
      );

    height:
      min(
        620px,
        calc(
          100dvh - 86px
        )
      );

    bottom:56px;

    border-radius:18px;
  }


  .mx-garfix-launcher{
    min-height:44px;
  }


  .mx-garfix-lock-time{
    font-size:29px;
  }
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (
  prefers-reduced-motion:
  reduce
){

  .mx-garfix-panel,
  .mx-garfix-launcher,
  .mx-garfix-send,
  .mx-garfix-input,
  .mx-garfix-lock-progress{
    transition:none;
  }

  .mx-garfix-thinking i{
    animation:none;
  }
}

.mx-garfix-mark{
  width:42px;
  height:42px;
  border-radius:50%;
  overflow:hidden;
  padding:0;
}

.mx-garfix-mark img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

/* GARFIX ? minimal dot launcher */
.mx-garfix-launcher{
  width:42px;
  height:42px;
  min-width:42px;
  min-height:42px;

  padding:0;
  gap:0;

  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;

  background:rgba(0,0,0,.92);

  display:grid;
  place-items:center;
}

/* Hide GARFIX text + timer */
.mx-garfix-launcher > span:not(.mx-garfix-launcher-dot){
  display:none !important;
}

.mx-garfix-launcher-dot{
  position:relative;

  width:7px;
  height:7px;

  border-radius:50%;
  background:#fff;

  box-shadow:none;

  transition:
    width 180ms ease,
    height 180ms ease,
    background 120ms ease,
    transform 180ms ease;
}

.mx-garfix-launcher-dot::before,
.mx-garfix-launcher-dot::after{
  content:"";

  position:absolute;
  top:50%;
  left:50%;

  width:16px;
  height:1.5px;

  border-radius:2px;
  background:#fff;

  opacity:0;

  transform-origin:center;

  transition:
    opacity 120ms ease,
    transform 180ms ease;
}

/* Point ? X */
.mx-garfix[data-open="1"] .mx-garfix-launcher-dot{
  width:16px;
  height:16px;

  background:transparent;
}

.mx-garfix[data-open="1"] .mx-garfix-launcher-dot::before{
  opacity:1;
  transform:
    translate(-50%,-50%)
    rotate(45deg);
}

.mx-garfix[data-open="1"] .mx-garfix-launcher-dot::after{
  opacity:1;
  transform:
    translate(-50%,-50%)
    rotate(-45deg);
}

.mx-garfix-launcher:hover{
  background:#080808;
  border-color:rgba(255,255,255,.28);
}

.mx-garfix-launcher:active{
  transform:scale(.94);
}


/* GARFIX ? subtle idle pulse */
@keyframes garfixDotPulse{
  0%, 72%, 100%{
    transform:scale(1);
    box-shadow:0 0 0 0 rgba(255,255,255,0);
  }

  82%{
    transform:scale(1.35);
    box-shadow:0 0 0 5px rgba(255,255,255,.08);
  }

  90%{
    transform:scale(1);
    box-shadow:0 0 0 7px rgba(255,255,255,0);
  }
}

.mx-garfix[data-open="0"] .mx-garfix-launcher-dot{
  animation:
    garfixDotPulse
    2.8s
    ease-in-out
    infinite;
}

.mx-garfix[data-open="1"] .mx-garfix-launcher-dot{
  animation:none;
}

@media (prefers-reduced-motion:reduce){
  .mx-garfix-launcher-dot{
    animation:none !important;
  }
}


/* GARFIX ? intelligent idle animation */
@keyframes garfixSmartDot{
  0%,
  68%,
  100%{
    width:7px;
    height:7px;
    border-radius:50%;
    transform:
      translateY(0)
      rotate(0deg)
      scale(1);
    box-shadow:none;
  }

  74%{
    transform:
      translateY(-4px)
      rotate(0deg)
      scale(1.12);
  }

  80%{
    width:12px;
    height:4px;
    border-radius:4px;
    transform:
      translateY(0)
      rotate(45deg)
      scale(1);
  }

  85%{
    width:14px;
    height:3px;
    border-radius:3px;
    transform:
      translateY(-1px)
      rotate(135deg)
      scale(1);
  }

  90%{
    width:8px;
    height:8px;
    border-radius:50%;
    transform:
      translateY(1px)
      rotate(180deg)
      scale(.92);
  }

  95%{
    transform:
      translateY(0)
      rotate(180deg)
      scale(1.08);
  }
}

.mx-garfix[data-open="0"] .mx-garfix-launcher-dot{
  animation:
    garfixSmartDot
    4.2s
    cubic-bezier(.4,0,.2,1)
    infinite;
}

.mx-garfix[data-open="1"] .mx-garfix-launcher-dot{
  animation:none;
}

@media (prefers-reduced-motion:reduce){
  .mx-garfix-launcher-dot{
    animation:none !important;
  }
}


/* GARFIX ? smart dot / real X animation */
@keyframes garfixSmartDot{
  0%, 65%, 100%{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#fff;

    transform:
      translateY(0)
      rotate(0deg)
      scale(1);

    box-shadow:
      0 0 0 rgba(255,255,255,0);
  }

  72%{
    width:8px;
    height:8px;
    background:#6ee7ff;

    transform:
      translateY(-5px)
      rotate(0deg)
      scale(1.18);

    box-shadow:
      0 0 12px rgba(110,231,255,.55);
  }

  77%{
    transform:
      translateY(1px)
      rotate(0deg)
      scale(.90);
  }

  /* X appears */
  81%, 88%{
    width:16px;
    height:16px;
    border-radius:50%;
    background:transparent;

    transform:
      translateY(-1px)
      rotate(90deg)
      scale(1);

    box-shadow:none;
  }

  92%{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#b794ff;

    transform:
      translateY(1px)
      rotate(180deg)
      scale(.92);

    box-shadow:
      0 0 10px rgba(183,148,255,.40);
  }

  96%{
    background:#fff;

    transform:
      translateY(0)
      rotate(180deg)
      scale(1.08);
  }
}


/* First arm of temporary X */
@keyframes garfixCrossA{
  0%, 76%, 94%, 100%{
    opacity:0;

    transform:
      translate(-50%,-50%)
      rotate(0deg)
      scale(.4);
  }

  81%, 88%{
    opacity:1;
    background:#6ee7ff;

    transform:
      translate(-50%,-50%)
      rotate(45deg)
      scale(1);
  }

  90%{
    opacity:1;
    background:#b794ff;

    transform:
      translate(-50%,-50%)
      rotate(135deg)
      scale(.8);
  }
}


/* Second arm of temporary X */
@keyframes garfixCrossB{
  0%, 78%, 94%, 100%{
    opacity:0;

    transform:
      translate(-50%,-50%)
      rotate(0deg)
      scale(.4);
  }

  82%, 88%{
    opacity:1;
    background:#b794ff;

    transform:
      translate(-50%,-50%)
      rotate(-45deg)
      scale(1);
  }

  90%{
    opacity:1;
    background:#6ee7ff;

    transform:
      translate(-50%,-50%)
      rotate(45deg)
      scale(.8);
  }
}


.mx-garfix[data-open="0"] .mx-garfix-launcher-dot{
  animation:
    garfixSmartDot
    4.4s
    cubic-bezier(.4,0,.2,1)
    infinite;
}


.mx-garfix[data-open="0"] .mx-garfix-launcher-dot::before{
  animation:
    garfixCrossA
    4.4s
    cubic-bezier(.4,0,.2,1)
    infinite;
}


.mx-garfix[data-open="0"] .mx-garfix-launcher-dot::after{
  animation:
    garfixCrossB
    4.4s
    cubic-bezier(.4,0,.2,1)
    infinite;
}


/* Opened = permanent clean white X */
.mx-garfix[data-open="1"] .mx-garfix-launcher-dot,
.mx-garfix[data-open="1"] .mx-garfix-launcher-dot::before,
.mx-garfix[data-open="1"] .mx-garfix-launcher-dot::after{
  animation:none;
}


@media (prefers-reduced-motion:reduce){
  .mx-garfix-launcher-dot,
  .mx-garfix-launcher-dot::before,
  .mx-garfix-launcher-dot::after{
    animation:none !important;
  }
}


/* ==========================================================
   GARFIX ? FLASH X
   dot ? bounce ? streaks ? X ? flash ? dot
   ========================================================== */

@keyframes gxCoreFlash{
  0%, 67%, 100%{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#fff;
    transform:translateY(0) scale(1);
    box-shadow:0 0 0 0 rgba(255,255,255,0);
  }

  70%{
    transform:translateY(-5px) scale(1.25);
  }

  73%{
    transform:translateY(1px) scale(.82);
  }

  76%{
    width:5px;
    height:5px;
    background:#73ecff;
    transform:scale(1.8);
    box-shadow:
      0 0 7px rgba(115,236,255,.95),
      0 0 18px rgba(115,236,255,.55);
  }

  79%, 89%{
    width:4px;
    height:4px;
    background:#fff;
    transform:scale(1);
    box-shadow:
      0 0 10px rgba(255,255,255,.9);
  }

  91%{
    width:9px;
    height:9px;
    background:#b58cff;
    transform:scale(1.4);
    box-shadow:
      0 0 10px rgba(181,140,255,.95),
      0 0 22px rgba(181,140,255,.5);
  }

  94%{
    width:5px;
    height:5px;
    transform:scale(.7);
  }

  97%{
    width:8px;
    height:8px;
    background:#fff;
    transform:scale(1.12);
    box-shadow:none;
  }
}


/* First lightning stroke */
@keyframes gxFlashArmA{
  0%, 74%, 95%, 100%{
    opacity:0;
    transform:
      translate(-50%,-50%)
      translateX(-12px)
      rotate(45deg)
      scaleX(0);
  }

  77%{
    opacity:1;
    background:#73ecff;

    transform:
      translate(-50%,-50%)
      translateX(-5px)
      rotate(45deg)
      scaleX(.35);
  }

  80%{
    opacity:1;
    background:#fff;

    transform:
      translate(-50%,-50%)
      translateX(0)
      rotate(45deg)
      scaleX(1.18);
  }

  84%{
    opacity:1;
    background:#b58cff;

    transform:
      translate(-50%,-50%)
      rotate(135deg)
      scaleX(1);
  }

  89%{
    opacity:1;
    background:#fff;

    transform:
      translate(-50%,-50%)
      rotate(225deg)
      scaleX(1.08);
  }

  93%{
    opacity:0;

    transform:
      translate(-50%,-50%)
      rotate(315deg)
      scaleX(0);
  }
}


/* Second lightning stroke */
@keyframes gxFlashArmB{
  0%, 75%, 95%, 100%{
    opacity:0;

    transform:
      translate(-50%,-50%)
      translateX(12px)
      rotate(-45deg)
      scaleX(0);
  }

  78%{
    opacity:1;
    background:#b58cff;

    transform:
      translate(-50%,-50%)
      translateX(5px)
      rotate(-45deg)
      scaleX(.35);
  }

  81%{
    opacity:1;
    background:#fff;

    transform:
      translate(-50%,-50%)
      translateX(0)
      rotate(-45deg)
      scaleX(1.18);
  }

  85%{
    opacity:1;
    background:#73ecff;

    transform:
      translate(-50%,-50%)
      rotate(45deg)
      scaleX(1);
  }

  89%{
    opacity:1;
    background:#fff;

    transform:
      translate(-50%,-50%)
      rotate(135deg)
      scaleX(1.08);
  }

  93%{
    opacity:0;

    transform:
      translate(-50%,-50%)
      rotate(225deg)
      scaleX(0);
  }
}


.mx-garfix[data-open="0"] .mx-garfix-launcher-dot{
  animation:
    gxCoreFlash
    4.6s
    cubic-bezier(.22,.8,.25,1)
    infinite;
}


.mx-garfix[data-open="0"] .mx-garfix-launcher-dot::before,
.mx-garfix[data-open="0"] .mx-garfix-launcher-dot::after{
  width:19px;
  height:2px;

  border-radius:999px;

  box-shadow:
    0 0 5px currentColor,
    0 0 11px currentColor;

  transform-origin:center;
}


.mx-garfix[data-open="0"] .mx-garfix-launcher-dot::before{
  animation:
    gxFlashArmA
    4.6s
    cubic-bezier(.2,.85,.25,1)
    infinite;
}


.mx-garfix[data-open="0"] .mx-garfix-launcher-dot::after{
  animation:
    gxFlashArmB
    4.6s
    cubic-bezier(.2,.85,.25,1)
    infinite;
}


/* Open = stable, clean X */
.mx-garfix[data-open="1"] .mx-garfix-launcher-dot{
  width:18px;
  height:18px;
  background:transparent;
  animation:none;
}


.mx-garfix[data-open="1"] .mx-garfix-launcher-dot::before,
.mx-garfix[data-open="1"] .mx-garfix-launcher-dot::after{
  width:18px;
  height:2px;

  opacity:1;
  background:#fff;

  animation:none;

  box-shadow:none;
}


.mx-garfix[data-open="1"] .mx-garfix-launcher-dot::before{
  transform:
    translate(-50%,-50%)
    rotate(45deg);
}


.mx-garfix[data-open="1"] .mx-garfix-launcher-dot::after{
  transform:
    translate(-50%,-50%)
    rotate(-45deg);
}


@media (prefers-reduced-motion:reduce){
  .mx-garfix-launcher-dot,
  .mx-garfix-launcher-dot::before,
  .mx-garfix-launcher-dot::after{
    animation:none !important;
  }
}


/* GARFIX ? premium colour palette */

@keyframes gxCoreFlash{
  0%, 67%, 100%{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#f5f5f2;
    transform:translateY(0) scale(1);
    box-shadow:none;
  }

  70%{
    transform:translateY(-5px) scale(1.25);
  }

  73%{
    transform:translateY(1px) scale(.82);
  }

  76%{
    width:5px;
    height:5px;
    background:#d7dadd;
    transform:scale(1.8);
    box-shadow:
      0 0 6px rgba(215,218,221,.75),
      0 0 15px rgba(215,218,221,.28);
  }

  79%, 89%{
    width:4px;
    height:4px;
    background:#ffffff;
    transform:scale(1);
    box-shadow:
      0 0 8px rgba(255,255,255,.65);
  }

  91%{
    width:9px;
    height:9px;
    background:#d8c7a3;
    transform:scale(1.35);
    box-shadow:
      0 0 8px rgba(216,199,163,.65),
      0 0 18px rgba(216,199,163,.22);
  }

  94%{
    width:5px;
    height:5px;
    transform:scale(.7);
  }

  97%{
    width:8px;
    height:8px;
    background:#f5f5f2;
    transform:scale(1.12);
    box-shadow:none;
  }
}


@keyframes gxFlashArmA{
  0%, 74%, 95%, 100%{
    opacity:0;
    transform:
      translate(-50%,-50%)
      translateX(-12px)
      rotate(45deg)
      scaleX(0);
  }

  77%{
    opacity:1;
    background:#d7dadd;
    transform:
      translate(-50%,-50%)
      translateX(-5px)
      rotate(45deg)
      scaleX(.35);
  }

  80%{
    opacity:1;
    background:#ffffff;
    transform:
      translate(-50%,-50%)
      rotate(45deg)
      scaleX(1.18);
  }

  84%{
    opacity:1;
    background:#d8c7a3;
    transform:
      translate(-50%,-50%)
      rotate(135deg)
      scaleX(1);
  }

  89%{
    opacity:1;
    background:#ffffff;
    transform:
      translate(-50%,-50%)
      rotate(225deg)
      scaleX(1.08);
  }

  93%{
    opacity:0;
    transform:
      translate(-50%,-50%)
      rotate(315deg)
      scaleX(0);
  }
}


@keyframes gxFlashArmB{
  0%, 75%, 95%, 100%{
    opacity:0;
    transform:
      translate(-50%,-50%)
      translateX(12px)
      rotate(-45deg)
      scaleX(0);
  }

  78%{
    opacity:1;
    background:#d8c7a3;
    transform:
      translate(-50%,-50%)
      translateX(5px)
      rotate(-45deg)
      scaleX(.35);
  }

  81%{
    opacity:1;
    background:#ffffff;
    transform:
      translate(-50%,-50%)
      rotate(-45deg)
      scaleX(1.18);
  }

  85%{
    opacity:1;
    background:#d7dadd;
    transform:
      translate(-50%,-50%)
      rotate(45deg)
      scaleX(1);
  }

  89%{
    opacity:1;
    background:#ffffff;
    transform:
      translate(-50%,-50%)
      rotate(135deg)
      scaleX(1.08);
  }

  93%{
    opacity:0;
    transform:
      translate(-50%,-50%)
      rotate(225deg)
      scaleX(0);
  }
}


/* ==========================================================================
   GARFIX MOBILE ? stable viewport / iOS keyboard fix
   ========================================================================== */

@media (max-width:640px){

  .mx-garfix-panel{
    position:fixed;

    inset:
      0
      0
      0
      0;

    width:100vw;
    height:100dvh;
    max-height:none;

    border-radius:0;

    transform:none;
    transform-origin:center;

    grid-template-rows:
      auto
      minmax(0,1fr)
      auto;
  }


  .mx-garfix[data-open="1"] .mx-garfix-panel{
    transform:none;
  }


  .mx-garfix-body{
    min-height:0;

    overscroll-behavior:contain;

    -webkit-overflow-scrolling:touch;
  }


  .mx-garfix-composer{
    padding:
      12px
      12px
      max(
        12px,
        env(safe-area-inset-bottom)
      );
  }


  /* Prevent Safari/iPhone focus zoom */
  .mx-garfix-input{
    font-size:16px;
  }


  /* Header respects notch / Dynamic Island */
  .mx-garfix-head{
    padding-top:
      max(
        13px,
        env(safe-area-inset-top)
      );
  }


  /* Panel already has its own close button */
  .mx-garfix[data-open="1"] .mx-garfix-launcher{
    opacity:0;
    pointer-events:none;
  }

}



/* GARFIX MOBILE VISUAL VIEWPORT */
@media (max-width:640px){

  .mx-garfix-panel{
    top:var(--gx-visual-top, 0px);
    bottom:auto;

    height:
      var(
        --gx-visual-height,
        100dvh
      );
  }

}

/* ==========================================================================
   GARFIX VISION — IMAGE ATTACHMENTS
   ========================================================================== */

.mx-garfix-attachment{
  display:flex;
  align-items:center;
  gap:10px;

  margin-bottom:9px;
  padding:8px;

  border:
    1px solid
    rgba(255,255,255,.11);

  border-radius:13px;

  background:
    rgba(255,255,255,.035);

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.035);
}


.mx-garfix-attachment[hidden]{
  display:none;
}


.mx-garfix-attachment-image{
  width:46px;
  height:46px;

  flex:0 0 46px;

  object-fit:cover;

  border-radius:9px;

  border:
    1px solid
    rgba(255,255,255,.10);

  background:#090909;
}


.mx-garfix-attachment-meta{
  min-width:0;

  flex:1;

  display:flex;
  flex-direction:column;

  gap:3px;
}


.mx-garfix-attachment-meta strong{
  overflow:hidden;

  color:
    rgba(255,255,255,.85);

  font-size:9px;
  font-weight:600;

  line-height:1.35;

  white-space:nowrap;
  text-overflow:ellipsis;
}


.mx-garfix-attachment-meta span{
  color:
    rgba(255,255,255,.40);

  font-size:8px;

  letter-spacing:.04em;
}


.mx-garfix-attachment-remove{
  appearance:none;

  width:28px;
  height:28px;

  flex:0 0 28px;

  display:grid;
  place-items:center;

  padding:0;

  border:
    1px solid
    rgba(255,255,255,.10);

  border-radius:9px;

  background:
    rgba(255,255,255,.025);

  color:
    rgba(255,255,255,.65);

  cursor:pointer;

  font:inherit;
  font-size:16px;
  line-height:1;

  transition:
    background 150ms ease,
    color 150ms ease,
    border-color 150ms ease,
    transform 150ms ease;
}


.mx-garfix-attachment-remove:hover{
  color:#fff;

  border-color:
    rgba(255,255,255,.20);

  background:
    rgba(255,255,255,.07);
}


.mx-garfix-attachment-remove:active{
  transform:scale(.94);
}


.mx-garfix-attach{
  appearance:none;

  width:42px;
  height:42px;

  flex:0 0 42px;

  display:grid;
  place-items:center;

  padding:0;

  border:
    1px solid
    rgba(255,255,255,.11);

  border-radius:13px;

  background:
    rgba(255,255,255,.032);

  color:
    rgba(255,255,255,.72);

  cursor:pointer;

  font-size:16px;
  line-height:1;

  transition:
    transform 150ms ease,
    opacity 150ms ease,
    background 150ms ease,
    border-color 150ms ease,
    color 150ms ease;
}


.mx-garfix-attach:hover{
  color:#fff;

  background:
    rgba(255,255,255,.065);

  border-color:
    rgba(255,255,255,.20);
}


.mx-garfix-attach:active{
  transform:scale(.96);
}


.mx-garfix-attach:focus-visible,
.mx-garfix-attachment-remove:focus-visible{
  outline:
    1px solid
    rgba(255,255,255,.65);

  outline-offset:2px;
}


.mx-garfix-attach:disabled,
.mx-garfix-attachment-remove:disabled{
  cursor:not-allowed;
  opacity:.36;
}


@media (max-width:480px){

  .mx-garfix-attachment-image{
    width:42px;
    height:42px;

    flex-basis:42px;
  }

}