#dc-root { position: fixed; bottom: 20px; left: 20px; z-index: 99999; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
#dc-bubble { width: 60px; height: 60px; border-radius: 50%; background: var(--dc-color, #ff6a00); color: #fff; border: none; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.25); font-size: 26px; line-height: 60px; }
#dc-panel { display: none; flex-direction: column; width: 340px; max-width: calc(100vw - 40px); height: 480px; max-height: calc(100vh - 120px); background: #0f0f0f; color: #f5f5f5; border-radius: 14px; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,.4); }
#dc-root.dc-open #dc-panel { display: flex; }
#dc-root.dc-open #dc-bubble { display: none; }
#dc-head { background: var(--dc-color, #ff6a00); color: #fff; padding: 12px 14px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
#dc-close { background: none; border: none; color: #fff; font-size: 20px; cursor: pointer; line-height: 1; }
#dc-msgs { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.dc-msg { max-width: 85%; padding: 8px 11px; border-radius: 12px; font-size: 14px; line-height: 1.35; white-space: pre-wrap; word-wrap: break-word; }
.dc-user { align-self: flex-end; background: var(--dc-color, #ff6a00); color: #fff; border-bottom-right-radius: 3px; }
.dc-bot { align-self: flex-start; background: #262626; color: #f5f5f5; border-bottom-left-radius: 3px; }
.dc-wa { align-self: flex-start; background: #25d366; color: #fff; text-decoration: none; padding: 9px 13px; border-radius: 10px; font-size: 14px; font-weight: 600; }
#dc-form { display: flex; border-top: 1px solid #262626; }
#dc-input { flex: 1; border: none; background: #1a1a1a; color: #f5f5f5; padding: 12px; font-size: 14px; outline: none; }
#dc-send { border: none; background: var(--dc-color, #ff6a00); color: #fff; padding: 0 16px; cursor: pointer; font-weight: 600; }
.dc-typing { font-size: 13px; color: #999; align-self: flex-start; }