#commentsModalRoot { display: none; }
#commentsModalRoot.open { display: block; }

.cm-backdrop{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 9998;
}

.cm-modal{
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, calc(100vw - 24px));
  max-height: min(80vh, 820px);
  background: #111;
  color: #fff;
  border-radius: 14px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
}

.cm-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.cm-title{ font-weight: 700; }
.cm-close{
  background: transparent;
  color: #fff;
  border: 0;
  font-size: 18px;
  cursor: pointer;
  opacity: .85;
}
.cm-close:hover{ opacity: 1; }

.cm-body{
  padding: 12px 14px;
  overflow: auto;
  flex: 1;
}

.cm-meta{ opacity: .8; font-size: 13px; margin-bottom: 10px; }

.cm-list{ display: flex; flex-direction: column; gap: 10px; }

.cm-item{ display: flex; gap: 10px; }
.cm-avatar{
  width: 32px; height: 32px; border-radius: 50%;
  object-fit: cover;
}
.cm-avatar.ph{
  background: rgba(255,255,255,.12);
}
.cm-content{ flex: 1; }
.cm-line1{
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 13px; opacity: .9;
}
.cm-author{ font-weight: 600; }
.cm-date{ opacity: .7; font-size: 12px; }
.cm-text{ margin-top: 3px; white-space: pre-wrap; word-break: break-word; }

.cm-loading, .cm-empty, .cm-error{
  opacity: .85; padding: 10px 0;
}

.cm-footer{
  padding: 10px 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.cm-form{
  display: flex; gap: 10px;
}

#cmInput{
  flex: 1;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #fff;
  outline: none;
}
#cmSend{
  padding: 10px 14px;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
}
#cmSend:disabled{ opacity: .6; cursor: default; }