/* =====  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
}


#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;
}