/*!
 * Graphwise Platform Documentation — custom styles
 * Version: 10.3.8 PROD
 */
/*********** layout **************/
.site-content {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.site-footer {
    margin-top: auto;
    padding-bottom: 30px;
}

/*********** typo **************/

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

html {
    font-size: 1rem;
}

@media (min-width: 768px) {
    .portal-header-navbar .logo {
        height: clamp(3.125rem, 1.696rem + 1.429vw, 4.375rem);
    }
}

body.theme2,
body>.theme2 {
    font-size: 1.125rem;
    /* Fallback */
    font-size: clamp(1rem, 0.286rem + 0.714vw, 1.625rem);
    color: #052744;
    font-family: 'Poppins', sans-serif;
}

body {
    background-color: #f2f2fa;
    color: #052744;
    font-family: 'Poppins', sans-serif;
}

.topic-content .breadcrumb {
    font-size: clamp(0.75rem, 0.321rem + 0.429vw, 1.125rem);
}

.btn,
.form-control,
button,
input[type=text] {
    font-size: clamp(0.75rem, 0.321rem + 0.429vw, 1.125rem);
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
}

.h1,
h1 {}

.h2,
h2 {}

.h3,
h3 {}

.h4,
h4 {}

.sm-simple a,
.sm-simple a {
    font-size: clamp(0.75rem, 0.321rem + 0.429vw, 1.125rem);
}

.portal-single-publication {
    float: none;
    width: 100%;
}

@media (min-width: 480px) {
    .portal-single-publication {
        width: 50%;
    }
}

@media (min-width: 768px) {
    .portal-single-publication {
        width: 33%;
    }
}

@media (min-width: 1440px) {
    .portal-single-publication {
        width: 25%;
    }
}

.portal-single-publication a {
    padding: clamp(16px, 3.5vw, 30px) clamp(18px, 5%, 36px);
}

.portal-single-publication h3 {
    font-weight: 700;
    font-size: clamp(0.95rem, 0.55rem + 0.5vw, 1.25rem);
    margin: 0.55em 0 0;
}

.portal-body-container {
    width: calc(100% - 60px) !important;
    margin: 0 30px;
    padding: 0;
}

@media (min-width: 768px) {
    .portal-body-container .portal-body-row {
        width: 90%;
        margin: auto;
    }
}

@media (min-width: 992px) {
    .portal-body-container .portal-body-row {
        width: 80%
    }
}

@media (min-width: 1200px) {
    .portal-body-container .portal-body-row {
        width: 60%
    }
}

main article p {
    line-height: 1.4em;
}

main article .procedure li p,
main article li.listitem p {
    margin: 0;
}

main article .footer-content {
    display: none;
}

.procedure>li,
li.listitem {
    margin-bottom: 5px;
}

ul li::marker {
    font-size: clamp(1.5rem, 0.929rem + 0.571vw, 2rem);
    line-height: clamp(1.3rem, 0.929rem + 0.571vw, 1.8rem);
    color: #001fff;
}

.theme2 .procedure>li::before {
    background-color: #001fff;
    width: clamp(1.5rem, 0.929rem + 0.571vw, 2rem);
    height: clamp(1.5rem, 0.929rem + 0.571vw, 2rem);
    line-height: clamp(1.5rem, 0.929rem + 0.571vw, 2rem);
    margin-top: 0;
    border-radius: 1.5rem;
    font-size: clamp(0.875rem, 0.304rem + 0.571vw, 1.375rem)
}

.theme2 .site-sidebar {
    background-color: transparent;
    display: block;
}

.theme2.colored-top .nav-site-sidebar {
    background: #f2f2fa;
    padding: 30px 0 20px;
}

ul.nav-site-sidebar li a {
    line-height: 1.3;
    font-weight: 400;
    font-size: clamp(0.875rem, 0.446rem + 0.429vw, 1.25rem)
}

.nav-site-sidebar ul a:hover {
    opacity: 0.8;
}

.theme2 .toc .glyphicon {
    margin-top: 3px;
    font-size: clamp(0.625rem, 0.339rem + 0.286vw, 0.875rem);
}

.section {
    padding: 0px;
}


/*********** tables **************/

table.rules-rows {
    background-color: transparent;
    width: 100%;
    margin-bottom: 30px;
}

.rules-rows th {
    color: #fff;
    background: #001fff;
}


.rules-rows td,
.rules-rows th {
    vertical-align: top;
    border: 1px solid #ddd !important;
}

.informaltable td p,
.informaltable th p,
.table td p,
.table th p {
    margin-bottom: 10px;
}


/*********** paligo start page **************/

/* Icons for PP SharePoint */
.pp-poolparty-sharepoint .cat-panel-1:before {
    content: "\f02c";
}

.pp-poolparty-sharepoint .cat-panel-2:before {
    content: "\f021";
}

.pp-poolparty-sharepoint .cat-panel-3:before {
    content: "\f1e6";
}

.pp-poolparty-sharepoint .cat-panel-4:before {
    content: "\f013";
}

.pp-poolparty-sharepoint .cat-panel-5:before {
    content: "\f0f6";
}

.pp-poolparty-sharepoint .cat-panel-6:before {
    content: "\f27b";
}

.pp-poolparty-sharepoint .cat-panel-7:before {
    content: "\f013";
}

/* Icons for Application Development Framework */
.pp-application-development-framework .cat-panel-1:before {
    content: "\f121";
}

.pp-application-development-framework .cat-panel-2:before {
    content: "\f109";
}

.pp-application-development-framework .cat-panel-3:before {
    content: "\f013";
}

.pp-application-development-framework .cat-panel-4:before {
    content: "\f0a1";
}

.pp-application-development-framework .cat-panel-5:before {
    content: "\f02d";
}

/* Icons for PP version 8.1 */
.pp-8-1 .cat-panel-1:before {
    content: "\f017";
}

.pp-8-1 .cat-panel-2:before {
    content: "\f01e";
}

.pp-8-1 .cat-panel-3:before {
    content: "\f0ac";
}

.pp-8-1 .cat-panel-4:before {
    content: "\f201";
}

.pp-8-1 .cat-panel-5:before {
    content: "\f27a";
}

.pp-8-1 .cat-panel-6:before {
    content: "\f0a1";
}

.pp-8-1 .cat-panel-7:before {
    content: "\f007";
}

.pp-8-1 .cat-panel-8:before {
    content: "\f121";
}

.pp-8-1 .cat-panel-9:before {
    content: "\f013";
}

.pp-8-1 .cat-panel-10:before {
    content: "\f055";
}

.pp-8-1 .cat-panel-11:before {
    content: "\f02e";
}

/* Icons for PP version 9.X */
.pp-pp2022r1 .cat-panel-1:before,
.pp-pp2022r2 .cat-panel-1:before,
.pp-pp2022r3 .cat-panel-1:before,
.pp-pp2024r1 .cat-panel-1:before,
.pp-pp2024r2 .cat-panel-1:before,
.pp-pp2025r1 .cat-panel-1:before {
    content: "\f02b";
}

.pp-pp2022r1 .cat-panel-2:before,
.pp-pp2022r2 .cat-panel-2:before,
.pp-pp2022r3 .cat-panel-2:before,
.pp-pp2024r1 .cat-panel-2:before,
.pp-pp2024r2 .cat-panel-2:before,
.pp-pp2025r1 .cat-panel-2:before {
    content: "\f021";
}

.pp-pp2022r1 .cat-panel-3:before,
.pp-pp2022r2 .cat-panel-3:before,
.pp-pp2022r3 .cat-panel-3:before,
.pp-pp2024r1 .cat-panel-3:before,
.pp-pp2024r2 .cat-panel-3:before,
.pp-pp2025r1 .cat-panel-3:before {
    content: "\f1e6";
}

.pp-pp2022r1 .cat-panel-4:before,
.pp-pp2022r2 .cat-panel-4:before,
.pp-pp2022r3 .cat-panel-4:before,
.pp-pp2024r1 .cat-panel-4:before,
.pp-pp2024r2 .cat-panel-4:before,
.pp-pp2025r1 .cat-panel-4:before {
    content: "\f013";
}

.pp-pp2022r1 .cat-panel-5:before,
.pp-pp2022r2 .cat-panel-5:before,
.pp-pp2022r3 .cat-panel-5:before,
.pp-pp2024r1 .cat-panel-5:before,
.pp-pp2024r2 .cat-panel-5:before,
.pp-pp2025r1 .cat-panel-5:before {
    content: "\f15c";
}

.pp-pp2022r1 .cat-panel-6:before,
.pp-pp2022r2 .cat-panel-6:before,
.pp-pp2022r3 .cat-panel-6:before,
.pp-pp2024r1 .cat-panel-6:before,
.pp-pp2024r2 .cat-panel-6:before,
.pp-pp2025r1 .cat-panel-6:before {
    content: "\f059";
}

.pp-pp2022r1 .cat-panel-7:before,
.pp-pp2022r2 .cat-panel-7:before,
.pp-pp2022r3 .cat-panel-7:before,
.pp-pp2024r1 .cat-panel-7:before,
.pp-pp2024r2 .cat-panel-7:before,
.pp-pp2025r1 .cat-panel-7:before {
    content: "\f02d";
}

.pp-pp2022r1 .cat-panel-8:before,
.pp-pp2022r2 .cat-panel-8:before,
.pp-pp2022r3 .cat-panel-8:before,
.pp-pp2024r1 .cat-panel-8:before,
.pp-pp2024r2 .cat-panel-8:before,
.pp-pp2025r1 .cat-panel-8:before {
    content: "\f0a1";
}

.pp-pp2022r1 .cat-panel-9:before,
.pp-pp2022r2 .cat-panel-9:before,
.pp-pp2022r3 .cat-panel-9:before,
.pp-pp2024r1 .cat-panel-9:before,
.pp-pp2024r2 .cat-panel-9:before,
.pp-pp2025r1 .cat-panel-9:before {
    content: "\f27a";
}

.pp-pp2022r1 .cat-panel-10:before,
.pp-pp2022r2 .cat-panel-10:before,
.pp-pp2022r3 .cat-panel-10:before,
.pp-pp2024r1 .cat-panel-10:before,
.pp-pp2024r2 .cat-panel-10:before,
.pp-pp2025r1 .cat-panel-10:before {
    content: "\f02d";
}

.pp-pp2022r1 .cat-panel-11:before,
.pp-pp2022r2 .cat-panel-11:before {
    content: "\f055";
}

.pp-pp2022r1 .cat-panel-12:before,
.pp-pp2022r2 .cat-panel-12:before {
    content: "\f02e";
}

.pp-pp2022r3 .cat-panel-11:before,
.pp-pp2024r1 .cat-panel-11:before,
.pp-pp2024r2 .cat-panel-11:before,
.pp-pp2025r1 .cat-panel-11:before {
    content: "\f02d";
}

.pp-pp2022r3 .cat-panel-12:before,
.pp-pp2024r1 .cat-panel-12:before,
.pp-pp2024r2 .cat-panel-12:before,
.pp-pp2025r1 .cat-panel-12:before {
    content: "\f055";
}

.pp-pp2022r3 .cat-panel-13:before,
.pp-pp2024r1 .cat-panel-13:before,
.pp-pp2024r2 .cat-panel-13:before,
.pp-pp2025r1 .cat-panel-13:before {
    content: "\f02e";
}

.portal-header:before {
    background-color: transparent;
}

.portal-header:after {
    opacity: 1;
    filter: none;
    background-position: center bottom !important;
}



.portal-single-publication .publication-icon i,
.portal-single-publication .publication-icon .fa {
    color: #001fff;
}


.portal-header .portal-search button {
    background-color: #001fff;
    border-radius: 4px;
}

.portal-header .portal-search button:hover {
    background-color: hsl(233, 100%, 40%);
}

.portal-content .portal-search-result {
    padding: 20px;
    background-color: #f2f2fa;
    position: relative;
    z-index: 0;
}

@media (min-width: 768px) {
    .portal-header {
        padding: 30px 50px;
        height: 400px;
    }
}

.publication-contents h4 {
    font-size: clamp(1rem, 0.286rem + 0.714vw, 1.625rem);
}

.publication-contents li {
    font-size: clamp(0.875rem, 0.446rem + 0.429vw, 1.25rem);
    font-weight: 400;
    line-height: 1.2;
}

.publication-contents .more-toc {
    font-weight: 400;
    font-size: clamp(0.875rem, 0.446rem + 0.429vw, 1.25rem);
    color: #001fff;
}

/* Primary color for links, buttons, sidebar, portal-header etc */
.titlepage h1.title,
.titlepage h2.title,
.titlepage h3.title {
    color: #052744;
    font-weight: 700;
}

.titlepage p.pubdate {
    font-size: clamp(1rem, 0.286rem + 0.714vw, 1.625rem);
    color: #888;
}

a,
.text-primary,
.btn-primary .badge,
.btn-link,
.pagination>li>a,
.pagination>li>span,
.nav-site-sidebar .active>a,
.publication-contents a:hover,
.publication-contents h4 a {
    color: #001fff;
}

a:hover,
a:focus,
a.text-primary:hover,
a.text-primary:focus,
.btn-link:hover,
.btn-link:focus,
.pagination>li>a:hover,
.pagination>li>span:hover,
.pagination>li>a:focus,
.pagination>li>span:focus {
    color: #0119c2;
}

.bg-primary,
.btn-primary,
.pagination>.active>a,
.pagination>.active>span,
.pagination>.active>a:hover,
.pagination>.active>span:hover,
.pagination>.active>a:focus,
.pagination>.active>span:focus {
    background-color: #001fff;
}

.portal-single-publication a:hover {
    color: #001fff;
}

.portal-single-publication .publication-icon {
    background: #f2f2fa;
    border-radius: 10%;
    width: clamp(2.75rem, 2rem + 1vw, 3.5rem);
    height: clamp(2.75rem, 2rem + 1vw, 3.5rem);
    line-height: clamp(2.75rem, 2rem + 1vw, 3.5rem);
    font-size: clamp(1.5rem, 1.2rem + 0.6vw, 2rem);
}

.bg-primary,
.btn-primary,
.publications-condensed .portal-single-publication a,
.tool-search-form .search-field,
.pager li>a:hover,
.pager li>span:hover,
.colored-top .site-sidebar-header {
    background-color: #001fff
}

.toolbar,
.colored-top .site-sidebar-header {
    background-color: #220F60
}

.btn-primary,
.nav .open>a,
.nav .open>a:hover,
.nav .open>a:focus,
.colored-top .site-sidebar-header {
    border-color: #001fff;
}

.colored-top .site-sidebar-header {
    border: none;
    text-align: left;
}

.site-sidebar ul.toc>li {
    border-bottom: 0.5px solid #e0e0e0;
}

.portal-footer {
    background: #220F60;
    color: #ffffff;
}

.portal-footer .inner,
.site-footer .inner {
    font-size: clamp(0.75rem, 0.321rem + 0.429vw, 1.125rem);
}

/* media objects */
.mediaobject img {
    margin: 30px !important;
    box-shadow: 0 0 30px 0 rgba(34, 15, 96, 0.15);
    max-width: calc(100% - 60px)
}

/* info boxes, etc */
.important,
.note {
    background-color: #dff5f1;
    border-left-color: #37af98;
}

.important:before,
.note:before {
    color: #37af98;
}

.tip,
.notice {
    background-color: rgba(0, 173, 238, 0.08);
    border-left-color: #001fff;
}

.tip:before,
.notice:before {
    color: #001fff;
}

.warning {
    border-left-color: #fe7f2d;
    background-color: rgba(254, 127, 45, 0.08);
}

.warning:before {
    color: #fe7f2d;
}

.warning.danger {
    border-left-color: #cc003f;
    background-color: rgba(204, 0, 63, 0.05);
}

.warning.danger:before {
    color: #cc003f;
}

.caution {
    border-left-color: #FFBF3F;
    background-color: rgba(255, 191, 63, 0.05);
}

.caution:before {
    color: #FFBF3F;
}

.languages .dropdown-toggle {
    display: none;
}

.section {
    padding: 0px 0;
}


div.abstract {
    display: none;
}

.nav-site-sidebar ul ul ul ul a {
    padding-left: 80px;
}

.nav-site-sidebar ul ul ul ul ul a {
    padding-left: 95px;
}

.nav-site-sidebar ul ul ul ul ul ul a {
    padding-left: 105px;
}

.nav-site-sidebar ul ul ul ul ul ul ul a {
    padding-left: 115px;
}



/* Styles for the GraphSearch */

/* Welcome heading — "Welcome, I'm Teo" (GWKH-679) */
.portal-header .inner .welcome-icon {
    display: block;
    box-sizing: border-box;
    width: 96px;
    height: 96px;
    margin: 0 auto -8px;
    padding: 0;
}

.portal-header .inner .welcome-icon .welcome-gif {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.portal-header .inner h1.welcome-heading {
    margin-top: .3em;
    margin-bottom: .15em;
    color: #ffffff;
}

.portal-header .inner h1.welcome-heading .welcome-name {
    font-weight: 700;
    color: #b388ff; /* solid accent, stands out on the dark hero (no gradient) */
}

.portal-header .inner .welcome-subline {
    max-width: 100%;
    margin: 0 auto 1.1em;
    color: #ffffff;
    font-weight: 400;
    line-height: 1.35;
    font-size: clamp(1rem, 0.8rem + 0.5vw, 1.25rem);
}

/* Marta logo — "Ask Marta" pill that sits in the header navbar, to the left of
   the "Support Desk" link. Links to the Ask Marta page. */
.marta-nav-item {
    display: flex;
    align-items: center;
}
/* Scoped through the nav item (not the header) so the pill styles apply in
   every top-nav menu — the start page's and the copy the theme puts in the
   topic pages' toolbar. Specificity + !important keep the SmartMenus nav rules
   (display:block, padding, background:transparent !important) from winning. */
.top-nav-menu li.marta-nav-item a.marta-logo {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 4px 14px 4px 5px !important;
    background: #ffffff !important;
    border: none;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.top-nav-menu li.marta-nav-item a.marta-logo:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(230, 0, 126, 0.28);
    text-decoration: none;
}
/* Kill the theme's default (blue) link focus outline so nothing lingers after
   a click; keyboard users still get a clean pink ring via :focus-visible. */
.top-nav-menu li.marta-nav-item a.marta-logo:focus {
    outline: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.top-nav-menu li.marta-nav-item a.marta-logo:focus-visible {
    outline: 2px solid #e6007e;
    outline-offset: 2px;
}
.marta-label {
    font-size: 14px;
    font-weight: 600;
    color: #201b4d;
    white-space: nowrap;
    transition: color 0.18s ease;
}
.marta-logo:hover .marta-label {
    color: #e6007e;
}
.marta-badge {
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    padding: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffe3f1;
    border-radius: 50%;
    color: #e6007e; /* Marta pink */
    transition: transform 0.18s ease;
}
.marta-logo:hover .marta-badge {
    transform: scale(1.06);
}
.marta-badge .marta-gif {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Tooltip opens downward, left-aligned to the pill. Shows on hover and on
   keyboard focus only (not after a mouse click).
   Sized to its text on one line (`max-content` + `nowrap`, no max-width), so the
   gap left of the first word matches the gap right of the last one — a wrapped
   line would leave a ragged right edge inside a box the width of the longest
   line. */
.marta-logo .marta-tooltip {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: max-content;
    max-width: none;
    white-space: nowrap;
    padding: 10px 12px;
    background: #201b4d;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
    pointer-events: none;
    z-index: 1;
}
.marta-logo .marta-tooltip::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 26px;
    border: 6px solid transparent;
    border-bottom-color: #201b4d;
}
.marta-logo:hover .marta-tooltip,
.marta-logo:focus-visible .marta-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/* After a click (tab opened / navigated away) reset the pill to its initial
   state — closed tooltip, no lift, no hover colouring — even though the pointer
   is technically still over it. All cleared on mouseleave. */
.marta-logo.marta-dismissed .marta-tooltip {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(4px) !important;
}
.top-nav-menu li.marta-nav-item a.marta-logo.marta-dismissed {
    transform: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}
.marta-logo.marta-dismissed .marta-label {
    color: #201b4d;
}
.marta-logo.marta-dismissed .marta-badge {
    transform: none;
}

.portal-header {
    height: auto !important;
    position: relative;
}

.portal-header-navbar {
    z-index: 2;
}

.portal-header-navbar+.inner {
    margin-top: 40px !important;
}

.toolbar-tools {
    float: right;
    width: 84%
}

form.portal-search {
    position: relative;
    width: 760px;
    margin: 0 auto;
    max-width: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 10px;
}

.portal-header form.portal-search .search-field {
    float: none;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    font-size: clamp(0.875rem, 0.304rem + 0.571vw, 1.375rem)
}

form.portal-search > button {
    float: none;
    flex: 0 0 auto;
}

form.portal-search .search-field.focused {
    border: 2px solid #e57200;
    padding: 13px;
}

form.tool-search-form {
    margin: 0 !important;
    display: block;
    position: relative;
}

form.tool-search-form .search-field {
    background-color: #ffffff;
    border: 0;
    color: #333;
    padding: 10px 15px;
    border-radius: 3px;
}

form.tool-search-form .search-field::placeholder {
    color: #858585;
}

form.portal-search button i:before {
    content: "\f002" !important;
}

div.site-content .tool-input {
    float: left;
    width: 400px;
}

div.site-content .tool-search {
    float: left;
    background-color: #001fff;
    border-radius: 4px;
    box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.12), 0 7px 10px -5px rgba(0, 0, 0, 0.15);
}

div.site-content .tool-search:hover {
    background-color: #0119c2;
}

div.site-content .tool-search i {
    padding: 12px;
}

/* "Ask Theo" — the same pill as "Ask Marta", in the same nav slot: left of
   "Support Desk". It stands in for Marta on every page but the start page,
   where Theo is already on screen and Marta keeps the slot.
   The selector goes through .top-nav-menu on purpose: SmartMenus' `.sm li`
   resets margin to 0 and would out-specify a lone `.ask-theo-nav-item`, leaving
   the pill flush against the link beside it. */
.top-nav-menu li.ask-theo-nav-item {
    display: flex;
    align-items: center;
    margin-right: 10px;
}

.ask-theo {
    box-sizing: border-box;
    position: relative; /* anchors .ask-theo__tooltip */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px 5px 5px;
    border: 0;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    /* A <button> doesn't inherit the page font — without this the pill and its
       tooltip render in the UA default while Marta's (an <a>) get Poppins. */
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.ask-theo:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(179, 136, 255, 0.45);
}

/* Kill the theme's default focus outline so nothing lingers after a click;
   keyboard users still get a clean purple ring via :focus-visible. */
.ask-theo:focus {
    outline: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.ask-theo:focus-visible {
    outline: 2px solid #220F60;
    outline-offset: 2px;
}

.ask-theo__label {
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    color: #201b4d;
    white-space: nowrap;
}

/* Tooltip: the same one Marta's pill carries (see .marta-tooltip) — same navy
   box, same downward arrow, same hover/focus-visible reveal — so the two pills
   read as one component. Sized to its text on one line, so the padding either
   side of it is equal. */
.ask-theo .ask-theo__tooltip {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: max-content;
    max-width: none;
    white-space: nowrap;
    padding: 10px 12px;
    background: #201b4d;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
    pointer-events: none;
    z-index: 1;
}

.ask-theo .ask-theo__tooltip::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 26px;
    border: 6px solid transparent;
    border-bottom-color: #201b4d;
}

.ask-theo:hover .ask-theo__tooltip,
.ask-theo:focus-visible .ask-theo__tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* After a click the pill goes back to its resting state — closed tooltip, no
   lift — even though the pointer is still over it. Cleared on mouseleave. */
.ask-theo.ask-theo--dismissed .ask-theo__tooltip {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(4px) !important;
}

.ask-theo.ask-theo--dismissed {
    transform: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.ask-theo.ask-theo--dismissed .ask-theo__badge {
    transform: none;
}


/* --- Both pills inside the hamburger panel ---------------------------------
   Below the nav's breakpoint the pills stack with the rest of the links in a
   ~300px dropdown pinned to the right edge of the screen (.navbar-collapse.in).
   The desktop tooltip doesn't survive that move: it is a single nowrap line
   ~300px wide anchored to the pill's left edge, so it runs off screen, and the
   links below it — SmartMenus positions them, so they paint later — cover the
   box.
   Anchoring it to the list item instead of the pill caps it at the panel's
   width: still sized to its text when that fits (equal space either side),
   wrapping when it doesn't, and on screen at any width. The item is lifted
   above the ones after it so the tooltip stays on top.
   `.in` is only ever set while the panel is open, so none of this reaches the
   pills in the full-width nav. */
.navbar-collapse.in li.marta-nav-item,
.navbar-collapse.in li.ask-theo-nav-item {
    position: relative;
    z-index: 100;
}

.navbar-collapse.in .top-nav-menu li.marta-nav-item a.marta-logo,
.navbar-collapse.in li.ask-theo-nav-item .ask-theo {
    position: static;
}

/* Capped at the width of the menu, which is what the panel shrink-wraps around:
   anything wider sticks out of the panel, and under 768px Bootstrap turns the
   panel into a scroller (overflow: auto), which would cut it off. So the box
   wraps instead of running off screen, at any width. */
.navbar-collapse.in li.marta-nav-item .marta-tooltip,
.navbar-collapse.in li.ask-theo-nav-item .ask-theo__tooltip {
    max-width: 100%;
    white-space: normal;
}

/* The version picker is a second menu tree (ul.version-menu), a sibling that
   follows .top-nav-menu inside the panel. SmartMenus gives every tree
   `position: relative; z-index: 9999`, so the two are stacking contexts at the
   same level and the later one wins — no z-index on the pill's item can lift
   the tooltip out of its own tree. The nav menu has to outrank the version menu
   as a whole. Only while the panel is open: side by side in the full-width nav
   they never overlap, and the version dropdown must keep its own stacking. */
.navbar-collapse.in ul.top-nav-menu {
    z-index: 10000;
}

/* …and the search field covers the bottom of the panel. It sits outside the
   navbar with z-index 1000 (form.portal-search) while .portal-header-navbar is
   a fixed element with z-index 2, so that 2 caps everything the navbar
   contains, however high the z-index inside. Lifting the navbar over the form
   while the panel is open puts the tooltip — and the version picker under it,
   which the theme hides the same way — back on top. Scoped with :has() so the
   header keeps its usual stacking the rest of the time; browsers without it
   just keep today's behaviour. */
.portal-header-navbar:has(.navbar-collapse.in) {
    z-index: 1001;
}


/* Theo's start-page animation, recoloured to #220f60 on white (see THEO_ICON).
   No badge behind it: the artwork's backdrop is the pill itself, so the icon
   sits on the white with nothing around it.
   Clipped to a disc because the artwork is square and the pill is fully
   rounded: the corners of a 30px square reach 21.2px from the centre of a
   20px cap, i.e. they'd poke past the pill's edge onto the navy header. */
.ask-theo__badge {
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    display: inline-flex;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    transition: transform 0.18s ease;
}

.ask-theo:hover .ask-theo__badge {
    transform: scale(1.06);
}

.ask-theo__badge .ask-theo-gif {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


div.site-content .tool-print.print-icon,
div.site-content .navbar-toggle {
    float: right;
    margin-top: 10px;
}

div.site-content .navbar-collapse.collapse {
    float: none;
    position: absolute;
    right: 40px;
    top: 10px;
    margin: 0;
}

div.site-content .sm-simple a {
    padding: 11px 10px;
}

.progressbar {
    /* width/left positioned dynamically by JS to match the search input.
       Defaults below are fallbacks for the tool-search-form context. */
    height: 3px;
    background: #FFF none repeat scroll 0% 0%;
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    z-index: 5;
}

form.tool-search-form .progressbar {
    width: 100%;
}

.progressbar .progressbar-overlay {
    background: url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw==");
    height: 100%;
    opacity: 20%;
}

.suggestions {
    /* left/top/width positioned dynamically by JS to match the search input. */
    position: absolute;
    max-height: 300px;
    border: 1px solid rgba(0, 0, 0, 0.16);
    border-radius: 5px;
    left: 0;
    top: 100%;
    width: 100%;
    margin-top: 0;
    z-index: 20;
    display: none;
    overflow: auto;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
    background: #fff;
}

form.tool-search-form .suggestions {
    position: absolute;
    width: 100%;
    top: 38px;
}

.suggestion-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.suggestion-list li.suggestion {
    text-align: left;
    padding: 5px;
    font-family: inherit;
    border-bottom: 1px solid rgba(0, 0, 0, 0.16);
    cursor: pointer;
    background-color: white;
    color: rgb(51, 51, 51);
}

.suggestion-list li.suggestion .suggestion-label {
    font-size: clamp(0.875rem, 0.446rem + 0.429vw, 1.25rem);
    font-weight: 700;
}

.suggestion-list li.suggestion .suggestion-context {
    font-style: italic;
    font-size: clamp(0.75rem, 0.321rem + 0.429vw, 1.125rem);
}

.suggestion-list li.suggestion .highlight {
    color: #021fff
}

.suggestion-list li.suggestion.selected {
    background-color: #001fff;
    color: white;
}

.suggestion-list li.suggestion.selected .highlight {
    color: white;
}

@media only screen and (min-width: 768px) {

    .facet-container {
        float: left;
        width: 35%;
        padding-right: 40px;
    }

    .search-container {
        float: right;
        width: 65%;
    }

}

.search-container h2 {
    clear: both;
}

body .collapse-sidebar-nav .site-content {
    /*	padding-left: calc(100% / 12);*/
}

.search-container li.searchresultitem,
.content-search-result li.searchresultitem {
    margin-bottom: 2em;
    padding: 0;
    border: 0;
}

.search-container li.searchresultitem h3,
.content-search-result li.searchresultitem h3,
.ai-result-list li.searchresultitem h3 {
    margin-top: 0.7em;
    margin-bottom: 0.5em;
    font-size: clamp(1.25rem, 0.821rem + 0.429vw, 1.625rem);
}

.search-container li.searchresultitem p,
.content-search-result li.searchresultitem p,
.ai-result-list li.searchresultitem p {
    margin-bottom: 0.7em;
    color: #333;
    font-weight: 400;
    font-size: clamp(1rem, 0.571rem + 0.429vw, 1.375rem);
    line-height: 1.3em;
}

.facet-container h3 {
    margin-bottom: 20px;
    font-size: clamp(1.25rem, 0.821rem + 0.429vw, 1.625rem);
    clear: both;
    margin-top: 0;
}

.facet-container li {
    list-style: none;
}

.facet-container button {
    border: none;
    padding: 0.5em 1.5em;
    text-transform: lowercase;
    color: #fff;
    font-weight: 400;
    background-color: #001fff;
    border-radius: 4px;
    margin: 0 1em 1em 0;
    float: left;
    font-size: clamp(0.875rem, 0.304rem + 0.571vw, 1.375rem)
}

.facet-container button:hover {
    background-color: hsl(233, 100%, 40%);
}

.facet-container button i {
    padding-right: 0.3em;
}

.facet-container li {
    position: relative;
    display: inline-block;
    width: 100%;
    float: left;
    font-size: clamp(0.875rem, 0.446rem + 0.429vw, 1.25rem);
    line-height: 1.3;
}

.facet-list {
    float: left;
    padding: 30px 30px 20px;
    box-shadow: 0 0 30px rgb(34, 15, 96, 0.15);
    background: #fff;
    margin-bottom: 30px;
    width: 100%;
    line-height: 1.3;
}

.facet-container li a {
    color: inherit;
}

.facet-container li.active>a {
    color: #001fff;
}

.facet-container li.active.searched>a {
    color: #97999B;
    pointer-events: none;
}

.facet-container ul.top-facet>li.active.searched>a:before {
    color: #97999B;
}

.facet-container ul.top-facet {
    width: 100%;
    float: left;
    padding: 0;
}

.facet-container ul.top-facet>li {
    border-bottom: 0.5px solid #e0e0e0;
}

.facet-container ul.top-facet>li:last-child {
    border-bottom: none;
}

.facet-container ul.top-facet>li>a {
    padding: 5px 0;
    display: flex;
}

.facet-container ul.top-facet>li>a:hover {
    color: #000000;
}

.facet-container ul.top-facet>li.active>a:hover {
    color: #220F60;
}

.facet-container ul.top-facet>li>a:before {
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    text-decoration: inherit;
    content: "\f0c8";
    margin-right: 5px;
    color: #d7d7d7;
}

.facet-container ul.top-facet>li.active>a:before {
    content: "\f14a";
    color: #001fff;
}

.facet-container ul.top-facet>li>a:hover:before {
    color: #c6c6c6;
}

.facet-container ul.top-facet>li.active>a:hover:before {
    color: #001fff;
}

.facet-container ul.top-facet>li>a span {
    margin-left: auto;
}

.facet-container ul.facet {
    padding: 0 0 10px 15px;
}

.facet-container ul.facet li {
    padding-bottom: 5px;
}

.facet-container a.expand {
    text-align: center;
    clear: both;
    margin: 10px auto;
    display: block;
    font-size: 13px;
    padding: 5px;
    border: 1px solid #001fff;
}

.facet-container a.expand.disabled {
    border: 1px solid #97999B;
    color: #97999B;
}

.facet-container a.expand:hover {
    background-color: #001fff;
    color: #fff;
}

.facet-container a.expand.disabled:hover {
    background-color: #97999B;
    color: #fff;
}

footer .copyright.col-md-3 {
    height: 25px;
    padding-top: 5px;
}

footer .powered-by {
    float: right !important;
    height: 25px;
}

footer .powered-by img {
    height: 24px;
    margin: 0 5px;
}

footer .powered-by a {
    font-weight: bold;
}

footer .powered-by a.white {
    color: #FFF;
}

footer .powered-by a.black {
    color: #333;
}

/***************************************/
/* Popup window                        */
/***************************************/

.popup-container {
    height: 260px;
    width: 460px;
    position: fixed;
    right: 50px;
    bottom: 30px;
    background: #001a72;
    border-radius: 5px;
    box-shadow: 1px 1px 3px 0 rgba(2, 2, 2, .23);
    background-size: 140px;
    background-position: 10px center;
    background-repeat: no-repeat;
}

@media only screen and (max-width: 767px) {
    .popup-container {
        width: 100%;
        bottom: 0;
        height: auto;
        right: 0;
    }
}

.popup-content {
    padding: 50px 20px 50px 180px;
    color: #fff;
    text-align: left;
    font-family: 'Source Sans Pro', sans-serif;
}

.popup-title {
    margin: 0 0 10px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1em;
}

.popup-text {
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
}

.popup-text p {
    margin: 0 0 1em;
}

.popup-text a {
    color: #fff;
    background-color: #f07d2e;
    font-size: 16px;
    font-weight: 700;
    padding: 10px 30px;
    display: inline-block;
}

.popup-close {
    height: 30px;
    width: 30px;
    position: absolute;
    right: 10px;
    top: 10px;
    border: 1px none #fff;
    border-radius: 30px;
    color: #202047;
}

.popup-close i:before {
    content: "\f00d";
    font-size: 20px;
}

/* sidebar toggle */
.collapsible-sidebar-nav .collapse-sidebar-nav .site-sidebar {
    pointer-events: none;
}

.site-sidebar-header {
    position: relative;
    border: none;
    pointer-events: all;
}

.collapsible-sidebar-nav .collapse-sidebar-nav .site-sidebar {
    overflow: hidden;
}

.collapsible-sidebar-nav .collapse-sidebar-nav .site-sidebar>.nav-site-sidebar {
    display: block;
    pointer-events: all;
    margin-left: 0;
    width: 30px;
}

.collapsible-sidebar-nav .collapse-sidebar-nav .site-sidebar>ul.toc>li {
    visibility: hidden;
}

.site-sidebar .logo {
    margin-left: 45px;
    height: 65px;
}

.site-sidebar-header button.navbar-toggle {
    background: #4d3b85;
    display: inline-block !important;
    vertical-align: middle;
    position: absolute;
    margin-left: 0 !important;
    border-radius: 0;
    height: 100%;
    left: 0;
    margin-right: 5px;
    width: 30px;
}

.site-sidebar-header button.navbar-toggle:before {
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    content: "\f104";
    color: #ffffff;
    font-size: 30px;
    vertical-align: bottom;
}

.collapse-sidebar-nav .site-sidebar-header button.navbar-toggle:before {
    content: "\f105";
}

.site-sidebar-header button.navbar-toggle span.icon-bar {
    display: none;
}


/* responsive style */

.navbar-fixed-top .navbar-collapse {
    box-shadow: none;
}

@media (max-width: 1062px) {
    .navbar-fixed-top .navbar-collapse.collapse {
        display: none !important;
    }

    .navbar-fixed-top .navbar-collapse.in {
        display: block !important;
    }

    .navbar-fixed-top .navbar-collapse.collapsing {
        display: none !important;
    }
}

@media (max-width: 1199px) {
    .toolbar-tools {
        width: 76%;
    }
}

@media (max-width: 767px) {
    .toolbar-tools {
        width: 100%;
    }

    .fixed-toolbar .toolbar {
        top: 30px;
    }

    .site-sidebar {
        width: 100%;
    }

    .site-sidebar .site-sidebar-header>a img {
        display: none;
    }

    .site-sidebar .site-sidebar-header>a {
        background: #0c2240 url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI3LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxNDguOSAxNDguOSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTQ4LjkgMTQ4Ljk7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojMDBBREVFO30KPC9zdHlsZT4KPGc+Cgk8cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjU2LjEsMTIzLjUgNjcuNCwxMjUuNCA4MC41LDU1LjQgNjksNTMuNiAJIi8+Cgk8cGF0aCBjbGFzcz0ic3QwIiBkPSJNODEsMjQuNWMtMzUtNS45LTU5LjUsMTUuNi01OS41LDE1LjZsMTEwLDE4LjZDMTMxLjUsNTguNywxMTYsMzAuNCw4MSwyNC41eiIvPgo8L2c+Cjwvc3ZnPgo=) no-repeat 0 0;
        display: block;
        width: 30px;
        height: 35px;
    }

    .site-sidebar-header button.navbar-toggle {
        top: 30px;
    }

    .colored-top .nav-site-sidebar {
        overflow-y: auto;
        position: absolute;
        top: 64px;
        bottom: 0;
    }

    div.site-content .tool-input {
        width: calc(100% - 150px);
        min-width: 150px;
        margin-left: 20px;
    }

    .fixed-toolbar .site-content {
        padding-top: 140px;
    }
}

@media (max-width: 350px) {
    div.site-content .navbar-collapse.collapse {
        top: 100px;
    }
}

/* Topic-page toolbar: below this width the nav folds into the hamburger.
   The threshold used to be 1650px, which hid "Ask Theo" — the only way back to
   the agent from a topic page — on any ordinary laptop. The nav is 488px wide
   and anchored 40px from the right, so it starts overlapping the search field
   just under 1200px; 1250px is the lowest it can go with real clearance (~55px
   at 1251px), and it matches the breakpoint the AI answer columns already use. */
@media (max-width: 1250px) {
    .toolbar-tools .navbar-collapse.collapse {
        display: none !important;
        top: 50px !important;
    }

    .toolbar-tools .navbar-collapse.in {
        display: block !important;
    }

    .navbar-toggle {
        display: inline-block;
    }
}

@media (min-width: 1251px) {
    .navbar-toggle {
        display: none;
    }
}


.navbar-collapse.in {
    padding: 20px;
    max-width: 300px;
    float: right;
    background: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.navbar-collapse.in ul li {
    float: none;
}

.navbar-collapse.in ul li a {
    color: #28b0eb !important;
    padding: 6px 0;
}

.navbar-collapse.in ul li a:hover,
.navbar-collapse.in ul li a:focus {
    color: #000000 !important;
}

main article,
.pager,
.theme2 .site-footer {
    width: calc(100% - 30px);
    margin-left: 30px;
}

@media (min-width: 768px) {
    .portal-header .navbar-toggle {
        display: block !important;
    }

    .navbar-header {
        float: none;
    }
}

/* version menu */
.navbar-right.navbar-collapse ul.version-menu>li>a {
    border: 1px solid #fff;
    border-radius: 30px;
    padding: 11px 20px;
}

.toolbar-tools .navbar-collapse ul.version-menu>li>a {
    border: 1px solid #fff;
    border-radius: 15px;
    margin: 6px 0;
    padding: 5px 10px;
}

.toolbar-tools .navbar-collapse.in ul.version-menu>li>a {
    border: 1px solid #001fff;
    margin: 0;
}

.toolbar-tools .navbar-collapse.in ul.version-menu>li>a:hover {
    border-color: #000000;
}

@media (min-width: 769px) {
    .navbar-collapse ul.version-menu ul {
        padding: 10px;
    }
}

@media (max-width: 1062px) {
    .navbar-collapse ul.version-menu>li>a {
        border: 1px solid #001fff;
        border-radius: 15px;
        margin: 0;
        padding: 5px 10px;
    }

    .navbar-collapse ul.version-menu>li>a:hover {
        border-color: #000000;
    }

    .navbar-collapse ul.version-menu>li>a .caret {
        margin-right: 8px;
    }
}

@media (min-width: 1063px) {
    .navbar-collapse.collapse {
        display: block !important;
    }

    .portal-header .navbar-toggle {
        display: none !important;
    }

    .navbar-header {
        float: left;
    }
}

#accordion-toggle-btn {
    position: fixed;
    top: 6rem;
    right: 25px;
    z-index: 0;

    background: #DF367C;
    color: white;
    border: none;
    border-radius: 25px;

    padding: 12px 18px;
    font-size: 14px;
    font-weight: 600;

    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);

    transition: all 0.2s ease;
}

#accordion-toggle-btn:hover {
    background: #220F60;
    transform: translateY(-2px);
}

/** Checkbox AI **/
/* ===== AI mode switch — Google-style animated gradient pill ===== */
/* @property lets the conic-gradient angle be smoothly animated.
   Modern browsers (Chrome/Edge 85+, Safari 16+, Firefox 128+) animate it;
   older ones show a static rotating gradient as fallback. */
@property --ai-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.ai-switch {
    /* gradient palette (Google-ish: blue → purple → pink → amber) */
    --ai-c1: #4285f4;
    --ai-c2: #9b72cb;
    --ai-c3: #d96570;
    --ai-c4: #f4b400;

    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    /* height + marginTop are set dynamically by JS to match the input */
    height: 40px;
    padding: 0 14px;
    border-radius: 30px;
    border: 2px solid transparent;
    /* double background: solid white interior + animated gradient ring */
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(120deg,
            var(--ai-c1), var(--ai-c2), var(--ai-c3), var(--ai-c4),
            var(--ai-c1), var(--ai-c2), var(--ai-c3), var(--ai-c4))
            border-box;
    background-size: auto, 300% 100%;
    background-position: 0 0, 0% 0;
    animation: ai-gradient-shift 6s linear infinite;

    color: #202124;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
    font-family: inherit;
    cursor: pointer;
    user-select: none;
    position: relative;
    flex: 0 0 auto;
    transition: transform 0.18s ease, box-shadow 0.25s ease;
}

.ai-switch:hover {
    box-shadow: 0 2px 12px rgba(155, 114, 203, 0.35);
}

.ai-switch:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(155, 114, 203, 0.4);
}

.ai-switch:active:not([aria-disabled="true"]) {
    transform: scale(0.96);
}

.ai-switch__icon {
    display: inline-flex;
    line-height: 0;
    transition: transform 0.5s ease;
}

.ai-switch__icon svg {
    display: block;
}

.ai-switch__label {
    line-height: 1;
    color: #202124;
}

.ai-switch__led {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d0d0d8;
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.15);
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

/* --- ON state — interior stays white/black, border becomes a rotating conic gradient --- */
.ai-switch[aria-checked="true"] {
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        conic-gradient(from var(--ai-angle),
            var(--ai-c1),
            var(--ai-c2),
            var(--ai-c3),
            var(--ai-c4),
            var(--ai-c1)) border-box;
    background-size: auto, auto;
    box-shadow: 0 3px 16px rgba(155, 114, 203, 0.35),
                0 0 0 1px rgba(155, 114, 203, 0.15);
    animation: ai-rotate-border 3s linear infinite;
}

.ai-switch[aria-checked="true"]:hover {
    box-shadow: 0 4px 22px rgba(155, 114, 203, 0.45),
                0 0 0 1px rgba(155, 114, 203, 0.2);
}

.ai-switch[aria-checked="true"] .ai-switch__icon {
    animation: ai-sparkle-spin 3s ease-in-out infinite;
}

.ai-switch[aria-checked="true"] .ai-switch__led {
    background: #34a853;
    box-shadow: 0 0 6px rgba(52, 168, 83, 0.8),
                0 0 12px rgba(52, 168, 83, 0.5);
    animation: ai-led-pulse 1.8s ease-in-out infinite;
}

/* --- Just-turned-on bounce --- */
.ai-switch--just-on {
    animation: ai-gradient-shift 6s linear infinite,
               ai-switch-bounce 0.45s ease;
}
.ai-switch[aria-checked="true"].ai-switch--just-on {
    animation: ai-rotate-border 3s linear infinite,
               ai-switch-bounce 0.45s ease;
}

/* --- Disabled / busy --- */
.ai-switch[aria-disabled="true"],
.ai-switch:disabled {
    opacity: 0.6;
    cursor: progress;
    pointer-events: none;
}

.ai-switch[aria-busy="true"] .ai-switch__led {
    background: #f4b400;
    box-shadow: 0 0 6px rgba(244, 180, 0, 0.9);
    animation: ai-led-busy 0.9s ease-in-out infinite;
}

/* --- Tooltip --- */
.ai-switch[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    background: #202124;
    color: #fff;
    padding: 7px 11px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    width: max-content;
    max-width: 220px;
    text-align: center;
    white-space: normal;
    letter-spacing: normal;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 1100;
}

.ai-switch[data-tooltip]::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    border: 5px solid transparent;
    border-bottom-color: #202124;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 1101;
}

.ai-switch[data-tooltip]:hover::after,
.ai-switch[data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.ai-switch[data-tooltip]:hover::before,
.ai-switch[data-tooltip]:focus-visible::before {
    opacity: 1;
}

/* --- Keyframes --- */
@keyframes ai-gradient-shift {
    0%   { background-position: 0 0, 0%   0; }
    100% { background-position: 0 0, 300% 0; }
}

@keyframes ai-rotate-border {
    to { --ai-angle: 360deg; }
}

@keyframes ai-switch-bounce {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.10); }
    70%  { transform: scale(0.97); }
    100% { transform: scale(1); }
}

@keyframes ai-sparkle-spin {
    0%   { transform: rotate(0) scale(1); }
    50%  { transform: rotate(180deg) scale(1.12); }
    100% { transform: rotate(360deg) scale(1); }
}

@keyframes ai-led-pulse {
    0%, 100% {
        box-shadow: 0 0 6px rgba(52, 168, 83, 0.7),
                    0 0 12px rgba(52, 168, 83, 0.4);
    }
    50% {
        box-shadow: 0 0 10px rgba(52, 168, 83, 1),
                    0 0 18px rgba(52, 168, 83, 0.6);
    }
}

@keyframes ai-led-busy {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
}

/* ===== Layout glue ===== */
form.portal-search {
    position: relative;
}

.ai-result-list {
    list-style-type: none;
    padding-left: 0px;
}

.ai-result-list li.searchresultitem p {
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}


.ai-result-box {
    border: 1px solid #ddd;
    background: #f9f9ff;
    padding: 16px;
    margin-bottom: 20px;
    border-left: 4px solid #6c63ff;
    border-radius: 6px;
}

/* columns container */
.ai-content {
    display: flex;
    gap: 20px;
    margin-top: 10px;
    /* never let the columns push the card wider than its parent */
    max-width: 100%;
}

/* left column */
.ai-summary {
    flex: 2;
    /* a flex item defaults to min-width:auto, so a wide code block or a long
       URL would stretch this column past the card and spill the text outside
       the white box (plus a page-level horizontal scrollbar). */
    min-width: 0;
    max-height: 450px;
    overflow-y: auto;
    padding-right: 10px;
    line-height: 1.5;
}

.ai-summary::after {
    content: "";
    position: sticky;
    bottom: 0;
    display: block;
    height: 40px;
    pointer-events: none;
}

/* right column */
.ai-sources {
    flex: 1;
    min-width: 0;
    max-height: 450px;
    overflow-y: auto;
    border-left: 1px solid #ddd;
    padding-left: 15px;
    padding-right: 15px;
}

/* list */
.ai-result-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ai-result-list li {
    margin-bottom: 10px;
}

/* Two columns need real room: below ~1250px the sources column gets so narrow
   that titles and code blocks stop fitting, so stack it under the answer. */
@media (max-width: 1250px) {
    .ai-content {
        flex-direction: column;
    }

    .ai-sources {
        max-height: 260px;
        border-left: none;
        border-top: 1px solid #ddd;
        padding-left: 0;
        padding-top: 10px;
    }
}

.ai-section-title {
    list-style: none;
    margin-top: 20px;
    margin-bottom: 10px;
}

.ai-section-title h3 {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin-bottom: -20px;
}

.citation-item {
    opacity: 0.9;
}

.ai-result-list li.searchresultitem a {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    outline: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.ai-result-list li.searchresultitem a:focus,
.ai-result-list li.searchresultitem a:active {
    outline: none;
    box-shadow: none;
    border: none;
}

.ai-result-list li.searchresultitem a h4,
.ai-result-list li.searchresultitem a p {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}

/* ===== Final answer (marked output) ===== */
.ai-final-answer {
    color: #222;
    font-size: 15px;
    line-height: 1.6;
    animation: ai-fade-in 0.35s ease-out;
    /* keep long tokens (paths, identifiers, URLs) inside the card */
    overflow-wrap: break-word;
}

.ai-final-answer a {
    overflow-wrap: anywhere;
}

.ai-final-answer > *:first-child { margin-top: 0; }
.ai-final-answer > *:last-child  { margin-bottom: 0; }

.ai-final-answer h1,
.ai-final-answer h2,
.ai-final-answer h3,
.ai-final-answer h4,
.ai-final-answer h5,
.ai-final-answer h6 {
    margin: 1.4em 0 0.5em;
    font-weight: 600;
    line-height: 1.3;
    color: #1a1a2e;
}
.ai-final-answer h1 { font-size: 24px; border-bottom: 1px solid #e5e5ef; padding-bottom: 6px; }
.ai-final-answer h2 { font-size: 21px; border-bottom: 1px solid #eee; padding-bottom: 4px; }
.ai-final-answer h3 { font-size: 18px; border-left: 3px solid #6c63ff; padding-left: 8px; }
.ai-final-answer h4 { font-size: 16px; color: #444; }
.ai-final-answer h5 { font-size: 14px; color: #555; text-transform: uppercase; letter-spacing: 0.04em; }
.ai-final-answer h6 { font-size: 13px; color: #666; }

.ai-final-answer p {
    margin: 0 0 0.85em;
}

.ai-final-answer strong { color: #1a1a2e; }
.ai-final-answer em     { color: #333; }

.ai-final-answer a {
    color: #5a52e0;
    text-decoration: none;
    border-bottom: 1px solid rgba(108, 99, 255, 0.3);
    transition: border-color 0.15s ease, color 0.15s ease;
}
.ai-final-answer a:hover,
.ai-final-answer a:focus {
    color: #3d35c4;
    border-bottom-color: #3d35c4;
}

.ai-final-answer ul,
.ai-final-answer ol {
    margin: 0 0 0.85em;
    padding-left: 1.5em;
}
.ai-final-answer ul ul,
.ai-final-answer ul ol,
.ai-final-answer ol ul,
.ai-final-answer ol ol {
    margin: 0.3em 0 0.3em;
}
.ai-final-answer li {
    margin-bottom: 0.35em;
}
.ai-final-answer li > p { margin-bottom: 0.35em; }

.ai-final-answer blockquote {
    margin: 0 0 0.85em;
    padding: 8px 14px;
    border-left: 4px solid #6c63ff;
    background: #f3f2ff;
    color: #444;
    border-radius: 0 4px 4px 0;
}
.ai-final-answer blockquote > *:last-child { margin-bottom: 0; }

.ai-final-answer code {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.88em;
    padding: 2px 5px;
    background: #f1f0fb;
    color: #5a52e0;
    border-radius: 3px;
}

.ai-final-answer pre {
    margin: 0 0 0.95em;
    padding: 14px 16px;
    background: #f7f7fb;
    color: #2b2f3a;
    border: 1px solid #e6e4f2;
    border-radius: 8px;
    /* the block scrolls inside itself; the page never scrolls sideways */
    max-width: 100%;
    overflow-x: auto;
    font-size: 13px;
    line-height: 1.5;
}
.ai-final-answer pre code {
    background: transparent;
    padding: 0;
    color: inherit;
    font-size: inherit;
    border-radius: 0;
}

/* ===== highlight.js — light theme =====
   Some code blocks arrive already tokenised by highlight.js
   (<pre class="hljs language-x"> + <span class="hljs-*">). The stock hljs
   themes are dark, so this repaints them to match the light portal.
   Selectors are two-class deep on purpose so they outrank the single-class
   rules of any hljs stylesheet loaded alongside this one. */
pre.hljs,
pre code.hljs,
code.hljs,
.ai-final-answer pre.hljs {
    display: block;
    background: #f7f7fb;
    color: #2b2f3a;
    border-radius: 8px;
    max-width: 100%;
    overflow-x: auto;
}
pre.hljs,
.ai-final-answer pre.hljs {
    padding: 14px 16px;
    border: 1px solid #e6e4f2;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 13px;
    line-height: 1.5;
}
/* When the pre is the plain wrapper and hljs sits on the inner <code>. */
pre > code.hljs {
    padding: 0;
    border: 0;
}

/* --- tokens (Atom One Light palette: readable on #f7f7fb) --- */
.hljs .hljs-comment,
.hljs .hljs-quote {
    color: #8a8f98;
    font-style: italic;
}
.hljs .hljs-keyword,
.hljs .hljs-selector-tag,
.hljs .hljs-doctag,
.hljs .hljs-formula {
    color: #a626a4;
}
.hljs .hljs-string,
.hljs .hljs-regexp,
.hljs .hljs-addition,
.hljs .hljs-meta .hljs-string {
    color: #2e7d32;
}
.hljs .hljs-number,
.hljs .hljs-literal,
.hljs .hljs-symbol,
.hljs .hljs-bullet,
.hljs .hljs-attr,
.hljs .hljs-template-variable {
    color: #986801;
}
.hljs .hljs-type,
.hljs .hljs-class .hljs-title,
.hljs .hljs-title.class_,
.hljs .hljs-title.class_.inherited__,
.hljs .hljs-built_in,
.hljs .hljs-selector-class {
    color: #b25000;
}
.hljs .hljs-title,
.hljs .hljs-title.function_,
.hljs .hljs-section,
.hljs .hljs-name,
.hljs .hljs-selector-id {
    color: #2f6bd8;
}
.hljs .hljs-variable,
.hljs .hljs-params,
.hljs .hljs-template-tag,
.hljs .hljs-selector-attr,
.hljs .hljs-selector-pseudo {
    color: #d1465a;
}
.hljs .hljs-attribute,
.hljs .hljs-property,
.hljs .hljs-meta,
.hljs .hljs-meta .hljs-keyword,
.hljs .hljs-subst,
.hljs .hljs-operator,
.hljs .hljs-punctuation {
    color: #4b5162;
}
.hljs .hljs-link {
    color: #2f6bd8;
    text-decoration: underline;
}
.hljs .hljs-deletion {
    color: #c0392b;
}
.hljs .hljs-emphasis { font-style: italic; }
.hljs .hljs-strong   { font-weight: 700; }

.ai-final-answer hr {
    border: 0;
    height: 1px;
    background: #e5e5ef;
    margin: 1.4em 0;
}

.ai-final-answer img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 0.5em 0;
}

.ai-final-answer table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin: 0 0 0.95em;
    display: block;
    overflow-x: auto;
}
.ai-final-answer th,
.ai-final-answer td {
    border: 1px solid #e0e0eb;
    padding: 8px 12px;
    text-align: left;
    vertical-align: top;
}
.ai-final-answer th {
    background: #f3f2ff;
    color: #1a1a2e;
    font-weight: 600;
}
.ai-final-answer tbody tr:nth-child(even) {
    background: #fafaff;
}

/* ===== Mermaid container ===== */
.mermaid-wrapper {
    margin: 1em 0;
    padding: 15px;
    background: #fafafa;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    overflow-x: auto;
}
.mermaid {
    display: flex;
    justify-content: center;
}
.mermaid-fallback {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.mermaid-fallback-note {
    color: #a04040;
    font-size: 0.9em;
    margin-bottom: 8px;
}
.mermaid-fallback pre {
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 10px;
    margin: 0;
    overflow-x: auto;
}
.mermaid-fallback pre code {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.85em;
    white-space: pre;
}

/* ===== Streaming mode (pre-final) ===== */
.ai-stream-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ai-stream-line {
    position: relative;
    padding: 12px 14px 12px 40px;
    border-radius: 8px;
    font-size: 16px;
    color: #444;
    line-height: 1.5;
    animation: ai-fade-in 0.25s ease-out;
}

.ai-stream-line::before {
    content: "•";
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    color: #6c63ff;
    font-weight: bold;
}

/* ===== Staged AI progress (Processing → Searching → Linking → Final) ===== */
.ai-stages {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    animation: ai-fade-in 0.25s ease-out;
}

.ai-stage {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
}

/* Vertical connector running from each marker down to the next one. */
.ai-stage:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 15px;              /* marker center: (32px / 2) - 1px */
    top: 50%;
    height: 100%;            /* rows are equal height → reaches the next marker */
    width: 2px;
    background: #e3e0f0;
    z-index: 0;
    transition: background 0.3s ease;
}
.ai-stage.is-done:not(:last-child)::before {
    background: #8b5cf6;
}

.ai-stage__marker {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    background: #f0eef9;
    color: #8b7fb3;
    border: 2px solid #e3e0f0;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.ai-stage__check {
    width: 16px;
    height: 16px;
    display: none;
}

.ai-stage__label {
    font-size: 16px;
    color: #9a95ad;
    transition: color 0.3s ease;
}

/* Animated "…" only visible on the active step. */
.ai-stage__dots { display: none; }
.ai-stage.is-active .ai-stage__dots { display: inline-block; }

/* Active step: highlighted, pulsing ring. */
.ai-stage.is-active .ai-stage__marker {
    background: #fff;
    color: #7c3aed;
    border-color: #8b5cf6;
    animation: ai-stage-pulse 1.6s ease-in-out infinite;
}
.ai-stage.is-active .ai-stage__label {
    color: #1f2937;
    font-weight: 600;
}

/* Completed step: filled marker with a check. */
.ai-stage.is-done .ai-stage__marker {
    background: #8b5cf6;
    color: #fff;
    border-color: #8b5cf6;
    box-shadow: none;
}
.ai-stage.is-done .ai-stage__num { display: none; }
.ai-stage.is-done .ai-stage__check { display: block; }
.ai-stage.is-done .ai-stage__label { color: #4b5563; }

@keyframes ai-stage-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.14); }
    50%      { box-shadow: 0 0 0 7px rgba(139, 92, 246, 0.04); }
}

/* ===== Loading "Generating final answer" with skeleton ===== */
.ai-loading-final {
    padding: 8px 0;
}

.ai-loading-label {
    color: #555;
    font-size: 14px;
    margin-bottom: 14px;
    font-style: italic;
}

.ai-loading-dots::after {
    content: "";
    display: inline-block;
    width: 1.2em;
    text-align: left;
    animation: ai-dots 1.4s steps(4, end) infinite;
}

@keyframes ai-dots {
    0%   { content: ""; }
    25%  { content: "."; }
    50%  { content: ".."; }
    75%  { content: "..."; }
    100% { content: ""; }
}

.ai-skeleton {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ai-skeleton-line {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, #ececf5 0%, #f8f8ff 50%, #ececf5 100%);
    background-size: 200% 100%;
    animation: ai-shimmer 1.4s ease-in-out infinite;
}
.ai-skeleton-line--90 { width: 90%; }
.ai-skeleton-line--85 { width: 85%; }
.ai-skeleton-line--75 { width: 75%; }

@keyframes ai-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes ai-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

/* ===== Initial AI loading (pre-stream) ===== */
.ai-loading-initial {
    padding: 4px 0 8px;
    animation: ai-fade-in 0.25s ease-out;
}

.ai-thinking {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.ai-thinking-dots {
    display: inline-flex;
    gap: 5px;
}

.ai-thinking-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #6c63ff;
    display: inline-block;
    animation: ai-bounce 1.2s ease-in-out infinite;
}

.ai-thinking-dots span:nth-child(2) { animation-delay: 0.15s; }
.ai-thinking-dots span:nth-child(3) { animation-delay: 0.3s; }

.ai-thinking-label {
    color: #555;
    font-size: 14px;
    font-style: italic;
}

@keyframes ai-bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
    40%           { transform: scale(1);   opacity: 1; }
}

/* ===== Typing indicator at the bottom of the stream list ===== */
.ai-stream-typing {
    list-style: none;
    padding: 12px 14px;
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
}

/* explicitly suppress the bullet that .ai-stream-line uses */
.ai-stream-typing::before {
    content: none;
}

.ai-stream-typing span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #6c63ff;
    display: inline-block;
    animation: ai-bounce 1.2s ease-in-out infinite;
}

.ai-stream-typing span:nth-child(2) { animation-delay: 0.15s; }
.ai-stream-typing span:nth-child(3) { animation-delay: 0.3s; }

/* ===== AI error state (request failed / empty response) ===== */
.ai-error {
    /* local palette (Google-ish ring, same family as .ai-switch) */
    --ai-c1: #4285f4;
    --ai-c2: #9b72cb;
    --ai-c3: #d96570;
    --ai-c4: #f4b400;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px 20px 26px;
    animation: ai-fade-in 0.3s ease-out;
}

.ai-error__icon {
    position: relative;
    width: 74px;
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 3px solid transparent;
    color: #6c63ff;
    /* white interior + animated multicolor gradient ring */
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        conic-gradient(from var(--ai-angle),
            var(--ai-c1), var(--ai-c2), var(--ai-c3), var(--ai-c4), var(--ai-c1))
            border-box;
    animation: ai-spin 6s linear infinite;
    margin-bottom: 18px;
}

/* soft pulsing halo behind the badge */
.ai-error__icon::before {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(108, 99, 255, 0.28), transparent 70%);
    animation: ai-error-pulse 2.2s ease-in-out infinite;
    z-index: -1;
}

.ai-error__icon svg {
    width: 36px;
    height: 36px;
    /* counter-rotate so the icon stays upright while the ring spins */
    animation: ai-spin-reverse 6s linear infinite;
}

@keyframes ai-error-pulse {
    0%, 100% { transform: scale(0.9); opacity: 0.6; }
    50%      { transform: scale(1.12); opacity: 0.2; }
}

@keyframes ai-spin {
    to { --ai-angle: 360deg; }
}

@keyframes ai-spin-reverse {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
}

.ai-error__title {
    font-size: 18px;
    font-weight: 600;
    color: #2a2a3a;
    margin-bottom: 8px;
}

.ai-error__message {
    font-size: 14px;
    color: #666;
    line-height: 1.55;
    max-width: 420px;
    margin-bottom: 22px;
}

.ai-error__retry {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #8b5cf6, #6c63ff);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(108, 99, 255, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.ai-error__retry:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 6px 18px rgba(108, 99, 255, 0.45);
}

.ai-error__retry:active {
    transform: translateY(0);
    box-shadow: 0 3px 10px rgba(108, 99, 255, 0.35);
}

.ai-error__retry .fa {
    font-size: 13px;
}

/* respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
    .ai-error__icon,
    .ai-error__icon svg,
    .ai-error__icon::before {
        animation: none;
    }
}

.searchresulttitle {
    color: #001fff;
}

/* =====================================================================
   AI Mode — toggle button, search bar styling, and result view.
   Previously injected from layout-custom-script.js; moved here so the
   styles live with the rest of the portal CSS.
   ===================================================================== */

/* Animated angle for the rotating conic-gradient border. */
@property --ai-border-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

/* Palette: purple as the brand anchor (#8b5cf6) plus the multi-stop
   gradient used for the rotating outline. */
.ai-switch,
.ask-theo,
.portal-search.ai-mode-on {
    --ai-purple-300: #c4b5fd;
    --ai-purple-500: #8b5cf6;
    --ai-purple-600: #7c3aed;
    --ai-purple-700: #6d28d9;
    --ai-purple-text: #5b21b6;
    --ai-c1: #4285f4;
    --ai-c2: #9b72cb;
    --ai-c3: #d96570;
    --ai-c4: #f4b400;
    --ai-bg-off: #ffffff;
    --ai-bg-off-hover: #faf5ff;
    --ai-border-off: #e2e2eb;
    --ai-border-off-hover: #d8b4fe;
}

.ai-switch {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    width: auto !important;
    height: 44px !important;
    padding: 0 18px !important;
    border-radius: 4px !important;
    border: 1px solid transparent !important;
    background:
        linear-gradient(var(--ai-bg-off), var(--ai-bg-off)) padding-box,
        linear-gradient(var(--ai-border-off), var(--ai-border-off)) border-box !important;
    box-shadow:
        0 1px 2px rgba(17, 24, 39, 0.06),
        0 1px 3px rgba(17, 24, 39, 0.04) !important;
    color: #4b5563 !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    letter-spacing: 0.3px;
    cursor: pointer;
    animation: none !important;
    transition:
        background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease,
        border-color 0.2s ease, height 0.25s ease, padding 0.25s ease,
        border-radius 0.25s ease, transform 0.15s ease;
}
.ai-switch:hover {
    background:
        linear-gradient(var(--ai-bg-off-hover), var(--ai-bg-off-hover)) padding-box,
        linear-gradient(var(--ai-border-off-hover), var(--ai-border-off-hover)) border-box !important;
    color: var(--ai-purple-text) !important;
    box-shadow:
        0 2px 6px rgba(139, 92, 246, 0.18),
        0 1px 3px rgba(139, 92, 246, 0.10) !important;
}
.portal-search.has-ai-switch .ai-switch:hover {
    transform: translateY(-50%) scale(1.02) !important;
}
.portal-search.has-ai-switch .ai-switch:active {
    transform: translateY(-50%) scale(0.98) !important;
}

.ai-switch__icon {
    display: inline-block;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><defs><linearGradient id='s' x1='0' y1='0' x2='1' y2='1'><stop offset='0%25' stop-color='%23c4b5fd'/><stop offset='55%25' stop-color='%238b5cf6'/><stop offset='100%25' stop-color='%236d28d9'/></linearGradient></defs><path fill='url(%23s)' d='M12 2l1.4 4.6L18 8l-4.6 1.4L12 14l-1.4-4.6L6 8l4.6-1.4L12 2zm6 11l1 2.6 2.6 1-2.6 1-1 2.6-1-2.6L15 16.6l2.6-1L18.6 13zM6 14l.8 2.2 2.2.8-2.2.8L6 20l-.8-2.2L3 17l2.2-.8L6 14z'/></svg>");
}
.ai-switch__label {
    color: inherit !important;
    letter-spacing: 0.2px;
    line-height: 1;
}

/* Mini sliding indicator inside the button. */
.ai-switch__track {
    display: inline-block;
    position: relative;
    width: 30px;
    height: 16px;
    border-radius: 999px;
    background: #d1d5db;
    transition: background 0.3s ease;
    flex-shrink: 0;
}
.ai-switch__thumb {
    position: absolute;
    top: 2px;
    /* OFF default position: thumb on the left side of the track. */
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(17, 24, 39, 0.2);
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease;
}
/* ON: solid purple track, thumb slides to the RIGHT. */
.ai-switch[aria-checked="true"] .ai-switch__track {
    background: linear-gradient(135deg, var(--ai-purple-500), var(--ai-purple-700)) !important;
}
.ai-switch[aria-checked="true"] .ai-switch__thumb {
    left: 16px;
}
/* When the locked-OFF hover previews the ON look, slide the thumb too. */
.ai-switch.ai-switch--locked[aria-checked="false"]:hover .ai-switch__track {
    background: linear-gradient(135deg, var(--ai-purple-500), var(--ai-purple-700)) !important;
}
.ai-switch.ai-switch--locked[aria-checked="false"]:hover .ai-switch__thumb {
    left: 16px;
}

/* ON: white interior + rotating multi-stop conic outline, anchored
   by a soft purple glow so the brand color (#8b5cf6) reads first. */
.ai-switch[aria-checked="true"] {
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        conic-gradient(from var(--ai-border-angle),
            var(--ai-c1), var(--ai-c2), var(--ai-c3),
            var(--ai-c4), var(--ai-c1)) border-box !important;
    border-width: 1.5px !important;
    color: var(--ai-purple-text) !important;
    box-shadow:
        0 0 0 1px rgba(139, 92, 246, 0.08),
        0 4px 16px rgba(139, 92, 246, 0.28) !important;
    animation: ai-border-rotate 3s linear infinite !important;
}
.ai-switch[aria-checked="true"]:hover {
    box-shadow:
        0 0 0 1px rgba(139, 92, 246, 0.14),
        0 6px 22px rgba(139, 92, 246, 0.38) !important;
}

/* One-shot ripple pulse when the user just toggled ON. */
.ai-switch--just-on {
    animation:
        ai-border-rotate 3s linear infinite,
        ai-pulse-once 0.7s ease-out !important;
}

/* Locked state — non-interactive but still discoverable. */
.ai-switch.ai-switch--locked {
    cursor: not-allowed;
}
/* Locked ON (AI answer shown) is an action now — clicking it switches AI Mode
   OFF and returns to the start page — so keep it clickable. */
.ai-switch.ai-switch--locked[aria-checked="true"] {
    cursor: pointer;
}
/* Locked ON (AI answer shown) — preserve the active appearance on hover. */
.ai-switch.ai-switch--locked[aria-checked="true"]:hover {
    box-shadow:
        0 0 0 1px rgba(139, 92, 246, 0.08),
        0 4px 16px rgba(139, 92, 246, 0.28) !important;
}
/* Locked OFF (normal results shown) — hover reveals the AI-mode style. */
.ai-switch.ai-switch--locked[aria-checked="false"]:hover {
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        conic-gradient(from var(--ai-border-angle),
            var(--ai-c1), var(--ai-c2), var(--ai-c3),
            var(--ai-c4), var(--ai-c1)) border-box !important;
    border-width: 1.5px !important;
    color: var(--ai-purple-text) !important;
    box-shadow:
        0 0 0 1px rgba(139, 92, 246, 0.08),
        0 4px 16px rgba(139, 92, 246, 0.28) !important;
    animation: ai-border-rotate 3s linear infinite !important;
}

@keyframes ai-border-rotate {
    to { --ai-border-angle: 360deg; }
}
@keyframes ai-pulse-once {
    0%   { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.50), 0 4px 16px rgba(139, 92, 246, 0.28); }
    100% { box-shadow: 0 0 0 16px rgba(139, 92, 246, 0),  0 4px 16px rgba(139, 92, 246, 0.28); }
}

/* Fallback for browsers without conic-gradient (very rare today). */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
    .ai-switch[aria-checked="true"],
    .ai-switch[aria-checked="true"]:hover,
    .ai-switch.ai-switch--locked[aria-checked="false"]:hover {
        background:
            linear-gradient(#ffffff, #ffffff) padding-box,
            linear-gradient(120deg,
                var(--ai-c1), var(--ai-c2), var(--ai-c3), var(--ai-c4),
                var(--ai-c1), var(--ai-c2), var(--ai-c3), var(--ai-c4)) border-box !important;
        background-size: auto, 300% 100% !important;
        animation: ai-border-slide 4s linear infinite !important;
    }
    @keyframes ai-border-slide {
        0%   { background-position: 0 0, 0%   0; }
        100% { background-position: 0 0, 300% 0; }
    }
}

/* Slightly taller input while AI Mode is ON — feels weightier than
   a plain search field, but stays in proportion with the toggle. */
.portal-search #portal-search-field {
    transition:
        height 0.32s cubic-bezier(0.34, 1.2, 0.4, 1),
        min-height 0.32s cubic-bezier(0.34, 1.2, 0.4, 1),
        padding 0.32s cubic-bezier(0.34, 1.2, 0.4, 1),
        font-size 0.32s cubic-bezier(0.34, 1.2, 0.4, 1),
        border-radius 0.32s cubic-bezier(0.34, 1.2, 0.4, 1),
        box-shadow 0.32s ease !important;
}
/* Input in AI Mode ON wears the same rotating gradient outline as the
   toggle, with a chunkier 3px border so the gradient reads clearly,
   anchored by a soft purple glow. */
.portal-search.ai-mode-on #portal-search-field {
    height: 84px !important;
    min-height: 84px !important;
    padding: 14px 18px !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
    border-radius: 14px !important;
    border: 3px solid transparent !important;
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        conic-gradient(from var(--ai-border-angle),
            var(--ai-c1), var(--ai-c2), var(--ai-c3),
            var(--ai-c4), var(--ai-c1)) border-box !important;
    box-shadow:
        0 0 0 1px rgba(139, 92, 246, 0.06),
        0 4px 16px rgba(139, 92, 246, 0.22) !important;
    animation: ai-border-rotate 3s linear infinite !important;
}
/* Focus state: keep the rotating outline, intensify the purple halo. */
.portal-search.ai-mode-on #portal-search-field:focus,
.portal-search.ai-mode-on #portal-search-field.focused {
    border: 3px solid transparent !important;
    padding: 14px 18px !important;
    box-shadow:
        0 0 0 4px rgba(139, 92, 246, 0.20),
        0 6px 22px rgba(139, 92, 246, 0.32) !important;
    outline: none !important;
}
/* Fallback (no conic-gradient). */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
    .portal-search.ai-mode-on #portal-search-field {
        background:
            linear-gradient(#ffffff, #ffffff) padding-box,
            linear-gradient(120deg,
                var(--ai-c1), var(--ai-c2), var(--ai-c3), var(--ai-c4),
                var(--ai-c1), var(--ai-c2), var(--ai-c3), var(--ai-c4)) border-box !important;
        background-size: auto, 300% 100% !important;
        animation: ai-border-slide 4s linear infinite !important;
    }
}

/* AI toggle lives INSIDE the input on the right side — keep it smaller
   than the input host so it sits nicely centered. */
.portal-search__input-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
}
.portal-search__input-wrap > #portal-search-field {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}
.portal-search.has-ai-switch .ai-switch {
    position: absolute !important;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    height: 36px !important;
    padding: 0 12px !important;
    gap: 8px !important;
    z-index: 2;
    font-size: 12px !important;
    transition:
        height 0.32s cubic-bezier(0.34, 1.2, 0.4, 1),
        padding 0.32s cubic-bezier(0.34, 1.2, 0.4, 1),
        font-size 0.32s cubic-bezier(0.34, 1.2, 0.4, 1) !important;
}

/* Users who prefer reduced motion get the size change without the tween. */
@media (prefers-reduced-motion: reduce) {
    .portal-search #portal-search-field,
    .portal-search > button,
    .portal-search .btn,
    .portal-search.has-ai-switch .ai-switch {
        transition: none !important;
    }
}
/* Input reserves room on the right for the toggle and has a tall
   enough min-height to host the 36px button comfortably. */
.portal-search.has-ai-switch #portal-search-field {
    min-height: 64px !important;
}
/* Explicit numeric height in the OFF state (scoped with :not so it never
   overrides the taller ON height). Two numeric endpoints — 64px OFF and
   84px ON — are what let the height transition actually animate instead
   of snapping from `auto`. */
.portal-search.has-ai-switch:not(.ai-mode-on) #portal-search-field {
    height: 64px !important;
}

/* --- Search field is a <textarea> so AI Mode can take a multi-line question --- */
textarea#portal-search-field {
    resize: none !important;
    overflow: hidden !important;
    white-space: nowrap !important;   /* single line until AI Mode wraps it */
    /* A <textarea> inherits text-align, and .portal-header centers its text,
       so pin the typed text to the left (the old <input> did this by default). */
    text-align: left !important;
}
/* OFF state: keep the single line vertically centered in the 64px field. */
.portal-search.has-ai-switch:not(.ai-mode-on) textarea#portal-search-field {
    padding-top: 24px !important;
    padding-bottom: 19px !important;
    line-height: 1.4 !important;
}
/* AI Mode ON: real multi-line — wrap text, allow vertical scroll, and keep
   the text anchored to the top so the question grows downward. */
.portal-search.ai-mode-on textarea#portal-search-field {
    white-space: pre-wrap !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}
.portal-search.has-ai-switch #portal-search-field,
.portal-search.has-ai-switch #portal-search-field:focus,
.portal-search.has-ai-switch #portal-search-field.focused {
    padding-right: 160px !important;
}
/* While AI Mode is ON, the toggle grows a touch (still inside the input). */
.portal-search.ai-mode-on.has-ai-switch .ai-switch {
    height: 40px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
}
.portal-search.ai-mode-on.has-ai-switch #portal-search-field,
.portal-search.ai-mode-on.has-ai-switch #portal-search-field:focus,
.portal-search.ai-mode-on.has-ai-switch #portal-search-field.focused {
    padding-right: 180px !important;
}

/* Submit button transition — defined on the base selector so the size
   change animates smoothly in BOTH directions (ON→OFF and OFF→ON), not
   just while AI Mode is ON. */
.portal-search > button,
.portal-search .btn {
    transition:
        height 0.32s cubic-bezier(0.34, 1.2, 0.4, 1),
        min-height 0.32s cubic-bezier(0.34, 1.2, 0.4, 1),
        width 0.32s cubic-bezier(0.34, 1.2, 0.4, 1),
        min-width 0.32s cubic-bezier(0.34, 1.2, 0.4, 1),
        padding 0.32s cubic-bezier(0.34, 1.2, 0.4, 1),
        border-radius 0.32s cubic-bezier(0.34, 1.2, 0.4, 1),
        background 0.32s ease, box-shadow 0.32s ease !important;
}

/* Explicit numeric height for the button in the OFF state (scoped with
   :not so it never overrides the ON height). Gives the height transition
   two numeric endpoints instead of animating from `auto`. */
.portal-search.has-ai-switch:not(.ai-mode-on) > button,
.portal-search.has-ai-switch:not(.ai-mode-on) .btn {
    height: 52px !important;
    min-height: 52px !important;
}

/* Submit button while AI Mode is ON — compact and proportional, centered
   next to the taller input rather than matching its full height. */
.portal-search.ai-mode-on > button,
.portal-search.ai-mode-on .btn {
    height: 60px !important;
    min-height: 60px !important;
    min-width: 68px !important;
    padding: 0 22px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, var(--ai-purple-500), var(--ai-purple-700)) !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 1.05rem !important;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25) !important;
}
.portal-search.ai-mode-on > button:hover,
.portal-search.ai-mode-on .btn:hover {
    background: linear-gradient(135deg, var(--ai-purple-600), #5b21b6) !important;
    box-shadow: 0 6px 16px rgba(124, 58, 237, 0.35) !important;
}
.portal-search.ai-mode-on > button:disabled,
.portal-search.ai-mode-on .btn:disabled,
.portal-search.ai-mode-on > button[disabled],
.portal-search.ai-mode-on .btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Hide facets / classic search results while AI Mode is ON. */
body.ai-mode-on .portal-search-result .facet-container,
body.ai-mode-on .portal-search-result .search-container {
    display: none !important;
}
/* Align both AI columns to the top so the row height is driven by the summary. */
body.ai-mode-on .ai-content {
    align-items: flex-start;
}
/* Let the summary (and the whole ai-result-box) grow with its content —
   no inner vertical scrollbar on the summary. */
body.ai-mode-on .ai-summary {
    max-height: none !important;
    overflow-y: visible !important;
}
/* Drop the bottom fade pseudo-element (it was tied to the scroll container). */
body.ai-mode-on .ai-summary::after {
    display: none !important;
}

/* ============================================================
   Improved AI result view (summary / citations / recommended).
   Only applies while AI Mode is ON.
   ============================================================ */

/* Outer card: cleaner background, more breathing room, purple-tinted
   border + subtle elevation. */
body.ai-mode-on .ai-result-box {
    border: 1px solid #ede9fe !important;
    background: linear-gradient(180deg, #faf5ff 0%, #ffffff 60%) !important;
    padding: 28px 32px !important;
    margin-bottom: 24px !important;
    border-left: none !important;
    border-radius: 16px !important;
    box-shadow:
        0 1px 3px rgba(124, 58, 237, 0.06),
        0 12px 32px rgba(124, 58, 237, 0.08) !important;
}

/* "AI Answer" heading: hero-size title with a glowing dot. */
body.ai-mode-on .ai-result-box > h3 {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    letter-spacing: -0.2px !important;
    text-transform: none !important;
    line-height: 1.2 !important;
    margin: 0 0 22px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}
/* "New search" pill in the AI answer header (added once the answer is ready).
   margin-left:auto pushes it to the far right; the explicit type resets the
   inherited 28px hero-title styling. */
body.ai-mode-on .ai-result-box > h3 .ai-new-search {
    margin-left: auto !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    text-transform: none !important;
    color: #6d28d9 !important;
    background: #ffffff !important;
    border: 1px solid #ddd6fe !important;
    border-radius: 999px !important;
    padding: 9px 16px !important;
    cursor: pointer !important;
    transition: background .15s ease, border-color .15s ease,
                box-shadow .15s ease, color .15s ease !important;
}
body.ai-mode-on .ai-result-box > h3 .ai-new-search:hover {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.30) !important;
}
body.ai-mode-on .ai-result-box > h3 .ai-new-search .fa {
    font-size: 13px !important;
}

/* Narrow screens: let the header wrap so the pill drops below the title
   instead of overflowing. */
@media (max-width: 768px) {
    body.ai-mode-on .ai-result-box > h3 {
        flex-wrap: wrap !important;
    }
}

/* Two-column layout with a tinted separator. */
body.ai-mode-on .ai-content {
    gap: 32px !important;
    margin-top: 8px !important;
}

/* Summary: better typography & a subtle right border instead of
   the default ones provided by .ai-sources. */
body.ai-mode-on .ai-summary {
    padding-right: 28px !important;
    border-right: 1px solid #ede9fe !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
    color: #1f2937 !important;
}

/* Sources column: drop the default left border (the new separator
   lives on the summary side). */
body.ai-mode-on .ai-sources {
    border-left: none !important;
    padding-left: 0 !important;
}

/* When the draggable divider is present it becomes the separator, so drop the
   summary's right border and let the resizer sit between the two columns. */
body.ai-mode-on .ai-content--resizable {
    gap: 0 !important;
}
body.ai-mode-on .ai-content--resizable .ai-summary {
    border-right: none !important;
    padding-right: 24px !important;
}
body.ai-mode-on .ai-content--resizable .ai-sources {
    padding-left: 24px !important;
}

/* Draggable column divider. */
body.ai-mode-on .ai-col-resizer {
    flex: 0 0 auto;
    align-self: stretch;
    width: 16px;
    margin: 0 -8px;          /* overlap the columns' padding so it sits centered */
    position: relative;
    z-index: 2;
    cursor: col-resize;
    background: transparent;
    touch-action: none;       /* let pointer drag work on touch devices */
}
/* the visible hairline */
body.ai-mode-on .ai-col-resizer::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    background: #ede9fe;
    transition: width 0.15s ease, background 0.15s ease;
}
/* the grip handle */
body.ai-mode-on .ai-col-resizer::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 30px;
    border-radius: 4px;
    background: #d6ccf5;
    transition: background 0.15s ease;
}
body.ai-mode-on .ai-col-resizer:hover::before,
body.ai-mode-on .ai-col-resizer.dragging::before {
    width: 3px;
    background: linear-gradient(180deg, #8b5cf6, #c4b5fd);
}
body.ai-mode-on .ai-col-resizer:hover::after,
body.ai-mode-on .ai-col-resizer.dragging::after,
body.ai-mode-on .ai-col-resizer:focus-visible::after {
    background: #8b5cf6;
}
body.ai-mode-on .ai-col-resizer:focus-visible {
    outline: none;
}

/* Source-list: reset margin & count citations for the numbered chip. */
body.ai-mode-on .ai-result-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    counter-reset: ai-citation-counter ai-recommend-counter;
}

/* Section titles ("Citations", "Recommended Documents") become
   prominent chips with a gradient underline + an SVG icon. */
body.ai-mode-on .ai-section-title {
    margin: 24px 0 12px !important;
    list-style: none !important;
    padding: 0 !important;
}
body.ai-mode-on .ai-section-title:first-child {
    margin-top: 0 !important;
}
body.ai-mode-on .ai-section-title h3 {
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: -0.1px !important;
    text-transform: none !important;
    color: #1f2937 !important;
    line-height: 1.25 !important;
    margin: 0 0 4px 0 !important;
    padding: 0 0 12px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    border-bottom: 2px solid !important;
    border-image: linear-gradient(90deg, #8b5cf6 0%, #c4b5fd 50%, transparent 100%) 1 !important;
}

/* Each result row → card with hover affordance. */
body.ai-mode-on .ai-result-list li.searchresultitem {
    position: relative;
    margin-bottom: 0 !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    border: 1px solid #ece9f7 !important;
    transition:
        border-color 0.18s ease, transform 0.18s ease,
        box-shadow 0.18s ease, background 0.18s ease !important;
}
body.ai-mode-on .ai-result-list li.searchresultitem:hover {
    border-color: #c4b5fd !important;
    background: #faf5ff !important;
    transform: translateX(2px) !important;
    box-shadow: 0 2px 10px rgba(139, 92, 246, 0.12) !important;
}
/* Subtle arrow indicator on recommended-document items (not citations). */
body.ai-mode-on .ai-result-list li.searchresultitem:not(.citation-item)::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b5cf6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 5l7 7-7 7'/></svg>");
}
body.ai-mode-on .ai-result-list li.searchresultitem:not(.citation-item):hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(4px);
}
body.ai-mode-on .ai-result-list li.searchresultitem:not(.citation-item):hover {
    padding-right: 32px !important;
}

/* Title within a result row. */
body.ai-mode-on .ai-result-list li.searchresultitem .searchresulttitle {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.4 !important;
    overflow-wrap: anywhere;
    transition: color 0.18s ease;
}
body.ai-mode-on .ai-result-list li.searchresultitem:hover .searchresulttitle {
    color: #6d28d9 !important;
}

/* Snippet within a result row (clamped to 2 lines). */
body.ai-mode-on .ai-result-list li.searchresultitem .searchresultsnippet {
    font-size: 12px !important;
    color: #6b7280 !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Citation items get a numbered purple chip on the left. */
body.ai-mode-on .ai-result-list li.citation-item {
    counter-increment: ai-citation-counter;
    position: relative;
    padding-left: 48px !important;
    opacity: 1 !important;
}
body.ai-mode-on .ai-result-list li.citation-item::before {
    content: counter(ai-citation-counter);
    position: absolute;
    left: 12px;
    top: 12px;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 2px 6px rgba(124, 58, 237, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
body.ai-mode-on .ai-result-list li.citation-item:hover::before {
    transform: scale(1.05);
    box-shadow:
        0 4px 10px rgba(124, 58, 237, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Recommended-document items get a matching numbered purple chip on the left,
   mirroring the citation chip but with its own 1-based counter. */
body.ai-mode-on .ai-result-list li.recommend-item {
    counter-increment: ai-recommend-counter;
    position: relative;
    padding-left: 48px !important;
}
body.ai-mode-on .ai-result-list li.recommend-item::before {
    content: counter(ai-recommend-counter);
    position: absolute;
    left: 12px;
    top: 12px;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 2px 6px rgba(124, 58, 237, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
body.ai-mode-on .ai-result-list li.recommend-item:hover::before {
    transform: scale(1.05);
    box-shadow:
        0 4px 10px rgba(124, 58, 237, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Matched words render as plain text — no highlight in AI mode. */
body.ai-mode-on .ai-result-list .highlight {
    background: none !important;
    color: inherit !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-weight: inherit !important;
}

/* Empty / loading state polish. */
body.ai-mode-on .ai-loading-initial,
body.ai-mode-on .ai-loading-final {
    padding: 8px 0 !important;
}

/* Responsive: stack columns and restore a top divider on sources.
   Kept in sync with the .ai-content breakpoint above (1250px) — side-by-side
   columns stop working well before the tablet range. */
@media (max-width: 1250px) {
    /* Stacked, the columns must span the full width. The side-by-side layout
       sets align-items:flex-start (so the row height follows the summary), but
       in a column flex container that same value shrink-wraps each child to
       its content width — hence the explicit stretch. */
    body.ai-mode-on .ai-content {
        flex-direction: column !important;
        align-items: stretch !important;
        /* The one-screenful floor the JS sets inline is a two-column idea: the
           sources sit beside the answer and should reach its bottom. Stacked
           they sit below it, so the floor would only strand empty space. */
        min-height: 0 !important;
    }
    /* The separator between the two stacked blocks is the sources' border-top
       below — no border here, or the two would read as a double rule. */
    body.ai-mode-on .ai-summary {
        padding-right: 0 !important;
        border-right: none !important;
        border-bottom: none !important;
        padding-bottom: 20px;
    }
    /* Stacked layout: hide the divider and clear the JS-set pixel width so the
       summary spans the full width again. */
    body.ai-mode-on .ai-col-resizer {
        display: none !important;
    }
    body.ai-mode-on .ai-content--resizable .ai-summary {
        flex: 1 1 auto !important;
    }
    body.ai-mode-on .ai-content--resizable .ai-summary,
    body.ai-mode-on .ai-content--resizable .ai-sources {
        padding-left: 0 !important;
    }
    /* The sources column is height-locked to the summary from JS (inline
       height/max-height) so the two columns line up side by side. Stacked,
       that height is meaningless — it would either strand empty space or clip
       the list mid-card — so hand the height back to the content and let the
       page scroll instead of the box. */
    body.ai-mode-on .ai-sources {
        height: auto !important;
        max-height: none !important;
        overflow-y: visible !important;
        border-top: 1px solid #ede9fe !important;
        padding-top: 16px !important;
    }
}

@media (max-width: 768px) {
    body.ai-mode-on .ai-result-box {
        padding: 20px !important;
    }
}