/*
 * Chat als Notizblock (Schritt 6, Thema 8): Ringbindung oben, Reiter „Mitlesen“ / „Schreiben“ als eingesteckte
 * Register, Nachrichten auf Linien, Crew mit blauem Abzeichen „Studio“. Markup: inc/chat.php, Reiter:
 * studio-chat.js, Sticker und Position: studio-dock.css. Alle Seiten.
 */

#stufu-global-chat #chat-content.comment-box {
	max-height: none;
	margin: 0 0 0.9rem;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	pointer-events: auto;
}

.studio-chat {
	position: relative;
	color: var(--studio-paper-ink);
	filter: drop-shadow(0 22px 30px oklch(0% 0 0 / 0.65));
}

/* Ringbindung */
.studio-chat__rings {
	position: relative;
	z-index: 2;
	display: block;
	height: 22px;
	margin-bottom: -10px;
	background:
		radial-gradient(circle at 50% 70%, oklch(14% 0.01 250) 0 4px, transparent 5px) 0 0 / 26px 22px repeat-x,
		linear-gradient(90deg, transparent 0 9px, oklch(70% 0.01 250) 9px 17px, transparent 17px) 0 0 / 26px 14px repeat-x;
}

/* Reiter als eingesteckte Register */
.studio-chat__tabs {
	display: flex;
	gap: 4px;
	padding: 14px 0.75rem 0;
	border-bottom: 2px solid var(--studio-paper-ink);
	background: var(--studio-paper);
}

.studio-chat__tabs [role="tab"] {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 44px;
	padding: 0.35rem 1rem 0.2rem;
	border: 0;
	border-radius: var(--studio-radius-s) var(--studio-radius-s) 0 0;
	background: oklch(88% 0.04 88);
	color: var(--studio-paper-ink);
	font: 400 1.05rem / 1 var(--studio-font-tape);
	translate: 0 3px;
	cursor: pointer;
}

.studio-chat__tabs [role="tab"] small {
	padding: 0.1rem 0.35rem;
	border-radius: 2px;
	background: var(--studio-paper-ink);
	color: var(--studio-paper);
	font: 800 0.7rem / 1.2 var(--studio-font-text);
	font-variant-numeric: tabular-nums;
}

.studio-chat__tabs [aria-selected="true"] { background: var(--studio-paper-ink); color: var(--studio-paper); translate: 0 0; }
.studio-chat__tabs [aria-selected="true"] small { background: var(--studio-brand); color: var(--studio-on-brand); }
.studio-chat__tabs [role="tab"]:focus-visible { outline: 2px solid var(--studio-brand); outline-offset: 2px; }
.studio-chat [hidden] { display: none !important; }

.studio-chat__panel {
	max-height: min(52vh, 420px);
	overflow-y: auto;
	padding: 1rem 1.2rem 1.1rem;
	background: var(--studio-grain), var(--studio-paper);
	scrollbar-color: var(--studio-paper-ink-2) transparent;
	scrollbar-width: thin;
}

.studio-chat__panel:focus-visible { outline: 2px solid var(--studio-brand); outline-offset: -2px; }

/* ---------- Mitlesen: Nachrichten auf Linien ---------- */
.studio-chat__msgs { margin: 0; padding: 0; list-style: none; }
.studio-chat__msg { padding: 0.6rem 0; border-bottom: 1px solid oklch(80% 0.03 240); }
.studio-chat__msg:last-child { border-bottom: 0; }
.studio-chat__msg p { margin: 0; font-size: inherit; line-height: 1.45; }

.studio-chat__who {
	display: flex;
	align-items: baseline;
	gap: 0.45rem;
	margin-bottom: 0.15rem !important;
	font-size: 0.9rem;
}

.studio-chat__who time {
	margin-left: auto;
	color: var(--studio-paper-ink-2);
	font-size: 0.78rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.studio-chat__badge {
	padding: 0.12rem 0.4rem 0.08rem;
	border-radius: 2px;
	background: var(--studio-brand);
	color: var(--studio-on-brand);
	font: 800 0.65rem / 1.2 var(--studio-font-text);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	rotate: -3deg;
}

.studio-chat__msg.is-crew {
	margin-left: -0.5rem;
	padding-left: 0.5rem;
	background: linear-gradient(90deg, oklch(71.5% 0.135 234 / 0.12), transparent 70%);
}

.studio-chat__text { font-size: 0.95rem; overflow-wrap: anywhere; }
.studio-chat__text p + p { margin-top: 0.4rem; }
.studio-chat__text a { color: oklch(42% 0.13 250); }
.studio-chat__pending, .studio-chat__empty { color: var(--studio-paper-ink-2); font-size: 0.85rem; }

/* ---------- Schreiben ---------- */
.studio-chat .comment-respond { margin: 0; }
.studio-chat__form { display: grid; gap: 0.75rem; margin: 0; }
.studio-chat__form > * { margin: 0; }
.studio-chat__form .comment-form-comment { order: 3; }
.studio-chat__form .comment-form-author { order: 1; }
.studio-chat__form .comment-form-email { order: 2; }
.studio-chat__form .comment-form-cookies-consent { order: 4; }
.studio-chat__form .form-submit { order: 5; }
.studio-chat__form > [style*="display: none"] { order: 6; }

.studio-chat__form :is(.comment-form-author, .comment-form-email, .comment-form-comment) { display: grid; gap: 0.3rem; }
/* Das Eltern-Theme gibt Formular-Beschriftungen feste Breiten und zentriert sie */
#chat-content .studio-chat__form label {
	display: block;
	width: auto !important;
	margin: 0;
	padding: 0;
	color: var(--studio-paper-ink);
	font-size: 0.9rem;
	font-weight: 700;
	text-align: left;
}
.studio-chat__form label small { color: var(--studio-paper-ink-2); font-weight: 400; }

#chat-content .studio-chat__form :is(input[type="text"], input[type="email"], textarea) {
	box-sizing: border-box;
	width: 100% !important;
	max-width: none !important;
	min-height: 44px;
	padding: 0.5rem 0.65rem;
	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);
}

.studio-chat__form textarea { resize: vertical; }
.studio-chat__form :is(input, textarea):focus-visible { outline: 2px solid var(--studio-brand); outline-offset: 1px; border-color: var(--studio-paper-ink); }

.studio-chat__form .comment-form-cookies-consent { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
#chat-content .studio-chat__form .comment-form-cookies-consent label { display: inline; font-weight: 400; }
#chat-content .studio-chat__form input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin: 0 0.5rem 0 0; accent-color: var(--studio-paper-ink); }

#chat-content .studio-chat__form .submit {
	min-height: 44px;
	padding: 0 1.2rem;
	border: 0;
	border-radius: var(--studio-radius-s) !important;
	background: var(--studio-paper-ink);
	color: var(--studio-paper);
	font: 650 var(--studio-step-0) / 1 var(--studio-font-text);
	cursor: pointer;
}

.studio-chat__form .submit:hover { background: oklch(32% 0.03 260); }
.studio-chat__form .submit:focus-visible { outline: 2px solid var(--studio-brand); outline-offset: 2px; }
.studio-chat .akismet_comment_form_privacy_notice { margin: 0.75rem 0 0; color: var(--studio-paper-ink-2); font-size: 0.8rem; }
.studio-chat .akismet_comment_form_privacy_notice a { color: oklch(42% 0.13 250); }