@lark-apaas/coding-template-nestjs-react-fullstack 0.1.55-alpha.20261101083044 → 0.1.55

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

@@ -1,1109 +0,0 @@
-/* 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; }
-}