/* Path: Frontend/src/components/dashboard/messages/dashboard-messages.module.scss */

.section {
	display: grid;
	gap: 1rem;

	@include respond(desktop-sm) {
		gap: 1.25rem;
	}
}

.panel {
	border-radius: var(--radius-3xl);
	border: 1px solid var(--border-soft);
	background: linear-gradient(135deg, var(--surface-panel), var(--surface-panel-strong));
	box-shadow: var(--shadow-soft);
}

.panelEyebrow {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.75rem;
	color: var(--text-muted);
}

.workspaceGrid {
	display: grid;
	gap: 1rem;

	> * {
		min-width: 0;
	}

	@include respond(desktop-lg) {
		grid-template-columns: minmax(21rem, 26rem) minmax(0, 1fr);
		align-items: start;
	}
}

.workspaceGridMailboxCollapsed {
	@include respond(desktop-lg) {
		grid-template-columns: minmax(0, 1fr);
	}
}

.leftRail {
	display: grid;
	gap: 1rem;
	min-width: 0;
}

.leftRailCollapsed {
	display: none;
}

.panel {
	display: grid;
	gap: 1rem;
	padding: 1rem;
	min-width: 0;
}

.railHeader,
.threadPanelHeader {
	display: flex;
	justify-content: space-between;
	align-items: start;
	gap: 0.85rem;
	flex-wrap: wrap;

	h2 {
		font-size: 1.15rem;
		line-height: 1.1;
		overflow-wrap: anywhere;
	}

	p:last-child {
		margin-top: 0.25rem;
		font-size: 0.9rem;
		color: var(--text-muted);
	}
}

.railToggle {
	display: inline-flex;
	padding: 0.25rem;
	border-radius: var(--radius-full);
	background: var(--surface-soft);
	border: 1px solid var(--border-soft);
	gap: 0.25rem;
}

.toggleButton {
	padding: 0.55rem 0.9rem;
	border-radius: var(--radius-full);
	border: none;
	background: transparent;
	color: var(--text-muted);
	font: inherit;
	font-size: 0.88rem;
	font-weight: 600;
	cursor: pointer;
	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		transform 0.2s ease;

	&:hover {
		transform: translateY(-1px);
	}
}

.toggleButtonActive {
	background: var(--surface-panel);
	color: var(--text);
	box-shadow: var(--shadow-soft);
}

.form,
.replyForm {
	display: grid;
	gap: 0.85rem;
}

.fieldLabel {
	display: grid;
	gap: 0.45rem;

	span {
		font-size: 0.84rem;
		font-weight: 600;
		color: var(--text-muted);
	}
}

.textInput,
.textArea,
.selectInput,
.searchField input {
	width: 100%;
	padding: 0.85rem 0.95rem;
	border-radius: var(--radius-md);
	border: 1px solid var(--border-soft);
	background: var(--surface-soft);
	color: var(--text);
	font: inherit;
	transition:
		border-color 0.2s ease,
		background-color 0.2s ease,
		box-shadow 0.2s ease;

	&:focus {
		outline: none;
		border-color: var(--border-strong);
		background: var(--surface-panel-strong);
		box-shadow: var(--focus-ring-primary-soft-shadow);
	}
}

.textArea {
	resize: vertical;
	min-height: 6rem;
}

.searchField {
	display: flex;
	align-items: center;
	gap: 0.7rem;

	input {
		padding-left: 0;
	}
}

.searchIcon {
	display: grid;
	place-items: center;
	color: var(--text-muted);

	svg {
		width: 1rem;
		height: 1rem;
		stroke: currentColor;
		fill: none;
		stroke-width: 1.8;
		stroke-linecap: round;
		stroke-linejoin: round;
	}
}

.inboxTools {
	display: grid;
	gap: 0.65rem;
}

.resultsNote,
.composeNote,
.emptyState,
.emptyThreadState,
.preview,
.messageBody {
	font-size: 0.93rem;
	color: var(--text-muted);
	overflow-wrap: anywhere;
	word-break: break-word;
}

.composeNote {
	line-height: 1.45;
}

.feedbackMessage {
	padding: 0.8rem 0.95rem;
	border-radius: var(--radius-md);
	font-size: 0.88rem;
	border: 1px solid var(--border-soft);
}

.feedbackError {
	background: var(--surface-warning-tint);
	color: var(--text);
}

.feedbackSuccess {
	background: var(--surface-success-tint);
	color: var(--text);
}

.primaryAction {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.8rem 1rem;
	border-radius: var(--radius-full);
	border: none;
	font: inherit;
	font-weight: 600;
	background: linear-gradient(135deg, var(--action-primary-start), var(--action-primary-end));
	color: var(--action-primary-text);
	box-shadow: var(--action-primary-shadow);
	cursor: pointer;
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease,
		opacity 0.2s ease;

	&:hover {
		transform: translateY(-1px);
		box-shadow: var(--action-primary-shadow-hover);
	}

	&:disabled {
		opacity: 0.7;
		cursor: wait;
		transform: none;
	}
}

.secondaryAction {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.72rem 0.95rem;
	border-radius: var(--radius-full);
	border: 1px solid var(--border-soft);
	background: var(--surface-soft);
	color: var(--text);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition:
		transform 0.2s ease,
		border-color 0.2s ease,
		background-color 0.2s ease;

	&:hover {
		transform: translateY(-1px);
		border-color: var(--border-strong);
		background: var(--surface-panel);
	}

	&:disabled {
		opacity: 0.7;
		cursor: wait;
		transform: none;
	}
}

.dangerAction {
	composes: secondaryAction;
	border-color: var(--border-danger-soft);
	color: var(--danger);

	&:hover {
		border-color: var(--border-danger-strong);
		background: var(--surface-danger-tint);
	}
}

.threadList,
.messageStream {
	display: grid;
	gap: 0.75rem;
}

.threadButton {
	display: grid;
	gap: 0.65rem;
	padding: 0.95rem;
	border-radius: var(--radius-lg);
	border: 1px solid var(--border-soft);
	background: var(--surface-soft);
	text-align: left;
	color: inherit;
	cursor: pointer;
	transition:
		border-color 0.2s ease,
		background-color 0.2s ease,
		transform 0.2s ease;

	&:hover {
		transform: translateY(-1px);
		border-color: var(--border-strong);
	}
}

.threadButtonActive {
	border-color: color-mix(in srgb, var(--primary) 45%, var(--border-strong));
	background: color-mix(in srgb, var(--surface-accent-soft) 55%, var(--surface-panel));
}

.threadButtonTop,
.messageMeta {
	display: flex;
	justify-content: space-between;
	align-items: start;
	gap: 0.75rem;
}

.messageMetaAside {
	display: grid;
	justify-items: end;
	gap: 0.3rem;
	text-align: right;
	color: var(--text-muted);
}

.senderWrap {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;

	strong,
	h2 {
		line-height: 1.1;
	}

	p {
		margin-top: 0.18rem;
		font-size: 0.84rem;
		color: var(--text-muted);
	}
}

.threadCopy {
	min-width: 0;

	strong,
	p {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

.avatar {
	width: 2.5rem;
	height: 2.5rem;
	display: grid;
	place-items: center;
	border-radius: var(--radius-full);
	background: var(--surface-accent-soft);
	color: var(--primary);
	font-weight: 700;
	flex-shrink: 0;
	overflow: hidden;
}

.threadMeta {
	display: grid;
	justify-items: end;
	gap: 0.3rem;
	color: var(--text-muted);
	flex-shrink: 0;
}

.unreadBadge,
.statusNote {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.3rem 0.62rem;
	border-radius: var(--radius-full);
	font-size: 0.74rem;
	font-weight: 700;
	background: var(--surface-info-emphasis);
	color: var(--text-info-strong);
}

.statusNote {
	background: var(--surface-soft);
	color: var(--text-muted);
	font-weight: 600;
}

.preview {
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.threadPanel {
	min-height: 100%;
	min-width: 0;
}

.threadHeaderActions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.65rem;
	flex-wrap: wrap;
	min-width: 0;
}

.inlineEditForm {
	display: grid;
	gap: 0.75rem;
	width: min(100%, 32rem);
}

.inlineEditActions,
.messageActions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.messageActions {
	justify-content: flex-end;
	opacity: 0.72;
	transition: opacity 0.2s ease;
}

.messageBubble:hover .messageActions,
.messageBubble:focus-within .messageActions {
	opacity: 1;
}

@media (hover: none) {
	.messageActions {
		opacity: 1;
	}
}

.messageActionButton {
	padding: 0;
	border: none;
	background: transparent;
	color: var(--text-muted);
	font: inherit;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition:
		color 0.2s ease,
		opacity 0.2s ease;

	&:hover {
		color: var(--text);
	}

	&:disabled {
		opacity: 0.7;
		cursor: wait;
	}
}

.messageActionDanger {
	color: var(--text-danger-muted);

	&:hover {
		color: var(--danger);
	}
}

.emptyThreadState {
	padding: 1rem;
	border-radius: var(--radius-md);
	border: 1px dashed var(--border-soft);
	background: color-mix(in srgb, var(--surface-soft) 75%, transparent);
	line-height: 1.5;
}

.messageStream {
	padding: 0.2rem;
}

.messageRow {
	display: flex;
	justify-content: flex-start;
}

.messageRowMine {
	justify-content: flex-end;
}

.messageBubble {
	display: grid;
	gap: 0.75rem;
	width: min(100%, 44rem);
	padding: 0.95rem;
	border-radius: var(--radius-lg);
	border: 1px solid var(--border-soft);
	background: var(--surface-soft);
}

.messageBubbleMine {
	background: color-mix(in srgb, var(--surface-accent-soft) 60%, var(--surface-panel));
	border-color: color-mix(in srgb, var(--primary) 35%, var(--border-strong));
}

.editedNote {
	font-size: 0.74rem;
	font-weight: 600;
	color: var(--text-muted);
}

.replyActions {
	display: flex;
	justify-content: flex-end;
}

.emptyState {
	padding: 0.75rem 0;
	line-height: 1.5;
}
