/* =====  Scoped header (h3 or <p><strong>…</strong></p> before a list) ===== */

:root {
    /* Default colors for light mode */
    --bulma-primary: #4a90e2;
    --bulma-link: #3273dc;
    --bulma-success: #23d160;
    --bulma-warning: #ffdd57;
    --bulma-danger: #ff3860;
    --bulma-scheme-secondary: hsl(220deg 8.34% 28.51%);
    --bulma-scheme-main: #F5F6F6;
    --nstyle-hover: #cecdcd;
    --bulma-scheme-text: var(--bulma-text);
    --sidebar-size: 250px;
    --navbar-spacing: 40px
}

@media (prefers-color-scheme: dark) {
    :root {
        /* --bulma-scheme-main: hsl(220, 15%, 12%); */
        --bulma-scheme-main: #050505;
        --nstyle-hover: hsl(0, 0%, 17%);
        --bulma-scheme-secondary: hsl(220deg 8.34% 28.51%);
        --bulma-scheme-main-l: 12%; /* Darker background */
        --bulma-scheme-text: hsl(0, 0%, 95%);
        --bulma-primary: #6fa8dc;
        --bulma-link: #6fa8dc;
        --bulma-success: #51d88a;
        --bulma-warning: #ffce67;
        --bulma-danger: #ff6b83;
    }

    /* =====  header and list background ===== */
    #messages-box :is(h3, p:has(> strong)):has(+ ul, + ol),
    #messages-box :is(h3, p:has(> strong)):has(+ ul, + ol) + ul,
    #messages-box :is(h3, p:has(> strong)):has(+ ul, + ol) + ol {
        background-color: rgb(30, 30, 30);
    }

    /* =====  top-level list items ===== */
    #messages-box :is(h3, p:has(> strong)):has(+ ul, + ol) + ul > li,
    #messages-box :is(h3, p:has(> strong)):has(+ ul, + ol) + ol > li {
        border-bottom: 1px solid rgba(255,255,255,0.1);
        color: #ddd;
    }

    /* =====  custom dot on top-level items ===== */
    #messages-box :is(h3, p:has(> strong)):has(+ ul, + ol) + ul > li::before,
    #messages-box :is(h3, p:has(> strong)):has(+ ul, + ol) + ol > li::before {
        background-color: #FE5F55;
        opacity: .8;
    }

    #messages-box :is(h3, p:has(> strong)):has(+ ul, + ol) {
        box-shadow:
                rgba(255, 255, 255, 0.08) 0px 0.706592px 0.706592px -0.666667px,
                rgba(255, 255, 255, 0.08) 0px 1.80656px 1.80656px -1.33333px,
                rgba(255, 255, 255, 0.07) 0px 3.62176px 3.62176px -2px,
                rgba(255, 255, 255, 0.07) 0px 6.8656px 6.8656px -2.66667px,
                rgba(255, 255, 255, 0.05) 0px 13.6468px 13.6468px -3.33333px,
                rgba(255, 255, 255, 0.02) 0px 30px 30px -4px,
                rgba(175, 175, 175, 0.719) 0px 2px 1px -1px inset !important;
    }

    #messages-box :is(h3, p:has(> strong)):has(+ ul, + ol) + ul,
    #messages-box :is(h3, p:has(> strong)):has(+ ul, + ol) + ol {
        background: #1d1d1d !important;
        color: white !important;
        box-shadow:
                rgba(255, 255, 255, 0.08) 0px 0.706592px 0.706592px -0.666667px,
                rgba(255, 255, 255, 0.08) 0px 1.80656px 1.80656px -1.33333px,
                rgba(255, 255, 255, 0.07) 0px 3.62176px 3.62176px -2px,
                rgba(255, 255, 255, 0.07) 0px 6.8656px 6.8656px -2.66667px,
                rgba(255, 255, 255, 0.05) 0px 13.6468px 13.6468px -3.33333px,
                rgba(255, 255, 255, 0.02) 0px 30px 30px -4px,
                rgba(175, 175, 175, 0.719) 0px 2px 1px -1px inset !important;
    }

    #messages-box :is(h3, p:has(> strong)):has(+ ul, + ol) + ul > li,
    #messages-box :is(h3, p:has(> strong)):has(+ ul, + ol) + ol > li {
        color: white !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.116) !important;
    }

    /* =====  nested <ul> (inside an <ol> or <ul>) ===== */
    #messages-box :is(h3, p:has(> strong)):has(+ ul, + ol) + ul li ul,
    #messages-box :is(h3, p:has(> strong)):has(+ ul, + ol) + ol li ul {
        background: none;         /* inherit the dark card color */
        list-style: disc;         /* keep standard bullets */
    }
    #messages-box :is(h3, p:has(> strong)):has(+ ul, + ol) + ul li ul li,
    #messages-box :is(h3, p:has(> strong)):has(+ ul, + ol) + ol li ul li {
        color: #bbb;
        border: none;
    }

    /* =====  hover states ===== */
    #messages-box :is(h3, p:has(> strong)):has(+ ul, + ol) + ul > li:hover,
    #messages-box :is(h3, p:has(> strong)):has(+ ul, + ol) + ol > li:hover {
        background-color: rgba(255,255,255,0.05);
    }
}

#messages-box :is(h3, p:has(> strong)) {
    margin-top: 1em;
}

#messages-box :is(h3, p:has(> strong)):has(+ ul, + ol) {
    margin: 0;
    margin-top: 1em;
    padding: 0 20px;
    line-height: 50px;
    max-width: 75%;
    /* background: #FE5F55; */
    background-color: var(--bulma-scheme-main);
    color: #fff;
    font-weight: 700;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow:
            rgba(0, 0, 0, 0.08) 0px 0.706592px 0.706592px -0.666667px,
            rgba(0, 0, 0, 0.08) 0px 1.80656px 1.80656px -1.33333px,
            rgba(0, 0, 0, 0.07) 0px 3.62176px 3.62176px -2px,
            rgba(0, 0, 0, 0.07) 0px 6.8656px 6.8656px -2.66667px,
            rgba(0, 0, 0, 0.05) 0px 13.6468px 13.6468px -3.33333px,
            rgba(0, 0, 0, 0.02) 0px 30px 30px -4px, 
            rgb(255, 255, 255) 0px 3px 1px 0px inset;
}

/* =====  Scoped list container (ul or ol) ===== */
#messages-box :is(h3, p:has(> strong)):has(+ ul, + ol) + ul,
#messages-box :is(h3, p:has(> strong)):has(+ ul, + ol) + ol {
    margin: 0;
    margin-bottom: 20px;
    padding: 0;
    max-width: 75%;
    list-style: none;               /* hide default bullets/numbers */
    background: #fcfcfc;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    overflow: hidden;
    transition: all 0.2s 0.2s cubic-bezier(.7,.2,.17,1);
    box-shadow:
            rgba(0, 0, 0, 0.08) 0px 0.706592px 0.706592px -0.666667px,
            rgba(0, 0, 0, 0.08) 0px 1.80656px 1.80656px -1.33333px,
            rgba(0, 0, 0, 0.07) 0px 3.62176px 3.62176px -2px,
            rgba(0, 0, 0, 0.07) 0px 6.8656px 6.8656px -2.66667px,
            rgba(0, 0, 0, 0.05) 0px 13.6468px 13.6468px -3.33333px,
            rgba(0, 0, 0, 0.02) 0px 30px 30px -4px, 
            rgb(255, 255, 255) 0px 3px 1px 0px inset;
}

/* =====  Top-level list items (auto height) ===== */
#messages-box :is(h3, p:has(> strong)):has(+ ul, + ol) + ul > li,
#messages-box :is(h3, p:has(> strong)):has(+ ul, + ol) + ol > li {
    padding: 12px 20px 12px 22px;   /* room for custom dot */
    position: relative;
    border-bottom: 1px solid rgba(0,0,0,.06);
    color: #282829;
    cursor: default;
    transition: background 0.2s;
}
#messages-box :is(h3, p:has(> strong)):has(+ ul, + ol) + ul > li:last-child,
#messages-box :is(h3, p:has(> strong)):has(+ ul, + ol) + ol > li:last-child {
    border-bottom: none;
}

/* =====  Custom bullet dot for top-level items ===== */
/* #messages-box :is(h3, p:has(> strong)):has(+ ul, + ol) + ul > li::before,
#messages-box :is(h3, p:has(> strong)):has(+ ul, + ol) + ol > li::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%) scale(.7);
    width: .55em;
    height: .55em;
    border-radius: 50%;
    background: #282829;
    opacity: .65;
    transition: opacity .2s, transform .2s;
} */

/* =====  Hover state for top-level items ===== */
#messages-box :is(h3, p:has(> strong)):has(+ ul, + ol) + ul > li:hover,
#messages-box :is(h3, p:has(> strong)):has(+ ul, + ol) + ol > li:hover {
    background: #ededed;
}
#messages-box :is(h3, p:has(> strong)):has(+ ul, + ol) + ul > li:hover::before,
#messages-box :is(h3, p:has(> strong)):has(+ ul, + ol) + ol > li:hover::before {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

/* =====  Nested <ul> inside a list item ===== */
#messages-box :is(h3, p:has(> strong)):has(+ ul, + ol) + ul li ul,
#messages-box :is(h3, p:has(> strong)):has(+ ul, + ol) + ol li ul {
    margin: 8px 0 0;
    padding: 0 0 0 1.5em;
    list-style: disc;               /* standard bullets */
}
#messages-box :is(h3, p:has(> strong)):has(+ ul, + ol) + ul li ul li,
#messages-box :is(h3, p:has(> strong)):has(+ ul, + ol) + ol li ul li {
    padding: 6px 0;
    border: none;
    color: #282829;
    font-size: .9em;
}

/* =====  Strong text inside ANY list item ===== */
#messages-box :is(h3, p:has(> strong)):has(+ ul, + ol) + ul li strong,
#messages-box :is(h3, p:has(> strong)):has(+ ul, + ol) + ol li strong {
    color: #282829;
}

/* =====  Nested <ul> inside a list item ===== */
#messages-box :is(h3, p:has(> strong)):has(+ ul, + ol) + :is(ul,ol) li ul {
    margin: 8px 0 0;
    padding-left: 1.5em;
    list-style: disc;
}

/* =====  Nested <ol> inside a list item ===== */
#messages-box :is(h3, p:has(> strong)):has(+ ul, + ol) + :is(ul,ol) li ol {
    margin: 8px 0 0;
    padding-left: 1.5em;
    list-style: decimal;
}

/* =====  Nested list-items (both UL & OL) ===== */
#messages-box :is(h3, p:has(> strong)):has(+ ul, + ol) + :is(ul,ol) li > :is(ul,ol) li {
    padding: 6px 0;
    border: none;
    color: #282829;
    font-size: .9em;
}


@media (max-width: 768px) {
    /* remove the 75% cap on header and list at smaller viewports */
    #messages-box :is(h3, p:has(> strong)):has(+ ul, + ol),
    #messages-box :is(h3, p:has(> strong)):has(+ ul, + ol) + ul,
    #messages-box :is(h3, p:has(> strong)):has(+ ul, + ol) + ol {
        max-width: none;
    }
}

table.dataTable {
    background: var(--bulma-scheme-main) !important;
    border-radius: 20px !important;
}


/* Code Snippet Container */
.code-snippet-container {
    position: relative;
    border: 1px solid #dbdbdb;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    margin: 1.5rem 0;
    overflow: hidden;
    background-color: #fefefe;
}

/* Header with language label */
.code-snippet-header {
    background: #f5f5f5;
    color: #4a4a4a;
    font-size: 0.75rem;
    padding: 0.5rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e0e0e0;
}

/* Copy Button Styles */
.code-snippet-header .copy-btn {
    background: none;
    border: none;
    color: #4a4a4a;
    cursor: pointer;
    font-size: 0.75rem;
    transition: color 0.2s ease;
}

.code-snippet-header .copy-btn:hover {
    color: #3273dc;
}

/* Code Block Styling */
.code-snippet-container pre {
    margin: 0;
    padding: 1rem 1.25rem;
    overflow-x: auto;
    background-color: #fafafa;
    font-family: "Fira Code", Consolas, monospace;
    font-size: 0.85rem;
    line-height: 1.6;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    #messages-box ol,
    #messages-box ul {
        background-color: #1e1e1e;
        color: #e0e0e0;
    }

    .code-snippet-container {
        background-color: #1c1c1c;
        border-color: #333;
        box-shadow: none;
    }

    .code-snippet-header {
        background: #2a2a2a;
        color: #cfcfcf;
        border-bottom: 1px solid #333;
    }

    .code-snippet-header .copy-btn {
        color: #cfcfcf;
    }

    .code-snippet-header .copy-btn:hover {
        color: #4a90e2;
    }

    .code-snippet-container pre {
        background-color: #1e1e1e;
        color: #f5f5f5;
    }
}