/* ───────────────────────────────────────────────────────────────────────── Spark Chat Dock — fixed-bottom mobile-first widget. Self-attaches to via spark-chat.js. Uses internal.spark-automations.com brand vars from styles.css when present; falls back to safe defaults otherwise. ─────────────────────────────────────────────────────────────────────── */ #spark-chat-root { --sc-ink: #0A0A0A; --sc-paper: #ffffff; --sc-off: #f5f4ef; --sc-line: #d8d6d0; --sc-mute: #6b6b6b; --sc-accent: #1f7a4d; --sc-bubble-user: #0A0A0A; --sc-bubble-assistant: #f0efe9; --sc-pro: #b45a00; --sc-radius: 14px; --sc-shadow: 0 8px 30px rgba(0,0,0,0.18); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif; position: fixed; z-index: 9999; bottom: 0; right: 0; left: 0; pointer-events: none; } #spark-chat-root * { box-sizing: border-box; } /* ── Floating launcher (shown when collapsed) ─────────────────────────── */ .sc-launcher { pointer-events: auto; position: fixed; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); background: var(--sc-ink); color: var(--sc-paper); width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; border: none; box-shadow: var(--sc-shadow); cursor: pointer; transition: transform 0.15s ease; } .sc-launcher:active { transform: scale(0.94); } .sc-launcher .sc-badge { position: absolute; top: 4px; right: 4px; background: var(--sc-accent); color: var(--sc-paper); font-size: 10px; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: none; align-items: center; justify-content: center; } .sc-launcher.has-unread .sc-badge { display: flex; } /* ── Panel (shown when expanded) ──────────────────────────────────────── */ .sc-panel { pointer-events: auto; position: fixed; right: 0; left: 0; bottom: 0; background: var(--sc-paper); border-top: 1px solid var(--sc-line); border-radius: 18px 18px 0 0; box-shadow: var(--sc-shadow); display: flex; flex-direction: column; max-height: 82vh; height: 82vh; transform: translateY(100%); transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1); padding-bottom: env(safe-area-inset-bottom); } .sc-panel.open { transform: translateY(0); } @media (min-width: 760px) { .sc-panel { right: 18px; left: auto; bottom: 18px; width: 420px; max-height: 70vh; height: 600px; border-radius: 16px; border: 1px solid var(--sc-line); } } /* ── Panel header ─────────────────────────────────────────────────────── */ .sc-header { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--sc-line); background: var(--sc-paper); } .sc-header .sc-title { flex: 1; display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: var(--sc-ink); letter-spacing: -0.01em; } .sc-header .sc-title .sc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sc-accent); } .sc-header .sc-meta { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; font-size: 10px; color: var(--sc-mute); letter-spacing: 0.04em; text-transform: uppercase; } .sc-model-toggle { display: inline-flex; align-items: center; border: 1px solid var(--sc-line); border-radius: 999px; overflow: hidden; font-size: 11px; font-weight: 600; } .sc-model-toggle button { background: transparent; border: 0; padding: 5px 10px; cursor: pointer; color: var(--sc-mute); font: inherit; } .sc-model-toggle button.active { background: var(--sc-ink); color: var(--sc-paper); } .sc-model-toggle button.pro.active { background: var(--sc-pro); } .sc-close { background: transparent; border: 0; font-size: 22px; color: var(--sc-mute); cursor: pointer; padding: 4px 6px; margin-left: 4px; line-height: 1; } /* ── Messages list ────────────────────────────────────────────────────── */ .sc-messages { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--sc-off); -webkit-overflow-scrolling: touch; } .sc-msg { max-width: 85%; padding: 10px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.42; word-wrap: break-word; white-space: pre-wrap; } .sc-msg.user { background: var(--sc-bubble-user); color: var(--sc-paper); align-self: flex-end; border-bottom-right-radius: 4px; } .sc-msg.user .sc-voice-mark { display: inline-block; font-size: 11px; color: rgba(255,255,255,0.6); margin-bottom: 2px; } .sc-msg.assistant { background: var(--sc-bubble-assistant); color: var(--sc-ink); align-self: flex-start; border-bottom-left-radius: 4px; } .sc-msg.assistant .sc-actions-strip { font-family: ui-monospace, monospace; font-size: 10.5px; color: var(--sc-accent); margin-bottom: 6px; letter-spacing: 0.02em; } .sc-msg.system { background: transparent; color: var(--sc-mute); font-style: italic; font-size: 12.5px; text-align: center; align-self: center; } .sc-msg.error { background: #ffe4e1; color: #8b1a1a; align-self: flex-start; border-bottom-left-radius: 4px; font-size: 13px; } .sc-typing { align-self: flex-start; background: var(--sc-bubble-assistant); border-radius: 16px; padding: 10px 14px; display: flex; gap: 4px; } .sc-typing span { width: 6px; height: 6px; background: var(--sc-mute); border-radius: 50%; animation: sc-bounce 1.2s infinite; } .sc-typing span:nth-child(2) { animation-delay: 0.15s; } .sc-typing span:nth-child(3) { animation-delay: 0.3s; } @keyframes sc-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } } /* ── Input bar ────────────────────────────────────────────────────────── */ .sc-input-bar { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--sc-line); background: var(--sc-paper); } .sc-input-bar textarea { flex: 1; resize: none; border: 1px solid var(--sc-line); border-radius: 18px; padding: 10px 14px; font: inherit; font-size: 15px; line-height: 1.4; background: var(--sc-paper); color: var(--sc-ink); min-height: 40px; max-height: 120px; outline: none; } .sc-input-bar textarea:focus { border-color: var(--sc-ink); } .sc-icon-btn { border: 1px solid var(--sc-line); background: var(--sc-paper); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; flex-shrink: 0; color: var(--sc-ink); transition: background 0.12s; } .sc-icon-btn:active { background: var(--sc-off); } .sc-icon-btn.send { background: var(--sc-ink); color: var(--sc-paper); border-color: var(--sc-ink); } .sc-icon-btn.send:disabled { background: var(--sc-line); border-color: var(--sc-line); cursor: default; } .sc-icon-btn.mic.recording { background: #c0392b; color: white; border-color: #c0392b; animation: sc-pulse 1s infinite; } @keyframes sc-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }