/* Frontend */
.ffc-root{position:fixed;z-index:999999;bottom:var(--ffc-bottom);right:var(--ffc-side);font-family:'Tajawal',system-ui,-apple-system,'Segoe UI',Arial,sans-serif}
.ffc-root.ffc-pos-left{left:var(--ffc-side);right:auto}
.ffc-root.ffc-rtl{direction:rtl;text-align:right}
.ffc-overlay{position:fixed;inset:0;background:rgba(0,0,0,.28);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:999998}
.ffc-root.ffc-open .ffc-overlay{opacity:1;pointer-events:auto}

.ffc-fab{width:62px;height:62px;border-radius:999px;border:0;background:var(--ffc-floating-bg);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 30px rgba(0,0,0,.24);transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease}
.ffc-fab:hover{transform:translateY(-2px);box-shadow:0 18px 36px rgba(0,0,0,.26)}
.ffc-root.ffc-open .ffc-fab{opacity:0;pointer-events:none;transform:scale(.92)}
.ffc-fab-icon{display:inline-flex;width:28px;height:28px}
.ffc-fab-icon img{width:28px;height:28px;border-radius:8px;object-fit:cover}
.ffc-svg svg{width:100%;height:100%}

.ffc-panel{position:absolute;bottom:var(--ffc-panel-gap);right:0;width:320px;max-width:min(92vw,360px);opacity:0;pointer-events:none;transform:translateY(10px) scale(.98);transition:opacity .18s ease, transform .18s ease;z-index:999999}
.ffc-root.ffc-pos-left .ffc-panel{left:0;right:auto}
.ffc-root.ffc-open .ffc-panel{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}
.ffc-panel-inner{background:var(--ffc-panel-bg);border-radius:22px;box-shadow:0 18px 45px rgba(0,0,0,.18);overflow:hidden;border:1px solid rgba(0,0,0,.06);display:flex;flex-direction:column;max-height:var(--ffc-panel-maxh)}
.ffc-panel-header{display:flex;align-items:center;gap:10px;padding:14px 14px 12px;background:linear-gradient(135deg, rgba(16,185,129,.12), rgba(16,185,129,0));border-bottom:1px solid rgba(0,0,0,.05)}
.ffc-welcome{flex:1;font-size:14px;line-height:1.5;color:#111827}
.ffc-close{width:34px;height:34px;border-radius:10px;border:1px solid rgba(0,0,0,.08);background:#fff;cursor:pointer;font-size:22px;line-height:1;color:#111827;display:flex;align-items:center;justify-content:center;transition:transform .15s ease}
.ffc-close:hover{transform:scale(1.03)}

.ffc-actions{padding:12px;display:flex;flex-direction:column;gap:10px;flex:1;overflow:auto}
.ffc-action{display:flex;align-items:center;gap:10px;text-decoration:none;border:1px solid rgba(0,0,0,.10);border-radius:70px;padding:12px 14px;background:#fff;color:#111827;transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease}
.ffc-action:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(0,0,0,.10);border-color:rgba(16,185,129,.55)}
.ffc-action:focus{outline:none;box-shadow:0 0 0 4px rgba(16,185,129,.18)}
.ffc-action-icon{width:34px;height:34px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:rgba(16,185,129,.12);color:var(--ffc-accent);flex:0 0 auto}
.ffc-action-icon img{width:18px;height:18px;border-radius:6px;object-fit:cover}
.ffc-action-label{font-size:14px;font-weight:700}
.ffc-rtl .ffc-action{flex-direction:row-reverse}
.ffc-rtl .ffc-action-icon{order:0}
.ffc-rtl .ffc-action-label{order:1}
.ffc-rtl .ffc-panel-header{flex-direction:row-reverse}
.ffc-rtl .ffc-welcome{text-align:right}
.ffc-rtl .ffc-action-label{text-align:right}

.ffc-panel-footer{padding:10px 14px 14px;border-top:1px solid rgba(0,0,0,.05);background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.02))}
.ffc-footer{font-size:12px;color:#374151;line-height:1.45}

/* subtle "active" pulse that cycles */
.ffc-action.ffc-active{border-color:rgba(16,185,129,.70);box-shadow:0 14px 28px rgba(16,185,129,.10)}
.ffc-action.ffc-active .ffc-action-icon{background:rgba(16,185,129,.18)}
@media (max-width:480px){
  .ffc-panel{width:300px}
  .ffc-fab{width:58px;height:58px}
}