/* ============================================================
 * CRMChat 客服工作台 · 手机端兼容补丁 (mobile-fix)
 * 仅在窄屏 (<=768px) 生效；桌面端不受影响。
 * ============================================================ */
@media screen and (max-width: 768px) {
  html, body, #app {
    height: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    -webkit-text-size-adjust: 100%;
  }

  .kefu-layouts,
  .kefu-layouts .content-wrapper,
  .content-wrapper {
    width: 100% !important;
    min-width: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0 !important;
  }

  .base-header {
    height: 52px !important;
    padding: 0 8px !important;
  }
  .base-header .left-wrapper {
    padding-right: 8px !important;
  }
  .base-header .left-wrapper .search_box {
    width: auto !important;
    max-width: 46vw !important;
  }

  .content-wrapper .container {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
    height: calc(100vh - 52px) !important;
    height: calc(100dvh - 52px) !important;
    overflow: hidden !important;
  }

  /* 默认：只看会话列表，聊天区/资料先收起，避免三栏挤在一起 */
  .chatList {
    width: 100% !important;
    height: auto !important;
    -webkit-box-flex: 1 !important;
    -ms-flex: 1 !important;
    flex: 1 !important;
    min-height: 0 !important;
    border-right: 0 !important;
  }
  .chatList .scroll-box {
    height: auto !important;
    -webkit-box-flex: 1 !important;
    -ms-flex: 1 !important;
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  /* 关键修复：vue-scroll 内层容器不做 flex 拉伸，否则首个客户项被撑满、
     盖住下面所有项 —— 于是点哪都进第一个客户。 */
  .chatList .scroll-box .__vuescroll,
  .chatList .scroll-box .__panel,
  .chatList .scroll-box .__view,
  .chatList .scroll-box > div {
    display: block !important;
    position: relative !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    width: 100% !important;
    -webkit-transform: none !important;
    transform: none !important;
    -webkit-box-flex: 0 !important;
    -ms-flex: 0 0 auto !important;
    flex: 0 0 auto !important;
  }
  .chatList .chat-item {
    -webkit-box-flex: 0 !important;
    -ms-flex: 0 0 auto !important;
    flex: 0 0 auto !important;
    min-height: 56px !important;
    height: auto !important;
    padding: 8px 12px !important;
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
  }
  .chatList .chat-item .user-info {
    width: auto !important;
    -webkit-box-flex: 1 !important;
    -ms-flex: 1 !important;
    flex: 1 !important;
    min-width: 0 !important;
  }

  /*
   * 未打开会话时聊天区仍保持真实尺寸挂载，只移到屏幕外。
   * CRMChat 的 happy-scroll 如果在 display:none 时初始化，会把记录区算成 0 高。
   */
  .content-wrapper .container {
    position: relative !important;
  }
  .content-wrapper .container:not(.mobile-chat-open) > .chat-content {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    position: absolute !important;
    left: 100vw !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  .content-wrapper .container:not(.mobile-chat-open) > .right_menu {
    display: none !important;
  }

  /* 打开会话后：藏掉全部客户列表 + 资料栏，聊天占满 */
  .content-wrapper .container.mobile-chat-open > .chatList {
    display: none !important;
  }
  .content-wrapper .container.mobile-chat-open > .right_menu {
    display: none !important;
  }
  .content-wrapper .container.mobile-chat-open > .chat-content {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    width: 100% !important;
    -webkit-box-flex: 1 !important;
    -ms-flex: 1 !important;
    flex: 1 !important;
    min-height: 0 !important;
    border-right: 0 !important;
    height: 100% !important;
  }
  .content-wrapper .container .chat-content .chat-body {
    max-height: none !important;
    -webkit-box-flex: 1 !important;
    -ms-flex: 1 !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  #chat_scroll {
    width: 100% !important;
    padding: 12px !important;
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
  }
  .content-wrapper .container .chat-content .chat-body .chat-item .msg-wrapper {
    max-width: 74vw !important;
  }
  .content-wrapper .container .chat-content .chat-body .chat-item .msg-wrapper .order-wrapper {
    width: auto !important;
    max-width: 74vw !important;
  }
  .content-wrapper .container .chat-content .chat-textarea {
    padding: 0 8px !important;
    -ms-flex-negative: 0 !important;
    flex-shrink: 0 !important;
  }

  .main {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
  }
  .main .left-box,
  .main .right-box {
    width: 100% !important;
  }

  .happy-scroll-container,
  [class*="happy-scroll-content"] {
    width: 100% !important;
  }
  .content-wrapper .container .chat-content .happy-scroll-container,
  .content-wrapper .container .chat-content [class*="happy-scroll-content"] {
    height: 100% !important;
  }
  .ivu-modal,
  .ivu-drawer {
    max-width: 96vw !important;
  }

  /* 返回会话列表按钮 */
  #wanxi-mobile-chat-back {
    display: none;
    position: fixed;
    top: 58px;
    left: 8px;
    z-index: 9999;
    height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 16px;
    background: rgba(24, 144, 255, 0.95);
    color: #fff;
    font-size: 13px;
    line-height: 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  }
  body.mobile-chat-open #wanxi-mobile-chat-back {
    display: inline-block;
  }

  /* 登出按钮：固定右上角，始终可见 */
  #wanxi-mobile-logout {
    display: inline-block;
    position: fixed;
    top: 12px;
    right: 10px;
    z-index: 10000;
    height: 30px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 13px;
    line-height: 28px;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
}

@media screen and (max-width: 768px) {
  /* 版本号角标：确认拉到最新（非缓存） */
  #wanxi-mobile-ver {
    position: fixed;
    left: 6px;
    bottom: 4px;
    z-index: 10001;
    font-size: 10px;
    line-height: 1.4;
    color: rgba(0, 0, 0, 0.35);
    background: rgba(255, 255, 255, 0.6);
    padding: 1px 5px;
    border-radius: 6px;
    pointer-events: none;
  }
  /* 诊断条本轮先不弹（避免遮挡），只保留版本角标 */
  #wanxi-mobile-diag {
    display: none !important;
  }
  /* 诊断条：点击客户时显示「点了 vs 选中」 */
  #wanxi-mobile-diag {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: 22px;
    z-index: 100000;
    background: rgba(0, 0, 0, 0.82);
    color: #0f0;
    font-size: 12px;
    line-height: 1.5;
    padding: 6px 8px;
    border-radius: 8px;
    font-family: monospace;
    white-space: pre-wrap;
  }
}

/* 桌面端不显示自定义登出/返回/版本/诊断 */
@media screen and (min-width: 769px) {
  #wanxi-mobile-logout,
  #wanxi-mobile-chat-back,
  #wanxi-mobile-ver,
  #wanxi-mobile-diag {
    display: none !important;
  }
}