@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syne:wght@700;800&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ==========================================================================
   LAYOUT.CSS
   Styles COMMUNS à toutes les pages connectées (home, profile, gallery...).
   Contient : reset, variables globales, sidebars, grille principale,
   composants tweet, réactions, popups, follow buttons, search, responsive.

   Ce fichier doit être chargé sur TOUTE page qui affiche la structure
   "#mine" (sidebar gauche + colonne centrale + sidebar droite).
   ========================================================================== */

:root {
	/* Ces valeurs sont les valeurs par défaut (thème "Clair").
	   Elles sont réécrites par includes/theme_vars.php selon le thème
	   choisi par l'utilisateur — ne pas modifier ici pour changer
	   l'apparence, ça se fait depuis le panel admin > Thèmes. */
	--bg:           #ffffff;
	--bg-elevated:  #ffffff;
	--accent:       #6c63ff;
	--accent-soft:  rgba(108,99,255,0.10);
	--accent2:      #ff6584;
	--green:        #00e5a0;
	--yellow:       #ffd166;
	--text:         #1a1a2e;
	--muted:        #8888a0;
	--surface:      #f7f7fb;
	--surface2:     #eeeef8;
	--border:       rgba(0,0,0,0.07);
	--radius:       12px;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	list-style: none;
	text-decoration: none;
}

body {
	font-family: 'DM Sans', sans-serif;
	background-color: var(--bg);
	color: var(--text);
	transition: background-color 0.15s;
}

#mine p { margin: 0; }
button:focus { outline: none; }

/* ──────────────────────────────────────────────
   LAYOUT GÉNÉRAL
   Sidebar gauche = 260px fixe, contenu au centre,
   sidebar droite = 320px fixe.
   ────────────────────────────────────────────── */
#mine {
	display: flex;
	max-width: 1600px;
	margin: 0 auto;
	position: relative;
}

#mine .grid-posts {
	display: grid;
	grid-template-columns: 1fr 320px;
	margin-left: 0;
	width: 100%;
	min-height: 100vh;
	background-color: var(--bg);
}

#mine .border-right {
	border-right: 1px solid var(--border);
	min-height: 100vh;
}

/* ──────────────────────────────────────────────
   SIDEBAR GAUCHE
   ────────────────────────────────────────────── */
#mine .wrapper-left {
	display: flex !important;
	position: relative !important;
}
#mine .wrapper-left .sidebar-left {
	position: sticky !important;
	top: 0;
	width: 260px !important;
	height: 100vh;
	background-color: var(--bg-elevated) !important;
	font-family: 'DM Sans', sans-serif !important;
	font-size: 15px !important;
	border-right: 1px solid var(--border) !important;
	margin-left: 0 !important;
	padding: 0 12px 20px;
	display: flex;
	flex-direction: column;
	z-index: 200;
	overflow-y: auto;
}
#mine .grid-sidebar {
	display: flex !important;
	align-items: center;
	gap: 12px;
	padding: 11px 14px;
	border-radius: var(--radius);
	margin-bottom: 2px !important;
	transition: background 0.18s;
	cursor: pointer;
}
#mine .grid-sidebar:hover {
	background: var(--surface) !important;
	color: var(--accent) !important;
}
#mine .icon-sidebar-align {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	flex-shrink: 0;
}
#mine .wrapper-left-elements span {
	font-size: 15px;
	font-weight: 500;
	color: var(--text);
}
#mine .bg-active { color: var(--accent) !important; font-weight: 700 !important; }
#mine .wrapper-left-active { color: var(--accent); }
.wrapper-left a { color: var(--text); }
.wrapper-left a:hover { text-decoration: none; color: var(--accent); }

/* Bouton Tweet */
#mine .button-twittear {
	display: block;
	width: 100%;
	color: #ffffff;
	height: 46px;
	text-align: center;
	border: none;
	padding: 0 0.75rem;
	font-family: 'Syne', sans-serif;
	font-size: 15px;
	font-weight: 700;
	border-radius: var(--radius);
	cursor: pointer;
	margin: 14px 0 8px;
	background: var(--accent);
	transition: opacity 0.18s, transform 0.12s;
}
#mine .button-twittear:hover { opacity: 0.88; transform: translateY(-1px); }

/* Bouton signup (variante outline) */
#mine .button-signup {
	display: inline-block; font-weight: 700; color: var(--accent);
	text-align: center; vertical-align: middle; border: 2px solid var(--accent);
	padding: 0.375rem 1rem; font-size: 14px; line-height: 1.5; border-radius: 99px;
	cursor: pointer; background-color: transparent; transition: background 0.18s;
}
#mine .button-signup:hover { background: var(--accent-soft); }

/* User box (bas de sidebar gauche) */
#mine .box-user {
	margin-top: auto;
	padding: 14px 12px;
	border-top: 1px solid var(--border);
	position: static !important;
	left: auto !important;
	bottom: auto !important;
	right: auto !important;
}
#mine .grid-user {
	display: flex !important;
	align-items: center;
	gap: 10px;
}
#mine .img-user {
	height: 38px; width: 38px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--border);
	flex-shrink: 0;
}
#mine .name {
	font-size: 14px; font-weight: 700; color: var(--text);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0;
}
#mine .username { font-size: 12px; color: var(--muted); margin: 0; }
#mine .mt-arrow { display: none; }

.notify-count {
	position: absolute;
	background: var(--accent2);
	font-size: 10px; font-style: normal; color: white;
	border-radius: 99px;
	top: -6px; right: 11px;
	padding: 2px 5px; font-weight: 700; line-height: 1.3;
}

/* ──────────────────────────────────────────────
   BARRE DE RECHERCHE + TOOLBAR
   ────────────────────────────────────────────── */
#mine .center-input-search {
	margin-left: 0 !important;
	margin-top: 0 !important;
	width: 100%;
}
#mine .input-group-login {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	width: 100%;
}
#mine .box-fixed {
	position: static;
	width: 100%;
	box-shadow: none;
	border-bottom: 1px solid var(--border);
}
#mine .grid-toolbar-center { display: block; }

.search-input {
	background-color: var(--surface) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius) !important;
	padding-left: 40px !important;
	color: var(--text);
	font-family: 'DM Sans', sans-serif;
	transition: border-color 0.18s, background 0.18s;
}
.search-input:focus {
	background-color: var(--bg-elevated) !important;
	border-color: var(--accent) !important;
	outline: none;
}
.tryy {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 26px;
	z-index: 20;
	color: var(--muted);
}

/* Dropdown résultats de recherche */
.nav-right-down-wrap {
	width: 85%; border: 1px solid var(--border); overflow: auto;
	position: absolute; background: var(--bg-elevated); top: 45px; left: 8px;
	border-radius: var(--radius); max-height: 400px; z-index: 20;
	box-shadow: 0 8px 24px rgba(0,0,0,0.10);
}
.nav-right-down-inner {
	height: 60px; border-bottom: 1px solid var(--border);
	overflow: hidden; cursor: pointer;
}
.nav-right-down-wrap ul { margin-bottom: 0; float: none !important; }
.nav-right-down-left { float: left; margin: 0 5px 0 0; }
.nav-right-down-left img { width: 42px !important; height: 42px; border-radius: 50%; }
.nav-right-down-right-headline { margin-top: 5px; }
.nav-right-down-right-headline a { font-weight: 700; padding: 0 2px; font-size: 14px; color: var(--text); }
.nav-right-down-right-headline span { color: var(--muted); }
.nav-right-down-right { float: left; margin: 0 2px; }

/* Autocomplete hashtags */
.hash-box,
.mention-box {
	position: absolute;
	z-index: 50;
	background: var(--bg-elevated);
	border-radius: var(--radius);
	box-shadow: 0 4px 20px rgba(0,0,0,0.12);
	border: 1px solid var(--border);
	display: none;
	overflow: auto;
	max-height: 250px;
	margin-left: 60px;
	width: 320px;
}
.hash-box ul,
.mention-box ul { margin-bottom: 0; }
.hash-box ul li:hover { background: var(--accent); }
.hash-box ul li:hover > a { color: white; }
.hash-box ul li a { display: block; text-decoration: none; color: var(--muted); }

/* ──────────────────────────────────────────────
   SIDEBAR DROITE
   ────────────────────────────────────────────── */
.wrapper-right {
	position: sticky !important;
	top: 0;
	height: 100vh;
	overflow-y: auto;
	width: 320px !important;
	border-left: 1px solid var(--border);
	padding-top: 16px;
	background: var(--bg-elevated);
}

/* Bloc "Who to follow" */
#mine .box-share {
	margin: 12px 16px;
	border-radius: var(--radius);
	background-color: var(--surface);
	border: 1px solid var(--border);
	overflow: hidden;
}
#mine .txt-share {
	font-family: 'Syne', sans-serif;
	font-size: 16px; font-weight: 700; color: var(--text);
	padding: 14px 16px 8px; margin: 0;
}
#mine .grid-share {
	padding: 10px 14px;
	display: grid;
	grid-template-columns: 52px 1fr auto;
	align-items: center;
	gap: 8px;
	transition: background 0.18s;
	border-top: 1px solid var(--border);
}
#mine .grid-share:hover { background-color: var(--surface2); }
#mine .img-share {
	height: 42px; width: 42px; border-radius: 50%;
	object-fit: cover; border: 2px solid var(--border);
}
.follows-you {
	font-size: 11px; font-weight: 700;
	color: var(--accent); background-color: var(--accent-soft);
	padding: 2px 6px; border-radius: 99px;
}

/* Boutons Follow (utilisés partout : sidebar droite, profil...) */
.follow-btn {
	display: inline-block; color: var(--accent);
	height: 34px; text-align: center; vertical-align: middle;
	padding: 0 14px; font-size: 13px; font-weight: 700; line-height: 32px;
	border-radius: 99px; border: 2px solid var(--accent);
	cursor: pointer; background: transparent; transition: all 0.2s;
	white-space: nowrap;
}
.follow-btn-m { height: auto; line-height: normal; padding: 5px 12px; margin: 0; }
.follow:hover { background-color: var(--accent-soft); }
.following { background: var(--accent); color: white; border-color: var(--accent); }
.following:hover { background-color: var(--accent2); border-color: var(--accent2); color: white; }
.home-follow { color: var(--muted); position: relative; }
.home-follow-count { color: var(--text); font-weight: 600; z-index: 50; }
.users-count { z-index: 80; }
.count-following-i, .count-followers-i { cursor: pointer; }

/* ──────────────────────────────────────────────
   TWEETS (carte de post, réutilisée sur toutes les pages)
   ────────────────────────────────────────────── */
#mine .box-tweet {
	margin-top: 0;
	margin-left: 0;
	transition: 0.2s; cursor: pointer;
	border-bottom: 1px solid var(--border);
}
#mine .box-tweet:hover { background-color: var(--surface); }
#mine .box-comment {
	margin-top: 5px; margin-left: 0;
	transition: 0.2s; cursor: pointer;
	border-bottom: 1px solid var(--border);
}
#mine .box-reply {
	margin-top: 5px; margin-left: 0;
	transition: 0.2s; cursor: pointer;
}
#mine .box-comment:hover, #mine .box-reply:hover { background-color: var(--surface); }

#mine .img-user-tweet {
	height: 46px; width: 46px; border-radius: 50%;
	border: 2px solid var(--border); object-fit: cover;
}
#mine .grid-tweet {
	display: grid; grid-template-columns: 56px 1fr;
	padding: 14px 16px; gap: 10px;
}
#mine .username-twitter { color: var(--muted); font-size: 14px; }
.tweet-name { margin-top: 0; font-size: 15px; font-weight: 700; }

#mine .mention-name {
	color: var(--accent);
	font-weight: 600;
}

#mine .img-post-tweet {
	height: auto; max-height: 400px; width: 100%; max-width: 507px;
	object-fit: cover; border-radius: var(--radius);
	border: 1px solid var(--border); display: block; margin-top: 10px;
}
#mine .img-post-retweet {
	height: auto; max-height: 350px; width: 100%; max-width: 450px;
	object-fit: cover; border-radius: var(--radius);
}
#mine .img-upload-tmp {
	height: 250px; width: auto; max-width: 100%;
	object-fit: contain; border-radius: var(--radius);
	margin-left: 30px; display: block;
}
#mine .upload-delete {
	top: 20px; right: 70px; color: var(--accent2);
	font-size: 22px; font-weight: 800; z-index: 23; cursor: pointer;
}
.upload-photo { display: none; }
#mine .mt-post-tweet { margin-top: 6px; }

.hash-tweet { color: var(--accent); font-weight: 500; position: relative; z-index: 40; }
.comment-post { border-radius: 15px; border: 2px solid var(--border); color: var(--text); text-decoration: none; }
.comment-post:hover { color: var(--text); background-color: var(--surface); text-decoration: none; transition: .2s; }
.arrow-style { color: var(--accent); transition: 0.3s; padding: 10px; }
.arrow-style:hover { border-radius: 50%; background-color: var(--accent-soft); }

/* Réactions (like / retweet / commentaire) */
#mine .grid-reactions {
	display: grid; grid-template-columns: 25% 25% 25% 25%;
	position: relative; z-index: 20; padding: 0 16px 8px;
}
#mine .grid-box-reaction { display: flex; align-items: center; gap: 4px; padding-top: 8px; }
#mine .grid-box-reaction-rep {
	display: grid; grid-template-columns: 30% 10%; padding-top: 4px; font-size: 15px;
}
#mine .hover-reaction {
	padding: 5px 0; height: 38px; border-radius: 50%; text-align: center; padding-top: 5px;
}
#mine .hover-reaction-rep { height: 20px; border-radius: 50%; text-align: center; }
#mine .hover-reaction-comment:hover,
#mine .hover-reaction-retweet:hover,
#mine .hover-reaction-like:hover {
	background-color: transparent; color: var(--accent); cursor: pointer;
}
#mine .unlike-btn { color: var(--accent2); }
#mine .mt-counter { margin-left: 2px; }
#mine .retweeted { color: var(--green); }
.retweed-name { font-weight: 700; font-size: 13px; color: var(--muted); margin-left: 56px; }
.retweet-name-i { font-size: 17px; margin-right: 5px; }

/* Menu déroulant "options" d'un tweet (supprimer, épingler...) */
#mine .retweet-div {
	width: 150px; background-color: var(--bg-elevated); border-radius: var(--radius);
	position: absolute; z-index: 100;
	box-shadow: 0 4px 20px rgba(0,0,0,0.12);
	border: 1px solid var(--border); display: inline-block; right: 55%;
}
#mine .retweet-div li { border-bottom: 1px solid var(--border); padding: 10px; color: var(--text); font-size: 14px; }
#mine .retweet-div .icon { text-align: left; color: var(--muted); width: 20%; float: left; }
#mine .retweet-div .option-text { display: inline-block; width: 80%; text-align: center; }
#mine .retweet-div li:hover { background-color: var(--surface); border-radius: var(--radius); }
#mine .retweet-div a:hover { text-decoration: none; }

/* Toggle "artwork" (champs conditionnels) */
.artwork-toggle {
	display: flex; align-items: center; gap: 8px; padding: 8px 16px;
	cursor: pointer; color: var(--accent); font-size: 14px; font-weight: 600;
}
.artwork-fields { display: none; padding: 10px 16px; background: var(--surface); border-top: 1px solid var(--border); }
.artwork-fields.visible { display: block; }
.artwork-fields select {
	width: 100%; border: 1px solid var(--border); border-radius: 8px;
	padding: 8px 12px; font-size: 14px; margin-bottom: 8px;
	background: white; color: var(--text); font-family: 'DM Sans', sans-serif; outline: none;
}
.artwork-fields select:focus { border-color: var(--accent); }

/* Contenu image floutée (NSFW) */
.nsfw-wrapper {
	position: relative;
	display: inline-block;
	border-radius: var(--radius);
	overflow: hidden;
	isolation: isolate;
}
.nsfw-blurred {
	display: block;
	filter: blur(25px);
	transform: scale(1.08);
	clip-path: inset(0 round var(--radius));
}
.nsfw-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: rgba(108,99,255,0.3);
	color: white;
	cursor: pointer;
	gap: 8px;
	font-size: 14px;
	font-weight: 700;
	transition: background 0.18s;
	border-radius: var(--radius);
}
.nsfw-overlay i { font-size: 34px; }
.nsfw-overlay:hover { background: rgba(0,0,0,0.62); }

#whathappen .format-btn,
#whathappen .toggle-btn {
	background: var(--surface2);
	border: none;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	padding: 0;
	margin: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	vertical-align: middle;
	transition: background 0.15s, opacity 0.15s;
	flex-shrink: 0;
	line-height: 1;
}
#whathappen .format-btn:hover,
#whathappen .toggle-btn:hover {
	background: var(--accent);
}
#whathappen .format-btn:hover i,
#whathappen .toggle-btn:hover i {
	color: white;
}
#whathappen .format-btn::-moz-focus-inner,
#whathappen .toggle-btn::-moz-focus-inner {
	border: 0;
	padding: 0;
}
.toolbar-sep {
	display: inline-block;
	width: 1px;
	height: 18px;
	background: var(--border);
	margin: 0 4px;
	vertical-align: middle;
}

.bottom-container > input { display: none; }
.bottom-container i { cursor: pointer; }
.unclick { pointer-events: none; }

/* ──────────────────────────────────────────────
   POPUPS (retweet / liste d'utilisateurs)
   ────────────────────────────────────────────── */
.wrap5 {
	background-color: rgba(26,26,46,0.50);
	position: fixed; width: 100%; height: 100%;
	top: 0; left: 0; z-index: 10000; display: block;
}
.retweet-popup-body-wrap {
	width: 580px; height: auto; margin: 0 auto; top: 13%;
	position: relative; background: var(--bg-elevated);
	border-radius: var(--radius); border: 1px solid var(--border);
	overflow: auto; max-height: 600px;
	box-shadow: 0 16px 40px rgba(108,99,255,0.15);
}
.popup-users { width: 520px; min-height: 350px; max-height: 500px; }
.retweet-popup-heading h3 {
	font-family: 'Syne', sans-serif; font-weight: 700; font-size: 16px; color: var(--text);
}
.retweet-popup-heading { text-align: center; padding: 12px; border-bottom: 1px solid var(--border); }
.users { text-align: left; margin-left: 10px; }
.users h3 { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 17px; position: relative; top: 10px; }
.retweet-popup-heading button { border: none; background: none; margin: 0; padding: 0; cursor: pointer; }
.retweet-popup-heading span {
	float: right; position: relative; top: -18px; right: 7px; font-size: 14px; cursor: pointer;
}
.retweet-popup-heading span i { color: var(--muted); }
.retweet-popup-comment-wrap { width: 95%; margin: 10px auto; overflow: hidden; }
.retweet-popup-comment-head { overflow: hidden; float: left; }
.retweet-popup-comment-head img { width: 45px; height: 45px; border-radius: 8px; }
.retweet-popup-comment-headline { float: left; }
.retweet-popup-comment-headline a { color: var(--text); text-decoration: none; font-weight: 700; }
.retweet-popup-comment-headline span { color: var(--muted); font-size: 12px; }
.retweet-popup-comment-body { float: left; overflow: hidden; color: var(--text); font-size: 14px; }
.retweet-popup-comment-right-wrap { width: 90%; overflow: hidden; float: left; margin: 0 0 0 5px; }
.retweet-popup-footer-right { float: right; }
.retweet-popup-footer-right button[type="submit"] {
	background: var(--accent); padding: 8px 16px; border: none;
	color: white; font-family: 'Syne', sans-serif; font-weight: 700;
	margin: 10px; border-radius: var(--radius); cursor: pointer; transition: opacity 0.18s;
}
.retweet-popup-footer-right button[type="submit"]:hover { opacity: 0.85; }
.retweet-popup-footer-right button i { margin: 0 3px 0 0; font-size: 18px; position: relative; top: 1px; }

/* État "vide" générique (aucun tweet, aucune notification...) */
.feed-empty { text-align: center; padding: 64px 24px; color: var(--muted); }
.feed-empty p:first-child {
	font-family: 'Syne', sans-serif; font-size: 20px; font-weight: 700;
	color: var(--text); margin-bottom: 8px;
}
.feed-empty p:last-child { font-size: 15px; }

/* ──────────────────────────────────────────────
   SCROLLBAR
   ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ──────────────────────────────────────────────
   RESPONSIVE
   ────────────────────────────────────────────── */
@media only screen and (max-width: 800px) {
	.wrapper-left { display: none !important; }
	.wrapper-right { display: none !important; }
	#mine { display: block !important; padding: 0 !important; }
	#mine .grid-posts {
		display: block !important;
		width: 100% !important;
		margin-left: 0 !important;
		grid-template-columns: 1fr !important;
	}
	#mine .border-right { width: 100% !important; border-right: none !important; }
}

@media only screen and (max-width: 1200px) and (min-width: 801px) {
	html { font-size: 15px; }
	.wrapper-right { width: 260px !important; }
	#mine .wrapper-left .button-twittear { display: none; }
	#mine .wrapper-left .sidebar-left { width: 56px !important; padding: 12px 8px; }
	#mine .wrapper-left .grid-sidebar .wrapper-left-elements { display: none; }
	#mine .grid-posts {
		grid-template-columns: 1fr 260px;
		margin-left: 56px;
		width: calc(100% - 56px);
	}
	#mine .box-tweet { margin-left: 0; }
	#mine .img-post-retweet { height: 200px; width: 320px; }
	#mine .img-user-tweet { height: 38px; width: 38px; }
	#mine .box-user { display: none; }
	.retweet-popup-body-wrap { width: 95%; }
	.popup-users { width: 100%; }
	#mine .img-upload-tmp { height: 160px; margin-left: 30px; }
	#mine .upload-delete { top: 15px; right: 40px; }
	#mine .img-share { height: 42px; width: 42px; }
	.notify-count { top: -6px; right: -10px; }
}

@media screen and (max-width: 350px) {
	html { font-size: 10px; }
	#mine .img-post-tweet { height: 110px; width: 100%; }
	#mine .img-post-retweet { height: 110px; width: 240px; }
	#mine .img-user-tweet { height: 20px; width: 20px; }
	#mine .username-twitter { font-size: 10px; }
}


.inline-comment-box { overflow: hidden; }
.inline-comment-form { padding: 10px 0 4px; border-top: 1px solid var(--border); margin-top: 8px; }
.inline-comment-input textarea {
    width: 100%; border: 1px solid var(--border); border-radius: 10px;
    padding: 9px 12px; font-size: 14px; box-sizing: border-box;
    background: var(--surface); color: var(--text);
    font-family: 'DM Sans', sans-serif;
    resize: none; overflow: hidden;
    min-height: 40px; line-height: 1.4;
}
.inline-comment-input textarea:focus {
    outline: none;
    border-color: var(--accent);
}
.inline-comment-footer { display: flex; justify-content: flex-end; margin-top: 8px; }
.inline-comment-footer button {
    background: var(--accent); color: white; border: none; border-radius: 99px;
    padding: 7px 18px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.inline-comment-box {
    position: relative;
    z-index: 5;
}
#mine .grid-tweet > .inline-comment-box {
    grid-column: 1 / -1;
}

/* Hiérarchie de taille : post > commentaire > réponse */
#mine .box-comment .grid-tweet strong { font-size: 15px; }
#mine .box-comment .grid-tweet p { font-size: 14px; }
#mine .box-comment .img-user-tweet { height: 40px; width: 40px; }

#mine .box-reply .grid-tweet strong { font-size: 14px; }
#mine .box-reply .grid-tweet p { font-size: 13px; }
#mine .box-reply .img-user-tweet { height: 34px; width: 34px; }

/* Badge "auteur.rice du post" */
.post-author-badge {
    font-size: 11px; font-weight: 700; color: var(--accent);
    background: var(--accent-soft); padding: 2px 6px; border-radius: 99px;
    margin-left: 4px;
}

/* Lien texte "Répondre" pour répondre à une réponse précise */
.reply-to-reply-text {
    display: inline-block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--muted);
    font-weight: 600;
    cursor: pointer;
}
.reply-to-reply-text:hover { color: var(--accent); }

/* Petit rappel "Réponse à @X" dans le formulaire inline */
.reply-target-label {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 6px;
}

/* Fix : bordure manquante entre la dernière réponse et le commentaire suivant */
#mine .box-reply { border-bottom: 1px solid var(--border); }

/* Réponses masquées par défaut, affichées au clic sur le compteur */
.replies-list { display: none; }
.replies-toggle { cursor: pointer; }
/* Aligner la largeur de colonne de l'avatar sur sa taille réelle,
   pour garder un espacement identique avatar → texte partout */
#mine .box-comment .grid-tweet { grid-template-columns: 40px 1fr; }
#mine .box-reply .grid-tweet { grid-template-columns: 34px 1fr; }
#mine .tweet-links {
	white-space: pre-wrap;
	word-break: break-word;
}