/* Risepoint Faculty Chatbot — minimal POC widget styles. Scoped under .rpc- */

.rpc-toggle {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 99999;
	width: 56px;
	height: 56px;
	box-sizing: border-box;
	border-radius: 50%;
	border: 2px solid var(--wp--preset--color--beige);
	background: #005641;
	color: var(--wp--preset--color--beige);
	font-size: 26px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	transition: transform 0.15s ease;
}
.rpc-toggle:hover { transform: scale(1.05); }
/* Light-green chat glyph shown when the panel is collapsed. Colors are baked
   into the SVG; this only sizes it. Centered by the launcher's flex layout. */
.rpc-toggle-icon {
	width: 46px;
}
/* When the panel is open the launcher becomes a close (✕) control. The flex
   centering on .rpc-toggle keeps the ✕ centered horizontally and vertically. */
.rpc-toggle-open { font-size: 28px; color: #B1C77E; }

.rpc-panel {
	position: fixed;
	right: 20px;
	bottom: 88px;
	z-index: 99999;
	width: 380px;
	max-width: calc(100vw - 40px);
	height: 560px;
	max-height: calc(100vh - 120px);
	background: #fff;
	border: 1px solid #fff;
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
	display: none;
	flex-direction: column;
	overflow: hidden;
	/* Mont (loaded by the theme): 300 = Book, 600 = SemiBold. Verdana fallback
	   rounds 300 -> Regular and 600 -> Bold, matching the brand type spec. */
	font-family: "Mont", Verdana, sans-serif;
	font-weight: 300; /* body / supporting copy = Mont Book / Verdana Regular */
	font-size: 14px;
	color: #222;
	transition: width 0.2s ease, height 0.2s ease;
}
.rpc-panel.rpc-open { display: flex; }
/* Suspend the size transition while actively dragging the resize grabber so
   the panel tracks the pointer 1:1 instead of easing behind it. */
.rpc-panel.rpc-resizing { transition: none; }

/* Top-left drag-to-resize grabber. Rendered as a corner bracket that hugs the
   panel's rounded corner; the full 20px box is the drag target. */
.rpc-resize {
	position: absolute;
	top: 2px; /* sit just inside the panel's 1px white border */
	left: 2px;
	width: 20px;
	height: 20px;
	z-index: 4; /* above the header (3) and the disclaimer gate (2) so the grabber stays visible/usable */
	cursor: nwse-resize;
	border-top: 3px solid rgba(255, 255, 255, 0.7);
	border-left: 3px solid rgba(255, 255, 255, 0.7);
	border-top-left-radius: 9px; /* ~panel radius (12px) minus the 2px inset, so it hugs the corner */
	touch-action: none; /* let pointer drags resize instead of scrolling on touch */
}
.rpc-resize:hover { border-color: #fff; }

.rpc-header {
	background: #005641;
	color: #B1C77E;
	position: relative; /* keep the header (Close/Clear) above the disclaimer gate overlay */
	z-index: 3;
	padding: 14px 16px 14px 24px; /* extra left padding clears the resize grabber */
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: 600;
}
.rpc-header-actions {
	display: flex;
	align-items: center;
	gap: 4px;
}
.rpc-close, .rpc-reset {
	background: none;
	border: none;
	color: #B1C77E;
	line-height: 1;
	cursor: pointer;
	padding: 6px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* Shared icon size so the close (✕) and reset (↻) buttons match each other. */
.rpc-icon {
	width: 16px;
	height: 16px;
	fill: currentColor;
	display: block;
}
.rpc-close:hover, .rpc-reset:hover { background: rgba(255, 255, 255, 0.1); }

.rpc-messages {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
	background: #F2EAE1;
	border: 1px solid #F2EAE1;
}
.rpc-msg { margin-bottom: 14px; line-height: 1.5; }
.rpc-msg-user .rpc-bubble {
	background: #005641;
	color: #fff;
	margin-left: 40px;
	border-radius: 14px 14px 4px 14px;
}
.rpc-msg-assistant .rpc-bubble {
	background: #fff;
	color: #005641;
	margin-right: 40px;
	border-radius: 14px 14px 14px 4px;
	border: 1px solid #e2e6ec;
}
.rpc-bubble {
	padding: 10px 14px;
	white-space: pre-wrap;
	word-wrap: break-word;
}
/* Inline auto-linked email / Risepoint.com links in assistant replies. */
.rpc-link, .rpc-link:hover, .rpc-link:visited {
	color: #005641;
	text-decoration: underline;
}
.rpc-msg-error .rpc-bubble {
	background: #fdecec;
	color: #a33;
	border: 1px solid #f5c6c6;
	border-radius: 8px;
	margin-right: 40px;
}

.rpc-citations {
	margin: 6px 40px 0 0;
	font-size: 12px;
	color: #555;
}
.rpc-citations a {
	display: inline-block;
	background: #E3D5CD;
	color: #005641;
	padding: 3px 8px;
	border-radius: 10px;
	margin: 2px 4px 2px 0;
	text-decoration: none;
}
.rpc-citations a:hover { background: #d4c2b6; }
.rpc-citation-index {
	display: inline-block;
	background: #005641;
	color: #fff;
	font-weight: 600;
	font-size: 11px;
	line-height: 1;
	padding: 2px 5px;
	border-radius: 8px;
	margin-right: 6px;
}
.rpc-citations a.rpc-cite-highlight {
	animation: rpc-cite-flash 1.2s ease-out;
}
@keyframes rpc-cite-flash {
	0%   { background: #B1C77E; }
	100% { background: #E3D5CD; }
}

.rpc-cite-marker {
	font-size: 0.75em;
	margin: 0 1px;
}
.rpc-cite-marker a {
	color: #005641;
	font-weight: 600;
	text-decoration: none;
	padding: 0 3px;
	border-radius: 4px;
	background: #E3D5CD;
}
.rpc-cite-marker a:hover { background: #d4c2b6; }

/* Hovering an inline [N] marker or its matching citation chip below
   highlights both — see wireCiteHover() in chatbot.js. */
.rpc-cite-marker a.rpc-cite-hover,
.rpc-citations a.rpc-cite-hover {
	background: #B1C77E;
}

/* Thumbs up/down footer row inside an assistant bubble, set off by a
   divider from the answer text above it. */
.rpc-feedback {
	margin-top: 10px;
	padding-top: 8px;
	border-top: 1px solid #e2e6ec;
	display: flex;
	gap: 4px;
}
.rpc-feedback-btn {
	background: none;
	border: none;
	border-radius: 6px;
	padding: 4px 6px;
	cursor: pointer;
	color: #005641;
	opacity: 0.35;
	display: flex;
	align-items: center;
}
.rpc-feedback-btn:not(.rpc-feedback-active):hover { opacity: 0.65; background: #F2EAE1; }
.rpc-feedback-btn.rpc-feedback-active { opacity: 1; background: #E3D5CD; }

/* "Typing" indicator shown in the assistant bubble during the pre-flight gap
   before the first streamed token; replaced by text on the first delta. */
.rpc-dots {
	display: inline-flex;
	gap: 4px;
	align-items: center;
}
.rpc-dots span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #6f9aa6;
	animation: rpc-bounce 1.2s infinite ease-in-out;
}
.rpc-dots span:nth-child(2) { animation-delay: 0.15s; }
.rpc-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes rpc-bounce {
	0%, 60%, 100% { transform: translateY(0);    opacity: 0.45; }
	30%           { transform: translateY(-5px); opacity: 1; }
}

.rpc-input-row {
	display: flex;
	padding: 12px;
	background: #fff;
}
.rpc-input {
	flex: 1;
	box-sizing: border-box;
	border: 1px solid #d0d6df;
	border-radius: 12px;
	padding: 11px 14px;
	min-height: 44px;          /* one line at rest */
	max-height: 120px;         /* ~5 lines, then it scrolls (keep in sync with INPUT_MAX_H in JS) */
	font: inherit;
	color: #005641; /* typed text */
	line-height: 1.3;
	resize: none;
	outline: none;
	overflow-y: auto;
	scrollbar-width: none;     /* Firefox: hide scrollbar */
	-ms-overflow-style: none;  /* legacy Edge/IE: hide scrollbar */
}
.rpc-input::-webkit-scrollbar { display: none; } /* WebKit/Blink: hide scrollbar */
.rpc-input:focus { border-color: #005641; }
.rpc-send {
	margin-left: 8px;
	align-self: flex-end;  /* stay a fixed pill at the bottom as the input grows */
	height: 44px;          /* matches the input's one-line min-height */
	background: #005641;
	color: #B1C77E;
	border: none;
	border-radius: 12px;
	padding: 0 16px;
	cursor: pointer;
	font-weight: 600;
}
/* Same translucent-white lift as the header's close/reset buttons (rgba white
   0.15 over #005641), layered as an inset shadow since the pill has a solid fill. */
.rpc-send:not(:disabled):hover { box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.1); }
.rpc-send:disabled { background: #6f9aa6; cursor: not-allowed; }

/* AI disclaimer under the composer. Quiet, non-interactive helper text. */
.rpc-disclaimer {
	padding: 0 12px 10px;
	background: #fff;
	font-size: 10px;
	font-style: italic;
	color: #5f636c; /* AA 4.5:1 — ~5.0:1 on the cream (#F2EAE1), ~6.0:1 on white */
	text-align: left;
	line-height: 1.3;
}

/* First-run disclaimer gate. Overlays the panel body (the header sits above it
   via z-index, so Close/Clear stay reachable); the composer is also disabled in
   JS while it shows. Acceptance is remembered in sessionStorage, so it reappears
   only when the tab/session is closed and reopened. */
.rpc-gate {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 14px;
	box-sizing: border-box;
	background: rgba(0, 86, 65, 0.12); /* faint brand-green veil to signal a blocked state */
}
.rpc-gate.rpc-gate-visible { display: flex; }
.rpc-gate-card {
	width: 100%;
	max-width: 320px;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}
.rpc-gate-head {
	background: #6b2149;
	color: #ec84b8;
	font-weight: 600;
	text-align: center;
	padding: 12px 16px;
	font-size: 16px;
}
.rpc-gate-body {
	background: #f5ece2;
	padding: 16px;
}
.rpc-gate-body p {
	margin: 0 0 14px;
	color: #5c2340;
	font-size: 13px;
	line-height: 1.45;
}
.rpc-gate-accept {
	display: block;
	width: 100%;
	background: #5c1f3d;
	color: #ec84b8;
	border: none;
	border-radius: 8px;
	padding: 12px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}
.rpc-gate-accept:hover { box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.08); }