/* Christy: thumbnail launcher + call window. IDs scoped; controls use !important so page CSS can't leak in.
   Window states: panel (desktop default, bottom right) | full (maximized) | docked (mobile corner PIP). */

/* ---------- thumbnail ---------- */
#mg-dock{position:fixed;right:18px;bottom:20px;z-index:9000}
#mg-launch{position:relative;display:block;width:200px;height:134px;padding:0;border:2px solid #fff!important;border-radius:12px;overflow:hidden;cursor:pointer;background:#222;box-shadow:0 12px 30px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.2);transition:transform .2s;appearance:none}
#mg-launch:hover{transform:scale(1.03)}
#mg-launch img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 28%}
#mg-launch .mg-cap{position:absolute;left:0;right:0;bottom:0;padding:22px 10px 8px;text-align:left;color:#fff;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.78));font-family:"Jost",system-ui,sans-serif;line-height:1.15}
#mg-launch .mg-cap b{display:block;font-size:15px;font-weight:600}
#mg-launch .mg-cap span{display:block;font-size:11px;opacity:.9}
#mg-launch .mg-dot{position:absolute;top:8px;left:8px;width:10px;height:10px;border-radius:50%;background:#22c55e;border:2px solid #fff;animation:mgPing 2.2s infinite}
@keyframes mgPing{0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}70%{box-shadow:0 0 0 7px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
body.mg-on #mg-dock{display:none}

/* minimize the thumbnail to a small circle (remembered per visitor) */
#mg-hide{position:absolute;top:-10px;right:-10px;z-index:2;width:30px;height:30px;padding:0;border:0!important;border-radius:50%;background:#141414!important;color:#fff!important;display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.35);appearance:none}
#mg-hide:hover{background:#000!important}
#mg-hide svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
#mg-mini{display:none;position:relative;width:56px;height:56px;padding:0;border:2px solid #fff!important;border-radius:50%;overflow:visible;cursor:pointer;background:#222;box-shadow:0 8px 20px rgba(0,0,0,.35);appearance:none;transition:transform .2s}
#mg-mini:hover{transform:scale(1.07)}
#mg-mini img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;border-radius:50%}
#mg-mini .mg-dot{position:absolute;top:0;right:0;width:12px;height:12px;border-radius:50%;background:#22c55e;border:2px solid #fff;animation:mgPing 2.2s infinite}
body.mg-mini #mg-launch,body.mg-mini #mg-hide{display:none}
body.mg-mini #mg-mini{display:block}

/* ---------- back to top: stacks above Christy ---------- */
#to-top{position:fixed;right:18px;bottom:calc(20px + 134px + 26px);z-index:8990;width:44px;height:44px;padding:0;border:0!important;border-radius:50%;background:#0f2a57!important;color:#fff!important;display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.25);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s,transform .2s,visibility .2s,bottom .2s;appearance:none}
#to-top.show{opacity:1;visibility:visible;transform:none}
#to-top svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
body.mg-mini #to-top{right:24px;bottom:calc(20px + 56px + 14px)}
body.mg-docked #to-top{bottom:calc(20px + 190px + 14px)}
body.mg-on:not(.mg-docked) #to-top,body.has-modal #to-top{display:none}

/* ---------- call window ---------- */
#mg.closed{display:none}
#mg-win{position:fixed;z-index:9500;display:flex;flex-direction:column;background:#141414;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.1)}
#mg.panel #mg-win{right:20px;bottom:20px;width:460px;height:min(660px,calc(100vh - 40px));border-radius:14px}
#mg.full #mg-win{inset:0;border-radius:0}
#mg.docked #mg-win{right:18px;bottom:20px;width:300px;height:190px;border-radius:12px;border:2px solid #fff}
.mg-head{flex:0 0 auto;height:58px;display:flex;align-items:center;gap:10px;padding:0 10px 0 12px;color:#fff;background:#0f2a57;border-bottom:1px solid rgba(255,255,255,.1);font-family:"Jost",system-ui,sans-serif}
#mg.full .mg-head{padding-top:env(safe-area-inset-top,0px);height:calc(58px + env(safe-area-inset-top,0px))}
#mg.docked .mg-head{display:none}
.mg-headimg{width:36px;height:36px;border-radius:50%;object-fit:cover;object-position:50% 30%;border:1px solid rgba(255,255,255,.25)}
.mg-id{flex:1;min-width:0;line-height:1.2}
.mg-id b{display:block;font-size:15px;font-weight:600}
.mg-id span{display:block;font-size:12px;color:#b6cdcf}
#mg .mg-ctrls{display:flex;gap:6px}
#mg .mg-ctrl{appearance:none!important;-webkit-appearance:none!important;width:36px!important;height:36px!important;padding:0!important;margin:0!important;border:0!important;border-radius:50%!important;background:rgba(255,255,255,.1)!important;color:#fff!important;display:grid!important;place-items:center!important;cursor:pointer;box-shadow:none!important}
#mg .mg-ctrl:hover{background:rgba(255,255,255,.22)!important}
#mg #mg-close:hover,#mg #mg-dock-close:hover{background:#dc2626!important}
#mg .mg-ctrl svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#mg #mg-min{display:none!important}
#mg.full .i-max,#mg.panel .i-restore{display:none}
#mg-frame{position:relative;flex:1;min-height:0;background:#111}
#mg-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.mg-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;color:#fff;font:14px "Jost",system-ui,sans-serif;background:#111}
.mg-loading i{width:36px;height:36px;border:3px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;animation:mgSpin .8s linear infinite}
@keyframes mgSpin{to{transform:rotate(360deg)}}
#mg-tap{display:none;position:absolute;inset:0;z-index:2;background:transparent!important;border:0!important;padding:0!important;cursor:pointer}
#mg.docked #mg-tap{display:block}
#mg #mg-dock-close{display:none!important;position:absolute;top:6px;right:6px;z-index:3;width:28px!important;height:28px!important;background:rgba(0,0,0,.65)!important}
#mg.docked #mg-dock-close{display:grid!important}
#mg #mg-dock-close svg{width:14px;height:14px}

/* ---------- mobile ---------- */
@media (max-width:760px){
  #mg-dock{right:12px;bottom:14px}
  #mg-launch{width:128px;height:90px;border-radius:10px}
  #mg-launch .mg-cap{padding:16px 8px 6px}
  #mg-launch .mg-cap b{font-size:13px}
  #mg-launch .mg-cap span{display:none}
  #mg-hide{top:-11px;right:-11px}
  #mg-mini{width:48px;height:48px}
  #to-top{right:12px;bottom:calc(14px + 90px + 24px)}
  body.mg-mini #to-top{right:14px;bottom:calc(14px + 48px + 12px)}
  body.mg-docked #to-top{right:12px;bottom:calc(14px + 190px + 12px)}
  #mg.panel #mg-win{inset:0;width:auto;height:auto;border-radius:0}
  #mg #mg-max{display:none!important}
  #mg.full #mg-min{display:grid!important}
  #mg.docked #mg-win{right:12px;bottom:14px;width:136px;height:190px;border-radius:10px}
}
@media print{#mg-dock,#mg,#to-top{display:none!important}}
/* keep floating controls out of the way while the contact form is on screen (mobile) */
@media (max-width:760px){
  #mg-dock,#to-top{transition:opacity .3s,transform .3s,visibility .3s}
  body.cf-active #mg-dock,body.cf-active #to-top{opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:translateY(12px)}
}

/* the promo popup and mobile menu sit above the launcher */
body.drawer-open #mg-dock,body.drawer-open #to-top{display:none}