/* 绿建工具箱 · 在线客服（访客浮动窗 + 客服工作台通用样式） */
.cc-bubble {
  position: fixed; right: 22px; bottom: 22px; z-index: 99990;
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, #2D5A3D, #1B3A2A);
  color: #fff; border: none; cursor: pointer;
  box-shadow: 0 6px 20px rgba(27,58,42,0.35);
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease; font-size: 26px;
}
.cc-bubble:hover { transform: scale(1.06); }
.cc-bubble .cc-badge {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px;
  padding: 0 4px; border-radius: 9px; background: #E53935; color: #fff;
  font-size: 11px; line-height: 18px; text-align: center; display: none;
}

.cc-panel {
  position: fixed; right: 22px; bottom: 90px; z-index: 99991;
  width: 340px; max-width: calc(100vw - 32px); height: 460px; max-height: calc(100vh - 120px);
  background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.22);
  display: flex; flex-direction: column;
  font-family: "Source Han Sans SC","Microsoft YaHei","PingFang SC",sans-serif;
  color: #1f2d27;
}
.cc-head {
  background: linear-gradient(135deg, #2D5A3D, #1B3A2A); color: #fff;
  padding: 12px 14px; display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 500;
}
.cc-head .cc-dot { width: 8px; height: 8px; border-radius: 50%; background: #8BC34A; box-shadow: 0 0 0 3px rgba(139,195,74,0.3); }
.cc-head .cc-title { flex: 1; }
.cc-head .cc-sub { font-size: 11px; opacity: .8; font-weight: 400; }
.cc-head .cc-close { cursor: pointer; opacity: .85; font-size: 18px; line-height: 1; padding: 0 2px; }
.cc-head .cc-close:hover { opacity: 1; }

.cc-body {
  flex: 1; overflow-y: auto; padding: 12px; background: #f5f8f6;
  display: flex; flex-direction: column; gap: 10px;
}
.cc-msg { max-width: 82%; padding: 8px 11px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; word-break: break-word; white-space: pre-wrap; }
.cc-msg .cc-meta { display: block; font-size: 10.5px; opacity: .6; margin-top: 3px; }
.cc-visitor { align-self: flex-end; background: #2D5A3D; color: #fff; border-bottom-right-radius: 4px; }
.cc-agent { align-self: flex-start; background: #fff; color: #1f2d27; border: 1px solid #e3ebe6; border-bottom-left-radius: 4px; }
.cc-sys { align-self: center; background: transparent; color: #9aa8a1; font-size: 11.5px; }

.cc-foot { border-top: 1px solid #e3ebe6; padding: 8px; display: flex; gap: 8px; background: #fff; }
.cc-foot textarea {
  flex: 1; resize: none; border: 1px solid #d7e0db; border-radius: 8px;
  padding: 8px 10px; font-size: 13.5px; font-family: inherit; outline: none; height: 38px; max-height: 90px;
}
.cc-foot textarea:focus { border-color: #4CAF50; }
.cc-send {
  border: none; background: #2D5A3D; color: #fff; border-radius: 8px;
  padding: 0 16px; cursor: pointer; font-size: 14px; font-family: inherit;
}
.cc-send:hover { background: #1B3A2A; }
.cc-send:disabled { opacity: .55; cursor: default; }

.cc-typing { align-self: flex-start; color: #9aa8a1; font-size: 12px; padding: 2px 4px; }

/* ===== 客服工作台（chat-workbench.html） ===== */
.cc-wb { display: flex; height: calc(100vh - 56px); font-family: "Source Han Sans SC","Microsoft YaHei","PingFang SC",sans-serif; color: #1f2d27; }
.cc-wb-list { width: 300px; border-right: 1px solid #e3ebe6; overflow-y: auto; background: #f5f8f6; }
.cc-wb-list h3 { margin: 0; padding: 14px 16px; font-size: 15px; background: #2D5A3D; color: #fff; position: sticky; top: 0; }
.cc-conv { padding: 12px 14px; border-bottom: 1px solid #e9efec; cursor: pointer; }
.cc-conv:hover { background: #eef4f1; }
.cc-conv.active { background: #e3efe9; border-left: 3px solid #4CAF50; }
.cc-conv .cc-cv-name { font-size: 14px; font-weight: 500; display: flex; justify-content: space-between; align-items: center; }
.cc-conv .cc-cv-last { font-size: 12px; color: #7c8a83; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 250px; }
.cc-conv .cc-cv-time { font-size: 10.5px; color: #9aa8a1; }
.cc-unread { background: #E53935; color: #fff; font-size: 10.5px; border-radius: 9px; padding: 0 6px; min-width: 16px; text-align: center; }
.cc-wb-main { flex: 1; display: flex; flex-direction: column; }
.cc-wb-head { padding: 12px 16px; border-bottom: 1px solid #e3ebe6; display: flex; align-items: center; gap: 10px; }
.cc-wb-head .cc-wb-visitor { font-size: 15px; font-weight: 500; }
.cc-wb-head .cc-wb-status { font-size: 11.5px; color: #7c8a83; }
.cc-wb-close { margin-left: auto; border: 1px solid #d7e0db; background: #fff; color: #2D5A3D; border-radius: 7px; padding: 5px 12px; cursor: pointer; font-size: 12.5px; }
.cc-wb-close:hover { background: #f0f5f2; }
.cc-wb-body { flex: 1; overflow-y: auto; padding: 16px; background: #f5f8f6; display: flex; flex-direction: column; gap: 10px; }
.cc-wb-foot { border-top: 1px solid #e3ebe6; padding: 10px; display: flex; gap: 8px; background: #fff; }
.cc-wb-foot textarea { flex: 1; resize: none; border: 1px solid #d7e0db; border-radius: 8px; padding: 9px 11px; font-size: 13.5px; font-family: inherit; outline: none; height: 42px; max-height: 120px; }
.cc-wb-foot textarea:focus { border-color: #4CAF50; }
.cc-wb-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: #9aa8a1; font-size: 14px; }
.cc-wb-login { max-width: 420px; margin: 80px auto; text-align: center; color: #7c8a83; }
.cc-wb-login button { margin-top: 16px; border: none; background: #2D5A3D; color: #fff; border-radius: 8px; padding: 9px 22px; cursor: pointer; font-size: 14px; font-family: inherit; }
.cc-topbar { height: 56px; background: linear-gradient(135deg,#2D5A3D,#1B3A2A); color:#fff; display:flex; align-items:center; padding: 0 18px; gap: 10px; font-size: 16px; font-weight: 500; }
.cc-topbar .cc-online { font-size: 12px; opacity: .85; margin-left: auto; }