/* CS 客服聊天页 · 固定顶栏返回 + 底栏输入 */
#screen-cs-group-chat.active,
#screen-cs-user-chat.active {
  display: flex !important;
  flex-direction: column;
  min-height: 100dvh;
  max-height: 100dvh;
  overflow: hidden !important;
  padding: 0 !important;
  box-sizing: border-box;
}

#screen-cs-group-chat .sub-bar,
#screen-cs-user-chat .sub-bar {
  flex: 0 0 auto;
  position: relative;
  min-height: 54px;
  margin: 0;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 10px;
  z-index: 50;
  background: rgba(15, 23, 42, 0.96);
  border-bottom: 1px solid rgba(56, 189, 248, 0.28);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

#screen-cs-group-chat .sub-title,
#screen-cs-user-chat .sub-title {
  padding: 0 96px 0 8px;
  text-align: left;
  font-size: 1.02rem;
}

#screen-cs-group-chat .back--top,
#screen-cs-user-chat .back--top {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  margin-top: calc(env(safe-area-inset-top, 0px) / 2);
  z-index: 60;
  min-width: 72px;
  min-height: 40px;
  padding: 8px 14px;
  font-size: 0.92rem;
  visibility: visible !important;
  opacity: 1 !important;
}

#screen-cs-group-chat .cs-group-page,
#screen-cs-user-chat .user-cs-page {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  overflow: hidden;
}

#screen-cs-group-chat .user-cs-tip,
#screen-cs-user-chat .user-cs-tip {
  flex: 0 0 auto;
  margin: 0;
  padding: 8px 12px 10px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(186, 230, 253, 0.88);
  background: rgba(15, 23, 42, 0.55);
}

#screen-cs-group-chat .cs-group-panel,
#screen-cs-user-chat .user-cs-panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent;
  overflow: hidden;
}

#screen-cs-group-chat .cam-cs-chat,
#screen-cs-user-chat .cam-cs-chat {
  flex: 1 1 auto;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 12px 12px;
}

#screen-cs-group-chat .cam-cs-compose,
#screen-cs-user-chat .cam-cs-compose {
  flex: 0 0 auto;
  position: relative;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(15, 23, 42, 0.98);
  border-top: 1px solid rgba(56, 189, 248, 0.22);
  box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.28);
}

#screen-cs-group-chat .cam-cs-input,
#screen-cs-user-chat .cam-cs-input {
  flex: 1 1 auto;
  min-width: 0;
}

#screen-cs-group-chat .cam-cs-compose-btn--send,
#screen-cs-user-chat .cam-cs-compose-btn--send {
  flex: 0 0 auto;
}

#screen-cs-user-chat .cam-cs-msg-who,
#screen-cs-group-chat .cam-cs-msg-who {
  font-size: 0.88rem !important;
}

#screen-cs-user-chat .cam-cs-msg-body,
#screen-cs-group-chat .cam-cs-msg-body {
  font-size: 1.06rem !important;
  line-height: 1.68 !important;
}

#screen-cs-user-chat .cam-cs-head strong,
#screen-cs-group-chat .cam-cs-head strong {
  font-size: 1.08rem !important;
}

/* cs-emoji-fix-20260729 · 表情面板在输入栏上方 */
#screen-cs-user-chat .user-cs-panel,
#screen-cs-group-chat .cs-group-panel {
  position: relative;
}

#screen-cs-user-chat .cam-cs-head {
  order: 0;
  flex-shrink: 0;
}

#screen-cs-user-chat .cam-cs-chat,
#screen-cs-group-chat .cam-cs-chat {
  order: 1;
}

#screen-cs-user-chat .cam-cs-emoji-panel,
#screen-cs-group-chat .cam-cs-emoji-panel {
  order: 2;
  flex: 0 0 auto;
  position: relative;
  z-index: 55;
  min-height: 48px;
  max-height: min(38vh, 168px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid rgba(56, 189, 248, 0.2);
  border-bottom: 1px solid rgba(56, 189, 248, 0.14);
  background: rgba(8, 14, 28, 0.98);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.38);
}

#screen-cs-user-chat .cam-cs-compose,
#screen-cs-group-chat .cam-cs-compose {
  order: 3;
  z-index: 50;
}

/* 客服工作台 · 确保四页列表可见 */
#screen-cs.active {
  display: flex !important;
  flex-direction: column;
  min-height: 100dvh;
  max-height: 100dvh;
  overflow: hidden !important;
}

#screen-cs .cs-hub-page {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#screen-cs .cs-tg-panels {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

#screen-cs .cs-hub-panel.is-active {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

#screen-cs .cs-tg-list,
#screen-cs .cs-hub-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* cs-toolbar-green-20260730 · 客服选中绿色 + 底栏工具合并 */
#screen-cs-user-chat .user-cs-agent-row {
  display: flex;
  gap: 6px;
  padding: 8px 10px 4px;
  flex-wrap: nowrap;
}
#screen-cs-user-chat .user-cs-agent-btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 2px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.92);
  color: #334155;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
#screen-cs-user-chat .user-cs-agent-btn--active,
#screen-cs-user-chat .user-cs-agent-btn.user-cs-agent-btn--active {
  background: #22c55e !important;
  border-color: #16a34a !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.38);
}
#screen-cs-user-chat .user-cs-compose.user-cs-compose {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
#screen-cs-user-chat .user-cs-toolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
}
#screen-cs-user-chat .user-cs-toolbar .cam-cs-compose-btn {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  height: 42px;
  max-width: none;
  padding: 0;
  margin: 0;
  font-size: 17px;
  line-height: 1;
  border-radius: 10px;
}
#screen-cs-user-chat .user-cs-inputbar {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
#screen-cs-user-chat .user-cs-inputbar .cam-cs-input {
  flex: 1 1 auto;
  min-width: 0;
}
#screen-cs-user-chat .user-cs-inputbar .cam-cs-compose-btn--send {
  flex: 0 0 auto;
  min-width: 56px;
}
#screen-cs-user-chat .user-cs-toolbar .pub-chat-voice-btn.is-recording {
  background: #dc2626 !important;
  color: #fff !important;
}
#userCsPairHint { display: none !important; }
/* cs-tab-green2-20260730 */
#screen-cs-user-chat .user-cs-agent-btn[aria-selected="true"],
#screen-cs-user-chat .user-cs-agent-btn.user-cs-agent-btn--active {
  background: #22c55e !important;
  border-color: #16a34a !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.45) !important;
}
#screen-cs-user-chat .user-cs-agent-btn:not([aria-selected="true"]) {
  background: rgba(255, 255, 255, 0.92) !important;
  color: #334155 !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  box-shadow: none !important;
}

/* cs-hub-clean-20260731 · 工作台顶栏贴近飞机 */
#screen-cs .cs-head {
  align-items: center;
  margin: 0 0 10px;
  padding: calc(6px + env(safe-area-inset-top, 0px)) 2px 8px;
  border-bottom: 1px solid rgba(56, 189, 248, 0.18);
}
#screen-cs .cs-head-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#screen-cs .cs-head-logout {
  flex: 0 0 auto;
  min-width: 56px;
  min-height: 36px;
  padding: 6px 12px;
  font-size: 0.88rem;
}
#screen-cs .cs-badge,
#screen-cs #csExpireHint,
#screen-cs .auth-hint#csExpireHint {
  display: none !important;
}
#screen-cs .cs-hub-tabs {
  margin-top: 2px;
}
#screen-cs-user-chat .user-cs-clear-btn {
  position: absolute;
  right: 52px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid rgba(248, 113, 113, 0.45);
  background: rgba(127, 29, 29, 0.35);
  color: #fecaca;
  font-size: 0.72rem;
  cursor: pointer;
}
#screen-cs-user-chat .sub-bar { position: relative; }