/* Animation für die Warteschlange im Bildschirmschoner */
@keyframes fadeInSlideUp {
	from {
		opacity: 0;
		transform: translateY(15px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Wendet die Animation auf die Listenelemente an */
#attract-queue-list li {
	opacity: 0; /* Startet unsichtbar */
	animation: fadeInSlideUp 0.6s ease-out forwards;
}

/* === NEU: CSS für den Fortschrittsbalken mit runden Enden === */

/* 1. Der äußere Container (die "Schiene") */
#progress-container {
	display: none; /* Wird per JS eingeblendet */
	width: 80%;
	max-width: 600px;
	height: 4px;
	background-color: rgba(255, 255, 255, 0.05); /* Leicht transparent */
	border-radius: 99px; /* Macht es zu einer "Pille" */
	margin-top: 1rem;
}

/* 2. Der eigentliche, sichtbare Balken innen */
#progress-bar {
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.2); /* Heller und sichtbarer */
	border-radius: 99px; /* Ebenfalls eine "Pille" */
	transform-origin: center; /* Wichtig: Skalierung passiert von der Mitte aus */
	transform: scaleX(1); /* Startet bei voller Breite */
}

/* Fügt eine Verzögerung für jedes nachfolgende Element hinzu */
#attract-queue-list li:nth-child(2) {
	animation-delay: 0.15s;
}
#attract-queue-list li:nth-child(3) {
	animation-delay: 0.3s;
}

	.container {
		max-width: none !important; /* Hebt die Breitenbegrenzung auf */
		padding-left: 2rem !important; /* Sorgt für einen kleinen Rand links */
		padding-right: 2rem !important; /* Sorgt für einen kleinen Rand rechts */
	}

	main {
		background-color: transparent;
	}

	html {
		font-size: 150%;
	}

	html, body {
		height: 100%;
	}
	body { 
		padding-bottom: 5rem;
		transition: background-color 0.5s ease;
		-webkit-user-select: none; /* Für Chrome, Safari, Opera */
    -moz-user-select: none;    /* Für Firefox */
    -ms-user-select: none;     /* Für Internet Explorer, Edge */
    user-select: none;         /* Standard-Eigenschaft */
	}
	.message { 
		margin-top: 0.5rem; 
		padding: 1rem; 
		border-radius: var(--border-radius); 
		border: 1px solid transparent;
		position: relative;
		overflow: hidden;
		padding-bottom: 1.5rem;
	}
	.message-timer-bar {
		position: absolute;
		bottom: 0;
		left: 0;
		height: 5px;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.2);
	}
	.progress-fill {
		height: 100%;
		width: 100%;
		background-color: var(--pico-primary-inverse);
		opacity: 0.6;
		animation: countdown 20s linear forwards;
		border-radius: 0 2px 2px 0;
	}
	@keyframes countdown {
		from { width: 100%; }
		to { width: 0%; }
	}

	[data-theme="light"] .success { background-color: #d4edda; color: #155724; border-color: #c3e6cb; }
	[data-theme="light"] .error { background-color: #f8d7da; color: #721c24; border-color: #f5c6cb; }
	[data-theme="light"] .rejected { background-color: #fff3cd; color: #856404; border-color: #ffeeba; }
	[data-theme="dark"] .rejected { background-color: rgba(255, 193, 7, 0.2); color: #fff3cd; border-color: #856404; }
	.grid { grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2rem;}
	.status-hinzugefügt { color: var(--pico-color-green-400); }
	.status-abgelehnt { color: var(--pico-color-amber-400); }
	#queue-list, #history-list, #attract-queue-list { list-style-type: none; padding-left: 0; }
	#queue-list li, #history-list li { margin-bottom: 0.5rem; }
	#currently-playing { font-style: italic; color: var(--pico-color-green-300); }

	/* === NEUER/GEÄNDERTER CSS-STIL FÜR BENUTZERWÜNSCHE === */
	#queue-list .user-wish {
		border-left: 3px solid #FFA500;
		padding-left: 0.75rem;
		font-weight: bold;
	}

	#dj-container {
		margin: 2rem auto;
		width: 100px;
		height: 100px;
		position: relative;
		transition: transform 0.8s ease, margin 0.8s ease;
	}
	.dj-face {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background-color: var(--pico-color-indigo-400);
		position: relative;
		overflow: visible;
		transition: background-color 0.5s ease;
	}
	.eye {
		width: 15px;
		height: 20px;
		background-color: var(--pico-primary-inverse);
		border-radius: 50%;
		position: absolute;
		top: 35%;
		animation: idle-eyes 30s infinite ease-in-out;
		transition: transform 0.4s ease-out;
	}
	.eye.left { left: 25%; }
	.eye.right { right: 25%; }
	.mouth {
		width: 40px;
		height: 20px;
		border: 5px solid var(--pico-primary-inverse);
		border-top-color: transparent;
		border-left-color: transparent;
		border-right-color: transparent;
		border-radius: 0 0 40px 40px;
		position: absolute;
		bottom: 20%;
		left: 50%;
		transform: translateX(-50%);
		transition: all 0.5s ease;
		animation: idle-mouth 30s infinite ease-in-out;
	}
	.question-mark, .thumbs-up, .waving-hand, .sleep-z {
		position: absolute;
		font-size: 2.5rem;
		opacity: 0;
		transform: scale(0.5);
		transition: all 0.4s ease-out;
		pointer-events: none;
	}
	.question-mark { top: -10px; right: -20px; font-size: 3rem; }
	.thumbs-up { bottom: -5px; right: -45px; transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28); }
	.waving-hand { top: -10px; left: -55px; transform-origin: bottom right; }
	.sleep-z { top: -10px; right: -5px; font-size: 1.5rem; font-style: italic; color: var(--pico-color-slate-400); animation: sleep-bubble 3s infinite ease-out; }

	@keyframes idle-eyes {
		0%, 14%, 23%, 39%, 41%, 69%, 71%, 84%, 96%, 100% { transform: scaleY(1) translateX(0); }
		15% { transform: scaleY(0.1) translateX(0); }
		40% { transform: scaleY(1) translateX(-5px); }
		42% { transform: scaleY(1) translateX(5px); }
		70% { transform: scaleY(0.1) translateX(0); }
		85%, 95% { transform: scaleY(0.1) translateX(0); }
	}
	@keyframes idle-mouth {
		0%, 4%, 14%, 24%, 33%, 49%, 61%, 84%, 96%, 100% { width: 40px; height: 20px; border-width: 5px; border-radius: 0 0 40px 40px; transform: translateX(-50%); bottom: 20%; }
		5%, 13% { width: 45px; height: 25px; }
		25%, 32% { width: 15px; height: 15px; border-width: 4px; border-radius: 50%; transform: translateX(-50%); bottom: 25%; }
		28% { width: 15px; height: 15px; border-width: 4px; border-radius: 50%; transform: translateX(-50%) scale(1.2); bottom: 25%; }
		50%, 60% { width: 25px; height: 15px; border-width: 4px; border-radius: 25px; transform: translateX(-50%); bottom: 22%;}
		55% { width: 25px; height: 20px; border-width: 4px; border-radius: 20px; transform: translateX(-50%); bottom: 20%;}
		85%, 95% { width: 30px; height: 5px; border-radius: 5px; transform: translateX(-50%); bottom: 25%; }
	}
	#dj-container:not(.watching):not(.happy):not(.rejected) .waving-hand { animation: wave-hand 30s infinite ease-in-out; }
	@keyframes wave-hand {
		0%, 4%, 14%, 100% { opacity: 0; transform: scale(0.5) rotate(-30deg); }
		5% { opacity: 1; transform: scale(1) rotate(15deg); }
		7% { transform: scale(1) rotate(-10deg); }
		9% { transform: scale(1) rotate(15deg); }
		11% { transform: scale(1) rotate(-10deg); }
		13% { opacity: 1; transform: scale(1) rotate(15deg); }
	}
	#dj-container:not(.watching):not(.happy):not(.rejected) .sleep-z { animation: sleep-z-fade 30s infinite ease-in-out; }
	@keyframes sleep-z-fade {
		0%, 84%, 96%, 100% { opacity: 0; }
		85%, 95% { opacity: 1; }
	}
	@keyframes sleep-bubble {
		from { transform: translateY(0) scale(1); opacity: 1; }
		to { transform: translateY(-20px) scale(1.5); opacity: 0; }
	}

	@keyframes head-shake { 0% { transform: translateX(0); } 25% { transform: translateX(-8px); } 50% { transform: translateX(8px); } 75% { transform: translateX(-8px); } 100% { transform: translateX(0); } }
	#dj-container.watching .eye, #dj-container.watching .mouth { animation: none; }
	#dj-container.watching .eye { transform: translate(6px, -6px); }
	#dj-container.watching .mouth { width: 25px; border-radius: 0; transform: translateX(-70%) rotate(-8deg); }
	#dj-container.watching .question-mark { opacity: 1; transform: scale(1) rotate(10deg); }
	#dj-container.rejected .dj-face { animation: head-shake 0.5s ease; background-color: var(--pico-color-amber-500); }
	#dj-container.rejected .mouth, #dj-container.rejected .eye { animation: none; }
	#dj-container.rejected .mouth { border-radius: 40px 40px 0 0; transform: translateX(-50%) translateY(-15px); }
	#dj-container.happy .dj-face { background-color: var(--pico-color-green-500); }
	#dj-container.happy .mouth, #dj-container.happy .eye { animation: none; }
	#dj-container.happy .mouth { width: 50px; height: 30px; }
	#dj-container.happy .thumbs-up { opacity: 1; transform: scale(1) rotate(15deg); }
	#dj-container.watching .sleep-z, #dj-container.happy .sleep-z, #dj-container.rejected .sleep-z { animation: none; opacity: 0; }

	#attract-screen {
		opacity: 0;
		pointer-events: none;
		/*transform: translateY(100px); */
		transition: opacity 0.6s ease-in-out;
		display: flex;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		z-index: 100;
		cursor: pointer;
		padding-top: 20%;

		/* HIER DIE HINTERGRUND-REGELN EINFÜGEN */
		background: linear-gradient(-70deg, #0f172a, #2f1b4b, #4a044e, #6b113a, #7f1d1d, #7c2d12, #713f12, #3f4a1b, #064e3b, #0b4d4a, #1e1b4b);
		background-size: 400% 400%;
		animation: wave 120s ease infinite;
	}
	#main-content {
		transition: opacity 0.6s ease-in-out;
	}
	#attract-playing { font-size: 1.5rem; margin-top: 0.75rem; font-weight: bold; }
	#attract-prompt { margin-top: 2.5rem; font-size: 1.2rem; color: var(--pico-color-slate-400); animation: pulse 4s infinite ease-in-out; }
	@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
	#attract-queue { margin-top: 2rem; width: 80%; max-width: 600px; }
	#attract-queue h3 { font-size: 1rem; color: var(--pico-color-slate-300); margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 1px; }
	#attract-queue-list li { font-size: 0.9rem; color: var(--pico-color-slate-400); margin-bottom: 0.5rem; list-style-type: none; } 

	body.is-idle #main-content {
		opacity: 0;
		pointer-events: none;
	}
	body.is-idle #attract-screen {
		opacity: 1;
		pointer-events: auto;
		/* transform: translateY(0);*/ /* Setzt die Position auf 0 zurück */
	}
	body.is-idle #dj-container { 
		position: fixed;
		z-index: 101;
		top: 12%;
		left: 50%;
		transform: translateX(-50%) scale(2.5);
		margin: 0;
	}
	body.is-idle {
	}

	@keyframes wave {
		0% { background-position: 0% 50%; }
		50% { background-position: 100% 50%; }
		100% { background-position: 0% 50%; }
	}
	/* === NEUER CSS-STIL FÜR AUTOVERVOLLSTÄNDIGUNG === */
	#song-form {
		position: relative; /* Wichtig für die Positionierung der Vorschläge */
	}

	#suggestions-container {
		/* Wichtig: Horizontales Scrolling ermöglichen */
		display: flex;
		overflow-x: auto;
		padding: 0.5rem;

		/* Verhindert unschöne Scroll-Leisten auf vielen Systemen */
		-ms-overflow-style: none;  /* IE and Edge */
		scrollbar-width: none;  /* Firefox */
	}
	#suggestions-container::-webkit-scrollbar {
		display: none; /* Chrome, Safari, Opera */
	}


	.suggestion-item {
		/* Wichtig: Elemente nicht zusammenquetschen lassen */
		flex-shrink: 0; 

		width: 220px; /* Feste Breite für jede Kachel */
		margin-right: 0.75rem;
		text-align: center;
		border: 1px solid var(--pico-form-element-border-color);
		border-radius: var(--border-radius);
		padding: 0.5rem;
		cursor: pointer;
		transition: background-color 0.2s ease;
	}
	.suggestion-item:last-child {
		margin-right: 0;
	}

	.suggestion-item:hover {
		background-color: var(--pico-primary-background);
	}

	.suggestion-item img {
		width: 64px; /* Bild füllt die Kachelbreite */
		height: 64px;
		object-fit: cover;
		margin-right: 0; /* Nicht mehr nötig */
		margin-bottom: 0.5rem;
	}

	.suggestion-item-info strong {
		font-size: 0.8em;
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis; /* Lange Titel mit "..." abkürzen */
	}
	.suggestion-item-info span {
		font-size: 0.6em;
		color: var(--pico-secondary);
	}

	article > header {
		margin-bottom: 0.5rem; /* Standard ist ca. 1rem, hier halbieren wir den Abstand */
		padding-bottom: 0; /* Optional: Entfernt den Innenabstand, falls vorhanden */
	}
	#history-list details {
		line-height: var(--pico-line-height); /* Sorgt für gleichen Zeilenabstand */
	}
	#history-list summary {
		cursor: pointer;          /* Zeigt eine "klickbare" Hand als Mauszeiger */
		outline: none;            /* Entfernt den blauen Rahmen beim Anklicken */
		display: flex;    /* Verhindert, dass der Klickbereich die ganze Zeile einnimmt */
		alignt-items: center;
	}
	#history-list details[open] summary {
		margin-bottom: 0.5rem; /* Fügt einen kleinen Abstand hinzu, wenn das Detail geöffnet ist */
	}
	#history-list details .reason-box {
		font-size: 0.9em;
		opacity: 0.9;
		padding: 0.75rem;
		margin-left: 1rem; /* leichter Einzug */
		border-left: 3px solid #FFC107;
		background-color: rgba(36, 36, 36, 0.2);
	}
	/* in style.css */

/* === NEU: Stile für Skeleton Placeholders === */

.suggestion-item-placeholder {
    flex-shrink: 0;
    width: 220px;
    margin-right: 0.75rem;
    border: 1px solid var(--pico-form-element-border-color);
    border-radius: var(--border-radius);
    padding: 0.5rem;
    background-color: var(--pico-card-background-color);
}

.placeholder-img {
    width: 64px;
    height: 64px;
    margin: 0 auto 0.5rem auto; /* Zentriert das Bild */
    background-color: var(--pico-form-element-background-color);
    border-radius: var(--border-radius);
    animation: placeholder-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.placeholder-text {
    height: 0.8em;
    margin: 0.5em auto;
    background-color: var(--pico-form-element-background-color);
    border-radius: var(--border-radius);
    animation: placeholder-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.placeholder-text.short {
    width: 60%;
}

/* Die Puls-Animation für den Ladeeffekt */
@keyframes placeholder-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}