/* Rankings tab: recorded rank blocks with their results. The scroll
   container (.div-chat-rankings-scroll) is a plain scroll-fill host. */

.p-rankings-empty {
	opacity: 0.6;
	padding: var(--DM-margin);
}

.div-rankings-block {
	border: 1px solid var(--BD-panel-l);
	border-radius: var(--DM-margin-q);
	padding: var(--DM-margin-h);
	margin: 0 var(--DM-margin-q) var(--DM-margin-h) var(--DM-margin-q);
	background-color: var(--BG-panel);
	min-width: 0;
}

.div-rankings-block-header {
	display: flex;
	align-items: baseline;
	gap: var(--DM-margin-h);
	border-bottom: 1px solid var(--BD-divider);
	padding-bottom: var(--DM-margin-q);
	margin-bottom: var(--DM-margin-h);
}

.div-rankings-prompt {
	flex: 1;
	min-width: 0;
	font-weight: bold;
	overflow-wrap: anywhere;
}

.span-rankings-timestamp {
	flex: 0 0 auto;
	font-size: 0.8em;
	opacity: 0.6;
	white-space: nowrap;
}

.div-rankings-revisit,
.div-rankings-delete {
	flex: 0 0 auto;
	cursor: pointer;
	padding: 2px var(--DM-margin-q);
	min-width: unset;
	white-space: nowrap;
}

.div-rankings-delete:hover {
	color: var(--TX-status-error);
}

.div-rankings-item {
	display: flex;
	align-items: flex-start;
	gap: var(--DM-margin-q);
	padding: var(--DM-margin-q);
	border: 1px solid var(--BD-panel-l);
	border-radius: var(--DM-margin-q);
	margin-bottom: var(--DM-margin-q);
	min-width: 0;
}

.span-rankings-index {
	flex: 0 0 1.6em;
	text-align: right;
	font-weight: bold;
	color: var(--AC-trim-dd);
}

.div-rankings-item-body {
	flex: 1;
	min-width: 0;
}

.div-rankings-item-text {
	white-space: pre-line;
	overflow-wrap: anywhere;
}

.div-rankings-item-reason {
	font-size: 0.85em;
	font-style: italic;
	opacity: 0.7;
	margin-top: var(--DM-margin-s);
	overflow-wrap: anywhere;
}

.span-rankings-score {
	flex: 0 0 auto;
	font-size: 0.8em;
	font-weight: bold;
	color: var(--FG-base);
	background-color: var(--BG-panel2);
	border: 1px solid var(--BD-panel-l);
	border-radius: 1em;
	padding: var(--DM-margin-s) var(--DM-margin-q);
	min-width: 2.2em;
	text-align: center;
}

.div-rankings-section-label,
.div-rankings-additional .div-rankings-section-label {
	font-weight: bold;
	font-size: 0.85em;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--FG-muted);
	margin: var(--DM-margin-h) 0 var(--DM-margin-q) 0;
}

.div-rankings-additional-item {
	display: flex;
	align-items: center;
	gap: var(--DM-margin-q);
	border: 1px dashed var(--BD-panel-l);
	border-radius: var(--DM-margin-q);
	padding: var(--DM-margin-q);
	margin-bottom: var(--DM-margin-q);
	overflow-wrap: anywhere;
}

button.div-rankings-add,
button.div-rankings-revisit,
button.div-rankings-delete {
	height: auto;
	min-width: unset;
	flex: 0 0 auto;
	cursor: pointer;
	font-size: 0.85em;
	line-height: 1.2;
	white-space: nowrap;
}

/* little square add button at the end of the choice text */
button.div-rankings-add {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.6em;
	height: 1.6em;
	padding: 0;
	margin-left: auto;
	opacity: 0.7;
}

button.div-rankings-add:hover {
	opacity: 1;
}

.div-rankings-add:hover {
	opacity: 1;
}

.div-rankings-add:disabled {
	opacity: 0.4;
	cursor: default;
	box-shadow: none;
	filter: none;
}

.div-rankings-reply {
	border: 1pt solid var(--BD-panel-l);
	border-radius: var(--DM-margin-q);
	padding: var(--DM-margin-q);
	margin-top: var(--DM-margin-h);
	overflow-wrap: anywhere;
}

.div-rankings-queries {
	margin-top: var(--DM-margin-h);
}