/* Updated widget styles with SVG icons and stacked layout */
#occp-widget-root { position: fixed; z-index:99999; font-family: Arial, sans-serif; }
#occp-widget-root.bottom-right { bottom: 20px; right: 20px; }
#occp-widget-root.bottom-left { bottom: 20px; left: 20px; }
#occp-widget-root.center-bottom { left:50%; transform: translateX(-50%); bottom:20px; }
#occp-widget-root.right-middle { right:20px; top:40%; transform: translateY(-50%); }

/* stacked floating buttons container */
.occp-floating-stack { display:flex; flex-direction:column; align-items:flex-end; gap:12px; position:fixed; z-index:99999; }
#occp-widget-root.right-middle .occp-floating-stack { right:20px; top:50%; transform: translateY(-50%); }

.occp-open-btn {
  width:62px; height:62px; border-radius:50%; border:0; box-shadow:0 6px 18px rgba(0,0,0,0.12);
  cursor:pointer; background: linear-gradient(135deg,#00c853,#00e676); color:#fff; font-size:22px;
  display:flex; align-items:center; justify-content:center; transition:transform .18s ease, box-shadow .18s ease;
  position:relative;
}
.occp-open-btn.active { transform: rotate(10deg) scale(1.02); box-shadow:0 12px 28px rgba(0,0,0,0.2); }
.occp-chat-icon { width:34px; height:34px; pointer-events:none; display:block; }

.occp-floating-btn { width:56px; height:56px; border-radius:50%; border:0; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 22px rgba(0,0,0,0.18); transition:transform .18s ease, box-shadow .18s ease; background:#25D366; }
.occp-floating-btn:hover { transform: translateY(-6px); box-shadow:0 16px 36px rgba(0,0,0,0.28); }
.occp-icon-img { width:28px; height:28px; display:block; }

/* action panel */
.occp-panel { position: absolute; bottom:80px; right:0; width:280px; max-width:90vw; background:#fff; border-radius:12px; box-shadow:0 18px 48px rgba(0,0,0,0.18); display:none; overflow:hidden; }
#occp-widget-root.bottom-left .occp-panel { right:auto; left:0; }
#occp-widget-root.center-bottom .occp-panel { left:50%; transform: translateX(-50%); right:auto; }

.occp-widget.open .occp-panel { display:block; animation: oc-pop .18s ease-out; }
@keyframes oc-pop { from { transform: translateY(8px) scale(0.98); opacity:0 } to { transform: translateY(0) scale(1); opacity:1 } }

.occp-panel-head { padding:12px 14px; border-bottom:1px solid #eee; display:flex; justify-content:space-between; align-items:center; background:linear-gradient(90deg,#fafafa,#fff); }
.occp-panel-body { padding:12px; display:flex; flex-direction:column; gap:10px; }
.occp-action { display:flex; align-items:center; gap:10px; padding:10px; border-radius:8px; text-decoration:none; color:#222; background:#f8f8f8; transition:transform .12s ease; }
.occp-action:hover { transform: translateY(-3px); background:#fff; box-shadow:0 8px 20px rgba(0,0,0,0.06); }
.occp-action-svg { width:28px; height:28px; display:inline-block; }

/* animation presets */
.occp-widget.pulse .occp-open-btn { animation: occpPulse 2.2s infinite; }
@keyframes occpPulse { 0%{ transform:scale(1) } 50%{ transform:scale(1.06) } 100%{ transform:scale(1) } }
.occp-widget.bounce .occp-open-btn { animation: occpBounce 1.6s infinite; transform-origin:center; }
@keyframes occpBounce { 0%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } 100%{ transform:translateY(0) } }

/* sizes */
#occp-widget-root.size-small .occp-open-btn { width:48px; height:48px; }
#occp-widget-root.size-small .occp-chat-icon { width:22px; height:22px; }
#occp-widget-root.size-large .occp-open-btn { width:78px; height:78px; }
#occp-widget-root.size-large .occp-chat-icon { width:42px; height:42px; }

/* responsive */
@media (max-width:600px){
  .occp-panel { width:92vw; left:4vw; right:auto; bottom:100px; }
  #occp-widget-root.center-bottom { left:50%; transform: translateX(-50%); }
  #occp-widget-root.right-middle .occp-floating-stack { right:12px; top:55%; transform: translateY(-50%); }
}