/**
 * 访客咨询页 · 手机端 H5 输入栏（第二阶段微调）
 *
 * 适用页面：由 chunk-3de6dd85 渲染的 mobileCustomerServer 访客页（/chat 系列路由），
 * 作用域限定在 .mobel_customerServer_container_footer（data-v-6ace7b5a）内，
 * 不影响 PC 工作台与其它后台页面。
 *
 * 改动范围：
 * 1. 空态提示文字「请输入内容」在胶囊输入框内左对齐、上下居中；
 *    仅在占位符可见（输入框为空）时生效，开始输入后正文对齐方式保持不变。
 * 2. 「圆圈＋」入口图标的尺寸与描边口径，与语音、表情两个圆形按钮一致。
 * 3. 窄屏与横屏安全区的响应式收敛，避免图标被挤压或裁切。
 * 4. 表情模式（.kf-mi-emo）下的纵向排布：底部容器不参与收缩，面板高度过渡与
 *    惯性滚动、安全区由面板承担，使「输入栏 + 表情面板」把会话区顶起而不是覆盖。
 *
 * 约束：只覆盖视觉表现，不触碰 textarea 的 focus / input / keyup 事件、
 * 发送按钮逻辑、表情面板与图片上传（input.file_input）链路。
 */

/* ---------- 1. 空态提示文字：左对齐 + 上下居中 ---------- */

/* :placeholder-shown 仅在输入框为空、原生占位符可见时命中，
   因此输入正文不会被改动，光标与换行行为保持原样。

   水平：text-align 由 center 改回 left，text-indent 归零，
   占位文字起点与正文首字起点完全重合（textarea 左右内边距为 0，
   外侧留白由胶囊的 padding: 0 10px 提供），实现「贴框靠左」。

   纵向：空态时 _input_con 高 22px 并在 40px 胶囊内 flex 居中（kefu-context.css），
   textarea 绝对定位 height:100%（同为 22px）；
   去掉上下 9px 内边距后，22px 行高正好占满这 22px，
   行盒上下各余 0，字形中心落在胶囊垂直中线上（上下均等）。
   开始输入后内边距恢复 9px，正文单行中心同样落在 20px 处，切换无跳动。 */
.mobel_customerServer_container_footer[data-v-6ace7b5a]
  .mobel_customerServer_container_footer_input_con
  textarea[data-v-6ace7b5a]:placeholder-shown {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 22px !important;
  text-align: left !important;
  text-indent: 0 !important;
}

/* 占位符颜色与目标稿一致：浅灰、不抢正文 */
.mobel_customerServer_container_footer[data-v-6ace7b5a]
  .mobel_customerServer_container_footer_input_con
  textarea[data-v-6ace7b5a]::-webkit-input-placeholder {
  color: #b6b6b6 !important;
}

.mobel_customerServer_container_footer[data-v-6ace7b5a]
  .mobel_customerServer_container_footer_input_con
  textarea[data-v-6ace7b5a]::placeholder {
  color: #b6b6b6 !important;
}

/* ---------- 2. 「圆圈＋」图标口径 ---------- */

/* kefu-mobile-input.js 已把 SVG 换成圆圈＋；这里统一尺寸，
   与语音、表情两个圆形按钮同为 28px，线条粗细由 SVG 的 stroke-width 决定。 */
.mobel_customerServer_container_footer[data-v-6ace7b5a] .kf-mi-ico svg {
  display: block;
  width: 28px;
  height: 28px;
}

/* 圆形按钮维持 30px 热区，图标不溢出到胶囊上 */
.mobel_customerServer_container_footer[data-v-6ace7b5a]
  .mobel_customerServer_container_footer_uploag_image {
  overflow: hidden;
}

/* ---------- 3. 响应式收敛 ---------- */

/* 375px 档（iPhone SE2 / 8 / 12 mini 等）：左右留白与 360px 档衔接，
   避免 361–375px 区间出现单侧贴边。 */
@media (max-width: 375px) {
  .mobel_customerServer_container_footer[data-v-6ace7b5a] {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .mobel_customerServer_container_footer[data-v-6ace7b5a] .kf-mi-ico,
  .mobel_customerServer_container_footer[data-v-6ace7b5a] .kf-mi-ico svg {
    width: 26px;
    height: 26px;
  }
}

/* 横屏且带左右安全区（刘海屏横置）：按安全区补偿，避免图标被圆角裁切 */
@media (orientation: landscape) and (max-height: 500px) {
  .mobel_customerServer_container_footer[data-v-6ace7b5a] {
    padding-left: calc(10px + env(safe-area-inset-left)) !important;
    padding-right: calc(10px + env(safe-area-inset-right)) !important;
  }
}

/* ---------- 4. 表情模式（复刻微信）：输入栏 + 表情面板把会话区顶起 ---------- */

/* 表情面板展开时由 kefu-mobile-input.js 给容器加上 .kf-mi-emo。
   底部容器改为不参与收缩（flex: 0 0 auto）：面板的 overflow:hidden 会把自身的
   自动最小高度算成 0，若允许收缩，面板底部会被裁掉一截，这正是「会话被遮挡」的
   直接成因之一。面板高度由脚本按最近一次键盘高度写成行内 !important，
   这里只补过渡与滚动惯性，不写死任何像素值。 */
.pc_customerServer_container.kf-mi-emo .footer_customerServer_container {
  flex: 0 0 auto;
  min-height: 0;
}

.pc_customerServer_container.kf-mi-emo .mobel_customerServer_container_footer_emojiList {
  flex: 0 0 auto;
  transition: height 0.25s ease;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* 表情面板展开后，底部安全区由面板承担，输入栏不再重复留白 */
.pc_customerServer_container.kf-mi-emo .mobel_customerServer_container_footer[data-v-6ace7b5a] {
  padding-bottom: 7px !important;
}

.pc_customerServer_container.kf-mi-emo
  .mobel_customerServer_container_footer_emojiList[data-v-6ace7b5a] {
  padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
}

/* 「在线客服」浮标是绝对定位在输入栏上方 60px 的独立标签，键盘或表情面板展开时
   正好压在最后一条消息上；这两个状态下隐藏它，收起后自动恢复，链接与点击行为不变 */
.pc_customerServer_container.kf-mi-kb .crmchat_link[data-v-6ace7b5a],
.pc_customerServer_container.kf-mi-emo .crmchat_link[data-v-6ace7b5a] {
  display: none !important;
}

/* ---------- 5. 会话滚动区：可视高度与内容区严格一致 ---------- */

/* vue-happy-scroll 的尺寸是组件挂载时一次性算好并写成行内样式的
   （访客页实测为 width:410px; height:755px），此后既不监听窗口尺寸，也不监听
   祖先容器的高度变化。而外层 .happy-scroll 跟随 flex 收缩：键盘弹起时内容区
   391px、表情面板展开时 455px，滚动视口却仍是 755px，滚到底部后末尾约 300px
   会话内容落进 overflow:hidden 的裁剪区，看起来就是「输入栏/表情面板遮住了
   会话」。这里把滚动视口钉在外层容器上：
   - height:100% 让滚动可视高度始终等于会话区实际高度，滚到底部即最后一条消息；
   - width:100% 消除组件多加的 20px 横向溢出（右侧气泡被裁）。
   只覆盖访客手机页（data-v-6ace7b5a），PC 工作台与其它路由不受影响。 */
.pc_customerServer_container[data-v-6ace7b5a]
  .pc_customerServer_container_content[data-v-6ace7b5a]
  .happy-scroll-container {
  width: 100% !important;
  height: 100% !important;
}

/* 内容层跟随滚动视口宽度，避免行内块在窄屏下多出 20px 造成横向裁切 */
.pc_customerServer_container[data-v-6ace7b5a]
  .pc_customerServer_container_content[data-v-6ace7b5a]
  .happy-scroll-content {
  width: 100% !important;
  box-sizing: border-box !important;
}

.pc_customerServer_container[data-v-6ace7b5a]
  #chat_scroll[data-v-6ace7b5a] {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* 输入区在任何状态下都不参与收缩：键盘把容器压到 300px 级高度时，
   若允许 footer 收缩，输入框会被压扁或挤出可视区 */
.pc_customerServer_container[data-v-6ace7b5a]
  .footer_customerServer_container {
  flex: 0 0 auto !important;
}

/* 会话区为绝对定位的浮标（在线客服标签）提供定位参照，滚动容器高度变化时
   浮标不会跟着错位 */
.pc_customerServer_container[data-v-6ace7b5a]
  .pc_customerServer_container_content[data-v-6ace7b5a] {
  position: relative;
}

/* ---------- 6. 滚动与合成层加固（只影响流畅度，不改变布局取值） ---------- */

/* 会话区滚到边界后不再把滚动传递给页面本体。页面一旦被带着上下滚，
   visualViewport.offsetTop 就会变化，键盘态的纵向校准被反复触发，
   表现是输入栏轻微上下浮动；该声明只拦截边界滚动传递，不改变滚动惯性 */
.pc_customerServer_container[data-v-6ace7b5a]
  .pc_customerServer_container_content[data-v-6ace7b5a]
  .happy-scroll-container {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* 键盘态容器带 translateY 位移：提前声明合成层，避免键盘动画的每一帧
   都重新栅格化整块会话内容；键盘收起后该声明随 class 一起失效，不长期占用显存 */
.pc_customerServer_container.kf-mi-kb {
  will-change: transform;
}

/* ---------- 7. 表情面板（对标微信）与「文字 ⇄ 表情」切换提示 ---------- */

/* 7.1 面板底色与分割线：微信表情面板为浅灰底，与输入栏之间有一条细分隔线；
   面板高度仍由脚本按键盘高度写成行内 !important，这里只改视觉层 */
.pc_customerServer_container[data-v-6ace7b5a]
  .mobel_customerServer_container_footer_emojiList[data-v-6ace7b5a] {
  background: #f7f7f8 !important;
  border-top: 1px solid #ececec;
  box-sizing: border-box;
}

/* 7.2 表情网格：8 列等宽、40px 单元格热区、26px 字形，按下有灰底反馈。
   原样式为 9 列 20px 裸字符，格子小、无按压反馈，指腹误触率高 */
.pc_customerServer_container[data-v-6ace7b5a]
  .mobel_customerServer_container_footer_emojiList[data-v-6ace7b5a]
  .emoji-list[data-v-6ace7b5a] {
  order: 1;
  grid-template-columns: repeat(8, 1fr) !important;
  grid-row-gap: 4px !important;
  padding: 2px 0;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.pc_customerServer_container[data-v-6ace7b5a]
  .mobel_customerServer_container_footer_emojiList[data-v-6ace7b5a]
  .emoji-list[data-v-6ace7b5a]
  .emoji-item[data-v-6ace7b5a] {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  border-radius: 8px;
  transition: background-color 0.12s ease;
}

.pc_customerServer_container[data-v-6ace7b5a]
  .mobel_customerServer_container_footer_emojiList[data-v-6ace7b5a]
  .emoji-list[data-v-6ace7b5a]
  .emoji-item.qq[data-v-6ace7b5a] {
  font-size: 26px !important;
  line-height: 1 !important;
}

.pc_customerServer_container[data-v-6ace7b5a]
  .mobel_customerServer_container_footer_emojiList[data-v-6ace7b5a]
  .emoji-list[data-v-6ace7b5a]
  .emoji-item[data-v-6ace7b5a]:active {
  background: #e6e7e9;
}

/* 7.3 分类页签移到面板底部（微信口径）：只用 order 调换视觉顺序，
   DOM 顺序与点击绑定保持不变，因此不影响表情插入逻辑 */
.pc_customerServer_container[data-v-6ace7b5a]
  .mobel_customerServer_container_footer_emojiList[data-v-6ace7b5a]
  .emoji-tabs[data-v-6ace7b5a] {
  order: 2;
  justify-content: center;
  padding: 6px 0 0 !important;
  border-bottom: 0 !important;
  border-top: 1px solid #e9eaec;
}

.pc_customerServer_container[data-v-6ace7b5a]
  .mobel_customerServer_container_footer_emojiList[data-v-6ace7b5a]
  .emoji-tabs[data-v-6ace7b5a]
  .tab-item[data-v-6ace7b5a] {
  padding: 4px 14px !important;
  border-radius: 999px;
  color: #7c8088;
  font-size: 12px;
  line-height: 18px;
  transition: background-color 0.16s ease, color 0.16s ease;
}

.pc_customerServer_container[data-v-6ace7b5a]
  .mobel_customerServer_container_footer_emojiList[data-v-6ace7b5a]
  .emoji-tabs[data-v-6ace7b5a]
  .tab-item + .tab-item[data-v-6ace7b5a] {
  margin-left: 6px !important;
}

/* 当前分类用白底胶囊 + 主题色文字，白底在浅灰面板上形成明确层级 */
.pc_customerServer_container[data-v-6ace7b5a]
  .mobel_customerServer_container_footer_emojiList[data-v-6ace7b5a]
  .emoji-tabs[data-v-6ace7b5a]
  .tab-item.on[data-v-6ace7b5a] {
  background: #fff;
  color: #3875ea;
  font-weight: 500;
  box-shadow: 0 1px 3px rgba(20, 42, 84, 0.1);
}

/* 7.4 模式提示（一）：表情态下表情按钮出现浅灰圆形底，图标已由脚本换成键盘，
   即「现在是表情输入，点这里回到文字输入」 */
.pc_customerServer_container.kf-mi-emo
  .mobel_customerServer_container_footer[data-v-6ace7b5a]
  .mobel_customerServer_container_footer_emoji[data-v-6ace7b5a] {
  position: relative;
}

.pc_customerServer_container.kf-mi-emo
  .mobel_customerServer_container_footer[data-v-6ace7b5a]
  .mobel_customerServer_container_footer_emoji[data-v-6ace7b5a]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border-radius: 50%;
  background: #e4e6e9;
}

.pc_customerServer_container.kf-mi-emo
  .mobel_customerServer_container_footer[data-v-6ace7b5a]
  .mobel_customerServer_container_footer_emoji[data-v-6ace7b5a]
  .kf-mi-ico {
  position: relative;
  z-index: 1;
}

/* 7.5 模式提示（二）：文字态下胶囊输入框聚焦即出现主题色描边，与表情态的
   灰色圆钮形成两态对照，切换时不再需要猜测当前输入方式 */
.pc_customerServer_container[data-v-6ace7b5a]
  .mobel_customerServer_container_footer_input[data-v-6ace7b5a]:focus-within {
  box-shadow: 0 0 0 2px rgba(56, 117, 234, 0.45) !important;
}

/* ---------- 8. 会话区可读性与最后一条消息完整显示 ---------- */

/* 8.1 气泡与头像顶部对齐：原样式 align-items:center，多行文案会把气泡首行推到
   头像垂直中部以下，逐条阅读时视线要反复回落；改为顶部对齐后首行与头像上沿齐平，
   图片、商品卡片同样受益。 */
.pc_customerServer_container[data-v-6ace7b5a]
  .pc_customerServer_container_content[data-v-6ace7b5a]
  .chart_list_item_content[data-v-6ace7b5a] {
  align-items: flex-start !important;
}

/* 8.2 文字气泡：宽度随内容自适应到 70% 上限（原 60% 在 375px 屏上仅约 200px，
   稍长一句就折成三四行）。长链接、连续英文与无空格串强制断行，既不撑破容器，
   也不会被右侧裁切；客服（左）与访客（右）沿用同一口径，左右各自的底色与
   文字对齐由原样式保留。 */
.pc_customerServer_container[data-v-6ace7b5a]
  .pc_customerServer_container_content[data-v-6ace7b5a]
  .chart_list_item_text[data-v-6ace7b5a] {
  max-width: 70% !important;
  min-width: 0;
  box-sizing: border-box;
  line-height: 1.5;
  word-wrap: break-word !important;
  word-break: break-word;
  overflow-wrap: break-word;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(20, 42, 84, 0.06);
}

/* 8.3 图片气泡：图片按气泡宽度等比缩放并显示为块级，去掉行内图片底部
   基线留白（约 3–4px），避免图片与下一条消息间距忽大忽小 */
.pc_customerServer_container[data-v-6ace7b5a]
  .pc_customerServer_container_content[data-v-6ace7b5a]
  .chart_list_item_img[data-v-6ace7b5a] img {
  display: block !important;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

/* 8.4 滚动内容层改为块级：inline-block 会带入行盒基线间隙，滚到底部时
   最后一条消息下方多出一段看不见的高度，看起来像「没滚到底」 */
.pc_customerServer_container[data-v-6ace7b5a]
  .pc_customerServer_container_content[data-v-6ace7b5a]
  .happy-scroll-content {
  display: block !important;
}

/* 8.5 会话区滚动流畅度：只允许纵向手势交给会话列表，横向手势不再争抢滚动权，
   配合 overscroll-behavior: contain 让上下滑动始终作用在消息区而不带动整页 */
.pc_customerServer_container[data-v-6ace7b5a]
  .pc_customerServer_container_content[data-v-6ace7b5a]
  .happy-scroll-container {
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* 8.6 文字气泡行高与断行加固：1.55 行距比原 1.5 略松，逐行扫读时行间区分更清楚；
   overflow-wrap:anywhere 让超长链接、连续英文、无空格串在任意位置断行，
   不会撑破气泡宽度，也不会在窄屏上被右侧裁切。 */
.pc_customerServer_container[data-v-6ace7b5a]
  .pc_customerServer_container_content[data-v-6ace7b5a]
  .chart_list_item_text[data-v-6ace7b5a] {
  line-height: 1.55 !important;
  overflow-wrap: anywhere;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* 8.7 时间分隔标签：居中、浅灰、与上下气泡保持呼吸间距，滚动时作为分段的视觉锚点 */
.pc_customerServer_container[data-v-6ace7b5a]
  .pc_customerServer_container_content[data-v-6ace7b5a]
  .chart_list_item_time[data-v-6ace7b5a] {
  text-align: center;
  color: #9aa0a8 !important;
  font-size: 12px;
  line-height: 18px;
  margin: 8px 0 2px;
}

/* 8.8 消息行结构完整性：flex 子项默认 min-width:auto，超长内容会把行撑宽；
   统一置 0 后由气泡自身的 max-width 决定换行，头像与气泡不会互相挤压 */
.pc_customerServer_container[data-v-6ace7b5a]
  .pc_customerServer_container_content[data-v-6ace7b5a]
  .chart_list_item_content[data-v-6ace7b5a] {
  min-width: 0;
  box-sizing: border-box;
}

/* ---------- 9. 长按复制消息 ---------- */

/* 浮层固定定位、独立于文档流，不占会话高度、不改变任何布局取值 */
.kf-mi-copy {
  position: fixed;
  z-index: 2147483500;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  padding: 3px;
  border-radius: 10px;
  background: rgba(38, 40, 44, 0.94);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  -webkit-tap-highlight-color: transparent;
}

.kf-mi-copy::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 2px;
  background: rgba(38, 40, 44, 0.94);
  transform: rotate(45deg);
}

/* 气泡贴近视口顶部、浮层改放到下方时，箭头同步翻到浮层上沿，指向被长按的气泡 */
.kf-mi-copy-below::after {
  top: -5px;
  bottom: auto;
}

.kf-mi-copy-btn {
  min-width: 52px;
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font-size: 14px;
  line-height: 34px;
  text-align: center;
  cursor: pointer;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.kf-mi-copy-btn:active {
  background: rgba(255, 255, 255, 0.16);
}

/* ---------- 10. 输入栏稳定性加固 ---------- */

/* 10.1 关闭移动端字号自动放大：WebView 横屏或系统字号偏大时，浏览器会自行放大正文，
   textarea 与镜像 <p> 的放大幅度不一定一致，两者高度就会错位（表现为输入框抖动、
   光标与文字错行）。固定为 100% 后两端始终按 CSS 声明的 16px / 22px 渲染。 */
.pc_customerServer_container[data-v-6ace7b5a] {
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

/* 10.2 输入栏内按钮：去掉 300ms 点击延迟与双击缩放判定，点按响应更跟手 */
.mobel_customerServer_container_footer[data-v-6ace7b5a] .kf-mi-voice,
.mobel_customerServer_container_footer[data-v-6ace7b5a] .mobel_customerServer_container_footer_emoji,
.mobel_customerServer_container_footer[data-v-6ace7b5a] .mobel_customerServer_container_footer_uploag_image,
.mobel_customerServer_container_footer[data-v-6ace7b5a] .sendMessage {
  touch-action: manipulation;
}

/* 10.3 多行输入：镜像 <p> 与 textarea 采用同一断行规则，行数一致才不会出现
   「输入框比文字高一行」的跳动；超过 106px 上限后由 textarea 内部滚动，
   输入栏本身不再继续长高，会话区高度因此保持恒定。 */
.mobel_customerServer_container_footer_input_con[data-v-6ace7b5a] {
  overflow: hidden !important;
  overscroll-behavior: contain;
}

.mobel_customerServer_container_footer_input_con .font[data-v-6ace7b5a] {
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

.mobel_customerServer_container_footer_input_con textarea[data-v-6ace7b5a] {
  overflow-y: auto !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  -webkit-overflow-scrolling: touch;
}