.fl-chat-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: 1000px;
    width: 100vw;
    margin: 40px auto 0;
    overflow: hidden;
    font-family: var(--font-primary);
/*    padding-bottom:52px;*/
}

.fl-chat-edit-actions {
    display: flex;
    gap: 10px;
}

.fl-chat-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: 1800px;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    font-family: var(--font-primary);
}


.fl-chat-history {
    flex: 1;
    padding: 10px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    scrollbar-width: none;
    height: 100%;
    padding-bottom: 150px; 
}

.fl-chat-intro-text {
    font-family: var(--font-primary);
    font-weight: 300;
    color: var(--col-flint);
    font-size: 1.5em;
    line-height: 2rem;
}

.fl-chat-edit-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fl-editable-chat-textarea {
    width: 100%;
    min-height: 60px;
    padding: 8px;
    resize: none;
    overflow: hidden;
    border: none;
    border-radius: 10px;
    resize: none;
    background-color: #fafafa;
    font-size: 0.9rem;
}

    .fl-editable-chat-textarea:focus {
        outline: none;
    }

.fl-chat-bubble-actions {
    display: flex;
    justify-content: end;
}


    .fl-chat-bubble-actions button {
        background: none;
        border: none;
        cursor: pointer;
        font-size: 0.9em;
        background: none;
        border-radius: 50%;
        width: 32px;
        height: 32px;
    }

        .fl-chat-bubble-actions button:hover {
            background-color: var(--col-white);
        }

.fl-chat-user:has(.fl-editable-chat-textarea) {
    min-width: 90%;
}

    .fl-chat-user:has(.fl-editable-chat-textarea) .fl-editable-chat-textarea {
        background-color: white;
        border-radius: 0;
    }

.fl-chat-options {
    display: flex;
    justify-content: center;
    gap: 8px;
}



.fl-chat-assistant {
    position: relative;
    padding-left: 40px;
    font-family: var(--font-primary);
    color: var(--col-flint);
    line-height: normal;
    font-weight: 400;
    line-height: 1.5;
}

    .fl-chat-assistant::before {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='10' fill='%234c4c4c'/%3E%3Ccircle cx='9.94629' cy='7.86355' r='1.82277' transform='rotate(45 9.94629 7.86355)' fill='white'/%3E%3Ccircle cx='12.5963' cy='11.746' r='1.82277' transform='rotate(45 12.5963 11.746)' fill='white'/%3E%3Ccircle cx='7.62842' cy='11.7112' r='1.82277' transform='rotate(45 7.62842 11.7112)' fill='white'/%3E%3C/svg%3E");
        position: absolute;
        left: 0;
        width: 30px;
        height: 30px;
    }

    .fl-chat-assistant > h1 {
        font-weight: 600;
        font-size: 1.8rem;
        line-height: normal;
        padding-bottom: 0.5em;
    }

    .fl-chat-assistant h2 {
        font-size: 1.3rem;
        padding-bottom: 1.2rem;
    }

    .fl-chat-assistant h3 {
        font-size: 1.3rem;
        padding-bottom: 1.2rem;
    }



.fl-chat-asistant ul {
    margin-left: 20px;
}

.fl-chat-assistant ul li {
    font-size: 1rem;
    line-height: 1.2rem;
    margin-bottom: 10px;
}

.fl-chat-assistant ol {
    margin-left: 20px;
}

    .fl-chat-assistant ol li {
        font-size: 1rem;
        line-height: 1.2rem;
        margin-bottom: 10px;
    }

.fl-chat-assistant > p {
    font-size: 1rem;
    line-height: 1.5;
}


.fl-chat-user {
    max-width: 80%;
    background: var(--col-light-grey);
    place-self: end;
    padding: 20px;
    border-radius: 20px 20px 20px 0;
}

    .fl-chat-user p {
        line-height: 1.4rem;
        font-size: .9rem;
        color: var(--col-flint);
        margin-bottom:0 !important;
    }

.fl-chat-playground {
    max-width: 100%;
    margin-right: 50px;
    margin-left: 50px;
}

.fl-chat-100 {
    min-width: 100%;
}

.fl-chat-message-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0 auto;
    width: 100%;
    background: rgba(var(--col-ivory-rgb), 0.4);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    mask-image: radial-gradient(ellipse at center, black 0%, black 60%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 0%, black 60%, transparent 100%);
}

.fl-chat-message-container {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 10px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    border-radius: 20px;
    width: 100%;
    margin: auto;
    max-width: 650px;
    margin-bottom: 30px;
    margin-top: 25px;
    z-index: 1000;
    background-color: var(--col-white);
}

.fl-chat-message-input {
    flex-grow: 1;
    min-height: 48px;
    padding-left: 5px;
    padding-right: 5px;
    font-size: .9rem;
    background-color: white;
    font-family: 'Roboto';
}

    .fl-chat-message-input input {
        width: 100%;
        border: none;
        background: transparent;
        outline: none;
        font-size: 12px;
    }


.fl-chat-input {
    flex: 1;
    background-color: white;
    border: none;
    border-radius: 30px;
    padding: 15px;
    resize: none;
    height: auto;
    min-height: 52px;
    max-height: 200px;
    box-sizing: border-box;
    font-family: 'Roboto';
    font-size: .9rem;
    overflow-y: auto;
    field-sizing: content; /* Modern browsers - auto-grow */
}


    .fl-chat-input:focus {
        outline: none;
    }

.fl-chat-button-container {
    display: flex;
    align-items: center;
    padding: 10px;
    padding-left: 20px;
    background: var(--col-white);
    
}

    .fl-chat-button-container > p {
        font-size: 14px;
        color: darkgrey;
    }


.fl-chat-context-menu {
    position: absolute;
    bottom: 100%;
}

.fl-chat-button {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    border-radius: 50%;
    border: none;
    background-color: #000;
    color: white;
    cursor: pointer;
    align-self: flex-end;
    flex-shrink: 0;
    margin: 10px;
}

.fl-chat-send-button::before {
    content: "↑";
    font-size: 20px;
    color: white;
    top: -2px;
    position: relative;
}

.fl-chat-extra-button::before {
    content: "?";
    font-size: 1rem;
    color: white;
    position: relative;
}

.fl-chat-button:hover {
    background-color: var(--col-mid-emerald);
}

.fl-chat-context-menu button {
    margin-left: 10px;
    font-size: 0.8rem;
    padding: 8px 20px 8px 20px;
    background-color: black;
    border: none;
    color: white;
    font-family: var(--font-primary);
    border-radius: 40px;
    word-wrap: normal;
    width: 250px;
    margin: 5px;
    margin-left: calc(-50% + 62px);
    box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}

    .fl-chat-context-menu button:hover {
        background-color: var(--col-lapis);
        box-shadow: none;
    }


/*chat approver*/
.fl-chat-approver-container {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    background-color: white;
    font-family: var(--font-primary);
    padding-top: 50px;
    padding-right: 100px;
}



    .fl-chat-approver-container .fl-chat-assistant {
        width: 100% !important;
    }

      /*  .fl-chat-approver-container .fl-chat-assistant > p {
            width: 60% !important;
        }*/

.fl-wide-left-nav {
    width: 444px;
    margin-top: 120px;
    margin-left: 10px;
}

.fl-chat-options-approve {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    position: relative;
    top: -85px;
    margin-left: 100px;
}

.fl-wide-nav-btn {
    padding: 10px;
    display: block;
    color: white;
}

.fl-chat-history blockquote {
    background-color: var(--col-light-grey);
    padding: 40px;
    border-radius: 20px;
    margin: 30px;
    margin-bottom: 0;
    padding-bottom: 90px;
}

.fl-block-button {
    border: none;
    text-decoration: underline;
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 500;
    background-color: transparent;
    color: var(--flint);
    text-underline-position: under;
    margin: 0;
    padding: 0;
}

.fl-block-title {
    font-size: 1.2rem;
    font-weight: 600;
    font-family: var(--font-secondary);
}

.fl-block-button i {
    padding-right: 10px;
}


.fl-approve-menu-btn {
    border: none;
    background-color: transparent;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
}

.fl-approve-menu-btn-active {
    border: none;
    background-color: transparent;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}


.fl-approve-menu-btn-done {
    border: none;
    background-color: transparent;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
}

.fl-approve-menu-btn .fl-nav-num {
    background-color: white;
    border-radius: 50%;
    display: flex;
    color: white;
    min-width: 30px;
    height: 30px;
    padding: 0;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: solid 1px var(--col-flint);
}

.fl-approve-menu-btn .fl-nav-text {
    color: var(--col-flynt);
    font-weight: 300;
    font-size: 0.9rem;
}

.fl-approve-menu-btn .fl-nav-num {
    color: var(--col-mid-grey);
}

.fl-approve-menu-btn-active .fl-nav-num {
    background-color: var(--col-lapis);
    border-radius: 50%;
    display: flex;
    color: white;
    min-width: 20px;
    height: 20px;
    padding: 0;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    left: 5px;
    margin-right: 10px;
}

    /* Ping effect localized */
    .fl-approve-menu-btn-active .fl-nav-num::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        transform: translate(-50%, -50%) scale(1);
        background: rgb(var(--col-lapis-rgb) / 0.25);
        animation: ping 1.3s ease-out infinite;
        pointer-events: none;
    }

@keyframes ping {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    60% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.5;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.4);
        opacity: 0.1;
    }
}


.fl-approve-menu-btn-active .fl-nav-text {
    font-weight: 400;
}

.fl-approve-menu-btn-done .fl-nav-num {
    display: flex;
    background-color: var(--col-mid-grey);
    color: var(--flint);
    min-width: 30px;
    height: 30px;
    padding: 0;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 50%;
    border: solid 1px black;
    font-weight: 900;
    font-size: .7rem;
}





.fl-mini-underline {
    min-width: 53px;
    max-width: 53px;
    margin: 0 auto;
    height: 2px;
    background-color: black;
}