/* ==========================================
   ULTRAKIT FACEBOOK MESSENGER CHAT — Premium
   3 Modes × 6 Styles × 3 Shapes × 3 Sizes × 4 Animations
   ========================================== */

.ultrakit-fbm-wrapper {
    --fbm-accent: #0084ff;
    --fbm-dark: #a334fa;
    --fbm-x: 24px;
    --fbm-y: 24px;
    --fbm-z: 9990;
    --fbm-fab: 60px;
    --fbm-pad-y: 14px;
    --fbm-pad-x: 26px;
    --fbm-font: 16px;
    --fbm-radius: 50px;
    font-family: inherit;
    box-sizing: border-box;
}
.ultrakit-fbm-wrapper *, .ultrakit-fbm-wrapper *::before, .ultrakit-fbm-wrapper *::after { box-sizing: border-box; }
.ultrakit-fbm-placeholder { padding: 26px; text-align: center; color: #888; background: #f0f0f5; border: 2px dashed #ccc; border-radius: 10px; }

/* ---------- Sizes / shapes ---------- */
.fbm-size-small  { --fbm-fab: 50px; --fbm-pad-y: 10px; --fbm-pad-x: 20px; --fbm-font: 14px; }
.fbm-size-large  { --fbm-fab: 74px; --fbm-pad-y: 18px; --fbm-pad-x: 34px; --fbm-font: 18px; }
.fbm-shape-rounded { --fbm-radius: 14px; }
.fbm-shape-square  { --fbm-radius: 4px; }

.ultrakit-fbm-svg { width: 26px !important; height: 26px !important; flex-shrink: 0; display: block; }
.fbm-size-large .ultrakit-fbm-svg { width: 32px !important; height: 32px !important; }
.fbm-size-small .ultrakit-fbm-svg { width: 22px !important; height: 22px !important; }

/* ---------- Inline / floating link button ---------- */
.fbm-mode-button { display: flex; }
.ultrakit-fbm-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: var(--fbm-pad-y) var(--fbm-pad-x) !important;
    background: var(--fbm-accent);
    color: #ffffff !important;
    border: 2px solid var(--fbm-accent);
    border-radius: var(--fbm-radius);
    font-size: var(--fbm-font);
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none !important;
    cursor: pointer;
    transition: all 0.3s ease;
}
.ultrakit-fbm-btn:hover { background: #0068d1; border-color: #0068d1; transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0,0,0,0.2); color: #ffffff !important; }
.ultrakit-fbm-btn.is-icon-only { width: var(--fbm-fab); height: var(--fbm-fab); padding: 0 !important; border-radius: 50%; }
.fbm-shape-rounded .ultrakit-fbm-btn.is-icon-only { border-radius: 18px; }
.fbm-shape-square .ultrakit-fbm-btn.is-icon-only { border-radius: 6px; }

/* ---------- Skins (apply to link button and FAB) ---------- */
.fbm-skin-gradient .ultrakit-fbm-btn, .fbm-skin-gradient .ultrakit-fbm-fab { background: linear-gradient(135deg, var(--fbm-accent) 0%, var(--fbm-dark) 60%, #ff6968 100%); border-color: transparent; }
.fbm-skin-gradient .ultrakit-fbm-btn:hover { background: linear-gradient(135deg, var(--fbm-accent) 0%, var(--fbm-dark) 60%, #ff6968 100%); filter: brightness(1.08); }
.fbm-skin-outline .ultrakit-fbm-btn, .fbm-skin-outline .ultrakit-fbm-fab { background: #ffffff; color: var(--fbm-accent) !important; border-color: var(--fbm-accent); }
.fbm-skin-outline .ultrakit-fbm-btn:hover { background: var(--fbm-accent); color: #ffffff !important; }
.fbm-skin-dark .ultrakit-fbm-btn, .fbm-skin-dark .ultrakit-fbm-fab { background: #1a1a2e; border-color: #1a1a2e; }
.fbm-skin-dark .ultrakit-fbm-btn:hover { background: #000000; border-color: #000000; }
.fbm-skin-dark .ultrakit-fbm-svg { color: var(--fbm-accent); }
.fbm-skin-glass .ultrakit-fbm-btn, .fbm-skin-glass .ultrakit-fbm-fab { background: #ffffff; color: #1a1a2e !important; border-color: #ffffff; box-shadow: 0 8px 26px rgba(0,0,0,0.14); }
.fbm-skin-glass .ultrakit-fbm-svg { color: var(--fbm-accent); }
.fbm-skin-glass .ultrakit-fbm-btn:hover { background: #ffffff; color: #1a1a2e !important; }
.fbm-skin-block3d .ultrakit-fbm-btn, .fbm-skin-block3d .ultrakit-fbm-fab { box-shadow: 0 6px 0 #0058b0; }
.fbm-skin-block3d .ultrakit-fbm-btn:hover { transform: translateY(3px); box-shadow: 0 3px 0 #0058b0; }

/* ---------- Attention animations ---------- */
.ultrakit-fbm-ring { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; }
.fbm-anim-pulse .ultrakit-fbm-ring { animation: ultrakit-fbm-pulse 2s ease-out infinite; }
@keyframes ultrakit-fbm-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--fbm-accent) 60%, transparent); }
    70%  { box-shadow: 0 0 0 18px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
.fbm-anim-shake .ultrakit-fbm-btn, .fbm-anim-shake .ultrakit-fbm-fab { animation: ultrakit-fbm-shake 3.2s ease-in-out infinite; }
@keyframes ultrakit-fbm-shake {
    0%, 82%, 100% { transform: rotate(0); }
    86% { transform: rotate(-9deg); } 90% { transform: rotate(9deg); } 94% { transform: rotate(-6deg); } 97% { transform: rotate(5deg); }
}
.fbm-anim-float .ultrakit-fbm-btn, .fbm-anim-float .ultrakit-fbm-fab { animation: ultrakit-fbm-float 3s ease-in-out infinite; }
@keyframes ultrakit-fbm-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.ultrakit-fbm-btn > svg, .ultrakit-fbm-btn > span:not(.ultrakit-fbm-ring) { position: relative; z-index: 1; }

/* ---------- Floating placement ---------- */
.fbm-mode-floating, .fbm-mode-chatbox { position: fixed; z-index: var(--fbm-z); transition: opacity 0.4s ease, transform 0.4s ease; }
.fbm-pos-bottom-right { right: var(--fbm-x); bottom: var(--fbm-y); }
.fbm-pos-bottom-left  { left: var(--fbm-x);  bottom: var(--fbm-y); }
.fbm-pos-top-right    { right: var(--fbm-x); top: var(--fbm-y); }
.fbm-pos-top-left     { left: var(--fbm-x);  top: var(--fbm-y); }
.fbm-pos-mid-right    { right: var(--fbm-x); top: 50%; margin-top: calc(var(--fbm-fab) / -2); }
.fbm-pos-mid-left     { left: var(--fbm-x);  top: 50%; margin-top: calc(var(--fbm-fab) / -2); }
.fbm-mode-floating.is-waiting, .fbm-mode-chatbox.is-waiting { opacity: 0; pointer-events: none; transform: translateY(20px); }

/* Inside the Elementor editor: keep it in flow so it never covers the canvas */
.fbm-editing.fbm-mode-floating, .fbm-editing.fbm-mode-chatbox { position: relative; inset: auto !important; margin: 0; display: inline-block; }
.fbm-editing .ultrakit-fbm-card { z-index: 5; }

@media (max-width: 767px) { .fbm-hide-mobile { display: none !important; } }
@media (min-width: 768px) { .fbm-hide-desktop { display: none !important; } }

/* ---------- FAB (chat card toggle) ---------- */
.ultrakit-fbm-fab {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--fbm-fab);
    height: var(--fbm-fab);
    padding: 0 !important;
    box-sizing: border-box;
    background: var(--fbm-accent);
    color: #ffffff !important;
    border: 2px solid var(--fbm-accent);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0,0,0,0.22);
    transition: transform 0.3s ease, background 0.3s ease;
}
.fbm-shape-rounded .ultrakit-fbm-fab { border-radius: 20px; }
.fbm-shape-square  .ultrakit-fbm-fab { border-radius: 8px; }
.ultrakit-fbm-fab:hover { transform: scale(1.08); }
.ultrakit-fbm-fab-open, .ultrakit-fbm-fab-close { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; transition: opacity 0.25s ease, transform 0.3s ease; }
.ultrakit-fbm-fab-close { position: absolute; opacity: 0; transform: rotate(-90deg) scale(0.6); }
.ultrakit-fbm-close-svg { width: 22px !important; height: 22px !important; flex-shrink: 0; }
.is-open .ultrakit-fbm-fab-open { opacity: 0; transform: rotate(90deg) scale(0.6); }
.is-open .ultrakit-fbm-fab-close { opacity: 1; transform: rotate(0) scale(1); }
.is-open .ultrakit-fbm-ring { animation: none !important; }

.ultrakit-fbm-tip { position: absolute; top: 50%; transform: translateY(-50%) translateX(6px); white-space: nowrap; padding: 8px 14px; background: #1a1a2e; color: #ffffff; font-size: 13px; font-weight: 600; border-radius: 8px; opacity: 0; pointer-events: none; transition: all 0.25s ease; z-index: 3; }
.fbm-pos-bottom-right .ultrakit-fbm-tip, .fbm-pos-top-right .ultrakit-fbm-tip, .fbm-pos-mid-right .ultrakit-fbm-tip { right: calc(100% + 12px); }
.fbm-pos-bottom-left .ultrakit-fbm-tip, .fbm-pos-top-left .ultrakit-fbm-tip, .fbm-pos-mid-left .ultrakit-fbm-tip { left: calc(100% + 12px); transform: translateY(-50%) translateX(-6px); }
.ultrakit-fbm-fab:hover .ultrakit-fbm-tip { opacity: 1; transform: translateY(-50%) translateX(0); }
.is-open .ultrakit-fbm-tip { display: none; }

/* ---------- Chat card ---------- */
.ultrakit-fbm-card {
    position: absolute;
    width: 320px;
    max-width: calc(100vw - 32px);
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(0,0,0,0.28);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px) scale(0.96);
    transition: all 0.3s ease;
    z-index: 4;
}
.is-open .ultrakit-fbm-card { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.fbm-pos-bottom-right .ultrakit-fbm-card, .fbm-pos-mid-right .ultrakit-fbm-card { right: 0; bottom: calc(var(--fbm-fab) + 14px); }
.fbm-pos-bottom-left .ultrakit-fbm-card, .fbm-pos-mid-left .ultrakit-fbm-card { left: 0; bottom: calc(var(--fbm-fab) + 14px); }
.fbm-pos-top-right .ultrakit-fbm-card { right: 0; top: calc(var(--fbm-fab) + 14px); }
.fbm-pos-top-left .ultrakit-fbm-card { left: 0; top: calc(var(--fbm-fab) + 14px); }
.fbm-editing .ultrakit-fbm-card { right: auto; left: 0; bottom: calc(var(--fbm-fab) + 14px); top: auto; }

.ultrakit-fbm-card-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: linear-gradient(135deg, var(--fbm-accent), var(--fbm-dark)); color: #ffffff; }
.ultrakit-fbm-avatar { position: relative; flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; color: #ffffff; }
.ultrakit-fbm-avatar img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; display: block; }
.ultrakit-fbm-avatar .ultrakit-fbm-svg { width: 26px !important; height: 26px !important; }
.ultrakit-fbm-online { position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; border-radius: 50%; background: #4ade80; border: 2px solid #ffffff; }
.ultrakit-fbm-agent { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.ultrakit-fbm-agent strong { font-size: 16px; font-weight: 700; }
.ultrakit-fbm-agent em { font-style: normal; font-size: 12px; opacity: 0.85; }
.ultrakit-fbm-card-close { flex: 0 0 auto; width: 30px; height: 30px; padding: 0 !important; box-sizing: border-box; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.15); color: #ffffff !important; border: none; border-radius: 50%; cursor: pointer; transition: background 0.2s ease; }
.ultrakit-fbm-card-close:hover { background: rgba(255,255,255,0.3); }
.ultrakit-fbm-card-close .ultrakit-fbm-close-svg { width: 16px !important; height: 16px !important; }

.ultrakit-fbm-card-body { padding: 22px 18px; background: #f0f2f5; }
.ultrakit-fbm-bubble { position: relative; display: inline-block; max-width: 88%; padding: 11px 15px; background: #ffffff; color: #303030; font-size: 14.5px; line-height: 1.45; border-radius: 4px 18px 18px 18px; box-shadow: 0 1px 2px rgba(0,0,0,0.12); animation: ultrakit-fbm-pop 0.5s ease 0.15s both; }
@keyframes ultrakit-fbm-pop { from { opacity: 0; transform: translateY(8px) scale(0.94); } to { opacity: 1; transform: translateY(0) scale(1); } }

.ultrakit-fbm-card-foot { padding: 14px 18px 18px; background: #ffffff; }
.ultrakit-fbm-start { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 13px 20px !important; background: linear-gradient(135deg, var(--fbm-accent), var(--fbm-dark)); color: #ffffff !important; border-radius: 50px; font-size: 15px; font-weight: 700; text-decoration: none !important; transition: all 0.25s ease; }
.ultrakit-fbm-start:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,0.2); }
.ultrakit-fbm-start .ultrakit-fbm-svg { width: 22px !important; height: 22px !important; }

@media (prefers-reduced-motion: reduce) {
    .ultrakit-fbm-ring, .ultrakit-fbm-btn, .ultrakit-fbm-fab { animation: none !important; }
}

/* ---------- Messenger extras: quick-reply chips + unread badge ---------- */
.ultrakit-fbm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ultrakit-fbm-chip { display: inline-block; padding: 8px 15px !important; background: #ffffff; color: var(--fbm-accent) !important; border: 1.5px solid var(--fbm-accent); border-radius: 30px; font-size: 13.5px; font-weight: 600; text-decoration: none !important; transition: all 0.25s ease; }
.ultrakit-fbm-chip:hover { background: var(--fbm-accent); color: #ffffff !important; transform: translateY(-2px); }
.ultrakit-fbm-badge { position: absolute; top: -4px; right: -4px; z-index: 3; min-width: 22px; height: 22px; padding: 0 6px; display: flex; align-items: center; justify-content: center; background: #ff3b30; color: #ffffff; border: 2px solid #ffffff; border-radius: 11px; font-size: 12px; font-weight: 800; line-height: 1; animation: ultrakit-fbm-badge 1.6s ease-in-out infinite; }
@keyframes ultrakit-fbm-badge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.is-open .ultrakit-fbm-badge { display: none; }