/* RCN Copilot — /ask/ chat UI. Plugin-only, scoped under .rcn-ai; zero theme edits.
   Full-height chat: scrollable thread + sticky composer, desktop history sidebar.
   Palette: navy #0F172A, brand red #e11d2a, white surfaces, radius 16, soft shadows. */

body.page-id-12605 { background: #eef2f7; }
/* Give the chat more room than the theme's 1140 container — /ask/ page only. */
body.page-id-12605 .rcn-main > .container { max-width: 1480px; }
/* Keep the top-header mobile menu toggle white (on this light-background page the
   theme otherwise renders it dark → invisible on the dark header). Bottom-bar
   icons (.rcn-header__mobile-head) are intentionally dark and left untouched. */
body.page-id-12605 .rcn-header__bar .rcn-header__icon-btn.rcn-hidden-desktop,
body.page-id-12605 .rcn-header__bar .rcn-header__icon-btn.rcn-hidden-desktop svg { color: #fff !important; stroke: #fff !important; }

.rcn-ai {
	--navy: #0F172A; --navy-2: #1e293b; --red: #e11d2a; --red-d: #c20e1c;
	--ink: #1e293b; --muted: #64748b; --faint: #94a3b8;
	--line: #e6eaf0; --soft: #f1f5f9; --soft-2: #f8fafc;
	--r: 16px; --shadow: 0 18px 50px rgba(15, 23, 42, .10);

	display: grid; grid-template-columns: 300px minmax(0, 1fr);
	height: var(--rcn-ai-h, calc(100dvh - 150px)); min-height: 460px;
	max-width: 100%; margin: 18px auto;
	background: #fff; border: 1px solid var(--line); border-radius: var(--r);
	box-shadow: var(--shadow); overflow: hidden;
	color: var(--ink); font-family: inherit; -webkit-font-smoothing: antialiased;
}
.rcn-ai, .rcn-ai *, .rcn-ai *::before, .rcn-ai *::after { box-sizing: border-box; }

/* ------------------------------------------------ sidebar (desktop) */
.rcn-ai__side { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: var(--soft-2); }
.rcn-ai__brand { display: flex; align-items: center; gap: 9px; padding: 20px 18px 2px; font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--navy); }
.rcn-ai__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(225, 29, 42, .14); animation: rcnAiPulse 2s ease-in-out infinite; flex-shrink: 0; }
@keyframes rcnAiPulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.rcn-ai__new {
	margin: 14px 16px 6px; display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
	padding: 11px 14px !important; border-radius: 12px !important; border: 1px solid var(--line) !important; background: #fff !important;
	color: var(--navy) !important; font-weight: 700 !important; font-size: 14px !important; font-family: inherit !important; cursor: pointer;
	text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; width: auto !important; transition: all .15s ease;
}
.rcn-ai__new:hover { border-color: var(--navy) !important; background: var(--navy) !important; color: #fff !important; }
.rcn-ai__new svg { width: 16px; height: 16px; }
.rcn-ai__side-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 10px 16px; }
.rcn-ai__side-sec { margin-top: 12px; }
.rcn-ai__side-h { font-size: 11px !important; font-weight: 800 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--faint) !important; margin: 6px 10px !important; line-height: 1.3 !important; }
.rcn-ai__side-list { list-style: none; margin: 0; padding: 0; }
.rcn-ai__side-list li { margin: 1px 0; }
.rcn-ai__side-list button, .rcn-ai__side-list a {
	display: flex !important; align-items: center; gap: 9px; width: 100% !important; text-align: left;
	padding: 9px 10px !important; border-radius: 10px !important; border: 0 !important; background: transparent !important;
	color: var(--ink) !important; font-size: 13.5px !important; font-weight: 500 !important; font-family: inherit !important; cursor: pointer;
	text-decoration: none !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; transition: background .12s ease;
}
.rcn-ai__side-list button:hover, .rcn-ai__side-list a:hover { background: #eaeff5 !important; }
.rcn-ai__side-list svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--faint); }
.rcn-ai__side-list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rcn-ai__side-empty { color: var(--faint); font-size: 13px; padding: 10px 12px; line-height: 1.5; }

/* ------------------------------------------------ main column */
.rcn-ai__main { display: flex; flex-direction: column; min-height: 0; background: #fff; }
.rcn-ai__thread { flex: 1; min-height: 0; overflow-y: auto; padding: 26px 26px 8px; display: flex; flex-direction: column; gap: 22px; scroll-behavior: smooth; }
.rcn-ai__thread::-webkit-scrollbar { width: 10px; }
.rcn-ai__thread::-webkit-scrollbar-thumb { background: #dde3ec; border-radius: 8px; border: 3px solid #fff; }

/* welcome (centred while empty, hidden after first message) */
.rcn-ai__welcome { margin: auto; text-align: center; max-width: 540px; padding: 24px 16px; }
.rcn-ai__welcome--hide { display: none; }
.rcn-ai__badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.rcn-ai__title { font-size: clamp(24px, 3.4vw, 36px); font-weight: 800; letter-spacing: -.01em; margin: 16px 0 8px; color: var(--navy); }
.rcn-ai__sub { color: var(--muted); font-size: 15.5px; line-height: 1.55; margin: 0; }

/* messages */
.rcn-ai__msg { animation: rcnAiIn .34s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes rcnAiIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.rcn-ai__you { max-width: 82%; width: fit-content; margin-left: auto; background: var(--navy); color: #fff; padding: 11px 16px; border-radius: 16px 16px 5px 16px; font-size: 15px; font-weight: 600; line-height: 1.45; }
.rcn-ai__botcard { background: var(--soft-2); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; }

/* understood chips */
.rcn-ai__understood { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 12px; font-size: 13px; color: var(--muted); }
.rcn-ai__understood-label { font-weight: 800; color: var(--navy); margin-right: 2px; }
.rcn-ai__fchip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #fdecee; color: #b0111f; border: 1px solid #f7ccd1; }
.rcn-ai__fchip--soft { background: var(--soft); color: #475569; border-color: var(--line); }

/* answer */
.rcn-ai__answer { color: var(--ink); font-size: 15px; line-height: 1.6; }
.rcn-ai__answer p { margin: 0 0 10px; }
.rcn-ai__answer p:last-child { margin-bottom: 0; }
.rcn-ai__answer .rcn-ai-note { color: var(--muted); font-size: 13.5px; border-left: 3px solid var(--red); padding-left: 12px; }
.rcn-ai__answer .rcn-ai-more a { color: var(--red); font-weight: 700; text-decoration: none; }
.rcn-ai__answer .rcn-ai-more a:hover { text-decoration: underline; }

/* listing grid (theme cards) */
.rcn-ai .rcn-listing-grid { margin-top: 16px; grid-template-columns: repeat(3, 1fr); }
.rcn-ai .rcn-listing-card__price small { color: var(--faint); font-weight: 600; font-size: 11px; }
@media (max-width: 1180px) { .rcn-ai .rcn-listing-grid { grid-template-columns: repeat(2, 1fr); } }

/* wiki interlink */
.rcn-ai__wiki {
	display: flex !important; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 16px !important;
	border: 1px solid var(--line) !important; border-left: 4px solid var(--red) !important; border-radius: 12px !important;
	background: #fff !important; color: var(--navy) !important; text-decoration: none !important;
	font-size: 14px !important; font-weight: 600 !important; transition: all .15s ease; box-shadow: none !important;
}
.rcn-ai__wiki:hover { border-color: var(--red) !important; background: var(--soft-2) !important; }
.rcn-ai__wiki svg { color: var(--red); flex-shrink: 0; }
.rcn-ai__wiki span { flex: 1; color: #475569; font-weight: 600; }
.rcn-ai__wiki strong { color: var(--navy); font-weight: 800; }
.rcn-ai__wiki em { color: var(--red); font-style: normal; font-weight: 800; }

/* actions (save / wanted) */
.rcn-ai__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.rcn-ai__act {
	display: inline-flex !important; align-items: center; gap: 7px; padding: 9px 16px !important; border-radius: 11px !important;
	background: var(--navy) !important; color: #fff !important; border: 1px solid var(--navy) !important;
	font-size: 13.5px !important; font-weight: 700 !important; line-height: 1.2 !important; cursor: pointer;
	text-decoration: none !important; text-transform: none !important; letter-spacing: 0 !important;
	box-shadow: none !important; transition: all .15s ease; font-family: inherit !important;
}
.rcn-ai__act:hover { background: var(--navy-2) !important; border-color: var(--navy-2) !important; }
.rcn-ai__act--ghost { background: #fff !important; color: var(--navy) !important; border-color: var(--line) !important; }
.rcn-ai__act--ghost:hover { border-color: var(--red) !important; color: var(--red) !important; background: #fff !important; }
.rcn-ai__act--done { background: #059669 !important; border-color: #059669 !important; cursor: default; }
.rcn-ai__act[disabled] { opacity: .7; cursor: default; }
.rcn-ai__act .rcn-ai__spin { width: 14px; height: 14px; border-width: 2px; margin: 0; }

/* suggestion chips */
.rcn-ai__suggest { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* typing indicator */
.rcn-ai__typing { display: inline-flex; align-items: center; gap: 12px; color: var(--muted); font-size: 14px; font-weight: 600; }
.rcn-ai__dots { display: inline-flex; gap: 5px; }
.rcn-ai__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--red); animation: rcnAiBounce 1.15s infinite ease-in-out; }
.rcn-ai__dots i:nth-child(2) { animation-delay: .16s; }
.rcn-ai__dots i:nth-child(3) { animation-delay: .32s; }
@keyframes rcnAiBounce { 0%, 70%, 100% { transform: translateY(0); opacity: .45; } 35% { transform: translateY(-6px); opacity: 1; } }

/* skeleton cards */
.rcn-ai__skel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 14px; }
@media (max-width: 1180px) { .rcn-ai__skel-grid { grid-template-columns: repeat(2, 1fr); } }
.rcn-ai__skel { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; }
.rcn-ai__skel-b { padding: 12px; }
.rcn-ai__shim { position: relative; overflow: hidden; background: #eef2f7; }
.rcn-ai__skel-img { aspect-ratio: 16/10; }
.rcn-ai__skel-l { height: 11px; border-radius: 6px; margin-bottom: 9px; }
.rcn-ai__skel-l.sm { width: 52%; margin-bottom: 0; }
.rcn-ai__shim::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent); animation: rcnAiShim 1.3s infinite; }
@keyframes rcnAiShim { 100% { transform: translateX(100%); } }

.rcn-ai__error { color: #b0111f; background: #fdecee; border: 1px solid #f7ccd1; border-radius: 12px; padding: 12px 16px; font-size: 14px; }
.rcn-ai__spin { display: inline-block; width: 18px; height: 18px; border: 3px solid var(--line); border-top-color: var(--red); border-radius: 50%; animation: rcnAiSpin .6s linear infinite; vertical-align: -4px; }
@keyframes rcnAiSpin { to { transform: rotate(360deg); } }

/* ------------------------------------------------ dock (chips + composer) */
.rcn-ai__dock { flex: 0 0 auto; padding: 12px 18px 16px; background: #fff; border-top: 1px solid var(--line); }
.rcn-ai__examples { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.rcn-ai__examples--hide { display: none; }
.rcn-ai__chip {
	display: inline-flex !important; align-items: center; padding: 7px 14px !important; border-radius: 999px !important;
	background: #fff !important; color: var(--navy) !important; border: 1px solid var(--line) !important;
	font-size: 13px !important; font-weight: 600 !important; line-height: 1.2 !important; cursor: pointer;
	text-decoration: none !important; text-transform: none !important; letter-spacing: 0 !important;
	transition: all .15s ease; box-shadow: none !important; outline: none !important; transform: none !important; font-family: inherit !important;
}
.rcn-ai__chip:hover { background: var(--navy) !important; color: #fff !important; border-color: var(--navy) !important; }
.rcn-ai__chip:focus, .rcn-ai__chip:active { box-shadow: none !important; outline: none !important; }

.rcn-ai__composer {
	display: flex; align-items: flex-end; gap: 10px; background: #fff; border: 1.5px solid var(--line); border-radius: var(--r);
	padding: 7px 7px 7px 16px; box-shadow: 0 6px 22px rgba(15, 23, 42, .06); transition: border-color .15s ease, box-shadow .15s ease;
}
.rcn-ai__composer:focus-within { border-color: var(--navy); box-shadow: 0 8px 26px rgba(15, 23, 42, .12); }
.rcn-ai .rcn-ai__input {
	flex: 1; border: 0 !important; outline: none !important; box-shadow: none !important; background: transparent;
	resize: none; font-family: inherit; font-size: 16px; line-height: 1.45; color: var(--ink);
	padding: 9px 0; max-height: 132px; overflow-y: auto;
}
.rcn-ai__input::placeholder { color: var(--faint); }
.rcn-ai__send {
	flex-shrink: 0; width: 44px !important; height: 44px !important; min-width: 44px !important; max-width: 44px !important;
	padding: 0 !important; margin: 0 !important; border-radius: 50% !important; border: 0 !important;
	background: var(--red) !important; color: #fff !important; display: inline-flex !important; align-items: center; justify-content: center;
	cursor: pointer; box-shadow: none !important; text-transform: none !important; letter-spacing: 0 !important; line-height: 0 !important;
	transition: transform .12s ease, background .15s ease, opacity .15s ease;
}
.rcn-ai__send:hover { background: var(--red-d) !important; }
.rcn-ai__send:active { transform: scale(.9); }
.rcn-ai__send:disabled { opacity: .4; cursor: default; transform: none; }
.rcn-ai__send svg { width: 20px !important; height: 20px !important; display: block !important; }

/* Mobile: normal page flow + a FIXED composer bar (no viewport-height math or
   100vw breakout — those fight the theme container and break the layout). */
@media (max-width: 880px) {
	body.page-id-12605 { background: #fff; }
	/* edge-to-edge chat + hide the theme footer (it just gets in the way here) */
	body.page-id-12605 .rcn-main > .container { max-width: none; padding-left: 0; padding-right: 0; }
	body.page-id-12605 .rcn-footer { display: none !important; }
	.rcn-ai {
		display: block; width: 100%; max-width: none; margin: 0;
		height: auto !important; min-height: 0; border: 0; border-radius: 0; box-shadow: none; overflow: visible;
	}
	.rcn-ai__side { display: none; }
	.rcn-ai__main { display: block; min-height: 0; }
	/* --rcn-ai-barh = height of the theme's fixed bottom mobile bar (.rcn-header__mobile),
	   measured by ask.js on the device; the composer sits ABOVE it so it isn't hidden. */
	.rcn-ai__thread { overflow: visible; min-height: 42vh; padding: 16px 14px calc(var(--rcn-ai-barh, 60px) + 172px); gap: 18px; scroll-behavior: auto; }
	.rcn-ai__welcome { margin: 26px auto; max-width: none; }
	.rcn-ai__dock {
		position: fixed; left: 0; right: 0; bottom: var(--rcn-ai-barh, 60px); z-index: 60;
		border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(15, 23, 42, .12);
		padding: 10px 12px 12px;
	}
	.rcn-ai__you { max-width: 88%; }
	.rcn-ai .rcn-listing-grid, .rcn-ai__skel-grid { grid-template-columns: 1fr 1fr; }
	.rcn-ai__title { font-size: 25px; }
	.rcn-ai__examples { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -12px 8px; padding: 0 12px 4px; }
	.rcn-ai__examples::-webkit-scrollbar { display: none; }
	.rcn-ai__chip { white-space: nowrap; flex-shrink: 0; }
}
@media (max-width: 520px) {
	.rcn-ai .rcn-listing-grid, .rcn-ai__skel-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.rcn-ai__msg, .rcn-ai__dot, .rcn-ai__dots i, .rcn-ai__shim::after, .rcn-ai__spin { animation: none !important; }
	.rcn-ai__thread { scroll-behavior: auto; }
}