
#cs-fab {
  position: fixed; right: 14px; bottom: 82px; width: 52px; height: 52px;
  border: none; border-radius: 50%; background: #2b7cd3; color: #fff;
  font-size: 13px; font-weight: 700; box-shadow: 0 6px 16px rgba(43,124,211,.35);
  z-index: 1200; cursor: pointer;
}
#cs-fab .cs-dot {
  position: absolute; top: 6px; right: 6px; width: 10px; height: 10px;
  background: #e23c3c; border-radius: 50%; display: none;
}
#cs-panel {
  display: none; position: fixed; right: 12px; bottom: 142px;
  width: min(360px, calc(100vw - 24px)); height: min(460px, calc(100vh - 220px));
  background: #fff; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.18);
  z-index: 1201; overflow: hidden; flex-direction: column;
}
#cs-panel.open { display: flex; }
.cs-hd { background: #2b7cd3; color: #fff; padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; font-weight: 700; }
.cs-hd button { background: none; border: none; color: #fff; font-size: 20px; cursor: pointer; }
.cs-bd { flex: 1; overflow-y: auto; padding: 12px; background: #f6f8fb; }
.cs-row { display: flex; margin: 8px 0; }
.cs-row.me { justify-content: flex-end; }
.cs-b { max-width: 78%; padding: 8px 10px; border-radius: 10px; font-size: 14px; line-height: 1.45; word-break: break-word; background: #fff; }
.cs-row.me .cs-b { background: #2b7cd3; color: #fff; }
.cs-b img { max-width: 180px; border-radius: 8px; display: block; }
.cs-ft { display: flex; gap: 6px; padding: 8px; border-top: 1px solid #eee; align-items: center; }
.cs-ft input[type=text] { flex: 1; border: 1px solid #ddd; border-radius: 8px; padding: 8px 10px; font-size: 14px; }
.cs-ft button, .cs-ft label { border: none; background: #2b7cd3; color: #fff; border-radius: 8px; padding: 8px 10px; cursor: pointer; font-size: 13px; }
.cs-ft input[type=file] { display: none; }
.cs-empty { text-align: center; color: #999; padding: 40px 10px; font-size: 13px; }
