.conversation-demo{max-width:600px;margin-inline:auto;color:#121723}.conversation-ad{pointer-events:none;user-select:none;-webkit-user-select:none;touch-action:auto;overflow:clip;border:1px solid #4a6cf72b;border-radius:12px;background:#fff;box-shadow:0 12px 36px #1217230b}.conversation-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px;border-bottom:1px solid #4a6cf71a}.conversation-top .rafiq-symbol{width:20px}.conversation-top .rafiq-brand>span{font-size:20px!important}.conversation-top p{font-size:11px;color:#788293;margin-top:2px}.conversation-feed{height:240px;overflow:visible;padding:12px 16px;background:#f5f7ff}.conversation-row{display:flex;align-items:flex-end;gap:6px;margin-bottom:8px}.conversation-row.customer{justify-content:flex-end}.conversation-agent-logo{display:block;flex:none;width:14px;height:14px;background:url(/images/rafiq-symbol/r-symbol-blue.svg) 50%/contain no-repeat}.dark .conversation-agent-logo{background-image:url(/images/rafiq-symbol/r-symbol-white.svg)}.conversation-row.customer .customer-avatar{order:2}.conversation-row.agent{justify-content:flex-start}.conversation-bubble{width:fit-content;min-width:0;max-width:89%;padding:8px 10px;border-radius:10px;font-size:13px;line-height:1.5;background:#fff;box-shadow:0 2px 4px #12172305}.customer .conversation-bubble{background:#4a6cf7;color:white;border-end-end-radius:3px}.agent .conversation-bubble{border-end-start-radius:3px}.conversation-sender{display:flex;align-items:center;gap:5px;color:#4a6cf7;font-size:11px;font-weight:600;margin-bottom:2px}.customer-avatar{flex:none;width:23px;height:23px;border-radius:50%;background:#e8edff;color:#4a6cf7;padding:4px}.conversation-typing{display:flex;align-items:center;gap:4px;height:18px;color:#788293;font-size:11px}.conversation-typing[aria-hidden=true]{display:none}.conversation-typing span{margin-inline-end:4px}.conversation-typing i{width:4px;height:4px;background:#4a6cf7;border-radius:50%;animation:conversation-dot 1s ease-in-out infinite}.conversation-typing i:nth-of-type(2){animation-delay:.12s}.conversation-typing i:nth-of-type(3){animation-delay:.24s}.conversation-composer{display:flex;align-items:center;gap:8px;padding:10px 16px;border-top:1px solid #4a6cf71a}.conversation-input{flex:1;min-width:0;height:42px;border-radius:6px;background:#f5f7ff;padding:5px 9px;font-size:12px;line-height:16px;display:flex;align-items:center;color:#788293}.conversation-send{width:30px;height:30px;padding:7px;flex:none;border-radius:6px;background:#4a6cf7;color:#fff}.conversation-send svg{width:100%;height:100%}[dir=rtl] .conversation-send svg{transform:scaleX(-1)}.conversation-caret{height:13px;width:1px;background:#4a6cf7;flex:none;animation:conversation-dot .8s infinite}.conversation-controls{position:relative;height:0}.conversation-controls button{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.conversation-controls button:focus-visible{inset-inline-end:0;top:4px;width:auto;height:auto;min-height:32px;margin:0;padding:5px 10px;overflow:visible;clip-path:none;background:#fff;color:#4a6cf7;border-radius:6px;outline:2px solid #4a6cf7;outline-offset:2px;z-index:1;font-size:12px}.dark .conversation-controls button:focus-visible{background:#1d2430;color:#98acff}.dark .conversation-demo{color:#fff}.dark .conversation-ad{background:#1d2430}.dark .conversation-feed,.dark .conversation-input{background:#171c28}.dark .agent .conversation-bubble{background:#2c3342}.dark .conversation-controls,.dark .conversation-input,.dark .conversation-top p,.dark .conversation-typing{color:#b0b9cc}.dark .conversation-controls button,.dark .conversation-sender{color:#98acff}@keyframes conversation-dot{0%,70%,to{opacity:.35}35%{opacity:1}}.conversation-demo[data-demo-running=false] *{animation-play-state:paused!important}@media(max-width:574px){.conversation-top{padding:10px 12px}.conversation-feed{padding:10px 12px;height:280px}.conversation-bubble{max-width:92%;font-size:12px;padding:7px 9px}.conversation-composer{padding:8px 12px}.conversation-input{font-size:11px;height:48px}.conversation-top .rafiq-brand>span{font-size:18px!important}}@media(prefers-reduced-motion:reduce){.conversation-demo *{animation:none!important;transition:none!important}}