@import url("https://use.typekit.net/wkh7yib.css");

:root {
    --cold-gray: #F7FAFD;
    --bg-color-white: #FFFFFF;
    --text-color-white: #FFFFFF;
    --text-color: rgba(0, 0, 0, 0.60);
    --link-color: #0665AD;
    --btn-bg-color: #F08A00;
    --btn-text-color: #FFFFFF;
    --gradient-bg: linear-gradient(98deg, #0298DF 6.15%, #0090D4 48.18%, #017AB8 93.85%);
    --light-border-color: #CCDBE6;
    --scrollbar-track-color: rgba(0, 0, 0, 0.15);
    --scrollbar-track-bg: rgba(255, 255, 255, 1);
    --text-focus-border-color: rgba(0, 0, 0, 0.80);
    --msg-time-color: rgba(0, 0, 0, 0.60);
    --jumping-dots-color: #0090d4;
    --title-color: #FFF;
    --focus-color: #0665AD;
}

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--bg-color-white);
}

a {
    color: var(--link-color);
    font-weight: 700;
    text-decoration: none;
}

a:active, a:hover {
    text-decoration: underline;
}

a:focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
}

.chat {
    height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    padding: 16px;
}

@media (min-width: 768px) {
    .chat {
        padding: 32px;
    }
}

@media (min-width: 1290px) {
    .chat {
        padding: 64px;
    }
}

.card {
    flex-grow: 1;
    border-radius: 16px 16px 0 0 !important;
    height: calc(100% + 2px);
    display: flex;
    flex-direction: column;
    font-family: Arial;
    font-size: 14px;
    border-width: 0;
}

.msg_card_body {
    overflow-y: auto;
    height: calc(100vh - 100px);
    background-color: var(--bg-color-white);
    border-left: 1px solid var(--light-border-color);
    border-right: 1px solid var(--light-border-color);
}

/* Add below your existing .msg_card_body styles */
.msg_card_body::-webkit-scrollbar {
    width: 8px; /* Adjust the width of the scrollbar as needed */
}

.msg_card_body::-webkit-scrollbar-track {
    background-color: var(--scrollbar-track-bg);
    border-radius: 12px;
}

.msg_card_body::-webkit-scrollbar-thumb {
    border-radius: 12px;
    background: var(--scrollbar-track-color);
}

.msg_card_body::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-track-color);
}

.msg_cotainer_send {
    margin-right: 16px;
}

input.form-control {
    background-color: var(--bg-color-white);
    color: var(--text-color);
    height: 48px;
    padding: 12px 16px;
    border: 1px solid var(--text-color) !important;
    border-radius: 4px !important;
    font-family: Arial;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.56px;
    box-shadow: none !important;
}

.input-group:focus-visible {
    outline: none;
}

.form-control:focus,
input:focus {
    outline: none !important;
}

.form-control:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--focus-color) !important;
    outline-offset: -1px !important;
}

.form-control::placeholder {
    color: var(--text-color);
}

button.send_btn {
    border-radius: 46px !important;
    border: 1px solid var(--btn-bg-color);
    background: var(--btn-bg-color);
    color: var(--btn-text-color);
    cursor: pointer;
    gap: 8px;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    display: flex;
    padding: 12px 20px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    margin-left: 16px;
    min-width: 60px;

}


button.send_btn:focus-visible, button:focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
}

.btn-arrow {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cg id='Send'%3E%3Cpath id='Vector (Stroke)' fill-rule='evenodd' clip-rule='evenodd' d='M19.7484 1.48739C19.8541 1.13502 19.7578 0.753063 19.4977 0.492931C19.2375 0.232799 18.8556 0.136501 18.5032 0.242211L1.98158 5.1987C-0.379781 5.90711 -0.398851 9.24412 1.95426 9.97947L8.09284 11.8978L10.0111 18.0363C10.7465 20.3895 14.0835 20.3704 14.7919 18.009L19.7484 1.48739ZM11.9201 17.4398L10.026 11.3788L16.693 4.71181L12.8763 17.4343C12.7346 17.9066 12.0672 17.9104 11.9201 17.4398ZM8.61182 9.96457L15.2788 3.2976L2.55628 7.11436C2.08401 7.25604 2.08019 7.92344 2.55081 8.07051L8.61182 9.96457Z' fill='white'/%3E%3C/g%3E%3C/svg%3E");
}

@media (min-width: 1290px) {
    .btn-text {
        font-family: Arial;
        font-size: 16px;
        font-weight: 700;
        line-height: 150%;
        letter-spacing: 0.32px;
    }
}


/* Adjustments for message bubbles*/
.msg_cotainer, .msg_cotainer_send {
    border-radius: 12px;
    padding: 16px;
    line-height: 150%;
    letter-spacing: 0.28px;
    margin-bottom: 20px;
    position: relative;
    max-width: 80%;
}

.msg_cotainer {
    background-color: var(--cold-gray);
    margin-right: auto;
    text-align: left;
    position: relative;
    max-width: 80%;
    margin-left: 16px;
}

.msg_cotainer_send {
    margin-left: auto;
    text-align: right;
    position: relative;
    max-width: 80%;
    color: var(--text-color-white);
    background: var(--gradient-bg);
}

/* Timestamp styling and re-positioning outside the message bubble */
.msg_time, .msg_time_send {
    font-size: 12px;
    line-height: 150%;
    color: var(--msg-time-color);
    position: absolute;
    bottom: -25px;
}

.msg_cotainer .msg_time {
    left: 0;
}

.msg_cotainer_send .msg_time_send {
    right: 0;
}

.card-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--gradient-bg);
    border-radius: 16px 16px 0 0 !important;
    border-bottom: 50px !important;
}

.title {
    display: flex;
    flex-direction: column;
    margin-left: 18px;
    color: var(--text-color-white);
}

.title-main {
    font-family: "myriad-pro";
    font-size: 22px;
    font-weight: 700;
    line-height: 135%;
    letter-spacing: 0.48px;
}

.title-sub {
    font-family: Arial;
    font-size: 14px;
    line-height: 140%;
    letter-spacing: 0.28px;
    opacity: 0.85;
}

@media (min-width: 540px) {
    .title-main {
        font-size: 28px;
    }

    .title-sub {
        font-size: 16px;
    }
}

.bd-highlight {
    align-items: center;
}

.card-footer {
    margin-top: auto;
    position: fixed;
    bottom: 16px;
    width: calc(100vw - 56px);
    background-color: var(--cold-gray);
    border-radius: 0 0 16px 16px !important;;
    border-right: 1px solid var(--light-border-color);
    border-bottom: 1px solid var(--light-border-color);
    border-left: 1px solid var(--light-border-color);
}

@media (min-width: 768px) {
    .card-footer {
        bottom: 32px;
        width: calc(100vw - 152px);
    }
}

@media (min-width: 768px) {
    .card-footer {
        width: calc(100vw - 88px);
    }
}

@media (min-width: 1290px) {
    .card-footer {
        bottom: 64px;
        width: calc(100vw - 152px);
    }
}

/* Logo positioning */
#logo {
    display: none; /* logo is hidden */
    position: fixed;
    top: 0;
    right: 100px;
    width: 100px; /* Adjust the width as necessary */
    height: auto; /* Keeps the aspect ratio of the image */
    z-index: 1000; /* Ensures the logo stays on top. Adjust the value as needed. */
}

/* Jumping Dots for chatbot typing indication */
.jumping-dots span {
    position: relative;
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--jumping-dots-color);
    margin-right: 3px;
    animation: jump 1s infinite;
}

.jumping-dots .dot-1 { animation-delay: 200ms; }
.jumping-dots .dot-2 { animation-delay: 400ms; }
.jumping-dots .dot-3 { animation-delay: 600ms; }
.jumping-dots .dot-3 { animation-delay: 800ms; }

@keyframes jump {
    0%, 40% { bottom: 0; }
    20% { bottom: 5px; }
}

.d-flex.align-items-custom {
    align-items: flex-end; /* Aligns children at the end of the container */
}