@thisispamela/react 1.0.1 → 1.0.2

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import React, { createContext, useMemo, useContext, useState, useEffect } from 'react';
+import React, { createContext, useMemo, useContext, useState, useRef, useEffect } from 'react';
 import { PamelaClient } from '@thisispamela/sdk';
 
 function styleInject(css, ref) {
@@ -28,7 +28,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "/**\n * Pamela Enterprise React Component Library - Default Styles\n *\n * These styles align with the Pamela app design schema.\n * If the host app already defines these CSS variables, its values will win.\n */\n\n:root {\n  --accent: #F27A1A;\n  --accent-2: #F06C4F;\n  --accent-3: #F3A84C;\n  --accent-gradient: linear-gradient(90deg, var(--accent), var(--accent-2));\n  --bg-gradient: linear-gradient(135deg, #F5F0E8 0%, #F3EEE8 45%, #EFE8DF 100%);\n  --bg-glow: radial-gradient(1200px circle at 10% 20%, rgba(250, 147, 28, 0.1), transparent 58%),\n    radial-gradient(900px circle at 80% 10%, rgba(253, 139, 116, 0.1), transparent 62%),\n    radial-gradient(800px circle at 70% 80%, rgba(251, 193, 107, 0.08), transparent 60%);\n  --surface: rgba(255, 255, 255, 0.5);\n  --surface-strong: rgba(255, 255, 255, 0.78);\n  --surface-border: rgba(231, 171, 132, 0.24);\n  --surface-border-strong: rgba(255, 255, 255, 0.75);\n  --surface-highlight: rgba(255, 255, 255, 0.68);\n  --surface-liquid: linear-gradient(135deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.38));\n  --surface-liquid-strong: linear-gradient(140deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.5));\n  --liquid-shadow: 0 18px 42px rgba(28, 25, 17, 0.14);\n  --liquid-glow: 0 0 32px rgba(250, 147, 28, 0.2);\n  --shadow-soft: 0 12px 26px rgba(28, 25, 17, 0.1);\n  --shadow-hover: 0 24px 44px rgba(28, 25, 17, 0.18);\n  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.7);\n  --cta-bg: linear-gradient(120deg, rgba(255, 255, 255, 0.7), rgba(250, 147, 28, 0.32));\n  --cta-border: 1px solid rgba(250, 147, 28, 0.4);\n  --cta-glow: 0 0 18px rgba(250, 147, 28, 0.28);\n  --cta-glow-hover: 0 0 22px rgba(250, 147, 28, 0.36);\n  --danger-bg: linear-gradient(120deg, rgba(255, 255, 255, 0.6), rgba(239, 68, 68, 0.3));\n  --danger-border: 1px solid rgba(239, 68, 68, 0.45);\n  --danger-glow: 0 0 16px rgba(239, 68, 68, 0.3);\n  --danger-glow-hover: 0 0 20px rgba(239, 68, 68, 0.4);\n  --radius-sm: 0.5rem;\n  --radius-md: 0.75rem;\n  --radius-lg: 1rem;\n  --radius-xl: 1.5rem;\n  --text-primary: #1C1917;\n  --text-secondary: rgba(28, 25, 17, 0.78);\n  --text-muted: rgba(28, 25, 17, 0.55);\n  --status-success: #10b981;\n  --status-warning: #eab308;\n  --status-muted: #d1d5db;\n  --status-error: #ef4444;\n  --bubble-user: #FA931C;\n  --bubble-pamela: #ffffff;\n  --bubble-recipient: #4b4bea;\n  --bubble-border: rgba(231, 171, 132, 0.3);\n}\n\n.dark {\n  --bg-gradient: linear-gradient(135deg, #171513 0%, #14110f 45%, #0f0d0b 100%);\n  --bg-glow: radial-gradient(1100px circle at 20% 10%, rgba(250, 147, 28, 0.18), transparent 60%),\n    radial-gradient(900px circle at 80% 20%, rgba(253, 139, 116, 0.16), transparent 60%),\n    radial-gradient(700px circle at 60% 80%, rgba(251, 193, 107, 0.12), transparent 55%);\n  --surface: rgba(255, 255, 255, 0.08);\n  --surface-strong: rgba(255, 255, 255, 0.16);\n  --surface-border: rgba(255, 255, 255, 0.18);\n  --surface-border-strong: rgba(255, 255, 255, 0.36);\n  --surface-highlight: rgba(255, 255, 255, 0.2);\n  --surface-liquid: linear-gradient(150deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));\n  --surface-liquid-strong: linear-gradient(150deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08));\n  --liquid-shadow: 0 22px 48px rgba(0, 0, 0, 0.55);\n  --liquid-glow: 0 0 30px rgba(250, 147, 28, 0.24);\n  --shadow-soft: 0 16px 32px rgba(0, 0, 0, 0.5);\n  --shadow-hover: 0 26px 44px rgba(0, 0, 0, 0.7);\n  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.12);\n  --cta-bg: linear-gradient(120deg, rgba(255, 255, 255, 0.22), rgba(250, 147, 28, 0.34));\n  --cta-border: 1px solid rgba(250, 147, 28, 0.5);\n  --cta-glow: 0 0 16px rgba(250, 147, 28, 0.26);\n  --cta-glow-hover: 0 0 20px rgba(250, 147, 28, 0.32);\n  --danger-bg: linear-gradient(120deg, rgba(255, 255, 255, 0.18), rgba(239, 68, 68, 0.32));\n  --danger-border: 1px solid rgba(248, 113, 113, 0.55);\n  --danger-glow: 0 0 18px rgba(239, 68, 68, 0.32);\n  --danger-glow-hover: 0 0 22px rgba(239, 68, 68, 0.4);\n  --text-primary: rgba(255, 255, 255, 0.95);\n  --text-secondary: rgba(255, 255, 255, 0.72);\n  --text-muted: rgba(255, 255, 255, 0.5);\n  --bubble-pamela: rgba(255, 255, 255, 0.12);\n  --bubble-border: rgba(255, 255, 255, 0.2);\n}\n\n/* Pulse animation for status indicators */\n@keyframes pamela-pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}\n\n/* Call Button - matches your gradient style */\n.pamela-call-button {\n  font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;\n  background: var(--accent-gradient);\n  color: var(--text-primary);\n  border: var(--cta-border);\n  border-radius: var(--radius-md);\n  font-weight: 600;\n  transition: opacity 0.2s;\n  box-shadow: var(--shadow-soft), var(--cta-glow);\n  padding: 10px 20px;\n  font-size: 16px;\n  cursor: pointer;\n}\n\n.pamela-call-button:hover:not(:disabled) {\n  opacity: 0.9;\n}\n\n.pamela-call-button:disabled {\n  opacity: 0.7;\n  cursor: not-allowed;\n  background: linear-gradient(to right, #cfcfcf, #b6b6b6);\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  box-shadow: none;\n}\n\n/* Call Status - matches your card style */\n.pamela-call-status {\n  font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n/* Transcript Viewer - matches your message bubble style */\n.pamela-transcript-viewer {\n  font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n.pamela-card {\n  background: var(--surface-liquid-strong);\n  border: 1px solid var(--surface-border-strong);\n  border-radius: var(--radius-lg);\n  box-shadow: var(--shadow-soft), var(--liquid-glow);\n}\n\n.pamela-panel {\n  background: var(--surface-liquid);\n  border: 1px solid var(--surface-border-strong);\n  border-radius: var(--radius-xl);\n  box-shadow: var(--liquid-shadow), var(--liquid-glow);\n}\n\n.pamela-chip {\n  background: var(--surface-liquid);\n  border: 1px solid var(--surface-border-strong);\n  border-radius: 999px;\n  padding: 0.25rem 0.6rem;\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: var(--text-secondary);\n  box-shadow: var(--shadow-inset);\n}\n\n.pamela-transcript-container {\n  background: var(--surface);\n  border-radius: var(--radius-md);\n  padding: 16px;\n}\n\n.pamela-transcript-bubble {\n  border-radius: var(--radius-md);\n  padding: 12px 16px;\n}\n\n.pamela-transcript-bubble--pamela {\n  background: var(--bubble-pamela);\n  border: 1px solid var(--bubble-border);\n  color: var(--text-primary);\n}\n\n.pamela-transcript-bubble--user {\n  background: var(--bubble-user);\n  color: #ffffff;\n}\n\n.pamela-transcript-bubble--recipient {\n  background: var(--bubble-recipient);\n  color: #ffffff;\n}\n\n/* Dark mode support */\n@media (prefers-color-scheme: dark) {\n  .pamela-call-status {\n    color: #ffffff;\n  }\n  \n  .pamela-transcript-viewer {\n    color: #ffffff;\n  }\n}\n\n";
+var css_248z = "/**\n * Pamela Enterprise React Component Library - Default Styles\n *\n * These styles align with the Pamela app design schema.\n * If the host app already defines these CSS variables, its values will win.\n */\n\n:root {\n  --accent: #F27A1A;\n  --accent-2: #F06C4F;\n  --accent-3: #F3A84C;\n  --accent-gradient: linear-gradient(90deg, var(--accent), var(--accent-2));\n  --bg-gradient: linear-gradient(135deg, #F5F0E8 0%, #F3EEE8 45%, #EFE8DF 100%);\n  --bg-glow: radial-gradient(1200px circle at 10% 20%, rgba(250, 147, 28, 0.1), transparent 58%),\n    radial-gradient(900px circle at 80% 10%, rgba(253, 139, 116, 0.1), transparent 62%),\n    radial-gradient(800px circle at 70% 80%, rgba(251, 193, 107, 0.08), transparent 60%);\n  --surface: rgba(255, 255, 255, 0.5);\n  --surface-strong: rgba(255, 255, 255, 0.78);\n  --surface-border: rgba(231, 171, 132, 0.24);\n  --surface-border-strong: rgba(255, 255, 255, 0.75);\n  --surface-highlight: rgba(255, 255, 255, 0.68);\n  --surface-liquid: linear-gradient(135deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.38));\n  --surface-liquid-strong: linear-gradient(140deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.5));\n  --liquid-highlight: linear-gradient(120deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 45%);\n  --liquid-shadow: 0 18px 42px rgba(28, 25, 17, 0.14);\n  --liquid-glow: 0 0 32px rgba(250, 147, 28, 0.2);\n  --shadow-soft: 0 12px 26px rgba(28, 25, 17, 0.1);\n  --shadow-hover: 0 24px 44px rgba(28, 25, 17, 0.18);\n  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.7);\n  --cta-bg: linear-gradient(120deg, rgba(255, 255, 255, 0.7), rgba(250, 147, 28, 0.32));\n  --cta-border: 1px solid rgba(250, 147, 28, 0.4);\n  --cta-glow: 0 0 18px rgba(250, 147, 28, 0.28);\n  --cta-glow-hover: 0 0 22px rgba(250, 147, 28, 0.36);\n  --danger-bg: linear-gradient(120deg, rgba(255, 255, 255, 0.6), rgba(239, 68, 68, 0.3));\n  --danger-border: 1px solid rgba(239, 68, 68, 0.45);\n  --danger-glow: 0 0 16px rgba(239, 68, 68, 0.3);\n  --danger-glow-hover: 0 0 20px rgba(239, 68, 68, 0.4);\n  --badge-bg: linear-gradient(120deg, rgba(255, 255, 255, 0.7), rgba(250, 147, 28, 0.28));\n  --badge-border: 1px solid rgba(250, 147, 28, 0.4);\n  --badge-glow: 0 0 14px rgba(250, 147, 28, 0.24);\n  --avatar-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(250, 147, 28, 0.38), rgba(253, 139, 116, 0.32));\n  --avatar-border: 1px solid rgba(250, 147, 28, 0.35);\n  --avatar-glow: 0 0 20px rgba(250, 147, 28, 0.28);\n  --glass-blur: 24px;\n  --glass-blur-strong: 32px;\n  --noise-opacity: 0.05;\n  --focus-ring: 0 0 0 3px rgba(250, 147, 28, 0.28);\n  --radius-sm: 0.5rem;\n  --radius-md: 0.75rem;\n  --radius-lg: 1rem;\n  --radius-xl: 1.5rem;\n  --text-primary: #1C1917;\n  --text-secondary: rgba(28, 25, 17, 0.78);\n  --text-muted: rgba(28, 25, 17, 0.55);\n  --status-success: #10b981;\n  --status-warning: #eab308;\n  --status-muted: #d1d5db;\n  --status-error: #ef4444;\n  --bubble-user: #FA931C;\n  --bubble-pamela: #ffffff;\n  --bubble-recipient: #4b4bea;\n  --bubble-border: rgba(231, 171, 132, 0.3);\n}\n\n.dark {\n  --bg-gradient: linear-gradient(135deg, #171513 0%, #14110f 45%, #0f0d0b 100%);\n  --bg-glow: radial-gradient(1100px circle at 20% 10%, rgba(250, 147, 28, 0.18), transparent 60%),\n    radial-gradient(900px circle at 80% 20%, rgba(253, 139, 116, 0.16), transparent 60%),\n    radial-gradient(700px circle at 60% 80%, rgba(251, 193, 107, 0.12), transparent 55%);\n  --surface: rgba(255, 255, 255, 0.08);\n  --surface-strong: rgba(255, 255, 255, 0.16);\n  --surface-border: rgba(255, 255, 255, 0.18);\n  --surface-border-strong: rgba(255, 255, 255, 0.36);\n  --surface-highlight: rgba(255, 255, 255, 0.2);\n  --surface-liquid: linear-gradient(150deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));\n  --surface-liquid-strong: linear-gradient(150deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08));\n  --liquid-highlight: linear-gradient(120deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 45%);\n  --liquid-shadow: 0 22px 48px rgba(0, 0, 0, 0.55);\n  --liquid-glow: 0 0 30px rgba(250, 147, 28, 0.24);\n  --shadow-soft: 0 16px 32px rgba(0, 0, 0, 0.5);\n  --shadow-hover: 0 26px 44px rgba(0, 0, 0, 0.7);\n  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.12);\n  --cta-bg: linear-gradient(120deg, rgba(255, 255, 255, 0.22), rgba(250, 147, 28, 0.34));\n  --cta-border: 1px solid rgba(250, 147, 28, 0.5);\n  --cta-glow: 0 0 16px rgba(250, 147, 28, 0.26);\n  --cta-glow-hover: 0 0 20px rgba(250, 147, 28, 0.32);\n  --danger-bg: linear-gradient(120deg, rgba(255, 255, 255, 0.18), rgba(239, 68, 68, 0.32));\n  --danger-border: 1px solid rgba(248, 113, 113, 0.55);\n  --danger-glow: 0 0 18px rgba(239, 68, 68, 0.32);\n  --danger-glow-hover: 0 0 22px rgba(239, 68, 68, 0.4);\n  --badge-bg: linear-gradient(120deg, rgba(255, 255, 255, 0.2), rgba(250, 147, 28, 0.32));\n  --badge-border: 1px solid rgba(250, 147, 28, 0.5);\n  --badge-glow: 0 0 14px rgba(250, 147, 28, 0.22);\n  --avatar-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(250, 147, 28, 0.26), rgba(253, 139, 116, 0.24));\n  --avatar-border: 1px solid rgba(255, 255, 255, 0.18);\n  --avatar-glow: 0 0 18px rgba(250, 147, 28, 0.22);\n  --glass-blur: 24px;\n  --glass-blur-strong: 32px;\n  --noise-opacity: 0.08;\n  --focus-ring: 0 0 0 3px rgba(250, 147, 28, 0.35);\n  --text-primary: rgba(255, 255, 255, 0.95);\n  --text-secondary: rgba(255, 255, 255, 0.72);\n  --text-muted: rgba(255, 255, 255, 0.5);\n  --bubble-pamela: rgba(255, 255, 255, 0.12);\n  --bubble-border: rgba(255, 255, 255, 0.2);\n}\n\n/* Pulse animation for status indicators */\n@keyframes pamela-pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}\n\n/* VoiceOrb animations */\n@keyframes shimmer {\n  0% {\n    transform: translateX(-100%) translateY(-100%) rotate(45deg);\n  }\n  100% {\n    transform: translateX(100%) translateY(100%) rotate(45deg);\n  }\n}\n\n@keyframes ripple {\n  0% {\n    transform: scale(1);\n    opacity: 0.6;\n  }\n  50% {\n    transform: scale(2);\n    opacity: 0;\n  }\n  100% {\n    transform: scale(1);\n    opacity: 0.6;\n  }\n}\n\n@keyframes float {\n  0%, 100% {\n    transform: translateY(0px);\n  }\n  50% {\n    transform: translateY(-10px);\n  }\n}\n\n/* Call Button - matches your gradient style */\n.pamela-call-button {\n  font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;\n  background: var(--accent-gradient);\n  color: var(--text-primary);\n  border: var(--cta-border);\n  border-radius: var(--radius-md);\n  font-weight: 600;\n  transition: opacity 0.2s;\n  box-shadow: var(--shadow-soft), var(--cta-glow);\n  padding: 10px 20px;\n  font-size: 16px;\n  cursor: pointer;\n}\n\n.pamela-call-button--primary {\n  background: var(--accent-gradient);\n}\n\n.pamela-call-button--secondary {\n  background: var(--surface-liquid);\n  border: 1px solid var(--surface-border-strong);\n  box-shadow: var(--shadow-soft), var(--liquid-glow);\n}\n\n.pamela-call-button--danger {\n  background: var(--danger-bg);\n  border: var(--danger-border);\n  color: #b91c1c;\n  box-shadow: var(--shadow-soft), var(--danger-glow);\n}\n\n.pamela-call-button--sm {\n  padding: 6px 12px;\n  font-size: 14px;\n}\n\n.pamela-call-button--md {\n  padding: 10px 20px;\n  font-size: 16px;\n}\n\n.pamela-call-button--lg {\n  padding: 12px 24px;\n  font-size: 18px;\n}\n\n.pamela-call-button:hover:not(:disabled) {\n  opacity: 0.9;\n}\n\n.pamela-call-button:disabled {\n  opacity: 0.7;\n  cursor: not-allowed;\n  background: linear-gradient(to right, #cfcfcf, #b6b6b6);\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  box-shadow: none;\n}\n\n/* Call Status - matches your card style */\n.pamela-call-status {\n  font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n/* Transcript Viewer - matches your message bubble style */\n.pamela-transcript-viewer {\n  font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n.pamela-card {\n  background: var(--surface-liquid-strong);\n  border: 1px solid var(--surface-border-strong);\n  border-radius: var(--radius-lg);\n  box-shadow: var(--shadow-soft), var(--liquid-glow);\n}\n\n.pamela-panel {\n  background: var(--surface-liquid);\n  border: 1px solid var(--surface-border-strong);\n  border-radius: var(--radius-xl);\n  box-shadow: var(--liquid-shadow), var(--liquid-glow);\n}\n\n.pamela-chip {\n  background: var(--surface-liquid);\n  border: 1px solid var(--surface-border-strong);\n  border-radius: 999px;\n  padding: 0.25rem 0.6rem;\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: var(--text-secondary);\n  box-shadow: var(--shadow-inset);\n}\n\n.pamela-transcript-container {\n  background: var(--surface);\n  border-radius: var(--radius-md);\n  padding: 16px;\n}\n\n.pamela-transcript-bubble {\n  border-radius: var(--radius-md);\n  padding: 12px 16px;\n}\n\n.pamela-transcript-bubble--pamela {\n  background: var(--bubble-pamela);\n  border: 1px solid var(--bubble-border);\n  color: var(--text-primary);\n}\n\n.pamela-transcript-bubble--user {\n  background: var(--bubble-user);\n  color: #ffffff;\n}\n\n.pamela-transcript-bubble--recipient {\n  background: var(--bubble-recipient);\n  color: #ffffff;\n}\n\n/* Utility classes aligned with Pamela app design */\n.app-gradient {\n  background: var(--bg-glow), var(--bg-gradient);\n}\n\n.surface-card {\n  background: var(--surface-strong);\n  border: 1px solid var(--surface-border);\n  box-shadow: var(--shadow-soft);\n  backdrop-filter: blur(12px);\n  -webkit-backdrop-filter: blur(12px);\n}\n\n.surface-card-hover {\n  transition: box-shadow 180ms ease, transform 180ms ease;\n}\n\n.surface-card-hover:hover {\n  box-shadow: var(--shadow-hover);\n}\n\n.accent-card {\n  background: linear-gradient(90deg, rgba(250, 147, 28, 0.12), rgba(253, 139, 116, 0.12));\n  border: 1px solid rgba(250, 147, 28, 0.3);\n  box-shadow: var(--shadow-soft);\n}\n\n.dark .accent-card {\n  background: linear-gradient(90deg, rgba(250, 147, 28, 0.22), rgba(253, 139, 116, 0.22));\n  border-color: rgba(250, 147, 28, 0.35);\n}\n\n.send-button-idle {\n  background: linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.4));\n  border: 1px solid rgba(231, 171, 132, 0.45);\n  color: rgba(28, 25, 17, 0.5);\n  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 0 14px rgba(250, 147, 28, 0.18);\n}\n\n.dark .send-button-idle {\n  background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));\n  border-color: rgba(255, 255, 255, 0.22);\n  color: rgba(255, 255, 255, 0.6);\n  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 16px rgba(250, 147, 28, 0.22);\n}\n\n.send-button-gradient {\n  background: linear-gradient(120deg, rgba(250, 147, 28, 0.9), rgba(253, 139, 116, 0.9));\n  border: 1px solid rgba(255, 255, 255, 0.45);\n  box-shadow: 0 0 16px rgba(250, 147, 28, 0.32);\n}\n\n.send-button-gradient:hover,\n.send-button-gradient:focus-visible {\n  box-shadow: 0 0 18px rgba(250, 147, 28, 0.36);\n}\n\n.transcript-bubble {\n  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12), 0 0 10px rgba(250, 147, 28, 0.14);\n  transition: box-shadow 180ms ease;\n}\n\n.transcript-bubble:hover,\n.transcript-bubble:focus-visible {\n  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12), 0 0 10px rgba(250, 147, 28, 0.14);\n}\n\n.btn-primary {\n  background: var(--cta-bg);\n  border: var(--cta-border);\n  color: var(--text-primary);\n  font-weight: 600;\n  border-radius: var(--radius-md);\n  box-shadow: var(--shadow-soft), var(--cta-glow);\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n  transition: transform 150ms ease, box-shadow 150ms ease, opacity 150ms ease;\n}\n\n.btn-primary:hover {\n  box-shadow: var(--shadow-hover), var(--cta-glow-hover);\n  opacity: 0.96;\n}\n\n.btn-primary:active {\n  transform: scale(0.98);\n}\n\n.btn-danger {\n  background: var(--danger-bg);\n  border: var(--danger-border);\n  color: #b91c1c;\n  box-shadow: var(--shadow-soft), var(--danger-glow);\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n  transition: box-shadow 180ms ease, transform 180ms ease, opacity 180ms ease;\n}\n\n.dark .btn-danger {\n  color: #fca5a5;\n}\n\n.btn-danger:hover {\n  box-shadow: var(--danger-glow-hover);\n}\n\n.badge-pill {\n  background: var(--badge-bg);\n  border: var(--badge-border);\n  border-radius: 999px;\n  padding: 0.25rem 0.6rem;\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: var(--text-secondary);\n  box-shadow: var(--shadow-inset), var(--badge-glow);\n}\n\n.badge-accent {\n  background: rgba(250, 147, 28, 0.15);\n  color: rgba(250, 147, 28, 0.95);\n}\n\n.dark .badge-accent {\n  background: rgba(250, 147, 28, 0.25);\n  color: rgba(253, 139, 116, 0.95);\n}\n\n.h1 {\n  font-size: 1.875rem;\n  line-height: 2.25rem;\n  font-weight: 700;\n}\n\n.h2 {\n  font-size: 1.5rem;\n  line-height: 2rem;\n  font-weight: 600;\n}\n\n.h3 {\n  font-size: 1.125rem;\n  line-height: 1.75rem;\n  font-weight: 600;\n}\n\n.body {\n  font-size: 0.95rem;\n  line-height: 1.5rem;\n}\n\n.meta {\n  font-size: 0.75rem;\n  line-height: 1.125rem;\n  color: rgba(28, 25, 17, 0.6);\n}\n\n.dark .meta {\n  color: rgba(255, 255, 255, 0.6);\n}\n\n.input-base {\n  background: rgba(255, 255, 255, 0.86);\n  border: 1px solid rgba(231, 171, 132, 0.28);\n  border-radius: var(--radius-lg);\n  padding: 0.75rem 1rem;\n  color: #1C1917;\n  transition: box-shadow 150ms ease, border-color 150ms ease;\n}\n\n.dark .input-base {\n  background: rgba(255, 255, 255, 0.1);\n  color: #ffffff;\n}\n\n.input-base:focus {\n  outline: none;\n  border-color: rgba(250, 147, 28, 0.6);\n  box-shadow: var(--focus-ring);\n}\n\n.panel {\n  position: relative;\n  background: var(--surface-liquid);\n  border: 1px solid var(--surface-border-strong);\n  border-radius: var(--radius-xl);\n  box-shadow: var(--liquid-shadow), var(--liquid-glow);\n  backdrop-filter: blur(var(--glass-blur-strong));\n  -webkit-backdrop-filter: blur(var(--glass-blur-strong));\n  overflow: hidden;\n}\n\n.card {\n  position: relative;\n  background: var(--surface-liquid-strong);\n  border: 1px solid var(--surface-border-strong);\n  border-radius: var(--radius-lg);\n  box-shadow: var(--shadow-soft), var(--liquid-glow);\n  backdrop-filter: blur(var(--glass-blur));\n  -webkit-backdrop-filter: blur(var(--glass-blur));\n  overflow: hidden;\n}\n\n.card-hover {\n  transition: box-shadow 180ms ease, transform 180ms ease;\n}\n\n.card-hover:hover {\n  box-shadow: var(--shadow-hover), var(--liquid-glow);\n  transform: translateY(-2px);\n}\n\n.chip {\n  background: var(--surface-liquid);\n  border: 1px solid var(--surface-border-strong);\n  border-radius: 999px;\n  padding: 0.25rem 0.6rem;\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: var(--text-secondary);\n  box-shadow: var(--shadow-inset);\n}\n\n.input-field {\n  position: relative;\n  background: var(--surface-liquid-strong);\n  border: 1px solid var(--surface-border-strong);\n  border-radius: var(--radius-lg);\n  padding: 0.75rem 1rem;\n  color: var(--text-primary);\n  box-shadow: var(--shadow-inset), var(--liquid-glow);\n  transition: box-shadow 150ms ease, border-color 150ms ease, transform 150ms ease;\n}\n\n.input-field:focus {\n  outline: none;\n  border-color: rgba(250, 147, 28, 0.6);\n  box-shadow: var(--focus-ring), var(--liquid-glow);\n  transform: translateY(-1px);\n}\n\n.btn-secondary {\n  border-radius: var(--radius-md);\n  border: 1px solid var(--surface-border-strong);\n  background: var(--surface-liquid);\n  color: var(--text-primary);\n  box-shadow: var(--shadow-soft), var(--liquid-glow);\n  transition: transform 150ms ease, box-shadow 150ms ease, opacity 150ms ease;\n}\n\n.btn-secondary:hover {\n  box-shadow: var(--shadow-hover), var(--liquid-glow);\n}\n\n.btn-secondary:active {\n  transform: scale(0.98);\n}\n\n.tooltip-panel {\n  background: var(--surface-liquid-strong);\n  border: 1px solid var(--surface-border-strong);\n  color: var(--text-primary);\n  box-shadow: var(--shadow-soft), 0 12px 24px rgba(28, 25, 17, 0.16);\n  backdrop-filter: blur(calc(var(--glass-blur) * 0.9));\n  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.9));\n}\n\n.tooltip-arrow {\n  background: var(--surface-liquid-strong);\n  border: 1px solid var(--surface-border-strong);\n}\n\n::where(.panel, .card) {\n  isolation: isolate;\n}\n\n::where(.panel, .card) > * {\n  position: relative;\n  z-index: 1;\n}\n\n::where(.panel, .card)::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: var(--liquid-highlight);\n  opacity: 0.6;\n  pointer-events: none;\n  z-index: 0;\n}\n\n::where(.panel, .card)::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 0.5px, transparent 0.5px);\n  background-size: 4px 4px;\n  opacity: var(--noise-opacity);\n  pointer-events: none;\n  z-index: 0;\n}\n\n.avatar {\n  background: var(--avatar-bg);\n  border: var(--avatar-border);\n  box-shadow: var(--shadow-soft), var(--avatar-glow);\n  backdrop-filter: blur(12px);\n  -webkit-backdrop-filter: blur(12px);\n}\n\n.conversations-scroll::-webkit-scrollbar,\n.chat-scroll::-webkit-scrollbar {\n  width: 6px;\n}\n\n.conversations-scroll::-webkit-scrollbar-track,\n.chat-scroll::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.conversations-scroll::-webkit-scrollbar-thumb,\n.chat-scroll::-webkit-scrollbar-thumb {\n  background: rgba(230, 171, 132, 0.3);\n  border-radius: 3px;\n}\n\n.conversations-scroll::-webkit-scrollbar-thumb:hover,\n.chat-scroll::-webkit-scrollbar-thumb:hover {\n  background: rgba(230, 171, 132, 0.5);\n}\n\n.conversations-scroll,\n.chat-scroll {\n  scrollbar-width: thin;\n  scrollbar-color: rgba(230, 171, 132, 0.3) transparent;\n}\n\n.touch-manipulation {\n  touch-action: manipulation;\n}\n\n/* Dark mode support */\n@media (prefers-color-scheme: dark) {\n  .pamela-call-status {\n    color: #ffffff;\n  }\n  \n  .pamela-transcript-viewer {\n    color: #ffffff;\n  }\n}\n\n";
 styleInject(css_248z);
 
 const PamelaContext = createContext(null);
@@ -47,13 +47,37 @@ function usePamela() {
     return context;
 }
 
-function CallButton({ to, task, country, locale, instructions, end_user_id, metadata, tools, webhooks, onCallStart, onCallComplete, onError, disabled = false, className = '', children, }) {
+function CallButton({ to, task, country, locale, instructions, end_user_id, metadata, tools, webhooks, onCallStart, onCallComplete, onError, variant = 'primary', size = 'md', pollInterval = 2000, pollTimeout = 5 * 60 * 1000, disabled = false, className = '', children, }) {
     const { client } = usePamela();
     const [loading, setLoading] = useState(false);
     const [callId, setCallId] = useState(null);
+    const pollIntervalRef = useRef(null);
+    const timeoutRef = useRef(null);
+    // Cleanup on unmount
+    useEffect(() => {
+        return () => {
+            if (pollIntervalRef.current) {
+                clearInterval(pollIntervalRef.current);
+                pollIntervalRef.current = null;
+            }
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+                timeoutRef.current = null;
+            }
+        };
+    }, []);
     const handleClick = async () => {
         if (loading || disabled)
             return;
+        // Clear any existing intervals/timeouts
+        if (pollIntervalRef.current) {
+            clearInterval(pollIntervalRef.current);
+            pollIntervalRef.current = null;
+        }
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
         setLoading(true);
         try {
             const call = await client.createCall({
@@ -70,36 +94,69 @@ function CallButton({ to, task, country, locale, instructions, end_user_id, meta
             setCallId(call.id);
             onCallStart?.(call.id);
             // Poll for call completion
-            const pollInterval = setInterval(async () => {
+            pollIntervalRef.current = setInterval(async () => {
                 try {
                     const status = await client.getCall(call.id);
                     if (status.status === 'completed' || status.status === 'failed' || status.status === 'cancelled') {
-                        clearInterval(pollInterval);
+                        if (pollIntervalRef.current) {
+                            clearInterval(pollIntervalRef.current);
+                            pollIntervalRef.current = null;
+                        }
+                        if (timeoutRef.current) {
+                            clearTimeout(timeoutRef.current);
+                            timeoutRef.current = null;
+                        }
                         setLoading(false);
                         onCallComplete?.(status);
                     }
                 }
                 catch (error) {
-                    clearInterval(pollInterval);
+                    if (pollIntervalRef.current) {
+                        clearInterval(pollIntervalRef.current);
+                        pollIntervalRef.current = null;
+                    }
+                    if (timeoutRef.current) {
+                        clearTimeout(timeoutRef.current);
+                        timeoutRef.current = null;
+                    }
                     setLoading(false);
                     onError?.(error);
                 }
-            }, 2000);
+            }, pollInterval);
             // Timeout after 5 minutes
-            setTimeout(() => {
-                clearInterval(pollInterval);
+            timeoutRef.current = setTimeout(() => {
+                if (pollIntervalRef.current) {
+                    clearInterval(pollIntervalRef.current);
+                    pollIntervalRef.current = null;
+                }
                 setLoading(false);
-            }, 5 * 60 * 1000);
+            }, pollTimeout);
         }
         catch (error) {
             setLoading(false);
             onError?.(error);
         }
     };
-    return (React.createElement("button", { onClick: handleClick, disabled: loading || disabled, className: `pamela-call-button ${className}` }, loading ? 'Calling...' : children || 'Call Now'));
+    const variantClass = variant === 'secondary'
+        ? 'pamela-call-button--secondary'
+        : variant === 'danger'
+            ? 'pamela-call-button--danger'
+            : 'pamela-call-button--primary';
+    const sizeClass = size === 'sm'
+        ? 'pamela-call-button--sm'
+        : size === 'lg'
+            ? 'pamela-call-button--lg'
+            : 'pamela-call-button--md';
+    return (React.createElement("button", { onClick: handleClick, disabled: loading || disabled, className: `pamela-call-button ${variantClass} ${sizeClass} ${className}` }, loading ? 'Calling...' : children || 'Call Now'));
 }
 
-function TranscriptViewer({ transcript, className = '' }) {
+function TranscriptViewer({ transcript, maxHeight = 400, autoScroll = true, className = '', }) {
+    const containerRef = useRef(null);
+    useEffect(() => {
+        if (!autoScroll || !containerRef.current)
+            return;
+        containerRef.current.scrollTop = containerRef.current.scrollHeight;
+    }, [autoScroll, transcript]);
     const getMessageStyle = (speaker) => {
         if (speaker === 'pamela' || speaker === 'agent') {
             // Pamela messages: white background with beige border
@@ -139,12 +196,12 @@ function TranscriptViewer({ transcript, className = '' }) {
                 color: 'var(--text-primary, #1f2937)',
             } }, "Transcript"),
         React.createElement("div", { className: "pamela-transcript-container", style: {
-                maxHeight: '400px',
+                maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight,
                 overflowY: 'auto',
                 borderRadius: 'var(--radius-sm, 0.5rem)',
                 padding: '16px',
                 background: 'var(--surface, #F7F4ED)',
-            } }, transcript.map((entry, index) => {
+            }, ref: containerRef }, transcript.map((entry, index) => {
             const style = getMessageStyle(entry.speaker);
             const { className: bubbleClassName, ...bubbleStyle } = style;
             return (React.createElement("div", { key: index, className: bubbleClassName, style: {
@@ -265,10 +322,11 @@ function StatusIndicator({ status }) {
                 fontSize: '12px',
                 fontWeight: '500',
                 color: config.textColor,
+                fontStyle: 'italic',
                 fontFamily: 'Poppins, Inter, sans-serif',
             } }, config.text)));
 }
-function CallStatus({ callId, pollInterval = 5000, onStatusChange, showTranscript = true, className = '', }) {
+function CallStatus({ callId, pollInterval = 5000, onStatusChange, showTranscript = true, showSummary = true, compact = false, className = '', }) {
     const { client } = usePamela();
     const [status, setStatus] = useState(null);
     const [loading, setLoading] = useState(true);
@@ -310,8 +368,8 @@ function CallStatus({ callId, pollInterval = 5000, onStatusChange, showTranscrip
             fontFamily: 'Poppins, Inter, -apple-system, BlinkMacSystemFont, sans-serif',
         } },
         React.createElement("div", { style: {
-                marginBottom: '16px',
-                padding: '16px',
+                marginBottom: compact ? '8px' : '16px',
+                padding: compact ? '12px' : '16px',
                 background: 'var(--surface-liquid-strong, #ffffff)',
                 borderRadius: 'var(--radius-md, 0.75rem)',
                 border: '1px solid var(--surface-border-strong, rgba(231, 171, 132, 0.3))',
@@ -319,24 +377,24 @@ function CallStatus({ callId, pollInterval = 5000, onStatusChange, showTranscrip
             } },
             React.createElement("div", { style: { marginBottom: '12px' } },
                 React.createElement(StatusIndicator, { status: status.status })),
-            React.createElement("div", { style: { fontSize: '14px', color: 'var(--text-primary, #1f2937)', lineHeight: '1.6' } },
-                React.createElement("div", { style: { marginBottom: '8px' } },
+            React.createElement("div", { style: { fontSize: compact ? '12px' : '14px', color: 'var(--text-primary, #1f2937)', lineHeight: '1.6' } },
+                React.createElement("div", { style: { marginBottom: compact ? '6px' : '8px' } },
                     React.createElement("span", { style: { fontWeight: '600', color: 'var(--text-secondary, #6b7280)' } }, "To:"),
                     ' ',
                     React.createElement("span", { style: { color: 'var(--text-primary, #1f2937)' } }, status.to)),
-                React.createElement("div", { style: { marginBottom: '8px' } },
+                React.createElement("div", { style: { marginBottom: compact ? '6px' : '8px' } },
                     React.createElement("span", { style: { fontWeight: '600', color: 'var(--text-secondary, #6b7280)' } }, "From:"),
                     ' ',
                     React.createElement("span", { style: { color: 'var(--text-primary, #1f2937)' } }, status.from_)),
-                status.duration_seconds && (React.createElement("div", { style: { marginBottom: '8px' } },
+                status.duration_seconds && !compact && (React.createElement("div", { style: { marginBottom: '8px' } },
                     React.createElement("span", { style: { fontWeight: '600', color: 'var(--text-secondary, #6b7280)' } }, "Duration:"),
                     ' ',
                     React.createElement("span", { style: { color: 'var(--text-primary, #1f2937)' } },
                         status.duration_seconds,
                         "s")))),
-            status.summary && (React.createElement("div", { style: {
-                    marginTop: '16px',
-                    padding: '16px',
+            showSummary && status.summary && (React.createElement("div", { style: {
+                    marginTop: compact ? '12px' : '16px',
+                    padding: compact ? '12px' : '16px',
                     background: 'var(--cta-bg, linear-gradient(to right, rgba(250, 147, 28, 0.1), rgba(253, 139, 116, 0.1)))',
                     border: 'var(--cta-border, 1px solid rgba(250, 147, 28, 0.3))',
                     borderRadius: 'var(--radius-md, 0.75rem)',
@@ -345,12 +403,12 @@ function CallStatus({ callId, pollInterval = 5000, onStatusChange, showTranscrip
                         display: 'flex',
                         alignItems: 'center',
                         gap: '8px',
-                        marginBottom: '8px',
+                        marginBottom: compact ? '6px' : '8px',
                     } },
                     React.createElement("svg", { style: { width: '20px', height: '20px', color: 'var(--accent, #FA931C)' }, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
                         React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" })),
-                    React.createElement("h4", { style: { fontWeight: '600', color: 'var(--text-primary, #1f2937)', fontSize: '14px' } }, "Call Summary")),
-                React.createElement("p", { style: { fontSize: '14px', color: 'var(--text-primary, #1f2937)', lineHeight: '1.6' } }, status.summary)))),
+                    React.createElement("h4", { style: { fontWeight: '600', color: 'var(--text-primary, #1f2937)', fontSize: compact ? '12px' : '14px' } }, "Call Summary")),
+                React.createElement("p", { style: { fontSize: compact ? '12px' : '14px', color: 'var(--text-primary, #1f2937)', lineHeight: '1.6' } }, status.summary)))),
         showTranscript && status.transcript && status.transcript.length > 0 && (React.createElement(TranscriptViewer, { transcript: status.transcript }))));
 }
 
@@ -429,5 +487,209 @@ function CallHistory({ limit = 10, onCallSelect, className = '', }) {
                 new Date(call.created_at).toLocaleString()))))))));
 }
 
-export { CallButton, CallHistory, CallStatus, PamelaProvider, TranscriptViewer, usePamela };
+const sizeMap = {
+    small: 'var(--pamela-orb-size-small, 96px)',
+    medium: 'var(--pamela-orb-size-medium, 128px)',
+    large: 'var(--pamela-orb-size-large, 192px)',
+};
+function VoiceOrb({ isActive = false, size = 'large', className = '' }) {
+    const [pulsePhase, setPulsePhase] = useState(0);
+    const [idlePhase, setIdlePhase] = useState(Math.floor(Math.random() * 720)); // Random initial phase to avoid sync
+    // Continuous animation for idle mode - runs once on mount
+    // Remove modulo to allow continuous rotation (can go beyond 360 degrees for seamless loop)
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setIdlePhase(prev => prev + 1); // Continuous growth - no reset for fluid animation
+        }, 16); // ~60fps
+        return () => clearInterval(interval);
+    }, []); // Empty deps - only run once
+    // Fast animation for active mode
+    useEffect(() => {
+        if (!isActive)
+            return;
+        const interval = setInterval(() => {
+            setPulsePhase(prev => (prev + 1) % 360);
+        }, 16); // ~60fps
+        return () => clearInterval(interval);
+    }, [isActive]);
+    const orbSize = sizeMap[size];
+    // Multiple breathing layers for idle mode (more organic) - reduced by 10%
+    const baseTime = idlePhase * 0.05;
+    const idleBreath1 = Math.sin(baseTime) * 0.072; // 7.2% primary breath (was 8%)
+    const idleBreath2 = Math.sin(baseTime * 1.3) * 0.045; // 4.5% secondary breath (was 5%)
+    const idleBreath3 = Math.sin(baseTime * 0.7) * 0.027; // 2.7% tertiary breath (was 3%)
+    // Calculate pulse scale - multi-layer breathing when idle, faster pulse when active - reduced by 10%
+    const pulseScale = isActive
+        ? 1 + Math.sin((pulsePhase * Math.PI) / 180) * 0.135 // 13.5% pulse variation (was 15%)
+        : 1 + idleBreath1 + idleBreath2 + idleBreath3; // Layered breathing when idle
+    // Floating/levitation effect (idle only) - reduced by 10%
+    const floatY = isActive ? 0 : Math.sin(baseTime * 0.4) * 7.2; // 7.2px float movement (was 8px)
+    // Continuous gradient rotation - slower when idle, faster when active
+    const gradientRotation = isActive
+        ? pulsePhase * 0.5
+        : idlePhase * 0.15; // Slow, continuous rotation when idle
+    // Subtle color shift for idle mode - reduced by 10%
+    const colorShift = isActive ? 0 : Math.sin(baseTime * 0.3) * 9; // 9deg color shift (was 10deg)
+    const orbSizeStyle = {
+        width: orbSize,
+        height: orbSize,
+    };
+    return (React.createElement("div", { className: className, style: {
+            position: 'relative',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            transform: `translateY(${floatY}px)`,
+            transition: isActive ? 'transform 0.3s ease-out' : 'none',
+        } },
+        React.createElement("div", { style: {
+                ...orbSizeStyle,
+                position: 'absolute',
+                borderRadius: '50%',
+                filter: 'blur(24px)', // blur-xl
+                background: `radial-gradient(circle, 
+            hsla(${25 + colorShift}, 75%, 55%, 0.54), 
+            hsla(${11 + colorShift}, 97%, 72%, 0.54))`,
+                transform: `scale(${pulseScale * 1.125})`,
+                opacity: isActive ? 0.315 : 0.225,
+                transition: 'opacity 0.3s ease-out',
+            } }),
+        React.createElement("div", { style: {
+                ...orbSizeStyle,
+                position: 'absolute',
+                borderRadius: '50%',
+                filter: 'blur(16px)', // blur-lg
+                background: `radial-gradient(circle, 
+            hsla(${25 + colorShift * 0.7}, 75%, 55%, 0.45), 
+            hsla(${11 + colorShift * 0.7}, 97%, 72%, 0.45))`,
+                transform: `scale(${pulseScale * 1.035}) rotate(${gradientRotation * 0.3}deg)`,
+                opacity: isActive ? 0.405 : 0.315,
+                transition: 'opacity 0.3s ease-out',
+            } }),
+        !isActive && (React.createElement("div", { style: {
+                ...orbSizeStyle,
+                position: 'absolute',
+                borderRadius: '50%',
+                filter: 'blur(40px)', // blur-2xl
+                background: `radial-gradient(circle, 
+              hsla(${25 + colorShift * 0.5}, 70%, 50%, 0.27), 
+              hsla(${11 + colorShift * 0.5}, 97%, 72%, 0.27))`,
+                transform: `scale(${(1 + idleBreath1) * 1.26})`,
+                opacity: 0.18,
+            } })),
+        React.createElement("div", { style: {
+                ...orbSizeStyle,
+                position: 'relative',
+                borderRadius: '50%',
+                background: `linear-gradient(${gradientRotation + colorShift}deg, 
+            hsl(${25 + colorShift}, 75%, 55%), 
+            hsl(${11 + colorShift}, 97%, 72%), 
+            hsl(${25 + colorShift}, 75%, 55%))`,
+                backgroundSize: '200% 200%',
+                transform: `scale(${pulseScale}) rotate(${gradientRotation * 0.1}deg)`,
+                boxShadow: isActive
+                    ? '0 0 54px rgba(250,147,28,0.45), 0 0 90px rgba(253,139,116,0.27), inset 0 0 36px rgba(255,255,255,0.09)'
+                    : `0 0 72px hsla(${25 + colorShift}, 60%, 50%, 0.36), 
+               0 0 108px hsla(${11 + colorShift}, 97%, 72%, 0.225), 
+               inset 0 0 45px rgba(255,255,255,0.135)`,
+                transition: 'box-shadow 0.3s ease-out',
+            } },
+            React.createElement("div", { style: {
+                    position: 'absolute',
+                    inset: 0,
+                    borderRadius: '50%',
+                    background: `radial-gradient(circle at ${30 + Math.sin(baseTime * 0.2) * 5}% ${30 + Math.cos(baseTime * 0.2) * 5}%, 
+              rgba(255,255,255,${isActive ? 0.36 : 0.315}), transparent 60%)`,
+                    opacity: isActive ? 0.54 : 0.63,
+                    transition: 'opacity 0.3s ease-out',
+                } }),
+            React.createElement("div", { style: {
+                    position: 'absolute',
+                    inset: 0,
+                    borderRadius: '50%',
+                    background: `linear-gradient(${45 + gradientRotation * 0.2}deg, 
+              transparent 30%, 
+              rgba(255,255,255,${isActive ? 0.45 : 0.225}) 50%, 
+              transparent 70%)`,
+                    animation: isActive ? 'shimmer 3s infinite' : 'shimmer 6s infinite',
+                    opacity: isActive ? 0.27 : 0.18,
+                    transition: 'opacity 0.3s ease-out',
+                } }),
+            !isActive && (React.createElement(React.Fragment, null,
+                React.createElement("div", { style: {
+                        position: 'absolute',
+                        borderRadius: '50%',
+                        backgroundColor: 'white',
+                        width: '8px',
+                        height: '8px',
+                        top: `${25 + Math.sin(baseTime * 0.5) * 15}%`,
+                        left: `${35 + Math.cos(baseTime * 0.5) * 15}%`,
+                        opacity: 0.36 + Math.sin(baseTime * 0.8) * 0.18,
+                        filter: 'blur(2px)',
+                        transform: `scale(${0.8 + Math.sin(baseTime * 1.2) * 0.36})`,
+                    } }),
+                React.createElement("div", { style: {
+                        position: 'absolute',
+                        borderRadius: '50%',
+                        backgroundColor: 'white',
+                        width: '6px',
+                        height: '6px',
+                        top: `${60 + Math.sin(baseTime * 0.7 + 2) * 12}%`,
+                        left: `${65 + Math.cos(baseTime * 0.7 + 2) * 12}%`,
+                        opacity: 0.27 + Math.sin(baseTime * 0.9) * 0.135,
+                        filter: 'blur(1.5px)',
+                        transform: `scale(${0.7 + Math.sin(baseTime * 1.4) * 0.27})`,
+                    } })))),
+        isActive && (React.createElement(React.Fragment, null,
+            React.createElement("div", { style: {
+                    ...orbSizeStyle,
+                    position: 'absolute',
+                    borderRadius: '50%',
+                    border: '2px solid #FA931C',
+                    opacity: 0,
+                    animation: 'ripple 2s infinite ease-in-out',
+                    animationDelay: '0s',
+                } }),
+            React.createElement("div", { style: {
+                    ...orbSizeStyle,
+                    position: 'absolute',
+                    borderRadius: '50%',
+                    border: '2px solid #fd8b74',
+                    opacity: 0,
+                    animation: 'ripple 2s infinite ease-in-out',
+                    animationDelay: '0.7s',
+                } }),
+            React.createElement("div", { style: {
+                    ...orbSizeStyle,
+                    position: 'absolute',
+                    borderRadius: '50%',
+                    border: '2px solid #FA931C',
+                    opacity: 0,
+                    animation: 'ripple 2s infinite ease-in-out',
+                    animationDelay: '1.4s',
+                } }))),
+        !isActive && (React.createElement(React.Fragment, null,
+            React.createElement("div", { style: {
+                    ...orbSizeStyle,
+                    position: 'absolute',
+                    borderRadius: '50%',
+                    border: '1px solid #FA931C',
+                    opacity: 0.135 + Math.sin(baseTime * 0.25) * 0.045,
+                    transform: `scale(${1 + Math.sin(baseTime * 0.25) * 0.27})`,
+                    animation: 'ripple 8s infinite ease-in-out',
+                    animationDelay: '0s',
+                } }),
+            React.createElement("div", { style: {
+                    ...orbSizeStyle,
+                    position: 'absolute',
+                    borderRadius: '50%',
+                    border: '1px solid #fd8b74',
+                    opacity: 0.09 + Math.sin(baseTime * 0.25 + 3) * 0.027,
+                    transform: `scale(${1 + Math.sin(baseTime * 0.25 + 3) * 0.225})`,
+                    animation: 'ripple 8s infinite ease-in-out',
+                    animationDelay: '2.5s',
+                } })))));
+}
+
+export { CallButton, CallHistory, CallStatus, PamelaProvider, TranscriptViewer, VoiceOrb, usePamela };
 //# sourceMappingURL=index.esm.js.map