/* ============================================================
   VoteMyLove – App-Modus fuer das Handy (bis 760px Breite)
   Wird nach style.css geladen. Desktop bleibt unveraendert.
   Zusammen mit vml_mobile.js.
   ============================================================ */

/* Lauftext "LIVE": eigener Rahmen, damit der Text nicht unter das Abzeichen laeuft (auch Desktop) */
.vml-ticker-viewport { flex: 1 1 auto; min-width: 0; overflow: hidden; }

/* App-Teile sind auf dem Desktop unsichtbar */
.vmlm-bar, .vmlm-tabs, .vmlm-drawer, .vmlm-overlay, .vmlm-sheet { display: none; }

/* App-Ansicht: schmale Bildschirme ODER Touch-Handy quer gehalten (wenig Hoehe). Tablets bleiben Desktop. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
	:root {
		--vmlm-top: calc(56px + env(safe-area-inset-top, 0px));
		--vmlm-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
		--vmlm-bg: #0a0414;
		--vmlm-panel: #140a26;
		--vmlm-line: rgba(255, 47, 208, 0.35);
		--vmlm-pink: #ff2fd0;
		--vmlm-text: #f4eefc;
		--vmlm-muted: #a99cbd;
	}
	html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
	body {
		overflow-x: clip;
		padding-top: var(--vmlm-top) !important;
		padding-bottom: calc(var(--vmlm-bottom) + 8px) !important;
		-webkit-tap-highlight-color: rgba(255, 47, 208, 0.18);
		overscroll-behavior-y: none;
	}

	/* ---------- Leiste oben (fest) ---------- */
	.vmlm-bar {
		display: flex; align-items: center; gap: 6px;
		position: fixed; top: 0; left: 0; right: 0; z-index: 9000;
		height: var(--vmlm-top); box-sizing: border-box;
		padding: env(safe-area-inset-top, 0px) 10px 0;
		background: rgba(10, 4, 20, 0.92);
		-webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
		border-bottom: 1px solid var(--vmlm-line);
	}
	.vmlm-iconbtn {
		flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
		width: 42px; height: 42px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1);
		background: rgba(255, 255, 255, 0.04); color: #fff; font: 400 21px/1 Arial, sans-serif;
		text-decoration: none !important; cursor: pointer; position: relative; padding: 0;
	}
	.vmlm-iconbtn:active { transform: scale(.94); }
	.vmlm-radiobtn.spielt { color: var(--vmlm-pink); border-color: var(--vmlm-pink); box-shadow: 0 0 14px rgba(255, 47, 208, 0.45); animation: vmlmPuls 1.6s ease-in-out infinite; }
	@keyframes vmlmPuls { 50% { box-shadow: 0 0 4px rgba(255, 47, 208, 0.2); } }
	.vmlm-brand {
		flex: 1 1 auto; min-width: 0; padding: 0 4px; text-decoration: none !important;
		font-family: "Great Vibes", cursive; font-size: 28px; line-height: 1.1; color: #fff !important;
		text-shadow: 0 0 10px rgba(255, 47, 208, 0.75); white-space: nowrap; overflow: hidden;
	}
	.vmlm-brand b { color: #ff2f5d; font-family: Arial, sans-serif; font-size: 16px; margin-left: 3px; vertical-align: middle; }
	.vmlm-badge {
		position: absolute; top: -6px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
		border-radius: 9px; background: #ff2f5d; color: #fff; font: 700 11px/18px Arial, sans-serif; text-align: center;
		box-shadow: 0 0 0 2px var(--vmlm-bg);
	}

	/* ---------- Tab-Leiste unten (fest) ---------- */
	.vmlm-tabs {
		display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
		height: var(--vmlm-bottom); box-sizing: border-box; padding-bottom: env(safe-area-inset-bottom, 0px);
		background: rgba(10, 4, 20, 0.95);
		-webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
		border-top: 1px solid var(--vmlm-line);
	}
	.vmlm-tab {
		flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
		color: var(--vmlm-muted) !important; text-decoration: none !important; font: 600 10.5px/1.1 Verdana, Arial, sans-serif;
		position: relative; min-width: 0;
	}
	.vmlm-tab-ic { position: relative; font-size: 22px; line-height: 1; filter: grayscale(.6) opacity(.75); transition: transform .15s; }
	.vmlm-tab-tx { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
	.vmlm-tabs a.vmlm-tab, .vmlm-tabs a.vmlm-tab:link, .vmlm-tabs a.vmlm-tab:visited { color: var(--vmlm-muted) !important; }
	.vmlm-tabs a.vmlm-tab.aktiv, .vmlm-tabs a.vmlm-tab.aktiv:link, .vmlm-tabs a.vmlm-tab.aktiv:visited { color: #fff !important; }
	.vmlm-tab.aktiv .vmlm-tab-ic { filter: none; transform: translateY(-1px) scale(1.08); }
	.vmlm-tab.aktiv::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, #ff2fd0, #8a2be2); box-shadow: 0 0 10px #ff2fd0; }
	.vmlm-tab:active .vmlm-tab-ic { transform: scale(.9); }

	/* ---------- Abdunkeln, Seitenmenue, Fenster von unten ---------- */
	.vmlm-overlay { display: block; position: fixed; inset: 0; z-index: 9400; background: rgba(4, 1, 10, 0.62); opacity: 0; pointer-events: none; transition: opacity .2s; }
	body.vmlm-open .vmlm-overlay { opacity: 1; pointer-events: auto; }
	body.vmlm-open { overflow: hidden; }

	.vmlm-drawer {
		display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0; z-index: 9500;
		width: min(86vw, 340px); background: linear-gradient(180deg, #140827, #0a0414);
		border-right: 1px solid var(--vmlm-line); box-shadow: 12px 0 40px rgba(0, 0, 0, 0.6);
		transform: translateX(-104%); transition: transform .24s cubic-bezier(.2, .8, .2, 1); visibility: hidden;
	}
	.vmlm-drawer.offen { transform: none; visibility: visible; }
	.vmlm-drawer-head, .vmlm-sheet-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid rgba(255, 47, 208, 0.25); }
	.vmlm-drawer-head { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
	.vmlm-drawer-head b, .vmlm-sheet-head b { flex: 1; color: #fff; font: 700 16px Verdana, Arial, sans-serif; }
	.vmlm-close { width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.15); background: transparent; color: #fff; font-size: 18px; cursor: pointer; }
	.vmlm-drawer-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 12px 12px calc(24px + env(safe-area-inset-bottom, 0px)); }
	.vmlm-section-title { margin: 16px 4px 8px; color: #ffd23f; font: 700 11px Verdana, Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
	.vmlm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
	.vmlm-chips .vml-cash-chip, .vmlm-chips .vml-krone-chip { padding: 7px 12px !important; font-size: 13px !important; max-width: 100%; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

	.vmlm-drawer .vml-iconnav { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 !important; }
	.vmlm-drawer .vml-iconnav-left, .vmlm-drawer .vml-iconnav-right { display: contents; }
	.vmlm-drawer .vml-iconnav-item { display: flex !important; align-items: center; justify-content: center; text-align: center; min-height: 44px; padding: 8px 6px !important; border-radius: 12px !important; font-size: 13px !important; white-space: normal !important; box-sizing: border-box; }
	.vmlm-drawer .vml-sidebar { width: auto !important; max-width: none !important; margin: 0 !important; }
	.vmlm-drawer .vml-sidebar a { min-height: 42px; box-sizing: border-box; }
	.vmlm-drawer .vml-lang-flags { display: block !important; }
	.vmlm-drawer .vml-lang-select { width: 100%; min-height: 44px; font-size: 16px; }
	.vmlm-logout { display: block; margin-top: 16px; text-align: center; padding: 12px; border-radius: 12px; border: 1px solid #ff2f5d; color: #ff8aa5 !important; text-decoration: none !important; font: 700 14px Verdana, Arial, sans-serif; }

	.vmlm-sheet {
		display: flex; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9500;
		max-height: 82vh; background: linear-gradient(180deg, #170a2c, #0a0414);
		border-top: 1px solid var(--vmlm-line); border-radius: 22px 22px 0 0; box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.6);
		transform: translateY(105%); transition: transform .26s cubic-bezier(.2, .8, .2, 1); visibility: hidden;
	}
	.vmlm-sheet.offen { transform: none; visibility: visible; }
	.vmlm-sheet-griff { width: 42px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.25); margin: 8px auto 0; }
	.vmlm-sheet-body { overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 14px 14px calc(18px + env(safe-area-inset-bottom, 0px)); }
	.vmlm-sheet .vml-search-box { margin: 0 !important; width: 100%; }
	.vmlm-sheet .vml-search-box input { width: 100%; min-height: 48px; box-sizing: border-box; font-size: 16px !important; padding: 10px 18px !important; }
	.vmlm-suchlinks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
	.vmlm-suchlinks a { display: flex; align-items: center; justify-content: center; min-height: 46px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); color: #fff !important; text-decoration: none !important; font: 600 13px Verdana, Arial, sans-serif; }

	/* Radio im Fenster von unten */
	.vmlm-sheet .vml-radio { min-width: 0 !important; display: grid !important; grid-template-columns: 1fr; gap: 12px !important; border: 0 !important; padding: 0 !important; margin: 0 !important; width: auto !important; max-width: none !important; background: none !important; box-shadow: none !important; }
	.vmlm-sheet .vml-radio > * { min-width: 0 !important; max-width: 100% !important; }
	.vmlm-sheet .vml-radio-cover, .vmlm-sheet .vml-radio-live-box, .vmlm-sheet .vml-radio-viz, .vmlm-sheet .vml-radio-mode-switch, .vmlm-sheet .vml-radio-sub { display: none !important; }
	.vmlm-sheet .vml-radio-mid, .vmlm-sheet .vml-radio-controls, .vmlm-sheet .vml-radio-stations { width: 100% !important; box-sizing: border-box; }
	.vmlm-sheet .vml-radio-mid { display: grid !important; grid-template-columns: 1fr; gap: 8px; border: 0 !important; padding: 0 !important; }
	.vmlm-sheet .vml-radio-top { display: flex; align-items: center; gap: 6px; }
	.vmlm-sheet .vml-radio-track-title { font-size: 20px !important; text-align: left !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.vmlm-sheet .vml-radio-controls { display: flex !important; align-items: center; gap: 14px; }
	.vmlm-sheet .vml-radio-btn { width: 56px !important; height: 56px !important; flex: 0 0 56px; font-size: 20px !important; }
	.vmlm-sheet .vml-radio-volume { flex: 1; width: auto !important; min-width: 0; }
	.vmlm-sheet .vml-radio-stations { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: auto !important; max-height: none !important; overflow: visible !important; border: 0 !important; padding: 0 !important; margin: 0 !important; }
	.vmlm-sheet .vml-radio-stations-title { grid-column: 1 / -1; margin: 4px 0 0 !important; }
	.vmlm-sheet .vml-radio-station { width: auto !important; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: Verdana, Arial, sans-serif; display: flex; align-items: center; min-height: 46px; padding: 8px 12px !important; margin: 0 !important; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.12); font-size: 14px !important; box-sizing: border-box; }
	.vmlm-sheet .vml-radio-station.active { border-color: #ff2f5d; background: rgba(255, 47, 93, 0.14); }

	/* ---------- Alter Kopfbereich: ersetzt durch die App-Leisten ---------- */
	.vml-topbar { margin: 8px 8px 10px !important; border-radius: 14px !important; }
	.vml-topbar-inner { display: none !important; }               /* Logo, Radio (jetzt im Fenster), Sprache (jetzt im Menue) */
	body.vmlm-login .vml-topbar { display: none !important; }     /* eingeloggt: Laufschrift + Ausloggen braucht es oben nicht */
	.vml-login-row { padding: 10px !important; }
	.vml-login-form { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
	.vml-login-form .vml-input { width: 100% !important; min-height: 46px; box-sizing: border-box; font-size: 16px !important; }
	.vml-login-form .vml-login-btn, .vml-login-form .vml-register-btn { min-height: 46px; display: flex; align-items: center; justify-content: center; }
	.vml-login-form .vml-forgot { grid-column: 1 / -1; text-align: center; }
	.vml-iconnav, .vml-utilrow, .vml-shell-left, .vml-ad-cell { display: none !important; }
	.vml-sidebar-notify:not(:has(a)) { display: none !important; }

	/* ---------- Inhalt: volle Breite, fingerfreundlich ---------- */
	.vml-legacy-shell, .vml-legacy-main, .vml-content-shell, .vml-content-frame { width: 100% !important; height: auto !important; }
	.vml-shell-content, .vml-content-cell, .vml-shell-wrap { padding: 0 !important; height: auto !important; }
	.vml-page { margin: 0 8px 16px !important; gap: 12px !important; }
	.vml-panel { border-radius: 16px !important; }
	.vml-panel-body { padding: 12px !important; }
	img, video { max-width: 100%; height: auto; }
	iframe, embed, object { max-width: 100%; }
	input, select, textarea { font-size: 16px !important; max-width: 100%; box-sizing: border-box; } /* verhindert Zoom auf dem iPhone */
	.vml-login-btn, .vml-register-btn, button { min-height: 40px; }
	.vml-panel-body table, .vml-page table { max-width: 100%; }
	.vml-scroll-x, .vml-video-table, .vmlu-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

	/* "Mein Profil"-Knoepfe: eine wischbare Zeile */
	.vml-member-nav {
		display: flex !important; flex-wrap: nowrap !important; gap: 6px !important; overflow-x: auto; -webkit-overflow-scrolling: touch;
		scrollbar-width: none; padding: 8px !important; margin: 4px 8px 10px !important; border-radius: 14px !important;
	}
	.vml-member-nav::-webkit-scrollbar { display: none; }
	.vml-member-nav-item { flex: 0 0 auto !important; white-space: nowrap !important; padding: 8px 13px !important; font-size: 13px !important; min-height: 40px; box-sizing: border-box; display: inline-flex !important; align-items: center; gap: 5px; }

	/* Fusszeile schlank */
	.vml-legacy-shell + center, body > center { font-size: 11px; opacity: .7; padding: 10px 8px; }

	/* ---------- Live-Chat: wie eine Chat-App (volle Hoehe, Eingabe unten) ---------- */
	body[data-vmlm-page="chat.php"] { padding-bottom: var(--vmlm-bottom) !important; }
	body[data-vmlm-page="chat.php"] .vml-live-chat { margin: 0 !important; padding: 0 !important; max-width: none !important; }
	body[data-vmlm-page="chat.php"] .vml-chat-main {
		height: calc(100dvh - var(--vmlm-top) - var(--vmlm-bottom)); min-height: 0 !important;
		display: flex; flex-direction: column; border-radius: 0 !important; border-left: 0; border-right: 0;
	}
	body[data-vmlm-page="chat.php"] .vml-chat-head { position: static !important; padding: 8px 12px !important; gap: 10px !important; }
	body[data-vmlm-page="chat.php"] .vml-chat-head .vml-avatar { width: 38px; height: 38px; }
	body[data-vmlm-page="chat.php"] .vml-user-name { font-size: 15px !important; }
	body[data-vmlm-page="chat.php"] .vml-chat-banner { display: none !important; }
	body[data-vmlm-page="chat.php"] .vml-msg-list { flex: 1 1 auto; min-height: 0; max-height: none !important; overflow-y: auto; padding: 12px !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
	body[data-vmlm-page="chat.php"] .vml-typing { height: 18px; padding: 0 12px; }
	body[data-vmlm-page="chat.php"] .vml-quick { padding: 0 10px 8px !important; }
	body[data-vmlm-page="chat.php"] .vml-compose { padding: 8px 10px !important; }
	body[data-vmlm-page="chat.php"] .vml-compose input { min-height: 44px; }
	body[data-vmlm-page="chat.php"] .vml-msg-tools { display: flex; position: static; background: none; border: 0; padding: 0; margin-top: 4px; opacity: .55; }
	body[data-vmlm-page="chat.php"] .vml-bubble { max-width: 84% !important; }

	/* Hinweis "Als App installieren" */
	.vmlm-install {
		position: fixed; left: 10px; right: 10px; bottom: calc(var(--vmlm-bottom) + 10px); z-index: 9300;
		display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px;
		background: linear-gradient(135deg, #2a0e44, #170a2c); border: 1px solid rgba(255, 47, 208, 0.6);
		box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 47, 208, 0.25); color: #fff;
		font: 400 12.5px/1.35 Verdana, Arial, sans-serif; animation: vmlmRein .3s ease-out;
	}
	@keyframes vmlmRein { from { transform: translateY(20px); opacity: 0; } }
	.vmlm-install img { width: 42px; height: 42px; border-radius: 10px; flex: 0 0 42px; }
	.vmlm-install div { flex: 1; min-width: 0; }
	.vmlm-install b { display: block; font-size: 14px; }
	.vmlm-install span { color: #d8cbea; }
	.vmlm-share { font-style: normal; display: inline-block; padding: 0 4px; border: 1px solid rgba(255,255,255,.35); border-radius: 5px; }
	.vmlm-install-ok { border: 0; border-radius: 10px; padding: 0 12px; height: 38px; background: linear-gradient(135deg, #ff2fd0, #8a2be2); color: #fff; font-weight: 700; cursor: pointer; }
	.vmlm-install-weg { border: 0; background: transparent; color: #a99cbd; font-size: 16px; width: 32px; height: 38px; cursor: pointer; }

	/* Mein Raum: etwas kompakter */
	body[data-vmlm-page="myprofil_raum.php"] .vml-room25-wrap { padding-left: 6px !important; padding-right: 6px !important; }
}

/* Handy quer: Leisten flacher, Tab-Beschriftung weg -> mehr Platz fuer Inhalt */
@media (hover: none) and (pointer: coarse) and (max-height: 500px) and (orientation: landscape) {
	:root { --vmlm-top: calc(46px + env(safe-area-inset-top, 0px)); --vmlm-bottom: calc(44px + env(safe-area-inset-bottom, 0px)); }
	.vmlm-bar { padding-left: max(10px, env(safe-area-inset-left, 0px)); padding-right: max(10px, env(safe-area-inset-right, 0px)); }
	.vmlm-iconbtn { width: 36px; height: 36px; font-size: 18px; }
	.vmlm-brand { font-size: 24px; }
	.vmlm-tab-tx { display: none; }
	.vmlm-tab { flex-direction: row; }
	.vmlm-sheet { max-height: 92vh; }
	body { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
}

/* Als installierte App (vom Startbildschirm geoeffnet) */
@media (display-mode: standalone) and (max-width: 760px), (display-mode: standalone) and (hover: none) and (pointer: coarse) and (max-height: 500px) {
	body { -webkit-user-select: none; user-select: none; }
	input, textarea, [contenteditable], .vml-bubble, .vml-panel-body p { -webkit-user-select: text; user-select: text; }
}