/* TJ Audio Player */
:root { --tjap-h: 76px; --tjap-accent: #e8b23a; --tjap-on-accent: #16171a; --tjap-wave: #6b6e76; --tjap-wave-played: #e8b23a; --tjap-wave-opacity: .45; }

/* Valeurs par défaut (remplacées par les réglages de l'extension) */
.tjap-playlist    { --tjap-bg: #16171a; --tjap-bg2: #1f2125; --tjap-fg: #f2f2f0; --tjap-muted: #9a9ca3; --tjap-line: #2a2c31; }
#tjap-player-root { --tjap-bg: #16171a; --tjap-bg2: #24262b; --tjap-fg: #f2f2f0; --tjap-muted: #9a9ca3; --tjap-line: #2a2c31; }
.tjap-playlist, #tjap-player-root { --tjap-hover: color-mix(in srgb, var(--tjap-fg) 6%, transparent); }

.tjap-i { width: 1em; height: 1em; fill: currentColor; display: block; }
.tjap-playlist button, #tjap-player-root button { font: inherit; }

/* ------------------------------------------------------------ */
/* Cadre de playlist                                             */
/* ------------------------------------------------------------ */
.tjap-playlist {
	margin: 1.5em 0; overflow: hidden;
	font-size: var(--tjap-fs, 16px);
	background: var(--tjap-bg); color: var(--tjap-fg);
	border: 1px solid var(--tjap-line); border-radius: 14px;
	box-shadow: 0 10px 30px -18px rgba(0,0,0,.45);
	line-height: 1.35;
}
.tjap-pl-head {
	display: flex; align-items: center; gap: .9em;
	padding: 1em 1.1em; border-bottom: 1px solid var(--tjap-line);
	background: var(--tjap-bg2);
}
.tjap-playlist .tjap-pl-cover { width: 3.5em; height: 3.5em; border-radius: 8px; object-fit: cover; flex: none; margin: 0; }
.tjap-pl-info { flex: 1; min-width: 0; }
.tjap-pl-title { font-weight: 700; font-size: 1.1em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tjap-pl-count { color: var(--tjap-muted); font-size: .82em; margin-top: 2px; font-variant-numeric: tabular-nums; }

.tjap-pl-playall {
	display: inline-flex; align-items: center; gap: .5em; flex: none;
	padding: .65em 1.15em .65em .9em; margin: 0; border: 0; border-radius: 999px; cursor: pointer;
	background: var(--tjap-accent); color: var(--tjap-on-accent);
	font-size: .88em; font-weight: 700; line-height: 1;
	transition: transform .15s ease, filter .15s ease;
}
.tjap-pl-playall:hover { filter: brightness(1.08); transform: translateY(-1px); }
.tjap-pl-playall .tjap-i { font-size: 1.15em; }

.tjap-playlist .tjap-tracks {
	list-style: none; margin: 0; padding: 6px; position: relative; box-sizing: border-box;
	overflow-y: auto; overscroll-behavior: contain;
	scrollbar-width: thin; scrollbar-color: var(--tjap-line) transparent;
}
.tjap-playlist .tjap-tracks::-webkit-scrollbar { width: 8px; }
.tjap-playlist .tjap-tracks::-webkit-scrollbar-thumb { background: var(--tjap-line); border-radius: 4px; border: 2px solid var(--tjap-bg); }
.tjap-playlist .tjap-track {
	display: grid; grid-template-columns: 2.25em 2.5em minmax(0,1fr) auto; align-items: center; gap: .75em;
	margin: 0; padding: .5em .75em .5em .5em; border-radius: 10px; cursor: pointer;
	transition: background .15s ease;
}
.tjap-playlist .tjap-track::before, .tjap-playlist .tjap-track::marker { content: none; }
.tjap-playlist .tjap-track:hover { background: var(--tjap-hover); }
.tjap-playlist .tjap-track.is-current { background: color-mix(in srgb, var(--tjap-accent) 13%, transparent); }

.tjap-track-play {
	width: 2.25em; height: 2.25em; padding: 0; margin: 0; border-radius: 50%; cursor: pointer;
	display: grid; place-items: center; font-size: 1em;
	border: 1.5px solid var(--tjap-line); background: transparent; color: var(--tjap-fg);
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.tjap-track-play .tjap-i { font-size: .94em; }
.tjap-track:hover .tjap-track-play, .tjap-track.is-current .tjap-track-play {
	background: var(--tjap-accent); border-color: var(--tjap-accent); color: var(--tjap-on-accent);
}
.tjap-track-play .tjap-i-play { margin-left: 2px; }

.tjap-track-icon {
	width: 2.5em; height: 2.5em; border-radius: 7px; overflow: hidden; flex: none;
	display: grid; place-items: center;
	background: var(--tjap-bg2); color: var(--tjap-accent);
}
.tjap-track-icon .tjap-i { font-size: 1.12em; }
.tjap-playlist .tjap-track-icon img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; border-radius: 0; }

/* Texte : ligne principale / ligne secondaire */
.tjap-track-meta { display: flex; flex-direction: column; min-width: 0; }
.tjap-track-title, .tjap-track-artist { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tjap-track-title { font-weight: 600; }
.tjap-track-artist { color: var(--tjap-muted); font-size: .85em; }
.tjap-track.is-current .tjap-track-title { color: var(--tjap-accent); }

/* Mise en avant de l'artiste (réglage) : l'artiste passe en ligne principale */
.tjap-em-artist .tjap-track:not(.no-artist) .tjap-track-artist { order: -1; color: var(--tjap-fg); font-weight: 600; font-size: 1em; }
.tjap-em-artist .tjap-track:not(.no-artist) .tjap-track-title { color: var(--tjap-muted); font-weight: 400; font-size: .85em; }
.tjap-em-artist .tjap-track.is-current:not(.no-artist) .tjap-track-artist { color: var(--tjap-accent); }
.tjap-em-artist .tjap-track.is-current:not(.no-artist) .tjap-track-title { color: var(--tjap-muted); }

.tjap-track-end { display: flex; align-items: center; gap: .6em; }
.tjap-track-dur { color: var(--tjap-muted); font-size: .85em; font-variant-numeric: tabular-nums; }

/* Petit égaliseur animé sur le morceau en cours */
.tjap-eq { display: none; height: .75em; gap: 2px; align-items: flex-end; color: var(--tjap-accent); }
.tjap-eq i { display: block; width: 3px; height: 100%; background: currentColor; border-radius: 1px; transform-origin: bottom; animation: tjap-eq 0.9s ease-in-out infinite; }
.tjap-eq i:nth-child(2) { animation-delay: -.3s; }
.tjap-eq i:nth-child(3) { animation-delay: -.6s; }
.tjap-track.is-playing .tjap-eq { display: inline-flex; }
@keyframes tjap-eq { 0%,100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }

/* Icônes play / pause */
.tjap-i-pause { display: none; }
.tjap-track.is-playing .tjap-i-play, .tjap-playlist.is-playing .tjap-pl-playall .tjap-i-play, #tjap-player-root.is-playing .tjap-play .tjap-i-play { display: none; }
.tjap-track.is-playing .tjap-i-pause, .tjap-playlist.is-playing .tjap-pl-playall .tjap-i-pause, #tjap-player-root.is-playing .tjap-play .tjap-i-pause { display: block; }

/* ------------------------------------------------------------ */
/* Lecteur fixe en bas                                          */
/* ------------------------------------------------------------ */
html.tjap-has-player body { padding-bottom: var(--tjap-h) !important; }

#tjap-player-root[hidden] { display: none !important; }
#tjap-player-root .tjap-bar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 99990;
	height: var(--tjap-h); box-sizing: border-box;
	background: color-mix(in srgb, var(--tjap-bg) 94%, transparent);
	-webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
	color: var(--tjap-fg); border-top: 1px solid var(--tjap-line);
	box-shadow: 0 -8px 30px -12px rgba(0,0,0,.35);
	font-size: 15px; line-height: 1.3;
	padding-bottom: env(safe-area-inset-bottom);
	animation: tjap-up .35s cubic-bezier(.2,.8,.2,1);
}
@keyframes tjap-up { from { transform: translateY(100%); } to { transform: none; } }

.tjap-progress { position: absolute; left: 0; right: 0; top: -6px; height: 12px; cursor: pointer; touch-action: none; outline: none; }
.tjap-progress::before, .tjap-progress-buffer, .tjap-progress-fill { content: ""; position: absolute; left: 0; top: 5px; height: 3px; transition: height .12s ease, top .12s ease; }
.tjap-progress::before { right: 0; background: var(--tjap-line); }
.tjap-progress-buffer { background: color-mix(in srgb, var(--tjap-fg) 18%, transparent); width: 0; }
.tjap-progress-fill { background: var(--tjap-accent); width: 0; }
.tjap-progress-fill::after { content: ""; position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--tjap-accent); transform: scale(0); transition: transform .12s ease; }
.tjap-progress:hover::before, .tjap-progress:hover .tjap-progress-buffer, .tjap-progress:hover .tjap-progress-fill,
.tjap-progress:focus-visible::before, .tjap-progress:focus-visible .tjap-progress-buffer, .tjap-progress:focus-visible .tjap-progress-fill { top: 4px; height: 5px; }
.tjap-progress:hover .tjap-progress-fill::after, .tjap-progress:focus-visible .tjap-progress-fill::after { transform: scale(1); }

.tjap-wave { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; opacity: var(--tjap-wave-opacity); }
#tjap-player-root.has-wave .tjap-bar { cursor: pointer; }
#tjap-player-root.has-wave .tjap-btn, #tjap-player-root.has-wave .tjap-volume { cursor: pointer; }
#tjap-player-root.has-wave .tjap-now, #tjap-player-root.has-wave .tjap-time { cursor: inherit; }
.tjap-hover-time {
	position: absolute; top: 6px; z-index: 2; transform: translateX(-50%);
	padding: 2px 6px; border-radius: 4px; font-size: 11px; line-height: 1.3; font-variant-numeric: tabular-nums;
	background: var(--tjap-fg); color: var(--tjap-bg); pointer-events: none; opacity: 0; transition: opacity .12s ease;
}
.tjap-hover-time.is-on { opacity: 1; }

.tjap-inner {
	position: relative; z-index: 1;
	height: 100%; max-width: 1400px; margin: 0 auto; padding: 0 20px;
	display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 16px;
}
.tjap-now { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tjap-now-icon { width: 46px; height: 46px; border-radius: 7px; overflow: hidden; flex: none; display: grid; place-items: center; font-size: 20px; background: var(--tjap-bg2); color: var(--tjap-accent); }
.tjap-now-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tjap-now-text { display: flex; flex-direction: column; min-width: 0; }
.tjap-now-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tjap-now-artist { color: var(--tjap-muted); font-size: .85em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tjap-player-root.tjap-em-artist:not(.no-artist) .tjap-now-artist { order: -1; color: var(--tjap-fg); font-weight: 700; font-size: 1em; }
#tjap-player-root.tjap-em-artist:not(.no-artist) .tjap-now-title { color: var(--tjap-muted); font-weight: 400; font-size: .85em; }
.tjap-empty .tjap-now-title { font-weight: 500; color: var(--tjap-muted); }

.tjap-controls { display: flex; align-items: center; gap: 8px; }
#tjap-player-root .tjap-btn {
	display: grid; place-items: center; width: 38px; height: 38px; padding: 0; margin: 0;
	border: 0; border-radius: 50%; background: transparent; color: var(--tjap-fg);
	font-size: 20px; cursor: pointer; transition: background .15s ease, color .15s ease, transform .15s ease;
	box-shadow: none; min-height: 0; line-height: 1;
}
#tjap-player-root .tjap-btn:hover:not(:disabled) { background: var(--tjap-hover); }
#tjap-player-root .tjap-btn:disabled { opacity: .35; cursor: default; }
#tjap-player-root .tjap-play { width: 46px; height: 46px; font-size: 20px; background: var(--tjap-accent); color: var(--tjap-on-accent); }
#tjap-player-root .tjap-play:hover:not(:disabled) { background: var(--tjap-accent); transform: scale(1.06); }
#tjap-player-root .tjap-play .tjap-i-play { margin-left: 2px; }
#tjap-player-root.tjap-resume .tjap-play { animation: tjap-pulse 1.6s ease-out infinite; }
@keyframes tjap-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tjap-accent) 60%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }

.tjap-right { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.tjap-time { color: var(--tjap-muted); font-size: .82em; font-variant-numeric: tabular-nums; margin-right: 8px; white-space: nowrap; }
#tjap-player-root .tjap-mute, #tjap-player-root .tjap-close { font-size: 18px; width: 34px; height: 34px; color: var(--tjap-muted); }
.tjap-vol-x { display: none; }
#tjap-player-root.is-muted .tjap-vol-waves { display: none; }
#tjap-player-root.is-muted .tjap-vol-x { display: inline; }

#tjap-player-root .tjap-volume {
	-webkit-appearance: none; appearance: none; width: 96px; height: 4px; margin: 0 6px 0 0; padding: 0;
	border: 0; border-radius: 2px; cursor: pointer; outline: none;
	background: linear-gradient(to right, var(--tjap-fg) var(--p, 100%), var(--tjap-line) var(--p, 100%));
}
#tjap-player-root .tjap-volume::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--tjap-fg); border: 0; }
#tjap-player-root .tjap-volume::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--tjap-fg); border: 0; }
#tjap-player-root .tjap-volume:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tjap-accent) 50%, transparent); }

#tjap-player-root .tjap-btn:focus-visible, .tjap-track-play:focus-visible, .tjap-pl-playall:focus-visible, .tjap-progress:focus-visible {
	outline: 2px solid var(--tjap-accent); outline-offset: 2px;
}

/* Barre de chargement entre deux pages */
#tjap-loader { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 100000; background: var(--tjap-accent); opacity: 0; pointer-events: none; }
#tjap-loader.is-loading { opacity: 1; animation: tjap-load 8s cubic-bezier(.1,.7,.2,1) forwards; }
@keyframes tjap-load { from { width: 0; } to { width: 90%; } }

/* Lecteur : s'adapte à sa propre largeur (aussi dans l'aperçu des réglages) */
#tjap-player-root .tjap-bar { container-type: inline-size; container-name: tjapbar; }
@container tjapbar (max-width: 980px) {
	#tjap-player-root .tjap-volume { display: none; }
}
@container tjapbar (max-width: 720px) {
	.tjap-inner { grid-template-columns: minmax(0,1fr) auto; padding: 0 10px 0 12px; gap: 8px; }
	.tjap-time, #tjap-player-root .tjap-mute { display: none; }
	.tjap-right { position: absolute; top: 4px; right: 4px; }
	#tjap-player-root .tjap-close { width: 26px; height: 26px; font-size: 14px; }
	.tjap-controls { margin-right: 26px; gap: 2px; }
	.tjap-now-icon { width: 40px; height: 40px; }
}

/* Mobile */
@media (max-width: 720px) {
	:root { --tjap-h: 68px; }
	.tjap-playlist .tjap-track { gap: .6em; padding: .45em .5em .45em .4em; }
	.tjap-pl-playall-label { display: none; }
	.tjap-pl-playall { padding: .7em; }
}

@media (prefers-reduced-motion: reduce) {
	#tjap-player-root .tjap-bar, .tjap-eq i, #tjap-player-root.tjap-resume .tjap-play { animation: none; }
}