/* Pro-Feed Kommentare — Putz + Politur 25.09.2026 (KIMI-PRO-COMMENTS-POLISH,
   Stempel 0925cmtpol). Design-Sprache wie im Pro-Messenger (B720/B1167M):
   Panels var(--panel) / var(--panel-2), Akzent Teal var(--teal), Mint-Knoepfe var(--mint),
   Seitenschrift (erbt Outfit, seit 0927cmt47 — Poppins laedt live nicht mehr),
   Radius 18/12, Bedienhoehe 48 px an den Composer-Controls, HugeIcons inline,
   KEINE Emojis als Icons, keine harten Trennlinien im Thread.
   Emoji-Farbe: Emoji-Fonts VOR system-ui im Stack (emoji-fontstack-linux).
   Scoped auf den Pro-Feed (.pvf); Post-Detail und andere Pro-Controls unberuehrt.

   0927cmt47 (Kimi, Yamamoto Order 47, Winchester 27.09. 07:38: "ein bisschen
   kleiner, ein bisschen deutlicher") — EIN konsistenter Schritt ueber den
   ganzen Kommentarblock: Text/Name 13 -> 12 px (Sekundaer-Stufe der
   Typo-Leiter), Zeit 11 -> 10 px, Aktionen 12 -> 11 px, Avatar 36 -> 30 px
   (Antwort 28 -> 24, mobil 32 -> 28, Composer 32 -> 28), Zeilenabstand Text
   1.55 -> 1.45, Kommentar-Padding 9 -> 7 px, Composer-Hoehe 48 -> 42 px.
   Deutlicher: Text-Kontrast var(--ink) -> var(--ink), Hierarchie Name (12 px/600,
   hellste Stufe var(--ink)) > Text (12 px/400) > Zeit (10 px, gedaempft), weiche
   Haarlinie (weiss 6 %) zwischen den Kommentaren statt harter Linie oder
   gar keiner Trennung. Emoji-/Sprach-Bedienelemente bleiben, aber eine Stufe
   kleiner/gedaempfter als der Text (Icons 28 px, Chip-Welle 26 px). */

/* ---------- Thread: Lese-Rhythmus ohne Trennlinien ----------
   0927cmt47: Schrift ERBT die Seitenschrift (Outfit) — die Live-index.html laedt
   seit der Outfit-Landung (26.09.) kein Poppins mehr; der alte Poppins-Stack
   fiel auf die Emoji-Fonts zurueck und renderte das Leerzeichen 15 px breit
   (gemessen, probe-font.cjs). Emojis laufen weiter ueber den automatischen
   Glyph-Fallback (wie im Rest der Seite); der explizite Emoji-Stack bleibt
   nur am Emoji-Picker (emoji-fontstack-linux). */
.pvf .pvf-cmts {
  display: grid;
  gap: 2px;
  padding-top: 8px;
  border-top: 0;
}
.pvf .pvf-cmts-none {
  margin: 0;
  padding: 4px 0 2px;
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.5;
}
.pvf .pvf-cmt {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  min-height: 0;
  padding: 7px 0;
}
/* 0927cmt47: deutliche, aber weiche Trennung — Haarlinie weiss 6 % statt der
   alten harten Linie (var(--pro-line) var(--line), gestrichen in 0925cmtpol) und
   statt gar keiner Trennung. */
.pvf .pvf-cmt + .pvf-cmt { border-top: 1px solid rgb(255 255 255 / 6%); }
.pvf .pvf-cmt-ava,
.pvf .pvf-cmt .pvk-ava,
.pvf .pvf-cmt .pvk-ava-init {
  width: 30px;
  height: 30px;
  margin: 0;
  border-radius: 50%;
  font-size: .6875rem;
}
.pvf .pvf-cmt-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  min-width: 0;
  align-content: start;
}
/* Kopf: Name + CREATOR-Badge INLINE (Messenger-Look), Zeit rechts. */
.pvf .pvf-cmt-head {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  line-height: 18px;
}
.pvf .pvf-cmt-name {
  min-width: 0;
  color: var(--ink);
  font-size: .75rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.pvf .pvf-cmt-time {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--muted);
  font-size: .625rem;
  white-space: nowrap;
}
.pvf .pvf-creator-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
  margin: 0;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--teal);
  color: var(--bg);
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 13px;
  text-transform: uppercase;
}
.pvf .pvf-creator-badge svg { width: 10px; height: 10px; }
.pvf .pvf-cmt-txt {
  margin: 0;
  color: var(--ink);
  font-size: .75rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.pvf .pvf-cmt-txt b { color: var(--ink); font-weight: 600; }
/* Aktionen direkt UNTER dem Text, links — nicht mehr als losgeloeste Zeile rechts. */
.pvf .pvf-cmt-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: 28px;
}
.pvf .pvf-cmt-actions > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 28px;
  min-width: 28px;
  padding: 1px 7px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  font-size: .6875rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}
.pvf .pvf-cmt-actions > button:hover,
.pvf .pvf-cmt-actions > button:focus-visible {
  background: rgb(53 208 197 / 10%);
  color: var(--teal);
}
.pvf .pvf-cmt-actions > button:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.pvf .pvf-cmt-actions svg { width: 13px; height: 13px; }
/* 1004cmtup: Upvote-Knopf — Zustaende neutral / gewaehlt (is-on, Teal wie der
   Aktions-Hover) / laedt (is-busy) / gesperrt (Demo, disabled). Fehler werden
   als Notiz in der Aktionszeile gemeldet (.pvf-cup-note). */
.pvf .pvf-cup b { font-weight: 600; font-variant-numeric: tabular-nums; }
/* 1012cmtsum1 (WEB-KOMMENTAR-UPVOTE-SUMME-SICHTBAR-T1): Betrag + Anzahl wie der Kern-Knopf im Post-Detail (Betrag, Einheit |
   Pfeil, Anzahl). Nur currentColor, keine neuen Farben. */
.pvf .pvf-cup .pvf-cup-amt { font-weight: 600; font-variant-numeric: tabular-nums; }
.pvf .pvf-cup .pvf-cup-unit { font-size: inherit; opacity: .75; }
.pvf .pvf-cup .pvf-cup-sep { width: 1px; height: 11px; background: currentColor; opacity: .35; }
.pvf .pvf-cup.is-on { color: var(--teal); }
.pvf .pvf-cup.is-on svg { fill: var(--teal); }
.pvf .pvf-cup.is-busy { opacity: .55; cursor: progress; }
.pvf .pvf-cup:disabled { opacity: .45; cursor: default; }
.pvf .pvf-cup:disabled:hover,
.pvf .pvf-cup:disabled:focus-visible { background: none; color: var(--muted); }
.pvf .pvf-cup-note {
  align-self: center;
  color: var(--muted);
  font-size: .6875rem;
  line-height: 1.4;
}
/* Antworten eingerueckt (unter dem Text des Eltern-Kommentars: 30 px Avatar +
   10 px Luecke = 40 px); Creator-Antwort = ruhiges Teal-Panel statt Linie. */
.pvf .pvf-cmt-reply { margin-left: 40px; }
.pvf .pvf-cmt-reply .pvf-cmt-ava,
.pvf .pvf-cmt-reply .pvk-ava,
.pvf .pvf-cmt-reply .pvk-ava-init { width: 24px; height: 24px; font-size: .5625rem; }
.pvf .pvf-cmt-reply { grid-template-columns: 24px minmax(0, 1fr); }
.pvf .pvf-cmt-creator > .pvf-cmt-body {
  margin: -3px -9px -3px 0;
  padding: 5px 9px;
  border-radius: 12px;
  background: rgb(53 208 197 / 7%);
}

/* ---------- Sprach-Chip im Thread (Aufnahme des Nutzers, nur Speicher) ---------- */
.pvf .pvf-audio {
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: 280px;
  padding: 4px 10px 4px 4px;
  border-radius: 12px;
  background: var(--panel);
}
.pvf .pvf-audio-play {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: var(--teal);
  color: var(--bg);
  cursor: pointer;
}
.pvf .pvf-audio-play svg { width: 12px; height: 12px; }
.pvf .pvf-audio-play:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.pvf .pvf-audio-wave { flex: 1 1 auto; min-width: 0; height: 26px; }
.pvf .pvf-audio-dur {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: .6875rem;
  font-variant-numeric: tabular-nums;
}

/* ---------- Composer (Messenger-Muster): Panel var(--panel), 0927cmt47: 42 px ---------- */
.pvf .pvf-add {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 7px 9px;
  align-items: start;
  padding-top: 10px;
}
.pvf .pvf-add-ava,
.pvf .pvf-ava-wrap { display: inline-flex; flex-shrink: 0; }
.pvf .pvf-add-ava .pvk-ava,
.pvf .pvf-add-ava .pvk-ava-init { width: 28px; height: 28px; margin-top: 5px; border-radius: 50%; font-size: .625rem; }
.pvf .pvf-add-box {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: 42px;
  padding: 3px 4px 3px 11px;
  border: 0;
  border-radius: 13px;
  background: var(--panel);
}
.pvf .pvf-add-box:focus-within { box-shadow: 0 0 0 2px rgb(53 208 197 / 55%); }
.pvf .pvf-add-in {
  flex: 1 1 auto;
  min-width: 0;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ink);
  font-size: .75rem;
  line-height: 1.4;
  outline: none;
}
.pvf .pvf-add-in:focus { outline: none; }
.pvf .pvf-add-in::placeholder { color: var(--muted); }
.pvf .pvf-add-ic {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.pvf .pvf-add-ic svg { width: 15px; height: 15px; }
.pvf .pvf-add-ic:hover { background: var(--panel-2); color: var(--ink); }
.pvf .pvf-add-ic[aria-pressed="true"] { color: var(--teal); }
.pvf .pvf-add-ic:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.pvf .pvf-add-post {
  flex: 0 0 auto;
  min-height: 32px;
  min-width: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 11px;
  background: var(--mint);
  color: var(--bg);
  font-size: .72rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: opacity .15s, transform .15s;
}
.pvf .pvf-add-post:not(:disabled):hover { transform: translateY(-1px); }
.pvf .pvf-add-post:disabled { opacity: .45; cursor: default; }
.pvf .pvf-add-post:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
/* Emoji-Picker = Messenger-Picker (gleiche Auswahl, gleiche Optik). */
.pvf .pvf-emojis {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 6px;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(6, 32px);
  gap: 2px;
  padding: 8px;
  border-radius: 12px;
  background: var(--panel-2);
  box-shadow: 0 12px 32px rgb(0 0 0 / 50%);
}
.pvf .pvf-emojis[hidden] { display: none; }
.pvf .pvf-emojis button {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: none;
  font-size: 17px;
  line-height: 1;
  font-family: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  cursor: pointer;
}
.pvf .pvf-emojis button:hover { background: var(--panel); }
/* Aufnahme-Leiste + Vorschau-Chip. 1004cmtup2 (T2-E, Yamamoto-Befund): die
   Aufnahme-Leiste steht wie die Composer-Box im Ruhezustand NEBEN dem Avatar
   (Spalte 2) — waehrend der Aufnahme ist die Box verborgen, volle Breite
   liess das Profilbild allein auf einer eigenen Zeile stehen. Der
   Vorschau-Chip bleibt volle Breite, weil die Box dann wieder sichtbar ist. */
.pvf .pvf-rec,
.pvf .pvf-recprev {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 4px 11px;
  border-radius: 13px;
  background: var(--panel);
}
.pvf .pvf-rec { grid-column: 2; }
.pvf .pvf-recprev { grid-column: 1 / -1; }
.pvf .pvf-rec[hidden],
.pvf .pvf-recprev[hidden] { display: none; }
.pvf .pvf-rec-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--teal);
  animation: pvfpulse 1.1s ease-in-out infinite;
}
@keyframes pvfpulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
/* 1004cmtup: ruhige Alternative bei reduzierter Bewegung — der Punkt bleibt
   sichtbar, pulsiert aber nicht. */
@media (prefers-reduced-motion: reduce) {
  .pvf .pvf-rec-dot { animation: none; opacity: 1; }
}
.pvf .pvf-rec-time {
  flex: 0 0 auto;
  color: var(--ink);
  font-size: .75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pvf .pvf-rec-wave { flex: 1 1 auto; min-width: 0; height: 26px; }
.pvf .pvf-rec-stop {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 10px;
  background: var(--teal);
  color: var(--bg);
  cursor: pointer;
}
.pvf .pvf-rec-stop svg { width: 14px; height: 14px; }
.pvf .pvf-rec-stop:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.pvf .pvf-recprev .pvf-audio-wave { flex: 1 1 auto; }
.pvf .pvf-add-note {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.45;
}
.pvf .pvf-add-note[hidden] { display: none; }
/* Reply-Box = gleiche Panel-Optik wie der Composer, eingerueckt. */
.pvf .pvf-replybox {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 42px;
  margin: 2px 0 8px 40px;
  padding: 4px 5px 4px 12px;
  border: 0;
  border-radius: 13px;
  background: var(--panel);
}
.pvf .pvf-replybox:focus-within { box-shadow: 0 0 0 2px rgb(53 208 197 / 55%); }

@media (max-width: 640px) {
  .pvf .pvf-cmt { grid-template-columns: 28px minmax(0, 1fr); gap: 9px; padding: 7px 0; }
  .pvf .pvf-cmt-ava,
  .pvf .pvf-cmt .pvk-ava,
  .pvf .pvf-cmt .pvk-ava-init { width: 28px; height: 28px; }
  .pvf .pvf-cmt-reply { margin-left: 18px; }
  .pvf .pvf-replybox { margin-left: 18px; }
  .pvf .pvf-audio { max-width: 100%; }
}

/* ---------- 0925cmtrw: Live-Kommentare (B1265M/B1276M Web3) im selben Gewand ----------
   Liste und Composer erben die Demo-Thread-Optik ueber die gemeinsamen Klassen
   (pvf-cmts, pvf-cmt, pvf-add, pvf-add-box); hier nur das, was der Live-Bereich
   zusaetzlich braucht: Einrueckung des Panels, Formular ohne Avatar-Spalte,
   ruhiger Refresh-Knopf, Vote-Knopf mit "votes"-Wortmarke. */
.pvf .pvf-live-comments { margin-top: 10px; }
.pvf .pvf-live-comments[hidden] { display: none; }
.pvf .pvf-live-list { margin: 0; }
.pvf .pvf-live-form {
  grid-template-columns: minmax(0, 1fr);
  padding-top: 8px;
}
.pvf .pvf-live-refresh {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 4px 2px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: .6875rem;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  transition: color .15s;
}
.pvf .pvf-live-refresh:hover { color: var(--teal); }
.pvf .pvf-live-refresh:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; border-radius: 6px; }
.pvf .pvf-live-vote { width: auto; padding: 0 8px; gap: 6px; font-size: .6875rem; }

/* A viewport-wide blur and the bottom floating Create control obscured the
   final visible comment on mobile. Keep the original control in the public
   profile toolbar, and keep its existing radial menu at the safe bottom anchor. */
@media (max-width: 640px) {
  body:has(.pro-page--public .pvf)::after { content: none; }
  .pro-page--public .pvk-pub-bar .cfab {
    position: static;
    order: 2;
    margin: 0 0 0 auto;
    width: 44px;
    height: 44px;
    box-shadow: none;
  }
  .pro-page--public .pvk-pub-std { order: 1; }
  .pro-page--public .pvk-pub-copy { order: 3; }
  .shell:has(.pro-page--public .pvf) .chub--fab .chub-it,
  .shell:has(.pro-page--public .pvf) .chub--fab .chub-x {
    left: 50% !important;
    top: calc(100dvh - 45px) !important;
  }
  .shell:has(.pro-page--public .pvf) .chub--fab [data-act="post"] .chub-lb,
  .shell:has(.pro-page--public .pvf) .chub--fab [data-act="story"] .chub-lb {
    transform: translate(-50%, 36px);
  }
}

/* ORDER143: Meta-Links unter den Fan-Feed-Karten (pvf-votes/pvf-ccount, 18,6px hoch) —
   Trefferflaeche 48px hoch / min. 44px breit. Liegt im v2-Layer, weil pro-comments-v2.css
   NACH pro-vip.css laedt (Kaskaden-Skill aus ORDER140). Sichtbare Masse bleiben. */
.pvf-votes, .pvf-ccount { position: relative; }
.pvf-votes::after, .pvf-ccount::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 48px; width: 100%; min-width: 44px; }