.cb-panel {
  position: fixed; bottom: 5.5rem; right: 1.5rem;
  width: 370px; height: 500px; z-index: 9999;
  border-radius: 12px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
  transform: translateY(16px) scale(.96);
  opacity: 0; pointer-events: none;
  transition: transform 250ms cubic-bezier(0.23,1,0.32,1), opacity 200ms cubic-bezier(0.23,1,0.32,1);
  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
.cb-panel.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }

.cb-header { background: #075E54; color: #fff; padding: .75rem 1rem; display: flex; align-items: center; gap: .75rem; min-height: 56px; }
.cb-avatar { width: 36px; height: 36px; border-radius: 50%; background: #FBF7F0; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; overflow: hidden; }
.cb-avatar-img { width: 26px; height: 26px; object-fit: contain; }
.cb-hinfo { flex: 1; }
.cb-hname { font-size: .95rem; font-weight: 600; }
.cb-hstatus { font-size: .7rem; opacity: .85; display: flex; align-items: center; gap: 4px; }
.cb-hstatus::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #25D366; display: inline-block; }
.cb-close { background: none; border: none; color: #fff; font-size: 1.4rem; cursor: pointer; padding: 4px 8px; line-height: 1; }

.cb-body { flex: 1; background: #ECE5DD; overflow-y: auto; padding: .75rem; display: flex; flex-direction: column; gap: .5rem; }

.cb-msg { max-width: 85%; padding: .5rem .7rem; border-radius: 7px; font-size: .85rem; line-height: 1.45; color: #303030; position: relative; animation: cbSlide 250ms cubic-bezier(0.23,1,0.32,1); }
@keyframes cbSlide { from { opacity: 0; transform: translateY(6px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.cb-msg.bot { background: #fff; align-self: flex-start; border-top-left-radius: 0; }
.cb-msg.user { background: #DCF8C6; align-self: flex-end; border-top-right-radius: 0; }
.cb-msg .cb-time { display: block; font-size: .65rem; color: #999; text-align: right; margin-top: 3px; }
.cb-msg.user .cb-ticks { color: #34B7F1; font-size: .7rem; margin-left: 4px; }

.cb-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-self: flex-start; }
.cb-btn { background: #fff; border: 1px solid #128C7E; color: #128C7E; border-radius: 18px; padding: 6px 12px; font-size: .78rem; cursor: pointer; font-family: inherit; transition: background 150ms, color 150ms, transform 160ms; }
.cb-btn:hover { background: #128C7E; color: #fff; }
.cb-btn:active { transform: scale(0.95); }

.cb-typing { align-self: flex-start; background: #fff; border-radius: 7px; border-top-left-radius: 0; padding: 10px 14px; display: flex; gap: 4px; }
.cb-dot { width: 7px; height: 7px; border-radius: 50%; background: #999; animation: cbBounce 1.2s infinite; }
.cb-dot:nth-child(2) { animation-delay: .2s; }
.cb-dot:nth-child(3) { animation-delay: .4s; }
@keyframes cbBounce { 0%,60%,100% { transform: translateY(0); } 30% { transform: translateY(-5px); } }

.cb-input-wrap { display: flex; gap: 8px; padding: 8px 12px; background: #f0f0f0; border-radius: 20px; margin: 8px 12px; }
.cb-input { flex: 1; border: none; background: transparent; font-size: 14px; outline: none; padding: 8px 4px; font-family: inherit; color: #303030; }
.cb-input::placeholder { color: #999; }
.cb-send { width: 36px; height: 36px; border-radius: 50%; background: #075E54; border: none; color: #fff; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cb-send:hover { background: #128C7E; }

@media (max-width: 500px) {
  .cb-panel { width: 100%; height: 85vh; bottom: 0; right: 0; border-radius: 12px 12px 0 0; }
}