:root{ --htc-primary: #0ea5e9; }

/* Container positions */
.htc-container{ position: fixed; bottom: 20px; z-index: 99999; }
.htc-container.bottom-right{ right: 20px; }
.htc-container.bottom-left{ left: 20px; }

/* Bubble */
.htc-bubble{ width: 56px; height: 56px; border-radius: 9999px; border: none; box-shadow: 0 8px 24px rgba(0,0,0,.15); color: #fff; display: grid; place-items: center; cursor: pointer; }
.htc-bubble:hover{ filter: brightness(0.95); }

/* Panel */
.htc-panel{ width: 320px; max-height: 70vh; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 18px 36px rgba(0,0,0,.2); margin-bottom: 12px; }
.htc-panel.hidden{ display: none; }
.htc-header{ display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; color: #fff; background: var(--htc-primary); }
.htc-title{ font-weight: 600; }
.htc-close{ appearance: none; background: transparent; border: none; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }

.htc-messages{ padding: 12px; height: 280px; overflow-y: auto; background: #f9fafb; }
.htc-msg{ display: flex; margin-bottom: 10px; }
.htc-msg.user{ justify-content: flex-end; }
.htc-msg-bubble{ max-width: 80%; padding: 8px 10px; border-radius: 12px; background: #fff; color: #111827; box-shadow: 0 1px 2px rgba(0,0,0,.06); white-space: pre-wrap; word-break: break-word; }
.htc-msg.user .htc-msg-bubble{ background: var(--htc-primary); color: #fff; }

.htc-input-row{ display: flex; gap: 6px; padding: 10px; border-top: 1px solid #e5e7eb; }
.htc-input{ flex: 1; padding: 10px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; }
.htc-send{ padding: 8px 12px; background: var(--htc-primary); color: #fff; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; }
.htc-send:disabled{ opacity: .6; cursor: not-allowed; }

/* Inline variant */
.htc-inline{ width: 100%; max-width: 480px; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.06); background: #fff; }