/* Design TCHAT LIVE */
.msg-send-conversation-btn
{
	width: 19%;
	float: right;
	height: 36px;
}
.msg-post-blacklist
{
	float: right;
	margin-right: 10px;
	cursor: pointer;
}
.messagelive
{
	width: 77%;
	height: 30px;
}
.msg-conversation
{
	overflow: hidden;
	flex-direction: column;
	position: relative;
	display: flex;
	height: 244px;
	overflow-y: scroll;
}
.msg-post
{
	position: relative;
	bottom: 0;
	width: 260px;
	height: 310px;
	background-color: #ffffff;
	right: 0;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	display: flex;
	float: left;
	margin-right: 5px;
	border: 1px solid #7b7b7b;
	overflow: hidden;
	flex-direction: column;
	z-index: 10000;
}
.msg-post-message
{
	float: left;
	margin-left: 5px;
	margin-top: 7px;
	font-size: 13px;
	width: 84%;
}
.msg-post-user-vignette
{
	float: left;
	width: 30px;
	border-radius: 30px;
	overflow: hidden;
	height: 30px;
}
.msg-post-user
{
	float:right;
}
.msg-post-user-vignette img
{
	width:30px;
	height:30px;
}
.msg-post-conversation
{
	padding:6px;
}
.msg-post-close
{
	float: right;
	margin-right: 20px;
	cursor: pointer;
}
.msg-post-title
{
	width: 100%;
	padding-top: 7px;
	padding-bottom: 5px;
	background-color: #e74c3c;
	height: 19px;
	color: #fff;
	font-size: 13px;
	padding-left: 10px;
}
#msg-instant
{
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 10000;
}

/* Le popup reste visible mais REPLIE par defaut : seule la barre de titre
   ("Vous avez recu un message de X") s'affiche. Le contenu de la conversation
   et la zone de saisie restent caches tant que l'utilisateur n'a pas clique
   dessus volontairement. */
.msg-post
{
	width: 320px !important;
	height: auto !important;
	margin-right: 16px;
	margin-bottom: 16px;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}

.msg-post .msg-conversation,
.msg-post .msg-sending-user
{
	display: none;
}

.msg-post.msg-post-expanded .msg-conversation,
.msg-post.msg-post-expanded .msg-sending-user
{
	display: flex;
}

.msg-post-title
{
	cursor: pointer;
	padding: 14px 16px !important;
	height: auto !important;
	font-size: 16px !important;
	line-height: 1.4;
}

.msg-post-title .usernameColor
{
	font-size: 16px;
	font-weight: bold;
}

.msg-post-title::after
{
	content: "Vous avez reçu un message";
	display: block;
	font-size: 13px;
	font-weight: normal;
	margin-top: 4px;
	color: #fff;
	opacity: 0.95;
}

.msg-post.msg-post-expanded .msg-post-title::after
{
	display: none;
}

.msg-post-close,
.msg-post-blacklist
{
	font-size: 15px;
}


/* ==========================================================
   CHAT SOMBRE — page complète (conversation.tpl + messagerie.tpl)
   ========================================================== */

/* ----- PAGE CONVERSATION ----- */

.chat-page
{
	background-color: #0d0d0d;
	height: 100vh;
	height: 100dvh;
	display: flex;
	flex-direction: column;
	color: #fff;
	font-family: 'Ubuntu', sans-serif;
	max-width: 1024px;
	margin: 0 auto;
}

.chat-header
{
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 20px;
	background-color: #0d0d0d;
	border-bottom: 1px solid #232323;
	flex-shrink: 0;
}

.chat-back
{
	color: #fff;
	font-size: 20px;
	text-decoration: none;
}

.chat-notes-btn
{
	margin-left: auto;
	color: #cfcfcf;
	font-size: 18px;
	text-decoration: none;
}

.chat-notes-btn:hover
{
	color: #e74c3c;
}

.chat-notes-panel
{
	position: fixed;
	top: 0;
	right: -300px;
	bottom: 0;
	width: 280px;
	background-color: #161616;
	border-left: 1px solid #232323;
	box-shadow: -8px 0 30px rgba(0,0,0,0.4);
	padding: 20px;
	box-sizing: border-box;
	z-index: 15000;
	overflow-y: auto;
	transition: right 0.3s ease;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.chat-notes-panel.chat-notes-panel-open
{
	right: 0;
}

.chat-notes-drawer-header
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 4px;
}

.chat-notes-col
{
	flex: none;
}

.chat-notes-label
{
	display: block;
	color: #9a9a9a;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 6px;
}

.chat-notes-panel textarea
{
	width: 100%;
	box-sizing: border-box;
	min-height: 120px;
	background-color: #0d0d0d;
	border: 1px solid #2e2e2e;
	border-radius: 8px;
	color: #fff;
	padding: 10px 12px;
	font-family: 'Ubuntu', sans-serif;
	font-size: 13px;
	line-height: 1.5;
	resize: vertical;
}

.chat-notes-panel textarea:focus
{
	outline: none;
	border-color: #e74c3c;
}

.chat-empty-state
{
	text-align: center;
	padding: 60px 20px;
	color: #666;
}

.chat-empty-state i
{
	font-size: 40px;
	margin-bottom: 16px;
	display: block;
	color: #333;
}

.chat-empty-state p
{
	font-size: 14px;
	line-height: 1.6;
}

@media (max-width: 600px)
{
	.chat-notes-panel
	{
		width: 85%;
		right: -100%;
	}
}

.chat-header-title
{
	font-size: 18px;
	font-weight: 500;
}

.chat-body
{
	flex: 1;
	padding: 20px;
	box-sizing: border-box;
	overflow-y: auto;
}

.chat-messages
{
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.chat-columns-header
{
	display: none;
}

/* bulles de message (a adapter selon la structure reelle de {content}) */
.chat-messages .msg-sent
{
	grid-column: 2;
	background-color: #e74c3c;
	color: #fff;
	padding: 10px 14px;
	border-radius: 14px 14px 2px 14px;
}

.chat-messages .msg-received
{
	grid-column: 1;
	background-color: #1f1f1f;
	color: #fff;
	padding: 10px 14px;
	border-radius: 14px 14px 14px 2px;
}

/* Filet de securite generique (au cas ou {content} sort d'autres balises) */
.chat-messages > div,
.chat-messages > p,
.chat-messages > table
{
	grid-column: 1;
	background-color: #1f1f1f;
	color: #fff;
	padding: 10px 14px;
	border-radius: 10px;
}

.chat-messages a
{
	color: #ff8a75;
}

.chat-messages img
{
	max-width: 200px;
	width: 100% !important;
	height: auto;
	border-radius: 10px;
	display: block;
	margin-top: 4px;
}

/* ----- COLONNES : messages recus a gauche / envoyes a droite ----- */
/* Structure reelle : <div class="item-msg user">...</div> = message ENVOYE (moi)
                       <div class="item-msg">...</div>      = message RECU (l'autre) */

.chat-messages .item-msg
{
	display: flex;
	align-items: flex-end;
	gap: 10px;
	max-width: 96%;
	background: none;
	padding: 0;
	float: none;
	border: none;
	overflow: visible;
}

.chat-messages .item-msg-photo
{
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border-radius: 50%;
	overflow: hidden;
	margin: 0 0 6px 0;
}

.chat-messages .item-msg-photo img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.chat-messages .item-msg-info
{
	width: auto;
	display: flex;
	flex-direction: column;
}

.chat-messages .item-msg-date
{
	order: 2;
	font-size: 11px;
	color: #8a8a8a;
	margin-top: 4px;
	margin-bottom: 0;
}

.chat-messages .item-msg-message
{
	order: 1;
}

.chat-messages .item-msg-big-pseudo a
{
	color: #cfcfcf !important;
}

.chat-messages .item-msg-message
{
	padding: 12px 16px;
	border-radius: 16px;
	font-size: 14px;
	line-height: 1.5;
	display: inline-block;
	color: #fff;
	min-width: 340px;
	box-sizing: border-box;
}

/* --- Message RECU (pas de classe .user) : aligne a GAUCHE, gris fonce --- */
.chat-messages .item-msg:not(.user)
{
	align-self: flex-start;
}

.chat-messages .item-msg:not(.user) .item-msg-message
{
	background-color: #262626;
	border-radius: 16px 16px 16px 4px;
}

/* --- Message ENVOYE (.item-msg.user) : aligne a DROITE, rouge --- */
.chat-messages .item-msg.user
{
	align-self: flex-end;
	flex-direction: row-reverse;
}

.chat-messages .item-msg.user .item-msg-photo
{
	display: none;
}

.chat-messages .item-msg.user .item-msg-message
{
	background-color: #e74c3c;
	border-radius: 16px 16px 4px 16px;
}

.chat-messages .item-msg.user .item-msg-date
{
	text-align: right;
}

/* ----- BARRE DE SAISIE ----- */

.chat-input-bar
{
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 20px;
	background-color: #0d0d0d;
	border-top: 1px solid #232323;
	box-sizing: border-box;
	flex-shrink: 0;
}

.chat-icon-btn
{
	color: #cfcfcf;
	font-size: 18px;
	cursor: pointer;
	flex-shrink: 0;
}

.chat-icon-btn:hover
{
	color: #fff;
}

.chat-textarea
{
	flex: 1;
	resize: none;
	height: 42px;
	line-height: 42px;
	padding: 0 16px;
	border-radius: 21px;
	border: none;
	background-color: #fff;
	color: #222;
	font-family: 'Ubuntu', sans-serif;
	font-size: 14px;
	box-sizing: border-box;
}

.chat-textarea::placeholder
{
	color: #999;
}

.chat-send-btn
{
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: none;
	background-color: #2a2a2a;
	color: #fff;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.chat-send-btn:hover
{
	background-color: #e74c3c;
}

.chat-photo-preview
{
	display: none;
	align-items: center;
	gap: 10px;
	padding: 10px 20px;
	background-color: #161616;
	border-top: 1px solid #232323;
}

.chat-photo-preview img
{
	width: 60px;
	height: 60px;
	object-fit: cover;
	border-radius: 8px;
	border: 2px solid #e74c3c;
}

.chat-photo-preview-remove
{
	color: #cfcfcf;
	cursor: pointer;
	font-size: 16px;
	background-color: #2a2a2a;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.chat-photo-preview-remove:hover
{
	background-color: #e74c3c;
	color: #fff;
}

/* ===== GALERIE PHOTO PRIVEE ===== */

.photo-gallery-overlay
{
	display: none;
	position: fixed;
	inset: 0;
	background-color: rgba(0,0,0,0.75);
	z-index: 20000;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.photo-gallery-overlay.photo-gallery-open
{
	display: flex;
}

.photo-gallery-panel
{
	background-color: #0d0d0d;
	border-radius: 12px;
	width: 100%;
	max-width: 480px;
	max-height: 80vh;
	overflow-y: auto;
	padding: 20px;
	box-sizing: border-box;
}

.photo-gallery-header
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 16px;
}

.photo-gallery-add
{
	margin-bottom: 16px;
}

.photo-gallery-add .btn
{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

.photo-gallery-grid
{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.photo-gallery-item
{
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
}

.photo-gallery-item img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.photo-gallery-item-delete
{
	position: absolute;
	top: 4px;
	right: 4px;
	background-color: rgba(0,0,0,0.6);
	color: #fff;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	cursor: pointer;
}

.photo-gallery-item-delete:hover
{
	background-color: #e74c3c;
}

/* ----- PAGE LISTE MESSAGERIE ----- */

.chat-list-page
{
	background-color: #0d0d0d;
	min-height: 100vh;
	color: #fff;
	font-family: 'Ubuntu', sans-serif;
	padding: 24px;
	box-sizing: border-box;
	max-width: 400px;
}

.chat-list-header h1
{
	font-size: 26px;
	font-weight: 400;
	margin: 0 0 16px 0;
}

.chat-list-tabs
{
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.chat-tab-pill
{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border-radius: 20px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	background-color: #1c1c1c;
	color: #cfcfcf;
	white-space: nowrap;
	transition: background-color 0.2s ease;
}

.chat-tab-pill:hover
{
	background-color: #262626;
}

.chat-tab-pill-active
{
	background-color: #262626;
	color: #fff;
}

.chat-tab-badge
{
	background-color: #3a3a3a;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 10px;
	min-width: 18px;
	text-align: center;
}

.chat-tab-pill-active .chat-tab-badge
{
	background-color: #e74c3c;
}


/* ----- SECTION "EN ATTENTE DE REPONSE" (localStorage, cote navigateur) ----- */

.chat-pending-section
{
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px dashed #232323;
}

.chat-pending-title
{
	font-size: 16px;
	font-weight: 500;
	color: #cfcfcf;
	margin: 0 0 12px 0;
}

.chat-pending-list
{
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.chat-pending-card
{
	display: flex;
	align-items: center;
	gap: 12px;
	background-color: #161616;
	border: 1px dashed #3a3a3a;
	border-radius: 10px;
	padding: 12px 16px;
	text-decoration: none;
	color: #fff;
}

.chat-pending-photo
{
	width: 44px;
	height: 44px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	background-color: #2a2a2a;
}

.chat-pending-photo img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.chat-pending-name
{
	font-weight: bold;
	font-size: 14px;
}

.chat-pending-badge
{
	font-size: 12px;
	color: #e0a020;
	margin-top: 2px;
}

/* Badge sur une carte de conversation EXISTANTE dont le dernier message
   envoye n'a pas encore de reponse */
.chat-card-pending
{
	position: relative;
	border: 1px dashed #e0a020 !important;
}

.chat-pending-overlay-badge
{
	margin-top: 10px;
	font-size: 12px;
	font-weight: bold;
	color: #e0a020;
	display: inline-block;
	padding: 4px 10px;
	border-radius: 12px;
	background-color: rgba(224, 160, 32, 0.15);
}

.chat-tab-active
{
	background-color: #e74c3c;
	color: #fff;
}

.chat-list-content
{
	border-top: 1px solid #e74c3c;
	padding-top: 16px;
	margin-top: 10px;
	text-align: center;
	color: #cfcfcf;
	font-size: 14px;
}

/* ----- OVERRIDE .item-msg (carte de conversation) EN THEME SOMBRE ----- */
.chat-list-content .item-msg
{
	float: none;
	width: 100%;
	border: none;
	background-color: #1a1a1a;
	border-radius: 10px;
	padding: 16px;
	margin-top: 0;
	margin-bottom: 14px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	text-align: left;
}

.chat-list-content .item-msg-photo
{
	width: 56px;
	height: 56px;
	border-radius: 50%;
	overflow: hidden;
	margin-right: 14px;
}

.chat-list-content .item-msg-photo img
{
	border-radius: 50%;
}

.chat-list-content .item-msg-info
{
	width: calc(100% - 70px);
}

.chat-list-content .item-msg-date
{
	color: #9a9a9a;
	font-size: 11px;
}

.chat-list-content .item-msg-pseudo,
.chat-list-content .item-msg-pseudo a
{
	color: #fff;
	font-size: 16px;
	text-decoration: none;
}

.chat-list-content .item-msg-btn
{
	width: 100%;
	float: none;
	padding-top: 14px;
	display: flex;
	gap: 10px;
}

.chat-list-content .item-msg-btn .btn
{
	flex: 1;
	text-align: center;
	font-size: 13px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.chat-list-content .gray
{
	background-color: #3a3a3a !important;
}

.chat-list-content .gray:hover
{
	background-color: #4a4a4a !important;
}

@media (min-width: 900px)
{
	.chat-messages .item-msg-message
	{
		min-width: 520px !important;
	}
}

/* ===== BADGE IN/OUT SUR CHAQUE CARTE DE CONVERSATION ===== */

.chat-io-badge
{
	display: flex;
	gap: 10px;
	margin-top: 10px;
	font-size: 11px;
	font-weight: bold;
}

.chat-io-in
{
	color: #4ecb71;
	background-color: rgba(78, 203, 113, 0.12);
	padding: 3px 8px;
	border-radius: 10px;
}

.chat-io-out
{
	color: #e74c3c;
	background-color: rgba(231, 76, 60, 0.12);
	padding: 3px 8px;
	border-radius: 10px;
}

/* ===== PILL RECAPITULATIF HEBDOMADAIRE (a cote de "Tous") ===== */

.chat-week-summary
{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border-radius: 20px;
	background-color: #1c1c1c;
	color: #cfcfcf;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.chat-week-summary .chat-io-in,
.chat-week-summary .chat-io-out
{
	margin-top: 0;
}

/* ===== BOUTON AFFICHER/MASQUER LES STATS IN/OUT ===== */

.chat-io-toggle-btn
{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border-radius: 20px;
	background-color: #1c1c1c;
	color: #cfcfcf;
	font-size: 12px;
	font-weight: 600;
	border: none;
	cursor: pointer;
	white-space: nowrap;
	font-family: 'Ubuntu', sans-serif;
}

.chat-io-toggle-btn:hover
{
	background-color: #262626;
	color: #fff;
}

body.io-stats-hidden .chat-io-badge,
body.io-stats-hidden .chat-week-summary
{
	display: none !important;
}

/* ===== BADGE "TOTAL" AUTOMATIQUE (recupere en arriere-plan) ===== */

.chat-io-total-badge
{
	margin-top: 6px;
	opacity: 0.85;
}

.chat-io-total-label
{
	font-size: 10px;
	color: #777;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-right: 4px;
}

.chat-io-week-label
{
	font-size: 10px;
	color: #777;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-right: 4px;
}

/* ===== PUCES COLORÉES POUR IN/OUT (au lieu du texte) ===== */

.chat-io-in,
.chat-io-out
{
	font-weight: bold;
	letter-spacing: 1px;
}

/* ===== ELEMENTS VIDEO DANS LA GALERIE PRIVEE ===== */

.photo-gallery-item video
{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.photo-gallery-item-video
{
	cursor: default;
}

.photo-gallery-video-label
{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0,0,0,0.75);
	color: #e0a020;
	font-size: 10px;
	font-weight: bold;
	text-align: center;
	padding: 4px 2px;
}

/* ===== SECTION "NOUVEAUX MESSAGES REÇUS" ===== */

.chat-newmsg-card
{
	border-color: #4ecb71 !important;
}

.chat-newmsg-badge
{
	font-size: 12px;
	color: #4ecb71;
	margin-top: 2px;
	font-weight: bold;
}

/* ===== BOUTON "NOUVEAU MESSAGE" NATIF - VERT, DISTINCT DU BOUTON LISTE NOIRE ===== */

.item-msg-btn a.btn.low:has(.fa-envelope)
{
	background-color: #4ecb71 !important;
	color: #0d0d0d !important;
	font-weight: bold;
}

.item-msg-btn a.btn.low:has(.fa-envelope):hover
{
	background-color: #3fb862 !important;
}


/* ===== BADGE STATUT EN LIGNE / HORS LIGNE ===== */

.chat-online-status
{
	display: inline-block;
	font-size: 11px;
	font-weight: bold;
	padding: 2px 8px;
	border-radius: 10px;
	margin-left: 8px;
}

.chat-online-status-loading
{
	color: #666;
}

.chat-online-status-online
{
	color: #4ecb71;
	background-color: rgba(78, 203, 113, 0.12);
}

.chat-online-status-offline
{
	color: #888;
	background-color: rgba(136, 136, 136, 0.12);
}