@keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes animate { 0% { transform: rotate(0deg); } 100% { transform: rotate(720deg); } } @keyframes zoom-in-zoom-out { 0% { scale: 100%; } 50% { scale: 150%; } 100% { scale: 100%; } } #chatBox * { margin-block-start: 0; box-sizing: border-box; } #chat-icon { margin-block-start: 0; box-sizing: border-box; position: fixed; z-index: 9990; bottom: 80px; right: 20px; background-color: #007bff; color: white; border-radius: 50%; padding: 8px; font-size: 24px; cursor: pointer; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); text-align: center; } #chatBoxLoading { animation: rotate 5s infinite linear; width: 100%; position: absolute; height: 100%; top: 0; left: 0; background-image: url('./loading.png'); z-index: 9995; background-size: 70%; background-position: center; background-repeat: no-repeat; } #chatBox { border-radius: 10px; margin-block-start: 0; box-sizing: border-box; position: fixed; bottom: 145px; right: 20px; width: 400px; min-height: 225px; border: none; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.5); transition: opacity 0.3s ease; z-index: -1; opacity: 0; visibility: hidden; background: rgb(0 0 0 / 20%); } #chatBox.show { z-index: 9991; opacity: 1; visibility: visible; } #chatBox.fullwidth { border-radius: 0px; width: 100% !important; max-width: 100% !important; height: calc(100% - 50px) !important; min-height: calc(100vh - 50px) !important; bottom: auto; right: 0; top: 45px; } #chatBox.fullwidth #chat-widget { min-height: calc(100vh - 0px) !important; background: rgba(0, 0, 0, .45); } #chatBox.fullwidth #transcriptContainer { background: rgba(0, 0, 0, 0.5); border-radius: 0 0 10px 10px; } #chatBox.fullwidth .chatBox-action { background-image: url('./fullscreen.png'); } #chat-widget { display: flex; flex-direction: column; position: relative; width: 100%; height: 100%; min-height: 225px; border: 0; box-shadow: unset; } #chatBox-action { width: 40px; height: 34px; position: absolute; top: 5px; right: 5px; z-index: 90; color: #000000; cursor: pointer; border-radius: 10px; padding: 3px 10px; font-size: 16px; background: #FFF; background-image: url('./fullscreen.png'); background-position: center; background-size: 24px; background-repeat: no-repeat; } #chatBox-heading { border-radius: 10px 10px 0 0; font-size: 16px; position: relative; width: 100%; background: rgb(30 64 175 / 83%); padding: 10px 10px; color: #FFF; box-sizing: border-box; } #chatBox.fullwidth .avatarContainer { margin: 50px auto 0; border-radius: 0.5rem 0.5rem; width: 90%; } /** */ #chatBox .avatarContainer { border-radius: 0 0 0.5rem 0.5rem; } .avatarContainer { display: flex; justify-content: center; align-items: center; width: 100%; height: auto; overflow: hidden; position: relative; max-width: 992px; margin: 0 auto; border: 2px solid transparent; } .avatarContainer #avatarVideo { width: 100%; /* height: 100%; */ /* object-fit: contain; */ } .avatarContainer .actionContainer { position: absolute; bottom: 0.25rem; right: 0; display: none; flex-direction: row; gap: 10px; width: 100%; justify-content: center; align-items: center } .avatarContainer.streamReady .actionContainer { display: flex; } .avatarContainer button { font-weight: 500; border-radius: 9999px; text-align: center; padding: 0.625rem 1.25rem; font-size: 0.875rem; } .avatarContainer button:focus { outline: none; } .avatarContainer button:focus-visible { ring: 4px solid rgba(59, 130, 246, 0.3); } .avatarContainer #interruptTask { display: none; background-color: #1D4ED8; color: white; } .avatarContainer #interruptTask:hover { background-color: #1E40AF; } .avatarContainer #interruptTask:focus-visible { background-color: #1D4ED8; } .avatarContainer #endSession { background-color: #1D4ED8; color: white; } .avatarContainer #endSession:hover { background-color: #1E40AF; } .avatarContainer #endSession:focus-visible { background-color: #1D4ED8; } .avatarContainer button.dark { background-color: #2563EB; } .avatarContainer button.dark:hover { background-color: #1D4ED8; } .avatarContainer button.dark:focus-visible { background-color: #1D4ED8; } .avatarContainer img { object-fit: cover; width: 100%; height: 100%; position: absolute; z-index: -1; } .avatarContainer .welcomeContainer { position: absolute; display: flex; flex-direction: column; gap: 2rem; /* gap-8 */ justify-content: center; align-items: center; width: 100%; height: 100%; } .avatarContainer .chatBtnContainer { max-width: 18.75rem; margin: 0 auto; padding: 1rem 0; display: flex; flex-direction: column; gap: 0.5rem; width: 100%; justify-content: center; align-items: center; } .avatarContainer #startSession { width: 6.25rem; background-color: rgba(29, 78, 216, 0.5); color: white; } .avatarContainer #startSession:hover { background-color: #1E40AF; } .avatarContainer #startSession:focus-visible { background-color: #1D4ED8; } .avatarContainer #startSession.dark { background-color: #2563EB; } .avatarContainer #startSession.dark:hover { background-color: #1D4ED8; } .avatarContainer #startSession.dark:focus-visible { background-color: #1D4ED8; } .avatarContainer .loadingText { display: none; color: #000; background-color: rgba(255, 255, 255, .7); padding: 10px; border-radius: 40px; } .avatarContainer .loading-icon { display: none; color: teal; font-size: 8rem; animation: animate 2s infinite; } .avatarContainer.loading .loadingText, .avatarContainer.loading .loading-icon { display: block; } .avatarContainer.loading .chatBtnContainer { display: none !important; } .avatarContainer.streamReady .actionContainer { display: flex !important; } .avatarContainer.streamReady .welcomeContainer { display: none !important; } .avatarContainer .switchMode { background-image: url(./live-chat.png); width: 40px; height: 40px; background-position: center; background-size: auto 30px; background-repeat: no-repeat; background-color: rgba(255, 255, 255, .6); border-radius: 50px; cursor: pointer; } .avatarContainer .textInput-wrapper, .avatarContainer .listeningIcon { width: 200px; height: 40px; background-position: center; background-size: auto 60px; background-repeat: no-repeat; background-color: rgba(255, 255, 255, .4); border-radius: 100px; position: relative; } .avatarContainer .textInput-wrapper { position: relative; display: none; background-color: rgba(255, 255, 255, .6); } .avatarContainer .textInput-wrapper .textInput { width: 100%; height: 100%; border-radius: 100px; background: transparent; padding: 5px 45px 5px 15px; border: 0; } .avatarContainer.text_mode .textInput-wrapper { display: flex; } .avatarContainer .textInput-wrapper .speakButton { background-image: url(./send-icon.png); width: 40px; height: 40px; background-position: center; background-size: auto 40px; background-repeat: no-repeat; background-color: rgba(255, 255, 255, .6); border-radius: 50px; cursor: pointer; position: absolute; right: 0; display: inline; } .avatarContainer.text_mode .listeningIcon { display: none; } .avatarContainer.talking .listeningIcon { background-image: url(./streaming-listening-dark.gif); /* animation: zoom-in-zoom-out 1s ease infinite; */ /* display: block; */ } #chatBox img.emoji { height: 24px !important; width: 24px !important; margin: 7px !important; } button.exportTranscript { margin: 10px 0; padding: 7px 10px; } #transcriptContainer { position: relative; padding: 10px; display: none; max-width: 992px; margin: 0 auto; } #transcriptContainer p { font-size: 14px; position: relative; min-height: 28px; } p.avatar.transcript { text-align: left; padding-left: 40px !important; } p.user.transcript { text-align: right; padding-right: 40px !important; } p.transcript::before, p.transcript::after { position: absolute; top: 7px; } p.avatar.transcript::before { content: ''; width: 20px; height: 20px; background-image: url(./avatar.png); background-size: cover; left: 10px; } p.user.transcript::after { content: ''; width: 20px; height: 20px; background-image: url(./user.png); background-size: cover; right: 10px; } .mute-button { position: absolute; top: 110px; right: 16px; background-color: #d2d2e2; border: none; border-radius: 50%; width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); z-index: 1000; display: none; } .mute-button:hover { background-color: #b5b5d3; transform: scale(1.1); } .mute-button .icon { width: 36px; height: 36px; pointer-events: none; } /* Main toggle button */ .view-transcript-button { position: absolute; top: 60px; right: 16px; background-color: #1e1e2f; border: none; border-radius: 50%; width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); z-index: 1000; } .view-transcript-button:hover { background-color: #2a2a3d; transform: scale(1.1); } .view-transcript-button.active { background-color: #e63946; } .view-transcript-button .icon { width: 20px; height: 20px; pointer-events: none; transition: opacity 0.3s ease; fill: white; } .streamingCountdown-container { position: absolute; top: 10px; left: 16px; background-color: #ffffffad; border: none; border-radius: 10px; min-width: 50px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); z-index: 1000; color: #cc0f0f; text-align: center; font-size: 14px; padding: 5px; font-weight: bold; display: none; } .language-switcher { position: absolute; top: 10px; right: 16px; background-color: #d2d2e2; border: none; border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); z-index: 1000; font-size: 14px; } .language-switcher:hover { background-color: #b5b5d3; transform: scale(1.1); } .language-switcher .lang-icon { cursor: pointer; user-select: none; margin: 0px !important; display: flex; font-size: 20px; align-items: center; justify-content: center; } .language-switcher .dropdown { display: none; position: absolute; top: 0px; right: 50px; background-color: white; border: 1px solid #ccc; border-radius: 4px; min-width: 100px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); z-index: 1000; } .language-switcher .dropdown a { padding: 0px; text-decoration: none; color: black; font-size: 14px; display: flex; justify-content: center; align-items: center; } .language-switcher .dropdown img.emoji { height: 20px !important; width: 20px !important; margin: 0px 5px 0px 0px !important; } .language-switcher .dropdown a:hover { background-color: #f0f0f0; } /* Overlay Background */ .overlayQuestion-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: none; justify-content: center; align-items: center; z-index: 9999; } .overlayQuestion-container.show { display: flex; } .overlayQuestion-content { background-color: rgba(255, 255, 255, .9); width: 90%; max-width: 500px; border-radius: 8px; overflow: hidden; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); animation: fadeInUp 0.3s ease-out; } .overlayQuestion-header { background-color: rgba(255, 255, 255, .4); padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ddd; } .overlayQuestion-title { margin: 0; font-size: 18px; font-weight: 600; } .closeOverlayQuestion { background: transparent; border: none; font-size: 20px; cursor: pointer; color: #555; transition: color 0.2s ease; } .closeOverlayQuestion:hover { color: #e00; } .overlayQuestion-body { padding: 20px; font-size: 14px; color: #333; } .overlayQuestion-body .radio-option { display: flex; gap: 10px; } .overlayQuestion-body .radio-options { display: flex; flex-direction: column; gap: 10px; } .overlayQuestion-action { padding: 10px; text-align: right; } .overlayQuestion-action .submit-button { background-color: #4CAF50; color: white; padding: 12px 24px; border: none; border-radius: 5px; font-size: 16px; cursor: pointer; transition: background-color 0.3s ease; } .overlayQuestion-action .submit-button:hover { background-color: #45a049; } .avatarSessionStarted .language-switcher { display: none; } .avatarSessionStarted .view-transcript-button, .avatarSessionStarted .mute-button { display: inline; } .avatarSessionStarted .view-transcript-button { top: 10px; } .avatarSessionStarted .mute-button { top: 60px; } div#streamingStatus { position: relative; font-size: 13px; height: 100px; overflow-y: scroll; } @keyframes fadeInUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @media (max-width:400px) { #chat-icon { bottom: 40px; } #chatBox { bottom: 105px; width: 370px; right: 10px; } #chat-widget {} #chatBox.fullwidth #chat-widget { position: relative; bottom: auto; } } @media (min-width:400px) and (max-width:767px) { #chat-icon { bottom: 40px; } #chatBox { bottom: 105px; width: 380px; right: 10px; min-height: 215px; } #chat-widget { min-height: 215px; } #chatBox.fullwidth #chat-widget { position: relative; bottom: auto; } }