/* DIS/CLOSED Chatbox - style
   Les couleurs se changent dans les variables --dc-* ci-dessous. */

.dcchat {
	--dc-bg: #16161c;
	--dc-bg2: #1e1e27;
	--dc-bg3: #272733;
	--dc-line: rgba(255, 255, 255, .09);
	--dc-text: #e8e8ee;
	--dc-muted: #8c8c9c;
	--dc-accent: #a8d44f;
	--dc-accent2: #7a3fc4;

	display: flex;
	flex-direction: column;
	position: relative;
	box-sizing: border-box;
	margin-bottom: 10px;
	color: var(--dc-text);
	background: var(--dc-bg);
	border: 1px solid var(--dc-line);
	border-radius: 16px;
	overflow: hidden;
	font-size: 13px;
	line-height: 1.45;
}
.dcchat *, .dcchat *::before, .dcchat *::after { box-sizing: border-box; }
.dcchat [hidden] { display: none !important; }
.dcchat a { text-decoration: none; }

/* ---------- en-tête ---------- */

.dcchat-head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	background: linear-gradient(90deg, rgba(122, 63, 196, .28), rgba(168, 212, 79, .1) 70%, rgba(255, 255, 255, 0));
	border-bottom: 1px solid var(--dc-line);
}
.dcchat-title { font-weight: 700; }
.dcchat-sub { opacity: .45; }
.dcchat-count {
	margin-left: auto;
	letter-spacing: .08em;
	text-transform: none;
	color: var(--dc-muted);
	font-size: 11px;
}
.dcchat-archive .dcchat-sub { margin-right: auto; }
.dcchat-tools { display: flex; gap: 12px; margin-left: 10px; }
.dcchat-tools a { color: var(--dc-text); opacity: .6; transition: opacity .2s; letter-spacing: .08em; }
.dcchat-tools a:hover { opacity: 1; }

.dcchat-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--dc-accent);
	box-shadow: 0 0 8px var(--dc-accent);
	animation: dcchatPulse 2s infinite;
}
@keyframes dcchatPulse { 50% { opacity: .3; } }

/* ---------- zone principale ---------- */

.dcchat-main { position: relative; display: flex; flex-direction: column; min-height: 0; }

.dcchat-window {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 6px 0;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, .22) transparent;
}
.dcchat-window::-webkit-scrollbar { width: 6px; }
.dcchat-window::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .2); border-radius: 3px; }

.dcchat-front .dcchat-window { flex: none; height: 320px; }

.dcchat-empty { padding: 30px 14px; text-align: center; color: var(--dc-muted); }

/* ---------- messages ---------- */

.dcchat-msg {
	display: flex;
	gap: 10px;
	position: relative;
	padding: 7px 14px;
	border-left: 2px solid transparent;
	transition: background-color .2s;
}
.dcchat-msg:hover { background: rgba(255, 255, 255, .03); }
.dcchat-own { border-left-color: var(--dc-accent2); }
.dcchat-mentioned { background: rgba(168, 212, 79, .09); border-left-color: var(--dc-accent); }

.dcchat-avatar { flex: none; width: 34px; height: 34px; }
.dcchat-avatar a { display: block; }
.dcchat-avatar img {
	display: block;
	width: 34px;
	height: 34px;
	object-fit: cover;
	border-radius: 50%;
	border: 1px solid var(--dc-line);
	background: var(--dc-bg3);
}

.dcchat-content { flex: 1; min-width: 0; }
.dcchat-meta { display: flex; align-items: baseline; gap: 8px; }
.dcchat-user { font-weight: 700; }
.dcchat-user a { color: inherit; }
.dcchat-gone { color: var(--dc-muted); font-style: italic; }
.dcchat-time, .dcchat-edited { font-size: 10px; color: var(--dc-muted); }

.dcchat-acts {
	margin-left: auto;
	display: flex;
	gap: 10px;
	opacity: 0;
	transition: opacity .15s;
}
.dcchat-msg:hover .dcchat-acts, .dcchat-acts:focus-within { opacity: 1; }
.dcchat-act { color: var(--dc-muted); font-size: 11px; }
.dcchat-act:hover { color: var(--dc-accent); }
@media (hover: none) { .dcchat-acts { opacity: .7; } }

.dcchat-text { color: #d6d6de; overflow-wrap: anywhere; word-break: break-word; }
.dcchat-text a { color: var(--dc-accent); }
.dcchat-text img { max-width: 100%; max-height: 220px; vertical-align: middle; }
.dcchat-text blockquote { margin: 4px 0; padding: 4px 10px; border-left: 2px solid var(--dc-line); color: var(--dc-muted); }

.dcchat-mention {
	padding: 0 5px;
	border-radius: 6px;
	background: rgba(168, 212, 79, .18);
	color: var(--dc-accent);
	font-weight: 600;
}

.dcchat-action .dcchat-text { color: var(--dc-accent); }

.dcchat-system { justify-content: center; align-items: center; gap: 8px; color: var(--dc-muted); font-style: italic; font-size: 11px; }
.dcchat-system .dcchat-acts { margin-left: 0; }

/* messages de connexion / déconnexion / absence */
.dcchat-event {
	align-items: center;
	gap: 8px;
	padding: 3px 14px;
	font-size: 11px;
	color: var(--dc-muted);
}
.dcchat-event:hover { background: transparent; }
.dcchat-event-text { min-width: 0; overflow-wrap: anywhere; }
.dcchat-event-text a { color: inherit; font-weight: 600; }
.dcchat-event .dcchat-time { flex: none; }
.dcchat-event-dot {
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #6b6b78;
}
.dcchat-event-join .dcchat-event-dot { background: #3ba55d; box-shadow: 0 0 6px rgba(59, 165, 93, .7); }
.dcchat-event-away .dcchat-event-dot { background: #e0a53c; }

/* édition en place */
.dcchat-editfield {
	width: 100%;
	padding: 6px 10px;
	color: var(--dc-text);
	background: var(--dc-bg3);
	border: 1px solid var(--dc-accent2);
	border-radius: 8px;
	font: inherit;
	outline: none;
}
.dcchat-edithint { margin-top: 3px; font-size: 10px; color: var(--dc-muted); }

/* ---------- membres en ligne (façon Discord) ---------- */

/* Par défaut (boîte étroite) : bande d'avatars sous les messages. */
.dcchat-side {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px;
	border-top: 1px solid var(--dc-line);
	font-size: 11px;
	white-space: nowrap;
	overflow: hidden;
}
.dcchat-online-title {
	flex: none;
	letter-spacing: .18em;
	text-transform: uppercase;
	font-size: 10px;
	color: var(--dc-muted);
}
.dcchat-online { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; }
.dcchat-none { color: var(--dc-muted); }

.dcchat-group { display: contents; }
.dcchat-group-title { display: none; }

.dcchat-member {
	display: flex;
	align-items: center;
	gap: 10px;
	color: inherit;
	border-radius: 8px;
	transition: background-color .15s;
}
.dcchat-mavatar { position: relative; flex: none; width: 26px; height: 26px; }
.dcchat-mavatar a { display: block; }
.dcchat-mavatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	background: var(--dc-bg3);
}
.dcchat-status {
	position: absolute;
	right: -2px;
	bottom: -2px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #3ba55d;
	border: 2px solid var(--dc-bg);
}
.dcchat-mname, .dcchat-typedots { display: none; }

/* Boîte large (page dédiée, ou accueil si le bloc est assez grand) :
   vraie barre latérale, groupée par rôle. */
.dcchat { container-type: inline-size; }

@container (min-width: 640px) {
	.dcchat-main { flex-direction: row; }

	/* Les messages occupent tout l'espace restant (sinon ils se réduisent à leur contenu). */
	.dcchat .dcchat-window { flex: 1 1 0; min-width: 0; height: auto; }
	.dcchat-front .dcchat-main { height: 320px; }

	.dcchat-side {
		flex: none;
		width: 200px;
		min-height: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 12px 8px;
		border-top: 0;
		border-left: 1px solid var(--dc-line);
		white-space: normal;
		overflow-y: auto;
		scrollbar-width: thin;
		scrollbar-color: rgba(255, 255, 255, .2) transparent;
	}
	.dcchat-online-title { display: none; }
	.dcchat-online { display: block; overflow: visible; }

	.dcchat-group { display: block; margin-bottom: 16px; }
	.dcchat-group-title {
		display: block;
		padding: 0 8px 5px;
		font-size: 10px;
		font-weight: 700;
		letter-spacing: .12em;
		text-transform: uppercase;
		color: var(--dc-muted);
	}

	.dcchat-member { padding: 4px 8px; gap: 9px; }
	.dcchat-member:hover { background: rgba(255, 255, 255, .06); }
	.dcchat-mavatar { width: 28px; height: 28px; }
	.dcchat-mname {
		display: block;
		min-width: 0;
		font-size: 12.5px;
		font-weight: 600;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.dcchat-typedots { display: inline-flex; gap: 3px; margin-left: auto; }

	.dcchat .dcchat-newbtn { left: calc((100% - 200px) / 2); bottom: 14px; }
}

/* Membre absent : pastille orange et pseudo atténué */
.dcchat-member.is-away .dcchat-status { background: #e0a53c; }
.dcchat-member.is-away .dcchat-mavatar img,
.dcchat-member.is-away .dcchat-mname { opacity: .6; }

/* Points animés quand un membre écrit */
.dcchat-typedots i {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--dc-muted);
	animation: dcchatTyping 1.2s infinite ease-in-out;
}
.dcchat-typedots i:nth-child(2) { animation-delay: .15s; }
.dcchat-typedots i:nth-child(3) { animation-delay: .3s; }
@keyframes dcchatTyping { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.dcchat-member.is-typing .dcchat-status { box-shadow: 0 0 0 2px rgba(168, 212, 79, .35); }

/* ---------- bouton « nouveaux messages » ---------- */

.dcchat-newbtn {
	position: absolute;
	left: 50%;
	bottom: 46px;
	transform: translateX(-50%);
	padding: 5px 14px;
	color: #111;
	background: var(--dc-accent);
	border: 0;
	border-radius: 999px;
	font: inherit;
	font-size: 11px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .5);
}
/* ---------- saisie / erreurs ---------- */

.dcchat-typing {
	min-height: 18px;
	padding: 2px 14px 0;
	font-size: 11px;
	font-style: italic;
	color: var(--dc-muted);
}
.dcchat-typing a { color: inherit; }

.dcchat-error {
	margin: 0 12px 6px;
	padding: 6px 12px;
	border-radius: 8px;
	background: rgba(220, 60, 80, .16);
	border: 1px solid rgba(220, 60, 80, .4);
	color: #ffb4be;
	font-size: 12px;
}

.dcchat-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	background: var(--dc-bg2);
	border-top: 1px solid var(--dc-line);
}
.dcchat-toolbar { display: flex; gap: 4px; }
.dcchat-toolbar button {
	width: 28px;
	height: 28px;
	padding: 0;
	color: var(--dc-text);
	background: var(--dc-bg3);
	border: 1px solid var(--dc-line);
	border-radius: 8px;
	font: inherit;
	font-size: 12px;
	cursor: pointer;
	transition: border-color .2s, color .2s;
}
.dcchat-toolbar button:hover { color: var(--dc-accent); border-color: var(--dc-accent); }

.dcchat-input {
	flex: 1;
	min-width: 140px;
	height: 34px;
	padding: 0 14px;
	color: var(--dc-text);
	background: var(--dc-bg3);
	border: 1px solid var(--dc-line);
	border-radius: 999px;
	font: inherit;
	outline: none;
	transition: border-color .2s;
}
.dcchat-input:focus { border-color: var(--dc-accent); }
.dcchat-input::placeholder { color: var(--dc-muted); }

.dcchat-send {
	flex: none;
	width: 34px;
	height: 34px;
	padding: 0;
	color: #111;
	background: linear-gradient(135deg, var(--dc-accent2), var(--dc-accent));
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: transform .15s, opacity .2s;
}
.dcchat-send:hover { transform: scale(1.08); }
.dcchat-send:disabled { opacity: .5; cursor: default; transform: none; }

.dcchat-smilies {
	order: -1;
	flex: 0 0 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	max-height: 110px;
	overflow-y: auto;
	padding: 6px;
	background: var(--dc-bg3);
	border-radius: 10px;
}
.dcchat-smilie { display: inline-flex; padding: 3px; border-radius: 6px; }
.dcchat-smilie:hover { background: rgba(255, 255, 255, .1); }
.dcchat-smilie img { display: block; max-height: 22px; }

/* ---------- autocomplétion des mentions ---------- */

.dcchat-form { position: relative; }
.dcchat-suggest {
	position: absolute;
	left: 12px;
	bottom: calc(100% + 6px);
	z-index: 6;
	width: min(320px, calc(100% - 24px));
	max-height: 264px;
	overflow-y: auto;
	padding: 4px;
	background: var(--dc-bg3);
	border: 1px solid var(--dc-line);
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
	scrollbar-width: thin;
}
.dcchat-sug {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 5px 8px;
	border-radius: 8px;
	cursor: pointer;
}
.dcchat-sug.is-active, .dcchat-sug:hover { background: rgba(255, 255, 255, .09); }
.dcchat-sug-av { flex: none; width: 24px; height: 24px; }
.dcchat-sug-av img {
	display: block;
	width: 24px;
	height: 24px;
	object-fit: cover;
	border-radius: 50%;
	background: var(--dc-bg);
}
.dcchat-sug-name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 12.5px;
	font-weight: 600;
}
.dcchat-sug-on { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #3ba55d; }

/* ---------- connexion / déconnexion ---------- */

.dcchat-toggle i { color: var(--dc-accent); transition: color .2s; }
.dcchat-toggle:hover i { color: #fff; }

.dcchat-offline {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	text-align: center;
	background: rgba(22, 22, 28, .78);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.dcchat-offline-box { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dcchat-offline-box i { font-size: 26px; color: var(--dc-muted); }
.dcchat-offline-box p { margin: 0; color: var(--dc-muted); }
.dcchat-connect {
	padding: 8px 22px;
	color: #111;
	background: linear-gradient(135deg, var(--dc-accent2), var(--dc-accent));
	border: 0;
	border-radius: 999px;
	font: inherit;
	font-weight: 700;
	letter-spacing: .06em;
	cursor: pointer;
	transition: transform .15s;
}
.dcchat-connect:hover { transform: scale(1.05); }

.is-offline .dcchat-toggle i { color: #e0566a; }
.is-offline .dcchat-dot { background: var(--dc-muted); box-shadow: none; animation: none; }
.is-offline .dcchat-form { opacity: .45; pointer-events: none; }

/* ---------- fenêtre plein écran (sans header ni footer) ---------- */

body.dcchat-body {
	margin: 0 !important;
	padding: 0 !important;
	background: #101015 !important;
	color: #e8e8ee;
}
body.dcchat-body-full { height: 100vh; overflow: hidden; }

.dcchat-full {
	height: 100vh;
	height: 100dvh;
	margin: 0;
	border: 0;
	border-radius: 0;
}
.dcchat-full .dcchat-main { flex: 1; min-height: 0; }
.dcchat-full .dcchat-window { flex: 1; height: auto; min-height: 0; }

/* ---------- archives & page ---------- */

.dcchat-wrap { max-width: 1100px; margin: 20px auto; padding: 0 16px; }
.dcchat-archive .dcchat-list { padding: 6px 0; }
.dcchat-archive { margin-bottom: 14px; }

@media (prefers-reduced-motion: reduce) {
	.dcchat-dot, .dcchat-typedots i { animation: none; }
	.dcchat * { transition: none !important; }
}