:root { /* Default branding variables */ --brand-primary: #00CE9D; --brand-secondary: #224368; --brand-text-color: #FFFFFF; --brand-background: #FFFFFF; --brand-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --assistant-name: "Journey AI"; } body { overflow: hidden; background-color: transparent !important; } .chatElements { height: 100%; /* height: 750px; disabled for maximum size in frame */ /* border:1px solid black; */ border: 1px solid rgb(190, 190, 190); border-radius: 10px; padding: 8px 8px 8px; display: flex; flex-direction: column; font-size: 14px; /* border-radius: 10px; */ background-color: white; transition: opacity 0.5s ease-in-out; /* justify-content: space-evenly; */ position: absolute; /* Changed to absolute */ /* width: 600px !important; disabled for maximum size in frame */ width: 100% !important; } .form-container { height: 100%; display: flex; flex-direction: column; } .form-header p { color: #224368; } #chatMainComponent { overflow: hidden; /* height:100vh */ } #chatContainer { overflow-y: auto; border-radius: 5px; height: 100% !important; } .ai-bubble { position: relative; background: var(--brand-secondary); color: var(--brand-text-color) !important; border-radius: 5px; display: flex !important; flex-direction: column; min-height: 102px; } .aiResponse:not(:first-child) .ai-bubble { padding-bottom: 2px !important; } .ai-bubble pre { white-space: pre-wrap; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 14px; margin-bottom: 4px !important; flex: 1; } .usr-bubble { position: relative; background: #e2f0eb; border-radius: 5px; color: #7b8092; } /* Progress circles container */ .progress-indicators { display: flex; justify-content: flex-end; gap: 1px; padding: 1px; margin-top: auto; border-top: 1px solid rgba(255, 255, 255, 0.1); } /* Style for the status icon */ .status-check { width: 12px; height: 12px; transition: all 0.3s ease; } /* Hide checkmark and xmark by default */ .status-check .checkmark, .status-check .xmark { opacity: 0; display: block; /* Changed from display: none to use opacity for animation */ transition: opacity 0.3s ease; } /* Empty box default color */ .status-check .empty-box { fill: #cccccc40; } /* Status-specific styles */ .status-check.received .empty-box, .status-check.complete .empty-box { fill: #5A9C72; } .status-check.received .checkmark, .status-check.complete .checkmark { opacity: 1; /* Show checkmark using opacity */ fill: #5A9C72; } .status-check.processing .empty-box { fill: #cccccc40; } .status-check.error .empty-box { fill: #9C5D5A; } .status-check.error .xmark { opacity: 1; /* Show xmark using opacity */ fill: #9C5D5A; } .slow-network-indicator { background-color: #fff3cd; color: #856404; padding: 8px 12px; margin: 8px 0; border-radius: 4px; font-size: 0.9rem; display: flex; align-items: center; gap: 8px; animation: pulse 2s infinite; } .slow-network-indicator i { color: #e0a800; } @keyframes pulse { 0% { opacity: 0.8; } 50% { opacity: 1; } 100% { opacity: 0.8; } } /* Tool - "thinking..." */ .thinking-indicator { /* Basic positioning */ position: relative; display: inline-block; margin: 8px 0; padding: 0 4px; /* Font styling */ color: #9FACB8; font-style: italic; font-size: 0.875em; /* Animation */ animation: fadeInOut 1.5s ease-in-out infinite; } /* Animated ellipsis immediately after text */ .thinking-indicator::after { content: '.'; display: inline-block; width: 12px; animation: ellipsis 1.5s infinite; margin-left: -4px; /* Pull dots closer to text */ } @keyframes fadeInOut { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } } @keyframes ellipsis { 0% { content: '.'; } 33% { content: '..'; } 66% { content: '...'; } 90%, 100% { content: '...'; } } /* Remove any existing margins when inside pre elements */ pre .thinking-indicator { margin: 0; line-height: 1.5; } input, input::placeholder, textarea, textarea::placeholder { font-size: 14px; } textarea { resize: none !important; } hr { margin: 10px 0 !important; } #rfq_form div { margin: 12px 0px; } .ai-avatar { width: 18px; } .info-text { color: #787f8f; font-size: smaller; /* border: 1px solid; border-color: #e3e3e3 transparent transparent; */ margin-bottom: 0; } .pt-10 { padding-top: 10px; } .close-button { top: 5px; right: 10px; color: #546c8c; } .close-button:hover { cursor: pointer; z-index: 100; position: sticky; } .icon-row { display: inline-block; height: 25px } .divider { margin: 4px 0 8px 0; border-top: 0.5px solid #e9ecef; } .avatar-container { width: 12px; height: 12px; background: url("/web/journeyai-icon-25px.svg") no-repeat; border-radius: 50%; z-index: 1 !important; top: 18px; left: 94px; } #successView { background-color: #088262; border-radius: 10px; text-align: center; } #successView .journey-white-icon { width: 40px } #successView p { color: white !important; } #chat-circle { width: 60px; height: 60px; border-radius: 50%; position: absolute; /* bottom:0; */ right: 0; background-color: white; cursor: pointer; } .fa-user-tie, .fa-trash { font-size: 18px; } .fa-user-tie-bubble-icon { font-size: 14px; } .journey-green { background: url("/web/journeyai-icon-25px.svg") no-repeat; } .dot-typing { position: relative; left: -9985px; width: 6px; height: 6px; border-radius: 5px; background-color: #00ce9d; color: #00ce9d; box-shadow: 9984px 0 0 0 #00ce9d, 9994px 0 0 0 #00ce9d, 10004px 0 0 0 #00ce9d; animation: dot-typing 1s infinite linear; } #chat-reset-button { border: none; background-color: transparent; } #chat-reset-button:disabled { opacity: 0.6 } /* Chat reset modal styles */ .chat-reset-modal { overflow-y: hidden; justify-content: center; flex-wrap: wrap; align-content: center; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .close-button-modal { border: none; background-color: white; padding-bottom: 5px; } .accept-reset-button { background-color: #00C795; font-size: 12px; border-color: #00C795; } .accept-reset-button:hover { background-color: #007659; border-color: #007659; } .decline-reset-button { background-color: #244E78; font-size: 12px; border-color: #244E78; } .decline-reset-button:hover { background-color: #1C3C5C; border-color: #1C3C5C; } .chat-reset-modal .chat-reset-header { justify-content: center; position: relative; } .chat-reset-modal .chat-reset-content { padding: 5px } /* End of Chat reset modal styles*/ /* Start of Chat Rating Styles */ .ratingContainer { display: none; gap: 4px; padding-right: 15px; /* padding-bottom: 3px; */ padding-top: 3px; justify-content: flex-end; } .ratingButton { position: relative; border: none; background-color: transparent; padding: 0; margin-top: -5px; } .rating-sub-header { display: flex; flex-direction: column; align-items: center; } .not-helpful-button { margin-top: -1px; } .tooltip-container { font-size: 10px; position: absolute; background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 7px; border-radius: 8px; z-index: 9999; opacity: 1; transition: opacity 133ms ease-in-out; } /* End of Chat Rating Styles */ /* Start of Chat Rating Form Styles */ .rating-form-modal { flex-wrap: wrap; align-content: center; background-color: rgba(0, 0, 0, 0.5); overflow-y: hidden; } .form-close-button { position: absolute; top: 0; right: 0; } .rating-form-modal .rating-modal { width: 100%; align-content: center; } .rating-form-modal .rating-content { padding: 10px; } .rating-form-modal .rating-header { border-bottom: none; justify-content: center; position: relative; padding: 0 0 10px 0; } .rating-form-modal h2 { margin-top: 0; margin-bottom: 20px; color: #444; font-size: 1.5rem; } .rating-form-modal textarea { width: 100%; height: 25vh; padding: 10px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; margin-bottom: 10px; overflow-y: auto; } .dialog-actions { display: flex; justify-content: center; gap: 10px; } .dialog-actions button { padding: 7px 10px; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; color: #fff; background-color: #00C795; } .dialog-actions button:not(:disabled):hover { background-color: #007659; } /* Container holding the textarea, mimicking MUI's outlined effect */ .textarea:focus-within { border-color: #00C795; border-width: 2px; } /* The actual textarea element */ .textarea { width: 100%; padding: 18.5px 14px; border: none; border-radius: 4px; overflow: hidden; outline: none; background: none; font-family: Roboto, Helvetica, Arial, sans-serif; font-size: 1rem; line-height: 1.4375em; box-sizing: border-box; resize: vertical; } /* Expanding the notched outline when the container is focused */ .textarea:focus-within .notched-outline legend { max-width: 1000px; transition: max-width 0.3s ease; } /* feedbackdialog.css */ .icon-wrapper { margin-right: 10px; display: flex; } .icon-wrapper svg { width: 30px; height: 30px; stroke: none; } .like .dislike { width: 25px; height: 25px; } /* End of Chat Rating Form Styles */ .bg-custom-color { padding-top: 0.2rem !important; padding-bottom: 0.3rem !important; background-color: #E7E7E7; color: #214368; } .bg-custom-color div { padding-top: 0.1rem !important; padding-bottom: 0.1rem !important; line-height: 1; } .topic-display { line-height: 1; margin-bottom: 5px; } @keyframes dot-typing { 0%, 100% { box-shadow: 9984px 0 0 0 #00ce9d, 9994px 0 0 0 #00ce9d, 10004px 0 0 0 #00ce9d; } 20% { box-shadow: 9984px -7px 0 0 #00ce9d, 9994px 0 0 0 #00ce9d, 10004px 0 0 0 #00ce9d; } 40% { box-shadow: 9984px 0 0 0 #00ce9d, 9994px -7px 0 0 #00ce9d, 10004px 0 0 0 #00ce9d; } 60% { box-shadow: 9984px 0 0 0 #00ce9d, 9994px 0 0 0 #00ce9d, 10004px -7px 0 0 #00ce9d; } 80% { box-shadow: 9984px 0 0 0 #00ce9d, 9994px 0 0 0 #00ce9d, 10004px 0 0 0 #00ce9d; } } /* Hide the scrollbar corners and set the overall scrollbar styles */ ::-webkit-scrollbar { width: 3px; height: 10px; border-radius: 1rem; } /* Set the track color and rounded corner styles */ ::-webkit-scrollbar-track { background-color: #f1f1f100; border-radius: 1rem; } /* Set the thumb color and rounded corner styles */ ::-webkit-scrollbar-thumb { background-color: #888888; border-radius: 1rem; } /* Hide the scrollbar when not hovered */ ::-webkit-scrollbar-thumb:hover { background-color: #555; } /* Tooltips */ .custom-tooltip { display: none; background-color: #404040; color: #fff; text-align: center; border-radius: 4px; padding: 7px 8px; position: absolute; z-index: 1; font-family: "Helvetica Neue", Arial, sans-serif; font-size: 12px; font-weight: 400 !important } .custom-tooltip::after { content: ""; position: absolute; margin-left: -5px; border-width: 5px; border-style: solid; } #chat-reset-button .tooltip-chat-reset-button { top: 5px; right: 35px; } #chat-reset-button .tooltip-chat-reset-button::after { top: 10px; right: -10px; border-color: transparent transparent transparent #404040; } #chat-reset-button .reset-button:hover .tooltip-chat-reset-button { display: block; margin-left: -35px; position: fixed; } #show-form-button .tooltip-send-info-button { top: 5px; left: 70px; } #show-form-button .tooltip-send-info-button::after { top: 8px; left: -5px; border-color: transparent #404040 transparent transparent; } #show-form-button .send-info-button:hover .tooltip-send-info-button { display: block; margin-left: -35px; position: fixed } #show-form-button .tooltip-back-button { top: -8px; right: 20px; } #show-form-button .tooltip-back-button::after { top: 8px; right: -10px; border-color: transparent transparent transparent #404040; } #show-form-button .back-button:hover .tooltip-back-button { display: block; margin-left: -35px; } #send-button .tooltip-send { bottom: 95px; right: 11px; } #send-button .tooltip-send::after { top: 32px; left: 28px; border-color: #404040 transparent transparent transparent; } #send-button:hover .tooltip-send { display: block; margin-left: -35px; } /* End of Tooltips */ /* Contact Us */ .contact-us { cursor: pointer; display: none; /* Set default as hidden */ } .contact-us.show-label { display: inline; } .contact-us i.fa-left-long { margin-left: 7px; color: #004368; } .contact-us span.label-text { color: #004368; font-weight: bold; text-decoration: underline; padding-left: 2px; } /* End of Contact Us */ .source-link, .product-link { color: var(--brand-primary); } .source-link:hover, .product-link:hover { color: var(--brand-primary-hover, #39A486); } /* Fallback Loading Styles */ .fallback-loading-container { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; display: flex; justify-content: center; align-items: center; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } .fallback-loading-backdrop { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.4); backdrop-filter: blur(2px); animation: fallback-fade-in 0.2s ease-out; } .fallback-loading-popup { position: relative; background: white; padding: 1.5rem; border-radius: 5px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); text-align: center; width: 20rem; max-width: 90%; animation: fallback-pop-in 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .fallback-loading-title { font-size: 1.5rem; font-weight: 600; color: #545454; margin-bottom: 1rem; } .fallback-loading-spinner { display: flex; justify-content: center; margin: 1.5rem 0; } .fallback-spinner-dot { width: 8px; height: 8px; margin: 0 4px; border-radius: 50%; background-color: #3AA486; display: inline-block; animation: fallback-bounce 1.4s infinite ease-in-out both; } .fallback-spinner-dot:nth-child(1) { animation-delay: -0.32s; } .fallback-spinner-dot:nth-child(2) { animation-delay: -0.16s; } .fallback-loading-progress { position: absolute; bottom: 0; left: 0; height: 3px; width: 0; background-color: #3AA486; border-radius: 0 0 0 5px; transition: width 0.1s linear; } /* End of Fallback Loading Style*/ /* Animations */ @keyframes fallback-bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1.0); } } @keyframes fallback-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes fallback-pop-in { 0% { transform: scale(0.9); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } .fallback-fade-out { animation: fallback-fade-out 0.2s ease-in forwards; } @keyframes fallback-fade-out { from { opacity: 1; } to { opacity: 0; } } /* Media Queries */ /* @media only screen and (max-width: 300px) { .chatElements { height: 495px !important; width: 300px !important; } } @media only screen and (min-width: 301px) and (max-width: 369px) { .chatElements { height: 495px !important; width: 369px !important; } } */ /* @media only screen and (min-width: 370px) and (max-width: 767px){ .chatElements { height: 495px !important; width: 370px !important; } } */ /* End of Media Queries */ .btn.btn-primary.submit_button { --bs-btn-color: #fff; --bs-btn-bg: var(--brand-primary); --bs-btn-border-color: var(--brand-primary); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--brand-primary-hover, #088262); --bs-btn-hover-border-color: var(--brand-primary-hover, rgb(149 149 149 / 65%)); --bs-btn-focus-shadow-rgb: 49, 132, 253; --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--brand-primary-hover, #007156); --bs-btn-active-border-color: var(--brand-secondary); --bs-btn-active-shadow: inset 0 3px 5px rgb(0 0 0 / 13%); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: rgb(223 223 223); --bs-btn-disabled-border-color: #b8b8b8; } .form-control:focus { color: var(--bs-body-color); background-color: var(--bs-body-bg); border-color: var(--brand-primary-light, rgb(149 149 149 / 65%)); outline: 0; box-shadow: 0 0 0 0.25rem var(--brand-primary-trans, rgb(0 158 121 / 42%)); } @media only screen and (max-width: 625px) { .chatElements { height: 100vh !important; width: 100vw !important; overflow-y: scroll; overflow-x: hidden; } /* .chatElements input, .chatElements textarea{ font-size: 16px!important } */ } .disable { pointer-events: none; } .function-message-loading:after { overflow: hidden; display: inline-block; vertical-align: bottom; -webkit-animation: ellipsis steps(4, end) 900ms infinite; animation: ellipsis steps(4, end) 900ms infinite; content: "\2026"; /* ascii code for the ellipsis character */ width: 0px; } .function-message-static:after { content: "..."; } @keyframes ellipsis { to { width: 1.25em; } } @-webkit-keyframes ellipsis { to { width: 1.25em; } } /*Hide omniseal's elements */ .omniseal-divider, .back-text { display: none; } /* Style for back button container */ .back-btn-container { display: inline-flex; align-items: center; cursor: pointer; } .disclaimer { background: none; border: none !important; padding: 0 !important; margin: 0; color: #d05623 !important; cursor: pointer !important; font-family: inherit; font-size: inherit !important; text-decoration: underline; transition: text-decoration 0.3s ease; } .disclaimer:hover { color: #b64a1e !important; } .disclaimer:focus { color: #b64a1e !important; outline: none; text-decoration: underline; } #turnstile-container { position: fixed; bottom: 250px; left: 40%; transform: translateX(-50%); z-index: 9999; /*margin: 10px 0;*/ width: 200px; height: 100px; padding: 10px; display: none; } /* Resources Load Failed - Error Container */ .chat-error-container { height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; background: linear-gradient(135deg, #f8fbff 0%, #e8f4f8 100%); min-height: 400px; } .chat-error-card { background: var(--brand-background); border-radius: 16px; padding: 32px; box-shadow: 0 10px 30px rgba(34, 67, 104, 0.1); text-align: center; max-width: 400px; width: 100%; border: 1px solid rgba(34, 67, 104, 0.1); } .chat-error-icon { width: 64px; height: 64px; background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; color: var(--brand-text-color); font-size: 24px; } .chat-error-icon i { transform: rotate(-45deg); } .chat-error-title { color: var(--brand-secondary); font-size: 24px; font-weight: 600; margin: 0 0 12px 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .chat-error-message { color: var(--brand-secondary); opacity: 0.8; font-size: 16px; line-height: 1.5; margin: 0 0 24px 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .chat-error-retry-btn { background: linear-gradient(135deg, var(--brand-primary) 0%, #00b389 100%); color: var(--brand-text-color); border: none; padding: 12px 24px; border-radius: 8px; font-size: 16px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 4px 12px rgba(0, 206, 157, 0.3); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .chat-error-retry-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 206, 157, 0.4); background: linear-gradient(135deg, #00b389 0%, var(--brand-primary) 100%); } .chat-error-retry-btn i { margin-right: 8px; } .chat-error-support { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(34, 67, 104, 0.1); font-size: 14px; color: var(--brand-secondary); opacity: 0.6; } .chat-error-support p { margin: 0 0 8px 0; } .chat-error-support a { color: var(--brand-primary); text-decoration: none; font-weight: 500; } .chat-error-support a:hover { text-decoration: underline; color: #00b389; } /* Alternative version with more brand color integration */ .chat-error-container.branded { background: linear-gradient(135deg, var(--brand-background) 0%, #f0fdfa 50%, #e6fffa 100%); } .chat-error-card.branded { border: 2px solid rgba(0, 206, 157, 0.1); box-shadow: 0 10px 30px rgba(0, 206, 157, 0.1), 0 4px 8px rgba(34, 67, 104, 0.05); } .chat-error-icon.branded { background: var(--brand-primary); box-shadow: 0 4px 12px rgba(0, 206, 157, 0.3); }