/* 评论@功能样式 */

/* ===== @标记高亮（已审核评论） ===== */
.mention-tag {
  color: #00aaa6;
  cursor: pointer;
  font-weight: 500;
}

/* ===== @按钮：与匿名开关同一行，紧随其后 ===== */
.mention-btn {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  color: #1d2129;
  cursor: pointer;
  margin-left: 12px;
  vertical-align: middle;
}
.mention-btn:hover {
  color: #00aaa6;
}
/* 主评论区：@按钮位于匿名开关 .switchbox 内、"匿名评论"文字之后，随开关一起定位在框内左下 */
.contact-comment .switchbox .mention-btn {
  height: 24px;
  line-height: 24px;
  vertical-align: top;
}

/* ===== PC 子回复区：单行布局（输入框在左，右侧同行为「匿名评论 -> @ -> 发送」）=====
   v3-site.css 原本把 .switchbox 绝对定位、.r-font 用 margin-top:50px 压到下半部，
   于是输入框在上、控件在下分成两行，且纵向上怎么摆都与生产不符。
   生产实际是「输入框 + 右侧控件同处一行、控件行贴住输入框下沿、高度只等于输入框 + 上下 padding」：
   这里用 flex 把 .reply-int 排成单行——输入框吃满左侧剩余宽度（不再写死收窄），
   .switchbox 与 .r-font 回到文档流、依次排在右侧并与输入框底部对齐。
   @按钮由 comment-mention.js 追加进 .switchbox 内部（"匿名评论"文字之后），
   天然形成「匿名评论 -> @」，再靠 flex order 把「发送」排到最右，拼出完整顺序；
   仅 PC 断点（>=768px，与项目移动端断点 767px 对齐）生效，
   不影响 v3-site_h5.css 里移动端（max-width:767px）的 .reply-int 布局。 */
@media (min-width: 768px) {
  .contact-comment .reply-int {
    display: flex;
    /* 底部对齐：控件行贴住输入框下沿（生产里发送按钮距框顶 56~88px、距框底约 7px）。
       若用 center，控件行会落在 95px 高白框的正中间，上/下各空约 31px，看起来"没贴底" */
    align-items: flex-end;
  }
  /* .reply-int 带 clearfix，其 ::after 在 flex 容器里会变成一个（0 宽）子项，移除以免干扰顺序 */
  .contact-comment .reply-int::after {
    display: none;
  }
  .contact-comment .reply-int .reply-con {
    /* 覆盖 v3-site.css 的 float:left + width:calc(100% - 180px)：
       改为吃满左侧剩余宽度，不再写死宽度导致输入框偏窄 */
    float: none;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    order: 1;
  }
  .contact-comment .reply-int .switchbox {
    /* 覆盖 v3-site.css 的 position:absolute 与 margin-top:50px：回到文档流、参与单行排布 */
    position: static;
    float: none;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    flex: 0 0 auto;
    /* 左间距 12px，与主评论区 @ 与匿名开关之间的间距一致；
       底对齐后再上移 (32-24)/2 = 4px，让 24px 行高的开关与 32px 行高的发送按钮中心线齐平
       （发送按钮贴框底、开关自然要高出 4px 才同心，与生产位置一致） */
    margin: 0 0 4px 12px;
    order: 2;
    white-space: nowrap;
  }
  .contact-comment .reply-int .r-font {
    /* 覆盖 v3-site.css 的 float:left + margin-top:50px：回到文档流、排到最右 */
    position: static;
    float: none;
    top: auto;
    right: auto;
    bottom: auto;
    flex: 0 0 auto;
    margin: 0 0 0 12px;
    order: 3;
  }
}

/* ===== PC 内联结果浮层 ===== */
.mention-result-panel {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  min-width: 260px;
}
.mention-result-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  max-height: 280px;
  overflow-y: auto;
}
.mention-result-item {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  cursor: pointer;
}
.mention-result-item:hover,
.mention-result-item.active {
  background: #f5f7fa;
}
.mention-item-avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin-right: 10px;
  border-radius: 50%;
  background: #e5e6eb url("../images/idea/icon43.png") no-repeat center;
  background-size: cover;
}
.mention-item-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mention-item-name {
  font-size: 14px;
  color: #1d2129;
  line-height: 20px;
}
.mention-item-account {
  color: #86909c;
  font-style: normal;
  font-size: 13px;
  margin-left: 4px;
}
.mention-item-branch {
  font-size: 12px;
  color: #86909c;
  line-height: 18px;
}
.mention-empty,
.mention-loading {
  padding: 16px;
  text-align: center;
  color: #86909c;
  font-size: 13px;
}

/* ===== 移动端半屏人员面板 ===== */
.mention-mobile-mask {
  position: fixed;
  inset: 0;
  z-index: 100010;
  background: rgba(0, 0, 0, 0.4);
}
.mention-mobile-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100011;
  height: 70vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12px 12px 0 0;
  padding-bottom: env(safe-area-inset-bottom);
}
/* 面板顶部拖动条横线（与 UI 稿一致，居中灰色圆角短条） */
.mention-mobile-sheet::before {
  content: "";
  flex-shrink: 0;
  width: 36px;
  height: 4px;
  margin: 8px auto 0;
  background: #e5e6eb;
  border-radius: 2px;
}
/* 顶部搜索栏 */
.mention-mobile-sheet .mm-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid #f2f3f5;
}
.mention-mobile-sheet .mm-search-box {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 12px;
  background: #f7f8fa;
  border-radius: 18px;
}
.mention-mobile-sheet .mm-search-icon {
  flex-shrink: 0;
  width: 16px;
  height: 18px;
  /* padding-right = 图标到竖线的间距；margin-right = 竖线到输入文字的间距 */
  padding-right: 10px;
  margin-right: 10px;
  /* 放大镜图标（UI 稿为搜索放大镜，而非对话气泡） */
  background: url("../images/detail/search.svg") no-repeat left center;
  background-size: 16px 16px;
}
.mention-mobile-sheet .mm-search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 15px;
  color: #1d2129;
}
.mention-mobile-sheet .mm-cancel {
  flex-shrink: 0;
  margin-left: 12px;
  font-size: 15px;
  color: #4e5969;
  cursor: pointer;
}
/* 人员列表 */
.mention-mobile-sheet .mm-result-list {
  flex: 1 1 auto;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
}
.mention-mobile-sheet .mm-result-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
}
.mention-mobile-sheet .mm-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin-right: 8px;
  border-radius: 50%;
  background: #e5e6eb url("../images/idea/icon43.png") no-repeat center;
  background-size: cover;
}
.mention-mobile-sheet .mm-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mention-mobile-sheet .mm-name {
  font-size: 15px;
  color: #1d2129;
  line-height: 22px;
}
.mention-mobile-sheet .mm-account {
  font-style: normal;
  color: #86909c;
}
.mention-mobile-sheet .mm-branch {
  font-size: 13px;
  color: #86909c;
  line-height: 18px;
}
/* 搜索不到空状态 */
.mention-mobile-sheet .mm-empty {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
}
.mention-mobile-sheet .mm-empty-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 16px;
  background: url("../images/idea/icon43.png") no-repeat center;
  background-size: contain;
  opacity: 0.35;
}
.mention-mobile-sheet .mm-empty-text {
  font-size: 14px;
  color: #86909c;
}

/* ===== 输入框内 @提及高亮（镜像层，由 comment-mention-highlight.js 驱动） =====
   原理：镜像层与 textarea 逐像素对齐后铺在其下方负责显示文字，
   textarea 自身文字置为 transparent、只保留光标与输入能力。
   这里只放静态规则；padding / border / font / line-height / 背景等
   必须与 textarea 完全一致的属性由 JS 在运行时从 computed style 拷贝。 */
.mention-textarea-highlight {
  pointer-events: none;
  overflow: hidden;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
/* 输入框内已选中的 @姓名(账号)，与已审核评论的 .mention-tag 同色 */
.mention-textarea-highlight .mention-input-highlight {
  color: #00aaa6;
}
/* 测量光标坐标用的零宽标记，不能占据任何宽度，否则会挤动后续文字 */
.mention-textarea-highlight .mention-caret-marker {
  display: inline;
  width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}
/* textarea 文字为 transparent 时，长按/拖选选中的文本会看不见内容。
   给选区单独指定文字色让它显形。镜像层与 textarea 坐标完全对齐，
   两层文字重叠绘制在视觉上等同于正常显示，不会出现错位重影。 */
.comment-content::selection,
.reply-con::selection,
.ma-panel-input::selection {
  color: #1d2129;
}
.comment-content::-moz-selection,
.reply-con::-moz-selection,
.ma-panel-input::-moz-selection {
  color: #1d2129;
}