.playback-comments[hidden], .playback-comments [hidden] { display: none !important; }
.playback-comments {
  position: fixed; inset: 72px 16px auto auto; width: 360px;
  max-width: calc(100% - var(--comments-nav-width, 0px) - 24px); max-height: calc(100% - 160px);
  display: flex; flex-direction: column; gap: 12px; padding: 16px;
  box-sizing: border-box; border: 1px solid var(--line); border-radius: var(--radius-card);
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-popover);
  z-index: 30; overflow-y: auto; text-align: left;
}
.playback-comments-header, .playback-comment-meta, .playback-comment-editor-title,
.playback-comment-editor-tools { display: flex; align-items: center; gap: 8px; }
.playback-comments h2 { font-size: var(--font-size-section); line-height: 22px; margin: 0; }
.playback-comments-header { justify-content: space-between; }
.playback-comments button, .playback-comment-editor button {
  min-height: 28px; padding: 4px 7px; border: 0; border-radius: var(--radius-xs);
  font: inherit; font-size: var(--font-size-helper); line-height: 18px; color: inherit;
  background: transparent; cursor: pointer;
}
.playback-comments button:hover, .playback-comment-editor button:hover { background: var(--surface-3); }
.playback-comments button:focus-visible, .playback-comment-editor :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.playback-comments button:disabled, .playback-comment-editor button:disabled { opacity: .5; cursor: default; }
.playback-comments-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.playback-comments-filters select { max-width: 100%; min-width: 0; padding: 4px; font-size: var(--font-size-helper); }
.playback-comments-source, .playback-comment-meta time, .playback-comment-meta span { font-size: var(--font-size-caption); color: var(--muted); }
.playback-comments-status:empty, .playback-comment-editor-error:empty { display: none; }
.playback-comments-status, .playback-comments-empty, .playback-comment-editor-error { font-size: var(--font-size-helper); line-height: 18px; margin: 0; }
.playback-comments-list { min-height: 0; }
.playback-comment-thread { padding: 12px 0; border-top: 1px solid var(--line); }
.playback-comment { min-width: 0; padding: 8px 0; }
.playback-comment-meta { flex-wrap: wrap; font-size: var(--font-size-helper); line-height: 18px; }
.playback-comment-meta strong { max-width: 100%; overflow-wrap: anywhere; }
.playback-comment-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--font-size-label); line-height: 20px; margin: 8px 0; }
.playback-comment-actions, .playback-comment-reactions { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; position: relative; }
.playback-comment-reactions button[aria-pressed="true"] { background: var(--accent-soft); outline: 1px solid var(--accent-border); }
.playback-comment-anchor { color: var(--accent) !important; font-variant-numeric: tabular-nums; }
.playback-comment-replies { margin-left: 14px; border-left: 1px solid var(--line); padding-left: 10px; }
.playback-comment-editor {
  position: absolute; left: 8px; bottom: calc(100% + 8px); width: 360px;
  max-width: calc(100% - 16px); box-sizing: border-box; padding: 6px 8px 6px 10px;
  background: var(--surface); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--radius-compact); box-shadow: var(--shadow-popover); z-index: 31;
  text-align: left; font-size: var(--font-size-label); line-height: 20px;
}
.playback-comment-thread > .playback-comment-editor { position: relative; left: auto; bottom: auto; width: 100%; box-shadow: none; }
.playback-comment-editor-title { font-size: var(--font-size-helper); justify-content: space-between; }
.playback-comment-editor textarea {
  display: block; width: 100%; box-sizing: border-box; min-height: 38px; max-height: 120px;
  field-sizing: content; resize: vertical; border: none; background: transparent;
  padding: 6px 0; font: inherit; line-height: 20px; color: inherit;
}
.playback-comment-editor-tools { flex-wrap: wrap; }
.playback-comment-send { margin-left: auto; background: var(--accent-solid) !important; color: var(--accent-foreground) !important; }
.playback-comment-picker {
  position: absolute; left: 0; bottom: calc(100% + 6px); width: 287px;
  max-width: 100%; max-height: min(280px, 45dvh); overflow-y: auto;
  padding: 8px; box-sizing: border-box; border: 1px solid var(--line);
  background: var(--surface); border-radius: var(--radius-sm); box-shadow: var(--shadow-popover); z-index: 32;
}
.playback-comment-picker input { width: 100%; min-width: 0; box-sizing: border-box; font-size: var(--font-size-helper); }
.playback-comment-emoji-options { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.playback-comment-emoji-options button { width: 32px; height: 32px; font-size: var(--font-size-page-title); padding: 0; }
.playback-comment-mentions button { display: block; width: 100%; min-height: 48px; text-align: left; overflow-wrap: anywhere; }
.playback-comment-delete { max-width: min(400px, calc(100vw - 32px)); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 20px; background: var(--surface); color: var(--text); }
.playback-comment-delete::backdrop { background: var(--overlay-backdrop); }
.playback-comment-delete h2 { font-size: var(--font-size-heading-sm); }
.playback-comment-delete button { margin: 4px; }
.playback-comment-danger { color: var(--danger-text); background: var(--danger-surface); }
@media (max-width: 787px) {
  .playback-comments { inset: 12px 12px auto calc(var(--comments-nav-width, 0px) + 12px); width: auto; max-height: calc(100% - 128px); }
  .playback-comment-editor { left: 0; }
}
.desktop-embedded { --comments-nav-width: var(--app-rail-width); }
@media (min-width: 641px) {
  .desktop-embedded.is-rail-pinned { --comments-nav-width: var(--app-sidebar-width); }
}
@media (prefers-reduced-motion: reduce) {
  .playback-comments *, .playback-comment-editor * { scroll-behavior: auto; transition: none; }
}
.playback-comment-count {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  justify-self: end; grid-column: -2 / -1; padding: 3px 6px; min-height: 28px;
  border: none; border-radius: var(--radius-xs); background: transparent; color: var(--muted);
  font-size: var(--font-size-helper); line-height: 18px; cursor: pointer;
}
.playback-comment-count svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.playback-comment-count:hover { background: var(--surface-3); color: var(--text); }
.playback-comment-count:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }