/**
 * 客服工作台「快捷回复（话术）」弹窗放大与个人库分组操作增强（增量样式）
 *
 * 适用页面：/kefu/pc_list（客服工作台 → 接待页）。
 * 引入方式：index.html 以带版本号的 <link> 加载，本文件只做覆盖，不替换任何源文件。
 *
 * 覆盖范围（只动展示层，不涉及数据与事件）：
 * 1) 弹窗整体放大：只作用于被 kefu-words-plus.js 打上 .kf-words-plus 的话术弹窗，
 *    自动回复等同样使用 isMsgbox 的弹窗不受影响；
 * 2) 左栏「个人库」分组：把源码里已有的「编辑 / 删除」入口从悬浮态改为常显，
 *    点击仍走原有的 editSort / delSort，不新增 DOM、不新增事件；
 * 3) 右栏：添加 / 编辑话术的表单区卡片化、输入区加高、下拉与按钮加大，
 *    话术列表行距与字号调整，标题不再被压缩；
 * 4) 分组编辑小弹窗（.class-box）放大，输入框与按钮加高；
 * 5) 1350 / 1200 / 1024 / 860 四档响应式收敛。
 *
 * 说明：msgWindow.vue 的样式带 data-v-e5de46da 作用域属性，基础规则特异性普遍在
 * (0,2,0)~(0,4,0)，且分包 CSS 在运行时插入会晚于本文件，因此关键覆盖统一加
 * !important，避免被后插入的分包样式反压。
 */

/* ---------- 1. 弹窗整体放大 ---------- */
/* .kf-words-plus 由 kefu-words-plus.js 打在话术弹窗最外层（含 isMsgbox 的那个
   Modal 根节点）上；宽度以内联 width="600" 写死在 .ivu-modal 上，必须 !important。
   94vw / 4vh 的留白保证在 1366×768 这类小屏上仍能完整看到头部与底部按钮。 */
.isMsgbox.kf-words-plus .ivu-modal {
  width: min(1024px, 94vw) !important;
  top: 4vh !important;
  margin-bottom: 4vh;
}

.isMsgbox.kf-words-plus .ivu-modal-content {
  border-radius: 10px;
  overflow: hidden;
}

/* 源码里 isMsgbox 已把 body 内边距清零，这里显式再声明一次，防止分包样式顺序变化 */
.isMsgbox.kf-words-plus .ivu-modal-body {
  padding: 0 !important;
}

/* ---------- 2. 头部：标签与搜索框按放大后的宽度重排 ---------- */
.msg-box .head {
  padding: 18px 20px 0 !important;
}

.msg-box .head .tab-bar .tab-item {
  margin-right: 28px !important;
  font-size: 15px !important;
}

.msg-box .head .search-box {
  margin-top: 14px !important;
}

.msg-box .head .search-box .ivu-input {
  height: 34px;
  font-size: 13px;
}

/* ---------- 3. 主体：左右两栏高度与左栏宽度 ---------- */
.msg-box .main {
  height: clamp(360px, 60vh, 580px) !important;
  margin-top: 14px !important;
}

/* 左栏加宽到能容纳「分组名 + 编辑 + 删除」三部分；浅底把导航区与内容区区分开 */
.msg-box .main .left-box {
  width: 208px !important;
  background: #fafbfc;
  border-right: 1px solid #eef0f2 !important;
}

.msg-box .main .left-box .left-item {
  height: 38px !important;
  padding: 0 8px 0 14px !important;
}

/* 分组名允许收缩并省略，避免长名称把右侧操作按钮挤出可视区 */
.msg-box .main .left-box .left-item p {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 「+ 新增分组」图标：原字号 12px 且无内边距，点击热区偏小 */
.msg-box .main .left-box .left-item .iconaddto {
  flex: none;
  padding: 4px;
  font-size: 14px !important;
  color: #1890ff;
  cursor: pointer;
}

/* ---------- 4. 分组「编辑 / 删除」入口常显 ---------- */
/* 源码 .edit-wrapper 由 v-show="item.isEdit" 控制，未展开时行内 style 为
   display:none；入口 .iconDot 默认 opacity:0，只在选中行显示，且第一个分组被
   :first-child.on 规则额外隐藏。这里不改模板，只用 !important 覆盖 display，
   让每组都常显「编辑 / 删除」，点击命中源码原有的 editSort / delSort。 */
.msg-box .main .left-box .left-item .edit-wrapper {
  position: static !important;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  flex: none;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 2px;
  width: auto !important;
  background: transparent !important;
  box-shadow: none !important;
  z-index: auto !important;
}

.msg-box .main .left-box .left-item .edit-wrapper .edit-item {
  padding: 2px 7px !important;
  border-radius: 4px;
  color: #8a8d93 !important;
  font-size: 12px !important;
  line-height: 18px !important;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}

.msg-box .main .left-box .left-item .edit-wrapper .edit-item:hover {
  background: #eef1f4;
  color: #1890ff !important;
}

/* 第二个 .edit-item 是「删除」，hover 用警示色，避免误点 */
.msg-box .main .left-box .left-item .edit-wrapper .edit-item + .edit-item:hover {
  background: #fff1f0;
  color: #ff4d4f !important;
}

/* 入口已改为常显，原来的「...」图标与全屏透明关闭遮罩都用不上了。
   .edit-bg 是 position:fixed 的全屏透明层（z-index:40），留着会拦截内容区点击，
   这里一并隐藏；隐藏后不再有「弹出层」，也就没有需要关闭的弹出层。 */
.msg-box .main .left-box .left-item .iconDot {
  display: none !important;
}

.msg-box .main .left-box .left-item .edit-bg {
  display: none !important;
}

/* ---------- 5. 右栏：滚动容器撑满、滚动条收敛 ---------- */
.msg-box .main .right-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0 12px 12px 16px !important;
}

/* iView Scroll：.ivu-scroll-wrapper 是组件根，.ivu-scroll-container 是内容滚动层，
   height 属性（源码写死 360）以内联样式落在这层上，必须 !important 才能改成 100% */
.msg-box .main .right-box .right-scroll.ivu-scroll-wrapper {
  flex: 1 1 auto;
  /* 同时给出 100% 高度，保证内部容器 height:100% 一定有可解析的基准 */
  height: 100%;
  min-height: 0;
  width: 100% !important;
}

.msg-box .main .right-box .right-scroll .ivu-scroll-container {
  height: 100% !important;
  padding-right: 4px;
  scrollbar-width: thin;
}

.msg-box .main .right-box .right-scroll .ivu-scroll-container::-webkit-scrollbar {
  width: 6px;
}

.msg-box .main .right-box .right-scroll .ivu-scroll-container::-webkit-scrollbar-thumb {
  background: #d9d9d9;
  border-radius: 3px;
}

.msg-box .main .right-box .right-scroll .ivu-scroll-container::-webkit-scrollbar-thumb:hover {
  background: #c4c4c4;
}

.msg-box .main .right-box .right-scroll .ivu-scroll-container::-webkit-scrollbar-track {
  background: transparent;
}

/* ---------- 6. 添加 / 编辑话术：表单区卡片化并加高 ---------- */
.msg-box .main .right-box .add-box {
  margin-bottom: 12px !important;
}

.msg-box .main .right-box .msg-item .box2 {
  padding-bottom: 12px !important;
  border: 1px solid #eef0f2;
  border-radius: 8px !important;
  background: #f7f8fa !important;
}

.msg-box .main .right-box .msg-item .box2 .input-box .ivu-input {
  height: 36px;
  font-size: 13px;
}

/* 源码用 animation:mymove 把展开高度写死到 150px，放大后正文区需要更高。
   改为 height:auto + 取消动画，内容多少就撑多高，不影响 active 的切换逻辑。 */
.msg-box .main .right-box .msg-item .box2 .conBox.active {
  height: auto !important;
  overflow: visible !important;
  -webkit-animation: none !important;
  animation: none !important;
}

.msg-box .main .right-box .msg-item .box2 .content {
  padding: 12px !important;
  font-size: 13px !important;
}

.msg-box .main .right-box .msg-item .box2 .content .ivu-input {
  min-height: 96px !important;
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.6;
  background: #fff;
}

.msg-box .main .right-box .msg-item .box2 .bom {
  padding: 0 12px !important;
  margin-top: 12px !important;
}

/* 分组下拉在源码里写死 width:100px（内联），放大后保证分组名能看全 */
.msg-box .main .right-box .msg-item .box2 .bom .select .ivu-select {
  width: 150px !important;
}

.msg-box .main .right-box .msg-item .box2 .bom button {
  width: 76px !important;
  height: 32px;
  font-size: 13px;
}

/* ---------- 7. 话术列表行：加大点击区与行距，标题不再被压缩 ---------- */
.msg-box .main .right-box .msg-item .box1 {
  padding: 8px 10px;
  border-radius: 8px;
  transition: background-color .15s ease;
}

.msg-box .main .right-box .msg-item .box1:hover {
  background: #f7f8fa;
}

.msg-box .main .right-box .msg-item .box1 .txt-box {
  font-size: 13px !important;
  line-height: 1.7 !important;
  color: #6b6f76 !important;
}

/* 源码 max-width:370px 是给 600px 弹窗算的，放大后放开，让标题完整显示 */
.msg-box .main .right-box .msg-item .box1 .txt-box .title {
  max-width: none !important;
  margin-right: 6px !important;
  color: #222 !important;
}

.msg-box .main .right-box .msg-item .box1 .edit-box {
  right: 4px;
  width: 64px;
  height: 32px;
  border-radius: 6px;
}

/* ---------- 8. 分组编辑小弹窗（.class-box）放大 ---------- */
/* iView Modal 的 class 落在最外层容器上，内层 .ivu-modal 的宽度是内联写死的，
   因此这里用 !important 覆盖。 */
.class-box .ivu-modal {
  width: min(460px, 92vw) !important;
  top: 12vh !important;
}

.class-box .ivu-modal-body {
  padding: 22px 24px !important;
}

.class-box .ivu-modal-header p,
.class-box .ivu-modal-header-inner {
  font-size: 15px;
  font-weight: 600;
}

.class-box .item {
  margin-bottom: 16px !important;
}

.class-box .item span {
  width: 84px !important;
  font-size: 13px !important;
  color: #333;
}

.class-box .item .ivu-input {
  height: 36px !important;
  font-size: 13px;
}

.class-box .btn .ivu-btn {
  height: 38px !important;
  font-size: 14px;
  border-radius: 6px;
}

/* ---------- 9. 响应式 ---------- */
@media (max-width: 1350px) {
  .isMsgbox.kf-words-plus .ivu-modal {
    width: min(920px, 94vw) !important;
  }

  .msg-box .main .left-box {
    width: 188px !important;
  }
}

@media (max-width: 1200px) {
  .isMsgbox.kf-words-plus .ivu-modal {
    width: min(860px, 96vw) !important;
  }

  .msg-box .main {
    height: clamp(340px, 56vh, 520px) !important;
  }

  .msg-box .main .left-box {
    width: 168px !important;
  }

  .msg-box .main .left-box .left-item .edit-wrapper .edit-item {
    padding: 2px 5px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 1024px) {
  .isMsgbox.kf-words-plus .ivu-modal {
    width: 96vw !important;
    top: 3vh !important;
  }

  .msg-box .head {
    padding: 16px 16px 0 !important;
  }

  .msg-box .main {
    height: clamp(320px, 54vh, 480px) !important;
  }

  .msg-box .main .left-box {
    width: 152px !important;
  }

  .msg-box .main .right-box {
    padding: 0 10px 10px 12px !important;
  }
}

@media (max-width: 860px) {
  .msg-box .head .tab-bar .tab-item {
    margin-right: 20px !important;
    font-size: 14px !important;
  }

  .msg-box .main .left-box {
    width: 140px !important;
  }

  .msg-box .main .left-box .left-item {
    padding: 0 6px 0 10px !important;
  }

  .msg-box .main .left-box .left-item .edit-wrapper .edit-item {
    padding: 2px 4px !important;
    font-size: 11px !important;
  }

  .msg-box .main .right-box .msg-item .box2 .bom .select .ivu-select {
    width: 120px !important;
  }

  .class-box .ivu-modal {
    top: 6vh !important;
  }
}

/* ---------- 10. 自动回复内容弹窗：大弹窗 + 录入区重构 ---------- */
/* authReply 组件的根节点同样叫 .msg-box，与话术弹窗共用 isMsgbox，无法单靠类名区分。
   kefu-words-plus.js 会按「内部有 .caption、无 .left-box」识别出自动回复弹窗，并在其
   宿主 Modal 上额外打 kf-reply-plus；下面所有规则都挂在这个标记下，用更高特异性覆盖，
   话术弹窗（.left-box 布局）不受影响。 */
.isMsgbox.kf-words-plus.kf-reply-plus .ivu-modal {
  width: min(1120px, 95vw) !important;
  top: 3.5vh !important;
}

/* 顶部开关条：与正文之间加一条分割线，避免输入框直接贴在开关下方 */
.kf-reply-plus .msg-box .head {
  padding: 18px 24px 14px !important;
  border-bottom: 1px solid #f0f0f0;
  background: #fff;
}

.kf-reply-plus .msg-box .head .search-box {
  margin-top: 0 !important;
}

.kf-reply-plus .msg-box .caption {
  font-size: 14px !important;
  font-weight: 500;
  color: #1f2329;
}

.kf-reply-plus .msg-box .caption .switch {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  margin-left: 12px !important;
}

.kf-reply-plus .msg-box .main {
  margin-top: 0 !important;
  height: clamp(400px, 62vh, 620px) !important;
}

.kf-reply-plus .msg-box .main .right-box {
  padding: 16px 22px 16px 24px !important;
}

/* 添加 / 编辑表单：卡片化并加大录入区，长文本编辑更从容 */
.kf-reply-plus .msg-box .main .right-box .msg-item .box2 {
  padding-bottom: 14px !important;
  border: 1px solid #eceff2 !important;
  border-radius: 10px !important;
  background: #f7f8fa !important;
}

.kf-reply-plus .msg-box .main .right-box .msg-item .box2 .input-box .ivu-input {
  height: 40px;
  padding-left: 12px;
  font-size: 13px;
}

.kf-reply-plus .msg-box .main .right-box .msg-item .box2 .content {
  padding: 12px 14px 0 !important;
}

.kf-reply-plus .msg-box .main .right-box .msg-item .box2 .content .ivu-input {
  min-height: 110px !important;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.6;
  background: #fff;
}

.kf-reply-plus .msg-box .main .right-box .msg-item .box2 .bom {
  padding: 0 14px !important;
  margin-top: 12px !important;
}

/* 顶部添加区收起时只露出关键字一行，底部留白要清零，否则会出现一条多余的灰边；
   展开后在按钮组下方补回留白 */
.kf-reply-plus .msg-box .main .right-box .add-box .box2 {
  padding-bottom: 0 !important;
}

.kf-reply-plus .msg-box .main .right-box .add-box .box2 .bom {
  padding-bottom: 14px !important;
}

/* 排序输入在源码里没有宽度，占满整行；限定为固定宽度，和右侧按钮组区分开 */
.kf-reply-plus .msg-box .main .right-box .msg-item .box2 .bom .select .ivu-input-wrapper {
  width: 150px !important;
}

.kf-reply-plus .msg-box .main .right-box .msg-item .box2 .bom button {
  width: 80px !important;
  height: 32px;
}

/* 列表行：关键字单独一行、回复内容另起一行，长内容不再与关键字挤在一行 */
.kf-reply-plus .msg-box .main .right-box .msg-item .box1 {
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
}

.kf-reply-plus .msg-box .main .right-box .msg-item .box1:hover {
  background: #f7f8fa;
  border-color: #eef0f2;
}

.kf-reply-plus .msg-box .main .right-box .msg-item .box1 .txt-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  align-items: baseline;
  font-size: 13px !important;
}

.kf-reply-plus .msg-box .main .right-box .msg-item .box1 .txt-box .title {
  max-width: none !important;
  margin-right: 0 !important;
  color: #1f2329 !important;
  font-weight: 600;
}

/* 回复内容是 .txt-box 里没有类名的那个 span，独占一行 */
.kf-reply-plus .msg-box .main .right-box .msg-item .box1 .txt-box > span:not(.title) {
  flex: 1 1 100%;
  margin-top: 4px;
  color: #6b6f76;
  line-height: 1.7;
}

/* 行内编辑 / 删除按钮：底色与 hover 后的行底色一致，不出现白色方块 */
.kf-reply-plus .msg-box .main .right-box .msg-item .box1 .edit-box {
  top: 10px;
  right: 10px;
  height: 28px;
  border-radius: 6px;
  background: #f7f8fa !important;
}

@media (max-width: 1350px) {
  .isMsgbox.kf-words-plus.kf-reply-plus .ivu-modal {
    width: min(1000px, 95vw) !important;
  }
}

@media (max-width: 1024px) {
  .isMsgbox.kf-words-plus.kf-reply-plus .ivu-modal {
    top: 3vh !important;
  }

  .kf-reply-plus .msg-box .main {
    height: clamp(340px, 56vh, 520px) !important;
  }

  .kf-reply-plus .msg-box .main .right-box {
    padding: 14px 16px !important;
  }
}

@media (max-width: 860px) {
  .isMsgbox.kf-words-plus.kf-reply-plus .ivu-modal {
    width: 96vw !important;
  }

  .kf-reply-plus .msg-box .head {
    padding: 14px 16px 12px !important;
  }

  .kf-reply-plus .msg-box .head .search-box .caption {
    font-size: 13px !important;
  }
}