/* AI side panel, Black November (linked by footer_2021.js right after ai_panel.css, so it wins on equal specificity).
   The chat art is drawn by the panel behind its header and the iframe, whose page is transparent
   (see ai_theme_black_november.css). */
   html:is(.dark-mode, :not(.dark-mode)) .ai-panel-iframe {
    background: transparent;
}
html:is(.dark-mode, :not(.dark-mode)) #ai-side-panel .ai-panel-header {
    background-color: transparent;
}
html:is(.dark-mode, :not(.dark-mode)) #ai-side-panel .ai-panel-header .ai-panel-title-text,
html:is(.dark-mode, :not(.dark-mode)) #ai-side-panel .ai-panel-header .ai-panel-btn
{
    color: #fff;
}

html:is(.dark-mode, :not(.dark-mode)) #ai-side-panel .ai-panel-header .ai-panel-btn:hover {
    color: #FCEFC6;
}

html:is(.dark-mode, :not(.dark-mode)) .dark-mode .ai-panel-btn.ai-panel-btn-menu:hover img {
    filter: brightness(0) invert(1);
}

html:is(.dark-mode, :not(.dark-mode)) #ai-side-panel {
    background: #060606;
}
/* container-type lets the art use the panel's own size (cqw / cqh) */
html:is(.dark-mode, :not(.dark-mode)) #ai-side-panel.is-open {
    container-type: size;
}
/* The art is a landscape picture turned to fit the portrait panel: the ::before is as wide as the panel is tall (and
   as tall as it is wide), then rotated. It sits under the panel's content (z-index -1; the panel is a stacking context). */
html:is(.dark-mode, :not(.dark-mode)) #ai-side-panel.is-open::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 47%;
    width: calc(100cqh - .7cqw);
    height: calc(100cqw - .7cqh);
    transform: translate(-50%, -50%) rotate(90.4deg) scaleY(-1);
    pointer-events: none;
    background: linear-gradient(268.45deg, rgba(0, 0, 0, .8) 11.454%, rgba(152, 93, 0, .192) 96.106%),
    linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)),
    url(https://c1.neweggimages.com/webresource/themes/nest/images/holidays/black_friday/2026/chat-bg-pc.png) 49.12% 49.02% / 127.4% 180.13% no-repeat,
    #000;
}


html:is(.dark-mode, :not(.dark-mode)) #ai-side-panel.is-float, 
html:is(.dark-mode, :not(.dark-mode)) #ai-side-panel.is-float.is-open {
    filter: drop-shadow(0 0 9.1px #FFC000);
}

html:is(.dark-mode, :not(.dark-mode)) .ai-panel-btn.ai-panel-btn-menu img {
    filter: brightness(0) invert(1);
}

html:is(.dark-mode, :not(.dark-mode)) .ai-panel-btn:hover {
	background: rgba(255, 236, 170, .16);
}

html:is(.dark-mode, :not(.dark-mode)) .ai-panel-spark-wrap {
    position: relative;
}
html:is(.dark-mode, :not(.dark-mode)) .ai-panel-spark-wrap img {
    opacity: 0;
}

html:is(.dark-mode, :not(.dark-mode)) .ai-panel-spark-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("https://c1.neweggimages.com/webresource/themes/nest/images/holidays/black_friday/2026/spark-header.svg") center / contain no-repeat;
  }