/**
 * styles.css
 * Style-Konfiguration & Management
 * © 2024 ifs³ Patrik.Lori@ifs3.com
 */

/* CSS Variablen für häufig verwendete Werte */
:root {
	/* Farben */
	--primary-blue: #007bff;
	--primary-blue-hover: #0056b3;
	--primary-blue-dark: #005194;
	--danger-red: #dc3545;
	--danger-red-hover: #c82333;
	--danger-red-disabled: #e4606d;
	--success-green: #00ff00;
	--border-gray: #ddd;
	--background-light: #f8f9fa;
	--text-dark: #333;
	--text-gray: #666;
	--arrow-red: red;
	
	/* Abstände */
	--spacing-xs: 0.25rem;   /* 4px */
	--spacing-sm: 0.5rem;    /* 8px */
	--spacing-md: 1rem;      /* 16px */
	--spacing-lg: 1.5rem;    /* 24px */

	/* Z-Index Ebenen */
	--z-background: 0;
	--z-content: 1;
	--z-overlay: 10;
	--z-modal: 100;
	--z-toast: 1000;

	/* Schriftgrößen */
	--font-size-tiny: 60%;
	--font-size-small: 66%;
	--font-size-normal: 75%;
	--font-size-medium: 90%;
	--font-size-large: 110%;
}

/* HTML & Body Grundeinstellungen */
html, body {
	margin: 0;
	padding: var(--spacing-xs);
	box-sizing: border-box;
	min-width: 100vw;
	min-height: 100vh;
	overflow-x: hidden;
}

/* General WebApp Style-Konfiguration */
body {
	font-family: Verdana, sans-serif;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	background-color: rgba(0, 0, 0, 0.7);
	background-blend-mode: multiply;
	position: relative;
}

/*
.content {
	visibility: hidden;
}

.content.loaded {
	visibility: visible;
}
*/

/* No-Focus Management */
.no-focus {
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

.no-focus:focus {
	outline: none;
}

/* Container Layout */
.top-container {
	max-width: 1400px;
	margin:0 auto;
	display: flex;
	position: relative;
	align-items: center;
	justify-content: center;
	text-align: center;
	border: 0 solid red;
	color: gray;
	clear: both;
	font-size: 75%;
	box-sizing: border-box;
}

.input-container {
	display: grid;
	clear: both;
	columns: 1;
	margin: 0.5rem 0 0 0;
	padding: 0;
	border: 0 solid yellow;
	justify-content: center;
	box-sizing: border-box;
}

.feedback-container {
	display: grid;
	columns: 1;
	margin: 1.5rem 0 0 0;
	padding: 0;
	border: 0 solid red;
	justify-content: center;
	box-sizing: border-box;
}

.ai-container {
	display: flex;
	align-items: center;
	border: 0 solid white;
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.bottom-container {
	max-width: 1400px;
	margin: 0 auto;
	border: 0 solid blue;
	padding: 0;
}

/* Button Grundstyles */
button {
	align-items: center;
	justify-content: center;
	text-align: center;
	vertical-align: middle;
	margin: 0;
	padding: 5px;
	cursor: pointer;
	border: none;			/* für modernes Aussehen */
	border-radius: 5px;
	background-color: var(--primary-blue);
	color: white;
	transition: background-color 0.3s;
}

button:hover {
	opacity: 1;
	background-color: var(--primary-blue-hover); 
}

button:disabled {
	opacity: 0.65;
	cursor: not-allowed;
}

/* Button Column für xcheck-buttons */
.button-column {
	border: 0 solid red;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	margin-top: 0.5rem;
	margin-bottom: 0;
	gap: 5px;
}

.top-left {
	border: 0 solid blue;
	padding-left: 7px;
	margin-right: auto;
}

.top-center {
	border: 0 solid blue;
	target	margin: 0 auto;
	text-align: center;
}

.top-right {
	border: 0 solid blue;
	padding-right: 7px;
	margin-left: auto;
}

/* Messages */
.message-group {
	border: 0 solid red;
	padding: 0;
	margin-top: 0;
	margin-bottom: 0;
	display: flex;
	align-items: center;
	font-size: 75%;
	color: yellow;
}
.message-left {
	border: 0 solid blue;
	padding-left: 1rem;
	margin-right: auto;
}
.message-center {
	border: 0 solid blue;
	text-align: center;
}
.message-right {
	border: 0 solid blue;
	padding-right: 1rem;
	margin-left: auto;
}

/* xcheck und xclear Buttons */
.button-xcheck {
	flex: 1;                    /* nutze die volle Höhe */
	max-width: 24px;
	background-color: var(--primary-blue);
	justify-content: space-between;
	text-align: center;
}
.button-xcheck:hover {
	background-color: var(--primary-blue-hover);
}
.button-xcheck:disabled {
	cursor: not-allowed;
}

/* Spezifisch für das X-Symbol */
.button-xclear span {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	height: 100%;               /* Volle Höhe nutzen */
	width: 100%;				/* Volle Breite nutzen */
	color: white !important;Y
}

.button-xclear:hover {
	background-color: var(--danger-red-hover);
	border-color: var(--danger-red-hover);
}

.button-xclear:disabled {
	background-color: var(--danger-red-disabled);
	border-color: var(--danger-red-disabled);
}

.button-clear {
	max-height: 28px;
	width: 28px;
	background-color: var(--danger-red);
	color: white !important;Y
	text-align: center;
	justify-content: space-between;
}

.button-clear:hover {
	background-color: var(--danger-red-hover);
}

.button-clear:disabled {
	background-color: var(--danger-red-disabled);
}

.button-xclear {
	flex: 1;
	max-width: 24px;
	border: 1px solid var(--danger-red);
	background-color: var(--danger-red);
	color: white !important;
	text-align: center;
	justify-content: space-between;
}

/* Pfeile */
.arrow-up {
	margin: 0 5px 0 5px;
	color: var(--arrow-red);
	font-size: 0.8rem;
	line-height: 1;
}

/* AI-Button */
.ai-button-group {
	max-width: 1400px;
	margin: 0 auto;
	border: 0 solid red;
	display: flex;
	text-align: center;
	align-items: center;
}

/* label Gruppe*/
.label-group {
	max-width: 1400px;
	margin: 0;
	border: 0 solid red;
	display: flex;
	text-align: center;
	justify-content: space-between;
}

/* Button Gruppe */
.button-group {
	max-width: 1400px;
	margin: 0;
	border: 0 solid red;
	display: flex;
	text-align: center;
	justify-content: space-between;
}

.button-center {
	margin: 0 auto;
	border: 0 solid blue;
	justify-content: space-between;
	text-align: center;
	display: flex;
}

.button-left {
	margin-left: 0.7rem;
	margin-right: auto;
	padding: 4px;
	display: flex;
}

.button-right {
	margin-right: 0.6rem;
	margin-left: auto;
	padding: 4px;
	display: flex;
}

/* Floating Buttons */
.floating-buttons {
	position: absolute;
	top: -15px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	display: flex;
	gap: 5px;
	justify-content: center;
	width: 100%;
}

.floating-buttons button {
	transition: all 0.2s ease;
}

.floating-buttons .ai-button {
	background-color: var(--primary-blue);
	border: 1px solid rgba(255, 255, 255, 0.2);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.floating-buttons .button-clear {
	min-width: 24px;
	min-height: 24px;
	background-color: var(--danger-red);
	border: 1px solid rgba(255, 255, 255, 0.2);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.floating-buttons button:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.floating-buttons button:active:not(:disabled) {
	transform: translateY(0);
}

/* Chat Container */
.chat-container {
	max-width: 1400px;
	display: flex;
	gap: 3px;
	/* wird nicht benötigt!
	padding: 0;
	margin-top: 0;
	margin-bottom: 0;
	height: 100%;          Volle Höhe */
}

.chat-column {
	flex: 1;
	margin: 0;
	border-radius: 5px;
	position: relative;
	display: flex;
	flex-direction: column;
	width: calc(50vw - 34px);
	word-wrap: break-word;
	word-break: break-all;
}

.response, #claude-request, #openai-request {
	/* Sanfte Übergänge für bessere UX */
	width: 99%;
	transition: all 0.3s ease;
	/* Verbesserte Textumbruch-Regeln */
	-moz-hyphens: auto;						/* Für Firefox
	-ms-hyphens: auto;						/* Für IE, Edge */
	/* Verbesserte iOS Unterstützung */
	-webkit-hyphens: manual;				/* Für ältere iOS Versionen */
	-webkit-hyphenate-character: "\2010";	/* Expliziter Trennstrich für iOS */
	-webkit-hyphenate-limit-before: 3;
	-webkit-hyphenate-limit-after: 3;
	/* -webkit-hyphens: auto;				   Für Chrome, Safari, neuerer Operaa */
	word-wrap: break-word;					/* Fallback */
	overflow-wrap: break-word;				/* Moderne Version */
	word-break: break-word;					/* Auch an Wortgrenzen umbrechen */
	hyphens: auto;							/* Automatische Silbentrennung wenn nötig */
	white-space: pre-wrap;					/* Behält Zeilenumbrüche bei */
}

/* Response Areas */
.response {
	/* font-size: var(--font-size-medium); */
	font-weight: 450;						/* Etwas fetter als normal (400) aber nicht so fett wie bold (700) */
	margin-top: 0.5rem;
	position: relative;
	text-align: justify;					/* Blocksatz */
	white-space: pre-wrap;
	min-height: 15rem;
	padding: 0.5rem 1rem 0.5rem 1rem;		/* NICHT VERSTELLEN !!! */
	background-color: var(--background-light);
	border-radius: 0.5rem;
	box-sizing: border-box;					/* Padding in Breitenberechnung einbeziehen */

	/* Optimierte Textdarstellung */
	line-height: 1.4;						/* Verbesserter Zeilenabstand */
	letter-spacing: 0.01rem;				/* Leicht verbesserte Lesbarkeit */
	max-width: 80ch;						/* Optimale Zeilen-Breite */
	margin-left: auto;
	margin-right: auto;
}

.app-comment {
	border-radius: 0.5rem;
	font-weight: 500;
	width: calc(50vw - 36px);
	box-sizing: border-box;					/* Padding in Breitenberechnung einbeziehen */
}
/* Subtile visuelle Feedback wenn neue Antwort erscheint */
@keyframes fadeIn {
	from { opacity: 0; transform: translateY(-5px); }
	to { opacity: 1; transform: translateY(0); }
}

.response:not(:empty) {
	animation: fadeIn 0.3s ease-out;
}

/* Die gleichen Regeln auch für die Request-Bereiche */
#claude-request, #openai-request {
	font-weight: 550;						/* Etwas fetter als normal (400) aber nicht so fett wie bold (700) */
	top: 0;
	margin-top: 0;
	padding: 0.5rem 1rem 0.5rem 1rem;		/* NICHT VERSTELLEN !!! */
	word-break: normal;						/* Erst an Wortgrenzen umbrechen */
	/* Horizontale Zentrierung */
	margin: 0 auto;							/* Horizontale Zentrierung durch auto margins */
	text-align: center;						/* Grundlegende Textzentrierung */
	display: flex;							/* Flexbox für bessere Zentrierung */
	justify-content: center;				/* Horizontale Zentrierung */
	align-items: center;					/* Vertikale Zentrierung */
	box-sizing: border-box;					/* Padding in Breitenberechnung einbeziehen */
	/* Verbesserte horizontale Zentrierung */
	/* width: 90%;							Etwas schmaler als 100% für bessere Optik */
	line-height: 1.4;						/* Verbesserter Zeilenabstand */
	letter-spacing: 0.01rem;				/* Leicht verbesserte Lesbarkeit */
	max-width: 80ch;						/* Optimale Zeilen-Breite */
	margin-left: auto;
	margin-right: auto;
	color: gray;
}

/* Einheitliche Mobile Anpassungen */
@media screen and (max-width: 660px) {
	.response {
		padding: 0.5rem 0.4rem 0.4rem 0.4rem; /* Angepasstes Padding für mobile Ansicht */
	}
	#claude-request, #openai-request {
			margin: 0 auto;				/* Horizontale Zentrierung */
	}

	.response, #claude-request, #openai-request {
		/* Bessere Lesbarkeit auf schmalen Bildschirmen */
		/* text-align: left;         Statt justify für bessere Lesbarkeit */
		word-break: break-word;		/* Weniger aggressiv als break-all */
		overflow-wrap: break-word;
		hyphens: auto;				/* Versucht zuerst normale Silbentrennung */
		line-height: 1.4;			/* Besserer Zeilenabstand für Lesbarkeit */
		font-size: 0.85rem;
		min-height: 6rem;
		text-align: center;
	}

	.chat-column {
		position: relative;
	}

	.floating-buttons {
		width: calc(100% - 8px);
		left: 50%;
		transform: translateX(-50%);
		gap: 0.5rem;
		font-size: 0.7rem;
		padding: 0.3rem;
	}

	.ai-button, .button-clear {
		font-size: 0.7rem;
	}

	.feedback-container {
		margin: 2rem 0 0 0;
	}

	.check-label {
		font-size: var(--font-size-tiny);
	}

	.ai-button span {
		display: inline-block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

}

/* Extra-Small Screens */
@media screen and (max-width: 440px) {
	.response, #claude-request, #openai-request {
		font-size: 0.7rem;
		padding: 0.7rem 0.3rem 0.3rem 0.3rem;
		min-height: 9rem;
	}

	.button-left, .button-right {
		flex-direction: column;
	}

	.feedback-container {
		margin: 2rem 0 0 0;
	}

}

/* Speziell für iOS Geräte */
@supports (-webkit-touch-callout: none) {
	.response, #claude-request, #openai-request {
		word-break: break-word;
		hyphens: none;            /* Deaktiviert auf iOS */
		-webkit-hyphens: none;
		-moz-hyphens: none;
		-ms-hyphens: none;
	}
}

@keyframes pulse {
	0% { opacity: 0.6; }
	50% { opacity: 1; }
	100% { opacity: 0.6; }
}

.response.loading {
	animation: pulse 1.5s infinite ease-in-out;
}

/* Touch-optimierte Buttons */
@media (hover: none) {
	button {
		min-height: 24px;    /* iOS Touch Target Size */
		min-width: 24px;
	}
}

/* Input Area */
.input-area {
	margin: 0;
	max-width: 1400px;
	text-align: center;
	width: calc(100vw - 1.5rem);
}

textarea {
	word-wrap: break-word;
	overflow-wrap: break-word;
	word-break: normal;
	-webkit-hyphens: auto;		/* Für Chrome, Safari, neuerer Operaa */
	-moz-hyphens: auto;			/* Für Firefox
	-ms-hyphens: auto;			/* Für IE, Edge */
	hyphens: auto;              /* Automatische Silbentrennung wenn nötig */
	font-size: var(--font-size-large);
	margin-bottom: 2px;
	padding-right: 25px;
	padding-left: 35px;
	border: 1px solid var(--border-gray);
	border-radius: 5px;
	resize: vertical;

	width: calc(100% - 60px);
	height: calc(124*100vh/667);
	
	/* Verbesserte Zentrierung */
	display: flex;
	justify-content: center; /* Horizontale Zentrierung */
	text-align: center;      /* Text-Ausrichtung */
	
	font-family: Verdana, sans-serif;
	font-weight: 500;

	/* Padding für bessere initiale Cursorposition */
	padding-top: calc(124*100vh/667/5 - 0.5rem);			/* Optimiert von oben */
	padding-bottom: calc(124*100vh/667/4);					/* Optimiert von unten */
	
	/* Optional: Verbessertes Verhalten beim Tippen */
	vertical-align: middle;
	line-height: normal;     /* Verhindert ungewollte Zeilenabstände */

	/* Neue Styles nur für Text-Zentrierung */
	text-align: center;
	/* padding-top: calc(124*100vh/667/2 - 1rem);			/* Dynamische vertikale Zentrierung */

	transition: padding 0.3s ease;
}

textarea:focus {
	/* Reduziertes Padding für mehr Schreibraum */
	padding-top: 1.5rem;
	/* padding-bottom: 1.5rem; */
	transition: padding 0.3s ease;
}

/* Spezielle Mobile Anpassungen */
@media screen and (max-width: 660px) {
	textarea {
		/* Angepasste Padding-Werte für mobile Geräte */
		padding-top: calc(124*100vh/667/3.5 - 0.5rem);		/* Etwas mehr Platz für bessere mobile Nutzung */
		padding-bottom: calc(124*100vh/667/3);
	}
}

/* Spezielle Mobile Anpassungen */
@media screen and (max-width: 440px) {
	textarea {
		/* Angepasste Padding-Werte für mobile Geräte */
		padding-top: calc(124*100vh/667/3 - 0.5rem);		/* Noch etwas mehr für bessere mobile Nutzung */
		padding-bottom: calc(124*100vh/667/2.5);
	}
}

/* Play und Clear Button gemeinsame Basis-Styles */
.play-button, 
.play-input-button,
.clear-input-button {
	position: absolute;
	background: none;
	display: none;
	border: none;
	padding: 0;
}

.clear-input-button {
	top: 0.4rem;
	right: 0.4rem;
	min-width: 24px;
	min-height: 24px;
	border-radius: 5px;
	font-size: 0.8rem;
	padding: 2px 4px;
	background-color: var(--danger-red);
}

.play-input-button {
	top: 0.5rem;				
	left: 1.5rem;				
	background-color: transparent;
	background: none;
}

.play-input-lang {
	top: 0.5rem;				
	left: -1rem;				
	font-size: 0.75rem;
	margin: 0 0.1rem 0.5rem 0;
	color: gray;
	background-color: transparent;
	background: none;
}

.play-lang {
	top: 0.5rem;				
	font-size: 0.75rem;
	margin: 0 0.1rem 0.5rem 0;
	color: gray;
	background-color: transparent;
	background: none;
}

.play-input-button {
	position: absolute;
	box-shadow: 0 3px 6px 1px rgba(0, 0, 0, 0.3);
}

.play-button, 
.play-input-button {
	max-width: 1.4rem;
	max-height: 1.4rem;
	font-size: 1.2rem;
	padding: 0;
	margin: 0;
	opacity: 0.7;
	background-color: transparent;
	background: none;
}

.play-button {
	position: relative;
	margin: -0.5rem auto;
}

.clear-input-button:hover {
	opacity: 1;
	background-color: var(--danger-red-hover);
}

.play-button:hover:not(:disabled),
.play-input-button:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 3px 6px 1px rgba(0, 0, 0, 0.3);
	opacity: 1;
}

.play-button:active:not(:disabled), 
.play-input-button:active:not(:disabled) {
	transform: translate(0);
	box-shadow: 0 3px 6px 1px rgba(0, 0, 0, 0.3);
	opacity: 0.75;
}

/* Anzeige-Logik für beide Buttons */
.textarea-wrapper textarea:not(:placeholder-shown) ~ .play-input-button,
.textarea-wrapper textarea:not(:placeholder-shown) ~ .clear-input-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Z-Index Stacking */
.textarea-wrapper {
	position: relative;
	width: calc(100% - 5px);
	margin: 0 auto;
}

.textarea-wrapper textarea {
	z-index: 1;
}

.textarea-wrapper .play-input-button,
.textarea-wrapper .clear-input-button {
	z-index: 2;
}

.deepl-button {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 3px 3px;
}

/* Language Selection */
.translation-buttons {
	display: flex;
	gap: 0.3rem;
	justify-content: center;
	align-items: center;
	padding: 3px 3px;
}

.lang-button {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 3px 3px;
	min-width: 30px;
	position: relative;
}

.lang-button.current-ui-lang {
	background-color: var(--primary-blue-dark);
	border: 1px solid rgba(255, 255, 255, 0.5);
	box-shadow: 0 0 3px rgba(255, 255, 255, 0.3);
}

.lang-button.current-ui-lang::after {
	content: '•';
	position: absolute;
	color: var(--success-green);
	top: 0;
	font-size: 14px;
	text-shadow: 0 0 3px var(--success-green);
	animation: glow 1s ease-in-out infinite alternate;
}

.lang-button:hover {
	background-color: var(--primary-blue-hover);
	transform: scale(1.05);
	transition: all 0.2s ease;
}

.lang-button:active {
	transform: scale(0.95);
}

/* Info Groups */
.info-group {
	border: 0 solid red;
	position: relative;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
	margin-top: 0;
	margin-bottom: 0;
}

.info-left {
	border: 0 solid blue;
	position: absolute;
	left: 0.6rem;
	font-size: var(--font-size-small);
	color: gray;
}

.info-center {
	border: 0 solid blue;
	position: absolute;
	font-size: var(--font-size-small);
	color: gray;
}

.info-right {
	border: 0 solid blue;
	position: absolute;
	right: 0.6rem;
	font-size: var(--font-size-small);
	color: gray;
}

.info-count {
	border: 0 solid yellow;
	position: absolute;
	top: 0.1rem;
	right: 0.5rem;
	font-size: var(--font-size-small);
	color: lightgray;
}

/* Labels */
.check-label {
	padding: 0;
	margin: 0.5rem 0 0 0;
	text-align: center;
	font-size: var(--font-size-small);
	color: gray;
	position: relative;
}

.version-label {
	padding: 0;
	margin-top: 0.2rem;
	margin-bottom: 0;
	text-align: center;
	font-size: var(--font-size-small);
	color: darkgray;
}

/* Header */
.header-container {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: lightgray;
	gap: 0.8rem;
	margin: 0;
}

.logo {
	height: 3rem;
	width: auto;
	border-radius: 10px;
	transition: all 0.2s ease;
}

.logo:hover {
	border: 1px solid white;
	opacity: 0.8;
}

/* DateTime Display */
#datetime {
	color: lightgray;
	text-align: center;
	font-size: var(--font-size-normal);
	opacity: 1;
	transition: opacity 0.3s;
}

/* Animationen */
@keyframes glow {
	from {
		text-shadow: 0 0 2px var(--success-green), 0 0 4px var(--success-green);
		opacity: 0.8;
	}
	to {
		text-shadow: 0 0 3px var(--success-green), 0 0 6px var(--success-green), 0 0 8px var(--success-green);
		opacity: 1;
	}
}

/* Server Status */
.server-state {
	position: absolute;
	top: 0.25rem;
	left: 0.25rem;
	z-index: 1000;
	align-items: center;
	border: 0 solid yellow;
	margin: 0;
	padding: 0;
}

/* Debug Panel */
#debug-toggle {
	position: fixed;
	bottom: 0.5rem;
	right: 0.5rem;
	z-index: 999;
	padding: 1rem;
	font-size: 16;
	border: none;
	border-radius: 10%;
	background: #3d3d3d;
	color: white;
	cursor: pointer;
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
	transition: all 0.3s;
}

#debug-toggle:hover {
	transform: rotate(30deg);
	background: #4d4d4d;
}

/* WebApp Message */
.webapp-message {
	padding: 0;
	margin-bottom: 0;
	text-align: center;
	font-size: var(--font-size-normal);
	color: yellow;
}

/* Error Styles */
.error {
	color: var(--danger-red);
	padding: 1rem;
	background-color: #f8d7da;
	border-radius: 5px;
}