/* ── Channel Textarea — matches Fluxer's dense 3-column grid ────────── */

/* Variables */
:root {
	--textarea-button-height: var(--user-area-content-height);
	--textarea-button-icon-size: 26px;
	--textarea-min-height: var(--input-container-min-height);
	--textarea-horizontal-padding: var(--chat-horizontal-padding, var(--spacing-4));
	--textarea-content-offset: calc((var(--user-area-content-height) - var(--textarea-line-height)) / 2);
	--textarea-upload-gap: var(--message-gutter, 16px);
	--textarea-side-button-padding: max(0px, calc((var(--message-avatar-size, 40px) - var(--textarea-button-height)) / 2));
}

/* Outer container — sits inside ChannelChatLayout inputArea */
.outer {
	outline: none;
	padding-left: var(--textarea-horizontal-padding);
	padding-right: var(--textarea-horizontal-padding);
	box-sizing: border-box;
	box-shadow: inset 0 1px 0 var(--user-area-divider-color);
	position: relative;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	contain: inline-size;
	overflow: hidden;
}

/* Reply / Edit bars — stacked above textarea */
.replyBar,
.editBar {
	display: grid;
	align-items: center;
	grid-template-columns: minmax(0, 1fr) auto;
	padding-left: 16px;
	padding-right: 16px;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	min-height: 40px;
	border-bottom: 1px solid var(--user-area-divider-color);
}

.replyText {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.875rem;
	color: var(--text-primary);
}

.replyText strong {
	font-weight: 600;
}

.editLabel {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.875rem;
	color: var(--text-primary);
}

.replyClose,
.editCancel {
	cursor: pointer;
	flex-shrink: 0;
	border: none;
	background-color: transparent;
	padding: 8px 0 8px 16px;
	color: var(--text-primary-muted);
	line-height: 0;
	transition: color 200ms;
}

.replyClose:hover,
.editCancel:hover {
	color: var(--text-primary);
}

.editCancel {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	line-height: 1;
	color: var(--text-link);
}

.editCancel:hover {
	text-decoration: underline;
	color: var(--text-link);
}

/* 3-column dense grid: [plus button] [textarea] [action buttons] */
.mainWrapper {
	display: grid;
	grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
	align-items: flex-start;
	position: relative;
	min-height: var(--textarea-min-height);
	box-sizing: border-box;
	padding: var(--user-area-padding-y, 18px) 0;
	column-gap: var(--textarea-upload-gap);
	min-width: 0;
	width: 100%;
	max-width: 100%;
}

/* Top divider — drawn via a ::before so it can bleed beyond the
   mainWrapper's own box and span the full width of .outer,
   including the horizontal padding area. An `inset` box-shadow
   on mainWrapper itself would stop at the padding edge and
   leave gaps on both sides when a PendingAttachmentRow or a
   reply/edit bar sits above it.
   `.outer`'s own `overflow: hidden` clips the pseudo to the
   outer's edge, so nothing leaks past. */
.mainWrapper::before {
	content: "";
	position: absolute;
	top: 0;
	left: calc(var(--textarea-horizontal-padding) * -1);
	right: calc(var(--textarea-horizontal-padding) * -1);
	height: 1px;
	background-color: var(--user-area-divider-color);
	pointer-events: none;
}

/* Left column: upload / plus button */
.uploadColumn {
	grid-column: 1;
	display: flex;
	align-items: flex-start;
	min-height: var(--user-area-content-height);
	padding-top: var(--textarea-side-button-padding);
}

/* Center column: textarea content */
.contentArea {
	grid-column: 2;
	display: flex;
	flex-direction: column;
	min-height: var(--user-area-content-height);
	min-width: 0;
	padding-top: var(--textarea-content-offset);
	position: relative;
}

/* Right column: buttons (emoji, gif, send) */
.buttonContainer {
	grid-column: 3;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-height: var(--user-area-content-height);
	min-width: 0;
	flex-shrink: 1;
}

/* The textarea itself */
.textarea {
	display: block;
	width: 100%;
	min-height: var(--textarea-line-height);
	max-height: 300px;
	overflow-y: auto;
	white-space: pre-wrap;
	word-break: break-word;
	background-color: transparent;
	color: var(--text-chat, var(--text-primary));
	line-height: var(--textarea-line-height);
	caret-color: var(--text-chat, var(--text-primary));
	padding: 0;
	margin: 0;
	border: none;
	outline: none;
	font-family: inherit;
	font-size: inherit;
	max-height: 50svh;
	box-sizing: border-box;
}

.textarea:focus,
.textarea:focus-visible {
	outline: none;
	box-shadow: none;
}

.placeholder {
	position: absolute;
	top: var(--textarea-content-offset);
	left: 0;
	right: 0;
	color: var(--text-primary-muted);
	pointer-events: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: var(--textarea-line-height);
}

/* Mention pill rendered inside the contenteditable — matches the
   received-message mention style so sending looks the same as reading.
   contentEditable=false on the element itself so it's atomic. */
.mentionPill {
	display: inline;
	padding: 0 2px;
	border-radius: var(--radius-sm, 4px);
	background-color: rgba(88, 101, 242, 0.3);
	color: var(--brand-primary, #5865f2);
	font-weight: 500;
	cursor: default;
	user-select: all;
}

/* Textarea buttons (icons for plus, emoji, gif, send) */
.textareaButton {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	min-width: var(--textarea-button-height);
	height: var(--textarea-button-height);
	padding: 0;
	color: var(--text-primary-muted);
	transition: color var(--transition-normal);
	cursor: pointer;
	background: transparent;
	border: none;
	outline: none;
	flex-shrink: 0;
}

.textareaButton:hover:not(:disabled) {
	color: var(--text-primary);
}

.textareaButton:disabled {
	cursor: not-allowed;
	opacity: 0.7;
}

.textareaButtonIcon {
	width: var(--textarea-button-icon-size);
	height: var(--textarea-button-icon-size);
	flex-shrink: 0;
}

/* Send button — brand color when active */
.sendActive {
	color: var(--brand-primary);
}

.sendActive:hover {
	color: var(--brand-secondary, var(--brand-primary));
}

.emojiPickerPopout {
	position: absolute;
	bottom: 100%;
	right: 8px;
	margin-bottom: 8px;
	z-index: var(--z-index-popout, 100);
}

/* Mobile send button — hidden on desktop. On mobile it sits outside
   the input pill to the right as a round brand-primary button that
   commits the message. Desktop still uses Enter-to-send. */
.sendColumn {
	display: none;
}

.sendButton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	min-width: 36px;
	border-radius: 50%;
	background-color: var(--brand-primary, #5865f2);
	color: #ffffff;
	border: none;
	padding: 0;
	cursor: pointer;
	transition: filter 0.15s ease, opacity 0.15s ease;
}

.sendButton:hover:not(:disabled) {
	filter: brightness(1.1);
}

.sendButton:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Body wrapper inside the mobile emoji bottom sheet — stretches the
   picker so its mobile layout can fill the entire drawer height. The
   picker itself (in mobile mode) uses width/height: 100% and handles
   its own internal layout. */
.emojiPickerSheetBody {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
	height: 100%;
	min-height: 0;
}

.emojiPickerSheetBody > * {
	flex: 1 1 auto;
	min-height: 0;
}

/* ── Mobile layout ≤768px ────────────────────────────────────────────── */

@media (max-width: 768px) {
	.outer {
		padding-left: 8px;
		padding-right: 8px;
	}

	/* Drop the 3-column grid to a single row of pill components. */
	.mainWrapper {
		display: flex;
		align-items: center;
		column-gap: 8px;
		padding: 8px 0;
		min-height: 52px;
		width: 100%;
	}

	/* Left: plus becomes a round button outside the pill. */
	.uploadColumn {
		padding-top: 0;
		align-items: center;
		min-height: 0;
		flex: 0 0 auto;
		grid-column: unset;
	}

	.uploadColumn .textareaButton {
		width: 36px;
		height: 36px;
		min-width: 36px;
		border-radius: 50%;
		background-color: var(--background-tertiary, rgba(255, 255, 255, 0.04));
		color: var(--text-primary);
	}

	.uploadColumn .textareaButtonIcon {
		width: 22px;
		height: 22px;
	}

	/* Center + right: visually merge into one rounded pill — expand to
	   fill all the space between the plus button and the right edge. */
	.contentArea {
		flex: 1 1 auto;
		min-width: 0;
		grid-column: unset;
		background-color: var(--background-tertiary, rgba(255, 255, 255, 0.04));
		border-radius: 18px;
		padding: 10px 44px 10px 16px;
		min-height: 40px;
		position: relative;
		align-self: stretch;
		justify-content: center;
		padding-top: 10px;
	}

	.placeholder {
		top: 50%;
		left: 14px;
		right: 44px;
		transform: translateY(-50%);
	}

	.textarea {
		max-height: 140px;
	}

	/* Right column collapses into the pill: GIF/Image/Sticker hidden,
	   emoji button absolute-positioned at the pill's right edge.
	   The offset is measured from .mainWrapper's right edge and needs
	   to clear both the send button (36px) and the column gap (8px)
	   before adding the 6px inset inside the pill. */
	.buttonContainer {
		grid-column: unset;
		position: absolute;
		right: calc(36px + 8px + 6px);
		top: 50%;
		transform: translateY(-50%);
		min-height: 0;
		gap: 0;
		background: transparent;
	}

	/* Hide the GIF / Image / Sticker buttons on mobile — the pill only
	   needs the emoji toggle. */
	.buttonContainer > .textareaButton:nth-child(1),
	.buttonContainer > .textareaButton:nth-child(2),
	.buttonContainer > .textareaButton:nth-child(3) {
		display: none;
	}

	.buttonContainer > .textareaButton:last-child {
		width: 32px;
		height: 32px;
		min-width: 32px;
	}

	.buttonContainer > .textareaButton:last-child .textareaButtonIcon {
		width: 22px;
		height: 22px;
	}

	/* The parent ChannelView re-nests the textarea inside a flex column;
	   keep the input sized appropriately on mobile. */
	.replyBar,
	.editBar {
		padding-left: 12px;
		padding-right: 12px;
	}

	/* Show the mobile send button — sits in a fixed-width column next to
	   the input pill. */
	.sendColumn {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
	}
}

/* ── Plus-button popup menu ─────────────────────────────────────────── */

.plusMenu {
	min-width: 188px;
	padding: 6px 8px;
	background-color: var(--background-floating, var(--background-primary));
	border-radius: 8px;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.24);
	display: flex;
	flex-direction: column;
}

.plusMenuItem {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 8px 8px;
	border-radius: 4px;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--text-secondary);
	font-size: 0.875rem;
	font-weight: 500;
	font-family: inherit;
	text-align: left;
	transition: background-color 0.1s, color 0.1s;
}

.plusMenuItem:hover {
	background-color: var(--brand-primary);
	color: #fff;
}
