@intentai/react 1.0.2 → 2.0.0

package/dist/styles.css

@@ -0,0 +1,1047 @@
+/**
+ * Premium Voice Widget Styles
+ * Version: 2.0
+ *
+ * A premium, glassmorphic design system for the Intent AI voice feedback widget.
+ * Features organic animations, smart contextual awareness, and delightful micro-interactions.
+ */
+
+/* ============================================================================
+   CSS CUSTOM PROPERTIES (DESIGN TOKENS)
+   ============================================================================ */
+
+@layer widget-tokens {
+  .fiq-premium-widget {
+    /* -------------------------------------------------------------------------
+       COLOR PALETTE
+       ------------------------------------------------------------------------- */
+
+    /* Primary - Emerald */
+    --widget-primary: #10b981;
+    --widget-primary-hover: #059669;
+    --widget-primary-light: #34d399;
+    --widget-primary-dark: #047857;
+    --widget-primary-glow: rgba(16, 185, 129, 0.4);
+    --widget-primary-subtle: rgba(16, 185, 129, 0.1);
+
+    /* Accent - Cyan */
+    --widget-accent: #22d3d3;
+    --widget-accent-light: #67e8f9;
+    --widget-accent-dark: #0891b2;
+    --widget-accent-glow: rgba(34, 211, 211, 0.3);
+
+    /* Glass Surfaces (Dark Theme) */
+    --widget-glass-bg: rgba(24, 24, 27, 0.85);
+    --widget-glass-bg-solid: #18181b;
+    --widget-glass-border: rgba(63, 63, 70, 0.5);
+    --widget-glass-border-hover: rgba(63, 63, 70, 0.8);
+    --widget-glass-highlight: rgba(255, 255, 255, 0.05);
+    --widget-glass-shadow: rgba(0, 0, 0, 0.5);
+
+    /* Recording State */
+    --widget-recording: #ef4444;
+    --widget-recording-dark: #dc2626;
+    --widget-recording-glow: rgba(239, 68, 68, 0.4);
+    --widget-recording-pulse: rgba(239, 68, 68, 0.2);
+
+    /* Success State */
+    --widget-success: #22c55e;
+    --widget-success-dark: #16a34a;
+    --widget-success-glow: rgba(34, 197, 94, 0.4);
+
+    /* Error State */
+    --widget-error: #ef4444;
+    --widget-error-glow: rgba(239, 68, 68, 0.4);
+
+    /* Warning State */
+    --widget-warning: #f59e0b;
+    --widget-warning-glow: rgba(245, 158, 11, 0.4);
+
+    /* Emotional States */
+    --widget-frustrated: #f97316;
+    --widget-delighted: #eab308;
+    --widget-confused: #8b5cf6;
+    --widget-neutral: #6b7280;
+
+    /* Text Colors */
+    --widget-text-primary: #fafafa;
+    --widget-text-secondary: #a1a1aa;
+    --widget-text-muted: #71717a;
+    --widget-text-disabled: #52525b;
+    --widget-text-inverse: #18181b;
+
+    /* -------------------------------------------------------------------------
+       SPACING SCALE (8px base)
+       ------------------------------------------------------------------------- */
+    --widget-space-1: 4px;
+    --widget-space-2: 8px;
+    --widget-space-3: 12px;
+    --widget-space-4: 16px;
+    --widget-space-5: 20px;
+    --widget-space-6: 24px;
+    --widget-space-8: 32px;
+    --widget-space-10: 40px;
+    --widget-space-12: 48px;
+
+    /* -------------------------------------------------------------------------
+       TYPOGRAPHY
+       ------------------------------------------------------------------------- */
+    --widget-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    --widget-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+
+    --widget-font-size-xs: 11px;
+    --widget-font-size-sm: 13px;
+    --widget-font-size-md: 15px;
+    --widget-font-size-lg: 18px;
+    --widget-font-size-xl: 22px;
+    --widget-font-size-2xl: 28px;
+    --widget-font-size-3xl: 36px;
+
+    --widget-line-height-tight: 1.2;
+    --widget-line-height-normal: 1.5;
+    --widget-line-height-relaxed: 1.7;
+
+    --widget-font-weight-normal: 400;
+    --widget-font-weight-medium: 500;
+    --widget-font-weight-semibold: 600;
+    --widget-font-weight-bold: 700;
+
+    /* -------------------------------------------------------------------------
+       BORDER RADIUS
+       ------------------------------------------------------------------------- */
+    --widget-radius-sm: 6px;
+    --widget-radius-md: 10px;
+    --widget-radius-lg: 14px;
+    --widget-radius-xl: 20px;
+    --widget-radius-2xl: 28px;
+    --widget-radius-full: 9999px;
+
+    /* -------------------------------------------------------------------------
+       SHADOWS
+       ------------------------------------------------------------------------- */
+    --widget-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
+    --widget-shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.4);
+    --widget-shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, 0.5);
+    --widget-shadow-xl: 0 20px 40px -8px rgba(0, 0, 0, 0.6);
+    --widget-shadow-glow: 0 0 40px -10px var(--widget-primary-glow);
+    --widget-shadow-glow-lg: 0 0 60px -5px var(--widget-primary-glow);
+    --widget-shadow-recording: 0 0 50px -5px var(--widget-recording-glow);
+
+    /* -------------------------------------------------------------------------
+       TRANSITIONS & ANIMATIONS
+       ------------------------------------------------------------------------- */
+    --widget-duration-instant: 50ms;
+    --widget-duration-fast: 150ms;
+    --widget-duration-normal: 250ms;
+    --widget-duration-slow: 400ms;
+    --widget-duration-slower: 600ms;
+
+    --widget-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+    --widget-ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
+    --widget-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+    --widget-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+
+    /* -------------------------------------------------------------------------
+       Z-INDEX LAYERS
+       ------------------------------------------------------------------------- */
+    --widget-z-base: 2147483640;
+    --widget-z-modal: 2147483641;
+    --widget-z-tooltip: 2147483642;
+    --widget-z-notification: 2147483643;
+  }
+
+  /* Light theme overrides */
+  .fiq-premium-widget[data-theme='light'] {
+    --widget-glass-bg: rgba(255, 255, 255, 0.9);
+    --widget-glass-bg-solid: #ffffff;
+    --widget-glass-border: rgba(0, 0, 0, 0.1);
+    --widget-glass-border-hover: rgba(0, 0, 0, 0.2);
+    --widget-glass-highlight: rgba(0, 0, 0, 0.02);
+    --widget-glass-shadow: rgba(0, 0, 0, 0.15);
+
+    --widget-text-primary: #18181b;
+    --widget-text-secondary: #52525b;
+    --widget-text-muted: #71717a;
+    --widget-text-disabled: #a1a1aa;
+    --widget-text-inverse: #fafafa;
+  }
+}
+
+/* ============================================================================
+   BASE STYLES
+   ============================================================================ */
+
+@layer widget-base {
+  .fiq-premium-widget {
+    font-family: var(--widget-font-family);
+    font-size: var(--widget-font-size-md);
+    line-height: var(--widget-line-height-normal);
+    color: var(--widget-text-primary);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  .fiq-premium-widget *,
+  .fiq-premium-widget *::before,
+  .fiq-premium-widget *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+
+  .fiq-premium-widget button {
+    font-family: inherit;
+    font-size: inherit;
+    cursor: pointer;
+    border: none;
+    background: none;
+    color: inherit;
+  }
+
+  .fiq-premium-widget button:disabled {
+    cursor: not-allowed;
+  }
+
+  /* Focus styles */
+  .fiq-premium-widget *:focus-visible {
+    outline: 2px solid var(--widget-primary);
+    outline-offset: 2px;
+  }
+
+  .fiq-premium-widget button:focus-visible {
+    border-radius: var(--widget-radius-md);
+  }
+}
+
+/* ============================================================================
+   TRIGGER BUTTON
+   ============================================================================ */
+
+@layer widget-trigger {
+  .fiq-trigger {
+    position: relative;
+    width: 56px;
+    height: 56px;
+    border-radius: var(--widget-radius-full);
+    background: var(--widget-glass-bg);
+    backdrop-filter: blur(20px) saturate(180%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
+    border: 1px solid var(--widget-glass-border);
+    box-shadow:
+      inset 0 0 0 1px var(--widget-glass-highlight),
+      var(--widget-shadow-lg),
+      var(--widget-shadow-glow);
+    transition:
+      transform var(--widget-duration-normal) var(--widget-ease-out-back),
+      box-shadow var(--widget-duration-normal) var(--widget-ease-out);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .fiq-trigger:hover {
+    transform: scale(1.08);
+    box-shadow:
+      inset 0 0 0 1px var(--widget-glass-highlight),
+      var(--widget-shadow-xl),
+      var(--widget-shadow-glow-lg);
+  }
+
+  .fiq-trigger:active {
+    transform: scale(0.95);
+  }
+
+  /* Inner gradient ring */
+  .fiq-trigger::before {
+    content: '';
+    position: absolute;
+    inset: 3px;
+    border-radius: var(--widget-radius-full);
+    background: linear-gradient(
+      135deg,
+      var(--widget-primary) 0%,
+      var(--widget-accent) 100%
+    );
+    opacity: 0.9;
+    transition: opacity var(--widget-duration-fast);
+  }
+
+  .fiq-trigger:hover::before {
+    opacity: 1;
+  }
+
+  /* Breathing ring */
+  .fiq-breathing-ring {
+    position: absolute;
+    inset: -8px;
+    border-radius: var(--widget-radius-full);
+    background: radial-gradient(
+      circle,
+      var(--widget-primary-glow) 0%,
+      transparent 70%
+    );
+    pointer-events: none;
+    animation: breathe 4s ease-in-out infinite;
+  }
+
+  @keyframes breathe {
+    0%, 100% {
+      opacity: 0.5;
+      transform: scale(1);
+    }
+    50% {
+      opacity: 0.8;
+      transform: scale(1.15);
+    }
+  }
+
+  /* Icon container */
+  .fiq-trigger-icon {
+    position: relative;
+    z-index: 1;
+    color: white;
+  }
+
+  /* Scroll-aware states */
+  .fiq-trigger[data-scroll='scrolling'] {
+    transform: scale(0.85);
+    opacity: 0.3;
+  }
+
+  /* Frustration indicator */
+  .fiq-frustration-badge {
+    position: absolute;
+    top: -4px;
+    right: -4px;
+    width: 18px;
+    height: 18px;
+    border-radius: var(--widget-radius-full);
+    background: var(--widget-frustrated);
+    border: 2px solid var(--widget-glass-bg-solid);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--widget-font-size-xs);
+    font-weight: var(--widget-font-weight-bold);
+    color: white;
+    animation: pulse 2s ease-in-out infinite;
+  }
+
+  @keyframes pulse {
+    0%, 100% {
+      transform: scale(1);
+    }
+    50% {
+      transform: scale(1.1);
+    }
+  }
+}
+
+/* ============================================================================
+   MODAL CONTAINER
+   ============================================================================ */
+
+@layer widget-modal {
+  .fiq-modal {
+    position: relative;
+    background: var(--widget-glass-bg);
+    backdrop-filter: blur(20px) saturate(180%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
+    border: 1px solid var(--widget-glass-border);
+    border-radius: var(--widget-radius-xl);
+    box-shadow: var(--widget-shadow-xl);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* Header */
+  .fiq-modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--widget-space-5) var(--widget-space-6);
+    border-bottom: 1px solid var(--widget-glass-border);
+  }
+
+  .fiq-modal-title {
+    font-size: var(--widget-font-size-lg);
+    font-weight: var(--widget-font-weight-bold);
+    color: var(--widget-text-primary);
+  }
+
+  .fiq-modal-close {
+    width: 32px;
+    height: 32px;
+    border-radius: var(--widget-radius-md);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--widget-text-secondary);
+    transition:
+      background var(--widget-duration-fast),
+      color var(--widget-duration-fast),
+      transform var(--widget-duration-fast) var(--widget-ease-out-back);
+  }
+
+  .fiq-modal-close:hover {
+    background: var(--widget-glass-highlight);
+    color: var(--widget-text-primary);
+    transform: rotate(90deg);
+  }
+
+  /* Content area */
+  .fiq-modal-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--widget-space-6);
+  }
+
+  /* Footer */
+  .fiq-modal-footer {
+    padding: var(--widget-space-4) var(--widget-space-6);
+    border-top: 1px solid var(--widget-glass-border);
+  }
+}
+
+/* ============================================================================
+   TAB NAVIGATION
+   ============================================================================ */
+
+@layer widget-tabs {
+  .fiq-tabs {
+    display: flex;
+    border-bottom: 1px solid var(--widget-glass-border);
+  }
+
+  .fiq-tab {
+    flex: 1;
+    padding: var(--widget-space-3) 0;
+    font-size: var(--widget-font-size-sm);
+    font-weight: var(--widget-font-weight-medium);
+    color: var(--widget-text-secondary);
+    position: relative;
+    transition: color var(--widget-duration-fast);
+  }
+
+  .fiq-tab:hover {
+    color: var(--widget-text-primary);
+    background: var(--widget-glass-highlight);
+  }
+
+  .fiq-tab[data-active='true'] {
+    color: var(--widget-primary);
+  }
+
+  .fiq-tab-indicator {
+    position: absolute;
+    bottom: -1px;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: var(--widget-primary);
+  }
+}
+
+/* ============================================================================
+   CATEGORY SELECTOR
+   ============================================================================ */
+
+@layer widget-categories {
+  .fiq-category-label {
+    display: block;
+    font-size: var(--widget-font-size-xs);
+    font-weight: var(--widget-font-weight-semibold);
+    color: var(--widget-text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin-bottom: var(--widget-space-3);
+  }
+
+  .fiq-category-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
+    gap: var(--widget-space-3);
+  }
+
+  .fiq-category-chip {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--widget-space-2);
+    padding: var(--widget-space-3) var(--widget-space-2);
+    background: var(--widget-glass-bg);
+    border: 2px solid var(--widget-glass-border);
+    border-radius: var(--widget-radius-lg);
+    transition:
+      transform var(--widget-duration-fast) var(--widget-ease-out-back),
+      background var(--widget-duration-fast),
+      border-color var(--widget-duration-fast),
+      box-shadow var(--widget-duration-fast);
+  }
+
+  .fiq-category-chip:hover {
+    transform: translateY(-2px) scale(1.02);
+    border-color: var(--widget-glass-border-hover);
+    box-shadow: var(--widget-shadow-md);
+  }
+
+  .fiq-category-chip:active {
+    transform: scale(0.95);
+  }
+
+  .fiq-category-chip[data-selected='true'] {
+    background: var(--widget-primary);
+    border-color: var(--widget-primary);
+  }
+
+  .fiq-category-icon {
+    font-size: 20px;
+    transition: transform var(--widget-duration-normal) var(--widget-ease-out-back);
+  }
+
+  .fiq-category-chip[data-selected='true'] .fiq-category-icon {
+    animation: iconBounce 0.4s var(--widget-ease-out-back);
+  }
+
+  @keyframes iconBounce {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.3) rotate(10deg); }
+    75% { transform: scale(1.1) rotate(-5deg); }
+    100% { transform: scale(1) rotate(0); }
+  }
+
+  .fiq-category-name {
+    font-size: var(--widget-font-size-xs);
+    font-weight: var(--widget-font-weight-medium);
+    color: var(--widget-text-primary);
+  }
+
+  .fiq-category-chip[data-selected='true'] .fiq-category-name {
+    color: white;
+  }
+}
+
+/* ============================================================================
+   AMBIENT ORB VISUALIZATION
+   ============================================================================ */
+
+@layer widget-orb {
+  .fiq-ambient-orb {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto;
+  }
+
+  .fiq-orb-svg {
+    filter: drop-shadow(0 0 20px var(--widget-primary-glow));
+  }
+
+  .fiq-orb-main {
+    fill: url(#orbGradient);
+    transition: transform var(--widget-duration-fast) var(--widget-ease-out);
+  }
+
+  .fiq-orb-pulse {
+    fill: none;
+    stroke: var(--widget-primary-glow);
+    stroke-width: 2;
+  }
+
+  .fiq-orb-icon {
+    fill: none;
+    stroke: white;
+    stroke-width: 2.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  /* Recording state */
+  .fiq-ambient-orb[data-recording='true'] .fiq-orb-svg {
+    filter: drop-shadow(0 0 30px var(--widget-recording-glow));
+  }
+
+  .fiq-ambient-orb[data-recording='true'] .fiq-orb-main {
+    fill: var(--widget-recording);
+  }
+
+  /* Particles */
+  .fiq-particle {
+    position: absolute;
+    border-radius: var(--widget-radius-full);
+    pointer-events: none;
+  }
+}
+
+/* ============================================================================
+   RECORDING TIMER
+   ============================================================================ */
+
+@layer widget-timer {
+  .fiq-timer {
+    text-align: center;
+    margin-top: var(--widget-space-4);
+  }
+
+  .fiq-timer-display {
+    font-size: var(--widget-font-size-3xl);
+    font-weight: var(--widget-font-weight-bold);
+    font-family: var(--widget-font-mono);
+    color: var(--widget-text-primary);
+    letter-spacing: 0.05em;
+  }
+
+  .fiq-timer[data-warning='true'] .fiq-timer-display {
+    color: var(--widget-recording);
+    animation: timerPulse 0.5s ease-in-out infinite alternate;
+  }
+
+  @keyframes timerPulse {
+    from { transform: scale(1); }
+    to { transform: scale(1.05); }
+  }
+
+  .fiq-timer-progress {
+    width: 160px;
+    height: 4px;
+    background: var(--widget-glass-border);
+    border-radius: var(--widget-radius-full);
+    margin: var(--widget-space-3) auto;
+    overflow: hidden;
+  }
+
+  .fiq-timer-progress-bar {
+    height: 100%;
+    background: var(--widget-primary);
+    border-radius: var(--widget-radius-full);
+    transition: width 0.5s linear, background var(--widget-duration-fast);
+  }
+
+  .fiq-timer[data-warning='true'] .fiq-timer-progress-bar {
+    background: var(--widget-recording);
+  }
+}
+
+/* ============================================================================
+   TRANSCRIPTION DISPLAY
+   ============================================================================ */
+
+@layer widget-transcription {
+  .fiq-transcription {
+    padding: var(--widget-space-4);
+    background: var(--widget-glass-bg);
+    border: 1px solid var(--widget-glass-border);
+    border-radius: var(--widget-radius-lg);
+    min-height: 80px;
+    max-height: 140px;
+    overflow-y: auto;
+  }
+
+  .fiq-transcription-text {
+    font-size: var(--widget-font-size-sm);
+    line-height: var(--widget-line-height-relaxed);
+    color: var(--widget-text-primary);
+  }
+
+  .fiq-transcription-placeholder {
+    color: var(--widget-text-muted);
+    font-style: italic;
+  }
+
+  .fiq-transcription-cursor {
+    display: inline-block;
+    width: 2px;
+    height: 1.2em;
+    background: var(--widget-primary);
+    margin-left: 2px;
+    vertical-align: text-bottom;
+    animation: cursorBlink 1s step-end infinite;
+  }
+
+  @keyframes cursorBlink {
+    50% { opacity: 0; }
+  }
+
+  .fiq-listening-indicator {
+    display: flex;
+    align-items: center;
+    gap: var(--widget-space-2);
+    margin-top: var(--widget-space-3);
+    font-size: var(--widget-font-size-xs);
+    color: var(--widget-text-secondary);
+  }
+
+  .fiq-listening-dots {
+    display: flex;
+    gap: 4px;
+  }
+
+  .fiq-listening-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: var(--widget-radius-full);
+    background: var(--widget-primary);
+    animation: dotPulse 1s ease-in-out infinite;
+  }
+
+  .fiq-listening-dot:nth-child(2) {
+    animation-delay: 0.15s;
+  }
+
+  .fiq-listening-dot:nth-child(3) {
+    animation-delay: 0.3s;
+  }
+
+  @keyframes dotPulse {
+    0%, 100% {
+      transform: scale(1);
+      opacity: 0.5;
+    }
+    50% {
+      transform: scale(1.4);
+      opacity: 1;
+    }
+  }
+}
+
+/* ============================================================================
+   TEXT INPUT
+   ============================================================================ */
+
+@layer widget-text-input {
+  .fiq-textarea {
+    width: 100%;
+    min-height: 150px;
+    padding: var(--widget-space-4);
+    font-family: var(--widget-font-family);
+    font-size: var(--widget-font-size-sm);
+    line-height: var(--widget-line-height-relaxed);
+    color: var(--widget-text-primary);
+    background: var(--widget-glass-bg);
+    border: 1px solid var(--widget-glass-border);
+    border-radius: var(--widget-radius-lg);
+    resize: vertical;
+    transition: border-color var(--widget-duration-fast);
+  }
+
+  .fiq-textarea::placeholder {
+    color: var(--widget-text-muted);
+  }
+
+  .fiq-textarea:hover {
+    border-color: var(--widget-glass-border-hover);
+  }
+
+  .fiq-textarea:focus {
+    outline: none;
+    border-color: var(--widget-primary);
+    box-shadow: 0 0 0 3px var(--widget-primary-subtle);
+  }
+
+  .fiq-char-count {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: var(--widget-space-2);
+    font-size: var(--widget-font-size-xs);
+    color: var(--widget-text-muted);
+  }
+}
+
+/* ============================================================================
+   BUTTONS
+   ============================================================================ */
+
+@layer widget-buttons {
+  .fiq-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--widget-space-2);
+    padding: var(--widget-space-3) var(--widget-space-6);
+    font-size: var(--widget-font-size-md);
+    font-weight: var(--widget-font-weight-semibold);
+    border-radius: var(--widget-radius-lg);
+    transition:
+      transform var(--widget-duration-fast) var(--widget-ease-out-back),
+      background var(--widget-duration-fast),
+      box-shadow var(--widget-duration-fast);
+  }
+
+  .fiq-button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .fiq-button:not(:disabled):hover {
+    transform: translateY(-2px);
+  }
+
+  .fiq-button:not(:disabled):active {
+    transform: scale(0.97);
+  }
+
+  /* Primary variant */
+  .fiq-button--primary {
+    background: var(--widget-primary);
+    color: white;
+    box-shadow: 0 4px 12px -4px var(--widget-primary-glow);
+  }
+
+  .fiq-button--primary:not(:disabled):hover {
+    background: var(--widget-primary-hover);
+    box-shadow: 0 8px 20px -4px var(--widget-primary-glow);
+  }
+
+  /* Secondary variant */
+  .fiq-button--secondary {
+    background: var(--widget-glass-bg);
+    color: var(--widget-text-primary);
+    border: 1px solid var(--widget-glass-border);
+  }
+
+  .fiq-button--secondary:not(:disabled):hover {
+    background: var(--widget-glass-highlight);
+    border-color: var(--widget-glass-border-hover);
+  }
+
+  /* Ghost variant */
+  .fiq-button--ghost {
+    background: transparent;
+    color: var(--widget-text-secondary);
+  }
+
+  .fiq-button--ghost:not(:disabled):hover {
+    background: var(--widget-glass-highlight);
+    color: var(--widget-text-primary);
+  }
+
+  /* Recording variant */
+  .fiq-button--recording {
+    background: var(--widget-recording);
+    color: white;
+    box-shadow: 0 4px 12px -4px var(--widget-recording-glow);
+    animation: recordingPulse 2s ease-in-out infinite;
+  }
+
+  @keyframes recordingPulse {
+    0%, 100% {
+      box-shadow: 0 4px 12px -4px var(--widget-recording-glow);
+    }
+    50% {
+      box-shadow: 0 8px 24px -4px var(--widget-recording-glow);
+    }
+  }
+
+  /* Full width */
+  .fiq-button--full {
+    width: 100%;
+  }
+
+  /* Loading spinner */
+  .fiq-button-spinner {
+    width: 18px;
+    height: 18px;
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    border-top-color: white;
+    border-radius: var(--widget-radius-full);
+    animation: spin 0.8s linear infinite;
+  }
+
+  @keyframes spin {
+    to { transform: rotate(360deg); }
+  }
+}
+
+/* ============================================================================
+   SUCCESS CELEBRATION
+   ============================================================================ */
+
+@layer widget-success {
+  .fiq-success {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: var(--widget-space-10);
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .fiq-success-icon {
+    margin-bottom: var(--widget-space-5);
+  }
+
+  .fiq-success-circle {
+    fill: var(--widget-success);
+    filter: drop-shadow(0 4px 12px var(--widget-success-glow));
+  }
+
+  .fiq-success-check {
+    fill: none;
+    stroke: white;
+    stroke-width: 5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .fiq-success-title {
+    font-size: var(--widget-font-size-xl);
+    font-weight: var(--widget-font-weight-bold);
+    color: var(--widget-text-primary);
+    margin-bottom: var(--widget-space-2);
+  }
+
+  .fiq-success-message {
+    font-size: var(--widget-font-size-sm);
+    color: var(--widget-text-secondary);
+  }
+
+  .fiq-success-timer {
+    position: absolute;
+    bottom: var(--widget-space-5);
+    left: 50%;
+    transform: translateX(-50%);
+    width: 100px;
+    height: 3px;
+    background: var(--widget-glass-border);
+    border-radius: var(--widget-radius-full);
+    overflow: hidden;
+  }
+
+  .fiq-success-timer-bar {
+    height: 100%;
+    background: var(--widget-primary);
+    animation: timerCountdown 3s linear forwards;
+  }
+
+  @keyframes timerCountdown {
+    from { width: 100%; }
+    to { width: 0%; }
+  }
+
+  /* Confetti */
+  .fiq-confetti {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    pointer-events: none;
+  }
+
+  .fiq-confetti-particle {
+    position: absolute;
+    animation: confettiFall 1.2s var(--widget-ease-out) forwards;
+  }
+
+  @keyframes confettiFall {
+    0% {
+      opacity: 1;
+      transform: scale(0) translate(0, 0);
+    }
+    100% {
+      opacity: 0;
+      transform: scale(1) translate(var(--confetti-x), calc(var(--confetti-y) + 50px));
+    }
+  }
+}
+
+/* ============================================================================
+   ACCESSIBILITY
+   ============================================================================ */
+
+@layer widget-a11y {
+  /* Screen reader only */
+  .fiq-sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /* Reduced motion */
+  @media (prefers-reduced-motion: reduce) {
+    .fiq-premium-widget *,
+    .fiq-premium-widget *::before,
+    .fiq-premium-widget *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
+
+  /* High contrast mode */
+  @media (prefers-contrast: high) {
+    .fiq-premium-widget {
+      --widget-glass-border: rgba(255, 255, 255, 0.5);
+    }
+
+    .fiq-premium-widget *:focus-visible {
+      outline: 3px solid white;
+      outline-offset: 3px;
+    }
+
+    .fiq-button--primary {
+      border: 2px solid white;
+    }
+  }
+
+  /* Forced colors mode (Windows High Contrast) */
+  @media (forced-colors: active) {
+    .fiq-premium-widget {
+      forced-color-adjust: none;
+    }
+
+    .fiq-button {
+      border: 2px solid ButtonText;
+    }
+
+    .fiq-button--primary {
+      background: Highlight;
+      color: HighlightText;
+    }
+  }
+}
+
+/* ============================================================================
+   RESPONSIVE ADJUSTMENTS
+   ============================================================================ */
+
+@layer widget-responsive {
+  /* Mobile viewport */
+  @media (max-width: 480px) {
+    .fiq-modal {
+      position: fixed;
+      inset: auto 0 0 0;
+      border-radius: var(--widget-radius-xl) var(--widget-radius-xl) 0 0;
+      max-height: 90vh;
+    }
+
+    .fiq-category-grid {
+      grid-template-columns: repeat(3, 1fr);
+    }
+
+    .fiq-button {
+      padding: var(--widget-space-4) var(--widget-space-6);
+    }
+  }
+
+  /* Touch devices */
+  @media (hover: none) and (pointer: coarse) {
+    .fiq-trigger {
+      width: 64px;
+      height: 64px;
+    }
+
+    .fiq-button,
+    .fiq-category-chip {
+      min-height: 48px;
+    }
+  }
+}