/**
 * Stories ESTAC — anneau sur avatar, visionneuse plein écran, fenêtre de
 * création. Les couleurs d'accent/carte reprennent les variables CSS de
 * Zeina (--color-primary, --color-secondary) pour rester cohérent avec la
 * couleur configurée en ACP > Zeina ; seul l'anneau reste en or fixe (#AF8B1B),
 * couleur demandée explicitement, indépendante du thème.
 */

:root {
	--story-gold: 175, 139, 27;
	--story-gold-light: 232, 197, 103;
}

@property --story-ring-angle {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}

/* ---------------- Anneau sur avatar (posts + header) ---------------- */

/*
 * Anneau "inside" : dessiné en superposition (::after, pleine taille du
 * wrapper) et découpé en anneau via mask-composite exclude — jamais de
 * calque de remplissage entre l'avatar et le dégradé, donc jamais de liseré
 * blanc, et un seul border-radius (celui du wrapper, hérité par le masque)
 * pour l'anneau ET l'avatar : plus de léger décalage d'angle possible entre
 * deux rayons différents comme avec l'ancienne technique à calque de "gap".
 * L'anneau mord donc légèrement sur les derniers pixels de l'avatar plutôt
 * que d'agrandir la zone occupée — comportement volontaire ("bordure inside").
 */
.story-ring {
	position: relative;
	display: inline-flex;
	cursor: pointer;
	border-radius: 8px; /* = .rounded-lg de Zeina (0.5rem), avatar large des posts */
}
.story-ring:has(.rounded-full) {
	border-radius: 50%; /* avatar compact / header, toujours circulaire */
}
.story-ring::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 3px;
	pointer-events: none;
	--story-ring-angle: 0deg;
	background: conic-gradient(from var(--story-ring-angle), rgb(var(--story-gold)), rgb(var(--story-gold-light)), rgb(var(--story-gold)), rgb(var(--story-gold-light)), rgb(var(--story-gold)));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	animation: story-ring-shimmer 3.5s linear infinite, story-ring-pulse 2.6s ease-in-out infinite;
}

@keyframes story-ring-shimmer {
	to { --story-ring-angle: 360deg; }
}
@keyframes story-ring-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(var(--story-gold), .35); }
	50% { box-shadow: 0 0 0 4px rgba(var(--story-gold), 0); }
}
@media (prefers-reduced-motion: reduce) {
	.story-ring::after { animation: none; }
}

/* Story déjà vue mais toujours active : anneau statique gris, pas de dégradé/animation. */
.story-ring.story-ring-seen::after {
	background: #9ca3af;
	animation: none;
}

/* Anneau du header : hors état actif, on revient à un simple cerclage discret. */
.story-ring-navbar:not(.has-story)::after {
	background: none;
	animation: none;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .25);
}

.story-badge-add {
	position: absolute;
	right: -2px;
	bottom: -2px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: rgb(var(--color-primary, 37, 99, 235));
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #0a1526;
	pointer-events: none;
}
.story-badge-add[hidden] {
	display: none;
}

/* Badge "+" sur son propre avatar dans ses posts (pas de story active) : fond
   clair/sombre du thème plutôt que la navbar sombre fixe, cf. .story-badge-add.
   Repositionné en haut à droite (au lieu de bas à droite, l'emplacement par
   défaut hérité de .story-badge-add) : Zeina affiche déjà un point vert de
   présence en ligne à cet endroit précis sur l'avatar compact d'un post
   (.author.online .author-img-sm::after) — les deux se superposaient sinon. */
.story-badge-add-post {
	top: -2px;
	bottom: auto;
	border-color: #fff;
}
:is(.dark .story-badge-add-post) {
	border-color: #0f172a;
}

/* Cerclage discret (pas d'anneau or) sur son propre avatar sans story, dans les posts. */
.story-ring-self-empty::after {
	background: none;
	animation: none;
	padding: 0;
	border: 1px dashed rgba(100, 116, 139, .4);
}

.story-dd-trigger {
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	cursor: pointer;
	font: inherit;
	color: inherit;
}

/* ---------------- Visionneuse plein écran ---------------- */

.story-veil {
	position: fixed;
	inset: 0;
	background: rgba(4, 7, 14, .82);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 10000;
	padding: 24px;
}
.story-veil.open {
	display: flex;
}
.story-wrap {
	position: relative;
}
.story-card {
	position: relative;
	width: 380px;
	max-width: calc(100vw - 32px);
	height: 700px;
	max-height: 92vh;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 30px 70px -15px rgba(0, 0, 0, .6);
	font-family: inherit;
}
/* Message "réservé aux membres" affiché aux invités à la place de la story elle-même. */
.story-gate {
	position: relative;
	width: 320px;
	max-width: calc(100vw - 32px);
	padding: 40px 28px 32px;
	border-radius: 20px;
	background: #151c2c;
	color: #fff;
	text-align: center;
	box-shadow: 0 30px 70px -15px rgba(0, 0, 0, .6);
	display: flex;
	flex-direction: column;
	align-items: center;
}
/* Une règle d'auteur qui fixe `display` prime toujours sur la règle par défaut
   du navigateur pour [hidden], quel que soit l'attribut — sans cette ligne,
   .story-gate restait visible en permanence, empilé avec la story réelle. */
.story-gate[hidden] {
	display: none;
}
.story-gate svg {
	color: rgb(var(--story-gold-light));
	margin-bottom: 14px;
}
.story-gate h3 {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 700;
}
.story-gate p {
	margin: 0 0 22px;
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .7);
}
.story-gate-actions {
	display: flex;
	gap: 10px;
	width: 100%;
}
.story-gate-btn {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 9px 12px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}
.story-gate-btn-primary {
	background: rgb(var(--story-gold));
	color: #1a1400;
}
.story-gate-btn-ghost {
	background: rgba(255, 255, 255, .1);
	color: #fff;
}
.story-gate-close {
	position: absolute;
	top: 10px;
	right: 10px;
}

.story-bg-photo,
.story-bg-texte {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}
.story-bg-photo {
	background-color: #111;
}
.story-bg-texte::after {
	content: '';
	position: absolute;
	inset: 0;
	opacity: .18;
	background-image: radial-gradient(rgba(255, 255, 255, .9) 1.5px, transparent 1.5px);
	background-size: 18px 18px;
}
.story-card[data-variant="texte"] .story-bg-photo,
.story-card[data-variant="photo"] .story-bg-texte {
	display: none;
}
.story-tmpl-bg-1 { background: linear-gradient(155deg, rgb(var(--story-gold)) 0%, #7a611a 55%, #2a2210 100%); }
.story-tmpl-bg-2 { background: linear-gradient(155deg, #1e293b 0%, #0f172a 100%); }
.story-tmpl-bg-3 { background: linear-gradient(155deg, #faf6ec 0%, #eef1f0 100%); }
.story-tmpl-bg-4 { background: linear-gradient(155deg, #1e40af 0%, #38bdf8 100%); }
.story-card[data-tmpl="3"] .story-big-text {
	color: #1e3a5f;
	text-shadow: none;
}

.story-scrim-bottom {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 40%;
	background: linear-gradient(to top, rgba(0, 0, 0, .65), transparent);
}

.story-progress {
	position: absolute;
	top: 12px;
	left: 12px;
	right: 12px;
	display: flex;
	gap: 4px;
	z-index: 3;
}
.story-progress .seg {
	flex: 1;
	height: 3px;
	border-radius: 2px;
	background: rgba(255, 255, 255, .3);
	overflow: hidden;
}
.story-progress .seg > span {
	display: block;
	height: 100%;
	background: #fff;
}

.story-head {
	position: absolute;
	top: 24px;
	left: 12px;
	right: 12px;
	display: flex;
	align-items: center;
	gap: 10px;
	z-index: 3;
}
.story-head-avatar {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	overflow: hidden;
	border: 1.5px solid rgb(var(--story-gold-light));
	flex-shrink: 0;
}
.story-head-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.story-head-who {
	color: #fff;
	min-width: 0;
}
.story-head-name {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.story-head-time {
	font-size: 11px;
	color: rgba(255, 255, 255, .75);
}
.story-head-spacer {
	flex: 1;
}
.story-head-btn {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: rgba(255, 255, 255, .14);
	flex-shrink: 0;
}
/* cf. .story-gate[hidden] ci-dessus : même piège, storyDeleteBtn est caché/montré
   via l'attribut hidden (visible seulement sur sa propre story). */
.story-head-btn[hidden] {
	display: none;
}
.story-head-btn:hover {
	background: rgba(255, 255, 255, .24);
}

.story-tap {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 30%;
	background: none;
	border: none;
	cursor: pointer;
	z-index: 2;
}
.story-tap-l { left: 0; }
.story-tap-r { right: 0; }

.story-content {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0 28px;
}
.story-card[data-variant="texte"] .story-caption,
.story-card[data-variant="photo"] .story-big-text {
	display: none;
}
.story-caption {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 20px;
	z-index: 3;
	color: #fff;
	font-size: 13.5px;
	line-height: 1.4;
	text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
	text-align: left;
}
.story-big-text {
	color: #fff;
	font-size: 30px;
	font-weight: 800;
	line-height: 1.25;
	text-shadow: 0 2px 10px rgba(0, 0, 0, .25);
	word-break: break-word;
}

/* ---------------- Fenêtre de création ---------------- */

.story-cveil {
	position: fixed;
	inset: 0;
	background: rgba(4, 7, 14, .6);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 10000;
	padding: 24px;
}
.story-cveil.open {
	display: flex;
}
.story-modal {
	width: 420px;
	max-width: 100%;
	max-height: 92vh;
	overflow: auto;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 30px 70px -15px rgba(0, 0, 0, .4);
	font-family: inherit;
	color: #0f172a;
}
:is(.dark .story-modal) {
	background: #0f172a;
	color: #fff;
}

.story-modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid #e5e7eb;
}
:is(.dark .story-modal-head) {
	border-color: rgba(2, 6, 23, .4);
}
.story-modal-head h3 {
	font-size: 14.5px;
	font-weight: 700;
	margin: 0;
}
.story-modal-head button {
	border: none;
	background: none;
	cursor: pointer;
	color: #64748b;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.story-modal-head button:hover {
	background: rgba(100, 116, 139, .12);
}
:is(.dark .story-modal-head button) {
	color: rgb(var(--story-gold-light));
}

.story-tabs {
	display: flex;
	gap: 4px;
	padding: 14px 20px 0;
}
.story-tabs button {
	flex: 1;
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	color: #64748b;
	background: #f4f6f9;
	border: 1px solid #e5e7eb;
	border-bottom: none;
	cursor: pointer;
	padding: 9px;
	border-radius: 8px 8px 0 0;
}
:is(.dark .story-tabs button) {
	background: #060b16;
	border-color: rgba(2, 6, 23, .4);
	color: #94a3b8;
}
.story-tabs button.active {
	color: rgb(var(--color-primary, 37, 99, 235));
	background: #fff;
	border-bottom: 1px solid #fff;
	margin-bottom: -1px;
}
:is(.dark .story-tabs button.active) {
	background: #0f172a;
	border-bottom-color: #0f172a;
}

.story-tab-body {
	padding: 18px 20px 20px;
	min-height: 400px;
	box-sizing: border-box;
}
.story-pane {
	display: none;
}
.story-pane.active {
	display: block;
}

.story-source-row {
	display: flex;
	gap: 10px;
}
.story-src-btn {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 22px 10px;
	border: 1.5px dashed #e5e7eb;
	border-radius: 12px;
	background: #f4f6f9;
	color: inherit;
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	text-align: center;
}
:is(.dark .story-src-btn) {
	border-color: rgba(2, 6, 23, .4);
	background: #060b16;
}
.story-src-btn svg {
	color: rgb(var(--color-primary, 37, 99, 235));
}
:is(.dark .story-src-btn svg) {
	color: rgb(var(--story-gold-light));
}
.story-src-btn:hover {
	border-color: rgb(var(--color-primary, 37, 99, 235));
}

.story-crop-frame {
	position: relative;
	width: 100%;
	max-width: 150px;
	aspect-ratio: 9 / 16;
	margin: 0 auto;
	border-radius: 14px;
	overflow: hidden;
	background: #0b1120;
	cursor: grab;
	touch-action: none;
}
.story-crop-frame.dragging {
	cursor: grabbing;
}
.story-crop-frame img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;
}
.story-crop-hint {
	position: absolute;
	left: 50%;
	bottom: 8px;
	transform: translateX(-50%);
	z-index: 2;
	font-size: 10px;
	color: rgba(255, 255, 255, .8);
	background: rgba(0, 0, 0, .4);
	border-radius: 999px;
	padding: 3px 9px;
	pointer-events: none;
	white-space: nowrap;
}
.story-zoom-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 12px auto 0;
	max-width: 150px;
}
.story-zoom-row svg {
	color: #64748b;
	flex-shrink: 0;
}
:is(.dark .story-zoom-row svg) {
	color: rgb(var(--story-gold-light));
}
.story-zoom-row input[type="range"] {
	flex: 1;
	accent-color: rgb(var(--color-primary, 37, 99, 235));
}
.story-link-btn {
	display: block;
	margin: 10px auto 0;
	background: none;
	border: none;
	color: rgb(var(--color-primary, 37, 99, 235));
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}

.story-field-label {
	font-size: 11.5px;
	font-weight: 600;
	color: #64748b;
	margin: 14px 0 6px;
	text-transform: uppercase;
	letter-spacing: .03em;
}
:is(.dark .story-field-label) {
	color: #fff;
}
.story-field-input {
	width: 100%;
	font: inherit;
	font-size: 13px;
	color: inherit;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 9px 11px;
	background: #fff;
	resize: none;
	box-sizing: border-box;
}
:is(.dark .story-field-input) {
	border-color: rgba(2, 6, 23, .4);
	background: #060b16;
}
.story-field-input:focus-visible {
	outline: 2px solid rgb(var(--color-primary, 37, 99, 235));
	outline-offset: 1px;
}
.story-char-count {
	text-align: right;
	font-size: 10.5px;
	color: #64748b;
	margin-top: 4px;
}
:is(.dark .story-char-count) {
	color: #fff;
}

.story-tmpl-row {
	display: flex;
	gap: 8px;
	margin-bottom: 14px;
}
.story-tmpl-swatch {
	width: 40px;
	height: 56px;
	border-radius: 8px;
	cursor: pointer;
	border: 2px solid transparent;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}
.story-tmpl-swatch.active {
	border-color: rgb(var(--color-primary, 37, 99, 235));
}
.story-tmpl-1 { background: linear-gradient(155deg, rgb(var(--story-gold)) 0%, #7a611a 55%, #2a2210 100%); }
.story-tmpl-2 { background: linear-gradient(155deg, #1e293b 0%, #0f172a 100%); }
.story-tmpl-3 { background: linear-gradient(155deg, #faf6ec 0%, #eef1f0 100%); }
.story-tmpl-4 { background: linear-gradient(155deg, #1e40af 0%, #38bdf8 100%); }

.story-txt-preview {
	height: 160px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 16px;
	color: #fff;
	font-weight: 800;
	font-size: 19px;
	line-height: 1.3;
	text-shadow: 0 2px 8px rgba(0, 0, 0, .3);
	word-break: break-word;
}
.story-txt-preview.story-tmpl-3 {
	color: #1e3a5f;
	text-shadow: none;
}

.story-modal-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 20px 20px;
}
.story-note {
	font-size: 11px;
	color: #64748b;
}
:is(.dark .story-note) {
	color: #fff;
}
.story-actions {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
}
.story-btn {
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	border-radius: 8px;
	padding: 7px 14px;
	border: 1px solid transparent;
}
.story-btn-primary {
	background: rgb(var(--color-primary, 37, 99, 235));
	color: #fff;
}
.story-btn-primary:hover {
	filter: brightness(0.92);
}
.story-btn-ghost {
	background: none;
	color: #64748b;
	border-color: #e5e7eb;
}
:is(.dark .story-btn-ghost) {
	border-color: rgba(2, 6, 23, .4);
	color: #fff;
}
.story-btn-ghost:hover {
	color: inherit;
}