/* ============================================================
 * Jio Comments — 补充层
 *
 * 评论区布局样式已硬切换为自有版权（见 layout.css / mobile-item.css），
 * vendor main.min.css 不再提供评论区规则。
 * 本文件放 Jio 特有标记与评论图片上传的补充规则。
 * 共享基础样式仍由 bundle 中更早加载的 bootstrap 3 与
 * core/tokens.css 提供。
 * ============================================================ */

#comments .comment-image-tabs .comment-image-upload {
  margin: 0;
}

#comments .comment-image-upload-label {
  display: block;
  width: 100%;
}

#comments .comment-image-upload .preview {
  width: 100%;
  height: 96px;
  min-height: 96px;
  margin-bottom: 6px;
  overflow: hidden;
  border: 1px dashed var(--muted-border-color);
  border-radius: var(--main-radius);
  background: var(--main-shadow);
}

#comments .comment-image-upload .preview img {
  display: block;
  width: 100%;
  height: 96px;
  object-fit: cover;
}

#comments .comment-image-upload .input-expand-upload {
  min-width: 88px;
}

/* 上传中：按钮内容换成「加载点 + 文案 + 铺满按钮的条纹进度层」。
   按钮作为定位祖先，.progress 沿用 main.css 的绝对铺满（inset:0 / 100%）
   与负 z-index，progress-bar 走 Bootstrap 的 progress-bar-success 条纹；
   负层绘制在按钮背景之上、正文之下，因此文案与进度条同时可见。 */
#comments .comment-image-upload .input-expand-upload {
  position: relative;
  overflow: hidden;
}
#comments .comment-header .jio-identity-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: middle;
  max-width: 9em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}

#comments .comment-header .jio-identity-medal {
  display: inline-block;
  width: auto;
  height: 1.1em;
  max-width: 6em;
  object-fit: contain;
  vertical-align: -0.15em;
}