.lcc-bubble { position: fixed; right: 18px; bottom: 18px; z-index: 900; display: inline-flex; align-items: center; gap: 8px; background: #16A34A; color: #fff; border: 0; border-radius: 999px; padding: 11px 16px; font: 600 14px/1 "Poppins", system-ui, sans-serif; box-shadow: 0 8px 24px rgba(22,163,74,.35); cursor: pointer; }
.lcc-bubble:hover { background: #0F7F40; }
.lcc-badge { background: #DC2626; color: #fff; border-radius: 999px; font-size: 11px; line-height: 18px; min-width: 18px; padding: 0 5px; text-align: center; }
.lcc-panel { position: fixed; right: 18px; bottom: 18px; z-index: 901; width: 360px; max-width: calc(100vw - 24px); height: 520px; max-height: calc(100vh - 36px); background: #fff; border-radius: 16px; box-shadow: 0 16px 48px rgba(15,27,45,.28); display: flex; flex-direction: column; overflow: hidden; font: 14px/1.45 "Poppins", system-ui, sans-serif; color: #0F1B2D; }
.lcc-head { background: linear-gradient(135deg, #16A34A, #0F7F40); color: #fff; padding: 12px 14px; display: flex; align-items: center; gap: 10px; }
.lcc-head img { width: 34px; height: 34px; border-radius: 50%; background: #fff; object-fit: cover; }
.lcc-head b { display: block; } .lcc-head small { opacity: .9; font-size: 12px; }
.lcc-head button { margin-left: auto; background: rgba(255,255,255,.18); border: 0; color: #fff; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 16px; }
.lcc-msgs { flex: 1; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: #F6FAF8; }
.lcc-msg { max-width: 82%; padding: 8px 11px; border-radius: 12px; background: #fff; border: 1px solid #E2E8E6; white-space: pre-wrap; word-wrap: break-word; }
.lcc-msg.me { align-self: flex-end; background: #DCF3E4; border-color: #BFE6CB; }
.lcc-msg img { max-width: 220px; max-height: 220px; display: block; border-radius: 8px; margin-top: 4px; }
.lcc-msg .t { font-size: 10.5px; color: #718096; margin-top: 3px; }
.lcc-hello { color: #4A5568; background: #fff; border: 1px dashed #BFE6CB; border-radius: 12px; padding: 10px 12px; font-size: 13px; }
.lcc-form { padding: 10px; border-top: 1px solid #E2E8E6; display: flex; flex-direction: column; gap: 6px; }
.lcc-form input, .lcc-form textarea { width: 100%; box-sizing: border-box; border: 1.5px solid #E2E8E6; border-radius: 10px; padding: 8px 10px; font: inherit; outline: none; resize: none; }
.lcc-form input:focus, .lcc-form textarea:focus { border-color: #16A34A; }
.lcc-row { display: flex; gap: 6px; align-items: flex-end; }
.lcc-row button { border: 0; border-radius: 10px; padding: 9px 12px; cursor: pointer; font: 600 13px/1 inherit; }
.lcc-send { background: #16A34A; color: #fff; } .lcc-attach { background: #EEF3F1; color: #0F1B2D; }
.lcc-prev { display: flex; align-items: center; gap: 8px; font-size: 12px; } .lcc-prev img { height: 46px; border-radius: 6px; }
.lcc-err { color: #DC2626; font-size: 12px; }
@media print { .lcc-bubble, .lcc-panel { display: none !important; } }