@bloonio/chat-angular 0.1.0

package/src/lib/styles/chat.css

@@ -0,0 +1,268 @@
+/**
+ * @bloonio/chat-angular global styles.
+ *
+ * Consumers import this once — typically in their global stylesheet:
+ *
+ *     @import "@bloonio/chat-angular/styles.css";
+ *
+ * Or via app.config.ts → styles array. All selectors are scoped under
+ * `.bch-*` so the rules don't collide with the host application.
+ *
+ * Theme tokens (--bch-primary etc.) are inherited from `.bch-root` so a
+ * tenant's branding_primary_color applied at runtime flows to every
+ * descendant. To override globally, set `--bch-primary` on `:root` or any
+ * ancestor of the chat components.
+ */
+
+.bch-root {
+  --bch-primary: #5b47c0;
+  --bch-primary-contrast: #ffffff;
+  --bch-bg: #ffffff;
+  --bch-surface: #f7f8fa;
+  --bch-text: #1f2937;
+  --bch-text-muted: #6b7280;
+  --bch-border: #e5e7eb;
+  --bch-radius: 12px;
+  --bch-shadow: 0 10px 32px rgba(0, 0, 0, 0.14);
+  --bch-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+
+  position: fixed;
+  bottom: 24px;
+  z-index: 2147483000;
+  font-family: var(--bch-font);
+  color: var(--bch-text);
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.bch-root[data-position="right"] { right: 24px; }
+.bch-root[data-position="left"]  { left:  24px; }
+
+/* Inline mode — when the component is used inside the page flow rather
+ * than as a floating widget, drop the `fixed` positioning. */
+.bch-root[data-mode="docked"],
+.bch-root[data-mode="inline"] {
+  position: static;
+  width: 100%;
+  height: 100%;
+  bottom: auto;
+  right: auto;
+  left: auto;
+}
+
+/* ── Launcher ─────────────────────────────────────────────────────────── */
+
+.bch-launcher {
+  display: flex; align-items: center; gap: 10px;
+  background: transparent; border: 0; padding: 0;
+  cursor: pointer; font: inherit; color: inherit;
+}
+.bch-launcher-bubble {
+  width: 56px; height: 56px;
+  border-radius: 9999px;
+  background: var(--bch-primary); color: var(--bch-primary-contrast);
+  display: flex; align-items: center; justify-content: center;
+  box-shadow: var(--bch-shadow);
+  transition: transform 120ms ease;
+}
+.bch-launcher:hover .bch-launcher-bubble { transform: translateY(-2px); }
+.bch-launcher-bubble svg { width: 26px; height: 26px; }
+
+.bch-launcher-label {
+  background: var(--bch-bg); color: var(--bch-text);
+  padding: 8px 14px; border-radius: 9999px;
+  box-shadow: var(--bch-shadow);
+  white-space: nowrap; max-width: 220px;
+  overflow: hidden; text-overflow: ellipsis;
+}
+.bch-root[data-position="left"] .bch-launcher { flex-direction: row-reverse; }
+
+/* ── Panel ────────────────────────────────────────────────────────────── */
+
+.bch-panel {
+  position: absolute;
+  bottom: 76px;
+  width: 360px;
+  max-width: calc(100vw - 48px);
+  height: 560px;
+  max-height: calc(100vh - 120px);
+  background: var(--bch-bg);
+  border-radius: var(--bch-radius);
+  box-shadow: var(--bch-shadow);
+  display: flex; flex-direction: column;
+  overflow: hidden;
+  /* Closed state — smooth slide + fade out from the launcher corner. */
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transform: translateY(12px) scale(0.96);
+  transform-origin: bottom right;
+  transition:
+    opacity 200ms ease,
+    transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
+    visibility 0s linear 260ms;
+}
+.bch-root[data-position="right"] .bch-panel { right: 0; }
+.bch-root[data-position="left"]  .bch-panel { left:  0; transform-origin: bottom left; }
+.bch-root.bch-open .bch-panel {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transform: translateY(0) scale(1);
+  transition:
+    opacity 200ms ease,
+    transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
+    visibility 0s;
+}
+@media (prefers-reduced-motion: reduce) {
+  .bch-panel { transition: none; }
+}
+
+.bch-root[data-mode="docked"] .bch-panel,
+.bch-root[data-mode="inline"] .bch-panel {
+  position: static;
+  width: 100%;
+  height: 100%;
+  max-width: none; max-height: none;
+  bottom: auto; right: auto; left: auto;
+  border-radius: 0;
+  box-shadow: none;
+  /* Always-on layouts: no open/close animation. */
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transform: none;
+  transition: none;
+}
+
+/* ── Header ───────────────────────────────────────────────────────────── */
+
+.bch-header {
+  background: var(--bch-primary); color: var(--bch-primary-contrast);
+  padding: 16px 16px 18px;
+  display: flex; align-items: center; gap: 12px;
+}
+.bch-header-avatar {
+  width: 38px; height: 38px; border-radius: 9999px;
+  background: rgba(255, 255, 255, 0.18);
+  display: flex; align-items: center; justify-content: center;
+  overflow: hidden; flex-shrink: 0;
+}
+.bch-header-avatar img { width: 100%; height: 100%; object-fit: cover; }
+.bch-header-title { flex: 1; min-width: 0; }
+.bch-header-name {
+  font-weight: 600; font-size: 15px;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.bch-header-status {
+  font-size: 12px; opacity: 0.85; margin-top: 2px;
+  display: flex; align-items: center; gap: 6px;
+}
+.bch-header-status-dot { width: 8px; height: 8px; border-radius: 9999px; }
+.bch-header-status-dot[data-online="true"]  { background: #2ecc71; }
+.bch-header-status-dot[data-online="false"] { background: #cbd5e1; }
+.bch-header-close {
+  background: transparent; border: 0; color: inherit; cursor: pointer;
+  padding: 6px; border-radius: 8px; opacity: 0.85;
+  display: flex; align-items: center; justify-content: center;
+}
+.bch-header-close:hover { opacity: 1; background: rgba(255, 255, 255, 0.12); }
+.bch-header-close svg { width: 18px; height: 18px; }
+
+/* ── Messages ─────────────────────────────────────────────────────────── */
+
+.bch-messages {
+  flex: 1; overflow-y: auto;
+  padding: 16px; background: var(--bch-surface);
+  display: flex; flex-direction: column; gap: 10px;
+}
+.bch-messages::-webkit-scrollbar { width: 8px; }
+.bch-messages::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 4px; }
+
+.bch-bubble {
+  max-width: 80%; padding: 10px 14px; border-radius: 16px;
+  word-wrap: break-word; white-space: pre-wrap;
+}
+.bch-bubble[data-from="visitor"] {
+  align-self: flex-end;
+  background: var(--bch-primary); color: var(--bch-primary-contrast);
+  border-bottom-right-radius: 4px;
+}
+.bch-bubble[data-from="bot"],
+.bch-bubble[data-from="agent"] {
+  align-self: flex-start;
+  background: var(--bch-bg); color: var(--bch-text);
+  border: 1px solid var(--bch-border);
+  border-bottom-left-radius: 4px;
+}
+.bch-bubble[data-from="system"] {
+  align-self: center;
+  background: transparent; color: var(--bch-text-muted);
+  font-size: 12px; font-style: italic;
+}
+.bch-bubble[data-pending="true"] { opacity: 0.7; }
+
+.bch-typing {
+  align-self: flex-start;
+  display: flex; gap: 4px;
+  padding: 10px 14px; background: var(--bch-bg);
+  border: 1px solid var(--bch-border);
+  border-radius: 16px; border-bottom-left-radius: 4px;
+}
+.bch-typing span {
+  width: 6px; height: 6px; border-radius: 50%;
+  background: var(--bch-text-muted);
+  animation: bch-typing-bounce 1.2s infinite;
+}
+.bch-typing span:nth-child(2) { animation-delay: 0.15s; }
+.bch-typing span:nth-child(3) { animation-delay: 0.3s; }
+@keyframes bch-typing-bounce {
+  0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
+  40%           { transform: scale(1);   opacity: 1;   }
+}
+
+/* ── Input ────────────────────────────────────────────────────────────── */
+
+.bch-input {
+  background: var(--bch-bg); border-top: 1px solid var(--bch-border);
+  padding: 10px 12px;
+  display: flex; align-items: center; gap: 8px;
+}
+.bch-input textarea {
+  flex: 1; resize: none; border: 0; outline: 0;
+  font: inherit; color: var(--bch-text); background: transparent;
+  padding: 8px 0; min-height: 24px; max-height: 96px; line-height: 1.4;
+}
+.bch-input textarea::placeholder { color: var(--bch-text-muted); }
+.bch-input-send {
+  flex-shrink: 0; width: 36px; height: 36px;
+  border-radius: 9999px;
+  background: var(--bch-primary); color: var(--bch-primary-contrast);
+  border: 0; cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+  transition: opacity 120ms ease;
+}
+.bch-input-send:disabled { opacity: 0.4; cursor: not-allowed; }
+.bch-input-send svg { width: 18px; height: 18px; }
+
+.bch-footer {
+  text-align: center; font-size: 11px; color: var(--bch-text-muted);
+  padding: 6px 0 10px; background: var(--bch-bg);
+}
+.bch-footer a { color: inherit; text-decoration: none; }
+.bch-footer a:hover { text-decoration: underline; }
+
+/* ── Quick-reply chips (tenant opening prompts) ──────────────────────────── */
+.bch-quick-replies {
+  display: flex; flex-direction: column; align-items: flex-end;
+  gap: 8px; padding: 0 14px 10px; background: var(--bch-bg);
+}
+.bch-quick-reply {
+  max-width: 85%;
+  border: 1.5px solid var(--bch-primary);
+  background: transparent; color: var(--bch-primary);
+  border-radius: 9999px; padding: 9px 16px;
+  font-size: 14px; line-height: 1.3; text-align: right; cursor: pointer;
+  transition: background 120ms ease, color 120ms ease;
+}
+.bch-quick-reply:hover { background: var(--bch-primary); color: var(--bch-primary-contrast); }