/* RealInside Kommentare – nutzt die Design-Tokens des Themes (--ri-*), mit Fallbacks */
.ric, .ric-composer, .ric-toast {
	--ric-accent: var(--ri-accent, #c9a227);
	--ric-text: var(--ri-text, #111);
	--ric-muted: var(--ri-muted, #6b6f76);
	--ric-line: var(--ri-line, #e7e7ea);
	--ric-bg: var(--ri-bg, #fff);
	--ric-navy: var(--ri-navy, #0B2A5B);
	--ric-pad: var(--ri-pad, 20px);
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
	color: var(--ric-text);
}
.ric :is(h2, p, button, span, time, div, textarea, input, strong),
.ric-composer :is(button, span, textarea, input, strong, form, div) { font-family: inherit; }
.ric button, .ric-composer button {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	text-transform: none;
	letter-spacing: 0;
	line-height: 1;
	box-shadow: none;
	cursor: pointer;
}

/* ---------- Bereich ---------- */
.ric {
	margin-top: 28px;
	padding-bottom: 96px;
	border-top: 8px solid #f2f2f4;
	scroll-margin-top: 56px;
}
.ric-head { padding: 20px var(--ric-pad) 0; }
.ric .ric-title {
	margin: 0;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ric-text);
}
.ric-title span { color: var(--ric-accent); }

/* Sortierung – gleiche Optik wie TOP NEWS / TICKER */
.ric-sort {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 14px calc(-1 * var(--ric-pad)) 0;
	border-bottom: 1px solid var(--ric-line);
}
.ric .ric-sort button {
	height: 44px;
	margin-bottom: -1px;
	border-bottom: 3px solid transparent;
	color: var(--ric-muted);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.ric .ric-sort button.is-active { color: var(--ric-text); border-bottom-color: var(--ric-accent); }

/* ---------- Liste ---------- */
.ric-thread { border-bottom: 1px solid var(--ric-line); }
.ric-item {
	display: flex;
	gap: 12px;
	padding: 16px var(--ric-pad);
}
.ric-item--reply { padding-top: 4px; padding-left: calc(var(--ric-pad) + 48px); }
.ric-item--reply .ric-avatar { width: 30px; height: 30px; font-size: 13px; }
.ric-replies:not(:empty) { padding-bottom: 8px; }

.ric-avatar {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	background: var(--ric-navy);
	color: var(--ric-accent);
	font-size: 15px;
	font-weight: 800;
}
.ric-body { flex: 1; min-width: 0; }
.ric-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.ric-author { font-size: 15px; font-weight: 700; }
.ric-badge {
	padding: 3px 6px;
	background: var(--ric-accent);
	color: #111;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.ric-meta time { color: var(--ric-muted); font-size: 13px; font-weight: 500; }
.ric-text-body {
	margin-top: 4px;
	font-size: 16px;
	line-height: 1.5;
	overflow-wrap: anywhere;
}
.ric-mention { color: var(--ric-accent); font-weight: 700; }

.ric-actions { display: flex; align-items: center; gap: 20px; margin-top: 8px; }
.ric .ric-reply {
	height: 32px;
	color: var(--ric-muted);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.ric .ric-like {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 32px;
	color: var(--ric-muted);
	font-size: 14px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.ric-like svg path { fill: transparent; transition: fill .15s; }
.ric .ric-like.is-liked { color: var(--ric-accent); }
.ric-like.is-liked svg path { fill: currentColor; }
.ric-like.is-liked svg { animation: ric-pop .25s ease; }
@keyframes ric-pop { 50% { transform: scale(1.25); } }

.ric-item.is-new, .ric-thread.is-new > .ric-item:first-child { animation: ric-flash 1.6s ease; }
@keyframes ric-flash { from { background: rgba(201, 162, 39, .18); } to { background: transparent; } }

.ric-empty { margin: 0; padding: 24px var(--ric-pad); color: var(--ric-muted); font-size: 15px; }
.ric-empty[hidden] { display: none; }

.ric-loading { display: flex; gap: 6px; justify-content: center; padding: 28px 0; }
.ric-loading span { width: 8px; height: 8px; background: var(--ric-accent); animation: ric-dot 1s infinite ease-in-out; }
.ric-loading span:nth-child(2) { animation-delay: .15s; }
.ric-loading span:nth-child(3) { animation-delay: .3s; }
@keyframes ric-dot { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* ---------- Composer (Leiste + Eingabe-Sheet) ---------- */
.ric-composer {
	position: fixed;
	left: 50%;
	bottom: 0;
	z-index: 40;
	transform: translateX(-50%);
	box-sizing: border-box;
	width: 100%;
	max-width: 640px;
	background: var(--ric-bg);
	border-top: 1px solid var(--ric-line);
	padding-bottom: env(safe-area-inset-bottom, 0px);
}
.ric-composer[data-state="open"] { box-shadow: 0 -12px 32px rgba(0, 0, 0, .12); }
.ric-composer[data-state="open"] .ric-bar { display: none; }

.ric-composer .ric-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 10px var(--ric-pad);
	text-align: left;
}
.ric-avatar--brand { width: 40px; height: 40px; background: none; }
.ric-avatar--brand img { display: block; width: 40px; height: 40px; }
.ric-bar-input { flex: 1; color: var(--ric-muted); font-size: 17px; }
.ric-bar-send {
	color: var(--ric-accent);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.ric-sheet { padding: 6px var(--ric-pad) 12px; }
.ric-sheet[hidden] { display: none; }
.ric-sheet-head { display: flex; align-items: center; justify-content: space-between; height: 44px; }
.ric-sheet-title { font-size: 14px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.ric-composer .ric-close { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -12px; }

.ric-replying {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 8px;
	padding: 8px 10px;
	background: #f6f4ec;
	border-left: 3px solid var(--ric-accent);
	font-size: 14px;
}
.ric-replying[hidden] { display: none; }
.ric-composer .ric-replying-cancel { margin-left: auto; color: var(--ric-muted); font-size: 13px; font-weight: 600; }

.ric-composer .ric-name,
.ric-composer .ric-text {
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin: 0 0 8px;
	padding: 12px 14px;
	border: 1px solid var(--ric-line);
	border-radius: 0;
	background: #fff;
	color: var(--ric-text);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	box-shadow: none;
}
.ric-composer .ric-text { min-height: 84px; resize: none; }
.ric-composer .ric-name:focus,
.ric-composer .ric-text:focus { outline: none; border-color: var(--ric-navy); }
.ric-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

.ric-sheet-foot { display: flex; align-items: center; gap: 12px; }
.ric-error { flex: 1; color: #c0392b; font-size: 13px; font-weight: 600; }
.ric-composer .ric-submit {
	height: 44px;
	padding: 0 22px;
	background: var(--ric-navy);
	color: var(--ric-accent);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.ric-composer .ric-submit:disabled { opacity: .5; cursor: default; }

/* ---------- Hinweis ---------- */
.ric-toast {
	position: fixed;
	left: 50%;
	bottom: 84px;
	z-index: 50;
	transform: translateX(-50%);
	max-width: calc(100% - 40px);
	padding: 12px 16px;
	background: var(--ric-navy);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
}
.ric-toast[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
	.ric-like.is-liked svg, .ric-item.is-new, .ric-loading span { animation: none; }
}

/* Melden */
.ric .ric-report {
	height: 32px;
	margin-left: auto;
	color: var(--ric-muted);
	font-size: 12px;
	font-weight: 600;
	opacity: .7;
}
.ric .ric-report.is-confirm { color: #c0392b; font-weight: 800; opacity: 1; }
.ric .ric-report:disabled { cursor: default; opacity: .5; }

/* Beim Runterscrollen einklappen (Steuerung in front.js des Themes) */
.ric-composer { transition: transform .25s ease, box-shadow .2s; will-change: transform; }
.ric-composer.is-hidden { transform: translate(-50%, 110%); }
@media (prefers-reduced-motion: reduce) { .ric-composer { transition: none; } }