:root {

    /* ============================
       1. CORE COLORS (unique only)
       ============================ */

    /*
    --base-white:      #ffffff;
    --base-offwhite:   #f4f8f4;
    --base-lightgray:  #eeeeee;
    --base-gray-mid:   #777777;
    --base-black:      #000000;

    
    --base-lime:       #97DB4F;
    --base-teal:       #004d64;
    --base-blue:       #99cddf;

    
    --base-green-dark: #46A049;
    --base-blue-light: #82dbe4;
    --base-green-soft: #8deb86;

    
    --chat-mint:       #E6F5CC;
    --chat-pink:       #FFE6EE;
    --chat-purple:     #E8E6FF;
*/


    /* https://coolors.co/palette/f0ead2-dde5b6-adc178-a98467-6c584c  */
    /*
    --base-white:      #ffffff;
    --base-offwhite:   #f4f8f4;
    --base-lightgray:  #eeeeee;
    --base-gray-mid:   #777777;
    --base-black:      #000000;

    --base-lime:       #dde5b6;
    --base-teal:       #6c584c;
    --base-blue:       #f0ead2;

    --base-green-dark: #a98467;
    --base-blue-light: #adc178;
    --base-green-soft: #dde5b6;

    --chat-mint:       #f0ead2;
    --chat-pink:       #dde5b6;
    --chat-purple:     #f0ead2;
*/

    /* https://coolors.co/palette/03045e-023e8a-0077b6-0096c7-00b4d8-48cae4-90e0ef-ade8f4-caf0f8 */
    /*
    --base-white:      #ffffff;
    --base-offwhite:   #90E0EF;
    --base-lightgray:  #ADE8F4;
    --base-gray-mid:   #CAF0F8;
    --base-black:      #000000;

    --base-lime:       #00B4D8;
    --base-teal:       #03045E;
    --base-blue:       #48CAE4;

    --base-green-dark: #0077B6;
    --base-blue-light: #ADE8F4;
    --base-green-soft: #48CAE4;

    --chat-mint:       #90E0EF;
    --chat-pink:       #ADE8F4;
    --chat-purple:     #CAF0F8;
*/

    /*
--base-white:      #ffffff;
--base-offwhite:   #f4f8f4;
--base-lightgray:  #eeeeee;

--chat-mint:       #E6F5CC;
--chat-pink:       #FFE6EE;
--chat-purple:     #E8E6FF;

--base-blue-light: #82dbe4;
--base-green-soft: #8deb86;

--base-blue:       #99cddf;
--base-lime:       #97DB4F;

--base-gray-mid:   #777777;

--base-green-dark: #46A049;
--base-teal:       #004d64;

--base-black:      #000000;
*/

    --base-white: #fff;
    /* lightest cool gray-blue */
    --base-offwhite: #eee;
    --base-lightgray: #5c677d;

    --chat-mint: #33415c;
    /* soft neutral chat tone */
    --chat-pink: #0466c8;
    /* brighter chat tone */
    --chat-purple: #0353a4;
    /* alternate cool tone */

    --base-blue-light: #0466c8;
    /* vibrant light blue */
    --base-green-soft: #0353a4;
    /* deep aqua-blue */

    --base-blue: #023e7d;
    /* mid-blue */
    --base-lime: #D1B566;
    /* renamed: used as mid-dark brand tone */

    --base-gray-mid: #001845;
    /* deep navy */
    --base-green-dark: #001233;
    /* darker navy */

    --base-teal: #001233;
    /* teal slot now cool-night color */
    --base-black: #001233;
    /* darkest */






    /* ===========================================================
       2. FUNCTIONAL COLOR GENERATORS
       =========================================================== */

    /* ► whites (glass tiers) */
    --white-02: rgb(from var(--base-white) r g b / .02);
    --white-04: rgb(from var(--base-white) r g b / .04);
    --white-08: rgb(from var(--base-white) r g b / .08);
    --white-10: rgb(from var(--base-white) r g b / .10);
    --white-15: rgb(from var(--base-white) r g b / .15);

    /* ► lime */
    --lime-light: color-mix(in srgb, var(--base-lime), white 40%);
    --lime-mid: var(--base-lime);
    --lime-dark: color-mix(in srgb, var(--base-lime), black 25%);

    --lime-glass-1: rgb(from var(--base-lime) r g b / .18);
    --lime-glass-2: rgb(from var(--base-lime) r g b / .45);

    /* ► teal */
    --teal-light: color-mix(in srgb, var(--base-teal), white 25%);
    --teal-mid: var(--base-teal);
    --teal-dark: color-mix(in srgb, var(--base-teal), black 40%);

    --teal-glass-1: rgb(from var(--base-teal) r g b / .90);
    --teal-glass-2: rgb(from var(--base-teal) r g b / .60);

    /* ► blue */
    --blue-light-fn: color-mix(in srgb, var(--base-blue), white 30%);
    --blue-mid: var(--base-blue);
    --blue-dark: color-mix(in srgb, var(--base-blue), black 25%);

    /* ► shadows (from black) */
    --shadow-10: rgb(0 0 0 / .10);
    --shadow-15: rgb(0 0 0 / .15);
    --shadow-20: rgb(0 0 0 / .20);
    --shadow-30: rgb(0 0 0 / .30);



    /* ===========================================================
       3. LEGACY VARIABLES (mapped to functional colors)
       =========================================================== */

    /* TEXT */
    --c_color_5: var(--base-white);
    --c_color_6: var(--base-white);
    --c_color_12: var(--base-lightgray);
    --c_color_7: var(--base-offwhite);
    --c_color_1: var(--base-offwhite);

    --c_color_8: var(--lime-light);
    --c_color_9: var(--lime-mid);
    --c_color_10: var(--lime-dark);
    --c_color_4: var(--lime-mid);

    --c_color_11: var(--blue-mid);
    --c_color_13: var(--base-gray-mid);

    --c_color_2: var(--base-black);
    --c_color_3: var(--blue-dark);


    /* BACKGROUNDS */
    --c_background_12: var(--white-02);
    --c_background_11: var(--white-08);
    --c_background_5: var(--white-10);
    --c_background_7: var(--white-15);
    --c_background_14: var(--white-04);

    --c_background_15: var(--lime-glass-1);
    --c_background_10: var(--lime-mid);
    --c_background_18: var(--base-green-soft);

    --c_background_17: var(--base-blue-light);

    --c_background_1: var(--teal-mid);
    --c_background_8: var(--teal-glass-1);
    --c_background_2: var(--teal-light);
    --c_background_9: var(--teal-glass-2);

    --c_background_4: rgb(0 0 0 / .50);
    --c_background_6: rgb(0 0 0 / .20);
    --c_background_13: rgb(0 0 0 / .18);

    --c_background_3: var(--lime-mid);
    --c_background_16: var(--base-green-dark);


    /* BORDERS */
    --c_border_5: var(--base-white);
    --c_border_3: var(--white-10);
    --c_border_7: var(--white-15);
    --c_border_8: var(--white-15);
    --c_border_9: var(--white-10);
    --c_border_4: var(--white-15);

    --c_border_2: var(--base-lightgray);
    --c_border_6: var(--lime-mid);
    --c_border_1: var(--lime-mid);
    --c_border_10: var(--lime-glass-2);


    /* SHADOWS */
    --c_shadow_1: var(--shadow-10);
    --c_shadow_2: var(--shadow-30);
    --c_shadow_3: var(--shadow-15);
    --c_shadow_4: var(--shadow-20);


    /* CHAT */
    --side1: var(--chat-mint);
    --side2: var(--chat-pink);
    --mediator: var(--chat-purple);
}



/* ===========================
   generic.css  (shared)
   =========================== */


/* BASE / LAYOUT */
html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: 'Rubik', sans-serif;
    font-size: 1.2em;
    font-weight: 200;
    color: var(--c_color_1);
    min-height: 100vh;
    background: linear-gradient(to bottom, var(--c_background_1), var(--c_background_2)) no-repeat fixed;
    background-size: cover;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: inherit;
    color: inherit;
}

.content {
    margin-top: 40px;
}

@media (max-width: 991.98px) {
    .content {
        margin-top: 0 !important;
    }
}

.by {
    color: var(--c_color_1);
    text-decoration: none;
}

textarea {
    font-weight: 200 !important;
}



/* BUTTONS */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:disabled {
    background-color: var(--c_background_3);
    border-color: var(--c_border_1);
    color: var(--c_color_2);
    border-radius: 30px;
    padding: 15px;
}

.btn-round {
    background-color: var(--c_background_3);
    border-color: var(--c_border_1);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.img-round {
    width: 60%;
    height: 60%;
    object-fit: contain;
}

/* OVERLAY (THINKING STATE) */
.centered-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    background-color: var(--c_background_4);
}

#flashingText {
    font-size: 20px;
    font-weight: bold;
    visibility: hidden;
    text-align: center;
    padding: 5px;
}

.alert-info {
    border-color: var(--c_border_2);
}

/* TABLE VIEW (AVATARS + BUBBLES) */



@media (max-width: 991.98px) {
    body {
        padding-top: 0 !important;
        /* kill the gap above nav */
    }

    .bubble,
    {
    font-size: 75%;
    /* scale down bubble text */
}
}




@media (max-width: 768px) {
    #table-anim {
        width: 50% !important;
        height: auto !important;
    }
}

.bubble {
    display: inline-block;

    color: var(--c_color_3);
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 2px 5px var(--c_shadow_1);
    text-align: start;
    max-width: 100%;
    white-space: normal;
    word-wrap: break-word;
}




@media (max-width:500px) {
    /* keeping commented responsive tweaks as-is */
}

/* BOOTSTRAP REVIEW POPOVER (center table click) */


/* Review popover header styling */
.popover-header {
    padding-right: 20px;
    /* more breathing room on right */
}





/* NEW VERTICAL CHAT LIST (PUBLIC VIEW) */
.chat-list {
    display: grid;
    gap: 14px;
    padding: 8px 4px;
    list-style: none;
    margin: 0;
}






#mediator-bubble,
#mediator-avatar {
    display: none;
}

/* subtle coloring per side */

.side1 .bubble,
.side1 {
    background: var(--side1);
    border-color: var(--side1);
}

.side2 .bubble,
.side2 {
    background: var(--side2);
    border-color: var(--side2);
}



#mediator-bubble {
    margin-bottom: 10px;
}

/* home page */
.home-section {
    padding: 60px 0;
}

.home-section-light,
.home-section-dark {
    border-radius: 12px;
    padding: 40px;
    margin-bottom: 40px;
}

.home-section-light {
    background-color: var(--c_background_5);
}

.home-section-dark {
    background-color: var(--c_background_6);
}

.home-section h1,
.home-section h2 {
    color: var(--c_color_4);
    font-weight: 700;
}

.home-section p {
    color: var(--c_color_1);
}

.feature-card {
    background-color: var(--c_background_7);
    border: 1px solid var(--c_border_3);
    border-radius: 12px;
    padding: 20px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px var(--c_shadow_2);
}

.hero {
    padding: 80px 0;

    text-align: center;
}

.hero h1 {
    color: var(--c_color_4);
    font-size: 2.5rem;
}

.hero p {
    color: var(--c_color_1);
    font-size: 1.2rem;
}

.testimonial {
    background-color: var(--c_background_5);
    border-left: 4px solid var(--c_border_1);
    /* flipped in rtl.css */
    padding: 20px;
    border-radius: 8px;
    color: var(--c_color_1);
    font-style: italic;
}

.home-section p,
.home-section li {
    color: var(--c_color_5);
}

.home-section h1,
.home-section h2,
.home-section h3 {
    color: var(--c_color_4);
}




.btn-outline-secondary {
    color: var(--c_color_6);
    border-color: var(--c_border_5);
}

.btn-outline-secondary:hover {
    background-color: var(--c_background_3);
    color: var(--c_color_2);
    border-color: var(--c_border_1);
}

.feature-card {
    background-color: var(--c_background_5);
    border-radius: 12px;
    padding: 20px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    color: var(--c_color_6);
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px var(--c_shadow_2);
}



@media (max-width: 768px) {

    .home-section,
    .home-section-light,
    .home-section-dark {
        padding: 30px 15px;
    }
}

.hero img {
    max-width: 100%;
    height: auto;

}

.section-divider {
    height: 2px;
    background: var(--c_background_5);
    margin: 40px auto;
    width: 60%;
}

.hero .btn-primary:hover {
    background-color: var(--c_background_10);
    border-color: var(--c_border_6);
    transform: translateY(-2px);
}

/* use logical padding so both LTR/RTL are fine */
.home-section ul {
    padding-inline-start: 1.2em;
    list-style-position: inside;
}

/* CHATS TABLE (admin right column) */
.card-ghost {
    background: var(--c_background_11);
    border: 1px solid var(--c_border_7);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 20px var(--c_shadow_3);
    backdrop-filter: blur(2px);
}

.card-ghost .card-header {
    background: linear-gradient(to left, var(--c_background_11), var(--c_background_12));
    color: var(--c_color_1);
    font-weight: 700;
    border-bottom: 1px solid var(--c_border_8);
}

#userChatsTable {
    color: var(--c_color_7);
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    width: 100%;
}

/* ✅ restored shared table cell styling */
#userChatsTable th,
#userChatsTable td {
    padding: 12px 16px !important;
    vertical-align: middle;
    border-color: var(--c_border_9) !important;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.card-ghost .table-responsive {
    overflow-y: auto;
    overflow-x: auto;
}

#userChatsTable thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--c_background_13) !important;
    color: var(--c_color_1);
    font-weight: 700;
}

/* zebra + hover */
#userChatsTable tbody tr:nth-of-type(odd) {
    background: var(--c_background_14);
}

#userChatsTable tbody tr:nth-of-type(even) {
    background: var(--c_background_12);
}


#userChatsTable tbody tr:hover td,
#userChatsTable tbody tr:hover td a {
    color: var(--c_color_4) !important;
    cursor: pointer;
}

/* thread link */
#userChatsTable tbody td:first-child a {
    color: var(--c_color_4);
    text-decoration: none;
    font-weight: 500;
}

#userChatsTable tbody td:first-child a:hover {
    text-decoration: underline;
}

/* numeric pill */
#userChatsTable {
    display: inline-block;
    min-width: 2.2em;
    padding: .25rem .55rem;
    border-radius: 999px;
    text-align: center;
    color: var(--c_color_8);

}

#userChatsTable tbody tr:active {
    transform: scale(0.999);
}

#userChatsTable {
    text-align: center;
}

/* nav */
@media (min-width: 992px) {
    body {
        padding-top: 72px;
    }
}


.top-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1030;
    background: var(--c_background_11);
    border-bottom: 1px solid var(--c_border_8);
    backdrop-filter: blur(6px);
    padding: 8px 16px;
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-right,
{
display: flex;
align-items: center;
gap: 10px;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--c_color_4);
    font-weight: 700;
    text-decoration: none;
}

.nav-logo img {
    height: 32px;
}

.top-nav.navbar {
    background: var(--c_background_11);
    border-bottom: 1px solid var(--c_border_8);
    backdrop-filter: blur(6px);
}

/* Normalize language select height to match buttons */
#mainNav select,
#mainNav .form-select {
    height: calc(2.4rem + 2px);
    /* same as Bootstrap .btn */
    padding: 0.375rem 0.75rem;
    /* match btn padding */
    line-height: 1.5;
    border-radius: 0.375rem;
    /* same rounding */
    display: inline-block;
    vertical-align: middle;
}

#mainNav .btn,
#mainNav .form-select {
    align-self: center;
}


/* mobile navbar */
@media (max-width: 991.98px) {
    #mainNav.collapse: not(.show) {
        display: none !important;
    }

    #mainNav.collapse.show {
        display: grid !important;
        grid-template-columns: 1fr;
        row-gap: .5rem;
        margin-top: .5rem;
    }

    /* reset Bootstrap ms-/me- utilities inside drawer */
    #mainNav .ms-1,
    #mainNav .ms-2,
    #mainNav .ms-3,
    #mainNav .ms-4,
    #mainNav .ms-5,
    #mainNav .me-1,
    #mainNav .me-2,
    #mainNav .me-3,
    #mainNav .me-4,
    #mainNav .me-5 {
        margin: 0 !important;
    }

    #mainNav>* {
        width: 100% !important;
    }

    #mainNav .btn,
    #mainNav .form-select,
    #mainNav select {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
        text-align: center;
        margin-bottom: .5rem;
    }
}

/* desktop navbar */
@media (min-width: 992px) {
    #mainNav.collapse {
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        gap: .5rem;
        margin-top: 0;
    }

    #mainNav .btn,
    #mainNav select {
        display: inline-block;
        width: auto !important;
        text-align: start;
        margin: 0 .25rem;
    }
}

/* Mobile logo fixes */
/*
@media (max-width: 600px) {
    .nav-logo img {
        height: 26px;
       
    }

    .nav-logo .logo-text {
        font-size: 22px;
      
        line-height: 26px;
       
    }

    .nav-logo {
        gap: 4px;
        
    }
}
*/
@media (max-width: 600px) {

    /* stack nav items vertically in mobile */
    .nav-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }





    /* logo row: image + text side-by-side, smaller */
    .nav-right {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
    }

    .nav-right .nav-logo {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin-bottom: 4px;
    }

    .nav-right .nav-logo img {
        height: 16px !important;
        /* shrink image */
        width: auto;
    }

    .nav-right .nav-logo .logo-text {
        font-size: 25px !important;
        /* shrink text */
        line-height: 25px !important;
    }

    /* tagline centered under logo */
    .nav-right>span {
        display: block;
        width: 100%;
        font-size: 14px;
        margin-top: 4px;
    }
}



/* Mobile: stack logo image above text */
@media (max-width: 600px) {
    .nav-logo {
        flex-direction: column;
        /* stack vertically */
        align-items: center;
        /* center both image & text */
        gap: 2px;
        /* small space between image and text */
    }

    .nav-logo img {
        height: 28px;
        /* slightly smaller for mobile */
    }

    .nav-logo .logo-text {
        font-size: 22px;
        line-height: 26px;
    }
}


@media (max-width: 991.98px) {

    /* kill any fixed/sticky behavior coming from project or Bootstrap */
    .top-nav,
    .fixed-top,
    .sticky-top {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        z-index: auto !important;
    }

    /* remove offset added for fixed header */
    html,
    body {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* If the first element has a margin-top, neutralize it on mobile */
    body> :first-child {
        margin-top: 0 !important;
    }
}


/* home page */
/* Remove borders and any "3D" look from images */
img,
{
border: 0 !important;
outline: none;
box-shadow: none !important;
}

/* Remove shadows/frames that may wrap the hero image */
.hero .image-frame {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Hero layout & typography */
.hero {
    padding-block: 3rem;
}

.hero h1 {
    font-size: clamp(2rem, 2.8vw + 1rem, 3.25rem);
    line-height: 1.2;
    margin-bottom: .75rem;
}

.hero p.lead {
    font-size: clamp(1.05rem, 1.2vw + .7rem, 1.375rem);
    margin-bottom: 1rem;
}

.hero {
    font-size: 1rem;
    opacity: .9;
}

/* Ensure hero image scales nicely */
.hero img {
    display: block;
    height: auto;
    max-width: 100%;
}

/* Keyboard focus visibility without changing brand colors */
a.btn:focus {
    outline: 2px dashed currentColor;
    outline-offset: 2px;
}

.step-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: var(--c_background_18);
    /* matches theme primary */
    color: var(--c_color_16);
    font-size: 2rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    box-shadow: 0 2px 4px var(--c_shadow_4);
}

/* Global link styling, excluding .btn links */
a:not(.btn) {
    color: var(--c_color_4);
    text-decoration: none;
    font-weight: 500;
}

a:not(.btn):hover,
a:not(.btn):focus {
    color: var(--c_color_9);
    text-decoration: underline;
}

a:not(.btn):active {
    color: var(--c_color_10);
}

a:not(.btn):visited {
    color: var(--c_color_4);
}


/* kill underline in all states */
a.nav-logo,
a.nav-logo:link,
a.nav-logo:visited,
a.nav-logo:hover,
a.nav-logo:active,
a.nav-logo:focus {
    text-decoration: none !important;
    /* force remove */
    color: inherit !important;
    /* stop Bootstrap from recoloring */
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}

.nav-logo img {
    height: 30px;
    width: auto;
    display: block;
}

.nav-logo .logo-text {
    font-size: 50px;
    /* keep your text size */
    line-height: 50px;
    /* makes text sit flush vertically with image */
    color: var(--c_color_11);
}


#joint_meeting,
#separate_meeting,
#side1-inroom,
#side1-notinroom,
#side2-inroom,
#side2-notinroom {
    display: none;
}

#side1-inroom,
#side1-notinroom,
#side2-inroom,
#side2-notinroom {
    color: var(--c_color_12);
    font-size: 0.8em;

}





/* Equal height testimonials */
.home-section .row.g-4 {
    display: flex;
    align-items: stretch;
}

.home-section .row.g-4>[class*="col-"] {
    display: flex;
}

.home-section .testimonial {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* FEEDBACK */


.form-label {
    display: inline-block;
    font-size: 1.2em;
    margin-right: 6px;
    /* spacing before hint */
    padding-top: 20px;
    color: var(--c_color_4);
}




.hint {
    display: inline-block;
    font-size: 0.8em;
}


/*==========chat==========*/


/* Chat container */
.card.chat-body {

    border-radius: 10px;
}

/* The internal scrollable chat area */
.chat-body .card-body {
    padding: 1rem;
}

.chat-list {
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 1.1rem;
}

/* Every chat line */
.chat-list li {
    margin-bottom: 10px;
    overflow: auto;
    color: var(--c_color_3);
    text-align: start;
}

/* incoming/outgoing icon container */
.chat-list .chat-body {
    float: inline-start;
    width: 90%;
}

/* Chat bubble */
.chat-list .chat-message {
    border-radius: 20px;
    background: var(--c_background_17);
    padding: 10px 20px 10px 20px;
    display: inline-block;
    color: var(--c_color_3);
    position: relative;
}

/* arrow before element (direction set in rtl/ltr) */
.chat-list .chat-message:before {
    display: none !important;
}

/* outgoing bubble color */
.chat-list .out .chat-message {
    background: var(--c_background_18);
}

/* outgoing alignment (directional handled by rtl/ltr) */
/*
.chat-list .out .chat-body {
    float: inline-end;
    text-align: end;
}
*/
/* avatar images */
.chat-list img,
.who img {
    width: 40px;
    height: auto;
    border-radius: 50%;
}

/* list items inside markdown */
.lili {
    list-style-type: disc !important;
    list-style-position: inside !important;
    color: var(--c_color_3) !important;
}

/* sender name container */
.who {
    font-size: 0.9em;
    font-weight: 400;
    color: var(--c_color_13);
}

/* send button */
.btn-round {
    background-color: var(--c_background_3);
    border-color: var(--c_border_1);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.img-round {
    width: 60%;
    height: 60%;
    object-fit: contain;
}

/* Modal theme */
.modal-site .modal-content {
    background: var(--c_background_17);
    color: var(--c_color_3);
    border: 0;
    border-radius: 20px;
}

.modal-site .modal-header,
.modal-site .modal-footer {
    background: var(--c_background_2);
    color: var(--c_color_6);
    border: 0;
    border-radius: 20px 20px 0 0;
}

.modal-site .modal-footer {
    border-radius: 0 0 20px 20px;
}

.modal-site .btn-close {
    filter: invert(1) grayscale(100%);
    opacity: .85;
}

.modal-site .btn-close:hover {
    opacity: 1;
}

.desat {
    filter: saturate(0.5) hue-rotate(-20deg) brightness(0.95);
}