@lark-apaas/coding-template-nestjs-react-fullstack 0.1.56 → 0.1.57-alpha.20261103143319

package/template/client/src/components/business-ui/record-comments/internal/styles.css

@@ -0,0 +1,1109 @@
+/* mention-appearance.css */
+/* Match Feishu's primary / self / disabled @-person hover tokens. Keep these
+   scoped to person labels so the host application's accent theme cannot alter them. */
+.replica-user-mention-label:hover {
+  background-color: rgb(20 86 240 / 10%);
+}
+.replica-user-mention-self:hover {
+  background-color: #336df4;
+}
+.replica-user-mention-disabled:hover {
+  background-color: rgb(31 35 41 / 10%);
+}
+
+/* mention-suggestions.css */
+/* UD MentionPanel/index.less + OptionItem/index.less, scoped to the copied component. */
+.replica-comment-mention-panel {
+  position: fixed;
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--popover);
+  color: var(--foreground);
+  font-size: 12px;
+  line-height: 20px;
+  box-shadow: 0 6px 24px rgb(31 35 41 / 8%);
+}
+.replica-comment-mention-list-container {
+  display: flex;
+  flex: auto;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+  position: relative;
+}
+.replica-comment-mention-list {
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  padding: 8px 0;
+}
+.replica-comment-mention-panel[data-loading] .replica-comment-mention-list {
+  overflow-y: hidden;
+}
+.replica-comment-mention-option-container {
+  margin-bottom: 2px;
+}
+.replica-comment-mention-option {
+  display: flex;
+  align-items: center;
+  height: 48px;
+  box-sizing: border-box;
+  padding: 4px 8px;
+  margin: 0 8px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.replica-comment-mention-option-container[aria-selected='true']
+  > .replica-comment-mention-option,
+.replica-comment-mention-option:hover {
+  background: rgb(31 35 41 / 8%);
+}
+.replica-comment-mention-option-container[aria-selected='true']
+  .replica-comment-mention-title-content {
+  color: var(--primary);
+}
+.replica-comment-mention-avatar {
+  position: relative;
+  flex-shrink: 0;
+  margin-right: 8px;
+}
+.replica-comment-mention-main {
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+}
+.replica-comment-mention-title {
+  display: flex;
+  font-size: 14px;
+  line-height: 22px;
+  color: var(--foreground);
+}
+.replica-comment-mention-title-content {
+  margin-right: 4px;
+  word-break: keep-all;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.replica-comment-mention-subtitle {
+  font-size: 12px;
+  line-height: 20px;
+  word-break: keep-all;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--muted-foreground);
+}
+.replica-comment-mention-text {
+  padding: 16px;
+  font-size: 14px;
+  line-height: 22px;
+}
+.replica-comment-mention-skeleton {
+  display: flex;
+  flex-direction: column;
+  padding-left: 16px;
+  overflow: hidden;
+}
+.replica-comment-mention-skeleton svg {
+  display: block;
+  width: 280px;
+  height: 40px;
+  flex-shrink: 0;
+  animation: replica-comment-mention-shimmer 1s ease-in-out infinite;
+}
+.replica-comment-mention-loading-mask {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgb(255 255 255 / 60%);
+}
+@keyframes replica-comment-mention-shimmer {
+  50% {
+    opacity: 0.7;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .replica-comment-mention-skeleton svg {
+    animation: none;
+  }
+}
+
+/* comment-reactions.css */
+/* Source: UD ReactionPanel/styles, EmojiPanel/styles, Reaction and ReactionDetail less. */
+.replica-comment-reaction-emoji {
+  display: inline-block;
+  flex-shrink: 0;
+  vertical-align: top;
+  background-repeat: no-repeat;
+  user-select: none;
+  max-width: none;
+}
+.replica-comment-reaction-panel {
+  width: 344px;
+  max-width: calc(100vw - 26px);
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--popover);
+  box-sizing: content-box;
+}
+.replica-comment-reaction-recent {
+  height: 64px;
+  padding: 4px 1px 8px;
+  overflow: hidden;
+  border-bottom: 1px solid var(--border);
+  background: var(--background);
+  box-sizing: border-box;
+}
+.replica-comment-reaction-used-title {
+  height: 22px;
+  padding: 0 12px;
+  color: var(--subtle-foreground);
+  font-size: 12px;
+  line-height: 20px;
+}
+.replica-comment-reaction-used-grid {
+  height: 28px;
+  margin-top: 2px;
+  padding: 0 14px 0 8px;
+  display: flex;
+  flex-wrap: wrap;
+  overflow: hidden;
+}
+.replica-comment-reaction-used-grid .replica-comment-reaction-choice {
+  flex-shrink: 0;
+  height: 28px;
+  width: auto;
+  margin-right: 11px;
+  margin-bottom: 20px;
+  padding: 0;
+}
+.replica-comment-reaction-scroll {
+  height: 276px;
+  overflow: hidden auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+}
+.replica-comment-reaction-all-title {
+  padding: 8px 12px 0;
+  color: var(--subtle-foreground);
+  font-size: 12px;
+  line-height: 20px;
+}
+.replica-comment-reaction-grid {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 4px 10px 10px;
+}
+.replica-comment-reaction-choice {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 36px;
+  width: 36px;
+  cursor: pointer;
+}
+.replica-comment-reaction-choice .replica-comment-reaction-emoji {
+  transition: transform 300ms;
+}
+.replica-comment-reaction-choice:hover .replica-comment-reaction-emoji {
+  transform: scale(1.3);
+}
+.replica-comment-reaction-choice:focus-visible {
+  outline: 2px solid var(--primary);
+  border-radius: 4px;
+  outline-offset: -2px;
+}
+.replica-comment-reaction-badge {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  overflow: hidden;
+  padding: 2px 6px;
+  border-radius: 18px;
+  color: var(--subtle-foreground);
+  background: var(--muted);
+  font-size: 12px;
+  line-height: 18px;
+}
+.replica-comment-reaction-separator {
+  flex-shrink: 0;
+  width: 0;
+  height: 12px;
+  margin: 0 6px 0 4px;
+  border-left: 0.5px solid var(--border);
+}
+.replica-comment-reaction-users {
+  display: flex;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.replica-comment-reaction-user {
+  height: 18px;
+  min-width: 0;
+  flex-shrink: 1;
+  white-space: pre;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  line-height: 18px;
+}
+.replica-comment-reaction-user:not(:last-child) {
+  margin-right: 5px;
+}
+.replica-comment-reaction-user:hover,
+.replica-comment-reaction-more:hover {
+  color: var(--primary);
+}
+.replica-comment-reaction-more {
+  flex-shrink: 0;
+  margin-left: 5px;
+  white-space: nowrap;
+}
+.replica-comment-reaction-measure {
+  position: absolute;
+  visibility: hidden;
+  pointer-events: none;
+  display: flex;
+  width: max-content;
+  inset: 0 auto auto 0;
+}
+.replica-comment-reaction-measure .replica-comment-reaction-user {
+  display: inline-flex;
+  max-width: none;
+}
+.replica-comment-reaction-detail {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: min(475px, calc(100dvh - 140px));
+  width: min(600px, calc(100vw - 74px));
+}
+.replica-comment-reaction-tabs {
+  display: flex;
+  flex: none;
+  flex-wrap: wrap;
+  max-height: 172px;
+  overflow-y: auto;
+}
+.replica-comment-reaction-tabs > button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 8px 12px;
+  height: 28px;
+  width: 60px;
+  border-radius: 14px;
+  background: var(--muted);
+  color: var(--subtle-foreground);
+  cursor: pointer;
+  font-size: 16px;
+}
+.replica-comment-reaction-tabs .replica-comment-reaction-emoji {
+  margin-right: 6px;
+}
+.replica-comment-reaction-tabs > button[aria-selected='true'] {
+  background: var(--primary);
+  color: white;
+}
+.replica-comment-reaction-detail-border {
+  position: relative;
+  flex: auto;
+  overflow: auto;
+  margin-top: 12px;
+  border: 1px solid var(--border);
+}
+.replica-comment-reaction-detail-border::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 20px;
+  width: 1px;
+  height: calc(100% - 40px);
+  background: var(--border);
+  pointer-events: none;
+}
+.replica-comment-reaction-detail-users {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 20px;
+}
+.replica-comment-reaction-person {
+  display: flex;
+  align-items: center;
+  width: calc(50% - 8px);
+  height: 52px;
+  padding: 10px 12px;
+  margin: 0 4px;
+  border-radius: 6px;
+  color: var(--foreground);
+  font-size: 14px;
+}
+.replica-comment-reaction-person:hover {
+  background: var(--comment-hover);
+}
+@media (prefers-reduced-motion: reduce) {
+  .replica-comment-reaction-choice .replica-comment-reaction-emoji {
+    transition: none;
+  }
+}
+
+/* discussion.css */
+/* All rules belong to the replica. No original comment selectors are changed. */
+.replica-discussion {
+  --replica-text: #1f2329;
+  --replica-secondary: #646a73;
+  --replica-placeholder: #8f959e;
+  --replica-primary: #1456f0;
+  --replica-line: #d0d3d6;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  color: var(--replica-text);
+  background: #fff;
+  font-family:
+    -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Tahoma, 'PingFang SC',
+    'Microsoft Yahei', Arial, sans-serif;
+  font-size: 14px;
+  line-height: 22px;
+  color-scheme: light;
+}
+.replica-discussion *,
+.replica-private-menu *,
+.replica-action-menu * {
+  box-sizing: border-box;
+}
+.replica-discussion button,
+.replica-action-menu button,
+.replica-private-menu button {
+  cursor: pointer;
+}
+.replica-discussion button:disabled {
+  cursor: default;
+}
+.replica-discussion button:focus-visible {
+  outline: 2px solid var(--replica-primary);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+.replica-discussion-header {
+  display: flex;
+  align-items: center;
+  flex: none;
+  height: 36px;
+  padding: 0 16px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #646a73;
+}
+.replica-discussion-list {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 4px 8px;
+  scrollbar-width: thin;
+  overscroll-behavior: contain;
+}
+.replica-thread {
+  margin-bottom: 10px;
+}
+.replica-reply {
+  display: flex;
+  align-items: flex-start;
+  padding: 8px;
+  min-width: 0;
+  background: #fff;
+}
+.replica-reply:hover,
+.replica-reply:focus-within {
+  background: #f5f6f7;
+  border-radius: 6px;
+}
+.replica-reply-target {
+  background: #f5f6ff;
+  border-radius: 6px;
+}
+.replica-reply-child {
+  margin: 4px 0 0 40px;
+  padding-left: 9px;
+}
+.replica-author-avatar {
+  width: 32px;
+  height: 32px;
+  flex: none;
+  position: relative;
+  overflow: hidden;
+  border-radius: 50%;
+  padding: 0;
+}
+.replica-author-avatar[data-small] {
+  width: 24px;
+  height: 24px;
+}
+.replica-author-avatar svg,
+.replica-author-avatar img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.replica-reply-main {
+  flex: 1;
+  min-width: 0;
+  margin-left: 10px;
+}
+.replica-reply-info {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  height: 17px;
+  gap: 4px;
+}
+.replica-author-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 0 1 auto;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 17px;
+  padding: 0;
+  color: #1f2329;
+}
+.replica-time {
+  font-size: 12px;
+  line-height: 17px;
+  color: #8f959e;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.replica-reply-controls {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  height: 14px;
+  flex: none;
+  visibility: hidden;
+  color: #646a73;
+}
+.replica-reply:hover .replica-reply-controls,
+.replica-reply:focus-within .replica-reply-controls,
+.replica-reply[data-tools-open] .replica-reply-controls {
+  visibility: visible;
+}
+.replica-icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 16px;
+  flex: none;
+  padding: 0;
+  border: 0;
+  color: #646a73;
+  background: transparent;
+}
+.replica-icon-button:hover {
+  color: #1f2329;
+}
+.replica-reply-body {
+  margin-top: 4px;
+  font-size: 14px;
+  line-height: 22px;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+.replica-reply-body button,
+.replica-reply-body a {
+  font-family: inherit;
+}
+.replica-reply-body > span > span {
+  vertical-align: top;
+}
+.replica-reactions:empty {
+  display: none;
+}
+.replica-reactions [data-replica-comment-reactions]:not(:empty) {
+  margin-top: 10px;
+}
+.replica-discussion .replica-comment-reaction-badge {
+  background: rgba(31, 35, 41, 0.05);
+}
+.replica-discussion-footer {
+  flex: none;
+  margin: 0 0 12px;
+  padding: 4px 24px;
+}
+.replica-composer-area {
+  position: relative;
+}
+.replica-composer {
+  border: 1px solid #d0d3d6;
+  border-radius: 6px;
+  min-height: 68px;
+  padding: 0 11px;
+  background: #fff;
+  color: #1f2329;
+}
+.replica-composer:hover {
+  border-color: #8f959e;
+}
+.replica-composer:focus-within {
+  border-color: #1456f0;
+}
+.replica-composer .replica-input > div:first-child {
+  padding: 8px 0 0;
+  border: 0;
+  border-radius: 0;
+  min-height: 30px;
+  background: transparent;
+  box-shadow: none;
+}
+.replica-composer .replica-input [role='textbox'] {
+  min-height: 22px;
+  max-height: 240px;
+  font-size: 14px;
+  line-height: 22px;
+  color: #1f2329;
+}
+.replica-composer .replica-input p[aria-hidden] {
+  top: 0;
+  translate: none;
+  transform: none;
+  color: #8f959e;
+}
+.replica-composer .replica-input button {
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+}
+.replica-composer .replica-input button::after,
+.replica-composer .replica-input button::before {
+  display: none;
+}
+.replica-composer-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  min-height: 36px;
+  padding: 11px 0 9px;
+  margin-right: 11px;
+}
+.replica-composer-tools {
+  display: flex;
+  align-items: center;
+  gap: 0;
+}
+.replica-composer-tools .replica-icon-button {
+  width: 16px;
+  color: #8f959e;
+}
+.replica-toolbar-divider {
+  width: 1px;
+  height: 16px;
+  background: #dee0e3;
+  margin: 0 8px;
+}
+.replica-send-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  color: #1456f0;
+}
+.replica-send-button:disabled {
+  color: #bbbfc4;
+}
+.replica-composer-context {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #646a73;
+  font-size: 12px;
+  line-height: 20px;
+  margin-bottom: 6px;
+}
+.replica-composer-context button {
+  display: flex;
+}
+.replica-private-hint {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-right: auto;
+  font-size: 12px;
+  color: #8f959e;
+}
+.replica-private-marker {
+  flex: none;
+  color: #8f959e;
+}
+.replica-private-menu {
+  width: 278px;
+  max-width: calc(100vw - 24px);
+  padding: 12px 16px;
+  border-radius: 6px;
+  border: 1px solid #dee0e3;
+  background: #fff;
+  box-shadow: 0 4px 12px rgba(31, 35, 41, 0.12);
+  color: #1f2329;
+}
+.replica-private-heading {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 14px;
+  line-height: 22px;
+}
+.replica-private-menu p {
+  margin: 8px 0 0 30px;
+  color: #8f959e;
+  font-size: 12px;
+  line-height: 20px;
+}
+.replica-switch {
+  position: relative;
+  width: 40px;
+  height: 22px;
+  padding: 2px;
+  border-radius: 11px;
+  margin-left: auto;
+  background: #bbbfc4;
+  flex: none;
+}
+.replica-switch span {
+  display: block;
+  height: 18px;
+  width: 18px;
+  border-radius: 50%;
+  background: #fff;
+  transition: transform 0.15s;
+}
+.replica-switch[aria-checked='true'] {
+  background: #1456f0;
+}
+.replica-switch[aria-checked='true'] span {
+  transform: translateX(18px);
+}
+.replica-composer-tools [aria-label='评论设置'] {
+  margin-left: 8px;
+}
+.replica-action-menu {
+  width: 120px;
+  padding: 2px 0;
+  background: #fff;
+  border: 1px solid #dee0e3;
+  border-radius: 6px;
+  box-shadow:
+    0 8px 24px 8px rgb(31 35 41 / 4%),
+    0 6px 12px rgb(31 35 41 / 4%),
+    0 4px 8px -8px rgb(31 35 41 / 6%);
+}
+.replica-action-menu [role='menu'] {
+  display: flex;
+  flex-direction: column;
+}
+.replica-action-menu [role='menuitem'] {
+  display: flex;
+  align-items: center;
+  height: 30px;
+  padding: 4px 8px;
+  margin: 1px 3px;
+  width: calc(100% - 6px);
+  border-radius: 4px;
+  font-size: 14px;
+  line-height: 22px;
+}
+.replica-action-menu [role='menuitem']:hover {
+  background: #f2f3f5;
+}
+.replica-draft-images {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-top: 4px;
+}
+.replica-draft-image {
+  width: 64px;
+  height: 64px;
+  position: relative;
+  border: 1px solid #d0d3d6;
+  border-radius: 6px;
+  overflow: hidden;
+}
+.replica-draft-image img {
+  display: block;
+  width: 62px;
+  height: 62px;
+  object-fit: cover;
+  border-radius: 5px;
+}
+.replica-draft-image button {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 24px;
+  height: 24px;
+  display: grid;
+  place-items: center;
+  border-radius: 6px;
+  color: #fff;
+}
+.replica-draft-image button span {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  background: rgb(31 35 41 / 60%);
+}
+.replica-message-images {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-top: 6px;
+}
+.replica-edit-area {
+  margin: 12px -2px 0 3px;
+}
+.replica-composer-edit {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 16px;
+  align-items: start;
+  min-height: 32px;
+  background: transparent;
+}
+.replica-composer-edit .replica-input {
+  grid-column: 1;
+  grid-row: 1;
+}
+.replica-composer-edit .replica-input > div:first-child {
+  min-height: 30px;
+  padding: 4px 0 4px;
+}
+.replica-composer-edit .replica-composer-toolbar {
+  grid-column: 2;
+  grid-row: 1;
+  min-height: 30px;
+  padding: 7px 0;
+  margin: 0;
+}
+.replica-composer-edit .replica-draft-images {
+  grid-column: 1 / -1;
+  margin: 4px 0 8px;
+}
+.replica-edit-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 12px;
+}
+.replica-edit-actions button {
+  min-width: 48px;
+  height: 28px;
+  border: 1px solid #d0d3d6;
+  border-radius: 6px;
+  padding: 3px 7px;
+  color: #1f2329;
+  background: #fff;
+  font-size: 12px;
+  line-height: 20px;
+}
+.replica-edit-actions button:last-child {
+  background: #1456f0;
+  color: #fff;
+  border-color: #1456f0;
+}
+.replica-edit-actions button:disabled {
+  opacity: 0.5;
+}
+.replica-reply-controls[hidden] {
+  display: none;
+}
+.replica-reply-linked {
+  background: #f5f6ff;
+  border-radius: 6px;
+}
+
+.replica-message-images button {
+  flex: none;
+  width: 64px;
+  height: 64px;
+  padding: 0;
+  border: 1px solid #d0d3d6;
+  overflow: hidden;
+  border-radius: 6px;
+  cursor: zoom-in;
+}
+.replica-message-images img {
+  display: block;
+  width: 62px;
+  height: 62px;
+  object-fit: cover;
+  border-radius: 5px;
+}
+.replica-image-backdrop {
+  background: rgb(0 0 0 / 85%);
+}
+.replica-image-viewer {
+  position: fixed;
+  inset: 0;
+  z-index: 51;
+  color: #fff;
+  outline: none;
+  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif;
+}
+.replica-image-canvas {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+.replica-image-canvas img {
+  flex: none;
+  max-width: none;
+  cursor: grab;
+  touch-action: none;
+  user-select: none;
+}
+.replica-image-canvas img:active {
+  cursor: grabbing;
+}
+.replica-image-viewer button {
+  display: grid;
+  place-items: center;
+  padding: 0;
+  background: transparent;
+  color: #fff;
+  border: 0;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.replica-image-viewer button:hover {
+  background: rgb(255 255 255 / 15%);
+}
+.replica-image-viewer button:disabled {
+  opacity: 0.3;
+  cursor: default;
+}
+.replica-image-viewer button:focus-visible {
+  outline: 2px solid #fff;
+  outline-offset: 2px;
+}
+.replica-viewer-close {
+  position: absolute;
+  right: 16px;
+  top: 16px;
+  width: 48px;
+  height: 48px;
+}
+.replica-viewer-prev,
+.replica-viewer-next {
+  position: absolute;
+  top: calc(50% - 24px);
+  width: 48px;
+  height: 48px;
+}
+.replica-viewer-prev {
+  left: 16px;
+}
+.replica-viewer-next {
+  right: 16px;
+}
+.replica-viewer-toolbar {
+  position: absolute;
+  left: 50%;
+  bottom: 20px;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  height: 48px;
+  padding: 0 12px;
+  background: rgb(0 0 0 / 75%);
+  border-radius: 8px;
+  font-size: 14px;
+}
+.replica-viewer-toolbar button {
+  width: 36px;
+  height: 36px;
+  flex: none;
+}
+.replica-viewer-toolbar span {
+  min-width: 28px;
+  text-align: center;
+}
+.replica-viewer-toolbar .replica-viewer-ratio {
+  min-width: 48px;
+}
+.replica-viewer-toolbar i {
+  height: 16px;
+  width: 1px;
+  background: rgb(255 255 255 / 24%);
+  margin: 0 10px;
+}
+.replica-error {
+  color: #d83931;
+  font-size: 12px;
+  line-height: 20px;
+  margin-top: 4px;
+}
+.replica-empty {
+  color: #8f959e;
+  text-align: center;
+  padding: 48px 12px;
+}
+@media (hover: none) {
+  .replica-reply-controls {
+    visibility: visible;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .replica-switch span {
+    transition: none;
+  }
+}
+
+.replica-comment-panel {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
+.replica-panel-status,
+.replica-panel-pagination {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 8px;
+  font-size: 12px;
+  color: var(--replica-secondary);
+}
+/* Match the existing empty-state footprint in auto-height hosts. Only the
+   read-state slot is sized; populated lists still follow the host's layout. */
+.replica-comment-panel .replica-discussion-list:has(> .replica-panel-placeholder) {
+  display: flex;
+  flex-direction: column;
+  height: 126px;
+}
+.replica-panel-status.replica-panel-placeholder {
+  flex: 1 1 118px;
+  height: 118px;
+  min-height: 0;
+  max-height: 118px;
+}
+.replica-panel-placeholder ~ .replica-panel-pagination {
+  flex: 0 1 auto;
+  min-height: 0;
+  max-height: 100%;
+  overflow-y: auto;
+  overflow-wrap: anywhere;
+}
+.replica-panel-status-content {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  max-width: 100%;
+  max-height: 100%;
+  overflow-y: auto;
+  overflow-wrap: anywhere;
+  scrollbar-width: thin;
+}
+.replica-panel-placeholder[data-state='empty'] {
+  color: var(--replica-placeholder);
+  font-size: 14px;
+  line-height: 22px;
+}
+.replica-panel-status button,
+.replica-panel-pagination button {
+  color: var(--replica-primary);
+}
+.replica-panel-status[role='alert'] { color: #d92d20; }
+.replica-panel-solved {
+  margin-left: 8px;
+  font-size: 12px;
+  color: var(--replica-secondary);
+}
+
+.replica-reply:is([data-mutation-state="failed"], [data-mutation-state="uncertain"]) .replica-author-avatar {
+  opacity: 0.4;
+}
+.replica-reply:is([data-mutation-state="failed"], [data-mutation-state="uncertain"]) .replica-author-name,
+.replica-reply:is([data-mutation-state="failed"], [data-mutation-state="uncertain"]) .replica-reply-body {
+  color: var(--comment-failed-text, #bbbfc4);
+}
+.replica-mutation-error {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+  color: var(--muted-foreground);
+  font-size: 12px;
+  line-height: 20px;
+}
+.replica-mutation-error svg {
+  flex: none;
+  color: var(--comment-error, #ee5050);
+}
+.replica-mutation-error button {
+  margin-left: 4px;
+  color: var(--primary);
+  cursor: pointer;
+}
+.replica-mutation-error button:hover {
+  text-decoration: underline;
+}
+.replica-mutation-loading {
+  display: inline;
+  position: relative;
+  top: 2px;
+  padding: 5px 0 1px 5px;
+  color: var(--replica-primary, #1456f0);
+}
+.replica-mutation-loading > svg {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  vertical-align: baseline;
+  animation: replica-mutation-spin 1.2s linear infinite;
+}
+.replica-mutation-loading circle {
+  animation: replica-mutation-dash 2.5s ease-in-out infinite;
+}
+@keyframes replica-mutation-spin {
+  to { transform: rotate(360deg); }
+}
+@keyframes replica-mutation-dash {
+  0% { stroke-dasharray: 1, 220; stroke-dashoffset: 0; }
+  50% { stroke-dasharray: 150, 220; stroke-dashoffset: -68; }
+  100% { stroke-dasharray: 150, 220; stroke-dashoffset: -218; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .replica-mutation-loading > svg,
+  .replica-mutation-loading circle { animation: none; }
+}