/*
 * Eigener Chat (Roadmap Block 11): Teile, die der Notizblock (studio-chat.css) dazubekommt – laufende Sendung,
 * Zitat, Reaktionen mit Leiste, Abstimmung, Zustände eigener Nachrichten, Angepinnt, Ungelesen-Zahl am Sticker,
 * Antwort-Hinweis und Abstimmungs-Formular. Markup: inc/chat-parts.php und studio-chat-render.js.
 */

/* ---------- Kopfzeile, Kontext, Zitat ---------- */
.studio-chat__played {
	color: oklch(40% 0.12 150);
	font-size: 0.75rem;
	font-weight: 800;
}

.studio-chat__onair {
	margin: 0 0 0.2rem !important;
	color: var(--studio-paper-ink-2);
	font-size: 0.75rem !important;
	line-height: 1.3 !important;
}

.studio-chat__onair::before { content: "♪ " / ""; }
.studio-chat__onair.is-live::before { content: "● " / "live: "; color: var(--studio-onair); }

.studio-chat__quote {
	margin: 0.15rem 0 0.3rem !important;
	padding: 0.2rem 0 0.2rem 0.55rem;
	border-left: 3px solid oklch(70% 0.05 240);
	color: var(--studio-paper-ink-2);
	font-size: 0.82rem !important;
	line-height: 1.35 !important;
	overflow-wrap: anywhere;
}

.studio-chat__quote b { color: var(--studio-paper-ink); }

/* ---------- Reaktionen ---------- */
.studio-chat__reacts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem;
	margin: 0.35rem 0 0 !important;
}

#chat-content .studio-chat__chip,
#chat-content .studio-chat__more,
#chat-content .studio-chat__emoji,
#chat-content .studio-chat__tool,
#chat-content .studio-chat__retry {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	min-width: 44px;
	min-height: 44px;
	margin: 0;
	padding: 0 0.6rem;
	border: 1px solid oklch(78% 0.02 250);
	border-radius: var(--studio-radius-s);
	background: oklch(99% 0.003 250);
	color: var(--studio-paper-ink);
	font: 650 0.85rem / 1 var(--studio-font-text);
	font-variant-numeric: tabular-nums;
	cursor: pointer;
}

/* Vorhandene Reaktion: kompakt; Tippfläche über einen unsichtbaren Rand trotzdem 44 px hoch */
#chat-content .studio-chat__chip {
	position: relative;
	min-width: 0;
	min-height: 30px;
	margin: 7px 0;
	padding: 0 0.5rem;
}

#chat-content .studio-chat__chip::after { content: ""; position: absolute; inset: -7px -2px; }
#chat-content .studio-chat__chip[aria-pressed="true"] { border-color: var(--studio-paper-ink); background: oklch(90% 0.06 234); }
#chat-content .studio-chat__chip:hover,
#chat-content .studio-chat__emoji:hover,
#chat-content .studio-chat__tool:hover,
#chat-content .studio-chat__retry:hover { background: oklch(93% 0.02 240); }

/* „☺“ oben rechts in der Nachricht, die Zeit rückt davor */
.studio-chat__msg:has(> .studio-chat__more) { position: relative; }
.studio-chat__msg:has(> .studio-chat__more) > .studio-chat__who { padding-right: 2.6rem; }

#chat-content .studio-chat__more {
	position: absolute;
	top: 0.1rem;
	right: -0.55rem;
	width: 44px;
	height: 44px;
	padding: 0;
	border-color: transparent;
	background: transparent;
	color: var(--studio-paper-ink-2);
	font-size: 1.15rem;
}

#chat-content .studio-chat__more[aria-expanded="true"] { border-color: var(--studio-paper-ink); color: var(--studio-paper-ink); }

.studio-chat__bar {
	display: grid;
	gap: 0.4rem;
	margin-top: 0.3rem;
	padding: 0.45rem;
	border: 1px dashed oklch(70% 0.02 250);
	border-radius: var(--studio-radius-s);
	background: oklch(98% 0.01 90);
}

.studio-chat__emojis,
.studio-chat__tools { display: flex; flex-wrap: wrap; gap: 0.3rem; }
#chat-content .studio-chat__emoji { padding: 0; font-size: 1.25rem; }
#chat-content .studio-chat__emoji[aria-pressed="true"] { border-color: var(--studio-paper-ink); background: oklch(90% 0.06 234); }
#chat-content .studio-chat__tool--danger { color: var(--studio-onair); }

#chat-content :is(.studio-chat__chip, .studio-chat__more, .studio-chat__emoji, .studio-chat__tool, .studio-chat__retry, .studio-chat__option):focus-visible {
	outline: 2px solid var(--studio-brand);
	outline-offset: 2px;
}

/* ---------- Abstimmung: Antworten als Balken ---------- */
.studio-chat__poll {
	display: grid;
	gap: 0.35rem;
	margin: 0.45rem 0 0;
	padding: 0;
	list-style: none;
}

#chat-content .studio-chat__option {
	--share: 0%;
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 0.4rem 0.65rem;
	border: 1.5px solid var(--studio-paper-ink);
	border-radius: var(--studio-radius-s);
	background: linear-gradient(90deg, oklch(86% 0.07 234) var(--share), oklch(99% 0.003 250) var(--share));
	color: var(--studio-paper-ink);
	font: 650 0.9rem / 1.3 var(--studio-font-text);
	text-align: left;
	cursor: pointer;
}

/* Ohne JavaScript ist die Antwort ein Listenpunkt */
li.studio-chat__option { align-items: center; }
#chat-content .studio-chat__option[aria-pressed="true"] { box-shadow: inset 4px 0 0 var(--studio-paper-ink); }
#chat-content .studio-chat__option[aria-pressed="true"] > span:first-child::after { content: " ✓"; }
#chat-content .studio-chat__option[aria-disabled="true"] { cursor: default; opacity: 0.85; }
.studio-chat__share { font-variant-numeric: tabular-nums; white-space: nowrap; }
.studio-chat__poll-meta { color: var(--studio-paper-ink-2); font-size: 0.8rem !important; }

/* ---------- Eigene Nachricht unterwegs ---------- */
.studio-chat__msg.is-local { opacity: 0.92; }
.studio-chat__state { margin-top: 0.25rem !important; color: var(--studio-paper-ink-2); font-size: 0.8rem !important; font-weight: 650; }
.studio-chat__state.is-sending { animation: studio-wait 1.4s ease-in-out infinite; }
.studio-chat__state.is-sent { color: oklch(40% 0.12 150); }
.studio-chat__state.is-failed { color: var(--studio-onair); }
#chat-content .studio-chat__retry { min-height: 36px; margin: 0.25rem 0.3rem 0 0; }

/* ---------- Angepinnt ---------- */
.studio-chat__pin {
	margin: 0 0 0.6rem;
	padding: 0.1rem 0.6rem 0;
	border: 2px solid var(--studio-paper-ink);
	border-radius: var(--studio-radius-s);
	background: oklch(93% 0.05 88);
	rotate: -0.4deg;
}

.studio-chat__pin-label {
	margin: 0.4rem 0 0 !important;
	font: 400 0.95rem / 1 var(--studio-font-tape);
}

.studio-chat__pin-label::before { content: "📌 " / ""; }
.studio-chat__pin .studio-chat__msg { border-bottom: 0; }

/* ---------- Ungelesen am Sticker ---------- */
#stufu-global-chat #btn-chat { position: relative; }

.studio-chat__unread {
	position: absolute;
	top: -6px;
	left: -6px;
	z-index: 1;
	min-width: 26px;
	height: 26px;
	padding: 0 0.35rem;
	border-radius: 13px;
	background: var(--studio-brand);
	box-shadow: 0 0 0 3px var(--studio-surface);
	color: var(--studio-on-brand);
	font: 800 0.8rem / 26px var(--studio-font-text);
	font-variant-numeric: tabular-nums;
	text-align: center;
	pointer-events: none;
}

#stufu-global-chat #btn-chat.is-chat-open .studio-chat__unread { display: none; }

/* ---------- Schreiben: Antwort-Hinweis, Abstimmung, Honigtopf ---------- */
.studio-chat__replying {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	order: 3;
	padding: 0.3rem 0.3rem 0.3rem 0.6rem;
	border-left: 3px solid var(--studio-brand);
	background: oklch(93% 0.03 234);
	font-size: 0.85rem;
}

.studio-chat__replying p { flex: 1; margin: 0; overflow-wrap: anywhere; }
.studio-chat__replying q { color: var(--studio-paper-ink-2); }

#chat-content .studio-chat__replying button {
	flex: none;
	width: 44px;
	height: 44px;
	border: 0;
	background: transparent;
	color: var(--studio-paper-ink);
	font-size: 1rem;
	cursor: pointer;
}

.studio-chat__polltoggle { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.6rem; order: 3; }
.studio-chat__polltoggle small { color: var(--studio-paper-ink-2); font-size: 0.8rem; }

#chat-content .studio-chat__polltoggle button {
	min-height: 44px;
	padding: 0 0.85rem;
	border: 1.5px solid var(--studio-paper-ink);
	border-radius: var(--studio-radius-s);
	background: transparent;
	color: var(--studio-paper-ink);
	font: 700 0.9rem / 1 var(--studio-font-text);
	cursor: pointer;
}

#chat-content .studio-chat__polltoggle button[aria-pressed="true"] { background: var(--studio-paper-ink); color: var(--studio-paper); }

.studio-chat__pollset { display: grid; gap: 0.5rem; order: 3; margin: 0; padding: 0; border: 0; }
.studio-chat__pollset legend { padding: 0; font-size: 0.9rem; font-weight: 700; }
#chat-content .studio-chat__poll-field { display: grid; gap: 0.2rem; font-weight: 600; }

#chat-content .studio-chat__poll-field input {
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: 0.45rem 0.6rem;
	border: 1px solid oklch(70% 0.015 260);
	border-radius: var(--studio-radius-s);
	background: oklch(99% 0.003 250);
	color: var(--studio-paper-ink);
	font: 400 1rem / 1.4 var(--studio-font-text);
}

/* Honigtopf: für Menschen unsichtbar, für Bots ein normales Feld */
.studio-chat__trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.studio-chat__state.is-sending { animation: none; }
}