/*********************************************************
 * Couch & Agora – Kommentare & Inline-Popover (v3.0 CLEAN)
 * 
 * BEREINIGT: Dark Mode wurde in zentrales Snippet ausgelagert
 * 
 * STRUKTUR:
 * 1. Chips (überall verwendbar)
 * 2. Inline-Buttons (💬 an Überschriften)
 * 3. Inline-Popover
 * 4. Quick-Resonanz-Box
 * 5. Pseudonym-System (Quick + Inline)
 * 6. Kommentar-Aggregator
 * 7. Sonstiges
 *********************************************************/

/* ========== 1. CHIPS (Resonanz/Dissonanz/Gefühl etc.) ========== */

.ca-chips{ 
  display: flex; 
  flex-wrap: wrap; 
  gap: .35rem; 
  margin: .3rem 0 .45rem; 
}

.ca-chips button,
.ca-chips .chip {
  border: 1px solid var(--ca-border-light, #e6e3dd); 
  background: #fff; 
  border-radius: 999px;
  padding: .14rem .5rem; 
  cursor: pointer; 
  font-size: .9em;
  transition: all .18s ease;
}

.ca-chips button.on,
.ca-chips .chip.on { 
  background: var(--ca-accent, #0F766E); 
  color: #fff; 
  border-color: var(--ca-accent, #0F766E); 
}

.ca-chips button:hover,
.ca-chips .chip:hover {
  border-color: var(--ca-accent, #0F766E);
  transform: translateY(-1px);
}

/* Feedback-Meldungen */
.ca-form-msg { 
  margin: .45rem 0 0; 
  font-size: .92em; 
}
.ca-form-msg.ok { color: #106a60; } 
.ca-form-msg.err { color: #a33; }

/* ========== 2. INLINE-BUTTONS (💬 neben Überschriften) ========== */

/* Standard: ausgeblendet */
.annot-btn { 
  display: none !important; 
}

/* Auf Single-Artikeln: an ALLEN H2-H5 sichtbar */
body.single h2 .annot-btn,
body.single h3 .annot-btn,
body.single h4 .annot-btn,
body.single h5 .annot-btn,
body.single article h2 .annot-btn,
body.single article h3 .annot-btn,
body.single article h4 .annot-btn,
body.single article h5 .annot-btn,
body.single .entry-content h2 .annot-btn,
body.single .entry-content h3 .annot-btn,
body.single .entry-content h4 .annot-btn,
body.single .entry-content h5 .annot-btn,
body.single .wp-block-post-content h2 .annot-btn,
body.single .wp-block-post-content h3 .annot-btn,
body.single .wp-block-post-content h4 .annot-btn,
body.single .wp-block-post-content h5 .annot-btn {
  display: inline-flex !important;
  margin-left: .35rem;
  border: 1px solid var(--ca-border-light, #e6e3dd);
  background: #fff;
  border-radius: 999px;
  padding: .1rem .4rem;
  font-size: .85em;
  cursor: pointer;
  vertical-align: middle;
  position: relative;
  z-index: 10;
  transition: all .18s ease;
}

body.single :is(h2,h3,h4,h5) .annot-btn:hover {
  background: var(--ca-accent, #0F766E);
  color: #fff;
  border-color: var(--ca-accent, #0F766E);
  transform: scale(1.1);
}

body.single :is(h2,h3,h4,h5) .annot-btn:focus-visible {
  outline: 2px solid var(--ca-accent, #0F766E);
  outline-offset: 2px;
}

/* Headings relativ positionieren (für Popover-Anchor) */
body.single :is(.reading-wrap,.wp-block-post-content,.entry-content) :is(h2,h3,h4,h5) {
  position: relative;
}

/* ========== 3. INLINE-POPOVER ========== */

.annot-pop {
  position: absolute; 
  z-index: 10040; 
  width: min(380px, 92vw);
  background: #fff; 
  color: #222; 
  border: 1px solid #e6e3dd; 
  border-radius: 12px;
  box-shadow: 0 14px 30px rgba(0,0,0,.15); 
  padding: .75rem .85rem;
}

.annot-head { 
  font-weight: 700; 
  margin: 0 0 .2rem; 
}

.annot-sub { 
  font-size: .92em; 
  color: #555; 
  margin: 0 0 .45rem; 
}

.annot-txt { 
  width: 100%; 
  border: 1px solid #ddd; 
  border-radius: 8px; 
  padding: .5rem .6rem;
  font-family: inherit;
  line-height: 1.5;
}

.annot-row { 
  display: flex; 
  gap: .45rem; 
  margin-top: .5rem; 
  flex-wrap: wrap; 
}

.annot-row button { 
  border: 0; 
  border-radius: 999px; 
  padding: .45rem .8rem; 
  cursor: pointer;
  font-weight: 600;
  transition: all .18s ease;
}

.annot-send { 
  background: var(--ca-accent, #0F766E); 
  color: #fff; 
}

.annot-send:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.annot-cancel { 
  background: #eee; 
  color: #333;
}

.annot-cancel:hover {
  background: #ddd;
}

.annot-msg { 
  margin: .35rem 0 0; 
  font-size: .92em; 
} 

.annot-msg.ok { color: #106a60; } 
.annot-msg.err { color: #a33; }

/* ========== 4. QUICK-RESONANZ-BOX ========== */

.resonanz-box {
  margin: .8rem 0 1rem;
  border: 1px solid var(--ca-border-light, #e6e3dd);
  border-radius: 12px;
  background: var(--ca-bg-card, #fff);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  overflow: hidden;
}

.resonanz-box > summary {
  list-style: none; 
  cursor: pointer; 
  font-weight: 700;
  padding: .6rem .9rem; 
  background: linear-gradient(180deg, #fff, #fbfaf7);
}

.resonanz-box > summary::-webkit-details-marker { 
  display: none; 
}

.resonanz-box[open] > summary { 
  border-bottom: 1px solid var(--ca-border-light, #e6e3dd); 
}

.resonanz-box .resonanz-mini { 
  padding: .7rem .95rem .95rem; 
}

.resonanz-box .rz-intro { 
  margin: .1rem 0 .4rem; 
  color: var(--ca-text-secondary, #6a655f); 
  line-height: 1.55;
}

.resonanz-box .row,
.resonanz-box .rz-row { 
  display: flex; 
  gap: .6rem; 
  align-items: center; 
  margin-top: .5rem; 
  flex-wrap: wrap; 
}

.resonanz-box .resonanz-mini textarea {
  width: 100%; 
  border: 1px solid var(--ca-border-light, #e6e3dd); 
  border-radius: 10px;
  padding: .7rem .8rem; 
  line-height: 1.6; 
  background: #fff;
  font-family: inherit;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.resonanz-box .resonanz-mini textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--ca-accent, #0F766E) 35%, #e6e3dd);
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}

.resonanz-box .resonanz-mini .submit {
  border: 1px solid var(--ca-accent, #0F766E);
  background: var(--ca-accent, #0F766E);
  color: #fff; 
  border-radius: 999px; 
  padding: .55rem .95rem; 
  font-weight: 700; 
  cursor: pointer;
  transition: all .18s ease;
}

.resonanz-box .resonanz-mini .submit:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.resonanz-box .resonanz-mini .submit:disabled { 
  opacity: .65; 
  cursor: not-allowed; 
  filter: saturate(.85); 
}

.resonanz-box .rz-publish-note { 
  margin: .45rem 0 0; 
  color: var(--ca-text-secondary, #6a655f); 
  font-size: .9em;
}

/* Keine Nummern vor Überschriften in Resonanz-Box */
.resonanz-box :is(h2,h3,h4)::before,
.comment-respond :is(h2,h3,h4)::before { 
  content: none !important; 
}

/* ========== 5. PSEUDONYM-SYSTEM ========== */

/* Quick-Resonanz: Pseudonym-Bereich */
.rz-pseudonym-row {
  margin: .8rem 0;
  padding: .8rem 1rem;
  background: var(--ca-bg-subtle, #f5f3ef);
  border: 1px solid var(--ca-border-light, #e6e3dd);
  border-radius: 10px;
}

.pseudo-display {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}

.pseudo-label {
  font-size: .92em;
  color: var(--ca-text-secondary, #6a655f);
}

.pseudo-name {
  color: var(--ca-accent, #0F766E);
  font-size: 1.05em;
}

.pseudo-change {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--ca-accent, #0F766E);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  font-size: .9em;
  cursor: pointer;
  padding: .2rem .4rem;
  border-radius: 4px;
  transition: all .15s ease;
}

.pseudo-change:hover {
  background: rgba(15, 118, 110, .08);
  text-decoration-thickness: 2px;
}

.pseudo-edit {
  display: flex;
  gap: .6rem;
  align-items: center;
  flex-wrap: wrap;
}

.pseudo-input {
  flex: 1;
  min-width: 200px;
  border: 1px solid var(--ca-border-light, #e6e3dd);
  border-radius: 8px;
  padding: .55rem .8rem;
  font-family: inherit;
  background: #fff;
  transition: border-color .2s ease;
}

.pseudo-input:focus {
  outline: none;
  border-color: var(--ca-accent, #0F766E);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, .1);
}

.pseudo-save {
  border: 0;
  border-radius: 999px;
  padding: .55rem 1rem;
  background: var(--ca-accent, #0F766E);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s ease;
}

.pseudo-save:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(15, 118, 110, .3);
}

.pseudo-first {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.pseudo-save-label {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .92em;
  color: var(--ca-text-secondary, #6a655f);
  cursor: pointer;
}

.pseudo-save-check {
  cursor: pointer;
  width: 18px;
  height: 18px;
  accent-color: var(--ca-accent, #0F766E);
}

/* Inline-Popover: Pseudonym-Bereich (kompakter) */
.annot-pseudo {
  margin: .5rem 0 .6rem;
  padding: .5rem .7rem;
  background: var(--ca-bg-subtle, #f5f3ef);
  border: 1px solid var(--ca-border-light, #e6e3dd);
  border-radius: 8px;
  font-size: .92em;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.ap-label {
  color: var(--ca-text-secondary, #6a655f);
  font-size: .9em;
}

.ap-name {
  color: var(--ca-accent, #0F766E);
}

.ap-change {
  border: 0;
  background: transparent;
  color: var(--ca-accent, #0F766E);
  cursor: pointer;
  padding: .1rem .3rem;
  border-radius: 4px;
  font-size: 1.1em;
  transition: background .15s ease;
}

.ap-change:hover {
  background: rgba(15, 118, 110, .1);
}

.ap-input {
  flex: 1;
  min-width: 150px;
  border: 1px solid var(--ca-border-light, #e6e3dd);
  border-radius: 6px;
  padding: .4rem .6rem;
  font-family: inherit;
  font-size: .95em;
  background: #fff;
}

.ap-input:focus {
  outline: none;
  border-color: var(--ca-accent, #0F766E);
}

.ap-save-label {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .88em;
  color: var(--ca-text-secondary, #6a655f);
  cursor: pointer;
  white-space: nowrap;
}

.ap-save-check {
  cursor: pointer;
  width: 16px;
  height: 16px;
  accent-color: var(--ca-accent, #0F766E);
}

/* ========== 6. KOMMENTAR-AGGREGATOR ========== */

.ca-comms-by-section,
.ca-section-comments {
  margin: 1rem 0 1.4rem;
  border: 1px solid var(--ca-border-light, #e6e3dd);
  border-radius: 12px; 
  background: var(--ca-bg-card, #fff);
  box-shadow: 0 6px 16px rgba(0,0,0,.06); 
  padding: .8rem .95rem;
}

.ca-comms-by-section h3,
.ca-section-comments .ca-title { 
  margin: .2rem 0 .5rem; 
  font-size: 1.05rem; 
  font-weight: 700;
}

.ca-comms-by-section .grp,
.ca-section-comments .ca-sec-bucket { 
  margin: .4rem 0 .6rem; 
}

.ca-comms-by-section .grp h4 { 
  margin: .2rem 0 .3rem; 
  font-size: 1rem; 
}

.ca-comms-by-section ul,
.ca-section-comments .ca-list { 
  margin: .2rem 0 .2rem .9rem; 
  list-style: disc;
}

.ca-comms-by-section li,
.ca-section-comments .ca-list li { 
  margin: .15rem 0; 
}

/* Nummerierung (EasyTOC/CSS-Counter) in Aggregator unterbinden */
.ca-section-comments.ca-no-toc :is(h1,h2,h3,h4,h5,h6)::before,
.ca-section-comments.ca-no-toc *::before,
.ca-comms-by-section :is(h2,h3,h4)::before { 
  content: none !important; 
}

/* Chips als kleine Badges über Kommentaren */
.ca-chip-badge {
  display: inline-block;
  border: 1px solid var(--ca-border-light, #e6e3dd);
  border-radius: 999px; 
  padding: .1rem .45rem; 
  font-size: .85em;
  background: #fff; 
  margin-right: .25rem;
}

/* ========== 7. SONSTIGES ========== */

/* Screenreader-Utility */
.sr-only { 
  position: absolute; 
  width: 1px; 
  height: 1px; 
  padding: 0; 
  margin: -1px; 
  overflow: hidden; 
  clip: rect(0,0,0,0); 
  white-space: nowrap; 
  border: 0; 
}

/* Kommentarbereich unten sichtbar lassen */
.wp-block-post-comments, 
.comment-respond { 
  display: block !important; 
  visibility: visible !important; 
  opacity: 1 !important; 
}

.wp-block-post-comments { 
  margin-top: 1rem; 
}

/* Front Inline Comments Plugin – dezente Hervorhebung */
.fic-highlight { 
  background: rgba(15,118,110,.14); 
}

/* ========== Pseudonym-Hinweis (unter Textarea) ========== */

.pseudo-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin: .6rem 0 .8rem;
  padding: .55rem .8rem;
  background: var(--ca-bg-subtle, #f5f3ef);
  border: 1px solid var(--ca-border-light, #e6e3dd);
  border-radius: 8px;
  font-size: .92em;
}

.hint-text {
  color: var(--ca-text-secondary, #6a655f);
}

.hint-text strong {
  color: var(--ca-accent, #0F766E);
  font-weight: 600;
}

.hint-change {
  border: 0;
  background: transparent;
  color: var(--ca-accent, #0F766E);
  cursor: pointer;
  padding: .25rem .5rem;
  border-radius: 6px;
  font-size: .95em;
  font-weight: 600;
  transition: all .15s ease;
  white-space: nowrap;
}

.hint-change:hover {
  background: rgba(15, 118, 110, .1);
}

/* ========== THREADS IN AGGREGATOR-BOX ========== */

.ca-thread-list {
  display: flex;
  flex-direction: column;
  gap: .8rem;
}

.ca-thread-item {
  list-style: none;
}

.ca-thread-card {
  background: var(--ca-bg-card, #fff);
  border: 1px solid var(--ca-border-light, #e6e3dd);
  border-radius: 10px;
  padding: .7rem .85rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.ca-thread-card:hover {
  border-color: var(--ca-accent, #0F766E);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

.ca-thread-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .35rem;
}

.ca-thread-header strong {
  color: var(--ca-text-primary, #2E2E2E);
  font-size: .95rem;
}

.ca-thread-date {
  color: var(--ca-text-secondary, #6a655f);
  font-size: .85rem;
}

.ca-thread-preview {
  margin: .3rem 0 .4rem;
  line-height: 1.55;
  color: var(--ca-text-secondary, #6a655f);
  font-size: .92rem;
}

.ca-thread-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin: .4rem 0 .5rem;
}

.ca-tag-mini {
  display: inline-block;
  padding: .1rem .4rem;
  background: var(--ca-bg-subtle, #f5f3ef);
  border: 1px solid var(--ca-border-light, #e6e3dd);
  border-radius: 999px;
  font-size: .8rem;
  color: var(--ca-text-secondary, #6a655f);
}

.ca-thread-link {
  display: inline-flex;
  align-items: center;
  color: var(--ca-accent, #0F766E);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 600;
  transition: text-decoration .15s ease;
}

.ca-thread-link:hover {
  text-decoration: underline;
}

.ca-thread-replies {
  margin: .6rem 0 0 0;
  padding: 0;
  list-style: none;
}

.ca-thread-replies .ca-thread-item {
  border-left: 2px solid var(--ca-border-light, #e6e3dd);
  padding-left: .8rem;
  margin-top: .6rem;
}

.ca-thread-replies .ca-thread-card {
  background: var(--ca-bg-subtle, #f5f3ef);
}

.ca-more-replies {
  display: inline-block;
  margin-top: .5rem;
  padding: .3rem .6rem;
  color: var(--ca-accent, #0F766E);
  font-size: .88rem;
  text-decoration: none;
  border: 1px solid var(--ca-border-light, #e6e3dd);
  border-radius: 6px;
  transition: all .15s ease;
}

.ca-more-replies:hover {
  background: var(--ca-bg-subtle, #f5f3ef);
  border-color: var(--ca-accent, #0F766E);
}