@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Playfair+Display:ital,wght@0,600;1,500&family=Nunito:wght@600;700;800&family=Syne:wght@700;800&display=swap');

#mcp-gr-root{position:fixed;z-index:2147483647;pointer-events:none;}
#mcp-gr-root.pos-bottom-right {bottom:24px;right:24px;}
#mcp-gr-root.pos-bottom-left  {bottom:24px;left:24px;}
#mcp-gr-root.pos-bottom-center{bottom:24px;left:50%;transform:translateX(-50%);}
#mcp-gr-root.pos-top-center   {top:24px;   left:50%;transform:translateX(-50%);}

/* BASE WIDGET */
.mcpgr{
  display:flex;align-items:center;gap:14px;
  border-radius:20px;padding:16px 20px;
  width:clamp(280px,370px,calc(100vw - 40px));
  pointer-events:auto;position:relative;
  opacity:0;transform:translateY(18px) scale(.97);
  transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1);
}
.mcpgr.in {opacity:1;transform:translateY(0) scale(1);}
.mcpgr.out{opacity:0;transform:translateY(14px) scale(.96);transition:opacity .35s ease,transform .35s ease;}

/* AVATAR */
.mcpgr-av{flex-shrink:0;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;overflow:hidden;}
.mcpgr-av img{width:100%;height:100%;object-fit:cover;}

/* BODY */
.mcpgr-body{flex:1;min-width:0;}
.mcpgr-brand{font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;opacity:.5;margin-bottom:3px;}
.mcpgr-text {font-size:14px;font-weight:600;line-height:1.4;margin-bottom:8px;}
.mcpgr-cta  {display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;padding:5px 12px;border-radius:99px;text-decoration:none;transition:opacity .2s,transform .2s;margin-bottom:5px;}
.mcpgr-cta:hover{opacity:.85;transform:translateX(2px);}
.mcpgr-cta::after{content:'→';}
.mcpgr-bar{height:2px;border-radius:99px;overflow:hidden;margin-top:4px;}
.mcpgr-fill{height:100%;width:100%;border-radius:99px;transform-origin:left;transform:scaleX(1);transition:transform linear;}

/* CLOSE */
.mcpgr-close{position:absolute;top:11px;right:11px;background:none;border:none;font-size:11px;cursor:pointer;width:21px;height:21px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-family:sans-serif;padding:0;transition:background .2s,color .2s;}

/* ─────────────────────────────────────────────
   TEMA: FRESH (default My Comercity)
   ───────────────────────────────────────────── */
.mcpgr.t-fresh{background:#fff;border:1.5px solid #e2e8f0;box-shadow:0 8px 40px rgba(0,0,0,.09),0 2px 8px rgba(0,0,0,.05);font-family:'Plus Jakarta Sans',sans-serif;}
.mcpgr.t-fresh .mcpgr-av  {background:#f0f9ff;border:2px solid #bae6fd;}
.mcpgr.t-fresh .mcpgr-brand{color:#0ea5e9;}
.mcpgr.t-fresh .mcpgr-text {color:#0f172a;}
.mcpgr.t-fresh .mcpgr-cta  {background:linear-gradient(135deg,#6366f1,#06b6d4);color:#fff;}
.mcpgr.t-fresh .mcpgr-bar  {background:#f1f5f9;}
.mcpgr.t-fresh .mcpgr-fill {background:linear-gradient(90deg,#6366f1,#06b6d4);}
.mcpgr.t-fresh .mcpgr-close{color:#94a3b8;border:1px solid #e2e8f0;}
.mcpgr.t-fresh .mcpgr-close:hover{background:#f8fafc;color:#475569;}

/* ─────────────────────────────────────────────
   TEMA: DARK
   ───────────────────────────────────────────── */
.mcpgr.t-dark{background:#0d0d0d;border:1px solid rgba(201,168,76,.3);box-shadow:0 12px 50px rgba(0,0,0,.5),0 0 60px rgba(201,168,76,.05),inset 0 1px 0 rgba(255,255,255,.04);font-family:'Playfair Display',Georgia,serif;}
.mcpgr.t-dark .mcpgr-av   {background:rgba(201,168,76,.1);border:1.5px solid rgba(201,168,76,.3);}
.mcpgr.t-dark .mcpgr-brand{color:#c9a84c;font-family:'Plus Jakarta Sans',sans-serif;}
.mcpgr.t-dark .mcpgr-text {color:#f5f0e8;font-style:italic;}
.mcpgr.t-dark .mcpgr-cta  {background:rgba(201,168,76,.12);color:#f0d080;border:1px solid rgba(201,168,76,.25);}
.mcpgr.t-dark .mcpgr-bar  {background:rgba(255,255,255,.07);}
.mcpgr.t-dark .mcpgr-fill {background:linear-gradient(90deg,#c9a84c,#f0d080);}
.mcpgr.t-dark .mcpgr-close{color:rgba(255,255,255,.25);border:1px solid rgba(255,255,255,.1);}
.mcpgr.t-dark .mcpgr-close:hover{background:rgba(201,168,76,.1);color:#c9a84c;}

/* ─────────────────────────────────────────────
   TEMA: WARM
   ───────────────────────────────────────────── */
.mcpgr.t-warm{background:#fef9f0;border:1.5px solid #fde8cc;box-shadow:0 8px 32px rgba(180,100,20,.09);font-family:'Nunito',sans-serif;}
.mcpgr.t-warm .mcpgr-av   {background:#fff7ed;border:2px solid #fed7aa;}
.mcpgr.t-warm .mcpgr-brand{color:#d97706;}
.mcpgr.t-warm .mcpgr-text {color:#1c1108;}
.mcpgr.t-warm .mcpgr-cta  {background:#f59e0b;color:#fff;}
.mcpgr.t-warm .mcpgr-bar  {background:#fde8cc;}
.mcpgr.t-warm .mcpgr-fill {background:linear-gradient(90deg,#f59e0b,#fb923c);}
.mcpgr.t-warm .mcpgr-close{color:#d97706;border:1px solid #fde8cc;}
.mcpgr.t-warm .mcpgr-close:hover{background:#fef3c7;}

/* ─────────────────────────────────────────────
   TEMA: GLASS
   ───────────────────────────────────────────── */
.mcpgr.t-glass{background:rgba(255,255,255,.65);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(255,255,255,.5);box-shadow:0 8px 32px rgba(100,116,139,.14),inset 0 1px 0 rgba(255,255,255,.8);font-family:'Plus Jakarta Sans',sans-serif;}
.mcpgr.t-glass .mcpgr-av   {background:rgba(99,102,241,.08);border:1.5px solid rgba(99,102,241,.2);}
.mcpgr.t-glass .mcpgr-brand{color:#6366f1;}
.mcpgr.t-glass .mcpgr-text {color:#1e293b;}
.mcpgr.t-glass .mcpgr-cta  {background:rgba(99,102,241,.1);color:#4f46e5;border:1px solid rgba(99,102,241,.18);}
.mcpgr.t-glass .mcpgr-bar  {background:rgba(100,116,139,.1);}
.mcpgr.t-glass .mcpgr-fill {background:linear-gradient(90deg,#6366f1,#818cf8);}
.mcpgr.t-glass .mcpgr-close{color:#94a3b8;border:1px solid rgba(148,163,184,.22);}
.mcpgr.t-glass .mcpgr-close:hover{background:rgba(99,102,241,.06);}

/* ─────────────────────────────────────────────
   TEMA: BOLD
   ───────────────────────────────────────────── */
.mcpgr.t-bold{background:linear-gradient(135deg,#6366f1 0%,#0891b2 100%);border:none;box-shadow:0 10px 40px rgba(99,102,241,.3);font-family:'Plus Jakarta Sans',sans-serif;}
.mcpgr.t-bold .mcpgr-av   {background:rgba(255,255,255,.15);border:1.5px solid rgba(255,255,255,.25);}
.mcpgr.t-bold .mcpgr-brand{color:rgba(255,255,255,.65);}
.mcpgr.t-bold .mcpgr-text {color:#fff;}
.mcpgr.t-bold .mcpgr-cta  {background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.28);}
.mcpgr.t-bold .mcpgr-bar  {background:rgba(255,255,255,.18);}
.mcpgr.t-bold .mcpgr-fill {background:rgba(255,255,255,.75);}
.mcpgr.t-bold .mcpgr-close{color:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.2);}
.mcpgr.t-bold .mcpgr-close:hover{background:rgba(255,255,255,.14);color:#fff;}

/* ─────────────────────────────────────────────
   TEMA: NEO BRUTAL
   ───────────────────────────────────────────── */
.mcpgr.t-neo{background:#fafafa;border:2.5px solid #111;box-shadow:4px 4px 0 #111;border-radius:12px;font-family:'Syne',sans-serif;}
.mcpgr.t-neo .mcpgr-av   {background:#fff9c4;border:2.5px solid #111;border-radius:8px;}
.mcpgr.t-neo .mcpgr-brand{color:#111;font-weight:800;}
.mcpgr.t-neo .mcpgr-text {color:#111;font-weight:800;}
.mcpgr.t-neo .mcpgr-cta  {background:#facc15;color:#111;border:2px solid #111;border-radius:6px;}
.mcpgr.t-neo .mcpgr-bar  {background:#e5e7eb;border-radius:0;}
.mcpgr.t-neo .mcpgr-fill {background:#111;border-radius:0;}
.mcpgr.t-neo .mcpgr-close{color:#111;border:2px solid #111;border-radius:4px;width:20px;height:20px;}
.mcpgr.t-neo .mcpgr-close:hover{background:#facc15;}

@media(max-width:480px){
  #mcp-gr-root.pos-bottom-right,
  #mcp-gr-root.pos-bottom-left{left:12px!important;right:12px!important;bottom:12px;}
  .mcpgr{width:calc(100vw - 24px);}
}