/* 客服后台移动端响应式样式 */

/* 强制移动端宽度自适应 */
#chat_scroll {
  max-width: 100% !important;
}

/* 修复滚动容器宽度 */
.happy-scroll-container,
.happy-scroll-content {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* 移动端隐藏类 */
.mobile-hidden {
  display: none;
}

/* 移动端返回按钮 */
.mobile-back-btn {
  display: none;
}

/* 平板和手机适配 (≤768px) */
@media screen and (max-width: 768px) {
  /* 显示/隐藏控制 */
  .mobile-hidden {
    display: none !important;
  }

  /* 返回按钮 */
  .mobile-back-btn {
    display: flex !important;
    align-items: center;
    padding: 12px 15px;
    background: #f8f8f8;
    border-bottom: 1px solid #e8e8e8;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
  }

  .mobile-back-btn i {
    margin-right: 8px;
  }

  .mobile-back-btn:active {
    background: #efefef;
  }

  /* 主布局 */
  .kefu-layouts {
    padding-top: 0 !important;
    background: #fff !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .content-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    margin: 0 !important;
  }

  .content-wrapper .container {
    flex-direction: row !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 聊天列表 */
  .chatList {
    width: 100% !important;
    height: auto !important;
    border-right: none !important;
  }

  .chatList .search_box {
    margin: 10px 10px 0 10px !important;
  }

  .chatList .tab-head {
    padding: 0 30px !important;
  }

  .chatList .scroll-box {
    height: calc(100vh - 200px) !important;
  }

  .chatList .chat-item {
    padding: 12px 15px !important;
  }

  .chatList .chat-item .user-info {
    width: calc(100vw - 150px) !important;
  }

  /* 聊天内容区 */
  .chat-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    border-right: none !important;
  }

  .chat-content .chat-body {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100vh - 320px) !important;
  }

  .chat-content .chat-body happy-scroll,
  .chat-content .chat-body .happy-scroll-container,
  .chat-content .chat-body .happy-scroll-content {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .chat-content .chat-body #chat_scroll {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    padding: 10px !important;
    box-sizing: border-box !important;
  }

  .chat-content .chat-item .msg-wrapper {
    max-width: 70vw !important;
  }

  .chat-content .chat-textarea {
    height: auto !important;
    min-height: 180px;
  }

  .chat-content .chat-textarea .chat-btn-wrapper {
    padding: 10px 0;
  }

  .chat-content .chat-textarea .emoji-box {
    width: 100% !important;
    left: 0 !important;
  }

  .chat-content .chat-textarea .textarea-box {
    min-height: 80px;
  }

  /* 右侧菜单隐藏 */
  .right_menu {
    display: none !important;
  }
}

/* 小屏手机适配 (≤480px) */
@media screen and (max-width: 480px) {
  /* 聊天列表 */
  .chatList .tab-head {
    padding: 0 20px !important;
    font-size: 13px !important;
  }

  .chatList .chat-item {
    padding: 10px !important;
  }

  .chatList .chat-item .avatar {
    width: 35px !important;
    height: 35px !important;
  }

  .chatList .chat-item .user-info {
    width: calc(100vw - 130px) !important;
    margin-left: 8px !important;
    font-size: 14px !important;
  }

  .chatList .chat-item .user-info .hd .label {
    font-size: 11px !important;
    padding: 0px 4px !important;
  }

  .chatList .chat-item .user-info .bd {
    font-size: 11px !important;
  }

  /* 聊天内容 */
  .chat-content .chat-body {
    max-height: calc(100vh - 280px) !important;
  }

  .chat-content .chat-body happy-scroll {
    width: 100% !important;
  }

  .chat-content .chat-body #chat_scroll {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px !important;
  }

  .chat-content .chat-item .avatar {
    width: 35px !important;
    height: 35px !important;
    margin-right: 10px !important;
  }

  .chat-content .chat-item .msg-wrapper {
    max-width: 65vw !important;
    font-size: 13px !important;
  }

  .chat-content .chat-item.right-box .avatar {
    margin-right: 0 !important;
    margin-left: 10px !important;
  }

  .chat-content .chat-item .order-wrapper {
    width: 100% !important;
    max-width: 280px !important;
  }

  .chat-content .chat-textarea .chat-btn-wrapper .left-wrapper .icon-item {
    margin-left: 10px !important;
  }

  .chat-content .chat-textarea .chat-btn-wrapper .left-wrapper .icon-item .iconfont {
    font-size: 20px !important;
  }

  .chat-content .chat-textarea .chat-btn-wrapper .right-wrapper {
    padding-right: 10px !important;
  }

  .send-btn {
    margin-right: 5px !important;
  }

  .send-btn .btns {
    padding: 6px 15px !important;
    font-size: 14px !important;
  }
}