>
/* ================================================================
   Vidnexa Comments — Glass theme (matches vidnexa-theme.php)
   Uses shared tokens. Grey mode = white text on grey glass.
   Same container on both desktop and mobile — no separate box.
   Mobile: entry row opens the container as a slide-up bottom sheet.
   ================================================================ */

.ytc {
  --ytc-bg:            transparent;
  --ytc-fg:            var(--text-primary, #0f0f0f);
  --ytc-fg-secondary:  var(--text-secondary, #606060);
  --ytc-fg-tertiary:   var(--text-muted, #909090);
  --ytc-surface:       var(--glass-bg-soft, #ffffff);
  --ytc-surface-2:     var(--glass-bg-soft, #f2f2f2);
  --ytc-surface-3:     var(--glass-bg, #e5e5e5);
  --ytc-surface-hover: var(--glass-bg, #f2f2f2);
  --ytc-border:        var(--glass-border-soft, #e5e5e5);
  --ytc-divider:       var(--glass-border, #d9d9d9);
  --ytc-pill-bg:       var(--glass-bg-soft, #f2f2f2);
  --ytc-pill-hover:    var(--glass-bg, #e5e5e5);
  --ytc-blue:          var(--accent, #065fd4);
  --ytc-blue-hover:    var(--accent-hover, #0556bf);
  --ytc-blue-soft:     var(--accent-soft, #def1ff);
  --ytc-danger:        var(--danger, #cc0000);
  --ytc-danger-hover:  rgba(220,38,38,.15);
  --ytc-modal-bg:      var(--glass-bg-strong, #ffffff);
  --ytc-modal-border:  var(--glass-border, #e5e5e5);
  --ytc-menu-bg:       var(--glass-bg-strong, #ffffff);
  --ytc-menu-hover:    var(--glass-bg, #f2f2f2);
  --ytc-shadow-lg:     0 4px 12px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.10);
  --ytc-shadow-modal:  var(--glass-shadow-hover, 0 8px 32px rgba(0,0,0,.30));
  --ytc-toast-bg:      var(--glass-bg-strong, #0f0f0f);
  --ytc-toast-fg:      var(--text-primary, #ffffff);

  box-sizing: border-box;
  margin-top: 24px;
  color: var(--ytc-fg);
  font-family: 'Roboto','Arial',sans-serif;
  font-size: 14px;
  letter-spacing: 0.2px;
  background: var(--ytc-bg);
}
.ytc, .ytc * { box-sizing: border-box; }

/* Grey mode = same tokens as theme's grey/dark mode (white text) */
body.grey-mode .ytc,
body.dark-mode .ytc,
[data-theme="dark"] .ytc {
  --ytc-fg:            var(--text-primary, #f1f1f1);
  --ytc-fg-secondary:  var(--text-secondary, #aaaaaa);
  --ytc-fg-tertiary:   var(--text-muted, #909090);
  --ytc-surface:       var(--glass-bg-soft, #0f0f0f);
  --ytc-surface-2:     var(--glass-bg-soft, #272727);
  --ytc-surface-3:     var(--glass-bg, #3f3f3f);
  --ytc-surface-hover: var(--glass-bg, #272727);
  --ytc-border:        var(--glass-border-soft, #272727);
  --ytc-divider:       var(--glass-border, #3f3f3f);
  --ytc-pill-bg:       var(--glass-bg-soft, #272727);
  --ytc-pill-hover:    var(--glass-bg, #3f3f3f);
  --ytc-blue:          var(--accent, #3ea6ff);
  --ytc-blue-hover:    var(--accent-hover, #65b8ff);
  --ytc-blue-soft:     var(--accent-soft, #263850);
  --ytc-danger:        var(--danger, #ff6b6b);
  --ytc-modal-bg:      var(--glass-bg-strong, #1e293b);
  --ytc-modal-border:  var(--glass-border, #3f3f3f);
  --ytc-menu-bg:       var(--glass-bg-strong, #1e293b);
  --ytc-menu-hover:    var(--glass-bg, #334155);
  --ytc-toast-bg:      var(--glass-bg-strong, #f1f1f1);
  --ytc-toast-fg:      var(--text-primary, #0f0f0f);
  color: var(--ytc-fg);
}

/* Mobile toggle button — hidden on desktop, shown on mobile */
.ytc-mobile-toggle { display: none; }
.ytc-mobile-collapse { /* no-op on desktop */ }

/* Comments bottom sheet — chrome defaults (the sheet state itself is
   mobile-only, inside the max-width media query below). */
.ytc-sheet-bar { display: none; }
.ytc-sheet-backdrop {
  /* Above the sticky mobile player (.player-wrap is position:sticky with
     z-index 1300 in watch.php): the dim must cover the player too, or the
     player paints over the open sheet's top edge. */
  position: fixed; inset: 0; z-index: 1310;
  background: rgba(0,0,0,.45);
  opacity: 0; transition: opacity .22s ease;
}
.ytc-sheet-backdrop.open { opacity: 1; }
body.ytc-sheet-lock { overflow: hidden; }
html.ytc-sheet-lock { overflow: hidden; }
@media (min-width: 992px) {
  .ytc-sheet-backdrop { display: none !important; }
}

.ytc-head { display: flex; align-items: center; gap: 32px; margin-bottom: 24px; }

.ytc-count {
  font-weight: 500; font-size: 20px; line-height: 28px;
  color: var(--ytc-fg);
}

.ytc-sort-wrap { position: relative; }
.ytc-sort {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 16px;
  border: 1px solid var(--ytc-fg-tertiary);
  border-radius: 18px;
  background: transparent;
  color: var(--ytc-fg);
  cursor: pointer; font-size: 14px; font-weight: 500;
  font-family: inherit; letter-spacing: 0.2px;
}
.ytc-sort:hover { background: var(--ytc-surface-hover); }
.ytc-sort .material-icons { font-size: 20px; color: currentColor; }

.ytc-sort-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 220px; padding: 8px 0;
  background: var(--ytc-menu-bg); color: var(--ytc-fg);
  border: 1px solid var(--ytc-modal-border);
  border-radius: 12px;
  box-shadow: var(--ytc-shadow-lg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  display: none; z-index: 40;
}
.ytc-sort-menu.open { display: block; }
.ytc-sort-opt {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 10px 16px;
  border: none; background: transparent;
  color: inherit; font: inherit; font-size: 14px;
  text-align: left; cursor: pointer;
}
.ytc-sort-opt:hover { background: var(--ytc-menu-hover); }
.ytc-sort-opt .ytc-check { font-size: 20px; visibility: hidden; }
.ytc-sort-opt.is-selected .ytc-check { visibility: visible; }

.ytc-avatar-link { display: block; flex: 0 0 auto; line-height: 0; }
.ytc-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--ytc-surface-2); flex: 0 0 auto;
  object-fit: cover; display: block;
}
.ytc-avatar--sm { width: 24px; height: 24px; }

.ytc-add { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 32px; }
.ytc-add-main { flex: 1; min-width: 0; }
.ytc-input {
  width: 100%; resize: vertical;
  border: none; border-bottom: 1px solid var(--ytc-fg-tertiary);
  padding: 4px 0; background: transparent; color: var(--ytc-fg);
  outline: none; font-size: 14px; font-family: inherit; letter-spacing: 0.2px;
}
.ytc-input::placeholder { color: var(--ytc-fg-secondary); }
.ytc-input:focus { border-bottom: 2px solid var(--ytc-fg); margin-bottom: -1px; }

.ytc-actions { display: flex; gap: 8px; justify-content: flex-end; padding-top: 8px; }
.ytc-add-actions { display: none; }
.ytc-add.is-active .ytc-add-actions { display: flex; }

.ytc-btn {
  border-radius: 18px; padding: 0 16px; height: 36px;
  font-weight: 500; cursor: pointer; font-size: 14px;
  font-family: inherit; letter-spacing: 0.2px;
  transition: background-color .15s;
  display: inline-flex; align-items: center; justify-content: center;
}
.ytc-btn--ghost { background: transparent; border: none; color: var(--ytc-fg); }
.ytc-btn--ghost:hover { background: var(--ytc-surface-hover); }
.ytc-btn--filled { background: var(--ytc-blue); border: none; color: #fff; }
.ytc-btn--filled:hover { background: var(--ytc-blue-hover); }
.ytc-btn:disabled { opacity: .5; cursor: not-allowed; }

.ytc-thread { display: flex; flex-direction: column; }
.ytc-item { display: flex; gap: 16px; position: relative; padding: 8px 0; }
.ytc-pinned { background: transparent; }
.ytc-hidden-comment { opacity: .6; }
.ytc-hidden-badge { display:inline-flex; align-items:center; font-size:12px; font-weight:600; color:var(--ytc-danger); margin-right:6px; }
.ytc-imported-tag { display:inline-flex; align-items:center; font-size:11px; font-weight:600; color:var(--ytc-fg-secondary); background:var(--ytc-surface-2); border:1px solid var(--ytc-border); border-radius:8px; padding:1px 7px; margin-left:6px; white-space:nowrap; }
.ytc-pinned-icon { display: inline-flex; align-items: center; color: var(--ytc-fg-secondary); margin-right: 4px; }
.ytc-pinned-icon .material-icons { font-size: 14px; }

.ytc-body { flex: 1; min-width: 0; }
.ytc-meta { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-bottom: 4px; }
.ytc-author {
  font-weight: 500; color: var(--ytc-fg); text-decoration: none;
  font-size: 13px; letter-spacing: 0.2px;
}
.ytc-author:hover { text-decoration: none; color: var(--ytc-blue); }
.ytc-time { color: var(--ytc-fg-secondary); font-size: 12px; letter-spacing: 0.2px; }

.ytc-text {
  margin: 4px 0; line-height: 20px; font-size: 14px;
  word-wrap: break-word; color: inherit;
}
.ytc-text-inner { display: block; }
.ytc-text-inner.ytc-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ytc-readmore {
  display: none; margin-top: 2px; padding: 4px 0;
  border: none; background: transparent;
  color: var(--ytc-fg-secondary); font: inherit; font-size: 13px;
  font-weight: 500; cursor: pointer;
}
.ytc-text-inner.ytc-clamped + .ytc-readmore { display: inline-block; }
.ytc-readmore:hover { color: var(--ytc-fg); }

.ytc-timecode { color: var(--ytc-blue); text-decoration: none; cursor: pointer; }
.ytc-timecode:hover { text-decoration: underline; }

.ytc-row {
  display: flex; align-items: center; gap: 4px;
  margin: 4px 0 0; flex-wrap: wrap;
}

.ytc-votepill {
  display: inline-flex; align-items: center;
  height: 36px; border-radius: 18px;
  background: var(--ytc-pill-bg);
  border: 1px solid var(--ytc-border);
  overflow: hidden;
}
.ytc-vote {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 12px; height: 100%;
  border: none; background: transparent;
  color: var(--ytc-fg); cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 500;
  letter-spacing: 0.2px;
}
.ytc-vote:hover { background: var(--ytc-pill-hover); }
.ytc-vote.active { color: var(--ytc-blue); }
.ytc-vote .ytc-ico { font-size: 20px; line-height: 1; }
.ytc-vote-count { font-size: 13px; min-width: 12px; text-align: left; }
.ytc-vote.ytc-dislike { padding: 0 14px; }
.ytc-vote-sep {
  width: 1px; height: 24px; background: var(--ytc-divider);
  display: inline-block;
}

.ytc-action {
  display: inline-flex; align-items: center;
  height: 36px; padding: 0 16px;
  border: none; background: transparent; color: var(--ytc-fg);
  border-radius: 18px; cursor: pointer;
  font-weight: 500; font-size: 13px;
  font-family: inherit; letter-spacing: 0.2px;
}
.ytc-action:hover { background: var(--ytc-surface-hover); }

/* Three-dot menu */
.ytc-menu-wrap {
  position: relative;
  display: inline-flex;
  margin-left: auto;
}
.ytc-menu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  border: none; background: transparent; color: var(--ytc-fg);
  border-radius: 50%; cursor: pointer;
}
.ytc-menu-btn:hover { background: var(--ytc-surface-hover); }
.ytc-menu-btn .material-icons { font-size: 20px; line-height: 1; }
.ytc-menu-btn[aria-expanded="true"] { background: var(--ytc-surface-hover); }

.ytc-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 200px;
  padding: 8px 0;
  background: var(--ytc-menu-bg);
  color: var(--ytc-fg);
  border: 1px solid var(--ytc-modal-border);
  border-radius: 12px;
  box-shadow: var(--ytc-shadow-lg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 50;
  display: none;
}
.ytc-menu[hidden] { display: none; }
.ytc-menu.open { display: block; }

.ytc-menu-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 10px 16px;
  border: none; background: transparent;
  color: inherit; font: inherit; font-size: 14px;
  text-align: left; cursor: pointer;
}
.ytc-menu-item:hover { background: var(--ytc-menu-hover); }
.ytc-menu-item .material-icons { font-size: 20px; color: var(--ytc-fg-secondary); }
.ytc-menu-item.ytc-delete { color: var(--ytc-danger); }
.ytc-menu-item.ytc-delete .material-icons { color: var(--ytc-danger); }
.ytc-menu-item:disabled { opacity: .5; cursor: not-allowed; }

.ytc-edit-form {
  margin-top: 8px; padding: 12px 16px;
  background: var(--ytc-surface-2); border-radius: 8px;
  border: 1px solid var(--ytc-border);
}

.ytc-reply { display: flex; gap: 16px; align-items: flex-start; margin: 12px 0 0; }
.ytc-reply-main { flex: 1; min-width: 0; }

.ytc-hidden { display: none !important; }

.ytc-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 4px 0 12px 56px;
  height: 36px; padding: 0 16px;
  border: none; background: transparent; color: var(--ytc-blue);
  border-radius: 18px; cursor: pointer; font: inherit;
  font-weight: 500; font-size: 14px; letter-spacing: 0.2px;
}
.ytc-toggle:hover { background: var(--ytc-blue-soft); }
.ytc-toggle .material-icons { font-size: 20px; }

.ytc-replies {
  margin-left: 56px; display: flex; flex-direction: column; gap: 0;
  position: relative;
}
.ytc-replies .ytc-item { padding: 8px 0; }
.ytc-collapsed { display: none !important; }

.ytc-nested-replies {
  margin-left: 0; padding-left: 0;
  display: flex; flex-direction: column; gap: 0;
  margin-top: 4px;
}
.ytc-reply-item { padding: 8px 0; }
.ytc-reply-item .ytc-avatar--sm { width: 24px; height: 24px; }
.ytc-reply-item .ytc-meta { font-size: 12px; }
.ytc-reply-item .ytc-author { font-size: 12px; }
.ytc-reply-item .ytc-text { font-size: 13px; line-height: 18px; }
.ytc-reply-item .ytc-votepill { height: 32px; border-radius: 16px; }
.ytc-reply-item .ytc-vote { padding: 0 10px; font-size: 12px; }
.ytc-reply-item .ytc-vote .ytc-ico { font-size: 18px; }
.ytc-reply-item .ytc-action { height: 32px; padding: 0 12px; font-size: 12px; }
.ytc-reply-item .ytc-menu-btn { width: 32px; height: 32px; }
.ytc-reply-item .ytc-menu-btn .material-icons { font-size: 18px; }

/* ── Thread chain lines (X-style) ──────────────────────────────
   A 2px spine runs on a parent comment's avatar axis through its
   replies; every reply draws a rounded elbow from that spine to
   its own avatar, so a reader can trace which reply belongs to
   which comment. Colour is the theme divider token, so the chain
   reads correctly in light, dark and grey themes. Pure CSS on the
   existing markup: parents/groups draw the spine (::after /
   group ::before), replies draw the elbow (::before). Avatars
   paint above the elbows so each line tucks under the avatar
   disc instead of crossing it. */
/* Chain colour: the light theme's divider token (#e2e8f0) is too
   faint to trace at 2px, so light mode uses the next step of the
   same slate border family; dark/grey keep the divider token,
   which already reads correctly on dark surfaces. */
.ytc { --ytc-chain: #cbd5e1; }
body.grey-mode .ytc,
body.dark-mode .ytc,
[data-theme="dark"] .ytc { --ytc-chain: var(--ytc-divider); }
.ytc-item > .ytc-avatar-link,
.ytc-item > img.ytc-avatar { position: relative; z-index: 1; }

/* Spine — top-level comment: drops from below the 40px avatar to
   the item's bottom edge. Drawn only while its replies are
   actually visible: the collapsible group is expanded, or a
   first reply was just posted inline into a nested container
   (in which case the line runs to that container instead). */
.ytc-thread > .ytc-item:has(+ .ytc-toggle + .ytc-replies:not(.ytc-collapsed))::after,
.ytc-thread > .ytc-item:has(> .ytc-body > .ytc-nested-replies)::after {
  content: ""; position: absolute; left: 19px; top: 48px; bottom: 0;
  width: 2px; background: var(--ytc-chain); pointer-events: none;
}

/* Spine + bridge — the level-1 replies group. Starts 52px above
   the group, bridging the toggle row (4px margin + 36px height +
   12px margin) on the parent avatar axis (the group is offset
   56px, the axis sits at 20px → left:-37px), then runs the
   group's full height. It lives on the group, so collapsing the
   group hides the whole bridge with it — no leftover stub. */
.ytc-replies::before {
  content: ""; position: absolute; left: -37px; top: -52px; bottom: 0;
  width: 2px; background: var(--ytc-chain); pointer-events: none;
}

/* Spine — a reply (24px avatar) whose own replies are rendered
   in its nested container: the container sits inside the item,
   so one segment from below the avatar to the item's bottom
   edge passes the whole subtree on the avatar axis. */
.ytc-reply-item:has(> .ytc-body > .ytc-nested-replies)::after {
  content: ""; position: absolute; left: 11px; top: 32px; bottom: 0;
  width: 2px; background: var(--ytc-chain); pointer-events: none;
}

/* Elbow — level-1 reply: from the parent (top-level) spine at
   -36px to this reply's avatar centre, bending at the avatar's
   vertical centre (padding 8px + half of 24px = 20px). */
.ytc-replies > .ytc-item::before {
  content: ""; position: absolute; left: -37px; top: 6px;
  width: 49px; height: 14px;
  border-left: 2px solid var(--ytc-chain);
  border-bottom: 2px solid var(--ytc-chain);
  border-bottom-left-radius: 12px;
  pointer-events: none;
}

/* Elbow — depth ≥2 reply: parent is a reply, so the spine axis
   sits at -28px (parent body starts 40px in: 24px avatar + 16px
   gap; parent axis is its centre, 12px). */
.ytc-nested-replies > .ytc-item::before {
  content: ""; position: absolute; left: -29px; top: 6px;
  width: 41px; height: 14px;
  border-left: 2px solid var(--ytc-chain);
  border-bottom: 2px solid var(--ytc-chain);
  border-bottom-left-radius: 12px;
  pointer-events: none;
}

/* Elbow — first-reply edge case: a first reply to a top-level
   comment is parked by the composer in a nested container inside
   that 40px-avatar item, so its parent axis is the level-1 one. */
.ytc-thread > .ytc-item > .ytc-body > .ytc-nested-replies > .ytc-item::before {
  left: -37px; width: 49px;
}

.ytc-modal {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
}
.ytc-modal-content {
  background: var(--ytc-modal-bg); color: var(--ytc-fg);
  border: 1px solid var(--ytc-modal-border);
  width: 90%; max-width: 480px;
  border-radius: 12px; overflow: hidden;
  box-shadow: var(--ytc-shadow-modal);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.ytc-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--ytc-modal-border);
}
.ytc-modal-head h3 { margin: 0; font-size: 16px; font-weight: 500; color: var(--ytc-fg); }
.ytc-modal-close {
  border: none; background: transparent;
  font-size: 24px; cursor: pointer;
  color: var(--ytc-fg-secondary); padding: 4px 8px; line-height: 1;
}
.ytc-modal-close:hover { color: var(--ytc-fg); }
#reportForm { padding: 8px 20px 16px; }
.ytc-report-reasons { display: flex; flex-direction: column; padding: 8px 0; }
.ytc-radio {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 8px; cursor: pointer; font-size: 14px;
  color: var(--ytc-fg);
}
.ytc-radio:hover { background: var(--ytc-menu-hover); border-radius: 6px; }
.ytc-radio input { accent-color: var(--ytc-blue); }

.ytc-toast {
  position: fixed; left: 50%; bottom: 32px;
  transform: translateX(-50%) translateY(24px);
  background: var(--ytc-toast-bg); color: var(--ytc-toast-fg);
  padding: 12px 20px; border-radius: 8px;
  border: 1px solid var(--ytc-modal-border);
  font: 14px/1.4 'Roboto','Arial',sans-serif;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 3000; max-width: 90vw;
}
.ytc-toast.show {
  opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* ================================================================
   MOBILE — entry row + bottom sheet. Tapping the entry row opens
   the full thread as a slide-up sheet (same container as desktop).
   ================================================================ */
@media (max-width: 991.98px) {
  .ytc {
    margin-top: 16px;
    padding: 0 12px;
  }

  /* The global theme stylesheet sets `contain: layout` on #comments, which
     turns this root into a containing block for fixed-position descendants:
     the open sheet then anchors to this box (mid-page, drifting with scroll)
     instead of the viewport. Out-specify that rule (#comments.ytc beats the
     theme's bare #comments) so the sheet anchors to the screen, matching the
     description drawer's body-level geometry. Desktop is untouched. */
  #comments.ytc {
    contain: none;
  }

  /* Entry row on mobile — opens the comments bottom sheet */
  .ytc-mobile-toggle {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    padding: 12px 4px;
    margin: 0;
    border: none;
    border-top: 1px solid var(--ytc-border);
    border-bottom: 1px solid var(--ytc-border);
    background: transparent;
    color: var(--ytc-fg);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
  }
  .ytc-mobile-toggle-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
  }
  .ytc-mobile-toggle-left {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }
  .ytc-entry-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    min-width: 0;
    width: 100%;
  }
  .ytc-entry-preview[hidden] { display: none; }
  .ytc-entry-preview-av {
    width: 28px; height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--ytc-surface-2);
  }
  .ytc-entry-preview-who {
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    flex: 0 0 auto;
    color: var(--ytc-fg);
  }
  .ytc-entry-preview-snip {
    color: var(--ytc-fg-secondary);
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .ytc-entry-invite {
    margin-top: 8px;
    color: var(--ytc-fg-secondary);
    font-size: 13px;
    font-weight: 400;
  }
  .ytc-entry-invite[hidden] { display: none; }
  .ytc-mobile-toggle-left .material-icons {
    font-size: 20px;
    color: var(--ytc-fg-secondary);
  }
  .ytc-count-mobile {
    color: var(--ytc-fg);
    font-weight: 500;
    font-size: 14px;
  }
  .ytc-mobile-toggle-chev {
    color: var(--ytc-fg-secondary);
    transition: transform .2s ease;
    flex: 0 0 auto;
  }
  .ytc-mobile-toggle[aria-expanded="true"] .ytc-mobile-toggle-chev {
    transform: rotate(180deg);
  }

  /* Collapse container — hidden by default on mobile; in its open state it
     IS the bottom sheet: fixed panel sliding up over a backdrop, header and
     composer pinned at the top, the thread scrolling below them. */
  .ytc-mobile-collapse {
    display: none;
  }
  .ytc-mobile-collapse.is-open {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    /* Above the backdrop (1310) and the sticky mobile player (1300):
       the sheet's top edge — handle, header, composer — must never be
       painted over by the player while the sheet is open. */
    z-index: 1320;
    height: 92vh;
    height: 92dvh;
    max-height: 92dvh;
    background: var(--ytc-modal-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: var(--ytc-fg);
    border-top: 1px solid var(--ytc-border);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -12px 40px rgba(0,0,0,.28);
    overflow: hidden;
    animation: ytcSheetUp .28s cubic-bezier(.2,.8,.2,1);
  }
  .ytc-mobile-collapse.is-open.is-closing {
    animation: ytcSheetDown .24s ease-in forwards;
  }
  .ytc-mobile-collapse.is-open.is-dragging {
    animation: none;
  }
  @keyframes ytcSheetUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
  @keyframes ytcSheetDown {
    from { transform: translateY(0); }
    to   { transform: translateY(100%); }
  }

  /* Sheet chrome: drag handle + close, shown only in the sheet state */
  .ytc-mobile-collapse.is-open .ytc-sheet-bar {
    display: flex;
    order: 0;
    flex: 0 0 auto;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    padding: 10px 48px 4px;
    touch-action: none;
  }
  .ytc-sheet-handle {
    width: 42px; height: 5px;
    border-radius: 999px;
    background: var(--sheetHandle, rgba(128,128,128,.6));
    cursor: pointer;
    flex: 0 0 auto;
  }
  .ytc-sheet-close {
    position: absolute;
    right: 8px; top: 0;
    width: 38px; height: 38px;
    border: none;
    background: transparent;
    color: var(--ytc-fg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .ytc-sheet-close .material-icons { font-size: 22px; }

  /* Sheet layout (owner refinement, 2026-10-26): composer directly under
     the sheet header, above the scrolling thread — the reference drawer
     layout. Flex order only; DOM untouched. */
  .ytc-mobile-collapse.is-open .ytc-head {
    order: 1;
    flex: 0 0 auto;
    margin: 0;
    padding: 6px 16px 10px;
    border-bottom: 1px solid var(--ytc-border);
  }
  .ytc-mobile-collapse.is-open .ytc-add {
    order: 2;
    flex: 0 0 auto;
    margin: 0;
    padding: 10px 16px 12px;
    border-bottom: 1px solid var(--ytc-border);
    background: var(--ytc-modal-bg);
  }
  .ytc-mobile-collapse.is-open .ytc-search {
    order: 3;
    flex: 0 0 auto;
    margin: 10px 16px 2px !important;
  }
  .ytc-mobile-collapse.is-open > .alert,
  .ytc-mobile-collapse.is-open > p {
    order: 3;
    flex: 0 0 auto;
    margin-left: 16px !important;
    margin-right: 16px !important;
  }
  .ytc-mobile-collapse.is-open .ytc-thread {
    order: 4;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 6px 16px 12px;
  }

  /* Keyboard-open state: JS drives the sheet's height/top from
     window.visualViewport so the sheet's bottom edge sits exactly on the
     keyboard's top edge (see the keyboard block in the script below).
     A short transition keeps that tracking smooth, never a snap. */
  .ytc-mobile-collapse.is-open.is-kb {
    animation: none;
    transition: top .16s ease-out, height .16s ease-out, max-height .16s ease-out;
  }

  /* Tighten spacing inside the expanded state */
  .ytc-head {
    gap: 16px;
    margin: 12px 0 16px;
  }
  .ytc-count {
    font-size: 16px;
    line-height: 22px;
  }
  .ytc-sort {
    height: 32px;
    padding: 0 12px;
    font-size: 13px;
  }
  .ytc-sort .material-icons { font-size: 18px; }

  .ytc-add {
    gap: 12px;
    margin-bottom: 20px;
  }
  .ytc-avatar { width: 32px; height: 32px; }
  .ytc-avatar--sm { width: 22px; height: 22px; }
  .ytc-input { font-size: 14px; }

  .ytc-item {
    gap: 12px;
    padding: 6px 0;
  }
  .ytc-meta { font-size: 12px; }
  .ytc-author { font-size: 12px; }
  .ytc-time { font-size: 11px; }
  .ytc-text { font-size: 13px; line-height: 19px; }

  .ytc-votepill { height: 32px; border-radius: 16px; }
  .ytc-vote { padding: 0 10px; font-size: 12px; }
  .ytc-vote .ytc-ico { font-size: 18px; }
  .ytc-action {
    height: 32px;
    padding: 0 12px;
    font-size: 12px;
  }

  .ytc-toggle {
    margin-left: 44px;
    height: 32px;
    padding: 0 12px;
    font-size: 13px;
  }
  .ytc-replies { margin-left: 44px; }

  /* Thread chain — compact mobile geometry (32px/22px avatars,
     12px gaps, 6px item padding): same single slim line column,
     so the chain never eats into the text width. */
  .ytc-thread > .ytc-item:has(+ .ytc-toggle + .ytc-replies:not(.ytc-collapsed))::after,
  .ytc-thread > .ytc-item:has(> .ytc-body > .ytc-nested-replies)::after {
    left: 15px; top: 38px;
  }
  .ytc-replies::before { left: -29px; top: -48px; }
  .ytc-replies > .ytc-item::before {
    left: -29px; top: 5px; width: 40px; height: 12px;
    border-bottom-left-radius: 10px;
  }
  .ytc-reply-item:has(> .ytc-body > .ytc-nested-replies)::after {
    left: 10px; top: 28px;
  }
  .ytc-nested-replies > .ytc-item::before {
    left: -24px; top: 5px; width: 35px; height: 12px;
    border-bottom-left-radius: 10px;
  }
  .ytc-thread > .ytc-item > .ytc-body > .ytc-nested-replies > .ytc-item::before {
    left: -29px; width: 40px;
  }

  .ytc-reply-item .ytc-text { font-size: 13px; line-height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .ytc-mobile-collapse.is-open,
  .ytc-mobile-collapse.is-open.is-closing { animation: none; }
  .ytc-sheet-backdrop { transition: none; }
}

/* Hide the mobile toggle entirely on desktop */
@media (min-width: 992px) {
  .ytc-mobile-toggle { display: none !important; }
  .ytc-mobile-collapse { display: block !important; }
}