/**
 * Gorilla Chat — Harvest Lite companion styles.
 *
 * Scoped under the core widget's BEM namespace and inheriting its
 * --gorilla-primary custom property so the companion UI matches the widget.
 *
 * @package Gorilla_Chat_Harvest_Lite
 * @since   1.0.0
 * Last Audited: Aug 3 2026 2:53pm
 */

.gorilla-chat__hl-keyform {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 8px 0;
	padding: 12px;
	border: 1px solid rgba( 0, 0, 0, 0.08 );
	border-radius: 8px;
	background: rgba( 0, 0, 0, 0.02 );
}

.gorilla-chat__hl-intro {
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.4;
}

.gorilla-chat__hl-keyinput {
	width: 100%;
	padding: 8px 10px;
	font-size: 0.9rem;
	border: 1px solid rgba( 0, 0, 0, 0.15 );
	border-radius: 6px;
	box-sizing: border-box;
}

.gorilla-chat__hl-keyinput:focus {
	outline: 2px solid var( --gorilla-primary, #DE3163 );
	outline-offset: 1px;
}

.gorilla-chat__hl-connect {
	align-self: flex-start;
	padding: 8px 16px;
	font-size: 0.85rem;
	font-weight: 600;
	color: #fff;
	background: var( --gorilla-primary, #DE3163 );
	border: 0;
	border-radius: 6px;
	cursor: pointer;
}

.gorilla-chat__hl-connect:hover {
	filter: brightness( 0.95 );
}

.gorilla-chat__hl-connectrow {
	margin: 8px 0;
}

.gorilla-chat__hl-connectbtn {
	cursor: pointer;
	font-weight: 600;
}

.gorilla-chat__hl-panel {
	margin: 8px 0;
}

.gorilla-chat__hl-panel-title {
	margin-bottom: 6px;
	font-size: 0.85rem;
	font-weight: 600;
}

.gorilla-chat__hl-notice {
	margin: 8px 0;
	font-size: 0.85rem;
	font-style: italic;
	opacity: 0.85;
}

.gorilla-chat__hl-disconnect {
	margin-top: 8px;
	padding: 0;
	font-size: 0.75rem;
	color: var( --gorilla-primary, #DE3163 );
	background: none;
	border: 0;
	text-decoration: underline;
	cursor: pointer;
}

.gorilla-chat__hl-reports {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 8px 0;
}

.gorilla-chat__hl-report {
	cursor: pointer;
}

.gorilla-chat__hl-result {
	margin: 8px 0;
	overflow-x: auto;
	/* The core message log is a height-constrained flex column. Because
	   `overflow-x: auto` makes this wrapper a scroll container, its automatic
	   flex min-size resolves to 0 (CSS flexbox rule) — so the flex container
	   shrinks it to zero height and the table/list inside gets clipped to
	   nothing. `flex-shrink: 0` keeps it at its content height so results stay
	   visible; horizontal scroll for wide tables is preserved. */
	flex-shrink: 0;
}

/* "Fetching your data" indicator — a muted, boxless line (no bubble/card) with
   three animated dots, so a request in flight reads like a light typing hint. */
.gorilla-chat__hl-loading {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 8px 2px;
	font-size: 0.8rem;
	font-style: italic;
	color: #8b8f9c;
	background: none;
	border: 0;
}

.gorilla-chat__hl-dots {
	display: inline-flex;
	gap: 3px;
}

.gorilla-chat__hl-dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.35;
	animation: gorilla-chat__hl-dot-pulse 1.2s infinite ease-in-out;
}

.gorilla-chat__hl-dot:nth-child( 2 ) {
	animation-delay: 0.2s;
}

.gorilla-chat__hl-dot:nth-child( 3 ) {
	animation-delay: 0.4s;
}

@keyframes gorilla-chat__hl-dot-pulse {
	0%, 70%, 100% {
		opacity: 0.35;
		transform: translateY( 0 );
	}
	35% {
		opacity: 1;
		transform: translateY( -2px );
	}
}

/* Respect reduced-motion: keep the dots visible but stop the animation. */
@media ( prefers-reduced-motion: reduce ) {
	.gorilla-chat__hl-dot {
		animation: none;
		opacity: 0.7;
	}
}

/* The "type menu" hint under a result — a muted, boxless line (no bubble, no
   border, no background) in a medium grey so it guides without intruding. */
.gorilla-chat__hl-hint {
	margin: 6px 2px;
	font-size: 0.78rem;
	line-height: 1.35;
	color: #8b8f9c;
	background: none;
	border: 0;
}

/* Only the keyword (MENU) is accented, in the widget's primary colour. */
.gorilla-chat__hl-hint-key {
	color: var( --gorilla-primary, #DE3163 );
	font-weight: 600;
}

/* Stacked-list view — used for reports too wide for a table in the narrow chat
   column (recent_events, top_pages, …). Each record is a small card of
   "label / value" rows, which stays legible at ~360px. Inherits the core
   widget's themed body text and border tokens so it reads on the dark theme
   (and adapts if the widget is ever themed light). */
.gorilla-chat__hl-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.gorilla-chat__hl-record {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 8px 10px;
	font-size: 0.8rem;
	color: var( --gorilla-text-body, #c0b8d4 );
	border: 1px solid var( --gorilla-border, rgba( 176, 160, 212, 0.15 ) );
	border-radius: 8px;
}

.gorilla-chat__hl-field {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	line-height: 1.35;
}

.gorilla-chat__hl-field-label {
	flex: 0 0 auto;
	font-weight: 600;
	opacity: 0.7;
}

.gorilla-chat__hl-field-value {
	flex: 1 1 auto;
	min-width: 0;
	text-align: right;
	overflow-wrap: anywhere;
}

.gorilla-chat__hl-field-value.gorilla-chat__hl-num {
	font-variant-numeric: tabular-nums;
}

.gorilla-chat__hl-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.8rem;
	/* Inherit the core widget's themed body text so the table is readable on the
	   dark widget instead of dark-on-dark. Falls back to a light colour; adapts
	   automatically if the widget is ever themed light. */
	color: var( --gorilla-text-body, #c0b8d4 );
}

.gorilla-chat__hl-table th,
.gorilla-chat__hl-table td {
	padding: 5px 8px;
	text-align: left;
	/* Light-alpha rule that reads on the dark theme (the core's own border token),
	   not the old black low-opacity line that vanished on dark navy. */
	border-bottom: 1px solid var( --gorilla-border, rgba( 176, 160, 212, 0.15 ) );
	white-space: nowrap;
}

.gorilla-chat__hl-table td {
	max-width: 220px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gorilla-chat__hl-note {
	margin: 6px 0 0;
	font-size: 0.75rem;
	opacity: 0.7;
}

.gorilla-chat__hl-report:disabled {
	opacity: 0.5;
	cursor: default;
}

.gorilla-chat__hl-table th {
	font-weight: 600;
	border-bottom: 2px solid var( --gorilla-primary, #DE3163 );
}

.gorilla-chat__hl-table th.gorilla-chat__hl-num,
.gorilla-chat__hl-table td.gorilla-chat__hl-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* Top-page stat cards — the standalone "top page by views" headlines (6 months
   / 7 days / 24 hours) shown above the Top pages table. A responsive row of
   small cards that wraps at the narrow chat width; inherits the core widget's
   themed body text + border tokens like the stacked-list view. */
.gorilla-chat__hl-stats {
	margin: 8px 0;
}

.gorilla-chat__hl-stats-heading {
	margin-bottom: 6px;
	font-size: 0.85rem;
	font-weight: 600;
}

.gorilla-chat__hl-stats-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.gorilla-chat__hl-stat {
	flex: 1 1 96px;
	min-width: 96px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px 10px;
	color: var( --gorilla-text-body, #c0b8d4 );
	border: 1px solid var( --gorilla-border, rgba( 176, 160, 212, 0.15 ) );
	border-radius: 8px;
}

.gorilla-chat__hl-stat-label {
	font-size: 0.68rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	opacity: 0.7;
}

.gorilla-chat__hl-stat-value {
	font-size: 1.15rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var( --gorilla-primary, #DE3163 );
}

.gorilla-chat__hl-stat-page {
	font-size: 0.72rem;
	line-height: 1.3;
	opacity: 0.85;
	overflow-wrap: anywhere;
}

.gorilla-chat__hl-stat-empty {
	font-style: italic;
	opacity: 0.6;
}