/* ===== 公共评论编辑器：留言页 / 文章页 ===== */
.pz-comment-editor { position: relative; width: 100%; }
.pz-comment-editor textarea {
  display: block;
  width: 100% !important; height: 180px !important; min-height: 180px !important;
  margin: 0 0 16px; padding: 15px !important;
  border: 1px solid #ddd !important; border-radius: 4px !important; outline: none;
  background-color: #fff !important;
  background-image: url('/static/assets/commentURL.png');
  background-repeat: no-repeat; background-position: 100% 50%; background-size: contain;
  color: #000 !important; font-family: monospace !important; font-size: 14px !important;
  line-height: normal; resize: none !important; box-sizing: border-box;
}
.pz-comment-editor textarea:focus { border-color: #bbb !important; box-shadow: none !important; }
.pz-comment-editor-bar {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 38px; margin: 0;
}
.pz-comment-editor-tools { display: flex; align-items: center; gap: 10px; }
.pz-comment-editor-tools button {
  width: 24px; height: 24px; padding: 0; border: 0; border-radius: 4px;
  background: transparent; color: var(--pz-grey); cursor: pointer;
  font-size: 20px; line-height: 24px;
}
.pz-comment-editor-tools button:hover { color: var(--pz-theme); }
.pz-comment-submit {
  min-width: 60px; height: 38px; padding: 0 14px;
  border: 0; border-radius: 4px; cursor: pointer;
  background: #837bc7; color: #fff; font-size: 14px; font-weight: 400;
}
.pz-comment-submit:disabled { opacity: .55; cursor: default; }

/* poetize 表情区：跟随编辑器展开，不再使用悬浮卡片 */
.pz-comment-emoji-panel {
  display: flex; flex-wrap: wrap;
  width: 100%; min-height: 72px; padding: 0 10px; box-sizing: border-box;
  background: transparent; border: 0; box-shadow: none;
}
.pz-comment-emoji-panel button {
  width: 40px; height: 40px; flex: 0 0 40px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer;
}
.pz-comment-emoji-panel button:hover { background: transparent; transform: scale(1.08); }
.pz-comment-emoji-panel img { width: 32px; height: 32px; display: block; }
.pz-comment-emoji-empty { display: inline-flex; align-items: center; min-height: 32px; color: #909399; font-size: 13px; }

.pz-inline-emoji {
  width: 32px; height: 32px; display: inline-block;
  vertical-align: middle; margin: 0 2px;
}
.pz-comment-image {
  display: block; width: auto; height: auto;
  max-width: min(360px, 100%) !important; max-height: 260px; margin-top: 10px;
  border-radius: 9px; object-fit: contain; cursor: zoom-in;
}

/* 公共评论图片灯箱 */
.pz-image-viewer {
  position: fixed; inset: 0; z-index: 2147483000;
  display: flex; align-items: center; justify-content: center;
  padding: 36px; box-sizing: border-box;
  background: rgba(5, 7, 12, .88);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden; cursor: zoom-out;
  transition: opacity .2s ease, visibility .2s ease;
}
.pz-image-viewer.is-open { opacity: 1; visibility: visible; }
.pz-image-viewer-stage {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}
.pz-image-viewer-stage img {
  display: block; max-width: 100%; max-height: 100%;
  width: auto; height: auto; object-fit: contain;
  border-radius: 8px; background: #111;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .5);
  transform: scale(.96); transition: transform .2s ease;
}
.pz-image-viewer.is-open .pz-image-viewer-stage img { transform: scale(1); }
.pz-image-viewer-close {
  position: absolute; top: 18px; right: 22px;
  width: 42px; height: 42px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .12); color: #fff;
  font-size: 30px; line-height: 42px; text-align: center;
}
.pz-image-viewer-close:hover { background: rgba(255, 255, 255, .22); }
.pz-image-viewer-hint {
  position: absolute; left: 50%; bottom: 18px;
  transform: translateX(-50%); color: rgba(255, 255, 255, .72);
  font-size: 13px; white-space: nowrap;
}

/* 公共回复弹窗：留言页 / 文章页 */
.pz-comment-reply-dialog.el-dialog { border-radius: 14px; }
.pz-comment-reply-dialog .el-dialog__header { padding: 18px 22px 15px; border-bottom: 1px solid var(--pz-border); }
.pz-comment-reply-dialog .el-dialog__body { padding: 18px 22px; }
.pz-comment-reply-dialog * { box-sizing: border-box; }
.pz-comment-reply-dialog .pz-comment-editor textarea {
  height: 150px !important; min-height: 150px !important; margin-bottom: 10px !important;
}
.pz-comment-reply-dialog .pz-comment-editor-bar { min-height: 34px; }
.pz-comment-reply-dialog .pz-comment-emoji-panel { margin-top: 8px; }

/* 图片上传弹窗，结构与 poetize 保持一致 */
.pz-picture-dialog.el-dialog { border-radius: 8px; }
.pz-picture-dialog .el-dialog__header { padding: 20px 20px 10px; }
.pz-picture-dialog .el-dialog__body { padding: 10px 20px 0; }
.pz-picture-dialog .el-dialog__footer { padding: 0 20px 18px; text-align: center; }
.pz-picture-upload { width: 100%; }
.pz-picture-dragger {
  min-height: 100px; padding: 18px 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px dashed #d9d9d9; border-radius: 6px;
  background: #fff; cursor: pointer; transition: border-color .2s, background .2s;
}
.pz-picture-dragger:hover, .pz-picture-dragger.active { border-color: #8c7bfd; background: #f7f8ff; }
.pz-picture-upload-icon { font-size: 40px; line-height: 1; color: #8c7bfd; }
.pz-picture-upload-text { margin-top: 8px; color: #606266; font-size: 14px; }
.pz-picture-tip { margin-top: 8px; color: #909399; font-size: 12px; text-align: center; }
.pz-picture-preview { margin-top: 10px; text-align: center; }
.pz-picture-preview img {
  display: block; max-width: 100%; max-height: 180px; margin: 0 auto;
  border-radius: 6px; object-fit: contain; background: #f5f7fa;
}
.pz-picture-name { margin-top: 6px; color: #606266; font-size: 12px; text-align: center; word-break: break-all; }
.pz-picture-file-input { display: none !important; }

html.dark .pz-comment-reply-dialog.el-dialog { background: #1e1e1e; }
html.dark .pz-comment-reply-dialog .el-dialog__title { color: #e4e4e4; }
html.dark .pz-comment-reply-dialog .el-dialog__header { border-bottom-color: #4f4f4f; }
html.dark .pz-comment-editor textarea {
  background-color: #1e1e1e !important; border-color: #4f4f4f !important; color: #e4e4e4 !important;
}
html.dark .pz-picture-dragger { background: #252535; border-color: #4f4f4f; }
html.dark .pz-picture-dragger:hover, html.dark .pz-picture-dragger.active { background: #2d2b45; border-color: #8c7bfd; }
@media (max-width: 768px) {
  .pz-comment-editor textarea { height: 130px !important; min-height: 130px !important; }
  .pz-comment-emoji-panel { padding-left: 0; padding-right: 0; }
  .pz-comment-image { max-width: 100%; }
  .pz-picture-dialog.el-dialog { width: 90% !important; }
  .pz-comment-reply-dialog.el-dialog { width: 92% !important; }
  .pz-image-viewer { padding: 16px; }
  .pz-image-viewer-close { top: 10px; right: 12px; width: 38px; height: 38px; line-height: 38px; }
}
/* 表情选择面板固定 32px，悬停弹层放大预览 */
.pz-comment-emoji-popover {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.pz-comment-emoji-popover img { display: block; object-fit: contain; }
.pz-comment-emoji-popover span { color: #606266; font-size: 12px; line-height: 1.2; }
.pz-comment-emoji-popper.el-popover {
  padding: 10px 12px; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.14);
}
html.dark .pz-comment-emoji-popover span { color: #d8dce6; }
html.dark .pz-comment-emoji-popper.el-popover {
  background: #252535; border-color: #4f4f4f; color: #e4e4e4;
}
html.dark .pz-comment-emoji-popper.el-popover .popper__arrow,
html.dark .pz-comment-emoji-popper.el-popover .popper__arrow::after { border-top-color: #252535; }