/* ==========================================================
   Astrocamp Comments — 4. Ausklapp-Seitenleiste
   Lasche links, vertikal mittig (spiegelbildlich zur admin-
   only Social-Media-Lasche aus ac_social_auto, die rechts
   vertikal mittig sitzt) — Standardposition, per Drag frei
   verschiebbar (siehe accom-frontend.js).

   Farb-/Größenwerte kommen als CSS-Variablen aus den
   Einstellungen (siehe ACCOM_Render::enqueue_frontend_assets()):
   --accom-panel-width, --accom-color-empty, --accom-color-full,
   --accom-color-neutral.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,600&family=Public+Sans:wght@400;500;600&display=swap');

:root {
	--accom-panel-width: 380px;
	--accom-color-empty: #3FA34D;
	--accom-color-full: #FF0000;
	--accom-color-neutral: #009DD5;
}

.accom-tab {
	position: fixed;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	z-index: 9160; /* über dem Panel (9110), Lasche bleibt beim Ausklappen anklickbar */
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px 10px;
	background: #1B2626;
	color: #FFF8E7;
	border: 1px solid #009DD5;
	border-left: none;
	border-radius: 0 8px 8px 0;
	box-shadow: 0 0 24px rgba(0,0,0,0.35);
	cursor: grab;
	font-family: 'Public Sans', system-ui, sans-serif;
	font-size: 12px;
	letter-spacing: 0.06em;
	font-weight: 600;
	transition: box-shadow 0.15s ease, background 0.15s ease;
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
}
.accom-tab span { writing-mode: vertical-rl; }
.accom-tab svg { flex-shrink: 0; }
.accom-tab:hover { background: #22302f; }

.accom-tab.accom-tab-dragging {
	cursor: grabbing;
	transition: none;
}

/* Kommentar-Status: eigener Farbkanal über Rahmen + Status-Punkt im Icon
   selbst (kein zusätzliches Flex-Element mehr — hielt die Lasche unnötig
   breit), damit die Hintergrundfläche dunkel (und der Text damit gut lesbar)
   bleiben kann. Farbe allein wäre außerdem für farbenblinde Besucher kein
   verlässliches Signal, daher zusätzlich Form (Punkt) UND der Titel-Tooltip
   (siehe title-Attribut im PHP). */
.accom-tab-empty { border-color: var(--accom-color-empty); }
.accom-tab-empty .accom-tab-status-dot {
	fill: var(--accom-color-empty);
	filter: drop-shadow(0 0 3px var(--accom-color-empty)) drop-shadow(0 0 5px var(--accom-color-empty));
}

.accom-tab-full { border-color: var(--accom-color-full); }
.accom-tab-full .accom-tab-status-dot {
	fill: var(--accom-color-full);
	filter: drop-shadow(0 0 3px var(--accom-color-full)) drop-shadow(0 0 5px var(--accom-color-full));
}

.accom-tab-neutral { border-color: var(--accom-color-neutral); }
.accom-tab-neutral .accom-tab-dot-bg,
.accom-tab-neutral .accom-tab-status-dot { display: none; }

/* Dunkler "Ausstanz"-Kreis unter dem eigentlichen Status-Punkt, damit er sich
   vom Sprechblasen-Umriss abhebt statt mit dessen Strich zu verschmelzen.
   box-shadow (frühere Variante als eigenes Element) wirkt auf SVG-Formen
   nicht — das Leuchten kommt hier stattdessen über zwei gestapelte
   drop-shadow()-Filter (weicher, größerer Schein + kompakterer Kern). */
.accom-tab-dot-bg { fill: #1B2626; }

/* Geöffnet-Zustand: eigener, vom Kommentarstatus unabhängiger Hinweiskanal
   (heller Fokusring statt Farbumschlag) — sonst würde ein offenes Panel bei
   "noch kein Kommentar" (grün) plötzlich wie "Kommentare vorhanden" (rot)
   aussehen, wenn man wie bei ac_sidebars/ac_social_auto den Rahmen beim
   Öffnen einfach rot einfärben würde. */
.accom-tab[aria-expanded="true"] {
	box-shadow: 0 0 0 2px rgba(255,248,231,0.55), 0 0 24px rgba(0,0,0,0.45);
}

/* ---------- Panel ---------- */

.accom-panel {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	width: min(var(--accom-panel-width), 90vw);
	background: #2A3538;
	color: #FFF8E7;
	font-family: 'Public Sans', system-ui, sans-serif;
	z-index: 9110;
	display: flex;
	flex-direction: column;
	box-shadow: 0 0 40px rgba(0,0,0,0.5);
	transform: translateX(-100%);
	transition: transform 0.25s ease;
	border-right: 1px solid rgba(255,248,231,0.12);
}
.accom-panel.is-open { transform: translateX(0); }

.accom-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 22px;
	border-bottom: 1px solid rgba(255,248,231,0.10);
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: 16px;
	font-weight: 600;
}

.accom-panel-close {
	background: none;
	border: none;
	color: #FFF8E7;
	opacity: 0.6;
	font-size: 18px;
	cursor: pointer;
	line-height: 1;
	padding: 4px;
}
.accom-panel-close:hover { opacity: 1; }

.accom-panel-body {
	flex: 1;
	overflow-y: auto;
	padding: 22px;
	scrollbar-width: thin;
	scrollbar-color: #009DD5 rgba(255,248,231,0.08);
}
.accom-panel-body::-webkit-scrollbar { width: 8px; }
.accom-panel-body::-webkit-scrollbar-track { background: rgba(255,248,231,0.06); }
.accom-panel-body::-webkit-scrollbar-thumb { background: #009DD5; border-radius: 4px; }
.accom-panel-body::-webkit-scrollbar-thumb:hover { background: #4DC3EA; }

.accom-panel-hint { font-size: 13px; opacity: 0.6; margin: 0 0 16px; }

/* ---------- Kommentarliste (wp_list_comments) ---------- */

.accom-comment-list,
.accom-comment-list ul.children {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}
.accom-comment-list ul.children {
	margin-top: 12px;
	padding-left: 16px;
	border-left: 2px solid rgba(255,248,231,0.10);
}
.accom-comment-list li.comment,
.accom-comment-list li.pingback {
	margin-bottom: 14px;
}
.accom-comment-list .comment-body {
	padding: 12px 14px;
	border: 1px solid rgba(255,248,231,0.08);
	border-radius: 4px;
}
.accom-comment-list .comment-author { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
/* width/height/object-fit bewusst mit !important: verhindert, dass ein
   theme-weites Bild-Reset (z.B. verbreitetes "img{max-width:100%;height:auto}")
   den Avatar verzerrt, weil er sonst ohne eigene Breitenangabe im Flex-Layout
   gestreckt/gequetscht würde — genau das war das gemeldete Problem im
   Startseiten-Feed (siehe .accom-feed-avatar weiter unten). */
.accom-comment-list .comment-author .avatar {
	width: 36px !important;
	height: 36px !important;
	object-fit: cover;
	border-radius: 50%;
	display: block;
	flex-shrink: 0;
}
.accom-comment-list .comment-author .fn { font-style: normal; font-weight: 600; font-size: 13px; }
.accom-comment-list .comment-meta { font-size: 11px; opacity: 0.5; margin-bottom: 8px; }
.accom-comment-list .comment-meta a { color: inherit; text-decoration: none; }
.accom-comment-list .comment-content p { margin: 0 0 0.6em; font-size: 13px; line-height: 1.55; }
.accom-comment-list .comment-content p:last-child { margin-bottom: 0; }
.accom-comment-list .reply { margin-top: 8px; }
.accom-comment-list .comment-reply-link,
.accom-comment-list .comment-edit-link {
	font-size: 11px;
	font-weight: 600;
	color: #009DD5;
	text-decoration: none;
}
.accom-comment-list .comment-reply-link:hover { color: #4DC3EA; }
.accom-comment-list .comment-awaiting-moderation {
	display: block;
	margin-top: 6px;
	font-size: 11px;
	color: #f5c451;
}

/* ---------- Kommentarformular (comment_form()) ---------- */

/* Alles unter .accom-comment-form bekommt Schriftgröße/-familie bewusst mit
   !important: das Panel hängt per wp_footer direkt im Body, nicht in einem
   vom Theme selbst gestalteten Inhaltsbereich — trotzdem können generische,
   global bzw. sehr spät ausgegebene Theme-/Block-Editor-Stile (z.B. globale
   Schriftgrößen für p/h3) hier hineinwirken. Ohne !important gewann das im
   echten Theme sichtbar (Formular-Überschrift/Hinweistexte viel zu groß) —
   siehe Konzeptdokument, Abschnitt 9 "Theme-Abhängigkeit". */
.accom-comment-form { margin-top: 4px; }

/* WICHTIG: #reply-title/.comment-reply-title und #cancel-comment-reply-link
   liegen im von comment_form() erzeugten Markup NICHT innerhalb des
   <form class="accom-comment-form">-Elements, sondern als Geschwister davor
   (beide zusammen innerhalb von #respond) — ".accom-comment-form ..." als
   Vorfahren-Selektor hätte hier NIE gegriffen. Deshalb Scoping über
   #accom-panel (die einzige Kommentarausgabe der Seite, da die
   Standardausgabe des Themes per comments_template-Filter unterdrückt ist). */
#accom-panel #reply-title,
#accom-panel .comment-reply-title {
	font-family: 'Public Sans', system-ui, sans-serif !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
	line-height: 1.3 !important;
	opacity: 0.85;
	margin: 0 0 14px !important;
}
#accom-panel #cancel-comment-reply-link {
	font-size: 11px !important;
	font-weight: 400 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	opacity: 0.6;
	margin-left: 8px;
}

.accom-comment-form p {
	margin: 0 0 12px !important;
	font-size: 12px !important;
	line-height: 1.5 !important;
	font-family: 'Public Sans', system-ui, sans-serif !important;
}
.accom-comment-form label {
	display: block;
	font-size: 12px !important;
	font-weight: 500;
	opacity: 0.75;
	margin-bottom: 4px;
}
.accom-comment-form input[type="text"],
.accom-comment-form input[type="email"],
.accom-comment-form input[type="url"],
.accom-comment-form textarea {
	width: 100%;
	box-sizing: border-box;
	background: #1F2729;
	color: #FFF8E7;
	border: 1px solid rgba(255,248,231,0.25);
	border-radius: 4px;
	padding: 8px 10px;
	font-family: inherit !important;
	font-size: 13px !important;
}
.accom-comment-form textarea { min-height: 100px; resize: vertical; }
.accom-comment-submit {
	background: transparent !important;
	border: 1px solid #009DD5 !important;
	color: #FFF8E7 !important;
	padding: 9px 18px !important;
	border-radius: 4px !important;
	font-family: 'Public Sans', system-ui, sans-serif !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
	cursor: pointer;
}
.accom-comment-submit:hover { background: #009DD5 !important; color: #2A3538 !important; }
.accom-comment-form .comment-notes,
.accom-comment-form .logged-in-as {
	font-size: 11px !important;
	opacity: 0.6;
}
.accom-comment-form .comment-notes a,
.accom-comment-form .logged-in-as a {
	font-size: inherit !important;
	color: #009DD5;
}

/* ---------- Startseiten-Feed ("letzte Kommentare") ---------- */

.accom-feed-item {
	display: flex;
	gap: 12px;
	padding: 13px 14px;
	border: 1px solid rgba(255,248,231,0.08);
	border-radius: 4px;
	margin-bottom: 12px;
	color: #FFF8E7;
	text-decoration: none;
}
.accom-feed-item:hover { border-color: #009DD5; color: #FFF8E7; }
/* Siehe Kommentar bei .accom-comment-list .comment-author .avatar oben —
   dieselbe Absicherung gegen ein theme-weites Bild-Reset. */
.accom-feed-avatar {
	width: 32px !important;
	height: 32px !important;
	object-fit: cover;
	flex-shrink: 0;
	border-radius: 50%;
	display: block;
}
/* Bezugs-Beitrag: eigene, klar erkennbare "Überschrift" über dem Kommentar
   selbst, aber bewusst dezent — kleines Eyebrow-Label + Titel in gedecktem
   Hellblau, keine größere Schrift als der Rest des Panels. */
.accom-feed-target { margin-bottom: 6px; }
.accom-feed-target-label {
	display: block;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	opacity: 0.45;
	margin-bottom: 2px;
}
.accom-feed-target-title {
	display: block;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	color: #4DC3EA;
}
.accom-feed-item:hover .accom-feed-target-title { color: #7ED2F0; }

.accom-feed-author-row {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin-bottom: 8px;
	font-size: 11px;
	opacity: 0.6;
}
.accom-feed-author { font-weight: 600; opacity: 1; }

.accom-feed-excerpt { font-size: 13px; line-height: 1.5; opacity: 0.85; }

/* ---------- Overlay (mobil) ---------- */

.accom-panel-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.4);
	z-index: 9060;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
}
.accom-panel-overlay.is-visible { opacity: 1; pointer-events: auto; }

@media (max-width: 480px) {
	.accom-tab span { display: none; }
}