:root {
    --teal: #028C9E;
    --orange: #F79646;
    --ink: #37474F;
    --muted: #6b7b83;
    --ring: rgba(2,140,158,0.35);
    --err-bg: #FDECEC;
    --err-text: #9E1C1C;
    --row-bg: #F6F8F9;
    --tooltip-bg: #2f3336;
    --danger: #b22222; /* or the exact red you used for Delete folder */
    --tooltip-fg: #fff;
    --fab-shadow: 0 10px 26px rgba(0,0,0,.16), 0 2px 6px rgba(0,0,0,.08);
    --fab-shadow-hover: 0 16px 40px rgba(0,0,0,.22), 0 4px 10px rgba(0,0,0,.12);
}

@font-face {
    font-family: 'Cascadia Mono';
    src: url('/fonts/Inter/Inter.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ===== Global layout / typography ===== */
body,
header {
    margin-top: 0 !important;
    padding-top: 0 !important;
}



[hidden] {
    display: none !important;
}

html,
body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
     background: #F4F6F8;
    background: url('/images/svg/bg.svg') repeat;
    background-size: auto; /* full repetition */
}

main {
    flex: 1 0 auto;
}

body {
    font-family: -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
    color: #111;
}

.page-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    border: 1px solid #D0DAE2;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16,24,40,.05);
    transition: box-shadow .2s ease, transform .08s ease;
    padding: 8px 14px;
    background: linear-gradient( to bottom, rgba(2, 140, 158, 0.14) 0%, rgba(2, 140, 158, 0.08) 45%, rgba(255, 255, 255, 1) 100% );
    margin-bottom: 10px !important;
    margin-top: 2px;
}
.ix-myaccount h1 {
color: var(--ink);
}
/* Three-dots trigger */

.ix-folder-actions-trigger, .ix-folder-actions-trigger-two {

    background-color: #d6eefc !important;
    border: 1px solid rgba(2, 140, 158, 0.65); /* teal ring */
    box-shadow: 0 0 0 2px rgba(2, 140, 158, 0.18) !important;
    padding: 0.2rem;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.ix-folder-actions-trigger-Tree-structure {
    border-width: 0; 
    box-shadow: none !important;
    background-color: transparent !important ;
}

.ix-folder-actions-trigger {
    padding: 0.3rem;
}
.ix-folder-actions-trigger-two {
    padding: 0.2rem !important;

}
.ix-folder-actions-trigger-Tree-structure:hover {
    box-shadow: 0 0 0 2px rgba(2, 140, 158, 0.18) !important;
    background-color: #d6eefc !important;
}

    .ix-folder-actions-trigger-two:hover, .ix-folder-actions-trigger:hover {
        background-color: #badff5 !important; /* slightly deeper teal */
        border-color: rgba(2, 140, 158, 0.85); /* clearer ring */
        box-shadow: 0 0 0 2px rgba(2, 140, 158, 0.25), 0 2px 6px rgba(0, 0, 0, 0.08); /* subtle lift */
    }

        .ix-folder-actions-trigger-two:hover img, .ix-folder-actions-trigger:hover img {
            transform: scale(1.15);
        }
/*
.ix-export-header {
    padding: 0.45rem 0.65rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #5f7f8c;
    border-bottom: 1px solid rgba(2, 140, 158, 0.18);
    background-color: #f7fcff;
    cursor: default;
    user-select: none;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}
*/

.ix-export-header {
    padding: 0.45rem 0.65rem 0.25rem 0.65rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #5f7f8c;
    cursor: default;
    border-bottom: 1px solid rgba(2, 140, 158, 0.18);
    user-select: none;
}
.ix-export-dropdown {
    position: absolute;
    top: calc(100% + 0.3rem); /* a bit of gap under the button */
    right: 0; /* align with button’s right edge */
    left: auto;
    background: #ffffff;
    border-radius: 10px;
    min-width: 170px;
    padding: 0 0 0.25rem 0;
    border: 1px solid rgba(0,0,0,0.12);
    box-shadow: 0 12px 30px rgba(0,0,0,0.22);
    z-index: 511427483647 !important; /* well above everything inside the modal */
}


.ix-folder-actions-trigger img {
    width: 18px;
    height: 18px;
    transition: transform 0.15s ease;
}

.ix-folder-actions-trigger-two img {
    width: 16px;
    height: 16px;
    transition: transform 0.15s ease;
}





/* Make sure file inputs never show the blue outline */
input[type="file"]:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Page titles (used across portal pages) */
h1 {
    font-size: 2.5rem;
    line-height: 1.15;
    font-weight: 700;
    color: var(--ink);
}

h2 {
    font-size: 1.1rem;
    line-height: 1.35;
    font-weight: 700;
    color: var(--ink);
}

/* Keyboard focus */
:focus-visible {
    outline: 3px solid rgba(2,140,158,.45);
    outline-offset: 2px;
}

/* ===== Navbar ===== */
.navbar .container-fluid {
    position: relative;
    padding-right: 2rem !important;
    background-color: #3a4664 !important;
}
.brand-logo-badge {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 🎯 White spot that fades into navbar color */
    background: radial-gradient( circle at center, #ffffff 0%, #ffffff 38%, rgba(255, 255, 255, 0.65) 52%, rgba(255, 255, 255, 0.25) 65%, rgba(58, 70, 100, 0.0) 75% );
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.15));
    border-radius: 50%;
}


.container-fluid {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem ;
}

.navbar {
    padding-top: 0.05rem !important;
    padding-bottom: 0.1rem !important;
    margin-top: 0 !important;
}

/*.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    opacity: 0.7;
    text-decoration: underline;
}

.navbar-nav .nav-link.active {
    color: var(--teal);
    border-bottom: 2px solid var(--teal);
    text-decoration: none;
}*/

 /*Primary links: Contact / Help / About / Home*/ 
/*.navbar-links .nav-link {
    font-weight: 600;
    font-size: 0.92rem;
    border-radius: 999px;
    border: 1px solid transparent;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    letter-spacing: 0.02em;
    opacity: 0.85;
    padding: 0.2rem 0rem !important;
    margin-left: 1rem;
}

*/

 
/*--------------------------------------*/

/* ============ NAV: individual pills + underline hover ============ */

/* Space BETWEEN pills without touching layout */
.navbar-links .nav-item {
    margin-right: 0.4rem !important;
}

    /* Remove extra space on last item */
    .navbar-links .nav-item:last-child {
        margin-right: 0 !important;
    }


    /* Make each LI act like a pill container */
    .navbar-links .nav-item {
        background: rgba(255, 255, 255, 0.08) !important; /* the color you loved */
        border-radius: 10px !important;
        overflow: hidden !important; /* keeps underline/hover clean */
    }

    /* Link inside each pill */
.navbar-links .nav-link {
    position: relative !important;
    display: block !important;
    color: #e6e9f2 !important;
    background: transparent !important;
    padding: 0.48rem 0.75rem !important; /* tighter top/left like you asked */
    border-radius: 10px !important;
    font-weight: 500 !important;
    line-height: 1.1 !important;
    
    font-size: 0.92rem;
    transition: color 0.2s ease !important;
}
        .navbar-links .nav-link::after {
            content: "" !important;
            position: absolute !important;
            left: 50% !important;
            bottom: 0.22rem !important;
            width: 0 !important;
            height: 2px !important;
            background: #00bcd4 !important;
            transform: translateX(-50%) !important;
            transition: width 0.22s ease !important;
        }


        .navbar-links .nav-link:hover::after,
        .navbar-links .nav-link.active::after {
            width: calc(100% - 1.5rem) !important;
        }


            .navbar-links .nav-link:hover::after,
            .navbar-links .nav-link.active::after {
                width: calc(100% - 1.5rem) !important; /* full underline inside padding */
            }

    /* Optional: slightly “lift” pill on hover (subtle, modern) */
    .navbar-links .nav-item:hover {
        background: rgba(255, 255, 255, 0.10) !important;
    }



.navbar-text {
    color: white !important;
}









.navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding-right: 0;
    margin-right: 0;
}

    .navbar-brand:hover,
    .navbar-brand:focus {
        text-decoration: none;
        color: var(--ink);
    }

/* vertical divider between brand and links */
.nav-divider {
    width: 1px;
    height: 30px;
    margin: 0 1.25rem;
    background: linear-gradient( to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) );
    border-radius: 999px;
}



/* Right meta block (last visit + flags) */
.navbar-meta {
    margin-right: 0.75rem;
}

    .navbar-meta .navbar-text {
        font-size: 0.70rem;
        color: #6b7b83;
    }

.navbar-text {
    font-family: 'Cascadia Mono', monospace;
}

/* Brand tree + text */
.brand-logo-badge {
    width: 43px;
    height: 43px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 4px;
}




.brand-logo {
    max-height: 40px;
    width: auto;
    display: block;
    border-radius: 8px;
    margin-left: 7px;
}

.brand-text {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.1;
    margin-left: -2px;
}

.brand-title {
    font-weight: 600;
    color: #ffffff;
}


/* ===== Client account pill (Uploads + navbar variant) ===== */





/* Language flags with custom tooltip */
.lang-switcher .lang-flag img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: block;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
}

    .lang-switcher .lang-flag img:hover {
        opacity: 1;
        transform: translateY(-1px);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    }

/* Custom tooltip using data-tooltip */
.lang-flag {
    position: relative;
}

    .lang-flag::after {
        display: none !important;
        content: none !important;
    }

    .lang-flag:hover::after {
        display: none !important;
        content: none !important;
    }

    /* Active language */
    .lang-flag.active img {
        border: 2px solid var(--teal);
        border-radius: 50%;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    }

/* ===== Shared tooltip (Delete, Add, etc.) ===== */
#ix-tooltip {
    position: fixed;
    /*    pointer-events: none;
*/ /* inset: 0;  ❌ REMOVE THIS */

    left: 0;
    top: 0;
    /* keep your bubble */
    background-color: #37474F;
    /*background-color: rgba(55, 71, 79, 0.92);*/
    background-image: url("/images/svg/ix-security-legitimacy-patter.svg");
    background-repeat: repeat;
    background-size: 140px 140px; /* important so it doesn't look noisy */

    color: #fff;
    padding: 0.45rem 0.6rem;
    font-size: 12px;
    line-height: 1.35;
    border-radius: 10px;
    max-width: 320px;
    white-space: normal;
    word-break: break-word;
    width: auto;
    display: none;
    box-sizing: border-box;
    z-index: 9999 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,.2);
    pointer-events: none; /* ✅ allow mouse interaction */
}

    /* Arrow points DOWN (tooltip sits above the icon) */
    #ix-tooltip::after {
        content: "";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 100%;
        border-width: 6px 6px 0 6px;
        border-style: solid;
        border-color: #37474F transparent transparent transparent;
    }





/* ===== Footer ===== */
.ix-footer {
    margin-top: 2.5rem;
    background: #2B3338;
    color: #e5eaed;
    font-size: 0.875rem;
}

.ix-footer-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.75rem 1.5rem 1.25rem;
    display: flex;
    flex-wrap: nowrap;
    gap: 2.5rem;
    justify-content: center;
}

.ix-footer-col {
    flex: 0 0 280px;
    min-width: 0;
}

    .ix-footer-col:last-child {
        flex: 0 0 auto;
        width: auto;
    }

.ix-footer-col-brand {
    max-width: 320px;
}

.ix-footer-title {
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.ix-footer-text {
    margin: 0;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
}
/* ===== Navbar messages / notifications icons ===== */

.nav-icons {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem; /* small base spacing (badge will add what it needs) */
    margin: 0 0.75rem;
    overflow: visible;
}

.nav-icon-btn {
    position: relative;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    overflow: visible;
}

.nav-icon {
    width: 32px;
    height: 32px;
    color: #ffffff;
    opacity: 0.9;
    transition: opacity 0.15s ease, transform 0.12s ease;
  


    display: block;
    position: relative;
    z-index: 1;
    margin-top: -3px; /* keep your original vertical alignment */
}

.nav-icon-btn:hover .nav-icon,
.nav-icon-btn:focus-visible .nav-icon {
    opacity: 1;
    transform: translateY(-1px);
}

/* Red counter bubble */
.nav-badge {
    right: -4px;
    font-size: 0.68rem;
    align-items: center;
    justify-content: center;
    display: inline-flex;
    /* vertical overlap */
    position: relative;
    top: -9px;
    /* horizontal overlap + anchor:
       - the badge appears after the icon in flow
       - negative margin pulls it left over the icon
       - it still grows ONLY to the right */
    margin-left: -14px; /* 🔧 tune: -12px (less overlap) to -16px (more overlap) */
    min-width: 16px;
    height: 16px;
    padding: 0 6px;
    border-radius: 999px;
    background: #E53935;
    color: #fff;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 0 0 2px var(--ink);
    z-index: 5;
    pointer-events: none;
}

    /* Hide the bubble when count is zero */
    .nav-badge[data-count="0"] {
        display: none;
    }
/*--------------------------------------------------------------------------------------------------*/
/*-------------------------------------- FOOTER STYLES ---------------------------------------------*/
/*--------------------------------------------------------------------------------------------------*/

.ix-footer-heading {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.ix-footer-heading-icon {
    width: 24px !important;
    height: 24px !important;
    display: inline-block;
    filter: brightness(0) saturate(1000%) invert(1);
}

.ix-footer-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0.5rem;
}

    .ix-footer-list li {
        display: flex;
        align-items: flex-start;
        gap: 0.45rem;
        margin-bottom: 0.25rem;
        color: rgba(255, 255, 255, 0.85);
    }

        .ix-footer-list li span {
            line-height: 1.4;
        }

/* SVG bullet icon */
.ix-footer-bullet {
    width: 20px !important;
    height: 20px;
    flex-shrink: 0;
    margin-top: 0.25rem;
    filter: brightness(0) invert(1);
}

/* Security badges row */
.ix-footer-certifications {
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.ix-cert-badge {
    height: 70px;
    width: auto;
    display: block;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

    .ix-cert-badge:hover {
        transform: scale(1.05);
        opacity: 0.9;
    }

/* Portal links column */
.ix-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .ix-footer-links li + li {
        margin-top: 0.2rem;
    }

    .ix-footer-links a {
        color: rgba(255, 255, 255, 0.85);
        text-decoration: underline;
    }

        .ix-footer-links a:hover,
        .ix-footer-links a:focus {
            color: var(--teal);
        }

/* Bottom copyright bar */
.ix-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin-top: 0.75rem;
}

.ix-footer-bottom-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.5rem 1.5rem 0.9rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
}

/* Indent lists under headings */
.ix-footer-col-security .ix-footer-list {
    margin-left: 0.5rem;
}

.ix-footer-col-links .ix-footer-links {
    margin-left: 1.9rem;
}


/* ===== Working-folder delete modal (Uploads) ===== */
.wf-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

    .wf-modal-backdrop.d-none {
        display: none;
    }

.wf-modal {
    background: #1f262a;
    color: #fff;
    min-width: 360px;
    max-width: 480px;
    border-radius: 14px;
    padding: 1.25rem 1.5rem 1.15rem;
    box-shadow: 0 18px 46px rgba(0,0,0,0.45);
}

.wf-modal-title {
    margin: 0;
    padding: 0.95rem 1.1rem 0.75rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: rgba(2,140,158,1); /* brighter than body text */
    border-bottom: 1px solid rgba(255,255,255,0.10);
    letter-spacing: 0.2px;
    margin-bottom: .4rem;
    color: rgba(255, 255, 255, 0.92);
}

.wf-modal-body {
    padding: 0.85rem 1.1rem 0.25rem;
    font-size: .9rem;
    color: #eceff1;
    margin-bottom: .95rem;
}

.wf-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
}

.wf-modal-btn {
    border-radius: 999px;
    border: 1px solid transparent;
    padding: .36rem 1.05rem;
    font-size: .86rem;
    font-weight: 500;
    cursor: pointer;
}

.wf-modal-btn-secondary {
    background: transparent;
    color: #eceff1;
    border-color: #607d8b;
}

    .wf-modal-btn-secondary:hover {
        background: rgba(96,125,139,0.2);
    }

.wf-modal-btn-danger {
    background: #b22222;
    border-color: #b22222;
    color: #fff;
}

    .wf-modal-btn-danger:hover {
        filter: brightness(0.95);
    }


/* ===== Working folder chip + dropdown ===== */
.working-folder-shell {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-right: 1.2rem;
}

.working-folder-label-row {
    width: 100%;
    text-align: left;
    margin-bottom: .15rem;
}

.working-folder-label {
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
}

/* Container for chip + plus */
.working-folder-control {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    position: relative;
}

/* Chip that acts like a custom select */
.working-folder-toggle {
    background: #f4fbfc;
    border: 1px solid var(--teal);
    border-radius: 9px;
    padding: .35rem 1.9rem .35rem .9rem;
    min-width: 11.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    font-size: .9rem;
    color: var(--ink);
    font-weight: 500;
    cursor: pointer;
    position: relative;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.02);
    transition: box-shadow .15s ease, background .15s ease, border-color .15s ease;
}

    .working-folder-toggle::after {
        content: "▾";
        position: absolute;
        right: .55rem;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.1rem;
        color: var(--teal);
    }

    .working-folder-toggle:hover {
        background: #e8f6f8;
        box-shadow: 0 0 0 2px var(--ring);
    }

    .working-folder-toggle:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px var(--ring);
    }

.working-folder-current {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 1.1rem;
}

/* Main dropdown with folders */
.working-folder-pop {
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    background: #fff;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.14);
    min-width: 100%;
    z-index: 40;
    padding: .3rem .35rem .35rem;
    display: none; /* stays closed by default */
}

.working-folder-control.open .working-folder-pop {
    display: block;
}
/* ✅ Open the dropdown ONLY when the main chip (button) has focus,
   or when JS adds .open on click */
.working-folder-toggle:focus + .working-folder-pop,
.working-folder-control.open .working-folder-pop {
    display: block;
}



/* Folder rows inside dropdown */
.wf-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .45rem;
    padding: .28rem .45rem;
    border-radius: 7px;
    cursor: pointer;
    font-size: .9rem;
    color: var(--ink);
}

    .wf-row:hover {
        background: #E8F6F8;
    }

    .wf-row.active {
        background: #e8f6f8;
        font-weight: 600;
    }

.wf-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .8rem !important;
}

/* Delete icon inside row */
.wf-delete {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font-size: .9rem;
    line-height: 1;
    color: var(--muted);
}

    .wf-delete:hover {
        color: #b24545;
    }

/* Add working-folder button: SVG only, no container styling */
.working-folder-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-left: .75rem;
    border: none;
    background: transparent;
    cursor: pointer;
}

/* Plus icon itself */
.working-folder-add-icon {
    width: 34px;
    height: 34px;
    display: block;
    margin-left: -15px;
    color: var(--teal);
    transition: transform .12s ease, opacity .12s ease;
}

.working-folder-add:hover .working-folder-add-icon,
.working-folder-add:focus-visible .working-folder-add-icon {
    transform: translateY(-1px);
    opacity: 0.9;
}

/* Tooltip for Add button (positioned by JS) */
.wf-add-tooltip {
    position: fixed;
    padding: .35rem .65rem;
    font-size: .8rem;
    background: #37474F;
    color: #fff;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0,0,0,.2);
    white-space: nowrap;
    z-index: 980;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -2px);
    transition: opacity .12s ease, transform .12s ease;
}

    .wf-add-tooltip::after {
        content: "";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: -6px;
        border-width: 6px 6px 0 6px;
        border-style: solid;
        border-color: #263238 transparent transparent transparent;
    }




    .wf-add-tooltip.show {
        opacity: 1;
        transform: translate(-50%, -8px);
    }

/* Message row when there are no folders */
.wf-empty {
    padding: 0.4rem 0.55rem;
    font-size: 0.85rem;
    font-style: italic;
    color: var(--muted);
}

/* ===== "+" Year picker menu (3 years: prev, current, next) ===== */
.working-folder-year-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    background: #fff;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.18);
    padding: .3rem .35rem .35rem;
    min-width: 2rem !important;
    z-index: 41;
    display: none; /* default: hidden */
    
}

/* Show year menu when control has year-open */
.working-folder-control.year-open .working-folder-year-menu {
    display: block;
}

/* Buttons inside year menu */
.wf-year-option {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: .26rem .5rem;
    border-radius: 7px;
    border: none;
    background: transparent;
    font-size: .8rem;
    color: var(--ink);
    cursor: pointer;
    text-align: left;
}

    .wf-year-option + .wf-year-option {
        margin-top: .1rem;
    }

    .wf-year-option:hover,
    .wf-year-option:focus-visible {
        background: #E8F6F8;
        outline: none;
    }














/* Make sure it doesn’t crush on narrow screens */
@media (max-width: 900px) {
    .ix-sidebar-news {
        margin-top: 1rem;
    }

    .ix-news-slider {
        height: 130px;
    }
}

/*--------------------------------------------------------------------------------------------------*/
/*--------------------------------------- SIDEBAR NEWS CARD ----------------------------------------*/
/*--------------------------------------------------------------------------------------------------*/

.ix-sidebar-news {
    margin-top: .6rem;
    margin-left: -0.7rem;
    padding: 0.29rem 0.75rem;
    border-radius: 0px;
    background: transparent;
    border: 0px solid rgba(55, 71, 79, 0.12);
    border-top-width: 1px;
    /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
    */ position: relative;
    overflow: hidden;
    width: 107.5%;
}

/* Slider container */
.ix-news-slider {
    position: relative;
    width: 105.5%;
    margin-left: -0.5rem;
    background-color: #007786; /* slightly darker teal 0, 119, 134*/
    height: 200px;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 0.15rem 0.45rem rgba(0, 119, 134, 0.26);
}

/* Each slide fills the frame */
.ix-news-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    overflow: hidden;
    height: 100%;
}

    .ix-news-slide.is-active {
        opacity: 1;
    }

/* Navigation arrows (appear on hover) */
.ix-news-nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

.ix-sidebar-news:hover .ix-news-nav {
    opacity: 1;
}

.ix-news-nav-btn {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: none;
    background: rgba(15, 23, 42, 0.65);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
}

    .ix-news-nav-btn:hover {
        background: rgba(15, 23, 42, 0.85);
    }

.ix-news-nav-icon img {
    width: 30px;
    height: 30px;
    filter: brightness(0) invert(1);
}

/* Previous arrow */
.ix-news-nav-prev {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: auto;
}

/* Next arrow */
.ix-news-nav-next {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: auto;
}

/* The image-click overlay: entire slide area */
.ix-news-click-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    cursor: pointer;
    pointer-events: auto;
    background: transparent;
}

/* Image inside slide */
.ix-news-image {
    display: block;
    width: 100%;
    height: 100%;
}

/* Sidebar news header (logo + label) */
.ix-sidebar-news-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 0.45rem;
    margin-top: 0.45rem;
}

.ix-sidebar-news-logo {
    max-width: 140px;
    height: auto;
    display: block;
    margin-right: 0.5rem;
}

.ix-sidebar-news-label {
    margin-top: 0;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--teal);
    white-space: nowrap;
}

/*.ix-news-separator {
    width: 100%;
    height: 3px;
    margin: 0.3rem 0 0.7rem 0;
    background: linear-gradient( 90deg, transparent 0%, rgba(55,71,79,0.35) 18%, rgba(2,140,158,1) 50%, rgba(55,71,79,0.35) 82%, transparent 100% );
}*/
.ix-news-separator {
    width: 100%;
    height: 3px;
    margin: 0.5rem 0 0.7rem 0;
    background: linear-gradient( 90deg, transparent 0%, rgba(2,140,158,0.25) 20%, rgba(2,140,158,1) 50%, rgba(2,140,158,0.25) 80%, transparent 100% );
}


/* ===== Comment history modal ===== */

.ix-notes-history-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(3px) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}

.ix-notes-history-modal {
    width: min(44rem, 95vw); /* a bit wider */
    max-height: calc(100vh - 3rem); /* can grow, but never taller than viewport - margin */
    /*background: #ffffff;*/
    background: transparent; /* important: let inner layers control visuals */

    border-radius: 0.75rem;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.32);
    padding: 1.1rem 1.4rem 0.9rem;
    display: flex;
    flex-direction: column;
}



.ix-notes-history-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding-right: 0.25rem;
    font-size: 0.8rem;
    border-top: 1px solid rgba(55, 71, 79, 0.1);
    border-bottom: 1px solid rgba(55, 71, 79, 0.1);
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    max-height: calc(100vh - 8rem); /* safety so footer never disappears off-screen */
    position: relative; /* required for overlay */
    padding-top: 0.85rem;
    z-index: 10;
    background-color: #0f172a !important; /* your dark chat canvas */
    background-image: url("/images/svg/ix-security-legitimacy-patter.svg") !important;
    background-repeat: repeat !important;
    background-size: 180px 180px !important; /* 👈 this is the real fix */
    background-position: 0 0 !important;
    background-attachment: local !important; /* scrolls with the chat body */
}


#ix-consultlog-body {
    background-color: #F8FAFC !important; /* your dark chat canvas */
    background-image: none !important;
    padding: 0.2rem 0.6rem 1rem 0.6rem;

    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    text-align: justify;
}
#ix-consult-log-backdrop .ix-notes-history-modal {
    padding-bottom: 1rem !important;
}



.ix-notes-history-entry {
    padding: 0.25rem 0;
}

.ix-notes-history-timestamp {
    font-family: var(--mono-font, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-size: 0.78rem;
    color: rgba(55, 71, 79, 0.85);
    margin-right: 0.25rem;
}

.ix-notes-history-text {
    font-size: 0.8rem;
    color: #1f2933;
}

.ix-notes-history-footer {
    display: none !important;
    align-items: center;
    justify-content: space-between; /* extremes */
    padding-top: 0.75rem;
}
    .ix-notes-history-footer .ix-section-cancel {
        margin-right: auto;
        border-radius: 999px;
        padding: 0.35rem 1.35rem;
        font-size: 0.85rem;
        font-weight: 500;
        border: none;
        background: var(--teal);
        color: #ffffff;
        cursor: pointer;
    }


        .ix-notes-history-footer .ix-section-cancel:hover:not(:disabled),
        .ix-notes-history-footer .ix-section-cancel:focus-visible:not(:disabled) {
            background: #026f7e;
            box-shadow: 0 6px 16px rgba(2, 140, 158, 0.4);
            transform: translateY(-1px);
            outline: none;
        }

        .ix-notes-history-footer .ix-section-cancel:disabled {
            background: rgba(148, 163, 184, 0.45);
            color: rgba(226, 232, 240, 0.95);
            cursor: default;
            box-shadow: none;
            transform: none;
        }

    /* Close – right, danger red */
    .ix-notes-history-footer .ix-prep-create-btn {
        margin-left: auto;
        border-radius: 999px;
        padding: 0.35rem 1.35rem;
        font-size: 0.85rem;
        font-weight: 500;
        border: none;
        background: var(--danger); /* your modal red */
        color: #ffffff;
        cursor: pointer;
    }

        .ix-notes-history-footer .ix-prep-create-btn:hover,
        .ix-notes-history-footer .ix-prep-create-btn:focus-visible {
            filter: brightness(0.95);
            box-shadow: 0 6px 16px rgba(178, 34, 34, 0.4);
            transform: translateY(-1px);
            outline: none;
        }
/* Base style for regular Create/Audit buttons (NOT the metadata Close) */
.ix-prep-create-btn:not([data-metadata-close]),
.ix-prep-audit-btn {
    border: none;
    border-radius: 999px;
    padding: 0.35rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.2;
    color: #ffffff;
    cursor: pointer;
    opacity: 1;


}

/* Only inside the history/metadata modal footer */
.ix-notes-history-footer .ix-prep-create-btn:not([data-metadata-close]):hover,
.ix-notes-history-footer .ix-prep-create-btn:not([data-metadata-close]):focus-visible {
    filter: brightness(0.95);
    box-shadow: 0 6px 16px rgba(178, 34, 34, 0.4);
    transform: translateY(-1px);
    outline: none;
}

/* Metadata trigger: looks like plain underlined text, but is a button */
.ix-metadata-trigger {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
}

    .ix-metadata-trigger:hover,
    .ix-metadata-trigger:focus-visible {
        text-decoration: none;
    }


/* Date heading (root): bold */
.ix-metadata-date-heading {
    font-weight: 700;
    margin-top: 0.75rem;
    margin-bottom: 0.25rem;
}



/* Label inside each piece: bold + colored */
.ix-metadata-label {
    font-weight: 500;
    color: #017585; /* tweak if you want a different accent */
}

/* Value text */
.ix-metadata-value {
    font-weight: 400;
    margin-right: 0.35rem;
}

/* Time line: italic, under the text */
.ix-metadata-time {
    font-style: italic;
    margin-left: 1.2rem; /* align under the text, after bullet */
    font-size: 0.9em;
}

/* Container for each event row */
.ix-metadata-event-row {
    margin-left: 0.68rem;
    margin-bottom: 0.35rem;
    display: block;
    position: relative;
    padding-left: 1.2rem; /*pushes text right */

    padding: 0.4rem 0.6rem;
    border-radius: 6px;
}

/* The bullet itself — positioned outside the flow */
/*.ix-metadata-bullet {
    position: absolute;
    left: 10px; 
    top: 0rem;
    font-weight: 700;
}
*/
/* First line of properties */
.ix-metadata-line {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem;
    align-items: baseline;
}

/* Time under the text, aligned with the text, NOT the bullet */
.ix-metadata-time {
    font-style: italic;
    font-size: 0.9em;
    margin-left: 0; /* ensures time aligns with the properties */
}

/* Allow metadata pieces to wrap normally; no ellipsis */
.ix-metadata-piece,
.ix-metadata-value {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}


.ix-metadata-event-row:nth-of-type(odd) {
    background: rgba(1, 117, 133, 0.02); /* subtle teal tint */
}

.ix-metadata-event-row:nth-of-type(even) {
    background: rgba(1, 117, 133, 0.08); /* slightly stronger tint */
}


/* ============================================================
   Metadata Modal – header + filters
   ============================================================ */
/* Keep title on the left */

.ix-notes-history-title {
    display: flex;
    margin: 0;
    align-items: center;
    gap: 10px;
   
    margin-bottom: 0.4rem !important;

}
/* Header layout: title on top, filters in a row under it */
.ix-notes-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between; /* title left, close right */
    position: relative;
    z-index: 200; /* above body */
    gap: 0.45rem;
    margin-bottom: 0.75rem;
}
.ix-notes-history-header-two {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    margin-bottom: 0.75rem;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.ix-notes-history-header-actions-two {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-left: 0; /* IMPORTANT: don't push the whole row */
}

.ix-metadata-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-start;
    width: 100%;
}



/* Filter container */
.ix-metadata-filter, .ix-metadata-filter--two {
    position: relative;
    min-width: 6.5rem;
}

/* The pill-like select (applied directly to <select>) */
.ix-metadata-filter-select {
    width: 100%;
    padding: 0.25rem 1.6rem 0.25rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.9);
    background: rgba(248, 250, 252, 0.96);
    font-size: 0.75rem;
    color: #37474F;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
}

    /* Disabled (e.g. Day when month = All) */
    .ix-metadata-filter-select:disabled {
        cursor: not-allowed;
        background: rgba(226, 232, 240, 0.8);
        color: rgba(100, 116, 139, 0.9);
    }

/* Custom caret arrow – center it & make it a bit bigger */
/*.ix-metadata-filter::after {
    content: "▾";
    position: absolute;
    right: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.45rem;
    color: rgba(55, 71, 79, 0.7);
    pointer-events: none;
}*/

/* Hover / focus ring – no native blue border */
.ix-metadata-filter-select:hover,
.ix-metadata-filter-select:focus-visible {
    border-color: var(--teal);
    box-shadow: 0 0 0 1px rgba(2, 140, 158, 0.25);
    outline: none;
}


/* ===== Metadata filters: custom select ===== */

.ix-metadata-filters {
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
}

/* Wrapper for each select */
.ix-meta-select, .ix-meta-select--two {
    position: relative;
    font-size: 0.78rem;
 
}
.ix-meta-select--two {

    margin-top: 8px !important;
}
/* Native select is kept for JS + a11y but visually hidden */
.ix-meta-select-native {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

/* Visible chip toggle */
.ix-meta-select-toggle {
    min-width: 7.5rem;
    /* 👇 fixed height + no vertical padding = perfect vertical centering
       even when the underlying select is disabled */
    height: 1.7rem;
    padding: 0 1.4rem 0 0.65rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.9);
    background: #ffffff;
    color: var(--ink, #37474F);
    font-size: 0.78rem;
    line-height: 1.2;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.25rem;
    position: relative;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    white-space: nowrap;
}




    /* Hover/focus states */
    .ix-meta-select-toggle:hover {
        background-color: #f4f8fa;
        border-color: rgba(2, 140, 158, 0.7);
        box-shadow: 0 0 0 1px rgba(2, 140, 158, 0.18);
    }

    .ix-meta-select-toggle:focus-visible {
        outline: none;
        border-color: rgba(2, 140, 158, 0.9);
        box-shadow: 0 0 0 2px rgba(2, 140, 158, 0.35);
    }

/* Clear filters button */
.ix-meta-select-toggle--clear {
    justify-content: center; /* center text horizontally */
    padding: 0 1rem; /* symmetrical padding */
    min-width: auto;
    /* subtle "action" differentiation – same theme */
    background: rgba(2, 140, 158, 0.06);
    border-color: rgba(2, 140, 158, 0.45);
    color: white;
}
/* Clear filters — system action (neutral + amber cue) */
.ix-meta-select-toggle--clear {
    justify-content: center;
    padding: 0 1rem;
    min-width: auto;
    background: rgba(12,18,28,0.55); /* dark neutral glass */
    border: 1px solid rgba(245,158,11,0.35); /* amber system cue */
    color: rgba(253,230,138,0.92); /* amber-200 text */

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .12s ease;
}
    .ix-meta-select-toggle--clear:hover,
    .ix-meta-select-toggle--clear:focus-visible {
        background: rgba(245,158,11,0.10);
        border-color: rgba(245,158,11,0.55);
        color: rgba(255,237,213,0.98);
    }


/* Disabled */
.ix-meta-select.is-disabled .ix-meta-select-toggle {
    background-color: #eef2f5;
    color: #9aa4ad;
    border-color: rgba(148, 163, 184, 0.7);
    cursor: not-allowed;
}

    .ix-meta-select.is-disabled .ix-meta-select-toggle::after {
        color: #9aa4ad;
    }

/* Popover */
.ix-meta-select-pop {
    position: absolute;
    left: 0;
    top: calc(100% + 4px);
    min-width: 100%;
    background: #ffffff;
    border-radius: 0.55rem;
    border: 1px solid rgba(148, 163, 184, 0.8);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
    padding: 0.45rem 0 0.25rem;
    z-index: 12399960;
    display: none;
}

/* Open state */
.ix-meta-select.is-open .ix-meta-select-pop {
    display: block;
}

/* Option buttons */
.ix-meta-select-option {
    width: 100%;
    padding: 0.28rem 0.8rem;
    border: none;
    background: transparent;
    text-align: left;
    font-size: 0.78rem;
    color: var(--ink, #37474F);
    cursor: pointer;
}

    .ix-meta-select-option:hover,
    .ix-meta-select-option:focus-visible {
        background: #f4f8fa;
        outline: none;
    }

    .ix-meta-select-option.is-selected {
        background: #e8f6f8;
        font-weight: 600;
    }

    /* Disabled option inside the menu */
    .ix-meta-select-option:disabled {
        opacity: 0.5;
        cursor: default;
    }


    /* Hover / focus for Close */
    .ix-prep-create-btn[data-metadata-close]:hover,
    .ix-prep-create-btn[data-metadata-close]:focus-visible {
        background: #8f1b1b !important; /* slightly darker than var(--danger) */
        box-shadow: 0 6px 16px rgba(178, 34, 34, 0.4) !important;
        transform: translateY(-1px);
        outline: none;
    }

/* Canada wordmark inside footer (right column) */
.ix-footer-canada {
    margin-top: 1rem;

    display: flex;
    justify-content: flex-start; /* aligns left with the links */
}

.ix-footer-canada-img {
    width: 120px; /* adjust to preferred size */
    opacity: 0.82; /* subtle, professional */
    filter: drop-shadow(0 0 4px rgba(255,255,255,0.15));
    transition: opacity 0.25s ease;
}

    .ix-footer-canada-img:hover {
        opacity: 1;
    }

.ix-footer-canada {
    justify-content: center;
}



/* ===== WS modal title: icon + distinct header ===== */
#ws-modal-title .ws-modal-title-row {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

#ws-modal-title .ws-modal-title-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    display: block;
}

/* Make the title look “distinct” */
#ws-modal-title.wf-modal-title {
    color: #06b6d4; /* teal accent */
    font-weight: 700;
    letter-spacing: 0.2px;
    color: rgba(255, 255, 255, 0.92);
}



/* ===============================
   MODAL BACKDROPS – HARD OVERRIDE
   Covers viewport, beats footer/nav, blur applied
   =============================== */

#ws-modal-backdrop,
#wf-modal-backdrop,
.wf-modal-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    /* Viewport-safe sizes (mobile + desktop) */
    width: 100dvw !important;
    height: 100dvh !important;
    background: rgba(15, 23, 42, 0.55) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* Above EVERYTHING */
    z-index: 2147483647 !important;
    /* Prevent any clipping */
    overflow: visible !important;
}

    /* Hidden state */
    #ws-modal-backdrop.d-none,
    #wf-modal-backdrop.d-none,
    .wf-modal-backdrop.d-none {
        display: none !important;
    }

    /* Ensure the modal panel sits above blur */
    #ws-modal-backdrop .wf-modal,
    #wf-modal-backdrop .wf-modal,
    .wf-modal-backdrop .wf-modal {
        position: relative !important;
        z-index: 2147483647 !important;
    }













/* ===========================
   Comment history — header + footer match
   =========================== */

.ix-notes-history-modal {
    position: relative;
    overflow: visible;
}
#ix-consult-log-backdrop .ix-notes-history-modal {
    position: relative;
    overflow: visible;
    padding-bottom: 30px;
}
    /* Header already “full-bleed” in your setup */
.ix-notes-history-header-two, .ix-notes-history-modal .ix-notes-history-header {
    margin: -1.1rem -1.4rem 0;
    padding: 0.9rem 1.25rem 0.85rem;
    border-radius: 0.75rem 0.75rem 0 0;
    background: rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.10);
    /* background: rgba(2, 140, 158, 0.12);
        background: rgba(120, 170, 190, 0.35);
        background: rgba(100, 160, 190, 0.42);
        background: rgba(90, 150, 200, 0.38);
    */
    /*    background: rgba(90, 150, 200, 0.38);
    border-bottom: 1px solid rgba(2,140,158,0.35);
    background-image: url("/images/svg/ix-header-security-grid.svg");*/
    /*    background-repeat: repeat;*/
}

    .ix-notes-history-modal .ix-notes-history-title {
        margin: 0 !important;
        font-size: 1.2rem;
        font-weight: 700;
        color: white;
    }

/* Footer matches header height/feel */
.ix-notes-history-footer--match {
    margin: 0 -1.4rem -0.9rem; /* match modal padding edges */
    padding: 0 1.25rem; /* visually same as header */
    border-top: 1px solid rgba(55, 71, 79, 0.50);
    /*    background-image: url('/images/svg/bg.svg');
    background-repeat: repeat;*/
    background: transparent !important;
    border-radius: 0 0 0.75rem 0.75rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* Ensure Close stays RED */
#ix-notes-history-close,
#ix-notes-history-close:hover,
#ix-notes-history-close:focus-visible {
    background: var(--danger) !important;
    color: #fff !important;
}



/* Day separator with fading lines (left+right) */
.ix-chat-day-sep {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.85rem;
    margin: 0.35rem 0 0.95rem;
}

    .ix-chat-day-sep::before,
    .ix-chat-day-sep::after {
        content: "";
        height: 2px;
        border-radius: 999px;
        background: linear-gradient( to left, rgba(245,158,11,0.00), rgba(245,158,11,0.60) );
    }



.ix-chat-day-pill {
    font-size: 0.78rem;
    font-weight: 600;

    padding: 0.25rem 0.75rem;
    border-radius: 999px;
   


        color: rgba(253,230,138,0.95); /* amber-200 text */
    background: rgba(12,18,28,0.62); /* deep neutral glass */
    border: 1px solid rgba(245,158,11,0.38); /* amber edge */
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    box-shadow: 0 10px 26px rgba(0,0,0,0.45);
}


/* Thread stack */
.ix-chat-thread {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0 0.25rem 1rem;
}

/* Message row container */
.ix-chat-msg {
    display: flex;
}

.ix-chat-msg--client {
    justify-content: flex-start;
}

.ix-chat-msg--inno {
    justify-content: flex-end;
}

/* Row layout inside each message:
   - left side has bubble (client) or meta (inno)
   - right side has meta (client) or bubble (inno) */
.ix-chat-row {
    display: flex; /* was inline-flex */
    width: 100%;
    max-width: 100%;
    align-items: center;
    gap: 0.55rem;
}
/* Then control alignment per side */
.ix-chat-msg--client .ix-chat-row {
    justify-content: flex-start;
}

.ix-chat-msg--inno .ix-chat-row {
    justify-content: flex-end;
}
/* Bubble */
.ix-chat-bubble {
    max-width: min(36rem, 72%);
    padding: 0.6rem 0.85rem;
    border-radius: 0.95rem;

    border: 1px solid rgba(0,0,0,0.06);
    position: relative;
}

/* Styled bubble fills */
.ix-chat-msg--client .ix-chat-bubble {
    background: linear-gradient(180deg, #ffffff, #fbfdff);
    color: #1f2933;
    border-color: rgba(55, 71, 79, 0.12);
}

.ix-chat-msg--inno .ix-chat-bubble {
    background: linear-gradient(180deg, rgba(2,140,158,0.96), rgba(2,140,158,0.80));
    color: #ffffff;
    border-color: rgba(2, 140, 158, 0.28);
}

/* Subtle “tail” */
.ix-chat-msg--client .ix-chat-bubble {
    border-top-left-radius: 0.4rem;
}

.ix-chat-msg--inno .ix-chat-bubble {
    border-top-right-radius: 0.4rem;
}

/* Text */
.ix-chat-text {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.35;
}

/* META column: time on top, dots underneath */
.ix-chat-meta {
    display: flex;
    flex-direction: column; /* ⬅ vertical */
    align-items: center;
    gap: 0.25rem;
    position: relative;
}


/* Time (outside bubble) */
.ix-chat-time {
    font-size: 0.72rem;
    letter-spacing: 0.01em;
    opacity: 0.9;
    min-width: unset; /* ✅ allow natural width */
    line-height: 1; /* tighter vertical box */
    text-align: center;
    margin-bottom: -2px; /* 🔧 controls distance to dots */
}

.ix-chat-msg--client .ix-chat-time {
    color: rgba(55, 71, 79, 0.65);
}

.ix-chat-msg--inno .ix-chat-time {
    color: rgba(55, 71, 79, 0.60);
}

/* Action icon button */
/* Three-dots button — clean hover */
.ix-chat-actions-btn {
    background: transparent;
    border: none;
    padding: 0;
    width: 26px;
    height: 26px;
    border-radius: 0; /* no pill / no box */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

    /* Subtle movement + scale */
    .ix-chat-actions-btn:hover,
    .ix-chat-actions-btn:focus-visible {
        transform: translateY(-2px) scale(1.06);
        outline: none;
    }

/* Icon clarity */
.ix-chat-actions-icon {
    width: 18px;
    height: 18px;
    opacity: 0.75;
    transition: opacity 0.15s ease;
    z-index: 10;
}

.ix-chat-actions-btn:hover .ix-chat-actions-icon,
.ix-chat-actions-btn:focus-visible .ix-chat-actions-icon {
    opacity: 1;
}


/* Custom dropdown menu */
.ix-chat-actions-menu {
    position: absolute;
    top: calc(100% + -20px);
    left: calc(100% + 8px); /* move to the RIGHT of the dots */
    transform: none; /* pull it slightly upward */

    min-width: 100px;
    background-image: url('/images/svg/bg.svg');
    background-repeat: repeat;
    border: 1px solid rgba(55, 71, 79, 0.14);
    border-radius: 12px;
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.18);
    padding: 0.35rem;
    display: none;
    z-index: 3300001; /* z-index is fine once clipping is solved */
}
/* anchor */
.ix-chat-actions {
    position: relative; /* you already have this */
}




    .ix-chat-actions-menu.is-open {
        display: block;
    }
.ix-chat-actions-item {
    position: relative;
    width: 100%;
    background: transparent;
    border: none;
    padding: 0.45rem 0.55rem;
    border-radius: 10px;
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
}
    /* gradient separator */
    .ix-chat-actions-item:not(:last-child)::after {
        content: "";
        position: absolute;
        left: 10px;
        right: 10px;
        bottom: 0;
        height: 1px;
        background: linear-gradient( to right, transparent, rgba(55, 71, 79, 0.18), transparent );
    }

    .ix-chat-actions-item:hover,
    .ix-chat-actions-item:focus-visible {
        background: rgba(2,140,158,0.10);
        outline: none;
    }

    .ix-chat-actions-item.is-danger {
        color: #9E1C1C;
    }

        .ix-chat-actions-item.is-danger:hover,
        .ix-chat-actions-item.is-danger:focus-visible {
            background: rgba(158, 28, 28, 0.10);
        }

/* ===========================
   Edit overlay (blur inside body)
   =========================== */

.ix-chat-edit-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.20);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 21474836471;
}

    .ix-chat-edit-overlay.is-hidden {
        display: none;
    }

.ix-chat-edit-panel {
    width: min(520px, 92%);
    background: rgba(255,255,255,0.96);
    border: 1px solid rgba(55, 71, 79, 0.14);
    border-radius: 16px;
    box-shadow: 0 20px 55px rgba(15, 23, 42, 0.22);
    padding: 1rem 1rem 0.9rem;
}

.ix-chat-edit-title {
    margin: 0 0 0.65rem;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--ink);
}

.ix-chat-edit-textarea {
    width: 100%;
    border-radius: 14px;
    border: 1px solid rgba(2,140,158,0.35);
    background: #f4fbfc;
    padding: 0.75rem 0.85rem;
    font-size: 0.9rem;
    resize: vertical;
    min-height: 96px;
    outline: none;
}

    .ix-chat-edit-textarea:focus-visible {
        box-shadow: 0 0 0 3px rgba(2,140,158,0.25);
        border-color: rgba(2,140,158,0.75);
    }

/* Buttons aligned to LEFT edge of textarea (as requested) */
.ix-chat-edit-actions {
    margin-top: 0.65rem;
    display: flex;
    justify-content: flex-start; /* left aligned */
    gap: 0.5rem;
}

.ix-chat-edit-btn {
    border-radius: 999px;
    border: 1px solid transparent;
    padding: 0.36rem 1.05rem;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
}

.ix-chat-edit-btn-primary {
    background: var(--teal);
    color: #fff;
}

    .ix-chat-edit-btn-primary:hover {
        filter: brightness(0.96);
        box-shadow: 0 10px 22px rgba(2,140,158,0.24);
    }

.ix-chat-edit-btn-secondary {
    background: transparent;
    border-color: rgba(55, 71, 79, 0.35);
    color: var(--ink);
}

    .ix-chat-edit-btn-secondary:hover {
        background: rgba(55, 71, 79, 0.06);
    }


/* Wrapper under time */
.ix-chat-actions {
    position: relative; /* anchor for dropdown */
    display: flex;
    justify-content: center;
    z-index: 21474836471 !important;
}


.ix-chat-meta .ix-chat-actions {
    margin-top: -6px; /* adjust between -4px and -8px if needed */
}


/* Show composer only in "chat mode" */
#ix-notes-history-backdrop.is-chat .ix-notes-compose {
    display: flex;
}

/* ===== Send button ===== */

.ix-notes-compose-send {
    width: 64px;
    height: auto; /* stretch with pill */
    border-radius: 0;
    border: 0;
    background: #f4fbfc;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: filter .12s ease, transform .12s ease;
    box-shadow: none !important;
    position: relative; /* anchor for separator */
}


    /* Vertical separator line (same style as textarea separator) */
    .ix-notes-compose-send::before {
        content: "";
        position: absolute;
        left: 0;
        top: 8px; /* vertical breathing */
        bottom: 8px; /* vertical breathing */
        width: 1px;
        background: rgba(55, 71, 79, 0.18);
        pointer-events: none;
    }

.ix-notes-compose-send-icon {
    width: 34px;
    height: 34px;
    display: block;
    transform: rotate(-90deg); /* ⬆️ usually correct */
}

/* Hover / focus effects */
.ix-notes-compose-send:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(247,150,70,0.18);
    border-color: rgba(247,150,70,0.55);
}

.ix-notes-compose-send:active {
    transform: translateY(0px);
    box-shadow: none;
}

.ix-notes-compose-send:focus-visible,
.ix-notes-compose-textarea:focus-visible {
    outline: 3px solid rgba(247,150,70,0.25);
    outline-offset: 2px;
}

/* ONLY show footer in chat mode */
#ix-notes-history-backdrop.is-chat .ix-notes-history-footer {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 0px 16px;
}

/* composer layout */
.ix-notes-compose {
    display: none !important;
    align-items: center;
    gap: 10px;
    width: 100%;
}
/* Composer appears ONLY in chat mode */
#ix-notes-history-backdrop.is-chat .ix-notes-compose {
    display: flex !important;
}


.ix-notes-history-title-icon {
    width: 34px;
    height: 34px;
    display: block;
    flex: 0 0 auto;
}
























/* ===========================
   Instant Chat — Composer (CLEAN / NO DUPLICATES)
   Keeps what you built:
   - full-width composer shell
   - textarea + emoji trigger + send aligned
   - emoji menu = 5 columns (15 emojis => 5x3)
   - menu arrow = TRIANGLE (not diamond)
   =========================== */

/* ===== Composer wrapper ===== */
.ix-notes-compose {
    padding: 0px 12px;
}

/* Full-width container (your “wide footer” requirement) */
.ix-notes-compose-shell {
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 12px;
}

/* Row: emoji button (left) + textarea (middle) + send (right) */
.ix-notes-compose-inputrow {
    display: flex;
    gap: 8px;
    align-items: stretch; /* buttons match textarea height */
    width: 100%;
}

/* ===== Textarea ===== */
/* ===== Textarea (single-line: truly centered) ===== */
.ix-notes-compose-textarea {
    flex: 1 1 auto;
    border: 0 !important;
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    padding: 0 14px; /* ⬅️ remove vertical padding */
    line-height: 44px; /* ⬅️ this centers placeholder/text */
    resize: none;
    border-radius: 14px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    background: #f4fbfc;
    box-shadow: none !important;
    color: #1C232B;
    outline: none;
    font-size: 0.85rem;
    box-sizing: border-box;
    overflow: hidden; /* prevents tiny scrollbars */
}


/* The pill becomes the “textarea container” */
.ix-compose-pill {
    flex: 1 1 auto;
    min-height: 44px;
    align-items: center; /* was: stretch */
    display: flex;
    border-radius: 14px;
    border: 1px solid rgba(2,140,158,0.35);
    background: #f4fbfc !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 1px 2px rgba(15,23,42,.06);
    overflow: hidden; /* keeps the inner button “inside” */
}

    .ix-notes-compose-textarea:focus,
    .ix-notes-compose-textarea:focus-visible {
        outline: none !important;
        border-color: rgba(2,140,158,.45);
        box-shadow: 0 0 0 3px rgba(2,140,158,.14), 0 10px 26px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.8);
    }
/* Focus: apply on pill when textarea is focused */
.ix-compose-pill:focus-within {
    border-color: rgba(2,140,158,.45);
    box-shadow: 0 0 0 3px rgba(2,140,158,.14), 0 10px 26px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.8);
}

/* Vertical separator before the send button */
.ix-compose-sep {
    width: 1px;
    margin: 10px 0; /* top/bottom breathing */
    background: rgba(55,71,79,.18);
    flex: 0 0 1px;
}


.ix-compose-pill .ix-notes-compose-send:active {
    transform: translateY(1px);
}
/* ===========================
   Emoji dropdown (compact)
   =========================== */

/* Anchor wrapper (invisible, for positioning only) */
.ix-emoji-dd {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-left: 0;
    background: transparent;
    border: 0;
}

/* Trigger button (same height as textarea/send) */
.ix-emoji-dd-btn {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    border: 1px solid rgba(55,71,79,.18);
    background: rgba(255,255,255,.75);
    box-shadow: 0 10px 22px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.75);
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}

    .ix-emoji-dd-btn:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,.92);
        border-color: rgba(2,140,158,.28);
        box-shadow: 0 14px 30px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.85);
    }

    .ix-emoji-dd-btn:active {
        transform: translateY(0);
    }

/* Menu: 5 columns grid (15 emojis => 3 rows) */
.ix-emoji-dd-menu {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background-image: url('/images/svg/bg.svg');
    background-repeat: repeat;
    border: 1px solid rgba(55,71,79,0.18);
    border-radius: 16px;
    box-shadow: 0 18px 42px rgba(15,23,42,0.22);
    padding: 10px;
    z-index: 9999999;
    display: none;
    grid-template-columns: repeat(5, 36px);
    grid-auto-rows: 36px;
    gap: 8px;
    align-items: center;
    justify-content: center;
    /* lock width so it never tries to fit 6/7 per row */
    width: calc((5 * 36px) + (4 * 8px) + (2 * 10px));
    box-sizing: border-box;
}

.ix-emoji-dd.is-open .ix-emoji-dd-menu {
    display: grid;
}

/* Triangle pointer (NOT diamond) */
.ix-emoji-dd-menu::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 10px solid rgba(255,255,255,0.92);
    filter: drop-shadow(0 1px 0 rgba(55,71,79,0.18));
}

/* Emoji item */
.ix-emoji-dd-item {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(55,71,79,0.16);
    border-radius: 12px;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}

    .ix-emoji-dd-item:hover {
        transform: translateY(-1px);
        border-color: rgba(2,140,158,0.30);
        background: rgba(255,255,255,0.92);
        box-shadow: 0 10px 18px rgba(2,140,158,0.14);
    }

    .ix-emoji-dd-item:active {
        transform: translateY(0);
    }







































/* ===========================
   Emoji dropdown — ESSENTIAL ONLY (no duplicates)
   15 emojis => 5 columns x 3 rows
   Triangle pointer (no diamond)
   =========================== */

/* Small positioning anchor only (not a “big div” visually) */
.ix-emoji-dd {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
}

/* Trigger button (bigger, border, hover) */
.ix-emoji-dd-btn {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    background: rgba(255,255,255,0.70);
    border: 1px solid rgba(55,71,79,0.20);
    border-radius: 14px;
    box-shadow: 0 6px 16px rgba(15,23,42,0.10);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

    .ix-emoji-dd-btn:hover {
        border-color: rgba(2,140,158,0.35);
        box-shadow: 0 10px 22px rgba(2,140,158,0.18);
        transform: translateY(-1px);
    }

    .ix-emoji-dd-btn:active {
        transform: translateY(0);
        box-shadow: 0 6px 14px rgba(15,23,42,0.12);
    }

/* The popup bubble itself is the GRID (no wrapper div needed) */
.ix-emoji-dd-menu {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    /* visuals */
    background-image: url('/images/svg/bg.svg');
    background-repeat: repeat;
    border: 1px solid rgba(55,71,79,0.18);
    border-radius: 16px;
    box-shadow: 0 18px 42px rgba(15,23,42,0.22);
    padding: 10px;
    z-index: 9999999;
    /* layout: force 5 columns always */
    display: none;
    grid-template-columns: repeat(5, 36px);
    grid-auto-rows: 36px;
    gap: 8px;
    align-items: center;
    justify-content: center;
    /* lock width so it can’t try to fit 7 */
    width: calc((5 * 36px) + (4 * 8px) + (2 * 10px));
    box-sizing: border-box;
}

    .ix-emoji-dd-menu.is-open {
        display: grid;
    }

    /* Triangle pointer ONLY (no diamond) */
    .ix-emoji-dd-menu::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 9px solid transparent;
        border-right: 9px solid transparent;
        border-top: 10px solid rgba(255,255,255,0.92);
        filter: drop-shadow(0 1px 0 rgba(55,71,79,0.18));
    }

/* Emoji buttons (perfect centering; no spill outside bubble) */
.ix-emoji-dd-item {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(55,71,79,0.16);
    border-radius: 12px;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

    .ix-emoji-dd-item:hover {
        transform: translateY(-1px);
        border-color: rgba(2,140,158,0.30);
        box-shadow: 0 10px 18px rgba(2,140,158,0.14);
    }

    .ix-emoji-dd-item:active {
        transform: translateY(0);
    }


/* =========================== Bubble colors (more “enterprise”, less loud teal) =========================== */

.ix-chat-bubble {
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
    border: 1px solid rgba(15, 23, 42, 0.08);
}
/* Client (left): clean white with a cool tint */

.ix-chat-msg--client .ix-chat-bubble {
    background: linear-gradient(180deg, #ffffff, #f6f9ff);
    color: #1f2933;
    border-color: rgba(26,115,232,0.18);
}
/* Inno (right): light teal/blue (NOT dark) but still distinct */

.ix-chat-msg--inno .ix-chat-bubble {
    background: linear-gradient(180deg, #e7f7fb, #d9f1f8);
    color: #0f172a;
    border-color: rgba(2,140,158,0.22);
}



























































/* ============================================================
   Chat — Flag badge near time
   ============================================================ */
.ix-chat-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 14px;
    line-height: 1;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(17, 24, 39, 0.12);
    box-shadow: 0 6px 18px rgba(17, 24, 39, 0.08);
}

/* ============================================================
   Chat — Emoji box inside the dots menu (below Edit/Delete)
   ============================================================ */
.ix-chat-actions-divider {
    margin-top: 4px;

}

.ix-chat-actions-reactions {
    margin-top: 8px;
    display: grid;
    grid-template-columns: repeat(5, 34px);
    gap: 6px;
    padding: 4px 2px 2px 2px;
}

.ix-chat-reaction-btn {
    width: 34px;
    height: 34px;
    font-size: 18px;
    border-radius: 12px;
 
    border: 1px solid rgba(17, 24, 39, 0.10);
    background: rgba(255, 255, 255, 0.92);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    user-select: none;
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

    .ix-chat-reaction-btn:hover {
        transform: translateY(-1px);
        border-color: rgba(17, 24, 39, 0.18);
        box-shadow: 0 10px 22px rgba(17, 24, 39, 0.10);
    }

    .ix-chat-reaction-btn:active {
        transform: translateY(0px) scale(0.98);
    }

    .ix-chat-reaction-btn:focus-visible {
        outline: 2px solid rgba(2, 140, 158, 0.35);
        outline-offset: 2px;
    }
/* Anchor for the flag on the bubble */
.ix-chat-bubble--flag-anchor {
    position: relative;
}

/* Bottom-right badge: half on bubble, half off */
.ix-chat-flag--bubble {
    position: absolute;
    left: 10px; /* pushes it outside so it sits "half off" */
    bottom: -12px; /* half off at the bottom */
    z-index: 3;
    pointer-events: none; /* don't block clicks */
}

/* (Optional) make it feel more "badge-like" */
.ix-chat-flag--bubble {
    box-shadow: 0 10px 26px rgba(17,24,39,.14);
    border: 1px solid rgba(17,24,39,.14);
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(6px);
}


/* ============================================================
   Chat — Top row (Edit | Delete) as one line + vertical divider
   ============================================================ */
.ix-chat-actions-top {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* Edit | divider | Delete */
    align-items: center;
    gap: 0;
    margin: 2px 2px 0 2px; /* small inset like your menu padding */
    position: relative;
    margin-bottom: 6px; /* space after the separator */
    background: white;
    border-radius:10px;
}


    .ix-chat-actions-top::after {
        content: "";
        position: absolute;
        left: 10px;
        right: 10px;
        bottom: 0;
        height: 1px;
        background: linear-gradient( to right, transparent, rgba(55, 71, 79, 0.18), transparent );
    }


    /* Override only for the top row buttons */
    .ix-chat-actions-top .ix-chat-actions-item {
        width: 100%;
        text-align: center; /* centered text */
        padding: 0.45rem 0.35rem; /* symmetric */
        border-radius: 10px;
    }

        /* Remove the old horizontal separator line between Edit/Delete */
        .ix-chat-actions-top .ix-chat-actions-item::after {
            content: none !important;
        }

/* The vertical divider: same thickness as your horizontal divider (1px) */
.ix-chat-actions-vdiv {
    width: 1px;
    height: calc(100% - 8px); /* visually same “inset” feel as your horizontal line */
    background: linear-gradient( to bottom, transparent, rgba(55, 71, 79, 0.18), transparent );
    justify-self: center;
}


/* ============================================================
   Chat log — Empty state (filtered / no results)
   ============================================================ */
.ix-chatlog-empty, .ix-metadata-empty {
    margin: 0.75rem auto;
    padding: 10px 24px;
    max-width: 560px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: white; /* secure neutral ink */
    background: transparent;
    border-radius: 10px;
    letter-spacing: 0.2px;
}
.ix-metadata-empty {
    color: #191919; /* secure neutral ink */
}

/* ============================================================
   Chat Bubble — Edited/Deleted meta lines (inside bubble)
   ============================================================ */

.ix-chat-bubble-meta {
    margin-top: 8px !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(0,0,0,0.08) !important;
}

.ix-chat-meta-line {
    font-size: 12px !important;
    line-height: 1.25 !important;
    opacity: 0.85 !important;
    user-select: none !important;
}

/* Edited line (subtle) */
.ix-chat-meta-line--edited {
    font-style: italic !important;
}

/* Deleted bubble state */
.ix-chat-bubble--deleted {
    opacity: 0.78 !important;
    filter: grayscale(0.4) !important;
}

.ix-chat-msg--deleted .ix-chat-text {
    display: none !important; /* ensure no leftover spacing */
}

.ix-chat-meta-line--deleted {
    font-style: italic !important;
    opacity: 0.9 !important;
}


/* Tombstone bubble: no top border, centered text */
.ix-chat-msg--deleted .ix-chat-bubble {
    border-top: 0 !important;
    box-shadow: none !important;
}

/* Hide any remaining meta/actions/flag in deleted messages (belt + suspenders) */
.ix-chat-msg--deleted .ix-chat-actions,
.ix-chat-msg--deleted .ix-chat-actions-btn,
.ix-chat-msg--deleted .ix-chat-actions-menu,
.ix-chat-msg--deleted .ix-chat-time,
.ix-chat-msg--deleted .ix-chat-ts,
.ix-chat-msg--deleted .ix-chat-meta,
.ix-chat-msg--deleted .ix-chat-flag,
.ix-chat-msg--deleted [data-chat-flag] {
    display: none !important;
}

/* Center the deleted text inside the bubble */
.ix-chat-deleted-center {
    width: 100%;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-style: italic;
    opacity: 0.85;
    padding: 2px 12px;
}


/* ===== Deleted message bubble ===== */
.ix-chat-msg--deleted .ix-chat-bubble {
    padding: 1px 14px; /* ⬅️ reduce vertical padding */
    min-height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ix-chat-msg--deleted .ix-chat-bubble {
    position: relative;
}

    .ix-chat-msg--deleted .ix-chat-bubble::before {
        content: "";
        position: absolute;
        top: 0;
        left: 12px;
        right: 12px;
        height: 1px;
        background: linear-gradient( to right, transparent, rgba(55, 71, 79, 0.18), transparent );
    }

.ix-chat-deleted-stamp {
    margin-left: 5px;
}

.ix-consultlog-expert {
    color: #028C9E; /* InnoVenTech teal */
    font-weight: 600; /* visual authority */
    letter-spacing: 0.2px;
    white-space: nowrap;
}
    /* Optional: subtle expert badge feel */


/* Timestamp – neutral, secondary */ .ix-consultlog-time {
    color: #6B7280; /* cool gray */
    font-weight: 400;
    white-space: nowrap;
}


/* ============================================================
   Engagement Log — Actions menu (UNIQUE)
   ============================================================ */

.ix-englog-actions {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Dots button */
.ix-englog-actions-btn {
    background: transparent;
    border: none;
    padding: 0;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease, opacity 0.15s ease;
    transform: translateY(6px);
}

    .ix-englog-actions-btn:hover,
    .ix-englog-actions-btn:focus-visible {
        transform: translateY(7px) scale(1.06);
        outline: none;
    }

.ix-englog-actions-icon {
    width: 18px;
    height: 18px;
    opacity: 0.75;
    transition: opacity 0.15s ease;
}

.ix-englog-actions-btn:hover .ix-englog-actions-icon,
.ix-englog-actions-btn:focus-visible .ix-englog-actions-icon {
    opacity: 1;
}

/* Menu bubble */
.ix-englog-actions-menu {
    /* position: absolute;
    top: calc(100% - 20px);
    left: calc(100% + 8px);
    */ min-width: 120px;
    background-image: url('/images/svg/bg.svg');
    background-repeat: repeat;
    border: 1px solid rgba(55, 71, 79, 0.14);
    border-radius: 12px;
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.18);
    padding: 0.35rem;
    display: none;
    z-index: 21474836472;
}

/*  .ix-englog-actions-menu.is-open {
        display: block;
    }*/

/* Menu items */
.ix-englog-actions-item {
    position: relative;
    width: 100%;
    background: transparent;
    border: none;
    padding: 0.45rem 0.55rem;
    border-radius: 10px;
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
}

    /* gradient separator */
    .ix-englog-actions-item:not(:last-child)::after {
        content: "";
        position: absolute;
        left: 10px;
        right: 10px;
        bottom: 0;
        height: 1px;
        background: linear-gradient(to right, transparent, rgba(55, 71, 79, 0.18), transparent );
    }

    .ix-englog-actions-item:hover,
    .ix-englog-actions-item:focus-visible {
        background: rgba(2,140,158,0.10);
        outline: none;
    }

    .ix-englog-actions-item.is-danger {
        color: #9E1C1C;
    }

        .ix-englog-actions-item.is-danger:hover,
        .ix-englog-actions-item.is-danger:focus-visible {
            background: rgba(158, 28, 28, 0.10);
        }














/* ============================================================
   Engagement Log — Edit Entry (GLOBAL overlay, clean + final)
   Put at VERY BOTTOM of CSS
   ============================================================ */

/* ✅ 1) Hard rule: [hidden] ALWAYS hides (no surprises) */
#ix-englog-edit-backdrop[hidden] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ✅ 2) GLOBAL overlay (ported to document.body) */
#ix-englog-edit-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 4000001 !important; /* above engagement log modal */

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 18px !important;
    /* Dim + blur background (like your Instant Chat) */
    background: rgba(15, 23, 42, 0.18) !important;
    backdrop-filter: blur(7px) !important;
    -webkit-backdrop-filter: blur(7px) !important;
    pointer-events: auto !important;
}

    /* Optional safety: dim layer that never blocks clicks */
    #ix-englog-edit-backdrop::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(15, 23, 42, 0.06);
        pointer-events: none;
    }

    /* ✅ 3) Modal panel (polished) */
    #ix-englog-edit-backdrop .ix-englog-edit-modal {
        position: relative !important;
        z-index: 4000002 !important;
        pointer-events: auto !important;
        width: min(760px, calc(100% - 32px)) !important;
        border-radius: 16px !important;
        background: linear-gradient( to bottom, rgba(248, 251, 252, 0.98), rgba(240, 246, 248, 0.98) ) !important;
        border: 1px solid rgba(55, 71, 79, 0.14) !important;
        box-shadow: 0 20px 50px rgba(15, 23, 42, 0.22), 0 2px 6px rgba(15, 23, 42, 0.06) !important;
        overflow: hidden !important;
    }

    /* ✅ 4) Header */
    #ix-englog-edit-backdrop .ix-englog-edit-header {
        padding: 14px 18px !important;

        background: rgba(2, 140, 158, 0.12);
        background-image: url("/images/svg/ix-header-security-grid.svg");
        background-repeat: repeat;
        border-bottom: 1px solid rgba(55, 71, 79, 0.12) !important;
    }

    #ix-englog-edit-title,
    #ix-englog-edit-backdrop .ix-englog-edit-title {
        font-size: 1.1rem !important;
        font-weight: 800 !important;
        color: #1f2f36 !important;
        letter-spacing: 0.2px !important;
        margin: 0 !important;
    }

    /* ✅ 5) Body */
    #ix-englog-edit-backdrop .ix-englog-edit-body {
        padding: 16px 18px 14px !important;
    }

/* ✅ 6) Textarea (2 lines by default) */
#ix-englog-edit-text {
    width: 100% !important;
    min-height: 0 !important;
    height: calc(2 * 1.45em + 28px) !important; /* 2 lines + padding */
    resize: vertical !important;
    padding: 14px 14px !important;
    font-size: 0.88rem !important;
    line-height: 1.45 !important;
    border-radius: 14px !important;
    border: 1px solid rgba(2, 140, 158, 0.35) !important;
    background: #f6fbfc !important;
    color: #1f2933 !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease !important;
}

    #ix-englog-edit-text::placeholder {
        color: #7b8a93 !important;
    }

    #ix-englog-edit-text:focus,
    #ix-englog-edit-text:focus-visible {
        outline: none !important;
        background: #ffffff !important;
        border-color: rgba(2, 140, 158, 0.75) !important;
        box-shadow: 0 0 0 3px rgba(2, 140, 158, 0.18), 0 10px 26px rgba(15, 23, 42, 0.12) !important;
    }

/* ✅ 7) Actions footer */
#ix-englog-edit-backdrop .ix-englog-edit-actions {
    display: flex !important;
    gap: 12px !important;
    padding: 14px 18px !important;
    background: linear-gradient( to top, rgba(2, 140, 158, 0.06), rgba(2, 140, 158, 0.02) ) !important;
    border-top: 1px solid rgba(55, 71, 79, 0.12) !important;
}

/* Save button */
#ix-englog-edit-backdrop .ix-section-save {
    background: linear-gradient(to bottom, #029fb3, #028c9e) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 0.45rem 1.4rem !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    box-shadow: 0 8px 18px rgba(2, 140, 158, 0.28) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
    cursor: pointer !important;
}

    #ix-englog-edit-backdrop .ix-section-save:hover,
    #ix-englog-edit-backdrop .ix-section-save:focus-visible {
        background: linear-gradient(to bottom, #02b1c7, #028c9e) !important;

        box-shadow: 0 12px 26px rgba(2, 140, 158, 0.36) !important;
        outline: none !important;
    }

/* Cancel button */
#ix-englog-edit-backdrop .ix-section-cancel {
    background: #ffffff !important;
    border: 1px solid rgba(55, 71, 79, 0.28) !important;
    color: #263238 !important;
    border-radius: 999px !important;
    padding: 0.45rem 1.3rem !important;
    font-size: 0.86rem !important;
    font-weight: 600 !important;
    transition: background-color 0.15s ease, border-color 0.15s ease !important;
    cursor: pointer !important;
}

    #ix-englog-edit-backdrop .ix-section-cancel:hover,
    #ix-englog-edit-backdrop .ix-section-cancel:focus-visible {
        background: rgba(55, 71, 79, 0.06) !important;
        border-color: rgba(55, 71, 79, 0.45) !important;
        outline: none !important;
    }

/* ✅ 8) Click safety */
#ix-englog-edit-backdrop button,
#ix-englog-edit-backdrop textarea {
    pointer-events: auto !important;
}






/* ============================================================
   EngLog menu: never affect row layout (even before portal)
   ============================================================ */

/* The wrapper should be a tiny fixed-size anchor */
.ix-englog-actions {
    position: relative;
    flex: 0 0 auto;
}

/* MENU: always out of flow (even when closed) */
.ix-englog-actions-menu {
    position: absolute; /* out of document flow */
    top: 100%;
    left: 0;
    display: none; /* hidden by default */
    margin: 0 !important;
}

    /* When open (non-portal fallback) */
    .ix-englog-actions-menu.is-open {
        display: block;
    }

    /* When portaled to body */
    .ix-englog-actions-menu.is-portal {
        position: fixed !important; /* stays out of flow */
        z-index: 9999999 !important;
    }



/* ===== EngLog Actions Menu — Portal mode (prevents clipping) ===== */

/* default inside-row state */
.ix-englog-actions-menu {
    display: none;
}

    /* open inside row (fallback) */
    .ix-englog-actions-menu.is-open {
        display: block;
    }

    /* when moved to <body> */
    .ix-englog-actions-menu.is-portal {
        position: fixed !important;
        z-index: 4000000 !important; /* higher than your modal */
        display: block !important;
    }

        /* (optional) safety so it never gets constrained */
        .ix-englog-actions-menu.is-portal * {
            pointer-events: auto;
        }


/* Inline "edited on ..." tag (same line, styled differently) */
.ix-englog-inline-meta {
    font-style: italic;
    font-weight: 600;
    font-size: 0.86em;
    white-space: nowrap;
    margin-left: 6px;
}

/* Deleted row look */
.ix-consultlog-row.is-deleted .ix-consultlog-text {
    color: rgba(55, 71, 79, 0.55);
    font-style: italic;
}

.ix-consultlog-row.is-deleted .ix-consultlog-expert,
.ix-consultlog-row.is-deleted .ix-consultlog-time {
    color: rgba(55, 71, 79, 0.45);
}

/* Optional: disable the dots menu on deleted rows */
.ix-consultlog-row.is-deleted [data-englog-actions-btn] {
    opacity: 0.45;
    pointer-events: none;
}
/* ============================================================
   Engagement Log "Saved" Tooltip — BRAND ORANGE (#F79646)
   ============================================================ */

#ix-global-notes-history {
    position: relative;
}

.ix-englog-tooltip {
    position: absolute;
    right: 0;
    bottom: calc(100% + 12px);
    /* ⬅️ wider so text stays to ~2 lines */
    max-width: 220px;
    min-width: 120px;
    padding: 12px 16px;
    border-radius: 14px;
    background: linear-gradient( 135deg, #fff2e6, #ffe3cc );
    border: 1px solid rgba(247, 150, 70, 0.55);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18), 0 0 0 0 rgba(247, 150, 70, 0);
    color: #4e342e;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.35;
    opacity: 0;
    transform: translateY(8px) scale(0.96);
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
    z-index: 5000000;
    text-align: left;
    align-items: flex-start; /* if it's flex */
}
    .ix-englog-tooltip span {
        display: block;
        margin-top: 2px;
        text-align: left;
        font-weight: 500;
    }
    /* Arrow */
    .ix-englog-tooltip::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border-width: 8px;
        border-style: solid;
        border-color: #ffe3cc transparent transparent transparent;
        filter: drop-shadow(0 2px 2px rgba(15,23,42,0.12));
    }

    /* Visible state */
    .ix-englog-tooltip.is-visible {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    /* Flash animation — BRAND ORANGE */
    .ix-englog-tooltip.is-flash {
        animation: ixEnglogFlash .5s ease-in-out 3;
    }
#ix-news-tooltip {
    transform: none !important;
}




@keyframes ixEnglogFlash {
    0% {
        box-shadow: 0 18px 40px rgba(15,23,42,0.18), 0 0 0 0 rgba(247,150,70,0);
    }

    40% {
        box-shadow: 0 22px 48px rgba(15,23,42,0.22), 0 0 0 6px rgba(247,150,70,0.45);
    }

    100% {
        box-shadow: 0 18px 40px rgba(15,23,42,0.18), 0 0 0 0 rgba(247,150,70,0);
    }
}

/* ============================================================
   Engagement Log — Filters: hide/show without breaking layout
   (NO layout changes, NO opacity on container)
   Put at VERY BOTTOM of CSS
   ============================================================ */

/* Keep your original layout — do NOT set display/grid/flex here */
#ix-consultlog-filters {
    /* hidden state */
    visibility: hidden !important;
    max-height: 0 !important;
    overflow: hidden !important;
    margin-top: 0 !important;
    z-index:1000;
}


    #ix-consultlog-filters .ix-metadata-filter {
        margin-top: 10px !important;
    }
    /* shown state */
    #ix-consultlog-filters.is-open {
        visibility: visible !important;
        max-height: 200px !important; /* enough for your two selects */
        overflow: visible !important; /* important: allow dropdowns to render */
        transition: max-height .22s ease;
        
    }

/* Animate any filter blocks when their container has .is-open */
.is-open .ix-metadata-filter-animation {
    animation: ixFilterIn .22s ease both;
    animation-delay: calc(var(--ix-stagger-i, 0) * 90ms);
}

    /* Assign an index automatically by position (extend as needed) */
    .is-open .ix-metadata-filter-animation:nth-of-type(1) {
        --ix-stagger-i: 0;
    }

    .is-open .ix-metadata-filter-animation:nth-of-type(2) {
        --ix-stagger-i: 1;
    }

    .is-open .ix-metadata-filter-animation:nth-of-type(3) {
        --ix-stagger-i: 2;
    }

    .is-open .ix-metadata-filter-animation:nth-of-type(4) {
        --ix-stagger-i: 3;
    }

    .is-open .ix-metadata-filter-animation:nth-of-type(5) {
        --ix-stagger-i: 4;
    }

    .is-open .ix-metadata-filter-animation:nth-of-type(6) {
        --ix-stagger-i: 5;
    }

@keyframes ixFilterIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ============================================================
   FIX: filter dropdown popover should be ABOVE log rows
   ============================================================ */

/* Create a stable stacking context in header (safe) */
#ix-consultlog-root, #ix-chatlog-root {
    position: relative;
    z-index: 50;
    gap: 0rem !important; /* was 0.45rem */
    padding-top: 7px !important;
    padding-bottom: 7px !important;
}

#ix-consultlog-root {
    background: rgba(2, 140, 158, 0.32);

}
#ix-metadata-header-color {
    background: rgba(20, 110, 125, 0.46);

}



#ix-consultlog-root .ix-metadata-filter {
    margin-top: 0.75rem !important; /* "just below" the header row */
}

    /* The popover itself must sit above everything */
    #ix-consultlog-root .ix-meta-select-pop {
        position: absolute; /* if your existing CSS already does this, fine */
        z-index: 999999 !important;
    }

/* If your pop is appended elsewhere, this still helps */
.ix-meta-select-pop {
    z-index: 999999 !important;
}



/* =========================================
   Export dropdown — Filters row (integrated)
   ========================================= */

/* Export dropdown — Filters row (final, integrated) */
.ix-export-item.ix-export-item--filters {
    padding: 0.45rem 0.65rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #5f7f8c;
    border-top: 1px solid rgba(2, 140, 158, 0.18);
    background-color: #f7fcff;
    cursor: default;
    user-select: none;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    cursor: pointer !important;
}

    /* Hover = just a touch more, no jump */
    .ix-export-item.ix-export-item--filters:hover {
        background: rgba(2,140,158,0.14) !important;
    }


    /* Remove any leftover caret2 spacing if it still exists in markup */
    .ix-export-item.ix-export-item--filters .ix-btn-caret2 {
        margin-left: auto !important;
        opacity: .65 !important;
    }


/* Remove bottom padding so last item sits flush */
.ix-export-dropdown {
    padding-bottom: 0 !important;
}
.ix-export-wrap {
    position: relative;

}


.ix-instant-chat-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    background: linear-gradient( 180deg, #fff4ea 0%, #ffe7d1 100% );
    border: 1px solid rgba(247, 150, 70, 0.45);
    color: #b45309;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    cursor: pointer;
    white-space: nowrap;
    margin-left: auto;
    transition: background 0.1s ease, box-shadow 0.1s ease, transform 0.1s ease;

}

.ix-instant-chat-btn-left{

    margin-left: 0; /* ✅ reset */
}
.ix-instant-chat-icon {
    width: 20px;
    height: 20px;
    display: block;
    flex-shrink: 0;
}

.ix-instant-chat-btn:hover {
    background: linear-gradient( 180deg, #ffe7d1 0%, #ffd6ad 100% );
    box-shadow: 0 6px 14px rgba(247, 150, 70, 0.35);
    transform: translateY(-1px);
}

.ix-instant-chat-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(247, 150, 70, 0.35);
}



.ix-notes-history-header {
    display: flex;
    flex-wrap: wrap; /* allow second row */
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.75rem;
}

.ix-notes-history-title {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1; /* title takes the left space */
    min-width: 0;
}

.ix-notes-history-header-actions {
    margin-left: auto; /* pushes actions to the far right */
    display: flex;
    align-items: center;
    gap: 10px; /* space between Export and Close */
}

/* Filters become a full-width second row, left aligned */
.ix-metadata-filters--two {
    flex: 0 0 100%; /* force new line */
    width: 100%;
    display: flex; /* not inline-flex */
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem !important; /* "just below" the header row */
}



/* Responsive: stack controls under the title on narrow screens */
@media (max-width: 900px) {
    .ix-prep-header {
        align-items: flex-start;
    }

    .ix-prep-header-controls {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}
/* =========================================================
   Instant Chat header — vertically center Export dots + Close
   ========================================================= */



    /* Remove any weird baseline behavior from the wrapper */
.ix-notes-history-header-actions .ix-myaccount-header-row--modal, .ix-notes-history-header-actions-two .ix-myaccount-header-row {
    display: flex;
    align-items: center; /* ✅ */
    margin: 0;
    padding: 0;
}

    /* Force BOTH buttons to have the same box size + centering */
.ix-folder-actions-trigger {
    width: 32px; /* adjust if your close is different */
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important; /* ✅ prevents baseline lift */
    vertical-align: middle;
}

.wf-row .remove {
    width: 18px; /* ideal size for a 32px circle */
    height: 18px;
}
.wf-row .ix-modal-close-icon {
    width: 12px; /* ideal size for a 32px circle */
    height: 12px;
}

/* ============================================================
   Replace the big archived header bar with a small left-attached pill
   Applies ONLY to the prior/archived year section
   ============================================================ */



/* The pill IS the button now */
.ix-credits-year--prior .ix-year-toggle.ix-archived-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    /* compact sizing */
    width: auto !important;
    max-width: 100%;
    padding: 10px 21px;
    border-radius: 14px;
    border: 1px solid rgba(2,140,158,.25);
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78)), rgba(2,140,158,.12);
    color: #37474F;
    text-decoration: none;
    cursor: default;
    box-shadow: 0 8px 18px rgba(0,0,0,.08);
    /* IMPORTANT: remove any "full-width bar button" look */
    justify-content: flex-start !important;
    margin-left: -10px;
    background-image: url("/images/svg/ix-header-security-grid.svg") !important;
    background-repeat: repeat !important;
    font-size: 1.9rem !important;
}

.ix-archived-pill-hov {
    cursor: pointer !important;
    padding: 10px 12px !important;
}
/* Circle pin */
.ix-credits-year--prior .ix-year-toggle.ix-archived-pill::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(2,140,158,.22);
    box-shadow: 0 2px 6px rgba(0,0,0,.06);
    z-index: 2;
}

/* Horizontal connector to the LEFT (to the container edge) */
.ix-credits-year--prior .ix-year-toggle.ix-archived-pill::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 100%;
    width: 18px;
    height: 2px;
    background: rgba(2,140,158,.22);
    border-radius: 2px;
}

/* Label + year chips */
.ix-credits-year--prior .ix-archived-pill__label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .2px;
    color: #37474F;
    white-space: nowrap;
}

.ix-credits-year--prior .ix-archived-pill__year {
    font-size: 12px;
    font-weight: 900;
    color: #028C9E;
    background: rgba(2,140,158,.10);
    border: 1px solid rgba(2,140,158,.18);
    padding: 3px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

/* Optional hover */
.ix-credits-year--prior .ix-year-toggle.ix-archived-pill-hov:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(0,0,0,.12);
}


/* =========================================================
   Archived Year (2024) — SVG disclosure arrow positioning
   ========================================================= */

/* Pill button layout */
.ix-archived-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem; /* space between arrow and text */
    padding-left: 0.9rem; /* slight inset from pill edge */
}


    /* Arrow icon */
    .ix-archived-pill .ix-deliverables-pointer-icon {
        width: 14px;
        height: 14px;
        flex: 0 0 auto;
        transform: rotate(0deg); /* closed = pointing right */
        transform-origin: center;
        transition: transform 180ms ease, opacity 180ms ease;
        opacity: 0.75;
    }

    /* Rotate arrow when expanded */
    .ix-archived-pill[aria-expanded="true"]
    .ix-deliverables-pointer-icon {
        transform: rotate(90deg); /* pointing down */
        opacity: 1;
    }

.ix-archived-pill__label {
    margin-left: -0.5rem;
}


/* Tooltip BELOW target → NO arrow at all */
#ix-tooltip.ix-tooltip--below::after {
    display: none;
}

/* Universal tooltip paragraph spacing */
.ix-tooltip-paragraph {
    margin: 8px 0; /* vertical spacing between paragraphs */
    line-height: 1.35;
    text-align: justify; /* ✅ left + right edges */
    text-justify: inter-word; /* ✅ stretch spaces between words */
    text-align-last: left; /* ✅ keep the last line normal */
}

    /* First paragraph tighter at top */
    .ix-tooltip-paragraph:first-child {
        margin-top: 0;
    }

    /* Last paragraph tighter at bottom */
    .ix-tooltip-paragraph:last-child {
        margin-bottom: 0;
    }

/* Title styling (already working, kept here for completeness) */
.ix-tooltip-title {
    display: block;
    color: #3FD1E3;
    font-weight: 600;
    margin-bottom: 2px;
}

/* Ensure the FIRST icon (Messages) can render above the next icon when needed */
.nav-icons .nav-icon-btn {
    z-index: 1;
}

    .nav-icons .nav-icon-btn:first-child {
        z-index: 2;
    }

    /* Hide when count is zero */
    .nav-badge[data-count="0"] {
        display: none;
    }




/* ============================================================
   INSTANT CHAT — Bubble + Date + Timestamp colors (RGBA / glass)
   Paste at the VERY BOTTOM of your CSS (overrides earlier rules)
   ============================================================ */



/* (2) Bubble base — glass edges + readable spacing */
.ix-chat-bubble {
    border-radius: 16px;
    padding: 0.62rem 0.9rem;
    border: 1px solid rgba(148,163,184,0.16);
    box-shadow: 0 14px 34px rgba(0,0,0,0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Text inside bubble */
.ix-chat-text {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.38;
}

/* CLIENT bubble — dark neutral glass (matches canvas, not shiny) */
.ix-chat-msg--client .ix-chat-bubble {
    background: linear-gradient( 180deg, rgba(30, 41, 59, 0.55), rgba(15, 23, 42, 0.55) );
    color: rgba(226, 232, 240, 0.95); /* soft light text */
    border-color: rgba(148, 163, 184, 0.22);
}


/* Tail feel (subtle) */
.ix-chat-msg--client .ix-chat-bubble {
    border-top-left-radius: 8px;
}

/* (4) INNOVENTECH bubble (right) — teal glass (NOT too loud) */
.ix-chat-msg--inno .ix-chat-bubble {
    background: linear-gradient( 180deg, rgba(2,140,158,0.30), rgba(2,140,158,0.18) );
    color: rgba(236,254,255,0.92);
    border-color: rgba(2,140,158,0.28);
}

/* Tail feel (subtle) */
.ix-chat-msg--inno .ix-chat-bubble {
    border-top-right-radius: 8px;
}

/* Optional: make links readable in both bubbles */
.ix-chat-bubble a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(255,255,255,0.45);
}

.ix-chat-msg--client .ix-chat-bubble a {
    text-decoration-color: rgba(15,23,42,0.28);
}

/* (5) Timestamp column (outside bubble) — clearer + stylistic */
.ix-chat-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.22rem;
}

.ix-chat-time {
    font-size: 0.72rem;
    line-height: 1;
    letter-spacing: 0.02em;
    padding: 0.18rem 0.42rem;
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,0.16);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Client time chip */
.ix-chat-msg--client .ix-chat-time {
    color: rgba(226,232,240,0.90);
    background: rgba(15,23,42,0.26);
    border-color: rgba(148,163,184,0.18);
}

/* Inno time chip */
.ix-chat-msg--inno .ix-chat-time {
    color: rgba(165,243,252,0.92);
    background: rgba(2,140,158,0.14);
    border-color: rgba(2,140,158,0.22);
}

/* (6) Small polish: spacing + max width stays as you set */
.ix-chat-thread {
    gap: 0.78rem;
}

.ix-chat-bubble {
    max-width: min(36rem, 72%);
}

/* If you want the bubbles to feel even more “glass”, uncomment:
.ix-chat-msg--client .ix-chat-bubble{ background: rgba(255,255,255,0.88); }
.ix-chat-msg--inno   .ix-chat-bubble{ background: rgba(2,140,158,0.22); }
*/




/* ============================================================
   DAY SEPARATOR — AMBER SYSTEM (PILL + HORIZONTAL RAILS)
   ============================================================ */


/* Horizontal separators (left & right of pill) */
.ix-chat-day-sep::before,
.ix-chat-day-sep::after {
    content: "";
    height: 2px;
    flex: 1;
    background: linear-gradient( to right, rgba(245,158,11,0.00), rgba(245,158,11,0.60) );
}

/* Mirror gradient for right side */
.ix-chat-day-sep::after {
    background: linear-gradient( to left, rgba(245,158,11,0.00), rgba(245,158,11,0.60) );
}





#ix-metadata-backdrop .ix-notes-history-body {
    background-color: #F8FAFC !important; /* your dark chat canvas */
    background-image: none !important;
    padding: 0.2rem 0.6rem 1rem 0.6rem;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    text-align: justify;
}

#ix-metadata-backdrop .ix-notes-history-modal {
    padding-bottom: 1rem !important;
}




/* Overlay that blocks the textarea when filters are active */
.ix-compose-filter-lock {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 12, 18, 0.72);
    backdrop-filter: blur(4px);
    color: #f8fafc;
    font-weight: 600;
    font-size: 0.9rem;
    text-align: center;
    padding: 0 1rem;
    border-radius: 14px;
    pointer-events: auto;
}










/* =========================================================
   CHAT LOG FILTERS — MIN CLEAN FROSTED THEME
   - Buttons (Year/Month/Day)
   - Pop menu container + options
   - Clear filters (amber action)
   - SVG chevron (no CSS chevron)
   - Hard-kill native <select> caret (the dark triangle)
   ========================================================= */



    /* Base dropdown button */
    #ix-consultlog-filters .ix-meta-select-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.65rem;
        height: 34px;
        padding: 0 0.85rem;
        border-radius: 999px;
        background: rgba(12, 18, 28, 0.55);
        border: 1px solid rgba(2, 140, 158, 0.30);
        color: rgba(226, 232, 240, 0.92);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        box-shadow: 0 6px 18px rgba(0,0,0,0.35);
        transition: background .2s ease, border-color .2s ease, color .2s ease, transform .12s ease;
    }

    /* Text */
    #ix-consultlog-filters .ix-meta-select-text {
        font-weight: 600;
        letter-spacing: 0.02em;
        font-size: 0.85rem;
    }

    /* Hover */
    #ix-consultlog-filters .ix-meta-select-toggle:hover {
        background: rgba(2, 140, 158, 0.10);
        border-color: rgba(2, 140, 158, 0.55);
        color: rgba(240, 253, 250, 0.98);
    }

    /* Focus */
    #ix-consultlog-filters .ix-meta-select-toggle:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px rgba(2, 140, 158, 0.35), 0 10px 22px rgba(0,0,0,0.40);
    }

    /* Open state (if you toggle aria-expanded on the button) */
    #ix-consultlog-filters .ix-meta-select-toggle[aria-expanded="true"] {
        background: rgba(2, 140, 158, 0.14);
        border-color: rgba(2, 140, 158, 0.70);
        color: rgba(240, 253, 250, 0.98);
        transform: translateY(-1px);
    }

    /* SVG Chevron */
    #ix-consultlog-filters .ix-meta-select-chevron {
        width: 16px;
        height: 16px;
        flex: 0 0 auto;
        opacity: 0.95;
        pointer-events: none;
        filter: drop-shadow(0 1px 0 rgba(0,0,0,0.55));
    }

    /* Optional: rotate when open */
    #ix-consultlog-filters .ix-meta-select-toggle[aria-expanded="true"] .ix-meta-select-chevron {
        transform: rotate(180deg);
    }

    /* Disabled day behavior: when select is disabled, make the button look disabled */
    #ix-consultlog-filters [data-meta-select="day"] .ix-meta-select-native:disabled ~ .ix-meta-select-toggle,
    #ix-consultlog-filters .ix-meta-select-toggle:disabled {
        opacity: 0.55;
        cursor: not-allowed;
        background: rgba(12, 18, 28, 0.40);
        border-color: rgba(148, 163, 184, 0.25);
    }

    /* Dropdown pop panel */
    #ix-consultlog-filters .ix-meta-select-pop {
        position: absolute;
        z-index: 50;
        min-width: 220px;
        margin-top: 0.45rem;
        padding: 0.4rem;
        border-radius: 14px;
        background: rgba(8, 12, 18, 0.86);
        border: 1px solid rgba(2, 140, 158, 0.28);
        box-shadow: 0 18px 40px rgba(0,0,0,0.55);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        overflow: hidden;
    }

        /* Options in the pop (whatever your JS injects) */
        #ix-consultlog-filters .ix-meta-select-pop .ix-meta-select-opt,
        #ix-consultlog-filters .ix-meta-select-pop button,
        #ix-consultlog-filters .ix-meta-select-pop [role="option"] {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.55rem 0.65rem;
            border-radius: 10px;
            background: transparent;
            border: 1px solid transparent;
            color: rgba(226, 232, 240, 0.92);
            font-size: 0.86rem;
            font-weight: 600;
            cursor: pointer;
            transition: background .15s ease, border-color .15s ease, color .15s ease;
        }

            #ix-consultlog-filters .ix-meta-select-pop .ix-meta-select-opt:hover,
            #ix-consultlog-filters .ix-meta-select-pop button:hover,
            #ix-consultlog-filters .ix-meta-select-pop [role="option"]:hover {
                background: rgba(2, 140, 158, 0.14);
                border-color: rgba(2, 140, 158, 0.35);
                color: rgba(240, 253, 250, 0.98);
            }

        #ix-consultlog-filters .ix-meta-select-pop .is-selected,
        #ix-consultlog-filters .ix-meta-select-pop [aria-selected="true"] {
            background: rgba(2, 140, 158, 0.20);
            border-color: rgba(2, 140, 158, 0.55);
            color: rgba(240, 253, 250, 0.98);
        }

    /* Clear filters (amber action button) */
    #ix-consultlog-filters .ix-meta-select-toggle--clear {
        background: rgba(12,18,28,0.55);
        border: 1px solid rgba(245,158,11,0.35);
        color: rgba(253,230,138,0.92);
    }

        #ix-consultlog-filters .ix-meta-select-toggle--clear:hover,
        #ix-consultlog-filters .ix-meta-select-toggle--clear:focus-visible {
            background: rgba(245,158,11,0.10);
            border-color: rgba(245,158,11,0.55);
            color: rgba(255,237,213,0.98);
        }

    /* =========================================================
   HARD FIX: remove native <select> caret / triangle
   - keep select for JS value only
   - do NOT render it at all
   ========================================================= */
    #ix-consultlog-filters select.ix-meta-select-native {
        display: none !important; /* removes native caret everywhere */
    }


.ix-meta-select-pop .ix-meta-select-opt,
.ix-meta-select-pop button,
.ix-meta-select-pop [role="option"] {

   padding: 0.18rem 0.6rem !important; /* tighter rows */
    /*border-radius: 7px;*/ /* less “puffy” hover */
}
/* === NAV DROPDOWNS (messages/notifications) === */
#ix-dd-messages,
#ix-dd-notifications {
    position: fixed; /* IMPORTANT: makes JS left/top work */
    z-index: 999999; /* above header */
    left: 0;
    top: 0; /* JS will overwrite */
}


.btn-logout {
    background-color: #37474F;
    color: #ffffff;
    border: 1px solid #37474F;
    padding: 6px 16px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 4px;
    transition: all 0.2s ease;
}

    .btn-logout:hover {
        background-color: #263238;
        border-color: #263238;
    }

#ix-tooltip::before,
#ix-tooltip::after {
    display: none !important;
    content: none !important;
}