/* ============================================================
 * AI Mode - Black November theme pack
 * Loaded AFTER newegg_ai_chat.css (and any other page css) and only
 * overrides what the theme changes. Do not copy base rules into here.
 * Pages: 20-Ai/ai_default_black_november.html, ai_pdp_black_november.html
 * Layout / sizing of the theme DOM lives in newegg_ai_chat.css
 * ("Theme-pack DOM (Black November)"); this file only holds colours.
 * Colour values come from the design file (UX-2547).
 * ============================================================ */

 html:is(.dark-mode, :not(.dark-mode)) .is-event-theme {
	--ai-bn-gold: #FFCD07;
	--ai-bn-title-from: #FEEA8A;
	--ai-bn-title-to: #EBB451;
	--ai-bn-btn-from: #FFFCB0;
	--ai-bn-btn-to: #EBB553;
	--ai-bn-link-from: #F5AE44;
	--ai-bn-link-to: #FFE87E;
	--ai-bn-link-arrow: #F5B248;
	--ai-bn-drop: #9FCBA4;
	--ai-bn-chip-bg: rgba(0, 0, 0, .61);
	--ai-bn-text: #fff;
	--ai-bn-panel: #0b0a08;
	--ai-bn-card: #15120b;
	--ai-bn-msg: rgba(255, 203, 56, .12);
	--bn-hover: rgba(255, 255, 255, .12);
}

/* Hero: logo + title */
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	align-self: center;
	max-width: 100%;
	text-align: center;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-hero-logo {
	display: block;
	width: 450px;
	max-width: 100%;
	height: auto;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-hero-title {
	font-size: 32px;
	font-weight: 800;
	line-height: 1.6;
	color: var(--ai-text-black);
}

/* the base theme defines its blue gradients and the scrollbar colour as variables, dark mode turns them gold
   (light mode keeps the regular AI Mode look) */
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme {
	--ai-gradient-border: linear-gradient(90deg, #FFE87E, #F5AE44, #FFCD07, #FFE87E);
	--ai-gradient-btn: linear-gradient(-90deg, #EBB553, #FFFCB0);
	--ai-scrollbar-thumb: rgba(255, 232, 126, .3);
}

/* ------------------------------------------------------------
 * The hero replaces the default welcome greeting and title.
 * ------------------------------------------------------------ */
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-hero ~ .ai-welcome-spark,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-hero ~ .ai-welcome-title,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-messages  .ai-welcome-spark
{
	display: none;
}

/* ------------------------------------------------------------
 * Header: "Shop with" next to the gold Celeste logo
 * ------------------------------------------------------------ */
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-mode-text {
	background: linear-gradient(90deg, var(--ai-bn-title-from) 0%, var(--ai-bn-title-to) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: #E5E7EB;
}

/* ------------------------------------------------------------
 * Shared: price drop
 * ------------------------------------------------------------ */
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-drop {
	color: var(--ai-bn-drop);
}

/* ------------------------------------------------------------
 * Hero: gradient title (dark mode only, light mode keeps the base colour)
 * ------------------------------------------------------------ */
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-hero-title {
	background: linear-gradient(90deg, #fff 0%, #FFCD76 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* ------------------------------------------------------------
 * Sidebar: price alerts
 * ------------------------------------------------------------ */
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-sidebar-price-alerts-title {
	color: var(--ai-bn-gold);
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-input-follow-chip{
	background: rgba(255, 203, 56, .2);
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-input-follow-chip .ai-input-follow-chip-title,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-input-follow-chip .ico
{
	color: #fff;
}
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-sidebar-price-alerts-desc,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-sidebar-price-alert {
	color: var(--ai-bn-text);
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-sidebar-price-alert:hover {
	background: rgba(255, 255, 255, 0.12);
}

/* ------------------------------------------------------------
 * Nail your shopping strategy
 * ------------------------------------------------------------ */
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-strategy-title {
	color: var(--ai-bn-text);
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme.is-in-panel .ai-welcome .ai-input-box {
	min-height: 100px;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-input-btn-voice {
	align-self: center;
}

/* Card background = photo (per scene, set --ai-bn-card-img) under a black fade.
   Placeholder glow until the photos are added. */
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-card {
	--ai-bn-card-img: radial-gradient(circle at 82% 78%, #5b4513 0%, #1d1608 58%, #0b0b0b 100%);
	background:
		linear-gradient(186deg, rgba(0, 0, 0, .6) 0%, #000 100%),
		var(--ai-bn-card-img);
	box-shadow: none;
	color: var(--ai-bn-text);
    border: 1px rgba(255, 205, 7, .35) solid;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-card--gift {
	--ai-bn-card-img: url("https://c1.neweggimages.com/webresource/themes/Nest/images/holidays/black_friday/2026/card-bg-gift.png");
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-card--discount {
	--ai-bn-card-img: url("https://c1.neweggimages.com/webresource/themes/Nest/images/holidays/black_friday/2026/card-bg-tech.png");
	background:
		linear-gradient(185deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .54) 100%),
		var(--ai-bn-card-img);
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-card--personal,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-card--holiday {
	--ai-bn-card-img: url("https://c1.neweggimages.com/webresource/themes/Nest/images/holidays/black_friday/2026/card-bg-pc.png");
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-card--gift,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-card--discount,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-card--holiday,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-card--personal {
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-card--functions {
	background: linear-gradient(159deg, #000 0%, #DBA84F 100%) center / cover;
	border: none;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .alert-danger {
	border-color: #FF5B4D;
	background: #471100;
}

/* Loading card: the discount card as three skeleton rows (title, button, product tiles).
   The shimmer comes from the shared .preload-assembler; here only the dark base, the sizes and the radii. */
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-card--loading {
	cursor: default;
	pointer-events: none;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-skeleton {
	display: block;
	flex: 0 0 auto;
	min-height: 0;
	background-color: rgba(255, 255, 255, .12);
	border-radius: 4px;
	overflow: hidden;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-skeleton::after {
	border-radius: inherit;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-skeleton--title {
	height: 44px;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-skeleton--cta {
	width: 208px;
	height: 27px;
	border-radius: 40px;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-skeleton--products {
	height: 79px;
	border-radius: 8px;
}

/* Loading price alerts (sidebar): the same rows as the real list, each text line is a 14px bar in a 20px line box */
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-sidebar-price-alerts--loading {
	pointer-events: none;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-sidebar-price-alerts--loading .ai-sidebar-price-alert:hover {
	background: none;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-skeleton--pa-title {
	width: 112px;
	height: 20px;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-skeleton--pa-desc {
	width: 100%;
	height: 14px;
	margin: 11px 0 3px;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-skeleton--pa-cover {
	width: 60px;
	height: 40px;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-skeleton--pa-name {
	width: 124px;
	height: 14px;
	margin: 3px 0;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-skeleton--pa-price {
	width: 56px;
	height: 14px;
	margin: 3px 8px 3px 0;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-skeleton--pa-drop {
	width: 40px;
	height: 14px;
	margin: 3px 0;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-skeleton--pa-link {
	width: 64px;
	height: 14px;
	margin: 10px auto 3px;
}

/* title: gold gradient text for the sparkle variants */
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-card-title--spark {
	background: linear-gradient(90deg, var(--ai-bn-title-from) 0%, var(--ai-bn-title-to) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-card-em {
	color: var(--ai-bn-gold);
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-card-spark {
	background: url(https://c1.neweggimages.com/webresource/themes/nest/images/holidays/black_friday/2026/ai_spark.png) center / contain no-repeat;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-card-spark::before {
	background: linear-gradient(135deg, #FCE686 28%, #FDEDBC 100%);
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-card-desc {
	color: var(--ai-bn-text);
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-card-chip {
	border-color: #fff;
	background: var(--ai-bn-chip-bg);
	color: var(--ai-bn-text);
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-card-cta {
	background: linear-gradient(90deg, var(--ai-bn-btn-from) 0%, var(--ai-bn-btn-to) 100%);
	color: #212121;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-card-product {
	background: #fff;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-card-more {
	background: linear-gradient(180deg, #FCE585 0%, #EEBD5B 100%);
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-card-more::before {
	background: #000;
	box-shadow: -4px 0 0 #000, 4px 0 0 #000;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-card-badge::before {
	border-color: #FCF1A1;
	background: linear-gradient(90deg, #121212 0%, #000 100%);
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-card-badge-text {
	background: linear-gradient(90deg, #FEFAAD 0%, #ECB958 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-card-deal-meta {
	color: var(--ai-bn-text);
}

/* ------------------------------------------------------------
 * PDP product card: offer tag (.tag), the first line of .goods-info (under the image).
 * Rounded top-left, slanted right edge, rounded bottom-right. The gold body is ::after (skewed), so the left edge
 * stays straight; the sparkle (ai-pdp-tab-star.png) is ::before at the top-left corner and is clipped by the tag.
 * ------------------------------------------------------------ */
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .tag-list .tag.ai-bn-goods-tag {
	position: relative;
	isolation: isolate;
	min-width: 0;
	max-width: 100%;
	margin: 0;
	padding: 0 8px 0 4px;
	border-radius: 6px 0 0 0;
	overflow: hidden;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-goods-tag::before {
	content: '';
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	width: 29px;
	height: 32px;
	background: url("https://c1.neweggimages.com/webresource/themes/nest/images/holidays/black_friday/2026/ai-pdp-tab-star.png") no-repeat 0 0 / 29px 32px;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-goods-tag::after {
	content: '';
	position: absolute;
	z-index: -1;
	top: 0;
	right: 2px;
	bottom: 0;
	left: -8px;
	border-radius: 0 0 5px 0;
	transform: skewX(-10deg);
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .tag-list .tag.ai-bn-goods-tag .tag-text {
	position: relative;
	z-index: 1;
	overflow: hidden;
	padding: 2px 0;
	font-size: 12px;
	font-weight: 700;
	line-height: 14px;
	white-space: nowrap;
	text-overflow: ellipsis;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-goods-tag::after {
	background: linear-gradient(90deg, #FEE57B 0%, #F6B54B 100%);
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .tag-list .tag.ai-bn-goods-tag .tag-text {
	color: #000;
}


/* ============================================================
 * Dark mode colours that were still the blue of the standard
 * AI Mode theme (the design file is dark only).
 * ============================================================ */

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme,
html:is(.dark-mode, :not(.dark-mode)) .ai-chat-app.is-event-theme,
html:is(.dark-mode, :not(.dark-mode)) .ai-chat-app.is-event-theme:has(.ai-welcome) {
	background-color: #000;
	color: #fff;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .header2021.ai-page-lp-header {
	background: rgba(0, 0, 0, .65) !important;
	border-bottom: 0 !important;
	box-shadow: none !important;
}

/* the base theme puts a blue-black image behind the welcome page */
html:is(.dark-mode, :not(.dark-mode)) .ai-chat-app.is-event-theme,
html:is(.dark-mode, :not(.dark-mode)) .ai-chat-app.is-event-theme:has(.ai-welcome) {
	background-image: none;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-sidebar {
	background: rgba(0, 0, 0, .3);
	border-right-color: transparent;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-sidebar-panel {
	background-color: transparent;
}

/* ------------------------------------------------------------
 * Default page background. Light mode: the regular animation (the
 * page canvas, dithering-warp.js). Dark mode: the gold silk of the
 * Black November homepage on its own canvas (.ai-bn-silk, created by
 * scripts/ai_black_november_warp.js); the base css already hides the
 * page canvas in dark mode.
 * ------------------------------------------------------------ */
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-main:has(.ai-bn-hero) .ai-canvas-layer > canvas.ai-bn-silk {
	display: none;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-main:has(.ai-bn-hero) .ai-canvas-layer,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-main:has(.ai-bn-hero) .ai-canvas-layer > canvas.ai-bn-silk {
	display: block;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-main:has(.ai-bn-hero) .ai-canvas-layer > canvas:not(.ai-bn-silk) {
	display: none;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-main:has(.ai-bn-hero) > .ai-canvas-layer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	flex: none;
	width: auto;
	height: auto;
	overflow: hidden;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-main:has(.ai-bn-hero) > .ai-canvas-layer > canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* the same scrim as the Black November homepage (.black-friday-silk::after) so both pages show the silk at the same
   brightness: the bare shader is much brighter than the text on top of it likes */
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-main:has(.ai-bn-hero) > .ai-canvas-layer::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .74) 0%, rgba(0, 0, 0, .63) 40%, rgba(0, 0, 0, .76) 78%, #000 100%);
	pointer-events: none;
}

/* ------------------------------------------------------------
 * Chat page background: gold marble + PC ring, then the black pool
 * ------------------------------------------------------------ */
html:is(.dark-mode, :not(.dark-mode)) .ai-chat-app.is-event-theme:not(:has(.ai-welcome)) {
	background:
		radial-gradient(ellipse 46% 59% at 72% 50%, #000 0%, rgba(0, 0, 0, 0) 100%),
		linear-gradient(180deg, rgba(0, 0, 0, 0) 46.33%, #000 85.14%),
		linear-gradient(180deg, rgba(0, 0, 0, 0) 4.97%, #000 80.56%),
		linear-gradient(rgba(0, 0, 0, .4), rgba(0, 0, 0, .4)),
		url("https://c1.neweggimages.com/webresource/themes/nest/images/holidays/black_friday/2026/chat-bg-pc.png") center / cover no-repeat,
		linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)),
		linear-gradient(180deg, #020A21 1.69%, #00081E 40.24%);
}

html:is(.dark-mode, :not(.dark-mode)) .ai-chat-app.is-event-theme.is-load {
	background:
		radial-gradient(ellipse 46% 59% at 72% 50%, #000 0%, rgba(0, 0, 0, 0) 100%),
		linear-gradient(180deg, rgba(0, 0, 0, 0) 46.33%, #000 85.14%),
		linear-gradient(180deg, rgba(0, 0, 0, 0) 4.97%, #000 80.56%),
		linear-gradient(rgba(0, 0, 0, .4), rgba(0, 0, 0, .4)),
		linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)),
		linear-gradient(180deg, #020A21 1.69%, #00081E 40.24%);
}

html:is(.dark-mode, :not(.dark-mode)) .ai-chat-app.is-event-theme .header2021.ai-page-lp-header {
	background: rgba(0, 0, 0, .46) !important;
	border-bottom: 0 !important;
	box-shadow: none !important;
}

html:is(.dark-mode, :not(.dark-mode)) .ai-chat-app.is-event-theme .ai-sidebar {
	background: rgba(0, 0, 0, .41);
}

/* ------------------------------------------------------------
 * Input: gold ring, gold send button, gold attach button
 * ------------------------------------------------------------ */
/* default page: the 3px ring is the ::before of the input box (the base theme gives it a solid blue border). The design
   ring runs gold > orange > gold with a silver glint in the top-left and bottom-right corner, so the ring is a masked
   gradient instead of a border. */
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-welcome .ai-input,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-welcome .ai-input-row,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-welcome .ai-input-wrapper,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-welcome .ai-welcome-keywords {
	margin-left: auto;
	margin-right: auto;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-welcome .ai-input-wrapper {
	padding: 0;
	background: transparent;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-welcome .ai-input-glow {
	display: none;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-welcome .ai-input-box::before {
	border: 0;
	padding: 3px;
	background:
		radial-gradient(circle 190px at 0 0, #DEE4D9 0%, rgba(222, 228, 217, 0) 100%),
		radial-gradient(circle 190px at 100% 100%, #DEE4D9 0%, rgba(222, 228, 217, 0) 100%),
		linear-gradient(90deg, #FFCD07 0%, #FF8307 36%, #FF8307 64%, #FFCD07 100%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	backdrop-filter: none;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-welcome .ai-input-wrapper.is-error .ai-input-box::before {
	background: #c00;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-input-btn-send:not(:disabled),
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-input-compose .ai-input-btn-send:not(:disabled),
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-welcome .ai-input-compose .ai-input-btn-send:not(:disabled) {
	background-image: linear-gradient(90deg, var(--ai-bn-btn-from) 0%, var(--ai-bn-btn-to) 100%);
	box-shadow: 0 2px 8px rgba(235, 181, 83, .4), 0 1px 0 rgba(255, 252, 176, .5) inset;
	color: #212121;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-input-btn-attach {
	border-color: transparent;
	background: linear-gradient(135deg, #FFE87E 0%, #F5AE44 100%) !important;
	color: #212121;
}

/* the icon is an image, the base theme tints it blue */
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-input-btn-attach .ai-chat-svg-upload {
	filter: brightness(0);
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-feedback>div:not(.ai-input-end-agent),
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-input-btn-voice,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-input-btn-voice:hover {
	color: var(--ai-bn-gold);
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-input-btn-voice,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-input-btn-voice:hover {
	background: #333;
}

/* ------------------------------------------------------------
 * Default page: keyword chips, "explore" link, sparkles
 * ------------------------------------------------------------ */
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-keyword {
	background: #000;
	border-color: rgba(255, 205, 7, .35);
	color: #fff;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-keyword:hover {
	background: #181206;
	border-color: #EDB407;
	box-shadow: 0 0 40px 5px rgba(255, 196, 7, .7);
	color: #fff;
}

/* the sparkle image is gold and blue: use the all-gold copy of it */
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-keyword .ai-spark-sm {
	content: url("https://c1.neweggimages.com/webresource/themes/Nest/images/icons/ai-spark2-gold.png");
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-welcome-learn-more-link,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-sidebar-price-alerts-view-all {
	color: var(--ai-bn-link-to);
}

/* "see all" of the price alerts: the same gold link with an arrow as "Explore what it can do" */
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-sidebar-price-alerts-view-all {
	align-items: center;
	gap: 4px;
	font-weight: 500;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-sidebar-price-alerts-view-all .ico {
	font-size: 11px;
}

/* ------------------------------------------------------------
 * Sidebar
 * ------------------------------------------------------------ */
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-sidebar-new-chat {
	background-image: linear-gradient(90deg, var(--ai-bn-btn-from) 0%, var(--ai-bn-btn-to) 100%);
	box-shadow: 0 2px 8px rgba(235, 181, 83, .35);
	color: #212121;
}
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-sidebar-new-chat .ico {
	color: #212121;
}
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-sidebar-history-title {
	color: var(--ai-bn-gold);
}

/* ------------------------------------------------------------
 * Chat: bubbles, links, option chips
 * ------------------------------------------------------------ */
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-message.is-user .ai-message-bubble {
	background: #424036;
	color: #F5F9FF;
}
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-nav-permission-sheet,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-message.is-ai .ai-message-bubble,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-message.is-agent .ai-message-bubble {
	background: var(--ai-bn-msg) !important;
	color: #fff;
}
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-nav-permission-title,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-nav-permission-desc,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-reply-link-card p {
	color: #fff;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-message-text-btn {
	color: #8BB2F1;
}

/* colors.css: .dark-mode .text-blue { color: #AFC3EE !important } */
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-message-bubble a,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-message-bubble a.text-blue{
	color: var(--ai-bn-link-to) !important;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-message-bubble a.affirm-modal-trigger,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .__affirm-logo.__affirm-logo-primary.__ligature__affirm_full_logo__:after, 
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .__affirm-logo.__affirm-logo-primary.__ligature__affirm_short_logo__:after, 
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .__affirm-logo.__affirm-logo-blue.__ligature__affirm_full_logo__:after, 
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .__affirm-logo.__affirm-logo-blue.__ligature__affirm_short_logo__:after,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .__affirm-logo.__affirm-logo-primary, 
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .__affirm-logo.__affirm-logo-blue {
	color:#fff !important
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-option-chip {
	border-color: rgba(235, 181, 83, .45);
	background-color: rgba(235, 181, 83, .16);
	color: #FDEDBC;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-option-chip:hover {
	box-shadow: 0 2px 8px rgba(235, 181, 83, .40);
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-message-products .swiper-slide {
	background: rgba(0, 0, 0, .56) !important;
	border-color: #161B35;
	color: #fff;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-message-products .goods-container .goods-img {
	background-color: #fff;
	border-radius: 8px 8px  0 0;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .header2021.bg-white {
	color: #fff;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-signin-input-banner-close {
	color: #fff;
}

/* ------------------------------------------------------------
 * PDP panel
 * ------------------------------------------------------------ */
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pdp-panel,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pdp-panel-actions {
	background: var(--ai-bn-panel);
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pdp-panel-nav-btn {
	color: #fff;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pdp-panel-nav-btn:hover,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pdp-info-card-link:hover {
	color: var(--ai-bn-gold);
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pdp-panel-close {
	background: rgba(255, 255, 255, .06);
	color: #E5E7EB;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pdp-panel-close:hover {
	background: rgba(255, 255, 255, .1);
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pdp-panel-title,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pdp-info-rating-num,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pdp-info-price-block .goods-price-current,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pdp-info-price-block .goods-price-was,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pdp-info-card-title,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pdp-info-card-link,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pdp-info-list,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pdp-info-faq dt,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pdp-info-faq dd,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pdp-info-review-text,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pdp-info-return-text,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .product-address,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .product-address button {
	color: #fff;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pdp-info-ship,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pdp-info-card {
	background: var(--ai-bn-card) !important;
	color: #fff !important;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pdp-info-ship {
	border-color: rgba(255, 203, 56, .35);
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pdp-panel-con .product-delivery-new {
	background: transparent !important;
	border-color: transparent;
}

/* "Still don't know where to start?" rows: the dark gold card of the pin shortcuts, gold (not blue) on hover,
   the same in Light and Dark */
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-recommendations-title,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-recommendations-link span {
	color: #fff;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-recommendations-item {
	border-color: rgba(235, 181, 83, .45);
	background: linear-gradient(135deg, rgba(255, 205, 7, .17) 0%, rgba(255, 205, 7, .07) 100%), rgba(20, 15, 4, .7);
	transition: border-color .15s, background .15s;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-recommendations-item:hover,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-recommendations-item:focus-within {
	border-color: #FFCD07;
	background: linear-gradient(135deg, rgba(255, 205, 7, .24) 0%, rgba(255, 205, 7, .1) 100%), rgba(20, 15, 4, .7);
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-recommendations-link,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-recommendations-link:hover {
	background: transparent;
	color: #fff;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pdp-info-ship-title,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .product-delivery-title {
	color: var(--ai-bn-drop);
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .product-delivery-title .ico,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .product-delivery-new a,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .product-delivery-new a:hover {
	color: #fff;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pdp-info-card-icon .ai-chat-svg,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pdp-info-ship-icon .ai-chat-svg {
	filter: brightness(0) invert(1);
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pdp-info-spec-pills li {
	background: var(--ai-bn-msg);
	color: #fff;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pdp-info-details-link,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pdp-info-return-text a {
	color: var(--ai-bn-gold);
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pdp-discuss-more-btn {
	background: linear-gradient(90deg, var(--ai-bn-btn-from) 0%, var(--ai-bn-btn-to) 100%);
	color: #000;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pdp-discuss-more-btn:hover {
	box-shadow: 0 6px 18px rgba(255, 205, 7, .3);
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pdp-discuss-more-btn-icon {
	color: #000;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .message.message-note::before {
	background-color: #F5AE44;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pdp-category-tab.is-active {
	border-bottom-color: var(--ai-bn-gold);
	color: var(--ai-bn-gold);
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pdp-info-card-icon .ico-undo {
	color: #F5AE44;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-main-body > .resizer {
	background-color: #363636;
	background-image: linear-gradient(-90deg, #FFE87E, #F5AE44);
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-main-body > .resizer::before {
	filter: invert(1);
}


/* pin */
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme.is-in-panel .ai-welcome-greeting {
	color: #fff;
}
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme.is-in-panel .ai-welcome-title {
    background: linear-gradient(90deg, #fff 0%, #FFCD76 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme.is-in-panel .ai-message-bubble a {
	color: #fff;
}
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme.is-in-panel .ai-signin-input-banner-text,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme.is-in-panel .ai-signin-input-banner-close {
	color: #fff;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme.is-in-panel .ai-signin-input-banner-link {
	color: #8BB2F1;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme.is-in-panel .ai-message.is-ai .ai-message-bubble, 
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme.is-in-panel .ai-message.is-agent .ai-message-bubble {
	background-color: #1B1200;
}
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme.is-in-panel .ai-message-products .swiper-slide {
	background-color: #412A02 !important;
}
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-message .ai-message-avatar{
    position: relative;
}
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-message .ai-message-avatar .ai-think-arc--blue{
    stroke:#ffa507
}
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-message .ai-message-avatar img{
	display: none;
}
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-message .ai-message-avatar::before {
    content: '';
    height: 32px;
    width: 32px;
    background: url(https://c1.neweggimages.com/webresource/themes/nest/images/holidays/black_friday/2026/ai_spark.png);
    position: absolute;
    background-size: contain;
}
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme.is-in-panel .ai-message.is-user .ai-message-bubble {
    background: rgba(255, 234, 158, .81);
    color: #000;
}
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme.is-in-panel .ai-message-products .swiper-slide .tag-list {
	justify-content: flex-end;
	padding-right: 8px;
	box-sizing: border-box;
}
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme.is-in-panel .ai-message-products .goods-container .goods-img {
	margin-top: 15px;
}


@media (max-width: 1299px) {
	html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-keyword {
		font-size: 12px;
		padding: 8px 12px;
	}

	html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-keyword .ai-spark-sm {
		width: 15px;
		height: 15px;
	}
}

@media (max-width: 999px) {
	html:is(.dark-mode, :not(.dark-mode)) .ai-chat-app.is-event-theme:not(:has(.ai-welcome)) {
		background:
			radial-gradient(ellipse 46% 59% at 72% 50%, #000 0%, rgba(0, 0, 0, 0) 100%),
			linear-gradient(180deg, rgba(0, 0, 0, 0) 46.33%, #000 85.14%),
			linear-gradient(180deg, rgba(0, 0, 0, 0) 4.97%, #000 80.56%),
			linear-gradient(rgba(0, 0, 0, .4), rgba(0, 0, 0, .4)),
			url("https://c1.neweggimages.com/webresource/themes/nest/images/holidays/black_friday/2026/chat-bg-pc.png") center / cover no-repeat,
			linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, .55)),
			linear-gradient(180deg, #020A21 1.69%, #00081E 40.24%);
	}

	html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-sidebar,
	html:is(.dark-mode, :not(.dark-mode)) .ai-chat-app.is-event-theme .ai-sidebar,
	html:is(.dark-mode, :not(.dark-mode)) .ai-chat-app.is-event-theme:not(:has(.ai-welcome)) .ai-sidebar,
	html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-sidebar.is-expanded,
	html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pdp-panel,
	html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pdp-panel.is-expanded {
		background: #000;
	}
	html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-input-btn-attach {
		width: 23px;
		height: 23px;
	}
    html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-message .ai-message-avatar::before {
        content: '';
        height: 22px;
        width: 22px;
        background: url(https://c1.neweggimages.com/webresource/themes/nest/images/holidays/black_friday/2026/ai_spark.png);
        position: absolute;
        background-size: contain;
    }
    html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-input{
        border-top: none;
    }
}

@media (max-width: 799px) {
	html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-card {
		background:
			linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .65) 100%),
			var(--ai-bn-card-img);
	}
	
	html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-hero-logo {
		width: 260px;
		height: auto;
	}

	html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-hero-title {
		font-size: 22px;
		line-height: 1.4;
	}

	/* same fade as the desktop card, so the title stays readable on the photo */
	html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-card--discount {
		background:
			linear-gradient(180deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .54) 100%),
			var(--ai-bn-card-img);
	}

	/* loading card: same rows as the mobile discount card (title, tiles, button) */
	html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-skeleton--title {
		height: 64px;
	}

	html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-skeleton--cta {
		order: 1;
		width: 144px;
		height: 16px;
		border-radius: 8px;
	}

	html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-skeleton--products {
		height: 54px;
	}

	/* the photos are 3:2 landscape and the mobile card is portrait: the fade fills the card, the photo covers it
	   (stretching both layers to 100% 100% squeezed the photo) */
	html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-card--gift,
	html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-card--discount,
	html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-card--holiday,
	html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-card--personal {
		background-repeat: no-repeat;
		background-size: 100% 100%, cover;
		background-position: 0 0, center;
	}

	html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-card--functions {
		background: linear-gradient(159.54deg, #000 54.98%, #DBA84F 115.1%),    linear-gradient(168.71deg, rgba(31, 24, 12, .46) 9.76%, rgba(0, 0, 0, .46) 87.2%);
	}

	/* CTA is a gold gradient text link on mobile */
	html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-card-cta {
		background: linear-gradient(276deg, var(--ai-bn-link-from) 0%, var(--ai-bn-link-to) 100%);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-bn-card-cta-arrow {
		border-left-color: var(--ai-bn-link-arrow);
	}
}

@media (max-width: 599px) {
	html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-mode-text {
		display: none;
	}
}

/* ------------------------------------------------------------
 * Scrollbars: 5px gold pill, transparent track, no arrows.
 * The base theme only styles the sidebar history and .has-seo,
 * everything else scrolls with the browser default.
 * ------------------------------------------------------------ */
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme ::-webkit-scrollbar {
	width: var(--ai-scrollbar-size);
	height: var(--ai-scrollbar-size);
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme ::-webkit-scrollbar-track,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme ::-webkit-scrollbar-track-piece,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme ::-webkit-scrollbar-corner {
	background: transparent;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme ::-webkit-scrollbar-button {
	display: none;
	width: 0;
	height: 0;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme ::-webkit-scrollbar-thumb {
	border-radius: 100px;
	background-color: var(--ai-scrollbar-thumb);
	background-clip: padding-box;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme ::-webkit-scrollbar-thumb:hover,
html:is(.dark-mode, :not(.dark-mode)) .ai-chat-app.is-event-theme .has-seo::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 232, 126, .55);
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-sidebar-history,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pdp-panel-scroll,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-messages-chat>.ai-messages-scroll {
	scrollbar-width: thin;
	scrollbar-color: var(--ai-scrollbar-thumb) transparent;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-sidebar-history {
	scrollbar-gutter: auto;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-sidebar-history::-webkit-scrollbar,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pdp-panel-scroll::-webkit-scrollbar,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-messages-chat>.ai-messages-scroll::-webkit-scrollbar {
	width: var(--ai-scrollbar-size);
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-sidebar-history::-webkit-scrollbar-thumb,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pdp-panel-scroll::-webkit-scrollbar-thumb,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-messages-chat>.ai-messages-scroll::-webkit-scrollbar-thumb {
	background-color: var(--ai-scrollbar-thumb);
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-sidebar-history::-webkit-scrollbar-thumb:hover,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pdp-panel-scroll::-webkit-scrollbar-thumb:hover,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-messages-chat>.ai-messages-scroll::-webkit-scrollbar-thumb:hover {
	background-color: rgba(255, 232, 126, .55);
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-voice-read {
	color: #fff;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-voice-read-btn,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-voice-read-btn:hover {
	background: #fff;
	color: #000;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-read-aloud {
	background: #333;
	color: var(--ai-bn-gold);
}
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-voice-controls .ai-voice-status, html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-voice canvas.ai-voice-wave{
	color: var(--ai-bn-gold);
}
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-sidebar-signin-prompt {
	background: var(--bn-hover);
}
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-sidebar-signin-prompt .ai-sidebar-signin-prompt-title,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-sidebar-signin-prompt .ai-sidebar-signin-prompt-desc {
	color: #fff;
}
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-sidebar-chat-item,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-sidebar-support,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-sidebar-support:hover {
	color: #fff;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-sidebar-chat-item:hover,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-sidebar-chat-item.is-active {
	background: var(--bn-hover);
	color: #fff;
}

html:is(.dark-mode, :not(.dark-mode)) .ai-chat-app.is-event-theme.is-in-panel .ai-message-thinking::before {
	background-image: url(https://c1.neweggimages.com/webresource/themes/nest/images/holidays/black_friday/2026/ai_spark.png);
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-sidebar-panel-logo a::after {
	content: '';
	position: absolute;
	top: 50%;
	right: -25px;
	transform: translateY(-50%);
	width: 74px;
	height: 74px;
	background-image: url(https://c1.neweggimages.com/webresource/themes/nest/images/holidays/black_friday/2026/logo_424x210_bright.png);
	background-size: 100%;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-input-box {
	background: #000;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-input-box textarea,
html:is(.dark-mode, :not(.dark-mode)) .ai-chat-app.is-event-theme .ai-main:not(:has(.ai-welcome)) .ai-input-box>textarea,
html:is(.dark-mode, :not(.dark-mode)) .ai-chat-app.is-event-theme .ai-main:not(:has(.ai-welcome)) .ai-input-compose textarea {
	color: #fff;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-input-box textarea::placeholder,
html:is(.dark-mode, :not(.dark-mode)) .ai-chat-app.is-event-theme .ai-main:not(:has(.ai-welcome)) .ai-input-compose textarea::placeholder {
	color: #9CA3AF;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-message-context-ref {
	background: #2a2a2a;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-message-context-ref-icon,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-message-context-ref .ico {
	color: #aaa;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-message-context-ref-text {
	color: #bbb;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-signin-input-banner {
	background: rgba(255, 203, 56, .2);
    border: none;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-signin-input-banner .ai-signin-input-banner-icon{
	position: relative;
}
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-signin-input-banner .ai-signin-input-banner-icon::before{
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    background: url(https://c1.neweggimages.com/webresource/themes/nest/images/holidays/black_friday/2026/ai_spark.png);
}
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-signin-input-banner .ai-signin-input-banner-icon img{
	display: none;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-signin-input-banner-text,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-signin-input-banner-link {
	color: #fff;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .text-gray {
	color: #ADADAD;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .message,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .message-normal:not(.no-bg) {
	border-color: #424242;
	background-color: #262626;
	color: #e3e3e3;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .message .message-wrapper {
	background: transparent !important;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-messages-chat>.ai-scroll-to-bottom-btn,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-messages-chat>.ai-scroll-to-bottom-btn:hover {
	background: #000;
	color: #fff;
	border-color: transparent;
	box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.5);
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-sidebar-icon img,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-sidebar-panel-toggle img,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-header-menu-btn,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-page-lp-header .header2021-nav-icon.ai-chat-svg-shop::before {
	filter: brightness(0) invert(1);
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-sidebar-logo img,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-sidebar-panel-logo img {
	filter: none;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-input-wrapper {
	background: transparent;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-input-glow {
	opacity: 1;
	filter: blur(0);
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-input-box::before {
	background: transparent;
	border-width: 0;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-message-time {
	color: #888;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .is-product-location {
	color: #fff;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .product-delivery-new,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .product-delivery-new .product-delivery-title>strong,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .product-delivery-new .popover-question,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .product-delivery-info {
	color: #e3e3e3 !important;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .n-green-d7 {
	color: #5FA664;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .text-green {
	color: #239A33 !important;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pdp-panel-con .item-promo {
	color: #cc4e00;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pdp-panel-con .item-promo svg path {
	fill: #cc4e00;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pdp-panel-actions .button.bg-white {
	border-color: #ADADAD;
	color: #212121;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .button.bg-orange:not(.toggle-handle) {
	color: #121212;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .resizer img {
	filter: brightness(0) invert(1) saturate(0);
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-sidebar-icon,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-sidebar-icon .ico {
	color: #fff;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-header-signin-btn {
	color: #212121;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-main,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-main.has-seo,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-main.has-seo>.ai-seo {
	background-color: transparent;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-mode-faq,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-mode-try-asking,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-mode-get-started {
	color: #e5e7eb;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-mode-faq h2,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-mode-try-asking h2,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-mode-try-group h3,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-mode-faq summary,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-mode-faq summary::after,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-mode-get-started h2,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-mode-get-started strong {
	color: #f3f4f6;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-mode-faq p,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-mode-try-asking-intro,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-mode-get-started p {
	color: #9ca3af;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-mode-faq details,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-mode-faq details:last-of-type,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-mode-get-started {
	border-color: #374151;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-mode-try-list li {
	background: #1f2937;
	border-color: #374151;
	color: #d1d5db;
}

/* ------------------------------------------------------------
 * Pin mode: this page (ai_chat_pin.html) is the iframe of the AI side panel (#ai-side-panel), and the panel draws the
 * background art behind the header and the iframe (see black_friday_theme.css). So the page itself, its <body> and the
 * app are transparent here. The sidebar, the PDP panel and the other overlays keep their own backgrounds.
 * ------------------------------------------------------------ */
html:is(.dark-mode, :not(.dark-mode)):has(.is-event-theme.is-in-panel),
html:is(.dark-mode, :not(.dark-mode)):has(.is-event-theme.is-in-panel) body {
	background: transparent;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme.is-in-panel:is(:has(.ai-welcome), :not(:has(.ai-welcome)), .is-load) {
	background: none;
}

/* ------------------------------------------------------------
 * Pin mode menu popup (the "more" button of the panel header, drawn inside this page): dark with a thin gold outline
 * like the chat demo; no arrow, no icons, regular weight text, gold tint on hover.
 * ------------------------------------------------------------ */
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-panel-menu-popup {
	background: #15120B;
	border: 1px solid #67531B;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
	top: 0;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-panel-menu-popup::before,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-panel-menu-popup::after {
	display: none;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-panel-menu-item {
	color: #fff;
	font-weight: 400;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-panel-menu-item:hover {
	background: rgba(247, 223, 160, .1);
	color: #FCEFC6;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-panel-menu-item .ico {
	display: none;
}

/* ------------------------------------------------------------
 * Pin mode: "Nail your shopping strategy" shortcuts (ai_chat_pin.html). Rows of art, title and button for the narrow
 * panel; the cards of ai_default_black_november.html are another structure (.ai-bn-*), keep the two apart.
 * ------------------------------------------------------------ */
/* the variables are set on .ai-pin-bn itself: newegg_ai_chat.css sets them there too (blue), so a value on an ancestor
   (like .is-event-theme) would never reach the button */
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pin-bn {
	--ai-pin-bn-gold: #FFCD07;
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	margin-bottom: 24px;
	color: #fff;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pin-bn-title {
	margin: 0 0 2px;
	font-size: 16px;
	font-weight: 700;
	line-height: 22px;
	color: #fff;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pin-bn-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pin-bn-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 10px 12px 10px 10px;
	border: 1px solid rgba(255, 205, 7, .38);
	border-radius: 12px;
	background: linear-gradient(135deg, rgba(255, 205, 7, .17) 0%, rgba(255, 205, 7, .07) 100%), rgba(20, 15, 4, .7);
	overflow: hidden;
	transition: border-color .15s, background .15s;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pin-bn-card:hover,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pin-bn-card:focus-within {
	border-color: var(--ai-bn-gold);
	background: linear-gradient(135deg, rgba(255, 205, 7, .24) 0%, rgba(255, 205, 7, .1) 100%), rgba(20, 15, 4, .7);
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pin-bn-main {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	align-items: center;
	gap: 12px;
	color: #fff;
	text-decoration: none;
}

/* the row's gold border is the focus ring (an outline would be clipped by the overflow) */
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pin-bn-main:focus-visible {
	outline: 0;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pin-bn-art {
	display: flex;
	align-items: center;
	align-self: flex-start;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 10px;
	background: #fff;
	overflow: hidden;
}


html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pin-bn-art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pin-bn-card--gift .ai-pin-bn-art:not(:has(img)),
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pin-bn-card--holiday .ai-pin-bn-art:not(:has(img)),
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pin-bn-card--personal .ai-pin-bn-art:not(:has(img)),
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pin-bn-card--functions .ai-pin-bn-art:not(:has(img)),
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pin-bn-card--discount .ai-pin-bn-art:not(:has(img)) {
	position: relative;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pin-bn-card--functions .ai-pin-bn-art{
	background: none;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pin-bn-card--gift .ai-pin-bn-art:not(:has(img))::before,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pin-bn-card--holiday .ai-pin-bn-art:not(:has(img))::before,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pin-bn-card--personal .ai-pin-bn-art:not(:has(img))::before,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pin-bn-card--functions .ai-pin-bn-art:not(:has(img))::before,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pin-bn-card--discount .ai-pin-bn-art:not(:has(img))::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto 100%;
	pointer-events: none;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pin-bn-card--gift .ai-pin-bn-art:not(:has(img))::before {
	background-image: url("https://c1.neweggimages.com/webresource/themes/Nest/images/holidays/black_friday/2026/card-bg-gift.png");
	transform: scaleX(-1);
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pin-bn-card--personal .ai-pin-bn-art:not(:has(img))::before {
	background-image: url("https://c1.neweggimages.com/webresource/themes/Nest/images/holidays/black_friday/2026/card-bg-pc.png");
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pin-bn-card--discount .ai-pin-bn-art:not(:has(img))::before {
	background-image: url("https://c1.neweggimages.com/webresource/themes/Nest/images/holidays/black_friday/2026/card-bg-tech.png");
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pin-bn-card--holiday .ai-pin-bn-art:not(:has(img))::before {
	background-image: url("	https://c1.neweggimages.com/webresource/themes/nest/images/holidays/black_friday/2026/ai_spark.png");
}

/* html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pin-bn-card--holiday .ai-pin-bn-spark {
	display: inline;
} */

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pin-bn-card--functions .ai-pin-bn-art,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pin-bn-card--holiday .ai-pin-bn-art{
  position: relative;
}
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pin-bn-card--functions .ai-pin-bn-art img,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pin-bn-card--holiday .ai-pin-bn-art img
{
	visibility: hidden;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pin-bn-card--holiday .ai-pin-bn-art::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 30px;
	height: 32px;
	background: url(https://c1.neweggimages.com/webresource/themes/nest/images/holidays/black_friday/2026/ai_spark.png) center / contain no-repeat;
	transform: translateY(-50%) translatex(-50%) rotate(-18.1deg);
	pointer-events: none;
}

/* Price alerts art, as in the demo (pin.html): a 56px tile with a warm radial glow; the character is a bit larger than
   the tile, tilted 20° around its body and cut by the tile's rounded corners */
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pin-bn-card--functions .ai-pin-bn-art {
	align-self: flex-start;
	border-radius: 10px;
	background: radial-gradient(120% 100% at 50% 15%, #4a3610 0%, #15120B 75%);
	overflow: hidden;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pin-bn-card--functions .ai-pin-bn-art::before {
	content: "";
	position: absolute;
	top: 26%;
	left: -3.7%;
	width: 103.25%;
	height: auto;
	aspect-ratio: 1269 / 1240;
	background: url("https://c1.neweggimages.com/webresource/themes/Nest/images/holidays/black_friday/2026/pin-card-eggbot.png") center / 100% 100% no-repeat;
	transform: translate(1.7%, -5.3%) rotate(-20deg);
	transform-origin: 52% 38%;
	pointer-events: none;
}

/* GPU row art, as in the demo: a translucent dark tile with the gold sparkle (the inline SVG) tilted in the middle.
   The photo/sparkle pseudo-elements above are for the other row variants and stay off here. */
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pin-bn-card--holiday .ai-pin-bn-art {
	background: rgba(0, 0, 0, .45);
}

/* html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pin-bn-card--holiday .ai-pin-bn-art::before,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pin-bn-card--holiday .ai-pin-bn-art:not(:has(img))::before {
	display: none;
} */

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pin-bn-card--holiday .ai-pin-bn-spark {
	display: block;
	width: 30px;
	height: 32px;
	transform: rotate(-18.1deg);
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pin-bn-spark {
	width: 30px;
	height: 32px;
	transform: rotate(-18.1deg);
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pin-bn-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	min-width: 0;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pin-bn-name {
	font-size: 14px;
	font-weight: 700;
	line-height: 18px;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pin-bn-name sup {
	font-size: 7px;
	line-height: 1;
	vertical-align: top;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pin-bn-grad {
	background: linear-gradient(90deg, #FBE584 0%, #EDB957 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* the gold button is a label, the whole row is the link */
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pin-bn-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 27px;
	padding: 0 16px;
	border-radius: 40px;
	background: linear-gradient(90deg, #FFFCB0 0%, #EBB553 100%);
	font-size: 12px;
	font-weight: 700;
	line-height: 16px;
	color: #212121;
	white-space: nowrap;
	transition: filter .15s;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-compare-table-wrap table th,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-compare-table-wrap table td,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-compare-table-wrap table td:first-child {
	color: #fff;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-vote-container {
	background: #212121;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pin-bn-main:hover .ai-pin-bn-btn {
	filter: brightness(1.04);
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pin-bn-btn-arrow {
	width: 0;
	height: 0;
	margin: 0 3px;
	border-style: solid;
	border-width: 4px 0 4px 6px;
	border-color: transparent transparent transparent currentColor;
}

/* tier chips under the GPU row, full row width so the three fit on one line */
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pin-bn-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pin-bn-chip {
	padding: 4px 9px;
	border: 1px solid rgba(255, 205, 7, .45);
	border-radius: 999px;
	background: rgba(0, 0, 0, .35);
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	color: #fff;
	cursor: pointer;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pin-bn-chip:hover {
	border-color: var(--ai-bn-gold);
	background: rgba(255, 205, 7, .14);
}

/* keyword chips: the default page's .ai-keyword (themed above), wrapped in the narrow panel */
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pin-bn-keywords {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pin-bn-keywords .ai-keyword {
	gap: 6px;
	padding: 5px 12px 5px 8px;
	font-size: 12px;
	font-weight: 600;
	line-height: 20px;
	white-space: normal;
	/* the panel is always narrow: the (max-width: 1299px) blue border of the default page must not reach it */
	border-color: rgba(255, 205, 7, .35);
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pin-bn-keywords .ai-keyword:hover {
	border-color: #EDB407;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-pin-bn-keywords .ai-spark-sm {
	width: 18px;
	height: auto;
}

/* ------------------------------------------------------------
 * Pin mode: the suggested-reply buttons (.ai-option-chip) look like the keyword chips above (no sparkle, no glow)
 * ------------------------------------------------------------ */
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme.is-in-panel .ai-message-options {
	gap: 8px;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme.is-in-panel .ai-option-chip {
	padding: 5px 12px;
	border-color: rgba(255, 205, 7, .35);
	background: #000;
	font-size: 12px;
	font-weight: 600;
	line-height: 20px;
	color: #fff;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme.is-in-panel .ai-option-chip:hover {
	border-color: #EDB407;
	background: #181206;
	box-shadow: none;
	color: #fff;
}

/* pin: the keyword chips hover without the glow either (the default page keeps it) */
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme.is-in-panel .ai-keyword:hover {
	box-shadow: none;
}

/* ------------------------------------------------------------
 * Loading skeletons (ai_loading.html: CHATS list, message bubbles, PDP panel): the dark-mode grey in both display modes.
 * colors.css only makes .bg-gray dark under .dark-mode, so in Light mode the bars were nearly white on the black theme.
 * ------------------------------------------------------------ */
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .preload-assembler.bg-gray {
	background-color: #424242;
	color: #fff;
}

/* ------------------------------------------------------------
 * Message evaluation (like / dislike) and the "Why wasn't this helpful?" panel: dark gold in Light and Dark.
 * newegg_ai_chat.css only darkens them under .dark-mode, so in Light mode the panel was light grey with the theme's
 * white text on it.
 * ------------------------------------------------------------ */
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-message-evaluation {
	color: #fff;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-vote-container {
	border: 1px solid rgba(235, 181, 83, .45);
	background: linear-gradient(135deg, rgba(255, 205, 7, .17) 0%, rgba(255, 205, 7, .07) 100%), rgba(20, 15, 4, .7);
	color: #fff;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-vote-title,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-vote-dislike-des {
	color: #fff;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-vote-dislike-des {
	opacity: .75;
}

/* the reason chips look like the keyword chips */
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-vote-dislike-options span {
	border-color: rgba(255, 205, 7, .35);
	background-color: #000;
	color: #fff;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-vote-dislike-options span.is-selected,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-vote-dislike-options span:hover {
	border-color: #EDB407;
	background-color: #181206;
	color: #fff;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-vote-container textarea {
	border-color: rgba(255, 205, 7, .35);
	background-color: #000;
	color: #fff;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-vote-container textarea:disabled {
	border-color: rgba(255, 205, 7, .2);
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-vote-container ::-webkit-input-placeholder {
	color: rgba(255, 255, 255, .55);
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-vote-container ::placeholder {
	color: rgba(255, 255, 255, .55);
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-vote-container textarea::-webkit-scrollbar-thumb {
	background-color: #67531B;
}

/* Submit: the gold button of the theme; greyed out while disabled */
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-vote-dislike-btn {
	border-color: transparent;
	background: linear-gradient(90deg, var(--ai-bn-btn-from) 0%, var(--ai-bn-btn-to) 100%);
	color: #212121;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-vote-dislike-btn:hover {
	background: linear-gradient(90deg, var(--ai-bn-btn-from) 0%, var(--ai-bn-btn-to) 100%);
	color: #212121;
	filter: brightness(1.04);
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-vote-dislike-btn:disabled {
	background: rgba(255, 255, 255, .12);
	color: rgba(255, 255, 255, .4);
	filter: none;
}

/* ------------------------------------------------------------
 * Product carousel arrows: the theme's gold at rest and a deeper gold on hover (the default black circle was hard to
 * see on the dark cards, and its hover is blue)
 * ------------------------------------------------------------ */
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-swiper-prev,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-swiper-next {
	background: linear-gradient(135deg, var(--ai-bn-btn-from) 0%, var(--ai-bn-btn-to) 100%);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
	color: #212121;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-swiper-prev:hover,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-swiper-next:hover {
	background: linear-gradient(135deg, #FFE87E 0%, #F5AE44 100%);
	box-shadow: 0 2px 10px rgba(255, 196, 7, .45);
	color: #212121;
}

/* ------------------------------------------------------------
 * Pin mode: the chat history drawer ("Chat history" of the panel menu, #js-ai-history-panel) in Light and Dark.
 * newegg_ai_chat.css gives it a light-blue drawer (navy under .dark-mode) with blue hover rows; here it is the theme's
 * dark gold: warm black drawer, gold title and back arrow, the menu popup's gold tint on hover / current row.
 * ------------------------------------------------------------ */
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-history-panel {
	background: linear-gradient(180deg, #1B1409 0%, #0B0A08 100%);
	color: #fff;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-history-panel-body {
	scrollbar-color: #67531B transparent;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-history-panel-body .ai-sidebar-history-title {
	color: var(--ai-bn-gold);
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-history-panel-body .ai-sidebar-history-title .left,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-history-panel-body .ai-sidebar-history-title .left .ico {
	color: var(--ai-bn-link-to);
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-history-panel-body .ai-sidebar-history-title .left:hover,
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-history-panel-body .ai-sidebar-history-title .left .ico:hover {
	color: var(--ai-bn-gold);
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-history-panel-body .ai-sidebar-chat-item {
	color: #fff;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-history-panel-body .ai-sidebar-chat-item:hover {
	background: rgba(247, 223, 160, .1);
	color: #FCEFC6;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-history-panel-body .ai-sidebar-chat-item.is-active {
	background: rgba(247, 223, 160, .16);
	color: #FCEFC6;
}

/* a chat with a new live-agent message: gold user icon and a dark gold tip */
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-sidebar-chat-item-indicator.is-active {
	color: var(--ai-bn-gold);
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-sidebar-chat-item-tip {
	border: 1px solid rgba(227, 184, 92, .45);
	background: #2B2116;
	color: #FCEFC6;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .5);
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-sidebar-chat-item-tip::before {
	border-color: transparent #2B2116 transparent transparent;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .ai-messages .ai-message-products .goods-info .goods-promo {
	color: #FF8C80;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme.is-in-panel .ai-message-products .goods-container .goods-info {
	padding-top: 15px;
}

html:is(.dark-mode, :not(.dark-mode)) .is-event-theme.is-in-panel .ai-message-products .goods-container>.display-inline-block {
	background-color: transparent;
	color: #fff;
	font-size: 12px;
	top: 0px;
    right: 2px;
}
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .modal-ai-mode-shop-header{
    background: #000 !important;
}
html:is(.dark-mode, :not(.dark-mode)) .is-event-theme .modal-ai-mode-shop-header .modal-ai-mode-shop-close{
color: #fff !important;
}

/* app */
html .ai-chat-app.is-app {
	background: #000 !important;
}
html .ai-chat-app.is-app .ai-content::before {
	content: '';
	position: absolute;
	z-index: -1;
	left: 50%;
	top: 50%;
	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;
}