#wpchat-root{--wcx-color:#1e73be; --wcx-color-weak:rgba(30,115,190,.45); --wcx-font:inherit; --wcx-fz:16px; --wcx-fz-h:18px; --wcx-fz-b:14px; --wcx-shadow:0 14px 32px rgba(0,0,0,.14); --wcx-border:#e5e7eb; --wcx-text:#1f2937; --wcx-pane-bg:#f7f9fc; direction:rtl; color:var(--wcx-text); font-family:var(--wcx-font); font-size:var(--wcx-fz); z-index:999999} #wpchat-root *{box-sizing:border-box} #wpchat-root #wcx-widget{position:relative;width:60px;height:60px;border-radius:50%;background:var(--wcx-color);color:#fff;border:none;display:grid;place-items:center;box-shadow:var(--wcx-shadow);isolation:isolate;cursor:pointer} #wpchat-root #wcx-widget .wcx-icon{width:28px;height:28px;fill:currentColor} #wpchat-root #wcx-widget .wcx-pulse{position:absolute;inset:-6px;border-radius:inherit;border:3px solid var(--wcx-color-weak);animation:wcx_pulse 1.6s infinite ease-out} #wpchat-root #wcx-tip{position:absolute; right:65px; bottom:20px; width:300px; background:#fff; border-radius:14px; box-shadow:var(--wcx-shadow); opacity:0; transform:translateY(6px); pointer-events:none; transition:all .3s cubic-bezier(.2,.7,.2,1); overflow:visible; border:1px solid var(--wcx-border)} #wpchat-root[data-corner$="left"] #wcx-tip { right: auto; left: 76px; } /* FIX: Position tip correctly on the left */ #wpchat-root #wcx-tip.show{opacity:1; transform:translateY(0); pointer-events:auto} #wpchat-root #wcx-tip .wcx-head{background:var(--wcx-color); color:#fff; padding:8px 12px; display:flex; align-items:center; gap:10px; border-top-left-radius:14px; border-top-right-radius:14px} #wpchat-root #wcx-tip .wcx-avatar{width:28px;height:28px;border-radius:50%; background:rgba(0,0,0,.15); color:#fff; display:grid; place-items:center; font-weight:800; overflow:hidden} #wpchat-root #wcx-tip .wcx-avatar img{width:28px;height:28px;object-fit:cover;border-radius:50%} #wpchat-root #wcx-tip .wcx-title{font-weight:800; font-size:var(--wcx-fz)} #wpchat-root #wcx-tip .wcx-close{margin-inline-start:auto; inline-size:30px; block-size:30px; border-radius:999px; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.22); display:grid; place-items:center; cursor:pointer} #wpchat-root #wcx-tip .wcx-close span{position:relative; width:100%; height:100%} #wpchat-root #wcx-tip .wcx-close span::before, #wpchat-root #wcx-tip .wcx-close span::after{content:""; position:absolute; top:50%; left:50%; width:12px; height:2px; background:#fff; border-radius:2px; transform-origin:center} #wpchat-root #wcx-tip .wcx-close span::before{transform:translate(-50%,-50%) rotate(45deg)} #wpchat-root #wcx-tip .wcx-close span::after{transform:translate(-50%,-50%) rotate(-45deg)} #wpchat-root #wcx-tip .wcx-body{background:#fff; padding:12px 14px; font-size:var(--wcx-fz-b); border-bottom-left-radius:14px; border-bottom-right-radius:14px} #wpchat-root #wcx-tip .wcx-arrow{position:absolute; bottom:22px; width:0; height:0; filter: drop-shadow(2px 0 0 rgba(0,0,0,.08))} #wpchat-root[data-corner$="right"] #wcx-tip .wcx-arrow{ right:-10px; border-top:10px solid transparent; border-bottom:10px solid transparent; border-left:10px solid #fff } #wpchat-root[data-corner$="left"] #wcx-tip .wcx-arrow{ left:-10px; border-top:10px solid transparent; border-bottom:10px solid transparent; border-right:10px solid #fff; filter: drop-shadow(-2px 0 0 rgba(0,0,0,.08))} #wpchat-root #wcx-panel{position:absolute; right:0; bottom:0; width:420px; height:620px; background:#fff; border-radius:18px; overflow:hidden; box-shadow:var(--wcx-shadow); display:none} #wpchat-root[data-corner$="left"] #wcx-panel { right: auto; left: 0; } /* FIX: Position panel correctly on the left */ #wpchat-root #wcx-panel.show{display:grid; grid-template-rows:auto 1fr auto} #wpchat-root .wcx-ph{background:var(--wcx-color); color:#fff; display:grid; grid-template-columns:68px 1fr 46px; align-items:center; padding:12px 12px} #wpchat-root .wcx-ph .wcx-left{display:grid; place-items:center} #wpchat-root .wcx-ph .wcx-ph-logo{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.25);display:grid;place-items:center;overflow:hidden} #wpchat-root .wcx-ph .wcx-ph-logo img{width:100%;height:100%;object-fit:cover;border-radius:50%} #wpchat-root .wcx-ht{font-weight:900; font-size:var(--wcx-fz-h)} #wpchat-root .wcx-meta{font-size:12px; display:flex; align-items:center; gap:6px; opacity:.95; margin-top:2px} #wpchat-root .wcx-status{width:8px;height:8px;border-radius:50%;background:#a7ff83; display:inline-block} #wpchat-root .wcx-pclose{inline-size:30px; block-size:30px; border-radius:999px; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.22); display:grid; place-items:center; cursor:pointer} #wpchat-root .wcx-pclose span{position:relative; width:100%; height:100%} #wpchat-root .wcx-pclose span::before,#wpchat-root .wcx-pclose span::after{content:""; position:absolute; top:50%; left:50%; width:12px; height:2px; background:#fff; border-radius:2px; transform-origin:center} #wpchat-root .wcx-pclose span::before{transform:translate(-50%,-50%) rotate(45deg)} #wpchat-root .wcx-pclose span::after{transform:translate(-50%,-50%) rotate(-45deg)} #wpchat-root .wcx-bodyarea{background:var(--wcx-pane-bg); padding:14px; overflow-y:auto; overflow-x: hidden; display: flex; flex-direction: column;} #wpchat-root .wcx-date{position:relative;text-align:center;color:#6b7280;font-size:13px;margin:8px 0 16px} #wpchat-root .wcx-date:before,#wpchat-root .wcx-date:after{content:""; position:absolute; top:50%; width:28%; border-top:1px dashed #cfd4dc} #wpchat-root .wcx-date:before{right:0}#wpchat-root .wcx-date:after{left:0} #wpchat-root .wcx-msg { position: relative; } /* START: REVERSED MANAGER/USER LOGIC */ /* Default (Manager on Right) */ #wpchat-root[data-manager-right="0"] .wcx-msg.wcx-user { align-self: flex-start; } #wpchat-root[data-manager-right="0"] .wcx-msg.wcx-manager { align-self: flex-end; } /* Manager on Left */ #wpchat-root[data-manager-right="1"] .wcx-msg.wcx-user { align-self: flex-end; } #wpchat-root[data-manager-right="1"] .wcx-msg.wcx-manager { align-self: flex-start; } /* END: REVERSED MANAGER/USER LOGIC */ #wpchat-root .wcx-msg.wcx-user { display: grid; grid-template-columns: 1fr; gap: 2px; margin: 0 15px 8px 0;} #wpchat-root[data-manager-right="0"] .wcx-user .wcx-bubble, #wpchat-root[data-manager-right="0"] .wcx-user .wcx-time { justify-self: start; } #wpchat-root[data-manager-right="1"] .wcx-user .wcx-bubble, #wpchat-root[data-manager-right="1"] .wcx-user .wcx-time { justify-self: end; } #wpchat-root .wcx-msg.wcx-manager { display: flex; gap: 10px; align-items: flex-end; margin: 0 0 8px 15px;} #wpchat-root[data-manager-right="1"] .wcx-msg.wcx-manager { flex-direction: row-reverse; } .wcx-msg-content { display: flex; flex-direction: column; } #wpchat-root[data-manager-right="0"] .wcx-msg-content { align-items: flex-end; } #wpchat-root[data-manager-right="1"] .wcx-msg-content { align-items: flex-start; } .wcx-avatar-in-chat { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: #ddd; } .wcx-avatar-in-chat img { width: 100%; height: 100%; object-fit: cover; } #wpchat-root .wcx-reply-cta { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.05) !important; border-radius: 50%; width: 24px; height: 24px; display: none; cursor: pointer; opacity: .75; border: none !important; box-shadow: none !important; padding: 4px !important; margin: 0 !important; z-index: 2; transition: opacity 0.2s ease; } #wpchat-root[data-manager-right="0"] .wcx-user .wcx-bubble .wcx-reply-cta { right: calc(100% + 3px); transform: translateY(-50%) scaleX(-1); } #wpchat-root[data-manager-right="0"] .wcx-manager .wcx-bubble .wcx-reply-cta { left: calc(100% + 3px); transform: translateY(-50%) scaleX(1); } #wpchat-root[data-manager-right="1"] .wcx-user .wcx-bubble .wcx-reply-cta { left: calc(100% + 3px); transform: translateY(-50%) scaleX(1); } #wpchat-root[data-manager-right="1"] .wcx-manager .wcx-bubble .wcx-reply-cta { right: calc(100% + 3px); transform: translateY(-50%) scaleX(-1); } #wpchat-root .wcx-bubble{ position: relative; padding: 12px 14px; border-radius: 16px; background: #fff; border: 1px solid #e6eaef; box-shadow: 0 1px 4px rgba(0,0,0,.03); line-height: 1.75; word-wrap: break-word; word-break: break-all; } #wpchat-root .wcx-manager .wcx-bubble{ background:#e7f9ee; border-color:#c9eed8 } #wpchat-root .wcx-bubble .wcx-quoted { padding: 8px 10px; margin: -4px -6px 10px; border-inline-start: 3px solid var(--wcx-color); background: rgba(0,0,0,.04); border-radius: 4px; font-size: 13px; color: #374151; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #wpchat-root .wcx-manager .wcx-bubble .wcx-quoted { border-inline-start-color: #16a34a; background: rgba(0,100,0,.06); } #wpchat-root .wcx-quote{ padding:6px 0 } #wpchat-root .wcx-qbar{ display:flex; align-items:center; gap:8px; background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:6px 10px; box-shadow:0 1px 4px rgba(0,0,0,.04); position:relative } #wpchat-root .wcx-qbar:before{ content:""; position:absolute; inset:0 0 0 auto; width:4px; background:var(--wcx-color); border-top-right-radius:10px; border-bottom-right-radius:10px } #wpchat-root .wcx-qtext { font-size: 13px; color: #374151; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } #wpchat-root .wcx-qx { margin-inline-start: auto; background: #e5e7eb; border: none; border-radius: 50%; width: 22px; height: 22px; cursor: pointer; color: #555; display: grid; place-items: center; font-size: 14px; padding: 0; } #wpchat-root .wcx-time{ font-size:12px; color:#6b7280; padding: 0 5px; } #wpchat-root .wcx-note{ text-align:center; background:#fff2bf; border:1px solid #fee08a; padding:8px 10px; border-radius:12px; color:#374151; margin:10px 0; font-size:13px } #wpchat-root .wcx-pf{ background:#fff; border-top:1px solid #eef1f4; padding:10px; margin-top: auto; } #wpchat-root #wcx-composer{ position:relative; display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center } #wpchat-root #wcx-composer input[type="text"]{ border:1px solid #e5e7eb; border-radius:14px; padding:12px 14px; outline:none } #wpchat-root .wcx-send{ background:var(--wcx-color); color:#fff; border:none; border-radius:14px; inline-size:56px; block-size:48px; display:grid; place-items:center; cursor:pointer } #wpchat-root .wcx-send svg{ width:22px; height:22px; fill:#fff; transform:scaleX(-1) } #wpchat-root .wcx-tools{ display:flex; gap:10px; align-items:center } #wpchat-root .wcx-emoji, #wpchat-root .wcx-attach { inline-size: 48px; block-size: 48px; border-radius: 14px; border: 1px solid #e5e7eb; background: #fff; cursor: pointer; display: grid; place-items: center; } #wpchat-root .wcx-emoji svg, #wpchat-root .wcx-attach svg { width: 24px; height: 24px; fill: #374151; } #wpchat-root .wcx-emoji-pop{ position:absolute; bottom:72px; right:-10px; background:#fff; border:1px solid #e5e7eb; border-radius:12px; box-shadow:var(--wcx-shadow); padding:8px; z-index:2; inline-size:420px; max-height:260px; overflow:auto } #wpchat-root .wcx-emo-grid { display: grid; grid-template-columns: repeat(8, 2em); gap: 6px; font-size: 22px; line-height: 1; cursor: default; } #wpchat-root .wcx-msg:hover .wcx-reply-cta { display: block; } #wpchat-root .wcx-reply-cta:hover { opacity: 1; background: rgba(0,0,0,0.1) !important; } /* START: REVERSED BUBBLE STYLES */ /* Default: Manager on RIGHT */ #wpchat-root[data-manager-right="0"] .wcx-manager .wcx-bubble { border-radius: 18px 18px 18px 4px; } #wpchat-root[data-manager-right="0"] .wcx-manager .wcx-bubble::after { content: ""; position: absolute; bottom: 0; left: -8px; width: 0; height: 0; border-style: solid; border-width: 0 0 12px 12px; border-color: transparent transparent #e7f9ee transparent; } #wpchat-root[data-manager-right="0"] .wcx-manager .wcx-bubble::before { content: ""; position: absolute; bottom: -1px; left: -9px; width: 0; height: 0; border-style: solid; border-width: 0 0 13px 13px; border-color: transparent transparent #c9eed8 transparent; } #wpchat-root[data-manager-right="0"] .wcx-user .wcx-bubble { border-radius: 18px 18px 4px 18px; } #wpchat-root[data-manager-right="0"] .wcx-user .wcx-bubble::after { content: ""; position: absolute; bottom: 0; right: -8px; width: 0; height: 0; border-style: solid; border-width: 12px 0 0 12px; border-color: transparent transparent transparent #fff; } #wpchat-root[data-manager-right="0"] .wcx-user .wcx-bubble::before { content: ""; position: absolute; bottom: -1px; right: -9px; width: 0; height: 0; border-style: solid; border-width: 13px 0 0 13px; border-color: transparent transparent transparent #e6eaef; } /* Option Checked: Manager on LEFT */ #wpchat-root[data-manager-right="1"] .wcx-user .wcx-bubble { border-radius: 18px 18px 18px 4px; } #wpchat-root[data-manager-right="1"] .wcx-user .wcx-bubble::after { content: ""; position: absolute; bottom: 0; left: -8px; width: 0; height: 0; border-style: solid; border-width: 0 0 12px 12px; border-color: transparent transparent #fff transparent; } #wpchat-root[data-manager-right="1"] .wcx-user .wcx-bubble::before { content: ""; position: absolute; bottom: -1px; left: -9px; width: 0; height: 0; border-style: solid; border-width: 0 0 13px 13px; border-color: transparent transparent #e6eaef transparent; } #wpchat-root[data-manager-right="1"] .wcx-manager .wcx-bubble { border-radius: 18px 18px 4px 18px; } #wpchat-root[data-manager-right="1"] .wcx-manager .wcx-bubble::after { content: ""; position: absolute; bottom: 0; right: -8px; width: 0; height: 0; border-style: solid; border-width: 12px 0 0 12px; border-color: transparent transparent transparent #e7f9ee; } #wpchat-root[data-manager-right="1"] .wcx-manager .wcx-bubble::before { content: ""; position: absolute; bottom: -1px; right: -9px; width: 0; height: 0; border-style: solid; border-width: 13px 0 0 13px; border-color: transparent transparent transparent #c9eed8; } /* END: REVERSED BUBBLE STYLES */ /* START: WIDGET ANIMATIONS */ @keyframes wcx_pulse{ 0%{transform:scale(1);opacity:.8} 70%,100%{transform:scale(1.6);opacity:0} } .wcx-fx-pulse, .wcx-fx-heartbeat, .wcx-fx-vibrate, .wcx-fx-shakeX, .wcx-fx-shakeY, .wcx-fx-tada, .wcx-fx-wobble, .wcx-fx-jello, .wcx-fx-bounce, .wcx-fx-flash, .wcx-fx-rubberBand, .wcx-fx-swing, .wcx-fx-hinge, .wcx-fx-jackInTheBox, .wcx-fx-fadeInUp, .wcx-fx-fadeInDown, .wcx-fx-flip, .wcx-fx-flipInX, .wcx-fx-flipInY, .wcx-fx-rotate, .wcx-fx-float, .wcx-fx-blink { animation-duration: 1.5s; animation-fill-mode: both; animation-iteration-count: infinite; } .wcx-fx-heartbeat { animation-name: heartbeat; animation-duration: 1.3s; animation-timing-function: ease-in-out; } @keyframes heartbeat { 0% { transform: scale(1); } 14% { transform: scale(1.3); } 28% { transform: scale(1); } 42% { transform: scale(1.3); } 70% { transform: scale(1); } } .wcx-fx-vibrate { animation-name: vibrate; animation-duration: 0.5s; } @keyframes vibrate { 0% { transform: translate(0); } 10% { transform: translate(-2px, -2px); } 20% { transform: translate(2px, -2px); } 30% { transform: translate(-2px, 2px); } 40% { transform: translate(2px, 2px); } 50% { transform: translate(-2px, -2px); } 60% { transform: translate(2px, -2px); } 70% { transform: translate(-2px, 2px); } 80% { transform: translate(2px, 2px); } 90% { transform: translate(-2px, -2px); } 100% { transform: translate(0); } } .wcx-fx-shakeX { animation-name: shakeX; } @keyframes shakeX { from, to { transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { transform: translate3d(10px, 0, 0); } } .wcx-fx-shakeY { animation-name: shakeY; } @keyframes shakeY { from, to { transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { transform: translate3d(0, -10px, 0); } 20%, 40%, 60%, 80% { transform: translate3d(0, 10px, 0); } } .wcx-fx-tada { animation-name: tada; } @keyframes tada { from { transform: scale3d(1, 1, 1); } 10%, 20% { transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { transform: scale3d(1, 1, 1); } } .wcx-fx-wobble { animation-name: wobble; } @keyframes wobble { from { transform: translate3d(0, 0, 0); } 15% { transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { transform: translate3d(0, 0, 0); } } .wcx-fx-jello { animation-name: jello; transform-origin: center; } @keyframes jello { from, 11.1%, to { transform: translate3d(0, 0, 0); } 22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } .wcx-fx-bounce { animation-name: bounce; transform-origin: center bottom; } @keyframes bounce { from, 20%, 53%, 80%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 0, 0); } 40%, 43% { animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: translate3d(0, -30px, 0) scaleY(1.1); } 70% { animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: translate3d(0, -15px, 0) scaleY(1.05); } 90% { transform: translate3d(0, -4px, 0) scaleY(1.02); } } .wcx-fx-flash { animation-name: flash; } @keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } .wcx-fx-rubberBand { animation-name: rubberBand; } @keyframes rubberBand { from { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.25, 0.75, 1); } 40% { transform: scale3d(0.75, 1.25, 1); } 50% { transform: scale3d(1.15, 0.85, 1); } 65% { transform: scale3d(0.95, 1.05, 1); } 75% { transform: scale3d(1.05, 0.95, 1); } to { transform: scale3d(1, 1, 1); } } .wcx-fx-swing { transform-origin: top center; animation-name: swing; } @keyframes swing { 20% { transform: rotate3d(0, 0, 1, 15deg); } 40% { transform: rotate3d(0, 0, 1, -10deg); } 60% { transform: rotate3d(0, 0, 1, 5deg); } 80% { transform: rotate3d(0, 0, 1, -5deg); } to { transform: rotate3d(0, 0, 1, 0deg); } } .wcx-fx-hinge { animation-duration: 2s; transform-origin: top left; animation-name: hinge; } @keyframes hinge { 0% { animation-timing-function: ease-in-out; } 20%, 60% { transform: rotate3d(0, 0, 1, 80deg); animation-timing-function: ease-in-out; } 40%, 80% { transform: rotate3d(0, 0, 1, 60deg); animation-timing-function: ease-in-out; opacity: 1; } to { transform: translate3d(0, 700px, 0); opacity: 0; } } .wcx-fx-jackInTheBox { animation-name: jackInTheBox; } @keyframes jackInTheBox { from { opacity: 0; transform: scale(0.1) rotate(30deg); transform-origin: center bottom; } 50% { transform: rotate(-10deg); } 70% { transform: rotate(3deg); } to { opacity: 1; transform: scale(1); } } .wcx-fx-fadeInUp { animation-name: fadeInUp; } @keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } .wcx-fx-fadeInDown { animation-name: fadeInDown; } @keyframes fadeInDown { from { opacity: 0; transform: translate3d(0, -100%, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } .wcx-fx-flip { animation-name: flip; backface-visibility: visible; } @keyframes flip { from { transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg); animation-timing-function: ease-out; } 40% { transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); animation-timing-function: ease-out; } 50% { transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); animation-timing-function: ease-in; } 80% { transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); animation-timing-function: ease-in; } to { transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg); animation-timing-function: ease-in; } } .wcx-fx-flipInX { backface-visibility: visible !important; animation-name: flipInX; } @keyframes flipInX { from { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); animation-timing-function: ease-in; opacity: 0; } 40% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); animation-timing-function: ease-in; } 60% { transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { transform: perspective(400px); } } .wcx-fx-flipInY { backface-visibility: visible !important; animation-name: flipInY; } @keyframes flipInY { from { transform: perspective(400px) rotate3d(0, 1, 0, 90deg); animation-timing-function: ease-in; opacity: 0; } 40% { transform: perspective(400px) rotate3d(0, 1, 0, -20deg); animation-timing-function: ease-in; } 60% { transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { transform: perspective(400px); } } .wcx-fx-rotate { animation-name: rotate; transform-origin: center; } @keyframes rotate { from { transform: rotate3d(0, 0, 1, 0deg); } to { transform: rotate3d(0, 0, 1, 360deg); } } .wcx-fx-float { animation-name: float; } @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } } .wcx-fx-blink { animation-name: blink; } @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0.2; } 100% { opacity: 1; } } /* END: WIDGET ANIMATIONS */ /* کد برای کنترل اندازه ایموجی‌ها در متن */ img.wcx-emoji-in-text { height: 1.2em; width: 1.2em; margin: 0 .07em; vertical-align: -0.2em; display: inline-block; } /* استایل هایلایت برای پیام */ .wcx-highlight { animation: highlight-pulse 2s ease; background-color: #fff2bf; border-radius: 8px; } @keyframes highlight-pulse { 0% { background-color: transparent; } 20% { background-color: #fff2bf; } 60% { background-color: #fff2bf; } 100% { background-color: transparent; } } .wcx-quoted { padding: 6px 10px; margin-bottom: 8px; background: rgba(0, 0, 0, 0.05); border-right: 3px solid #007cba; border-radius: 4px; font-size: 12px; color: #374151; } .wcx-quoted:hover { background: rgba(0, 0, 0, 0.08); } /* Drag and Drop Overlay Style */ #wpchat-root #wcx-panel.wcx-drag-over::after { content: "فایل خود را اینجا رها کنید"; position: absolute; inset: 0; background-color: rgba(255, 255, 255, 0.9); display: flex; align-items: center; justify-content: center; font-size: 1.2em; font-weight: bold; color: var(--wcx-color); border: 2px dashed var(--wcx-color); border-radius: 18px; /* Matching panel's border-radius */ z-index: 100; } /* --- Message Entrance Animations --- */ @keyframes slideInFromLeft { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInFromRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } /* Default: Manager on Right, User on Left */ #wpchat-root[data-manager-right="0"] .wcx-msg.wcx-user.new-message { animation: slideInFromRight 0.4s ease-out; /* اصلاح شد */ } #wpchat-root[data-manager-right="0"] .wcx-msg.wcx-manager.new-message { animation: slideInFromLeft 0.4s ease-out; /* اصلاح شد */ } /* Reversed: Manager on Left, User on Right */ #wpchat-root[data-manager-right="1"] .wcx-msg.wcx-user.new-message { animation: slideInFromLeft 0.4s ease-out; /* اصلاح شد */ } #wpchat-root[data-manager-right="1"] .wcx-msg.wcx-manager.new-message { animation: slideInFromRight 0.4s ease-out; /* اصلاح شد */ } /* --- Mobile Responsiveness --- */ @media (max-width: 768px) { /* وقتی پنل باز است، کانتینر اصلی را تمام صفحه کن */ #wpchat-root.wcx-panel-open { width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; } /* حالا پنل چت می‌تواند داخل کانتینر تمام‌صفحه، خودش را تمام‌صفحه کند */ #wpchat-root #wcx-panel.show { display: grid !important; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; border-radius: 0; } }