// Questo file fa parte di MyTown.
// MyTown è software libero: puoi ridistribuirlo e/o modificarlo secondo
// i termini della GNU Affero General Public License come pubblicata dalla
// Free Software Foundation, versione 3.
// Distribuito senza ALCUNA GARANZIA; vedi la GNU AGPL v3 per i dettagli.
// Copyright (C) Kondor Consulting & Services S.r.l.
// SPDX-License-Identifier: AGPL-3.0-or-later

// ============================================================
// TOKENS
// ============================================================

:host {
	--spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--own-bg: var(--ion-color-primary, var(--app-brand));
	--other-bg: var(--ion-card-background, #fff);
	--company-color: var(--ion-color-secondary, var(--app-brand-2));
}

// ============================================================
// IDENTITY STRIP
// ============================================================

.chat-identity-strip {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px 10px;
	background: var(--ion-background-color, #f8f8f8);
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.cis-avatar {
	width: 40px;
	height: 40px;
	border-radius: 13px;
	background: var(--ion-color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--app-on-brand, #fff);
	font-size: 15px;
	font-weight: 800;

	&.is-company {
		background: var(--company-color);
		color: var(--ion-color-secondary-contrast, #fff);

		ion-icon {
			font-size: 18px;
		}
	}
}

.cis-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cis-name {
	font-size: 15px;
	font-weight: 700;
	color: var(--ion-color-dark);
	letter-spacing: -0.2px;
}

.cis-sub {
	font-size: 11px;
	color: var(--ion-color-medium);
	font-weight: 500;
}

// ============================================================
// EMPTY
// ============================================================

.empty-chat {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60px 32px;
	text-align: center;
	color: var(--ion-color-medium);

	ion-icon {
		font-size: 52px;
		margin-bottom: 12px;
	}

	p {
		font-size: 14px;
		margin: 0;
	}
}

// ============================================================
// CHAT CONTAINER
// ============================================================

.chat-container {
	padding: 8px 12px 12px;
}

// ============================================================
// DATE SEPARATOR
// ============================================================

.date-sep {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 16px 0 8px;

	span {
		background: rgba(var(--ion-color-medium-rgb), 0.12);
		padding: 4px 12px;
		border-radius: 12px;
		font-size: 11px;
		color: var(--ion-color-medium);
		font-weight: 600;
		letter-spacing: 0.2px;
	}
}

// ============================================================
// MESSAGE ROWS
// ============================================================

.msg-row {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	margin-bottom: 6px;

	&.own {
		justify-content: flex-end;
	}

	&.other {
		justify-content: flex-start;
	}
}

// ============================================================
// MESSAGE AVATAR (for incoming)
// ============================================================

.msg-avatar {
	width: 30px;
	height: 30px;
	border-radius: 10px;
	background: var(--ion-color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--app-on-brand, #fff);
	font-size: 11px;
	font-weight: 800;
	margin-bottom: 2px;

	&.is-company {
		background: var(--company-color);
		color: var(--ion-color-secondary-contrast, #fff);

		ion-icon {
			font-size: 14px;
		}
	}
}

// ============================================================
// BUBBLES
// ============================================================

.msg-bubble {
	max-width: 72%;
	padding: 10px 13px 7px;
	border-radius: 18px;
	word-break: break-word;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);

	&.own-bubble {
		background: var(--own-bg);
		color: var(--app-on-brand, #fff);
		border-bottom-right-radius: 5px;
		cursor: pointer;
		transition: transform 0.12s var(--spring), box-shadow 0.12s ease;

		&:active:not(.deleted-bubble) {
			transform: scale(0.97);
		}
	}

	&.other-bubble {
		background: var(--other-bg);
		color: var(--ion-color-dark);
		border-bottom-left-radius: 5px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
	}

	&.deleted-bubble {
		opacity: 0.6;
		cursor: default;
		box-shadow: none;
	}
}

.msg-deleted-text {
	font-style: italic;
	font-size: 13px;
	display: flex;
	align-items: center;
	gap: 5px;

	ion-icon {
		font-size: 13px;
		flex-shrink: 0;
	}
}

.hidden-avatar {
	opacity: 0.35;
}

.msg-sender {
	font-size: 11px;
	font-weight: 700;
	color: var(--company-color, var(--ion-color-primary));
	margin-bottom: 4px;
	letter-spacing: 0.1px;
}

.msg-text {
	font-size: 14px;
	line-height: 1.45;
	white-space: pre-wrap;
}

.msg-meta {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
	margin-top: 4px;
}

.msg-time {
	font-size: 10px;
	opacity: 0.65;
}

.msg-read {
	font-size: 13px;
	color: rgba(var(--app-on-brand-rgb), 0.45);

	&.read {
		color: var(--app-on-brand, #fff);
	}
}

// ============================================================
// INPUT BAR
// ============================================================

.input-bar {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 8px 12px calc(env(safe-area-inset-bottom) + 8px);
	background: var(--ion-toolbar-background, #fff);
	border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.input-area {
	flex: 1;
	--background: var(--ion-color-light, #f4f5f8);
	--border-radius: 20px;
	--padding-start: 14px;
	--padding-end: 14px;
	--padding-top: 10px;
	--padding-bottom: 10px;
	font-size: 14px;
	max-height: 120px;
}

.send-btn {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--ion-color-primary);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	cursor: pointer;
	transition: transform 0.12s var(--spring), opacity 0.15s ease;
	color: var(--app-on-brand, #fff);
	margin-bottom: 2px;

	ion-icon {
		font-size: 18px;
		transform: translateX(1px);
	}

	&:active {
		transform: scale(0.9);
	}

	&:disabled {
		opacity: 0.35;
	}
}

/* --- Allegati e meta (Fase 2) --- */
.attach-btn {
	background: transparent;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	color: var(--ion-color-medium, #888);
	ion-icon { font-size: 22px; }
	&:disabled { opacity: 0.35; }
}

.msg-attachments {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 4px;
}

.msg-att-img {
	max-width: 220px;
	max-height: 260px;
	border-radius: 10px;
	object-fit: cover;
	cursor: pointer;
}

.msg-att-file {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 10px;
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.06);
	cursor: pointer;
	font-size: 13px;
	ion-icon { font-size: 18px; }
	span { word-break: break-all; }
}

.msg-edited {
	font-size: 10px;
	opacity: 0.6;
	font-style: italic;
}

/* --- Gruppo (Fase 3) --- */
.chat-identity-strip.clickable {
	cursor: pointer;
}
.chat-identity-strip .cis-arrow {
	margin-left: auto;
	color: var(--ion-color-medium, #999);
	font-size: 18px;
}

/* --- Loading --- */
.loading-wrap {
	display: flex;
	justify-content: center;
	padding: 48px 0;
}

/* --- Modale gestione gruppo --- */
.group-actions {
	display: flex;
	gap: 8px;
	margin-bottom: 12px;
}

.conv-avatar {
	width: 40px;
	height: 40px;
	border-radius: 13px;
	background: var(--ion-color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.avatar-initials {
	font-size: 14px;
	font-weight: 800;
	color: var(--app-on-brand, #fff);
	letter-spacing: -0.5px;
}
