/* Ravak live chat 2.13.5 — scoped chat styles, restricted palette. */ #rvk-chat, #rvk-chat * { box-sizing: border-box; } #rvk-chat { --rvk-chat-yellow: var(--rvk-chat-accent, #FFBC35); --rvk-chat-black: #111111; --rvk-chat-white: #FFFFFF; --rvk-chat-text: #111111; --rvk-chat-muted: #111111; --rvk-chat-border: rgba(17,17,17,.10); font-family: inherit; direction: rtl; } #rvk-chat .rvk-chat-launcher { position: fixed; inset-inline-start: var(--rvk-chat-launcher-offset-x, 24px); inset-block-end: var(--rvk-chat-launcher-offset-y, 24px); z-index: 99990; width: var(--rvk-chat-launcher-size, 62px); height: var(--rvk-chat-launcher-size, 62px); padding: 0; border: var(--rvk-chat-launcher-border-width, 0px) solid var(--rvk-chat-launcher-border-color, #FFFFFF); border-radius: var(--rvk-chat-launcher-radius, 50%); display: grid; place-items: center; background: var(--rvk-chat-launcher, #FFBC35); color: var(--rvk-chat-launcher-icon, #111111); box-shadow: var(--rvk-chat-launcher-shadow, 0 12px 34px rgba(0,0,0,.22)); cursor: pointer; transition: transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s ease, background-color .25s ease, border-radius .25s ease; } #rvk-chat .rvk-chat-launcher:hover { transform: translateY(-3px) scale(1.035); box-shadow: var(--rvk-chat-launcher-hover-shadow, 0 16px 38px rgba(0,0,0,.26)); } #rvk-chat .rvk-chat-launcher:focus-visible, #rvk-chat button:focus-visible, #rvk-chat textarea:focus-visible { outline: 2px solid var(--rvk-chat-yellow); outline-offset: 3px; } #rvk-chat .rvk-chat-launcher-icon { display: grid; place-items: center; width: var(--rvk-chat-launcher-icon-size, 27px); height: var(--rvk-chat-launcher-icon-size, 27px); font-size: var(--rvk-chat-launcher-icon-size, 27px); line-height: 1; } #rvk-chat .rvk-chat-launcher-icon img { width: 100%; height: 100%; object-fit: contain; } #rvk-chat .rvk-chat-launcher-close { display: none; font-size: 32px; line-height: 1; } #rvk-chat .rvk-chat-launcher.is-open .rvk-chat-launcher-icon { display: none; } #rvk-chat .rvk-chat-launcher.is-open .rvk-chat-launcher-close { display: block; } #rvk-chat .rvk-chat-unread { position: absolute; inset-block-start: -5px; inset-inline-end: -5px; min-width: 21px; height: 21px; padding: 0 5px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 99px; background: #111; color: #fff; font: 700 10px/1 inherit; } #rvk-chat .rvk-chat-unread[hidden] { display: none; } #rvk-chat .rvk-chat-panel { overscroll-behavior: contain; position: fixed; inset-inline-start: 24px; inset-block-end: calc(var(--rvk-chat-launcher-offset-y, 24px) + var(--rvk-chat-launcher-size, 62px) + 14px); z-index: 99991; display: flex; flex-direction: column; width: min(390px, calc(100vw - 32px)); height: min(640px, calc(100dvh - 130px)); min-height: 360px; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 22px; background: #fff; box-shadow: 0 24px 80px rgba(0,0,0,.28); color: #111; opacity: 0; transform: translateY(18px) scale(.975); transform-origin: bottom left; transition: opacity .26s ease, transform .38s cubic-bezier(.18,.75,.25,1); } #rvk-chat .rvk-chat-panel[hidden] { display: none; } #rvk-chat .rvk-chat-panel.is-open { opacity: 1; transform: translateY(0) scale(1); } #rvk-chat .rvk-chat-head { min-height: 76px; padding: 14px 16px; display: flex; align-items: center; gap: 11px; flex: 0 0 auto; background: var(--rvk-chat-header, #111); color: var(--rvk-chat-header-text, #fff); } #rvk-chat .rvk-chat-head-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 14px; background: var(--rvk-chat-accent, #FFBC35); color: var(--rvk-chat-accent-text, #111); font-size: 23px; } #rvk-chat .rvk-chat-head-icon img { width: 26px; height: 26px; object-fit: contain; } #rvk-chat .rvk-chat-head-copy { min-width: 0; flex: 1; } #rvk-chat .rvk-chat-head-copy strong { display: block; overflow: hidden; color: inherit; font-size: 14px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; } #rvk-chat .rvk-chat-head-copy small { display: flex; align-items: flex-start; gap: 6px; margin-top: 5px; color: var(--rvk-chat-header-muted, rgba(255,255,255,.76)); font-size: 11px; line-height: 1.55; } #rvk-chat .rvk-chat-status-dot { color: var(--rvk-chat-header-text, #fff); width: 7px; height: 7px; margin-top: 4px; flex: 0 0 7px; border-radius: 50%; background: var(--rvk-chat-header-text, #FFFFFF); } #rvk-chat .rvk-chat-status-dot.is-open { background: #22C55E; box-shadow: 0 0 0 3px rgba(34,197,94,.22); } #rvk-chat .rvk-chat-status-line.is-open [data-rvk-status] { color: #22C55E !important; } #rvk-chat .rvk-chat-close { width: 32px; height: 32px; padding: 0; flex: 0 0 32px; border: 0; border-radius: 50%; background: var(--rvk-chat-header-control-bg, rgba(255,255,255,.12)); color: var(--rvk-chat-header-text, #fff); font: 400 25px/1 Arial,sans-serif; cursor: pointer; transition: background .2s ease, transform .2s ease; } #rvk-chat .rvk-chat-close:hover { background: var(--rvk-chat-header-control-hover, rgba(255,255,255,.22)); transform: rotate(90deg); } #rvk-chat .rvk-chat-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 16px; background: #fff; scroll-behavior: smooth; } #rvk-chat .rvk-chat-welcome h3 { margin: 3px 0 8px; color: #111; font-size: 17px; font-weight: 800; line-height: 1.7; } #rvk-chat .rvk-chat-welcome p { margin: 0; color: rgba(17,17,17,.72); font-size: 13px; line-height: 1.95; } #rvk-chat .rvk-chat-welcome-message { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; padding: 12px; border: 1px solid rgba(17,17,17,.09); border-radius: 15px 15px 4px 15px; background: #FAFAFA; box-shadow: 0 5px 18px rgba(17,17,17,.045); } #rvk-chat .rvk-chat-welcome-agent { display: flex; width: auto; flex: 0 0 auto; flex-direction: row; align-items: center; gap: 5px; } #rvk-chat .rvk-chat-welcome-avatar { display: grid; width: 40px; height: 40px; overflow: hidden; place-items: center; border: 1px solid rgba(17,17,17,.1); border-radius: 50%; background: #111; color: #FFBC35; } #rvk-chat .rvk-chat-welcome-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; } #rvk-chat .rvk-chat-welcome-avatar i { font-size: 18px; line-height: 1; } #rvk-chat .rvk-chat-welcome-sticker { display: grid; width: 27px; height: 27px; place-items: center; overflow: hidden; border: 1px solid rgba(255,188,53,.45); border-radius: 50%; background: #FFF3CC; } #rvk-chat .rvk-chat-welcome-sticker svg { display: block; width: 25px; height: 25px; } #rvk-chat .rvk-chat-welcome-copy { display: block; min-width: 0; flex: 1 1 auto; } #rvk-chat .rvk-chat-welcome-copy > small { display: block; margin: 0 0 3px; color: rgba(17,17,17,.5); font-size: 10px; font-weight: 700; } #rvk-chat .rvk-chat-welcome-copy h3 { margin: 0 0 4px; } #rvk-chat .rvk-chat-welcome-copy p { margin: 0; } #rvk-chat .rvk-chat-quick { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; } #rvk-chat .rvk-chat-quick[hidden] { display: none; } #rvk-chat .rvk-chat-quick-button { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px; padding: 10px 13px; border: 1px solid rgba(17,17,17,.13); border-radius: 12px; background: #fff; color: #111111; text-align: right; font: inherit; font-size: 12.5px; line-height: 1.6; cursor: pointer; transition: border-color .22s ease, background .22s ease, transform .22s ease; } #rvk-chat .rvk-chat-quick-button > span { min-width: 0; flex: 1 1 auto; } #rvk-chat .rvk-chat-quick-button > i { display: inline-grid; width: 18px; height: 18px; flex: 0 0 18px; place-items: center; color: #111; font-size: 15px; line-height: 1; transition: transform .22s ease; } #rvk-chat .rvk-chat-quick-button:hover { border-color: var(--rvk-chat-yellow); background: rgba(255,188,53,.10); transform: translateY(-1px); } #rvk-chat .rvk-chat-quick-button:hover > i { transform: translateX(-3px); } #rvk-chat .rvk-chat-thread[hidden], #rvk-chat .rvk-chat-welcome[hidden] { display: none; } #rvk-chat .rvk-chat-messages { display: flex; flex-direction: column; gap: 10px; min-height: 100%; } #rvk-chat .rvk-chat-message { display: flex; width: 100%; } #rvk-chat .rvk-chat-message.is-new { animation: rvk-chat-message-in .42s cubic-bezier(.18,.75,.25,1) both; } #rvk-chat .rvk-chat-message.is-visitor { justify-content: flex-start; } #rvk-chat .rvk-chat-message.is-agent { justify-content: flex-end; } #rvk-chat .rvk-chat-message.is-system { justify-content: center; } #rvk-chat .rvk-chat-bubble { max-width: 84%; padding: 10px 13px 8px; border-radius: 16px; background: #FFFFFF; color: #111; font-size: 13px; line-height: 1.9; overflow-wrap: anywhere; white-space: pre-wrap; } #rvk-chat .rvk-chat-message.is-visitor .rvk-chat-bubble { border-bottom-right-radius: 4px; background: rgba(255,188,53,.12); } #rvk-chat .rvk-chat-message.is-agent .rvk-chat-bubble { border-bottom-left-radius: 4px; background: #111; color: #fff; } #rvk-chat .rvk-chat-message.is-system .rvk-chat-bubble { max-width: 100%; padding: 5px 10px; border: 1px solid rgba(255,188,53,.55); border-radius: 10px; background: rgba(255,188,53,.08); color: #111111; text-align: center; font-size: 11.5px; } #rvk-chat .rvk-chat-message-time { display: block; margin-top: 3px; opacity: .58; font-size: 10px; direction: ltr; text-align: left; } #rvk-chat .rvk-chat-contact { padding: 12px 15px; border-top: 1px solid rgba(17,17,17,.09); background: #FFFFFF; color: #111111; animation: rvk-chat-typing-in .28s ease both; } #rvk-chat .rvk-chat-contact[hidden] { display: none; } #rvk-chat .rvk-chat-contact > strong { display: block; margin-bottom: 9px; color: #111111; font-size: 11px; font-weight: 700; } #rvk-chat .rvk-chat-contact-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; } #rvk-chat .rvk-chat-contact-fields input { width: 100%; min-width: 0; height: 38px; padding: 7px 9px; border: 1px solid rgba(17,17,17,.16); border-radius: 9px; background: #FFFFFF; color: #111111; font: inherit; font-size: 11px; } #rvk-chat .rvk-chat-contact-fields input:focus { border-color: var(--rvk-chat-yellow); outline: 2px solid rgba(255,188,53,.2); } #rvk-chat .rvk-chat-contact-actions { display: flex; align-items: center; gap: 7px; margin-top: 8px; } #rvk-chat .rvk-chat-contact-actions button { min-height: 31px; padding: 5px 11px; border: 1px solid #111111; border-radius: 8px; background: #111111; color: #FFFFFF; font: inherit; font-size: 10px; cursor: pointer; } #rvk-chat .rvk-chat-contact-actions button + button { background: #FFFFFF; color: #111111; } #rvk-chat .rvk-chat-contact-actions button:hover { border-color: var(--rvk-chat-yellow); background: var(--rvk-chat-yellow); color: #111111; } #rvk-chat .rvk-chat-typing { display: flex; align-items: center; justify-content: flex-start; gap: 9px; padding: 4px 17px 10px; background: #fff; color: rgba(17,17,17,.66); font-size: 11px; opacity: 0; transform: translateY(5px); transition: opacity .22s ease, transform .22s ease; } #rvk-chat .rvk-chat-typing.is-visible { opacity: 1; transform: translateY(0); } #rvk-chat .rvk-chat-typing.is-leaving { opacity: 0; transform: translateY(5px); } #rvk-chat .rvk-chat-typing[hidden] { display: none; } #rvk-chat .rvk-chat-dots { display: inline-flex; align-items: center; gap: 3px; height: 14px; } #rvk-chat .rvk-chat-dots i { display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--rvk-chat-yellow); animation: rvk-chat-dot-bounce .95s ease-in-out infinite; } #rvk-chat .rvk-chat-dots i:nth-child(2) { animation-delay: .13s; } #rvk-chat .rvk-chat-dots i:nth-child(3) { animation-delay: .26s; } #rvk-chat .rvk-chat-error { margin: 0; padding: 6px 16px 0; color: #111; font-size: 11px; background: rgba(255,188,53,.10); } #rvk-chat .rvk-chat-error[hidden] { display: none; } #rvk-chat .rvk-chat-composer { display: flex; align-items: flex-end; gap: 8px; padding: 12px 13px 10px; flex: 0 0 auto; border-top: 1px solid rgba(17,17,17,.09); background: #fff; } #rvk-chat .rvk-chat-composer textarea { display: block; min-width: 0; max-height: 100px; min-height: 42px; flex: 1; padding: 10px 12px; resize: none; border: 1px solid rgba(17,17,17,.13); border-radius: 13px; background: #FFFFFF; color: #111; font: inherit; font-size: 13px; line-height: 1.7; } #rvk-chat .rvk-chat-composer textarea:focus { border-color: var(--rvk-chat-yellow); outline: none; background: #fff; } #rvk-chat .rvk-chat-composer textarea::placeholder { color: rgba(17,17,17,.5); } #rvk-chat .rvk-chat-composer button { display: grid; width: 42px; height: 42px; padding: 0; flex: 0 0 42px; place-items: center; border: 0; border-radius: 13px; background: var(--rvk-chat-accent, #FFBC35); color: var(--rvk-chat-accent-text, #111); cursor: pointer; transition: transform .2s ease, opacity .2s ease; } #rvk-chat .rvk-chat-composer button:hover { transform: translateY(-2px); } #rvk-chat .rvk-chat-composer button:disabled { cursor: wait; opacity: .55; } #rvk-chat .rvk-chat-composer button svg { width: 20px; height: 20px; } #rvk-chat .rvk-chat-honey { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; } #rvk-chat .rvk-chat-foot { padding: 0 12px 9px; background: #fff; color: rgba(17,17,17,.5); text-align: center; font-size: 10px; } @keyframes rvk-chat-message-in { from { opacity: 0; transform: translateY(9px) scale(.985); filter: blur(2px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } @keyframes rvk-chat-typing-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } @keyframes rvk-chat-dot-bounce { 0%,60%,100% { transform: translateY(0); opacity: .65; } 30% { transform: translateY(-4px); opacity: 1; } } @media (max-width: 600px) { #rvk-chat .rvk-chat-panel { inset: 0; width: 100%; height: 100dvh; min-height: 0; max-width: none; border: 0; border-radius: 0; transform: translateY(14px); } #rvk-chat .rvk-chat-panel.is-open { transform: translateY(0); } #rvk-chat .rvk-chat-head { padding-top: max(14px, env(safe-area-inset-top)); } #rvk-chat .rvk-chat-composer { padding-bottom: max(10px, env(safe-area-inset-bottom)); } #rvk-chat .rvk-chat-contact-fields { grid-template-columns: 1fr; } #rvk-chat .rvk-chat-launcher { inset-inline-start: var(--rvk-chat-launcher-offset-x, 18px); inset-block-end: max(var(--rvk-chat-launcher-offset-y, 18px), env(safe-area-inset-bottom)); } } @media (prefers-reduced-motion: reduce) { #rvk-chat .rvk-chat-panel, #rvk-chat .rvk-chat-launcher, #rvk-chat .rvk-chat-message, #rvk-chat .rvk-chat-dots i { animation: none !important; transition: none !important; } } /* Ravak Chat 2.12.3 — guided start, tracking, secure image attachments and launcher teaser. */ #rvk-chat [hidden] { display: none !important; } #rvk-chat .rvk-chat-head-icon { background: var(--rvk-chat-head-icon-bg, var(--rvk-chat-accent, #FFBC35)); } #rvk-chat .rvk-chat-head-icon .rvk-chat-brand-logo { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; padding: 3px; object-fit: contain; } #rvk-chat .rvk-chat-panel.has-transparent-head-icon .rvk-chat-head-icon { background: transparent; box-shadow: none; } #rvk-chat .rvk-chat-back { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--rvk-chat-header-control-bg); color: var(--rvk-chat-header-text); cursor: pointer; } #rvk-chat .rvk-chat-back[hidden] { display: none !important; } #rvk-chat .rvk-chat-back:hover { background: var(--rvk-chat-header-control-hover); color: var(--rvk-chat-header-text) !important; } #rvk-chat .rvk-chat-menu-actions { display: grid; gap: 9px; margin-top: 17px; } #rvk-chat .rvk-chat-menu-actions button, #rvk-chat .rvk-chat-primary { display: flex; width: 100%; min-height: 46px; align-items: center; justify-content: flex-start; gap: 10px; padding: 10px 13px; border: 1px solid #111; border-radius: 11px; background: #111; color: #fff; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; transition: background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease; } #rvk-chat .rvk-chat-menu-actions button i { display: grid; width: 22px; place-items: center; font-size: 17px; } #rvk-chat .rvk-chat-menu-actions button:nth-child(2), #rvk-chat .rvk-chat-menu-actions button:nth-child(3) { background: #fff; color: #111; } #rvk-chat .rvk-chat-menu-actions button:hover, #rvk-chat .rvk-chat-primary:hover { border-color: #FFBC35 !important; background: #FFBC35 !important; color: #111 !important; transform: translateY(-1px); } #rvk-chat .rvk-chat-menu-actions button:nth-child(2):hover, #rvk-chat .rvk-chat-menu-actions button:nth-child(3):hover { background: #111 !important; border-color: #111 !important; color: #fff !important; } #rvk-chat .rvk-chat-start, #rvk-chat .rvk-chat-restore { margin-top: 8px; animation: rvk-chat-message-in .32s ease both; } #rvk-chat .rvk-chat-start h3, #rvk-chat .rvk-chat-restore h3 { margin: 4px 0 7px; color: #111; font-size: 16px; } #rvk-chat .rvk-chat-start p, #rvk-chat .rvk-chat-restore p { margin: 0 0 12px; color: rgba(17,17,17,.68); font-size: 11px; line-height: 1.8; } #rvk-chat .rvk-chat-start label, #rvk-chat .rvk-chat-restore label, #rvk-chat .rvk-chat-contact-edit label { display: flex; flex-direction: column; gap: 6px; margin: 11px 0; color: #111; font-size: 11px; font-weight: 700; } #rvk-chat .rvk-chat-start input, #rvk-chat .rvk-chat-start textarea, #rvk-chat .rvk-chat-restore input, #rvk-chat .rvk-chat-contact-edit input { width: 100%; min-width: 0; min-height: 42px; padding: 9px 11px; border: 1px solid rgba(17,17,17,.18); border-radius: 9px; background: #fff; color: #111; font: inherit; font-size: 12px; } #rvk-chat .rvk-chat-start textarea { min-height: 78px; resize: vertical; line-height: 1.8; } #rvk-chat .rvk-chat-start input:focus, #rvk-chat .rvk-chat-start textarea:focus, #rvk-chat .rvk-chat-restore input:focus, #rvk-chat .rvk-chat-contact-edit input:focus { outline: 2px solid rgba(255,188,53,.2); border-color: #FFBC35; } #rvk-chat .rvk-chat-primary { justify-content: center; margin-top: 14px; } #rvk-chat .rvk-chat-restore-code, #rvk-chat [data-rvk-restore-code] { letter-spacing: .04em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } #rvk-chat .rvk-chat-tracking { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 5px 8px; margin-bottom: 12px; padding: 11px 12px; border: 1px solid rgba(255,188,53,.65); border-radius: 12px; background: rgba(255,188,53,.12); } #rvk-chat .rvk-chat-tracking > span { grid-column: 1; color: rgba(17,17,17,.7); font-size: 10px; } #rvk-chat .rvk-chat-tracking strong { grid-column: 1; overflow-wrap: anywhere; color: #111; font: 800 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .035em; } #rvk-chat .rvk-chat-tracking button { grid-column: 2; grid-row: 1 / span 2; display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid rgba(17,17,17,.16); border-radius: 9px; background: #fff; color: #111; cursor: pointer; } #rvk-chat .rvk-chat-tracking button:hover { border-color: #111 !important; background: #111 !important; color: #fff !important; } #rvk-chat .rvk-chat-tracking small { grid-column: 1 / -1; color: rgba(17,17,17,.7); font-size: 10px; line-height: 1.75; } #rvk-chat .rvk-chat-composer-wrap { flex: 0 0 auto; padding-top: 5px; border-top: 1px solid rgba(17,17,17,.08); background: #fff; } #rvk-chat .rvk-chat-composer { gap: 7px; padding: 9px 11px 7px; border-top: 0; } #rvk-chat .rvk-chat-composer textarea { min-height: 42px; max-height: 110px; } #rvk-chat .rvk-chat-composer [data-rvk-send] { width: 42px; height: 42px; flex: 0 0 42px; border: 0; background: var(--rvk-chat-accent, #FFBC35) !important; color: var(--rvk-chat-accent-text, #111) !important; } #rvk-chat .rvk-chat-composer [data-rvk-send]:hover { background: #111 !important; color: #fff !important; transform: translateY(-2px); } #rvk-chat .rvk-chat-composer [data-rvk-send] i { font-size: 17px; } #rvk-chat .rvk-chat-attach { display: grid; width: 38px; height: 42px; flex: 0 0 38px; place-items: center; margin: 0; border: 1px solid rgba(17,17,17,.14); border-radius: 11px; background: #fff; color: #111; cursor: pointer; transition: opacity .2s ease, background .2s ease, color .2s ease; } #rvk-chat .rvk-chat-attach i { font-size: 18px; } #rvk-chat .rvk-chat-attach:hover { border-color: #FFBC35; background: rgba(255,188,53,.12); } #rvk-chat .rvk-chat-attach.is-disabled { opacity: .35; cursor: not-allowed; } #rvk-chat .rvk-chat-file-warning { display: block; padding: 0 14px 5px; color: rgba(17,17,17,.58); font-size: 9px; line-height: 1.6; } #rvk-chat .rvk-chat-edit-contact-link { display: block; margin: 0 13px 8px auto; padding: 2px 0; border: 0; background: transparent; color: rgba(17,17,17,.66); font: inherit; font-size: 10px; cursor: pointer; text-decoration: underline; text-decoration-color: #FFBC35; } #rvk-chat .rvk-chat-edit-contact-link:hover { color: #111 !important; } #rvk-chat .rvk-chat-contact-edit { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 9px; padding: 12px; border-top: 1px solid rgba(17,17,17,.08); background: #fff; } #rvk-chat .rvk-chat-contact-edit label { margin: 0; } #rvk-chat .rvk-chat-contact-edit input { min-height: 36px; } #rvk-chat .rvk-chat-contact-edit button { min-height: 34px; margin-top: 7px; border: 1px solid #111; border-radius: 8px; background: #111; color: #fff; font: inherit; font-size: 10px; cursor: pointer; } #rvk-chat .rvk-chat-contact-edit button:hover { border-color: #FFBC35 !important; background: #FFBC35 !important; color: #111 !important; } #rvk-chat .rvk-chat-file-list { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 11px 0; } #rvk-chat .rvk-chat-staged-file { position: relative; display: flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 6px; border: 1px solid rgba(17,17,17,.13); border-radius: 9px; background: #fff; color: #111; font-size: 10px; } #rvk-chat .rvk-chat-staged-file img { width: 30px; height: 30px; border-radius: 5px; object-fit: cover; } #rvk-chat .rvk-chat-staged-file span { max-width: 125px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #rvk-chat .rvk-chat-staged-file button { display: grid; width: 20px; height: 20px; place-items: center; border: 0; border-radius: 50%; background: #111; color: #fff; font-size: 15px; line-height: 1; cursor: pointer; } #rvk-chat .rvk-chat-staged-file button:hover { background: #FFBC35 !important; color: #111 !important; } #rvk-chat .rvk-chat-progress { display: flex; align-items: center; gap: 8px; margin: 5px 12px; padding: 5px 8px; border: 1px solid rgba(34,197,94,.25); border-radius: 9px; background: rgba(34,197,94,.06); } #rvk-chat .rvk-chat-progress > span { display: block; width: 0; height: 5px; flex: 1; overflow: hidden; border-radius: 99px; background: #22C55E; transition: width .12s linear; } #rvk-chat .rvk-chat-progress small { color: #166534; font-size: 9px; } #rvk-chat .rvk-chat-progress button { width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: #166534; cursor: pointer; } #rvk-chat .rvk-chat-progress button:hover { background: #166534 !important; color: #fff !important; } #rvk-chat .rvk-chat-message-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; } #rvk-chat .rvk-chat-message-file { display: block; max-width: 180px; overflow: hidden; border: 1px solid rgba(17,17,17,.12); border-radius: 9px; } #rvk-chat .rvk-chat-message-file img { display: block; width: auto; max-width: 180px; max-height: 150px; object-fit: contain; } #rvk-chat .rvk-chat-message-meta { display: flex; align-items: center; justify-content: flex-start; flex-wrap: nowrap; gap: 5px; min-height: 12px; margin-top: 2px; white-space: nowrap; } .rvk-chat-message-edited { display: inline-block; margin-inline-start: 5px; color: currentColor; opacity: .5; font-size: 9px; } #rvk-chat .rvk-chat-message-meta time { flex: 0 0 auto; margin-top: 0; white-space: nowrap; } #rvk-chat .rvk-chat-message-ticks { display: inline-block; color: rgba(17,17,17,.48); font: 700 9px/1 Arial,sans-serif; letter-spacing: -2px; transform: scale(.85); transform-origin: right center; } #rvk-chat .rvk-chat-message.is-agent .rvk-chat-message-ticks { color: rgba(255,255,255,.55); } #rvk-chat .rvk-chat-message-ticks.is-delivered { color: rgba(17,17,17,.72); } #rvk-chat .rvk-chat-message-ticks.is-read { color: #22C55E !important; } #rvk-chat .rvk-chat-error { border-radius: 8px; margin: 5px 12px; padding: 8px 10px; } #rvk-chat .rvk-chat-teaser { position: fixed; z-index: 99989; inset-inline-start: calc(var(--rvk-chat-launcher-offset-x, 24px) + var(--rvk-chat-launcher-size, 62px) + 13px); inset-block-end: calc(var(--rvk-chat-launcher-offset-y, 24px) + 7px); display: block; width: var(--rvk-chat-launcher-size, 62px); max-width: min(270px, calc(100vw - 112px)); overflow: hidden; padding: 0; border: 0; border-radius: 13px 13px 4px 13px; background: transparent; color: #fff; opacity: 0; visibility: hidden; transform: translateY(16px) scale(.92); transform-origin: bottom left; transition: width .58s cubic-bezier(.18,.75,.25,1), opacity .35s ease, transform .48s cubic-bezier(.16,.8,.25,1), visibility .35s; cursor: pointer; } #rvk-chat .rvk-chat-teaser-inner { display: flex; width: max-content; max-width: min(270px, calc(100vw - 112px)); min-height: 48px; align-items: center; gap: 8px; overflow: hidden; padding: 9px 12px; border: 1px solid rgba(255,188,53,.58); border-radius: 13px 13px 4px 13px; background: #111; color: #fff; box-shadow: 0 12px 36px rgba(0,0,0,.24); font-size: 11.5px; line-height: 1.75; } #rvk-chat .rvk-chat-teaser-text { display: block; min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; white-space: normal; } #rvk-chat .rvk-chat-teaser.is-visible { width: min(var(--rvk-teaser-target-width, 230px), min(270px, calc(100vw - 112px))); opacity: 1; visibility: visible; transform: translateY(0) scale(1); } #rvk-chat .rvk-chat-teaser-agent { display: flex; width: 55px; flex: 0 0 55px; flex-direction: row; align-items: center; gap: 3px; } #rvk-chat .rvk-chat-teaser-avatar { display: grid; width: 30px; height: 30px; overflow: hidden; place-items: center; border: 1px solid rgba(255,188,53,.65); border-radius: 50%; background: #222; color: #FFBC35; font-size: 15px; } #rvk-chat .rvk-chat-teaser-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; } #rvk-chat .rvk-chat-teaser-sticker { display: grid; width: 21px; height: 21px; flex: 0 0 21px; place-items: center; overflow: hidden; border: 1px solid rgba(255,188,53,.55); border-radius: 50%; background: #FFF3CC; color: #111; } #rvk-chat .rvk-chat-teaser-sticker svg { display: block; width: 20px; height: 20px; } #rvk-chat .rvk-chat-teaser[hidden] { display: none !important; } #rvk-chat .rvk-chat-teaser:hover .rvk-chat-teaser-inner { border-color: #FFBC35; box-shadow: 0 14px 40px rgba(0,0,0,.3); } #rvk-chat button:disabled { opacity: .55; cursor: wait; } #rvk-chat .rvk-chat-panel button:hover { text-decoration: none; } #rvk-chat .rvk-chat-panel .rvk-chat-close:hover { color: var(--rvk-chat-header-text) !important; } @media (max-width: 600px) { #rvk-chat .rvk-chat-teaser { inset-inline-start: var(--rvk-chat-launcher-offset-x, 24px); inset-block-end: calc(var(--rvk-chat-launcher-offset-y, 18px) + var(--rvk-chat-launcher-size, 62px) + 12px); max-width: calc(100vw - var(--rvk-chat-launcher-offset-x, 24px) - 14px); transform-origin: bottom right; } #rvk-chat .rvk-chat-teaser-inner { max-width: calc(100vw - var(--rvk-chat-launcher-offset-x, 24px) - 14px); } #rvk-chat .rvk-chat-contact-edit { grid-template-columns: 1fr; } #rvk-chat .rvk-chat-message-file img { max-width: min(180px, 50vw); } } @media (prefers-reduced-motion: reduce) { #rvk-chat .rvk-chat-launcher.has-attention, #rvk-chat .rvk-chat-launcher.has-attention::before { animation: none !important; } #rvk-chat .rvk-chat-error { transition-duration: .01ms !important; } } #rvk-chat .rvk-chat-quick-button:hover { color: #111111 !important; border-color: #FFBC35 !important; background: rgba(255,188,53,.12) !important; } #rvk-chat .rvk-chat-teaser { cursor: pointer; } #rvk-chat .rvk-chat-tracking strong { text-align: center; } /* Cinematic navigation between chat menu, start, restore and conversation views. */ #rvk-chat .rvk-chat-content.rvk-view-slide-left > *:not([hidden]) { animation: rvk-chat-view-enter-left .42s cubic-bezier(.22,.75,.25,1) both; } #rvk-chat .rvk-chat-content.rvk-view-slide-right > *:not([hidden]) { animation: rvk-chat-view-enter-right .42s cubic-bezier(.22,.75,.25,1) both; } @keyframes rvk-chat-view-enter-left { from { opacity: 0; transform: translate3d(28px,0,0); } to { opacity: 1; transform: translate3d(0,0,0); } } @keyframes rvk-chat-view-enter-right { from { opacity: 0; transform: translate3d(-28px,0,0); } to { opacity: 1; transform: translate3d(0,0,0); } } #rvk-chat .rvk-chat-restore .rvk-chat-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 40px; margin-top: 9px; padding: 9px 14px; border: 1px solid rgba(17,17,17,.16); border-radius: 10px; background: #fff; color: #111; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; transition: background-color .22s ease, color .22s ease, border-color .22s ease, transform .22s ease; } #rvk-chat .rvk-chat-restore .rvk-chat-secondary:hover, #rvk-chat .rvk-chat-restore .rvk-chat-secondary:focus-visible { background: #FFBC35; border-color: #FFBC35; color: #111; } #rvk-chat .rvk-chat-restore .rvk-chat-secondary:active { transform: scale(.985); } @media (prefers-reduced-motion: reduce) { #rvk-chat .rvk-chat-launcher.has-attention::before, #rvk-chat .rvk-chat-launcher.has-attention { animation: none !important; } #rvk-chat .rvk-chat-content.rvk-view-slide-left > *:not([hidden]), #rvk-chat .rvk-chat-content.rvk-view-slide-right > *:not([hidden]) { animation: none !important; } } /* 2.12.6 — refined chat typography, notices, anonymous start and interaction states. */ #rvk-chat .rvk-chat-head { min-height: 74px; } #rvk-chat .rvk-chat-head-copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 2px; } #rvk-chat .rvk-chat-head-copy strong { font-size: 15px; line-height: 1.55; } #rvk-chat .rvk-chat-head-copy .rvk-chat-brand-caption { margin: 0; color: var(--rvk-chat-header-muted, rgba(255,255,255,.76)); font-size: 10.5px; line-height: 1.5; } #rvk-chat .rvk-chat-head-copy .rvk-chat-status-line { display: flex; align-items: center; gap: 6px; margin: 1px 0 0; font-size: 10.5px; line-height: 1.5; } #rvk-chat .rvk-chat-head-copy .rvk-chat-status-dot { margin-top: 0; } #rvk-chat .rvk-chat-back { display: inline-flex; width: auto; min-width: 76px; height: 34px; flex: 0 0 auto; align-items: center; justify-content: center; gap: 6px; padding: 0 9px; border-radius: 10px; font: inherit; font-size: 11.5px; font-weight: 700; line-height: 1; white-space: nowrap; } #rvk-chat .rvk-chat-back i { display: inline-grid; width: 15px; height: 15px; flex: 0 0 15px; place-items: center; font-size: 14px; line-height: 1; } #rvk-chat .rvk-chat-back span { display: inline-block; line-height: 1.2; } #rvk-chat .rvk-chat-content { overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; } #rvk-chat .rvk-chat-welcome p, #rvk-chat .rvk-chat-start p, #rvk-chat .rvk-chat-restore p { font-size: 13px; line-height: 1.9; } #rvk-chat .rvk-chat-bubble { font-size: 14px; line-height: 1.95; } #rvk-chat .rvk-chat-message.is-system .rvk-chat-bubble { font-size: 12px; } #rvk-chat .rvk-chat-quick-button, #rvk-chat .rvk-chat-menu-actions button, #rvk-chat .rvk-chat-primary { font-size: 13px; } #rvk-chat .rvk-chat-start label, #rvk-chat .rvk-chat-restore label, #rvk-chat .rvk-chat-contact-edit label { font-size: 12px; } #rvk-chat .rvk-chat-start input, #rvk-chat .rvk-chat-start textarea, #rvk-chat .rvk-chat-restore input, #rvk-chat .rvk-chat-contact-edit input { font-size: 13px; } #rvk-chat .rvk-chat-optional { display: inline; margin-inline-start: 4px; color: rgba(17,17,17,.52); font-size: 10px; font-weight: 500; } #rvk-chat .rvk-chat-anonymous-open { display: flex; width: 100%; min-height: 42px; align-items: center; justify-content: center; gap: 8px; margin-top: 9px; padding: 9px 12px; border: 1px solid rgba(17,17,17,.18); border-radius: 10px; background: #fff; color: #111; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: border-color .2s ease, background-color .2s ease, transform .2s ease; } #rvk-chat .rvk-chat-anonymous-open i { display: inline-grid; width: 18px; height: 18px; place-items: center; font-size: 16px; line-height: 1; } #rvk-chat .rvk-chat-anonymous-open:hover { border-color: #111; background: #F7F7F7; transform: translateY(-1px); } #rvk-chat .rvk-chat-anonymous-warning { margin-top: 12px; padding: 12px; border: 1px solid #FECACA; border-radius: 12px; background: #FEF2F2; color: #7F1D1D; opacity: 0; transform: translateY(7px) scale(.99); transition: opacity .22s ease, transform .24s ease; } #rvk-chat .rvk-chat-anonymous-warning.is-visible { opacity: 1; transform: translateY(0) scale(1); } #rvk-chat .rvk-chat-anonymous-warning[hidden] { display: none !important; } #rvk-chat .rvk-chat-anonymous-warning-copy { display: flex; align-items: flex-start; gap: 9px; } #rvk-chat .rvk-chat-anonymous-warning-copy > i { display: inline-grid; width: 20px; height: 20px; flex: 0 0 20px; place-items: center; margin-top: 2px; color: #B42318; font-size: 17px; } #rvk-chat .rvk-chat-anonymous-warning-copy p { margin: 0; color: #7F1D1D; font-size: 12.5px; line-height: 1.9; } #rvk-chat .rvk-chat-anonymous-warning-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; } #rvk-chat .rvk-chat-anonymous-warning-actions button { min-height: 34px; padding: 6px 10px; border: 1px solid #B42318; border-radius: 8px; background: #B42318; color: #fff; font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; transition: background-color .2s ease, border-color .2s ease, transform .2s ease; } #rvk-chat .rvk-chat-anonymous-warning-actions button + button { border-color: rgba(127,29,29,.25); background: #fff; color: #7F1D1D; } #rvk-chat .rvk-chat-anonymous-warning-actions button:hover { transform: translateY(-1px); } #rvk-chat .rvk-chat-anonymous-warning-actions button:first-child:hover { border-color: #8F1D16; background: #8F1D16; } #rvk-chat .rvk-chat-anonymous-warning-actions button + button:hover { border-color: #B42318; background: #FEE2E2; color: #7F1D1D; } /* Floating semantic notifications never resize the conversation/composer layout. */ #rvk-chat .rvk-chat-error { position: absolute; z-index: 5; inset-inline: 12px; top: 98px; display: flex; align-items: flex-start; gap: 9px; max-height: min(34%, 150px); overflow: auto; margin: 0; padding: 11px 13px; border: 1px solid transparent; border-radius: 11px; box-shadow: 0 8px 24px rgba(17,17,17,.10); font-size: 13px; line-height: 1.8; opacity: 0; visibility: hidden; transform: translateY(-9px); pointer-events: auto; transition: opacity .32s ease, transform .34s cubic-bezier(.2,.75,.25,1), visibility .32s ease; } #rvk-chat .rvk-chat-error.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } #rvk-chat .rvk-chat-error.is-leaving { opacity: 0; visibility: hidden; transform: translateY(-15px) scale(.985); pointer-events: none; } #rvk-chat .rvk-chat-error[hidden] { display: none !important; } #rvk-chat .rvk-chat-error > i { display: inline-grid; width: 18px; height: 22px; flex: 0 0 18px; place-items: center; font-size: 15px; line-height: 1; } #rvk-chat .rvk-chat-error[data-type="error"] { border-color: #FECACA; background: #FEF2F2; color: #991B1B; } #rvk-chat .rvk-chat-error[data-type="warning"] { border-color: #FDE68A; background: #FFFBEB; color: #92400E; } #rvk-chat .rvk-chat-error[data-type="success"] { border-color: #BBF7D0; background: #F0FDF4; color: #166534; } #rvk-chat .rvk-chat-error[data-type="info"] { border-color: #D8E4EC; background: #F1F6FA; color: #334155; } #rvk-chat .rvk-chat-tracking { grid-template-columns: minmax(0,1fr) 38px; gap: 7px 10px; padding: 13px; border-color: #D5E0E7; background: #F2F6F8; color: #243746; } #rvk-chat .rvk-chat-tracking > span { color: #526575; font-size: 11.5px; font-weight: 650; } #rvk-chat .rvk-chat-tracking strong { color: #172B3A; font-size: 13.5px; line-height: 1.7; letter-spacing: .04em; text-align: start; overflow-wrap: anywhere; } #rvk-chat .rvk-chat-tracking button { width: 38px; height: 38px; grid-column: 2; grid-row: 1 / span 2; place-items: center; border-color: #C7D4DD; border-radius: 10px; background: #fff; color: #263B4A; } #rvk-chat .rvk-chat-tracking button i { display: inline-grid; width: 18px; height: 18px; place-items: center; font-size: 16px; line-height: 1; } #rvk-chat .rvk-chat-tracking button:hover { border-color: #263B4A !important; background: #263B4A !important; color: #fff !important; } #rvk-chat .rvk-chat-tracking button:active { transform: scale(.96); } #rvk-chat .rvk-chat-tracking small { color: #526575; font-size: 11.5px; line-height: 1.8; } #rvk-chat .rvk-chat-composer [data-rvk-send] { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; padding: 0; border-radius: 12px; line-height: 1; transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; } #rvk-chat .rvk-chat-composer [data-rvk-send] i { display: inline-grid; width: 19px; height: 19px; place-items: center; font-size: 18px; line-height: 1; transform: none; } #rvk-chat .rvk-chat-composer [data-rvk-send]:active { transform: scale(.96); } #rvk-chat .rvk-chat-composer [data-rvk-send]:focus-visible { outline: 2px solid #111; outline-offset: 3px; } #rvk-chat .rvk-chat-staged-file .rvk-chat-staged-file-remove { display: inline-grid; width: 22px; min-width: 22px; max-width: 22px; height: 22px; flex: 0 0 22px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent !important; color: #C62828 !important; box-shadow: none; font-size: 16px; line-height: 1; cursor: pointer; } #rvk-chat .rvk-chat-staged-file .rvk-chat-staged-file-remove i { display: inline-grid; width: 16px; height: 16px; place-items: center; font-size: 17px; line-height: 1; } #rvk-chat .rvk-chat-staged-file .rvk-chat-staged-file-remove:hover { background: rgba(198,40,40,.08) !important; color: #A61B1B !important; } #rvk-chat .rvk-chat-staged-file .rvk-chat-staged-file-remove:focus-visible { outline: 2px solid #C62828; outline-offset: 2px; } #rvk-chat .rvk-chat-security-row { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 0 12px 7px; } #rvk-chat .rvk-chat-security-row .rvk-chat-file-warning { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; font-size: 10.5px; line-height: 1.7; } #rvk-chat .rvk-chat-security-row .rvk-chat-edit-contact-link { flex: 0 0 auto; margin: 0; padding: 3px 0; font-size: 11px; white-space: nowrap; } #rvk-chat .rvk-chat-contact-edit { animation: rvk-chat-message-in .24s ease both; } #rvk-chat .rvk-chat-teaser { transform-origin: right center; } #rvk-chat .rvk-chat-teaser.is-visible { transform: translate3d(0,0,0) scale(1); } #rvk-chat .rvk-chat-teaser:not(.is-visible) { transform: translate3d(13px,0,0) scale(.82); } #rvk-chat .rvk-chat-teaser-sticker { display: inline-flex; width: auto; height: auto; flex: 0 0 auto; padding: 0; border: 0; border-radius: 0; background: transparent !important; box-shadow: none !important; color: inherit; font-size: 19px; } #rvk-chat .rvk-chat-message-sticker, #rvk-chat .rvk-chat-sticker { display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 0; background: transparent !important; box-shadow: none !important; } #rvk-chat .rvk-chat-message-sticker img, #rvk-chat .rvk-chat-sticker img { display: block; max-width: 100%; max-height: 180px; object-fit: contain; background: transparent !important; border: 0; box-shadow: none; } #rvk-chat .rvk-chat-teaser[hidden] { display: none !important; } #rvk-chat button:disabled { cursor: not-allowed; } @media (max-width: 600px) { #rvk-chat .rvk-chat-head { min-height: 92px; gap: 8px; } #rvk-chat .rvk-chat-head-copy strong { font-size: 14px; } #rvk-chat .rvk-chat-head-copy .rvk-chat-brand-caption, #rvk-chat .rvk-chat-head-copy .rvk-chat-status-line { font-size: 9.5px; } #rvk-chat .rvk-chat-back { min-width: 70px; height: 32px; gap: 5px; padding-inline: 7px; font-size: 10.5px; } #rvk-chat .rvk-chat-security-row { align-items: flex-start; flex-wrap: wrap; gap: 3px 10px; } #rvk-chat .rvk-chat-security-row .rvk-chat-edit-contact-link { margin-inline-start: auto; } #rvk-chat .rvk-chat-tracking { grid-template-columns: minmax(0,1fr) 36px; } #rvk-chat .rvk-chat-tracking strong { font-size: 12px; } #rvk-chat .rvk-chat-error { top: 103px; max-height: 30%; } #rvk-chat .rvk-chat-teaser { inset-inline-start: 14px; inset-block-end: calc(var(--rvk-chat-launcher-offset-y, 18px) + var(--rvk-chat-launcher-size, 62px) + 12px); max-width: calc(100vw - 28px); } #rvk-chat .rvk-chat-teaser.is-visible { width: min(var(--rvk-teaser-target-width, 230px), calc(100vw - 28px)); } } @media (prefers-reduced-motion: reduce) { #rvk-chat .rvk-chat-anonymous-warning, #rvk-chat .rvk-chat-error, #rvk-chat .rvk-chat-teaser, #rvk-chat .rvk-chat-teaser::before, #rvk-chat .rvk-chat-contact-edit { animation: none !important; transition: none !important; } #rvk-chat .rvk-chat-teaser:not(.is-visible) { transform: none; } } /* 2.12.7 — status starts neutral and is refreshed from the WordPress-timezone endpoint. */ #rvk-chat .rvk-chat-status-dot.is-checking { background: rgba(255,255,255,.52); box-shadow: 0 0 0 3px rgba(255,255,255,.08); } #rvk-chat .rvk-chat-status-dot.is-closed { background: #E28A78; box-shadow: 0 0 0 3px rgba(226,138,120,.14); } #rvk-chat .rvk-chat-status-dot.is-unavailable { background: rgba(255,255,255,.42); box-shadow: none; } /* 2.12.10 — refined popup navigation, identity, soft launcher glow and contained scrolling. */ #rvk-chat .rvk-chat-panel { max-height: calc(100dvh - 28px); } #rvk-chat .rvk-chat-content { flex: 1 1 0%; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; } #rvk-chat .rvk-chat-head-copy .rvk-chat-status-line.is-open { color: #22C55E !important; } #rvk-chat .rvk-chat-status-dot.is-open { background: #22C55E !important; box-shadow: 0 0 0 4px rgba(34,197,94,.22) !important; } #rvk-chat .rvk-chat-foot { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 26px; padding: 4px 12px 8px; color: rgba(17,17,17,.52); font-size: 10px; } #rvk-chat .rvk-chat-foot i { color: #B27B00; font-size: 11px; } #rvk-chat .rvk-chat-back[disabled], #rvk-chat .rvk-chat-back.is-disabled { opacity: .34 !important; cursor: not-allowed !important; pointer-events: none; } #rvk-chat .rvk-chat-back:disabled:hover { background: var(--rvk-chat-header-control-bg, rgba(255,255,255,.12)) !important; color: var(--rvk-chat-header-text, #fff) !important; transform: none !important; } #rvk-chat .rvk-chat-start-fields[hidden] { display: none !important; } #rvk-chat .rvk-chat-anonymous-warning { margin-top: 8px; } #rvk-chat .rvk-chat-anonymous-warning-actions { display: grid; grid-template-columns: 1fr 1fr; } #rvk-chat .rvk-chat-anonymous-warning-actions button:first-child { border-color: #111; background: #111; color: #fff; } #rvk-chat .rvk-chat-anonymous-warning-actions button:first-child:hover { border-color: #333; background: #333; } #rvk-chat .rvk-chat-anonymous-warning-actions button + button { border-color: rgba(17,17,17,.2); background: #fff; color: #111; } #rvk-chat .rvk-chat-anonymous-warning-actions button + button:hover { border-color: #111; background: #F7F7F7; color: #111; } #rvk-chat .rvk-chat-message { align-items: flex-end; gap: 7px; } #rvk-chat .rvk-chat-message-avatar { display: grid; width: 30px; height: 30px; flex: 0 0 30px; overflow: hidden; place-items: center; border: 1px solid rgba(17,17,17,.10); border-radius: 50%; background: #F4F4F4; color: #111; } #rvk-chat .rvk-chat-message-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; } #rvk-chat .rvk-chat-message-avatar i { font-size: 15px; line-height: 1; } #rvk-chat .rvk-chat-message.is-agent .rvk-chat-message-avatar { background: #111; color: #FFBC35; border-color: #111; } #rvk-chat .rvk-chat-message.is-system .rvk-chat-message-avatar { background: #FFF5D9; color: #8A6200; border-color: rgba(255,188,53,.45); } #rvk-chat .rvk-chat-message.is-system .rvk-chat-bubble { max-width: calc(100% - 38px); } #rvk-chat .rvk-chat-bubble { min-width: 0; } #rvk-chat .rvk-chat-teaser { overflow: hidden !important; } #rvk-chat .rvk-chat-teaser-inner { width: max-content; max-width: min(270px, calc(100vw - 112px)); overflow: hidden; } #rvk-chat .rvk-chat-teaser::before, #rvk-chat .rvk-chat-teaser.is-visible::before { content: none !important; display: none !important; animation: none !important; } #rvk-chat .rvk-chat-launcher.has-attention { animation: none !important; } #rvk-chat .rvk-chat-launcher.has-attention::before { content: ''; position: absolute; z-index: 0; inset: -8px; border: 0; border-radius: inherit; background: transparent; filter: none; opacity: .08; pointer-events: none; animation: rvk-chat-launcher-soft-shadow 4.8s ease-in-out infinite; } #rvk-chat .rvk-chat-launcher-icon, #rvk-chat .rvk-chat-launcher-close, #rvk-chat .rvk-chat-unread { position: relative; z-index: 1; } @keyframes rvk-chat-launcher-soft-shadow { 0%, 100% { opacity: .08; box-shadow: 0 0 12px 3px rgba(255,188,53,.05); } 50% { opacity: .34; box-shadow: 0 0 25px 8px rgba(255,188,53,.2); } } #rvk-chat .rvk-chat-secondary, #rvk-chat .rvk-chat-secondary:hover, #rvk-chat .rvk-chat-secondary:focus, #rvk-chat .rvk-chat-secondary:focus-visible { color: #111 !important; } #rvk-chat .rvk-chat-secondary:hover, #rvk-chat .rvk-chat-secondary:focus-visible { border-color: #FFBC35 !important; background: #FFBC35 !important; color: #111 !important; } #rvk-chat .rvk-chat-teaser.is-visible { width: min(var(--rvk-teaser-target-width, 230px), min(270px, calc(100vw - 112px))); } @media (max-width: 600px) { #rvk-chat .rvk-chat-teaser { max-width: calc(100vw - 28px); } #rvk-chat .rvk-chat-teaser-inner { max-width: calc(100vw - 28px); } #rvk-chat .rvk-chat-teaser.is-visible { width: min(var(--rvk-teaser-target-width, 230px), calc(100vw - 28px)); } #rvk-chat .rvk-chat-anonymous-warning-actions { grid-template-columns: 1fr; } #rvk-chat .rvk-chat-panel { height: min(640px, calc(100dvh - 112px)); min-height: min(360px, calc(100dvh - 112px)); } #rvk-chat .rvk-chat-head { min-height: 74px; } } @media (prefers-reduced-motion: reduce) { #rvk-chat .rvk-chat-launcher.has-attention::before { animation: none !important; opacity: .16; } } /* 2.12.12 — clearer availability pill and truly centered tracking copy icon. */ #rvk-chat .rvk-chat-head-copy .rvk-chat-status-line { display: inline-flex !important; width: fit-content; max-width: 100%; align-items: center !important; justify-content: center !important; gap: 7px !important; padding: 5px 10px !important; border-radius: 10px !important; background: #22c55e17 !important; color: #16a34a !important; line-height: 1.45 !important; } #rvk-chat .rvk-chat-head-copy .rvk-chat-status-line.is-open { background: #22c55e17 !important; color: #15803d !important; } #rvk-chat .rvk-chat-head-copy .rvk-chat-status-line.is-closed { background: rgba(245,158,11,.14) !important; color: #b45309 !important; } #rvk-chat .rvk-chat-status-dot.is-open { background: #22c55e !important; box-shadow: 0 0 0 3px rgba(34,197,94,.17) !important; } #rvk-chat .rvk-chat-status-dot.is-closed { background: #f59e0b !important; box-shadow: 0 0 0 3px rgba(245,158,11,.18) !important; } #rvk-chat .rvk-chat-tracking [data-rvk-copy-code] { display: flex !important; align-items: center !important; justify-content: center !important; align-self: center !important; justify-self: center !important; padding: 0 !important; text-align: center !important; line-height: 1 !important; } #rvk-chat .rvk-chat-tracking [data-rvk-copy-code] > i { display: block !important; width: 18px !important; height: 18px !important; margin: 0 !important; padding: 0 !important; line-height: 18px !important; text-align: center !important; transform: none !important; } /* 2.12.13 — stable anonymous-action colors and loading feedback. */ #rvk-chat .rvk-chat-anonymous-open, #rvk-chat .rvk-chat-anonymous-open:hover, #rvk-chat .rvk-chat-anonymous-open:focus, #rvk-chat .rvk-chat-anonymous-open:focus-visible, #rvk-chat .rvk-chat-anonymous-open:active { border-color: rgba(17,17,17,.18) !important; background: #F7F7F7 !important; color: #111111 !important; box-shadow: none !important; } #rvk-chat .rvk-chat-anonymous-open > span, #rvk-chat .rvk-chat-anonymous-open > i, #rvk-chat .rvk-chat-anonymous-open:hover > span, #rvk-chat .rvk-chat-anonymous-open:hover > i, #rvk-chat .rvk-chat-anonymous-open:focus > span, #rvk-chat .rvk-chat-anonymous-open:focus > i, #rvk-chat .rvk-chat-anonymous-open:active > span, #rvk-chat .rvk-chat-anonymous-open:active > i { color: #111111 !important; } #rvk-chat .rvk-chat-menu-actions button[data-rvk-new-chat], #rvk-chat .rvk-chat-menu-actions button[data-rvk-new-chat]:hover, #rvk-chat .rvk-chat-menu-actions button[data-rvk-new-chat]:focus, #rvk-chat .rvk-chat-menu-actions button[data-rvk-new-chat]:focus-visible, #rvk-chat .rvk-chat-menu-actions button[data-rvk-new-chat]:active { border-color: #E8BD61 !important; background: #FFF5D9 !important; color: #111111 !important; box-shadow: none !important; transform: none !important; } #rvk-chat .rvk-chat-menu-actions button[data-rvk-new-chat] > *, #rvk-chat .rvk-chat-menu-actions button[data-rvk-new-chat]:hover > *, #rvk-chat .rvk-chat-menu-actions button[data-rvk-new-chat]:focus > *, #rvk-chat .rvk-chat-menu-actions button[data-rvk-new-chat]:active > * { color: #111111 !important; } #rvk-chat .rvk-chat-anonymous-warning-actions button[data-rvk-anonymous-cancel], #rvk-chat .rvk-chat-anonymous-warning-actions button[data-rvk-anonymous-cancel]:hover, #rvk-chat .rvk-chat-anonymous-warning-actions button[data-rvk-anonymous-cancel]:focus, #rvk-chat .rvk-chat-anonymous-warning-actions button[data-rvk-anonymous-cancel]:focus-visible, #rvk-chat .rvk-chat-anonymous-warning-actions button[data-rvk-anonymous-cancel]:active, #rvk-chat .rvk-chat-anonymous-warning-actions button[data-rvk-anonymous-cancel]:disabled { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; border-color: rgba(127,29,29,.25) !important; background: #FFFFFF !important; color: #7F1D1D !important; box-shadow: none !important; transform: none !important; opacity: 1 !important; } #rvk-chat .rvk-chat-anonymous-warning-actions button[data-rvk-anonymous-cancel] > span:first-child, #rvk-chat .rvk-chat-anonymous-warning-actions button[data-rvk-anonymous-cancel]:hover > span:first-child, #rvk-chat .rvk-chat-anonymous-warning-actions button[data-rvk-anonymous-cancel]:focus > span:first-child, #rvk-chat .rvk-chat-anonymous-warning-actions button[data-rvk-anonymous-cancel]:active > span:first-child { color: #7F1D1D !important; } #rvk-chat .rvk-chat-anonymous-warning-actions button[data-rvk-anonymous-cancel] .rvk-chat-button-spinner[hidden] { display: none !important; } #rvk-chat .rvk-chat-button-spinner { display: inline-block; width: 13px; height: 13px; flex: 0 0 13px; border: 2px solid rgba(127,29,29,.20); border-top-color: #7F1D1D; border-radius: 50%; animation: rvk-chat-button-spin .68s linear infinite; } @keyframes rvk-chat-button-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { #rvk-chat .rvk-chat-button-spinner { animation-duration: 1.6s; } } /* 2.12.14 — keep the anonymous-confirm action readable in every interaction state. */ #rvk-chat .rvk-chat-anonymous-warning-actions button[data-rvk-anonymous-confirm], #rvk-chat .rvk-chat-anonymous-warning-actions button[data-rvk-anonymous-confirm]:visited { border-color: #111111 !important; background: #111111 !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; box-shadow: none !important; transition: background-color .18s ease, border-color .18s ease, color .18s ease !important; } #rvk-chat .rvk-chat-anonymous-warning-actions button[data-rvk-anonymous-confirm]:hover, #rvk-chat .rvk-chat-anonymous-warning-actions button[data-rvk-anonymous-confirm]:focus, #rvk-chat .rvk-chat-anonymous-warning-actions button[data-rvk-anonymous-confirm]:focus-visible { border-color: #333333 !important; background: #333333 !important; color: #FFBC35 !important; -webkit-text-fill-color: #FFBC35 !important; box-shadow: none !important; } #rvk-chat .rvk-chat-anonymous-warning-actions button[data-rvk-anonymous-confirm]:active { border-color: #262626 !important; background: #262626 !important; color: #FFBC35 !important; -webkit-text-fill-color: #FFBC35 !important; transform: none !important; } #rvk-chat .rvk-chat-anonymous-warning-actions button[data-rvk-anonymous-confirm] *, #rvk-chat .rvk-chat-anonymous-warning-actions button[data-rvk-anonymous-confirm]:hover *, #rvk-chat .rvk-chat-anonymous-warning-actions button[data-rvk-anonymous-confirm]:focus *, #rvk-chat .rvk-chat-anonymous-warning-actions button[data-rvk-anonymous-confirm]:focus-visible *, #rvk-chat .rvk-chat-anonymous-warning-actions button[data-rvk-anonymous-confirm]:active * { color: inherit !important; -webkit-text-fill-color: currentColor !important; } #rvk-chat .rvk-chat-anonymous-warning-actions button[data-rvk-anonymous-confirm]:focus-visible { outline: 2px solid #FFBC35 !important; outline-offset: 2px !important; } /* 2.12.15 — replace the previous soft glow with the requested 2-second pulse ring. */ #rvk-chat .rvk-chat-launcher.has-attention:not(.is-open)::before { content: '' !important; position: absolute !important; z-index: 0 !important; inset: 0 !important; display: block !important; border: 0 !important; border-radius: inherit !important; background: transparent !important; filter: none !important; opacity: 1 !important; pointer-events: none !important; transform-origin: center !important; will-change: transform, box-shadow; animation: rvk-chat-launcher-pulse 2s infinite !important; } @keyframes rvk-chat-launcher-pulse { 0% { transform: scale(.95); box-shadow: 0 0 0 0 rgba(255,188,53,.7); } 70% { transform: scale(1); box-shadow: 0 0 0 15px rgba(255,188,53,0); } 100% { transform: scale(.95); box-shadow: 0 0 0 0 rgba(255,188,53,0); } } #rvk-chat .rvk-chat-launcher.has-attention.is-open::before { animation: none !important; box-shadow: none !important; } @media (prefers-reduced-motion: reduce) { #rvk-chat .rvk-chat-launcher.has-attention::before { animation: none !important; transform: none !important; box-shadow: 0 0 0 4px rgba(255,188,53,.22) !important; } } /* 2.12.16 — conversion-focused online teaser and true mobile full-screen chat. */ @media (max-width: 767px), (pointer: coarse) and (max-width: 1024px) { #rvk-chat .rvk-chat-panel { position: fixed !important; z-index: 2147483000 !important; inset-inline: 0 !important; inset-block-start: var(--rvk-chat-viewport-offset-top, 0px) !important; inset-block-end: auto !important; width: 100vw !important; max-width: none !important; height: var(--rvk-chat-viewport-height, 100vh) !important; height: var(--rvk-chat-viewport-height, 100dvh) !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: hidden !important; overscroll-behavior: none !important; transform: translateY(12px) !important; } #rvk-chat .rvk-chat-panel.is-open { transform: translateY(0) !important; } #rvk-chat .rvk-chat-head { flex: 0 0 auto !important; padding-top: max(14px, env(safe-area-inset-top)) !important; } #rvk-chat .rvk-chat-content { flex: 1 1 0% !important; min-height: 0 !important; max-height: none !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior-y: contain !important; -webkit-overflow-scrolling: touch !important; touch-action: pan-y !important; } #rvk-chat .rvk-chat-contact-edit, #rvk-chat .rvk-chat-typing, #rvk-chat .rvk-chat-error, #rvk-chat .rvk-chat-composer-wrap, #rvk-chat .rvk-chat-foot { flex: 0 0 auto; } #rvk-chat .rvk-chat-composer { padding-bottom: max(10px, env(safe-area-inset-bottom)) !important; } #rvk-chat .rvk-chat-foot { padding-bottom: max(8px, env(safe-area-inset-bottom)) !important; } } @media (max-width: 380px) { #rvk-chat .rvk-chat-head { gap: 6px !important; padding-inline: 10px !important; } #rvk-chat .rvk-chat-head-icon { width: 36px !important; height: 36px !important; flex-basis: 36px !important; } #rvk-chat .rvk-chat-head-copy strong { font-size: 12px !important; } #rvk-chat .rvk-chat-head-copy .rvk-chat-status-line { font-size: 9px !important; padding: 4px 7px !important; } #rvk-chat .rvk-chat-back { min-width: 58px !important; } } @media (prefers-reduced-motion: reduce) { #rvk-chat .rvk-chat-panel, #rvk-chat .rvk-chat-panel.is-open { transform: none !important; } } /* 2.12.18 — full-width invitation copy without clipping. */ #rvk-chat .rvk-chat-teaser { max-width: min(360px, calc(100vw - 112px)) !important; box-sizing: border-box; } #rvk-chat .rvk-chat-teaser-inner { width: max-content; max-width: min(360px, calc(100vw - 112px)) !important; min-width: 0; box-sizing: border-box; } #rvk-chat .rvk-chat-teaser-text { display: block; flex: 1 1 auto; min-width: 0; max-width: 100%; overflow: visible; white-space: normal; overflow-wrap: anywhere; word-break: normal; text-overflow: clip; } #rvk-chat .rvk-chat-teaser.is-visible { width: min(var(--rvk-teaser-target-width, 300px), min(360px, calc(100vw - 112px))) !important; } @media (max-width: 600px) { #rvk-chat .rvk-chat-teaser, #rvk-chat .rvk-chat-teaser-inner { max-width: calc(100vw - 28px) !important; } #rvk-chat .rvk-chat-teaser.is-visible { width: min(var(--rvk-teaser-target-width, 280px), calc(100vw - 28px)) !important; } } /* 2.12.19 — restrained lift for every chat action except the back control. */ @media (hover: hover) and (pointer: fine) { #rvk-chat .rvk-chat-panel button:not(.rvk-chat-back):not(:disabled) { transition: transform .2s cubic-bezier(.2,.75,.25,1), background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease; } #rvk-chat .rvk-chat-panel button:not(.rvk-chat-back):not(:disabled):hover { transform: translate3d(0,-2px,0) scale(1.012) !important; } } /* Inline progress indicators for the two actions that wait on the server. */ #rvk-chat .rvk-chat-menu-actions button[data-rvk-new-chat] { align-items: center !important; gap: 9px !important; } #rvk-chat .rvk-chat-menu-actions button[data-rvk-new-chat] [data-rvk-new-chat-spinner] { margin-inline-start: 1px; } #rvk-chat .rvk-chat-button-spinner--dark { border-color: rgba(17,17,17,.20) !important; border-top-color: #111111 !important; } #rvk-chat .rvk-chat-anonymous-warning-actions button[data-rvk-anonymous-confirm] { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; } #rvk-chat .rvk-chat-button-spinner--light { border-color: rgba(255,255,255,.30) !important; border-top-color: #FFBC35 !important; } #rvk-chat .rvk-chat-button-spinner[hidden] { display: none !important; } #rvk-chat button[aria-busy="true"] { cursor: wait !important; } /* 2.12.20 — requested low-emphasis offline status and stable message metadata. */ #rvk-chat .rvk-chat-head-copy .rvk-chat-status-line.is-closed { background: rgb(245 158 11 / 5%) !important; } #rvk-chat .rvk-chat-message-meta { align-items: center !important; flex-wrap: nowrap !important; } #rvk-chat .rvk-chat-message-meta .rvk-chat-message-time { display: inline-block !important; flex: 0 0 auto !important; white-space: nowrap !important; } #rvk-chat .rvk-chat-message-ticks.is-read { color: #22C55E !important; } /* 2.12.22 — reliable desktop wheel scrolling inside the chat welcome/menu view. */ #rvk-chat .rvk-chat-panel { min-height: 0 !important; } #rvk-chat .rvk-chat-content { min-height: 0 !important; max-height: 100% !important; flex: 1 1 0% !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior-y: contain !important; -webkit-overflow-scrolling: touch; scrollbar-gutter: stable; touch-action: pan-y; } #rvk-chat [data-rvk-main-menu], #rvk-chat .rvk-chat-welcome { min-height: min-content; } #rvk-chat .rvk-chat-teaser-text { overflow-wrap: anywhere; } /* 2.12.22 — reliable desktop wheel scrolling inside the chat welcome/menu view. */ #rvk-chat .rvk-chat-panel { min-height: 0 !important; } #rvk-chat .rvk-chat-content { min-height: 0 !important; max-height: 100% !important; flex: 1 1 0% !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior-y: contain !important; -webkit-overflow-scrolling: touch; scrollbar-gutter: stable; touch-action: pan-y; } #rvk-chat [data-rvk-main-menu], #rvk-chat .rvk-chat-welcome { min-height: min-content; } #rvk-chat .rvk-chat-teaser-text { overflow-wrap: anywhere; } /* 2.13.0 — multi-conversation history, recovery and delete confirmation. */ #rvk-chat .rvk-chat-menu-actions button[data-rvk-new-chat].is-limit-reached, #rvk-chat .rvk-chat-menu-actions button[data-rvk-new-chat]:disabled, #rvk-chat .rvk-chat-menu-actions button[data-rvk-new-chat].is-limit-reached:hover, #rvk-chat .rvk-chat-menu-actions button[data-rvk-new-chat]:disabled:hover { opacity: .48 !important; filter: grayscale(.55) !important; cursor: not-allowed !important; box-shadow: none !important; } #rvk-chat .rvk-chat-cap-help { display: inline-grid; width: 19px; height: 19px; place-items: center; margin-inline-start: auto; border: 1px solid currentColor; border-radius: 50%; font-size: 11px; font-weight: 800; line-height: 1; opacity: .85; } #rvk-chat .rvk-chat-cap-help[aria-hidden="true"] { visibility: hidden; } #rvk-chat .rvk-chat-restore-code-info { margin: 10px 0 13px; padding: 10px 12px; border: 1px solid rgba(255,188,53,.55); border-radius: 10px; background: rgba(255,188,53,.12); color: #45320A; font-size: 11px; line-height: 1.9; overflow-wrap: anywhere; } #rvk-chat .rvk-chat-local-list { display: grid; gap: 9px; margin: 15px 0 10px; } #rvk-chat .rvk-chat-list-heading { margin: 4px 0 2px; color: #172B3A; font-size: 12px; font-weight: 800; } #rvk-chat .rvk-chat-list-empty { margin: 0; padding: 12px; border: 1px dashed #CBD5DF; border-radius: 10px; color: #64748B; font-size: 11px; line-height: 1.9; } #rvk-chat .rvk-chat-history-item { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 9px; border: 1px solid #D9E2E8; border-radius: 12px; background: #fff; transition: border-color .2s ease, background .2s ease, transform .2s ease; } #rvk-chat .rvk-chat-history-item:hover { border-color: #C3A45F; background: #FFFCF4; } #rvk-chat .rvk-chat-history-open { display: grid; min-width: 0; gap: 4px; padding: 3px 4px; border: 0 !important; background: transparent !important; color: #172B3A !important; text-align: start; cursor: pointer; } #rvk-chat .rvk-chat-history-open strong { overflow: hidden; color: inherit; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } #rvk-chat .rvk-chat-history-open small { overflow: hidden; color: #64748B; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } #rvk-chat .rvk-chat-history-delete { min-width: 46px; min-height: 32px; padding: 5px 9px; border: 1px solid #F0CACA !important; border-radius: 8px; background: #FFF5F5 !important; color: #9B2C2C !important; font: inherit; font-size: 10px; cursor: pointer; } #rvk-chat .rvk-chat-history-delete:hover { border-color: #B91C1C !important; background: #B91C1C !important; color: #fff !important; } #rvk-chat .rvk-chat-delete-confirm { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; max-height: 0; overflow: hidden; opacity: 0; transform: translateY(-5px); transition: max-height .22s ease, opacity .2s ease, transform .2s ease, padding .22s ease; } #rvk-chat .rvk-chat-delete-confirm[hidden] { display: none !important; } #rvk-chat .rvk-chat-delete-confirm.is-visible { max-height: 90px; padding-top: 7px; opacity: 1; transform: translateY(0); } #rvk-chat .rvk-chat-delete-confirm span { flex: 1 1 100%; color: #7F1D1D; font-size: 10px; } #rvk-chat .rvk-chat-delete-confirm button { min-height: 30px; padding: 5px 10px; border: 1px solid #D8DEE5 !important; border-radius: 8px; background: #fff !important; color: #334155 !important; font: inherit; font-size: 10px; cursor: pointer; } #rvk-chat .rvk-chat-delete-confirm button:last-child { border-color: #B91C1C !important; background: #B91C1C !important; color: #fff !important; } #rvk-chat .rvk-chat-delete-confirm button:disabled { opacity: .55; cursor: wait; } #rvk-chat .rvk-chat-contact-recovery-note { grid-column: 1 / -1; margin: 0 0 4px; padding: 8px 10px; border-radius: 9px; background: #FFF7E6; color: #76530C; font-size: 10px; line-height: 1.8; } #rvk-chat .rvk-chat-contact-edit input:invalid { border-color: rgba(185,28,28,.35); } @media (prefers-reduced-motion: reduce) { #rvk-chat .rvk-chat-delete-confirm, #rvk-chat .rvk-chat-history-item { transition: none !important; } } #rvk-chat .rvk-chat-history-item.is-confirming-delete .rvk-chat-history-delete { display: none !important; } #rvk-chat .rvk-chat-delete-confirm { will-change: max-height, opacity, transform; } /* Accessible disabled-new-chat explanation (separate from the disabled control). */ #rvk-chat .rvk-chat-new-action { display: flex; width: 100%; min-width: 0; align-items: center; gap: 7px; } #rvk-chat .rvk-chat-new-action > button[data-rvk-new-chat] { width: auto; flex: 1 1 auto; min-width: 0; } #rvk-chat .rvk-chat-cap-help { position: relative; display: inline-grid; width: 25px; height: 25px; flex: 0 0 25px; place-items: center; padding: 0; border: 1px solid #C08B23 !important; border-radius: 50%; background: #FFF7E6 !important; color: #6A4700 !important; font: inherit; font-size: 12px; font-weight: 800; line-height: 1; cursor: help; } #rvk-chat .rvk-chat-cap-help::after { content: attr(title); position: absolute; z-index: 20; inset-inline-end: 0; bottom: calc(100% + 8px); width: min(250px, 70vw); padding: 9px 11px; border: 1px solid rgba(17,17,17,.12); border-radius: 9px; background: #111; color: #fff; font-size: 10px; font-weight: 500; line-height: 1.8; text-align: right; white-space: normal; box-shadow: 0 8px 22px rgba(0,0,0,.18); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .16s ease, transform .16s ease, visibility .16s ease; pointer-events: none; } #rvk-chat .rvk-chat-cap-help:hover::after, #rvk-chat .rvk-chat-cap-help:focus-visible::after, #rvk-chat .rvk-chat-cap-help[aria-expanded="true"]::after { opacity: 1; visibility: visible; transform: translateY(0); } #rvk-chat .rvk-chat-cap-help[hidden] { display: none !important; } @media (prefers-reduced-motion: reduce) { #rvk-chat .rvk-chat-cap-help::after { transition: none !important; } } #rvk-chat .rvk-chat-menu-actions .rvk-chat-cap-help, #rvk-chat .rvk-chat-menu-actions .rvk-chat-cap-help:hover, #rvk-chat .rvk-chat-menu-actions .rvk-chat-cap-help:focus-visible { min-height: 25px !important; background: #FFF7E6 !important; color: #6A4700 !important; border-color: #C08B23 !important; transform: none !important; } /* 2.13.1 — restore confirmation, fixed circular launcher and first-message loading state. */ #rvk-chat .rvk-chat-launcher { position: fixed; border: 0 !important; border-radius: 50% !important; overflow: visible; transition: transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s ease, background-color .25s ease; } #rvk-chat .rvk-chat-launcher::after { content: ''; position: absolute; z-index: 0; inset: -5px; border-radius: 50%; pointer-events: none; } #rvk-chat .rvk-chat-launcher--dash-white::after { border: 2px dashed rgba(255,255,255,.98); background: transparent; } #rvk-chat .rvk-chat-launcher--dash-transparent::after { border: 0; background: repeating-conic-gradient(from -2deg, rgba(255,255,255,.62) 0deg 4.2deg, transparent 4.2deg 10deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.2px), #000 calc(100% - 1.7px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2.2px), #000 calc(100% - 1.7px)); } #rvk-chat .rvk-chat-launcher-icon, #rvk-chat .rvk-chat-launcher-close, #rvk-chat .rvk-chat-unread { position: relative; z-index: 1; } #rvk-chat .rvk-chat-primary[data-rvk-first-send] { display: flex; align-items: center; justify-content: center; gap: 9px; } #rvk-chat .rvk-chat-primary[data-rvk-first-send][aria-busy="true"] { cursor: wait; opacity: .82; } #rvk-chat .rvk-chat-button-spinner--dark { border-color: rgba(17,17,17,.2); border-top-color: #111; } #rvk-chat .rvk-chat-restore-confirm { position: absolute; z-index: 30; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(17,17,17,.52); opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s ease; } #rvk-chat .rvk-chat-restore-confirm[hidden] { display: none !important; } #rvk-chat .rvk-chat-restore-confirm.is-visible { opacity: 1; visibility: visible; } #rvk-chat .rvk-chat-restore-confirm-card { width: min(100%, 330px); padding: 20px 18px 16px; border: 1px solid rgba(255,188,53,.5); border-radius: 17px; background: #fff; color: #111; box-shadow: 0 20px 65px rgba(0,0,0,.24); text-align: center; transform: translateY(12px) scale(.97); transition: transform .26s cubic-bezier(.18,.75,.25,1); } #rvk-chat .rvk-chat-restore-confirm.is-visible .rvk-chat-restore-confirm-card { transform: translateY(0) scale(1); } #rvk-chat .rvk-chat-restore-confirm-icon { display: grid; width: 42px; height: 42px; margin: 0 auto 9px; place-items: center; border-radius: 50%; background: rgba(255,188,53,.2); color: #8a5a00; font-size: 19px; } #rvk-chat .rvk-chat-restore-confirm-card h3 { margin: 0 0 8px; color: #111; font-size: 15px; font-weight: 800; } #rvk-chat .rvk-chat-restore-confirm-card p { margin: 0; color: rgba(17,17,17,.76); font-size: 12px; line-height: 1.95; } #rvk-chat .rvk-chat-restore-confirm-actions { display: flex; justify-content: center; gap: 8px; margin-top: 16px; } #rvk-chat .rvk-chat-restore-confirm-actions button { min-height: 38px; padding: 8px 13px; border: 1px solid rgba(17,17,17,.18); border-radius: 9px; background: #fff; color: #111; font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; transition: transform .2s ease, background-color .2s ease, border-color .2s ease; } #rvk-chat .rvk-chat-restore-confirm-actions button:hover { transform: translateY(-1px); border-color: #111; } #rvk-chat .rvk-chat-restore-confirm-actions button[data-rvk-restore-confirm-accept] { border-color: #111; background: #111; color: #fff; } #rvk-chat .rvk-chat-restore-confirm-actions button[data-rvk-restore-confirm-accept]:hover { border-color: #333; background: #333; } #rvk-chat .rvk-chat-restore-confirm-actions button:disabled { cursor: wait; opacity: .55; } @media (prefers-reduced-motion: reduce) { #rvk-chat .rvk-chat-restore-confirm, #rvk-chat .rvk-chat-restore-confirm-card { transition-duration: .01ms !important; } } #rvk-chat .rvk-chat-button-spinner[hidden] { display: none !important; } /* 2.13.2 — recovery-code copy controls and stable long-thread scrolling. */ #rvk-chat .rvk-chat-content { display: block !important; flex: 1 1 0% !important; min-height: 0 !important; max-height: none !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior-y: contain !important; -webkit-overflow-scrolling: touch !important; touch-action: pan-y !important; scroll-behavior: auto; } #rvk-chat .rvk-chat-thread { display: flex; min-height: 100%; flex-direction: column; align-items: stretch; } #rvk-chat .rvk-chat-messages { display: flex; min-height: 100%; flex: 0 0 auto; flex-direction: column; gap: 10px; } #rvk-chat .rvk-chat-message-body.rvk-chat-message-has-code { display: flex; flex-direction: column; align-items: stretch; gap: 7px; } #rvk-chat .rvk-chat-message-code-row { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 9px; padding: 8px 9px; border: 1px solid rgba(255,188,53,.24); border-radius: 10px; background: rgba(255,255,255,.075); } #rvk-chat .rvk-chat-message-recovery-code { min-width: 0; color: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important; font-size: 12px; font-weight: 800; letter-spacing: .055em; line-height: 1.7; overflow-wrap: anywhere; user-select: all; } #rvk-chat .rvk-chat-message-code-copy { display: inline-flex; min-width: 58px; min-height: 30px; flex: 0 0 auto; align-items: center; justify-content: center; gap: 5px; padding: 5px 8px; border: 1px solid rgba(255,188,53,.48) !important; border-radius: 8px; background: rgba(255,188,53,.14) !important; color: inherit !important; font: inherit; font-size: 10px; cursor: pointer; transition: background .18s ease, border-color .18s ease, transform .18s ease; } #rvk-chat .rvk-chat-message-code-copy:hover { border-color: rgba(255,188,53,.85) !important; background: rgba(255,188,53,.28) !important; transform: translateY(-1px); } #rvk-chat .rvk-chat-message-code-copy i { font-size: 13px; } #rvk-chat .rvk-chat-restore-code-info { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } #rvk-chat .rvk-chat-restore-code-info[hidden] { display: none !important; } #rvk-chat .rvk-chat-restore-code-label { flex: 1 1 100%; } #rvk-chat .rvk-chat-restore-code-value { min-width: 0; flex: 1 1 190px; padding: 8px 9px; border: 1px solid rgba(255,188,53,.3); border-radius: 8px; background: rgba(255,255,255,.72); color: #172B3A; font: 800 11px/1.7 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important; letter-spacing: .045em; overflow-wrap: anywhere; user-select: all; } #rvk-chat .rvk-chat-restore-code-copy { display: inline-flex; min-height: 34px; flex: 0 0 auto; align-items: center; justify-content: center; gap: 6px; padding: 6px 10px; border: 1px solid rgba(23,43,58,.16) !important; border-radius: 8px; background: #fff !important; color: #172B3A !important; font: inherit; font-size: 10px; font-weight: 700; cursor: pointer; } #rvk-chat .rvk-chat-restore-code-copy:hover { border-color: #172B3A !important; background: #172B3A !important; color: #fff !important; } @media (max-width: 767px), (pointer: coarse) and (max-width: 1024px) { #rvk-chat .rvk-chat-content { flex: 1 1 0% !important; min-height: 0 !important; overflow-y: auto !important; } #rvk-chat .rvk-chat-thread, #rvk-chat .rvk-chat-messages { min-height: 100%; } } /* 2.13.4 — verified rotating launcher ring, aligned mobile teaser and reliable chat scrolling. */ #rvk-chat .rvk-chat-launcher::after { border: 0 !important; background: repeating-conic-gradient( from 0deg, var(--rvk-chat-launcher-dash-color, rgba(255,255,255,.96)) 0deg 4deg, transparent 4deg 9deg ) !important; -webkit-mask: radial-gradient(circle closest-side, transparent 0 87%, #000 89% 95%, transparent 97% 100%); mask: radial-gradient(circle closest-side, transparent 0 87%, #000 89% 95%, transparent 97% 100%); transform-origin: 50% 50%; animation: rvk-chat-launcher-dash-spin 26s linear infinite; will-change: transform; } #rvk-chat .rvk-chat-launcher--dash-white { --rvk-chat-launcher-dash-color: rgba(255,255,255,.98); } #rvk-chat .rvk-chat-launcher--dash-transparent { --rvk-chat-launcher-dash-color: rgba(255,255,255,.48); } #rvk-chat .rvk-chat-launcher:hover::after, #rvk-chat .rvk-chat-launcher:focus-visible::after { animation-duration: 44s; } @keyframes rvk-chat-launcher-dash-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* The teaser should remain visually quiet; hover only lifts it by two pixels. */ #rvk-chat .rvk-chat-teaser-inner { border-color: rgba(255,188,53,.20) !important; box-shadow: 0 12px 36px rgba(0,0,0,.24) !important; transform: none; transition: transform .18s ease !important; } #rvk-chat .rvk-chat-teaser:hover .rvk-chat-teaser-inner { border-color: rgba(255,188,53,.20) !important; box-shadow: 0 12px 36px rgba(0,0,0,.24) !important; transform: translateY(-2px); } /* Keep English recovery tokens isolated from the RTL Persian message flow. */ #rvk-chat .rvk-chat-message-code-row { direction: ltr !important; unicode-bidi: isolate; display: flex !important; align-items: center; gap: 9px; min-width: 0; } #rvk-chat .rvk-chat-message-recovery-code { display: block; direction: ltr !important; unicode-bidi: isolate; text-align: left; white-space: nowrap; overflow-x: auto; overflow-y: hidden; flex: 1 1 auto; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important; font-variant-numeric: tabular-nums; } #rvk-chat .rvk-chat-message-code-copy { direction: rtl; flex: 0 0 auto; min-width: 64px; min-height: 32px; border-color: rgba(255,188,53,.58) !important; border-radius: 8px; background: rgba(255,188,53,.18) !important; color: #fff !important; font-family: inherit; font-weight: 700; } #rvk-chat .rvk-chat-message-code-copy:hover { border-color: rgba(255,188,53,.88) !important; background: rgba(255,188,53,.30) !important; transform: none !important; } /* Recovery code in the restore tab: code left-to-right, copy control beside it. */ #rvk-chat .rvk-chat-restore-code-info { display: grid !important; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; } #rvk-chat .rvk-chat-restore-code-label { grid-column: 1 / -1; } #rvk-chat .rvk-chat-restore-code-value { display: block; grid-column: 1; min-width: 0; width: 100%; direction: ltr !important; unicode-bidi: isolate; text-align: center; white-space: normal; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important; } #rvk-chat .rvk-chat-restore-code-copy { grid-column: 2; min-width: 78px; min-height: 36px; white-space: nowrap; } /* Make the content area the one and only scroll container inside the panel. */ #rvk-chat .rvk-chat-panel { display: flex !important; flex-direction: column !important; min-height: 0 !important; } #rvk-chat .rvk-chat-content { display: block !important; height: 0 !important; min-height: 0 !important; max-height: none !important; flex: 1 1 0px !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior-y: contain !important; -webkit-overflow-scrolling: touch !important; touch-action: pan-y pinch-zoom !important; scrollbar-gutter: stable; scroll-behavior: auto !important; } #rvk-chat .rvk-chat-thread, #rvk-chat .rvk-chat-messages, #rvk-chat .rvk-chat-welcome, #rvk-chat .rvk-chat-restore { min-height: max-content !important; } #rvk-chat .rvk-chat-messages { flex: 0 0 auto !important; } @media (max-width: 767px), (pointer: coarse) and (max-width: 1024px) { #rvk-chat { --rvk-chat-mobile-edge-x: max(10px, min(var(--rvk-chat-launcher-offset-x, 24px), 12px), env(safe-area-inset-right, 0px)); --rvk-chat-mobile-edge-y: max(10px, min(var(--rvk-chat-launcher-offset-y, 24px), 12px), env(safe-area-inset-bottom, 0px)); --rvk-chat-mobile-launcher-size: min(var(--rvk-chat-launcher-size, 62px), 54px); } #rvk-chat .rvk-chat-launcher { inset-inline-start: var(--rvk-chat-mobile-edge-x) !important; inset-block-end: var(--rvk-chat-mobile-edge-y) !important; width: var(--rvk-chat-mobile-launcher-size) !important; height: var(--rvk-chat-mobile-launcher-size) !important; } #rvk-chat .rvk-chat-launcher-icon { width: min(var(--rvk-chat-launcher-icon-size, 27px), 29px) !important; height: min(var(--rvk-chat-launcher-icon-size, 27px), 29px) !important; font-size: min(var(--rvk-chat-launcher-icon-size, 27px), 29px) !important; } #rvk-chat .rvk-chat-teaser { inset-inline-start: var(--rvk-chat-mobile-edge-x) !important; inset-block-end: calc(var(--rvk-chat-mobile-edge-y) + var(--rvk-chat-mobile-launcher-size) + 10px) !important; max-width: calc(100vw - var(--rvk-chat-mobile-edge-x) - 10px) !important; transform-origin: bottom right !important; } #rvk-chat .rvk-chat-teaser-inner { max-width: calc(100vw - var(--rvk-chat-mobile-edge-x) - 10px) !important; } #rvk-chat .rvk-chat-teaser.is-visible { width: min(var(--rvk-teaser-target-width, 230px), calc(100vw - var(--rvk-chat-mobile-edge-x) - 10px)) !important; } #rvk-chat .rvk-chat-content { height: 0 !important; min-height: 0 !important; flex: 1 1 0px !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; touch-action: pan-y pinch-zoom !important; } #rvk-chat .rvk-chat-restore-code-info { grid-template-columns: minmax(0,1fr) auto; } #rvk-chat .rvk-chat-restore-code-value { font-size: 10px !important; letter-spacing: .015em; } #rvk-chat .rvk-chat-restore-code-copy { min-width: 68px; padding-inline: 7px; } } @media (prefers-reduced-motion: reduce) { #rvk-chat .rvk-chat-launcher::after { animation: none !important; } #rvk-chat .rvk-chat-teaser-inner { transition: none !important; transform: none !important; } } @supports not (background: repeating-conic-gradient(#fff 0deg 4deg, transparent 4deg 9deg)) { #rvk-chat .rvk-chat-launcher::after { border: 2px dashed var(--rvk-chat-launcher-dash-color, rgba(255,255,255,.96)) !important; background: transparent !important; -webkit-mask: none; mask: none; } } #rvk-chat .rvk-chat-panel button.rvk-chat-message-code-copy:not(:disabled):hover { transform: none !important; } /* 2.13.5 — immutable registered email, visible recovery copy button and mobile page-scroll safeguards. */ #rvk-chat .rvk-chat-message-code-copy { border: 1px solid rgba(255,255,255,.48) !important; background: #111111 !important; color: #FFFFFF !important; box-shadow: 0 2px 8px rgba(0,0,0,.18); } #rvk-chat .rvk-chat-message-code-copy:hover, #rvk-chat .rvk-chat-message-code-copy:focus-visible { border-color: #FFBC35 !important; background: #242424 !important; color: #FFFFFF !important; } #rvk-chat .rvk-chat-start input.is-locked, #rvk-chat .rvk-chat-contact-edit input.is-locked { background: #F2F4F6 !important; border-color: rgba(17,17,17,.12) !important; color: #4B5563 !important; cursor: not-allowed; opacity: 1; } #rvk-chat .rvk-chat-contact-edit [data-rvk-contact-save][hidden] { display: none !important; } @media (max-width: 767px), (pointer: coarse) and (max-width: 1024px) { #rvk-chat { --rvk-chat-mobile-edge-x: max(16px, env(safe-area-inset-right, 0px)) !important; --rvk-chat-mobile-edge-y: max(16px, env(safe-area-inset-bottom, 0px)) !important; } #rvk-chat .rvk-chat-teaser { overflow: visible !important; border-radius: 13px !important; } #rvk-chat .rvk-chat-teaser-inner { border-radius: 13px !important; overflow: visible !important; } #rvk-chat .rvk-chat-teaser::after { content: ''; position: absolute; z-index: 4; inset-inline-start: calc((var(--rvk-chat-mobile-launcher-size, 54px) / 2) - 7px); inset-block-end: -7px; width: 0; height: 0; border-inline: 7px solid transparent; border-block-start: 7px solid #111111; pointer-events: none; } } /* Ravak Widgets 2.13.6 — a closed chat panel must never cover page content. * The panel uses display:flex!important for its internal scroll layout; that * rule otherwise overrides the browser's normal [hidden] display:none rule. * Keep the closed/exiting panel out of hit-testing immediately. */ #rvk-chat .rvk-chat-panel[hidden] { display: none !important; visibility: hidden !important; pointer-events: none !important; } #rvk-chat .rvk-chat-panel:not(.is-open) { pointer-events: none !important; } #rvk-chat .rvk-chat-panel.is-open { visibility: visible !important; pointer-events: auto !important; }