// Fix: Unable to move emote/user cards out of chat
.channel-root__right-column > div.tw-overflow-hidden {
	overflow: unset !important;
}

.chat-line__message--emote {
	vertical-align: middle;
	margin: -.5rem 0;
}

.modified-emote {
	margin: -.5rem 0;

	& > .chat-line__message--emote {
		margin: 0;
	}
}

.scaled-modified-emote {
	display: inline-block;
	vertical-align: middle;

	& > .chat-line__message--emote {
		position: absolute;
		top: 0;
		left: 0;
	}
}

.chat-author__display-name,
.chat-author__intl-login {
	cursor: pointer;
}

.ffz--pointer-events {
	pointer-events: all;
}

.ffz--pointer-events--none {
	pointer-events: none;
}

.ffz--freeze-indicator {
	pointer-events: none;
}

.chat-list__lines .simplebar-scrollbar {
	will-change: opacity;
}

.user-notice-line.tw-mg-y-05 {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.chat-settings__content div[data-test-selector="high-contrast-selector"] {
	display: none;
}

.chat-line__message-highlight {
	pointer-events: none;
}

.chat-line__timestamp {
	font-variant-numeric: tabular-nums;
}

.ffz-notice-line {
	&:focus-within,
	&:hover,
	&:focus {
		.chat-line__message-highlight {
			background-color: var(--color-background-interactable-alpha-hover);
		}

		.chat-line__reply-icon {
			display: block;
		}
	}
}


.autocomplete-balloon {
	.autocomplete-balloon__item {
		> .tw-flex {
			> div {
				display: flex;
				flex-shrink: 0;
			}
		}

		span {
			overflow-x: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
}

.ffz-action-balloon {
	z-index: 10000 !important;
}

.ffz-tooltip.chat-card__link > * {
	pointer-events: none;
}

.chat-line__reply-icon {
	right: 0.5rem !important;
	top: -1rem !important;
}

.ffz--reply-mention {
	padding: 0.25rem 0.5rem;
	border-radius: 1rem;
	white-space: nowrap;

	&:before {
		font-size: 1.2em;
		vertical-align: middle;
		color: var(--color-text-base);
	}

	background-color: rgba(0,0,0,0.15);

	.tw-root--theme-dark & {
		background-color: rgba(255,255,255,0.15);
	}

	&:hover, &:focus {
		text-decoration: none;
		background-color: var(--color-background-button-hover);
		color: var(--color-text-button-hover) !important;
	}
}

.ffz--chat-card {
	.vod-message & {
		.ffz--card-text {
			max-width: 18rem;
		}
	}

	.ffz-accent-card {
		border-right: .5rem solid var(--ffz-color-accent);
	}

	.chat-card__title {
		max-width: unset;
	}

	.ffz--two-line {
		.tw-ellipsis { line-height: 1.4rem }
		.chat-card__title { line-height: 1.5rem }
	}
}

.ffz-emoji {
	width: 1.8rem; height: 1.8rem;
	width: calc(var(--ffz-chat-font-size) * 1.5);
	height: calc(var(--ffz-chat-font-size) * 1.5);

	&.preview-image {
		width: 7.2rem;
		height: 7.2rem;
	}

	&.emote-autocomplete-provider__image {
		width: 1.8rem;
		height: 1.8rem;
		margin: .5rem;
	}
}


.ffz-mod-icon {
	text-align: center;
	display: inline-flex;
	font-size: 1.6rem;
	font-size: var(--ffz-chat-actions-size);

	&, &.mod-icon {
		height: unset;
	}

	&.disabled {
		cursor: not-allowed;
		opacity: 0.5;
	}

	& + .ffz-mod-icon {
		margin-left: 1px;
	}

	span, img, figure {
		pointer-events: none;
	}

	span, img,
	figure:before {
		margin: 0 0.05rem !important
	}

	span:before {
		margin: 0 0.2rem 0 0 !important;
	}

	span:empty:before {
		margin: 0 !important;
	}

	span {
		display: inline-block;
		min-width: 1.6rem;
		min-width: var(--ffz-chat-actions-size);
		font-weight: bold;
	}

	.mod-icon__image img {
		max-height: 1.6rem;
		max-height: var(--ffz-chat-actions-size);
	}

	&.colored,
	.mod-icon__image img {
		opacity: 0.75;
	}

	.ffz--action &,
	.ffz-interactable:hover &:not(.disabled),
	&:not(.disabled):hover {
		.tw-root--theme-dark &, & {
			&.tw-c-text-alt-2 {
				color: inherit !important;
			}
		}

		&.colored,
		.mod-icon__image img {
			opacity: 1;
		}
	}
}

.ffz--giftee-name {
	cursor: pointer;
	outline: none;

	&:hover {
		text-decoration: underline;
	}
}

.chat-line__username:hover,
.chatter-name:hover {
	text-decoration: underline;
}

.ffz--points-highlight {
	background-color: var(--ffz-channel-color-20);
}

.ffz-notice-line {
	border-left: 4px solid var(--ffz-channel-color) !important;
}

.ffz--points-line {
	.ffz--points-reward,
	.ffz--points-cost {
		font-weight: 600;
	}

	.ffz--points-reward {
		word-wrap: break-word;
	}
}

.ffz--points-icon {
	&:before {
		content: '\e83c';
		font-family: 'ffz-fontello';
		font-size: 1.6rem;
		font-weight: normal;
		font-variant: normal;
		margin: 0 0.5rem;
	}

	&:after {
		content: '';
		height: 2rem;
		width: 2rem;
		background-size: cover;
	}
}

.ffz-emote-picker--nav-icon {
	font-size: 2rem;
	line-height: 1em;

	position: relative;
	height: 2rem;

	&:before {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);

		width: unset !important;
		font-size: unset !important;
		margin: 0 !important;
	}
}

.ffz--emote-picker {
	white-space: normal;

	section:not(.filtered) heading {
		cursor: pointer;
	}

	.ffz--menu-badge {
		width: 1.8rem; height: 1.8rem;
	}

	.ffz--expiry-info {
		opacity: 0.5;
	}

	.emote-picker__placeholder {
		display: inline-block;
		margin: .5rem .5rem 0;
		min-width: 2.8rem;
	}

	/*.emote-picker__tab {
		border-top: 1px solid transparent;

		&.emote-picker__tab--active,
		&:hover {
			border-top-color: #6441a4;
		}
	}*/

	&:not(.ffz--emote-picker__tall) {
		.emote-picker__nav-content-overflow {
			height: 30.5rem !important;
		}

		.emote-picker__nav-content-overflow-whisper {
			height: 18rem !important;
		}
	}

	.emote-picker__tab-content {
		height: unset !important;
		max-height: 30.5rem;
	}

	&.ffz--emote-picker__tall {
		.whispers-thread .emote-picker-and-button & .emote-picker__tab-content {
			max-height: 30rem;
		}

		.emote-picker__nav-content-overflow,
		.emote-picker__tab-content {
			height: unset !important;
			max-height: 50rem;
		}

		.whispers-thread {
			overflow: visible !important;
		}

		@media only screen and (max-height: 750px) {
			.emote-picker__nav-content-overflow {
				height: 100% !important;
			}

			.emote-picker__nav-content-overflow,
			.emote-picker__tab-content {
				#root & {
					max-height: calc(100vh - 31rem);
				}

				max-height: calc(100vh - 26rem);
			}
		}
	}

	.emote-picker-tab-item button > *,
	.emote-picker__emote-link > * {
		pointer-events: none;
	}

	.emote-picker__emote-image {
		max-height: 3.2rem
	}

	section:last-of-type {
		& > div:last-child,
		& > heading:last-child {
			border-bottom: none !important;
		}
	}

	.ffz--emoji-tone-picker {
		.ffz-balloon {
			min-width: unset;
		}

		.tw-button__text {
			padding: .2rem .4rem;
			padding-right: .8rem;
		}
	}

	.ffz--emoji-tone-picker__emoji {
		width: 2rem;
		height: 2rem;
	}

	.emote-picker__emote-link {
		position: relative;
		padding: 0.5rem;
		width: unset;
		height: unset;
		min-width: 3.8rem;

		img {
			vertical-align: middle;
		}

		&.emote-picker__emoji {
			min-width: unset;

			.emote-picker__emote-figure {
				width: 2rem;
				height: 2rem;
			}
		}

		&.locked,
		&.emote-hidden {
			img {
				opacity: 0.5;
			}

			[class^="ffz-i-"] {
				position: absolute;
				bottom: 0; right: 0;
				border-radius: .2rem;
				font-size: 1rem;
				background-color: rgba(0,0,0,0.5);
				color: #fff;
			}
		}

		&.locked {
			cursor: not-allowed;
		}
	}

	&:not(.reduced-padding) {
		.ffz--menu-badge__large {
			width: 2.8rem;
			height: 2.8rem;

			margin: -.5rem .5rem -.5rem -.5rem;
		}
	}

	&.reduced-padding {
		.emote-picker-tab-item button > div {
			padding: 0.25rem 0.5rem !important;
			font-size: 1.6rem !important;
		}

		.tw-pd-1 {
			padding: 0.5rem !important;
		}
	}
}

.ffz--hover-actions {
	position: absolute;
	right: 0.5rem;
	top: -1rem;
	display: none;

	--ffz-chat-actions-size: var(--ffz-chat-actions-hover-size);
	--ffz-chat-actions-padding: var(--ffz-chat-actions-hover-padding);

	.ffz-notice-line:hover &,
	.chat-line__message:hover & {
		display: block;
	}
}


.ffz-hover-action {
	display: inline-block;
	margin-left: 0.5rem;
	margin-bottom: 0.5rem;

	box-shadow: var(--shadow-elevation-1);
	background-color: var(--color-background-base);
	border-radius: var(--border-radius-medium);

	figure {
		line-height: 1em;
	}

	&.ffz-has-modifier {
		display: none;
	}

	& > .ffz-mod-icon {
		padding: var(--ffz-chat-actions-padding);

		background-color: var(--color-background-button-text-default);
		color: var(--color-fill-button-icon);

		&:hover {
			background-color: var(--color-background-button-text-hover);
			color: var(--color-fill-button-icon-hover);
		}
	}
}
