#mcfc.mcfc{
  position: fixed;
  right: var(--mcfc-right, 20px);
  bottom: var(--mcfc-bottom, 20px);
  z-index: 99999;
  font-family: inherit;
}
.mcfc__main{
  width: 56px; height: 56px;
  border-radius: 50%; border: none; cursor: pointer;
  background: var(--mcfc-color, #556cd6); color: var(--mcfc-ico, #fff);
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  display:flex; align-items:center; justify-content:center;
}
.mcfc__ico{ width: 26px; height: 26px; fill: currentColor; display:block; }
.mcfc__ico--close{ display:none; }
.mcfc--open .mcfc__ico--chat{ display:none; }
.mcfc--open .mcfc__ico--close{ display:block; }

.mcfc__panel{ position:absolute; right:0; bottom:66px; display:grid; gap:14px;
  transform:translateY(10px); opacity:0; pointer-events:none; transition:all .22s ease; }
.mcfc--open .mcfc__panel{ transform:translateY(0); opacity:1; pointer-events:auto; }

.mcfc__item{ position:relative; display:block; width:56px; height:56px; border-radius:50%;
  box-shadow:0 10px 28px rgba(0,0,0,.18); background:#fff; }
.mcfc__circle{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; border-radius:50%; }
.mcfc__circle img{ width:28px; height:28px; display:block; }

.mcfc__call{ background:#64d8a0; }
.mcfc__msn { background:#4a7de4; }
.mcfc__line{ background:#34c84a; }

.mcfc__item::after{
  content: attr(data-label);
  position:absolute; left:-12px; transform:translateX(-100%);
  top:50%; margin-top:-14px;
  background:#fff; color:#000; border-radius:999px; padding:6px 10px;
  box-shadow:0 8px 24px rgba(0,0,0,.12); font-size:14px; line-height:1;
  opacity:0; pointer-events:none; transition:opacity .15s ease;
  white-space:nowrap;
}
.mcfc__item:hover::after{ opacity:1; }
.mcfc__item::before{
  content:''; position:absolute; left:-6px; top:50%; margin-top:-6px;
  width:0; height:0; border-right:6px solid #fff; border-top:6px solid transparent; border-bottom:6px solid transparent;
  opacity:0; transition:opacity .15s ease;
}
.mcfc__item:hover::before{ opacity:1; }

.mcfc__bubble{
  position:absolute; right:70px; bottom:10px;
  background:#fff; color:#333; border-radius:999px; padding:10px 14px;
  box-shadow:0 10px 28px rgba(0,0,0,.12); font-size:16px; line-height:1.2; white-space:normal;
}
.mcfc__bubble:after{
  content:''; position:absolute; right:-6px; bottom:14px; width:0; height:0;
  border-left:6px solid #fff; border-top:6px solid transparent; border-bottom:6px solid transparent;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.08));
}
.mcfc--open .mcfc__bubble{ display:none; }

.mcfc__vh{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); }
@media (max-width: 360px){ .mcfc__bubble{ display:none; } }

/* -------- Helper bubble (single line + richer shadow) -------- */
.mcfc__bubble{
  position:absolute;
  right:70px;
  bottom:12px;
  background:#fff;
  color:#333;
  border-radius:999px;
  padding:10px 16px;
  box-shadow:0 8px 26px rgba(16,24,40,.18), 0 2px 6px rgba(16,24,40,.10);
  font-size:16px;
  line-height:1;
  white-space:nowrap;
}
.mcfc__bubble:after{
  content:'';
  position:absolute;
  top:50%;                    /* จับกึ่งกลางแนวตั้ง */
  transform:translateY(-50%); /* ชดเชยกึ่งกลาง */
  right:-4px;                 /* ดันเข้าหาฟอง (ถ้าเห็นช่องว่างเพิ่มเป็น -5/-6 ได้) */
  width:0; height:0;
  border-left:8px solid #fff; /* ขนาดหาง */
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
  filter:drop-shadow(0 1px 2px rgba(16,24,40,.15));
}
.mcfc--open .mcfc__bubble{ display:none; }

/* ซ่อนรูป operator หลักตอนเปิดเมนู */
.mcfc--open .mcfc__main-ico {
    display: none !important;
}

/* ขยับปุ่มลอยขึ้นบนจอเล็ก ไม่ให้ทับแถบ EU Cookie */
@media (max-width: 926px) {
  #mcfc.mcfc {
    bottom: 130px !important;   /* ปรับเลขตามความสูงแถบ cookie ได้ 70–110px */
  }
}