/* Voice Widget CDN Styles - Properly Scoped & Precise */

/* CSS Reset for Widget Isolation */
html body .voice-widget,
html body .voice-widget *,
html body *[class*="voice-widget"],
html body *[class*="voice-widget"] *,
.voice-widget,
.voice-widget *,
*[class*="voice-widget"],
*[class*="voice-widget"] * {
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Container Isolation */
html body .voice-widget-container,
html body *[class*="voice-widget-container"],
.voice-widget-container,
*[class*="voice-widget-container"] {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* Voice Widget Base Styles */
html body .voice-widget,
html body *[class*="voice-widget"],
.voice-widget,
*[class*="voice-widget"] {
  /* Base Properties */
  transition: background 0.3s ease !important;
  box-sizing: border-box !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
  
  /* Layout Properties */
  position: relative !important;
  
  /* Default Sizing */
  width: 100% !important;
  max-width: 400px !important;
  
  /* Default Spacing */
  padding: 1.5rem !important;
  
  /* Default Styling */
  background-color: #ffffff !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
  
  /* Text */
  color: #000000 !important;
  text-align: center !important;
}

/* In-Call State */
html body .voice-widget.in-call,
html body *[class*="voice-widget"][class*="in-call"],
.voice-widget.in-call,
*[class*="voice-widget"][class*="in-call"] {
  animation: subtle-pulse 3s ease-in-out infinite !important;
}

/* Voice Bar Animation */
@keyframes voice-bar {
  0%, 100% { 
    height: 8px !important; 
    transform: scaleY(0.5) !important;
  }
  50% { 
    height: 16px !important; 
    transform: scaleY(1) !important;
  }
}

html body .voice-widget .animate-voice-bar,
html body *[class*="voice-widget"] .animate-voice-bar {
  animation: voice-bar 0.6s ease-in-out infinite !important;
  transform-origin: bottom !important;  
  border-radius: 0.125rem !important;
  background-color: currentColor !important;
}

/* Voice bar container styling */
html body .voice-widget .flex.items-end[class*="gap-"][class*="1px"],
html body *[class*="voice-widget"] .flex.items-end[class*="gap-"][class*="1px"] {
  display: flex !important;
  align-items: flex-end !important;
  gap: 1px !important;
  height: 0.75rem !important;
  justify-content: center !important;
}

/* Individual voice bars with specific widths */
html body .voice-widget [class*="w-"][class*="1.5px"].bg-white,
html body *[class*="voice-widget"] [class*="w-"][class*="1.5px"].bg-white {
  width: 1.5px !important;
  background-color: white !important;
  border-radius: 0.125rem !important;
  transition: height 0.1s ease !important;
}

/* Subtle Pulse Animation */
@keyframes subtle-pulse {
  0%, 100% { 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
  }
  50% { 
    box-shadow: 0 10px 30px rgba(34, 197, 94, 0.15) !important;
  }
}

/* Pulse Animation */
@keyframes pulse { 
  50% { 
    opacity: .5 !important; 
  } 
}

html body .voice-widget .animate-pulse,
html body *[class*="voice-widget"] .animate-pulse,
.voice-widget .animate-pulse,
*[class*="voice-widget"] .animate-pulse { 
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important; 
}

/* Display Utilities - Only when voice-widget has specific flex classes */
html body .voice-widget.flex,
html body *[class*="voice-widget"].flex { 
  display: flex !important; 
}

html body .voice-widget.inline-flex,
html body *[class*="voice-widget"].inline-flex { 
  display: inline-flex !important; 
}

/* Flex Direction - Only when voice-widget has specific flex classes */
html body .voice-widget.flex-col,
html body *[class*="voice-widget"].flex-col { 
  display: flex !important;
  flex-direction: column !important; 
}

html body .voice-widget.flex-row,
html body *[class*="voice-widget"].flex-row { 
  display: flex !important;
  flex-direction: row !important; 
}

/* Flex utilities for children only when parent has flex display */
html body .voice-widget.flex .flex,
html body .voice-widget.flex-col .flex,
html body .voice-widget.flex-row .flex,
html body *[class*="voice-widget"].flex .flex,
html body *[class*="voice-widget"].flex-col .flex,
html body *[class*="voice-widget"].flex-row .flex { 
  display: flex !important; 
}

html body .voice-widget.flex .flex-col,
html body .voice-widget.flex-col .flex-col,
html body .voice-widget.flex-row .flex-col,
html body *[class*="voice-widget"].flex .flex-col,
html body *[class*="voice-widget"].flex-col .flex-col,
html body *[class*="voice-widget"].flex-row .flex-col { 
  display: flex !important;
  flex-direction: column !important; 
}

html body .voice-widget.flex .flex-row,
html body .voice-widget.flex-col .flex-row,
html body .voice-widget.flex-row .flex-row,
html body *[class*="voice-widget"].flex .flex-row,
html body *[class*="voice-widget"].flex-col .flex-row,
html body *[class*="voice-widget"].flex-row .flex-row { 
  display: flex !important;
  flex-direction: row !important; 
}

/* Flex Alignment - Only apply when parent is a flex container */
html body .voice-widget.flex .items-center,
html body .voice-widget.flex-col .items-center,
html body .voice-widget.flex-row .items-center,
html body *[class*="voice-widget"].flex .items-center,
html body *[class*="voice-widget"].flex-col .items-center,
html body *[class*="voice-widget"].flex-row .items-center,
html body .voice-widget.items-center.flex,
html body .voice-widget.items-center.flex-col,
html body .voice-widget.items-center.flex-row,
html body *[class*="voice-widget"].items-center.flex,
html body *[class*="voice-widget"].items-center.flex-col,
html body *[class*="voice-widget"].items-center.flex-row { 
  align-items: center !important; 
}

html body .voice-widget.flex .items-end,
html body .voice-widget.flex-col .items-end,
html body .voice-widget.flex-row .items-end,
html body *[class*="voice-widget"].flex .items-end,
html body *[class*="voice-widget"].flex-col .items-end,
html body *[class*="voice-widget"].flex-row .items-end,
html body .voice-widget.items-end.flex,
html body .voice-widget.items-end.flex-col,
html body .voice-widget.items-end.flex-row,
html body *[class*="voice-widget"].items-end.flex,
html body *[class*="voice-widget"].items-end.flex-col,
html body *[class*="voice-widget"].items-end.flex-row { 
  align-items: flex-end !important; 
}

html body .voice-widget.flex .justify-center,
html body .voice-widget.flex-col .justify-center,
html body .voice-widget.flex-row .justify-center,
html body *[class*="voice-widget"].flex .justify-center,
html body *[class*="voice-widget"].flex-col .justify-center,
html body *[class*="voice-widget"].flex-row .justify-center,
html body .voice-widget.justify-center.flex,
html body .voice-widget.justify-center.flex-col,
html body .voice-widget.justify-center.flex-row,
html body *[class*="voice-widget"].justify-center.flex,
html body *[class*="voice-widget"].justify-center.flex-col,
html body *[class*="voice-widget"].justify-center.flex-row { 
  justify-content: center !important; 
}

/* Additional flex alignment utilities */
html body .voice-widget.flex .justify-start,
html body .voice-widget.flex-col .justify-start,
html body .voice-widget.flex-row .justify-start,
html body *[class*="voice-widget"].flex .justify-start,
html body *[class*="voice-widget"].flex-col .justify-start,
html body *[class*="voice-widget"].flex-row .justify-start,
html body .voice-widget.justify-start.flex,
html body .voice-widget.justify-start.flex-col,
html body .voice-widget.justify-start.flex-row,
html body *[class*="voice-widget"].justify-start.flex,
html body *[class*="voice-widget"].justify-start.flex-col,
html body *[class*="voice-widget"].justify-start.flex-row { 
  justify-content: flex-start !important; 
}

html body .voice-widget.flex .justify-between,
html body .voice-widget.flex-col .justify-between,
html body .voice-widget.flex-row .justify-between,
html body *[class*="voice-widget"].flex .justify-between,
html body *[class*="voice-widget"].flex-col .justify-between,
html body *[class*="voice-widget"].flex-row .justify-between,
html body .voice-widget.justify-between.flex,
html body .voice-widget.justify-between.flex-col,
html body .voice-widget.justify-between.flex-row,
html body *[class*="voice-widget"].justify-between.flex,
html body *[class*="voice-widget"].justify-between.flex-col,
html body *[class*="voice-widget"].justify-between.flex-row { 
  justify-content: space-between !important; 
}

html body .voice-widget.flex .items-start,
html body .voice-widget.flex-col .items-start,
html body .voice-widget.flex-row .items-start,
html body *[class*="voice-widget"].flex .items-start,
html body *[class*="voice-widget"].flex-col .items-start,
html body *[class*="voice-widget"].flex-row .items-start,
html body .voice-widget.items-start.flex,
html body .voice-widget.items-start.flex-col,
html body .voice-widget.items-start.flex-row,
html body *[class*="voice-widget"].items-start.flex,
html body *[class*="voice-widget"].items-start.flex-col,
html body *[class*="voice-widget"].items-start.flex-row { 
  align-items: flex-start !important; 
}

/* Flex Item Properties - Only work within flex containers */
html body .voice-widget.flex .flex-shrink-0,
html body .voice-widget.flex-col .flex-shrink-0,
html body .voice-widget.flex-row .flex-shrink-0,
html body *[class*="voice-widget"].flex .flex-shrink-0,
html body *[class*="voice-widget"].flex-col .flex-shrink-0,
html body *[class*="voice-widget"].flex-row .flex-shrink-0 { 
  flex-shrink: 0 !important; 
}

html body .voice-widget.flex .flex-1,
html body .voice-widget.flex-col .flex-1,
html body .voice-widget.flex-row .flex-1,
html body *[class*="voice-widget"].flex .flex-1,
html body *[class*="voice-widget"].flex-col .flex-1,
html body *[class*="voice-widget"].flex-row .flex-1 { 
  flex: 1 1 0% !important; 
}

html body .voice-widget.flex .flex-grow,
html body .voice-widget.flex-col .flex-grow,
html body .voice-widget.flex-row .flex-grow,
html body *[class*="voice-widget"].flex .flex-grow,
html body *[class*="voice-widget"].flex-col .flex-grow,
html body *[class*="voice-widget"].flex-row .flex-grow { 
  flex-grow: 1 !important; 
}

html body .voice-widget.flex .flex-shrink,
html body .voice-widget.flex-col .flex-shrink,
html body .voice-widget.flex-row .flex-shrink,
html body *[class*="voice-widget"].flex .flex-shrink,
html body *[class*="voice-widget"].flex-col .flex-shrink,
html body *[class*="voice-widget"].flex-row .flex-shrink { 
  flex-shrink: 1 !important; 
}

/* Position Utilities */
html body .voice-widget .relative,
html body *[class*="voice-widget"] .relative,
.voice-widget .relative,
*[class*="voice-widget"] .relative { 
  position: relative !important; 
}

html body .voice-widget .absolute,
html body *[class*="voice-widget"] .absolute,
.voice-widget .absolute,
*[class*="voice-widget"] .absolute { 
  position: absolute !important; 
}

html body .voice-widget .bottom-0,
html body *[class*="voice-widget"] .bottom-0,
.voice-widget .bottom-0,
*[class*="voice-widget"] .bottom-0 { 
  bottom: 0px !important; 
}

html body .voice-widget .right-0,
html body *[class*="voice-widget"] .right-0,
.voice-widget .right-0,
*[class*="voice-widget"] .right-0 { 
  right: 0px !important; 
}

/* Width Utilities */
html body .voice-widget .w-full,
html body *[class*="voice-widget"] .w-full,
.voice-widget .w-full,
*[class*="voice-widget"] .w-full { width: 100% !important; }

html body .voice-widget .w-8,
html body *[class*="voice-widget"] .w-8,
.voice-widget .w-8,
*[class*="voice-widget"] .w-8 { width: 2rem !important; }

html body .voice-widget .w-12,
html body *[class*="voice-widget"] .w-12,
.voice-widget .w-12,
*[class*="voice-widget"] .w-12 { width: 3rem !important; }

html body .voice-widget .w-14,
html body *[class*="voice-widget"] .w-14,
.voice-widget .w-14,
*[class*="voice-widget"] .w-14 { width: 3.5rem !important; }

html body .voice-widget .w-5,
html body *[class*="voice-widget"] .w-5,
.voice-widget .w-5,
*[class*="voice-widget"] .w-5 { width: 1.25rem !important; }

html body .voice-widget .w-6,
html body *[class*="voice-widget"] .w-6,
.voice-widget .w-6,
*[class*="voice-widget"] .w-6 { width: 1.5rem !important; }

html body .voice-widget .w-3,
html body *[class*="voice-widget"] .w-3,
.voice-widget .w-3,
*[class*="voice-widget"] .w-3 { width: 0.75rem !important; }

/* Height Utilities */
html body .voice-widget .h-full,
html body *[class*="voice-widget"] .h-full,
.voice-widget .h-full,
*[class*="voice-widget"] .h-full { height: 100% !important; }

html body .voice-widget .h-8,
html body *[class*="voice-widget"] .h-8,
.voice-widget .h-8,
*[class*="voice-widget"] .h-8 { height: 2rem !important; }

html body .voice-widget .h-12,
html body *[class*="voice-widget"] .h-12,
.voice-widget .h-12,
*[class*="voice-widget"] .h-12 { height: 3rem !important; }

html body .voice-widget .h-14,
html body *[class*="voice-widget"] .h-14,
.voice-widget .h-14,
*[class*="voice-widget"] .h-14 { height: 3.5rem !important; }

html body .voice-widget .h-5,
html body *[class*="voice-widget"] .h-5,
.voice-widget .h-5,
*[class*="voice-widget"] .h-5 { height: 1.25rem !important; }

html body .voice-widget .h-6,
html body *[class*="voice-widget"] .h-6,
.voice-widget .h-6,
*[class*="voice-widget"] .h-6 { height: 1.5rem !important; }

html body .voice-widget .h-3,
html body *[class*="voice-widget"] .h-3,
.voice-widget .h-3,
*[class*="voice-widget"] .h-3 { height: 0.75rem !important; }

/* Arbitrary Value Sizes */
html body .voice-widget [class*="w-"][class*="100px"],
html body *[class*="voice-widget"] [class*="w-"][class*="100px"],
.voice-widget [class*="w-"][class*="100px"],
*[class*="voice-widget"] [class*="w-"][class*="100px"] { width: 100px !important; }

html body .voice-widget [class*="h-"][class*="100px"],
html body *[class*="voice-widget"] [class*="h-"][class*="100px"],
.voice-widget [class*="h-"][class*="100px"],
*[class*="voice-widget"] [class*="h-"][class*="100px"] { height: 100px !important; }

html body .voice-widget [class*="w-"][class*="1.5px"],
html body *[class*="voice-widget"] [class*="w-"][class*="1.5px"],
.voice-widget [class*="w-"][class*="1.5px"],
*[class*="voice-widget"] [class*="w-"][class*="1.5px"] { width: 1.5px !important; }

/* Max Width Utilities */
html body .voice-widget [class*="max-w-"][class*="400px"],
html body *[class*="voice-widget"] [class*="max-w-"][class*="400px"],
.voice-widget [class*="max-w-"][class*="400px"],
*[class*="voice-widget"] [class*="max-w-"][class*="400px"] { max-width: 400px !important; }

html body .voice-widget [class*="max-w-"][class*="600px"],
html body *[class*="voice-widget"] [class*="max-w-"][class*="600px"],
.voice-widget [class*="max-w-"][class*="600px"],
*[class*="voice-widget"] [class*="max-w-"][class*="600px"] { max-width: 600px !important; }

html body .voice-widget [class*="max-w-"][class*="1200px"],
html body *[class*="voice-widget"] [class*="max-w-"][class*="1200px"],
.voice-widget [class*="max-w-"][class*="1200px"],
*[class*="voice-widget"] [class*="max-w-"][class*="1200px"] { max-width: 1200px !important; }

/* Padding Utilities */
html body .voice-widget .p-6,
html body *[class*="voice-widget"] .p-6,
.voice-widget .p-6,
*[class*="voice-widget"] .p-6 { padding: 1.5rem !important; }

html body .voice-widget .p-8,
html body *[class*="voice-widget"] .p-8,
.voice-widget .p-8,
*[class*="voice-widget"] .p-8 { padding: 2rem !important; }

html body .voice-widget .px-4,
html body *[class*="voice-widget"] .px-4,
.voice-widget .px-4,
*[class*="voice-widget"] .px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }

html body .voice-widget .px-9,
html body *[class*="voice-widget"] .px-9,
.voice-widget .px-9,
*[class*="voice-widget"] .px-9 { padding-left: 2.25rem !important; padding-right: 2.25rem !important; }

html body .voice-widget .py-4,
html body *[class*="voice-widget"] .py-4,
.voice-widget .py-4,
*[class*="voice-widget"] .py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }

html body .voice-widget [class*="py-1"][class*="5"],
html body *[class*="voice-widget"] [class*="py-1"][class*="5"],
.voice-widget [class*="py-1"][class*="5"],
*[class*="voice-widget"] [class*="py-1"][class*="5"] { padding-top: 0.375rem !important; padding-bottom: 0.375rem !important; }

/* Gap Utilities - Only work with flex containers */
html body .voice-widget.flex.gap-6,
html body .voice-widget.flex-col.gap-6,
html body .voice-widget.flex-row.gap-6,
html body *[class*="voice-widget"].flex.gap-6,
html body *[class*="voice-widget"].flex-col.gap-6,
html body *[class*="voice-widget"].flex-row.gap-6,
html body .voice-widget.flex .gap-6,
html body .voice-widget.flex-col .gap-6,
html body .voice-widget.flex-row .gap-6,
html body *[class*="voice-widget"].flex .gap-6,
html body *[class*="voice-widget"].flex-col .gap-6,
html body *[class*="voice-widget"].flex-row .gap-6 { gap: 1.5rem !important; }

html body .voice-widget.flex.gap-10,
html body .voice-widget.flex-col.gap-10,
html body .voice-widget.flex-row.gap-10,
html body *[class*="voice-widget"].flex.gap-10,
html body *[class*="voice-widget"].flex-col.gap-10,
html body *[class*="voice-widget"].flex-row.gap-10,
html body .voice-widget.flex .gap-10,
html body .voice-widget.flex-col .gap-10,
html body .voice-widget.flex-row .gap-10,
html body *[class*="voice-widget"].flex .gap-10,
html body *[class*="voice-widget"].flex-col .gap-10,
html body *[class*="voice-widget"].flex-row .gap-10 { gap: 2.5rem !important; }

html body .voice-widget.flex.gap-4,
html body .voice-widget.flex-col.gap-4,
html body .voice-widget.flex-row.gap-4,
html body *[class*="voice-widget"].flex.gap-4,
html body *[class*="voice-widget"].flex-col.gap-4,
html body *[class*="voice-widget"].flex-row.gap-4,
html body .voice-widget.flex .gap-4,
html body .voice-widget.flex-col .gap-4,
html body .voice-widget.flex-row .gap-4,
html body *[class*="voice-widget"].flex .gap-4,
html body *[class*="voice-widget"].flex-col .gap-4,
html body *[class*="voice-widget"].flex-row .gap-4 { gap: 1rem !important; }

html body .voice-widget.flex.gap-3,
html body .voice-widget.flex-col.gap-3,
html body .voice-widget.flex-row.gap-3,
html body *[class*="voice-widget"].flex.gap-3,
html body *[class*="voice-widget"].flex-col.gap-3,
html body *[class*="voice-widget"].flex-row.gap-3,
html body .voice-widget.flex .gap-3,
html body .voice-widget.flex-col .gap-3,
html body .voice-widget.flex-row .gap-3,
html body *[class*="voice-widget"].flex .gap-3,
html body *[class*="voice-widget"].flex-col .gap-3,
html body *[class*="voice-widget"].flex-row .gap-3 { gap: 0.75rem !important; }

html body .voice-widget.flex.gap-2,
html body .voice-widget.flex-col.gap-2,
html body .voice-widget.flex-row.gap-2,
html body *[class*="voice-widget"].flex.gap-2,
html body *[class*="voice-widget"].flex-col.gap-2,
html body *[class*="voice-widget"].flex-row.gap-2,
html body .voice-widget.flex .gap-2,
html body .voice-widget.flex-col .gap-2,
html body .voice-widget.flex-row .gap-2,
html body *[class*="voice-widget"].flex .gap-2,
html body *[class*="voice-widget"].flex-col .gap-2,
html body *[class*="voice-widget"].flex-row .gap-2 { gap: 0.5rem !important; }

/* Fractional gap utilities */
html body .voice-widget.flex[class*="gap-2"][class*="5"],
html body .voice-widget.flex-col[class*="gap-2"][class*="5"],
html body .voice-widget.flex-row[class*="gap-2"][class*="5"],
html body *[class*="voice-widget"].flex[class*="gap-2"][class*="5"],
html body *[class*="voice-widget"].flex-col[class*="gap-2"][class*="5"],
html body *[class*="voice-widget"].flex-row[class*="gap-2"][class*="5"],
html body .voice-widget.flex [class*="gap-2"][class*="5"],
html body .voice-widget.flex-col [class*="gap-2"][class*="5"],
html body .voice-widget.flex-row [class*="gap-2"][class*="5"],
html body *[class*="voice-widget"].flex [class*="gap-2"][class*="5"],
html body *[class*="voice-widget"].flex-col [class*="gap-2"][class*="5"],
html body *[class*="voice-widget"].flex-row [class*="gap-2"][class*="5"] { gap: 0.625rem !important; }

html body .voice-widget.flex[class*="gap-1"][class*="5"],
html body .voice-widget.flex-col[class*="gap-1"][class*="5"],
html body .voice-widget.flex-row[class*="gap-1"][class*="5"],
html body *[class*="voice-widget"].flex[class*="gap-1"][class*="5"],
html body *[class*="voice-widget"].flex-col[class*="gap-1"][class*="5"],
html body *[class*="voice-widget"].flex-row[class*="gap-1"][class*="5"],
html body .voice-widget.flex [class*="gap-1"][class*="5"],
html body .voice-widget.flex-col [class*="gap-1"][class*="5"],
html body .voice-widget.flex-row [class*="gap-1"][class*="5"],
html body *[class*="voice-widget"].flex [class*="gap-1"][class*="5"],
html body *[class*="voice-widget"].flex-col [class*="gap-1"][class*="5"],
html body *[class*="voice-widget"].flex-row [class*="gap-1"][class*="5"] { gap: 0.375rem !important; }

html body .voice-widget.flex[class*="gap-"][class*="1px"],
html body .voice-widget.flex-col[class*="gap-"][class*="1px"],
html body .voice-widget.flex-row[class*="gap-"][class*="1px"],
html body *[class*="voice-widget"].flex[class*="gap-"][class*="1px"],
html body *[class*="voice-widget"].flex-col[class*="gap-"][class*="1px"],
html body *[class*="voice-widget"].flex-row[class*="gap-"][class*="1px"],
html body .voice-widget.flex [class*="gap-"][class*="1px"],
html body .voice-widget.flex-col [class*="gap-"][class*="1px"],
html body .voice-widget.flex-row [class*="gap-"][class*="1px"],
html body *[class*="voice-widget"].flex [class*="gap-"][class*="1px"],
html body *[class*="voice-widget"].flex-col [class*="gap-"][class*="1px"],
html body *[class*="voice-widget"].flex-row [class*="gap-"][class*="1px"] { gap: 1px !important; }

/* Margin Utilities - Scoped to voice-widget */
html body .voice-widget .mb-2,
html body *[class*="voice-widget"] .mb-2 { margin-bottom: 0.5rem !important; }

html body .voice-widget .mb-4,
html body *[class*="voice-widget"] .mb-4 { margin-bottom: 1rem !important; }

html body .voice-widget .mt-2,
html body *[class*="voice-widget"] .mt-2 { margin-top: 0.5rem !important; }

html body .voice-widget .mt-4,
html body *[class*="voice-widget"] .mt-4 { margin-top: 1rem !important; }

/* Space Between Utilities - Only for flex containers */
html body .voice-widget.flex-col.space-y-2 > * + *,
html body *[class*="voice-widget"].flex-col.space-y-2 > * + *,
html body .voice-widget.flex-col .space-y-2 > * + *,
html body *[class*="voice-widget"].flex-col .space-y-2 > * + * { margin-top: 0.5rem !important; }

html body .voice-widget.flex-col.space-y-4 > * + *,
html body *[class*="voice-widget"].flex-col.space-y-4 > * + *,
html body .voice-widget.flex-col .space-y-4 > * + *,
html body *[class*="voice-widget"].flex-col .space-y-4 > * + * { margin-top: 1rem !important; }

html body .voice-widget.flex-row.space-x-2 > * + *,
html body *[class*="voice-widget"].flex-row.space-x-2 > * + *,
html body .voice-widget.flex-row .space-x-2 > * + *,
html body *[class*="voice-widget"].flex-row .space-x-2 > * + * { margin-left: 0.5rem !important; }

html body .voice-widget.flex-row.space-x-4 > * + *,
html body *[class*="voice-widget"].flex-row.space-x-4 > * + *,
html body .voice-widget.flex-row .space-x-4 > * + *,
html body *[class*="voice-widget"].flex-row .space-x-4 > * + * { margin-left: 1rem !important; }

/* Border Utilities - Enhanced with proper container handling */
html body .voice-widget .rounded-full,
html body *[class*="voice-widget"] .rounded-full { 
  border-radius: 9999px !important;
}

/* Only add overflow hidden to image containers, not all rounded elements */
html body .voice-widget .rounded-full.overflow-hidden,
html body .voice-widget .overflow-hidden.rounded-full,
html body *[class*="voice-widget"] .rounded-full.overflow-hidden,
html body *[class*="voice-widget"] .overflow-hidden.rounded-full { 
  overflow: hidden !important;
}

html body .voice-widget .rounded-sm,
html body *[class*="voice-widget"] .rounded-sm { 
  border-radius: 0.125rem !important;
}

html body .voice-widget [class*="rounded-"][class*="20px"],
html body *[class*="voice-widget"] [class*="rounded-"][class*="20px"] { 
  border-radius: 20px !important;
}

html body .voice-widget [class*="rounded-"][class*="30px"],
html body *[class*="voice-widget"] [class*="rounded-"][class*="30px"] { 
  border-radius: 30px !important;
}

html body .voice-widget .border-2,
html body *[class*="voice-widget"] .border-2 { 
  border-width: 2px !important; 
  border-style: solid !important;
}

html body .voice-widget .border,
html body *[class*="voice-widget"] .border { 
  border-width: 1px !important; 
  border-style: solid !important;
}

html body .voice-widget .border-white,
html body *[class*="voice-widget"] .border-white { 
  border-color: rgb(255 255 255) !important; 
}

html body .voice-widget .border-gray-200,
html body *[class*="voice-widget"] .border-gray-200 { 
  border-color: rgb(229 231 235) !important; 
}

/* Overflow utilities - only apply when explicitly needed */
html body .voice-widget .overflow-hidden,
html body *[class*="voice-widget"] .overflow-hidden { 
  overflow: hidden !important; 
}

/* Specific button border combinations */
html body .voice-widget button.border-2.border-white,
html body *[class*="voice-widget"] button.border-2.border-white {
  border: 2px solid rgb(255 255 255) !important;
}

/* Status indicator borders */
html body .voice-widget [class*="w-8"][class*="h-8"].border-2.border-white,
html body *[class*="voice-widget"] [class*="w-8"][class*="h-8"].border-2.border-white {
  width: 2rem !important;
  height: 2rem !important;
  border: 2px solid rgb(255 255 255) !important;
  border-radius: 50% !important;
}

/* Background Colors */
html body .voice-widget .bg-green-500,
html body *[class*="voice-widget"] .bg-green-500,
.voice-widget .bg-green-500,
*[class*="voice-widget"] .bg-green-500 { background-color: rgb(34 197 94) !important; }

html body .voice-widget .bg-gray-800,
html body *[class*="voice-widget"] .bg-gray-800,
.voice-widget .bg-gray-800,
*[class*="voice-widget"] .bg-gray-800 { background-color: rgb(31 41 55) !important; }

html body .voice-widget .bg-gray-200,
html body *[class*="voice-widget"] .bg-gray-200,
.voice-widget .bg-gray-200,
*[class*="voice-widget"] .bg-gray-200 { background-color: rgb(229 231 235) !important; }

html body .voice-widget .bg-red-500,
html body *[class*="voice-widget"] .bg-red-500,
.voice-widget .bg-red-500,
*[class*="voice-widget"] .bg-red-500 { background-color: rgb(239 68 68) !important; }

html body .voice-widget .bg-blue-500,
html body *[class*="voice-widget"] .bg-blue-500,
.voice-widget .bg-blue-500,
*[class*="voice-widget"] .bg-blue-500 { background-color: rgb(59 130 246) !important; }

/* Text Colors */
html body .voice-widget .text-white,
html body *[class*="voice-widget"] .text-white { 
  color: rgb(255 255 255) !important; 
}

html body .voice-widget .text-gray-600,
html body *[class*="voice-widget"] .text-gray-600 { 
  color: rgb(75 85 99) !important; 
}

html body .voice-widget .text-green-500,
html body *[class*="voice-widget"] .text-green-500 { 
  color: rgb(34 197 94) !important; 
}

/* Support for default text colors (#666666) */
html body .voice-widget .text-gray-500,
html body *[class*="voice-widget"] .text-gray-500 { 
  color: rgb(107 114 128) !important; 
}

/* Ensure inline styles for secondary text color work */
html body .voice-widget [style*="color: rgb(102"],
html body .voice-widget [style*="color:#666"],
html body *[class*="voice-widget"] [style*="color: rgb(102"],
html body *[class*="voice-widget"] [style*="color:#666"] {
  /* Style attribute will apply, just ensure other properties work */
  font-family: inherit !important;
}

/* Typography */
html body .voice-widget .text-xs,
html body *[class*="voice-widget"] .text-xs,
.voice-widget .text-xs,
*[class*="voice-widget"] .text-xs { font-size: 0.75rem !important; line-height: 1rem !important; }

html body .voice-widget .text-base,
html body *[class*="voice-widget"] .text-base,
.voice-widget .text-base,
*[class*="voice-widget"] .text-base { font-size: 1rem !important; line-height: 1.5rem !important; }

html body .voice-widget .text-lg,
html body *[class*="voice-widget"] .text-lg,
.voice-widget .text-lg,
*[class*="voice-widget"] .text-lg { font-size: 1.125rem !important; line-height: 1.75rem !important; }

html body .voice-widget .text-2xl,
html body *[class*="voice-widget"] .text-2xl,
.voice-widget .text-2xl,
*[class*="voice-widget"] .text-2xl { font-size: 1.5rem !important; line-height: 2rem !important; }

html body .voice-widget .text-3xl,
html body *[class*="voice-widget"] .text-3xl,
.voice-widget .text-3xl,
*[class*="voice-widget"] .text-3xl { font-size: 1.875rem !important; line-height: 2.25rem !important; }

html body .voice-widget [class*="text-"][class*="32px"],
html body *[class*="voice-widget"] [class*="text-"][class*="32px"],
.voice-widget [class*="text-"][class*="32px"],
*[class*="voice-widget"] [class*="text-"][class*="32px"] { font-size: 32px !important; }

html body .voice-widget .font-bold,
html body *[class*="voice-widget"] .font-bold,
.voice-widget .font-bold,
*[class*="voice-widget"] .font-bold { font-weight: 700 !important; }

html body .voice-widget .font-semibold,
html body *[class*="voice-widget"] .font-semibold,
.voice-widget .font-semibold,
*[class*="voice-widget"] .font-semibold { font-weight: 600 !important; }

html body .voice-widget .font-medium,
html body *[class*="voice-widget"] .font-medium,
.voice-widget .font-medium,
*[class*="voice-widget"] .font-medium { font-weight: 500 !important; }

html body .voice-widget .font-mono,
html body *[class*="voice-widget"] .font-mono,
.voice-widget .font-mono,
*[class*="voice-widget"] .font-mono { font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace !important; }

html body .voice-widget .leading-tight,
html body *[class*="voice-widget"] .leading-tight,
.voice-widget .leading-tight,
*[class*="voice-widget"] .leading-tight { line-height: 1.25 !important; }

html body .voice-widget .leading-relaxed,
html body *[class*="voice-widget"] .leading-relaxed,
.voice-widget .leading-relaxed,
*[class*="voice-widget"] .leading-relaxed { line-height: 1.625 !important; }

html body .voice-widget .tabular-nums,
html body *[class*="voice-widget"] .tabular-nums,
.voice-widget .tabular-nums,
*[class*="voice-widget"] .tabular-nums { font-variant-numeric: tabular-nums !important; }

html body .voice-widget .text-center,
html body *[class*="voice-widget"] .text-center,
.voice-widget .text-center,
*[class*="voice-widget"] .text-center { text-align: center !important; }

html body .voice-widget .text-left,
html body *[class*="voice-widget"] .text-left,
.voice-widget .text-left,
*[class*="voice-widget"] .text-left { text-align: left !important; }

html body .voice-widget .whitespace-nowrap,
html body *[class*="voice-widget"] .whitespace-nowrap,
.voice-widget .whitespace-nowrap,
*[class*="voice-widget"] .whitespace-nowrap { white-space: nowrap !important; }

/* Display & Overflow */
html body .voice-widget .overflow-hidden,
html body *[class*="voice-widget"] .overflow-hidden,
.voice-widget .overflow-hidden,
*[class*="voice-widget"] .overflow-hidden { overflow: hidden !important; }

html body .voice-widget .object-contain,
html body *[class*="voice-widget"] .object-contain,
.voice-widget .object-contain,
*[class*="voice-widget"] .object-contain { object-fit: contain !important; }

/* Interactions */
html body .voice-widget .cursor-pointer,
html body *[class*="voice-widget"] .cursor-pointer,
.voice-widget .cursor-pointer,
*[class*="voice-widget"] .cursor-pointer { cursor: pointer !important; }

html body .voice-widget .transition-all,
html body *[class*="voice-widget"] .transition-all,
.voice-widget .transition-all,
*[class*="voice-widget"] .transition-all { transition-property: all !important; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; }

html body .voice-widget .duration-200,
html body *[class*="voice-widget"] .duration-200,
.voice-widget .duration-200,
*[class*="voice-widget"] .duration-200 { transition-duration: 200ms !important; }

/* Hover States */
html body .voice-widget .hover\:scale-110:hover,
html body *[class*="voice-widget"] .hover\:scale-110:hover,
.voice-widget .hover\:scale-110:hover,
*[class*="voice-widget"] .hover\:scale-110:hover { transform: scale(1.1) !important; }

html body .voice-widget .hover\:bg-gray-300:hover,
html body *[class*="voice-widget"] .hover\:bg-gray-300:hover,
.voice-widget .hover\:bg-gray-300:hover,
*[class*="voice-widget"] .hover\:bg-gray-300:hover { background-color: rgb(209 213 219) !important; }

html body .voice-widget .hover\:bg-red-600:hover,
html body *[class*="voice-widget"] .hover\:bg-red-600:hover,
.voice-widget .hover\:bg-red-600:hover,
*[class*="voice-widget"] .hover\:bg-red-600:hover { background-color: rgb(220 38 38) !important; }

html body .voice-widget [class*="hover"][class*="translate-y"]:hover,
html body *[class*="voice-widget"] [class*="hover"][class*="translate-y"]:hover,
.voice-widget [class*="hover"][class*="translate-y"]:hover,
*[class*="voice-widget"] [class*="hover"][class*="translate-y"]:hover { transform: translateY(-0.125rem) !important; }

/* Active States */
html body .voice-widget [class*="active"][class*="translate-y-0"]:active,
html body *[class*="voice-widget"] [class*="active"][class*="translate-y-0"]:active,
.voice-widget [class*="active"][class*="translate-y-0"]:active,
*[class*="voice-widget"] [class*="active"][class*="translate-y-0"]:active { transform: translateY(0px) !important; }

/* Shadow - Enhanced with more options */
html body .voice-widget .shadow-lg,
html body *[class*="voice-widget"] .shadow-lg { 
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important; 
}

html body .voice-widget .shadow-md,
html body *[class*="voice-widget"] .shadow-md { 
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important; 
}

html body .voice-widget .shadow-sm,
html body *[class*="voice-widget"] .shadow-sm { 
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important; 
}

/* Custom shadow for avatar containers */
html body .voice-widget [style*="boxShadow"],
html body .voice-widget [style*="box-shadow"],
html body *[class*="voice-widget"] [style*="boxShadow"],
html body *[class*="voice-widget"] [style*="box-shadow"] {
  border-radius: inherit !important;
  overflow: hidden !important;
}

/* Icon and button shadow enhancements */
html body .voice-widget button.shadow-lg,
html body *[class*="voice-widget"] button.shadow-lg {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
  transition: box-shadow 0.2s ease !important;
}

/* Button Styles - Enhanced with proper padding and borders */
html body .voice-widget button,
html body *[class*="voice-widget"] button {
  border: none !important;
  outline: none !important;
  font-family: inherit !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

/* Circular buttons with specific sizes */
html body .voice-widget button.w-12.h-12.rounded-full,
html body .voice-widget button.w-14.h-14.rounded-full,
html body *[class*="voice-widget"] button.w-12.h-12.rounded-full,
html body *[class*="voice-widget"] button.w-14.h-14.rounded-full {
  border-radius: 50% !important;
  padding: 0 !important;
  min-width: auto !important;
  min-height: auto !important;
}

/* Pill-shaped buttons with padding */
html body .voice-widget button.inline-flex[class*="px-"][class*="py-"],
html body *[class*="voice-widget"] button.inline-flex[class*="px-"][class*="py-"] {
  border-radius: 30px !important;
  padding-left: 2.25rem !important;
  padding-right: 2.25rem !important;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  gap: 0.625rem !important;
}

/* Ensure icons in main buttons maintain proper size */
html body .voice-widget button.inline-flex svg,
html body .voice-widget button.inline-flex .w-5.h-5,
html body *[class*="voice-widget"] button.inline-flex svg,
html body *[class*="voice-widget"] button.inline-flex .w-5.h-5 {
  width: 1.25rem !important;
  height: 1.25rem !important;
  flex-shrink: 0 !important;
}

/* Status indicator styling */
html body .voice-widget [class*="px-4"][class*="py-1"][class*="rounded-full"],
html body *[class*="voice-widget"] [class*="px-4"][class*="py-1"][class*="rounded-full"] {
  padding: 0.375rem 1rem !important;
  border-radius: 9999px !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
}

/* Status dot styling */
html body .voice-widget [class*="w-1"][class*="h-1"].rounded-full,
html body *[class*="voice-widget"] [class*="w-1"][class*="h-1"].rounded-full {
  width: 0.375rem !important;
  height: 0.375rem !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

html body .voice-widget button span,
html body *[class*="voice-widget"] button span,
.voice-widget button span,
*[class*="voice-widget"] button span {
  color: inherit !important;
}

/* SVG Icons - Enhanced styling */
html body .voice-widget button svg,
html body *[class*="voice-widget"] button svg {
  color: inherit !important;
  fill: currentColor !important;
  flex-shrink: 0 !important;
  width: auto !important;
  height: auto !important;
  vertical-align: middle !important;
}

html body .voice-widget svg,
html body *[class*="voice-widget"] svg {
  color: inherit !important;
  fill: currentColor !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* Icon size utilities with proper dimensions */
html body .voice-widget .w-3\.5.h-3\.5,
html body *[class*="voice-widget"] .w-3\.5.h-3\.5 {
  width: 0.875rem !important;
  height: 0.875rem !important;
}

html body .voice-widget .w-5.h-5,
html body *[class*="voice-widget"] .w-5.h-5 {
  width: 1.25rem !important;
  height: 1.25rem !important;
}

html body .voice-widget .w-6.h-6,
html body *[class*="voice-widget"] .w-6.h-6 {
  width: 1.5rem !important;
  height: 1.5rem !important;
}

/* Ensure SVGs inside sized containers use parent dimensions */
html body .voice-widget .w-3\.5.h-3\.5 svg,
html body .voice-widget .w-5.h-5 svg,
html body .voice-widget .w-6.h-6 svg,
html body *[class*="voice-widget"] .w-3\.5.h-3\.5 svg,
html body *[class*="voice-widget"] .w-5.h-5 svg,
html body *[class*="voice-widget"] .w-6.h-6 svg {
  width: 100% !important;
  height: 100% !important;
}

/* Ensure icons don't break layout */
html body .voice-widget [class*="w-"][class*="h-"] svg,
html body *[class*="voice-widget"] [class*="w-"][class*="h-"] svg {
  max-width: 100% !important;
  max-height: 100% !important;
}

/* Images - Enhanced with proper borders and styling */
html body .voice-widget img,
html body *[class*="voice-widget"] img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* Avatar images - Specific styling for profile images */
html body .voice-widget img[alt*="avatar"],
html body .voice-widget img[alt*="Avatar"],
html body .voice-widget img[alt*="Brand avatar"],
html body *[class*="voice-widget"] img[alt*="avatar"],
html body *[class*="voice-widget"] img[alt*="Avatar"],
html body *[class*="voice-widget"] img[alt*="Brand avatar"] {
  border-radius: inherit !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Images within rounded containers */
html body .voice-widget .rounded-full img,
html body .voice-widget [class*="rounded-"][class*="20px"] img,
html body *[class*="voice-widget"] .rounded-full img,
html body *[class*="voice-widget"] [class*="rounded-"][class*="20px"] img {
  border-radius: inherit !important;
}

/* Images with object-contain class */
html body .voice-widget img.object-contain,
html body *[class*="voice-widget"] img.object-contain {
  object-fit: contain !important;
  object-position: center !important;
}

/* Fix rounded logo container - ensure rounded corners are visible */
html body .voice-widget .w-full.h-full.rounded-full.overflow-hidden,
html body *[class*="voice-widget"] .w-full.h-full.rounded-full.overflow-hidden {
  border-radius: 50% !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Ensure images inside rounded containers inherit border radius */
html body .voice-widget .rounded-full.overflow-hidden img,
html body *[class*="voice-widget"] .rounded-full.overflow-hidden img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: inherit !important;
}

/* Images with specific size classes matching widget structure */
html body .voice-widget .w-full.h-full img,
html body .voice-widget [class*="w-"][class*="100px"] img,
html body .voice-widget [class*="h-"][class*="100px"] img,
html body *[class*="voice-widget"] .w-full.h-full img,
html body *[class*="voice-widget"] [class*="w-"][class*="100px"] img,
html body *[class*="voice-widget"] [class*="h-"][class*="100px"] img {
  width: 100% !important;
  height: 100% !important;
}

/* Avatar container styling with proper dimensions */
html body .voice-widget [class*="w-"][class*="100px"][class*="h-"][class*="100px"].relative,
html body *[class*="voice-widget"] [class*="w-"][class*="100px"][class*="h-"][class*="100px"].relative {
  width: 100px !important;
  height: 100px !important;
  position: relative !important;
  flex-shrink: 0 !important;
}

/* Fix specific logo container structure */
html body .voice-widget .flex-shrink-0 > [class*="w-"][class*="100px"][class*="h-"][class*="100px"],
html body *[class*="voice-widget"] .flex-shrink-0 > [class*="w-"][class*="100px"][class*="h-"][class*="100px"] {
  display: block !important;
  width: 100px !important;
  height: 100px !important;
}

/* Force avatar images to be circular with proper object-fit */
html body .voice-widget .flex-shrink-0 img[alt*="avatar"],
html body .voice-widget .flex-shrink-0 img[alt*="Avatar"],
html body *[class*="voice-widget"] .flex-shrink-0 img[alt*="avatar"],
html body *[class*="voice-widget"] .flex-shrink-0 img[alt*="Avatar"] {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block !important;
}

/* Image containers with box shadow styling */
html body .voice-widget [style*="boxShadow"] img,
html body .voice-widget [style*="box-shadow"] img,
html body *[class*="voice-widget"] [style*="boxShadow"] img,
html body *[class*="voice-widget"] [style*="box-shadow"] img {
  border-radius: inherit !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* Image filter and rendering enhancements */
html body .voice-widget img[style*="imageRendering"],
html body .voice-widget img[style*="filter"],
html body *[class*="voice-widget"] img[style*="imageRendering"],
html body *[class*="voice-widget"] img[style*="filter"] {
  image-rendering: crisp-edges !important;
  filter: contrast(1.05) saturate(1.1) !important;
}

/* Headings */
html body .voice-widget h1,
html body .voice-widget h2,
html body .voice-widget h3,
html body .voice-widget h4,
html body .voice-widget h5,
html body .voice-widget h6,
html body *[class*="voice-widget"] h1,
html body *[class*="voice-widget"] h2,
html body *[class*="voice-widget"] h3,
html body *[class*="voice-widget"] h4,
html body *[class*="voice-widget"] h5,
html body *[class*="voice-widget"] h6,
.voice-widget h1,
.voice-widget h2,
.voice-widget h3,
.voice-widget h4,
.voice-widget h5,
.voice-widget h6,
*[class*="voice-widget"] h1,
*[class*="voice-widget"] h2,
*[class*="voice-widget"] h3,
*[class*="voice-widget"] h4,
*[class*="voice-widget"] h5,
*[class*="voice-widget"] h6 {
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: inherit !important;
}

/* Paragraphs - Enhanced with style attribute support */
html body .voice-widget p,
html body *[class*="voice-widget"] p {
  line-height: 1.625 !important;
  color: inherit !important;
}

/* Paragraphs with inline style color */
html body .voice-widget p[style*="color"],
html body *[class*="voice-widget"] p[style*="color"] {
  /* Allow inline style to override, but ensure other properties */
  line-height: 1.625 !important;
}

/* Specific paragraph classes in voice widget */
html body .voice-widget p.text-base,
html body .voice-widget p.text-base.lg\\:text-lg,
html body *[class*="voice-widget"] p.text-base,
html body *[class*="voice-widget"] p.text-base.lg\\:text-lg {
  font-size: 1rem !important;
  line-height: 1.5rem !important;
}

/* Paragraph with leading-relaxed class */
html body .voice-widget p.leading-relaxed,
html body *[class*="voice-widget"] p.leading-relaxed {
  line-height: 1.625 !important;
}

/* Paragraph with max-width utility */
html body .voice-widget p[class*="max-w-"],
html body *[class*="voice-widget"] p[class*="max-w-"] {
  line-height: 1.625 !important;
  color: inherit !important;
}

/* Responsive paragraph text size */
@media (min-width: 1024px) {
  html body .voice-widget p.text-base.lg\\:text-lg,
  html body *[class*="voice-widget"] p.text-base.lg\\:text-lg {
    font-size: 1.125rem !important;
    line-height: 1.75rem !important;
  }
}

/* Responsive Design */
@media (min-width: 640px) {
  html body .voice-widget,
  html body *[class*="voice-widget"],
  .voice-widget,
  *[class*="voice-widget"] {
    max-width: 1200px !important;
    padding: 2rem !important;
    text-align: left !important;
  }
  
  html body .voice-widget [class*="sm:max-w-"],
  html body *[class*="voice-widget"] [class*="sm:max-w-"],
  .voice-widget [class*="sm:max-w-"],
  *[class*="voice-widget"] [class*="sm:max-w-"] { max-width: 1200px !important; }
  
  html body .voice-widget [class*="sm:p-8"],
  html body *[class*="voice-widget"] [class*="sm:p-8"],
  .voice-widget [class*="sm:p-8"],
  *[class*="voice-widget"] [class*="sm:p-8"] { padding: 2rem !important; }
}

@media (min-width: 1024px) {
  html body .voice-widget,
  html body *[class*="voice-widget"],
  .voice-widget,
  *[class*="voice-widget"] {
    padding: 2.5rem 60px !important;
  }
  
  html body .voice-widget.flex[class*="lg:flex-row"],
  html body .voice-widget.flex-col[class*="lg:flex-row"],
  html body *[class*="voice-widget"].flex[class*="lg:flex-row"],
  html body *[class*="voice-widget"].flex-col[class*="lg:flex-row"] { flex-direction: row !important; }
  
  html body .voice-widget [class*="lg:text-left"],
  html body *[class*="voice-widget"] [class*="lg:text-left"],
  .voice-widget [class*="lg:text-left"],
  *[class*="voice-widget"] [class*="lg:text-left"] { text-align: left !important; }
  
  html body .voice-widget [class*="lg:text-lg"],
  html body *[class*="voice-widget"] [class*="lg:text-lg"],
  .voice-widget [class*="lg:text-lg"],
  *[class*="voice-widget"] [class*="lg:text-lg"] { font-size: 1.125rem !important; line-height: 1.75rem !important; }
  
  html body .voice-widget [class*="lg:text-3xl"],
  html body *[class*="voice-widget"] [class*="lg:text-3xl"],
  .voice-widget [class*="lg:text-3xl"],
  *[class*="voice-widget"] [class*="lg:text-3xl"] { font-size: 1.875rem !important; line-height: 2.25rem !important; }
  
  html body .voice-widget [class*="lg:px-"][class*="60px"],
  html body *[class*="voice-widget"] [class*="lg:px-"][class*="60px"],
  .voice-widget [class*="lg:px-"][class*="60px"],
  *[class*="voice-widget"] [class*="lg:px-"][class*="60px"] { padding-left: 60px !important; padding-right: 60px !important; }
  
  html body .voice-widget [class*="lg:py-10"],
  html body *[class*="voice-widget"] [class*="lg:py-10"],
  .voice-widget [class*="lg:py-10"],
  *[class*="voice-widget"] [class*="lg:py-10"] { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  
  html body .voice-widget.flex[class*="lg:gap-10"],
  html body .voice-widget.flex-col[class*="lg:gap-10"],
  html body .voice-widget.flex-row[class*="lg:gap-10"],
  html body *[class*="voice-widget"].flex[class*="lg:gap-10"],
  html body *[class*="voice-widget"].flex-col[class*="lg:gap-10"],
  html body *[class*="voice-widget"].flex-row[class*="lg:gap-10"] { gap: 2.5rem !important; }
  
  html body .voice-widget.flex [class*="lg:gap-10"],
  html body .voice-widget.flex-col [class*="lg:gap-10"],
  html body .voice-widget.flex-row [class*="lg:gap-10"],
  html body *[class*="voice-widget"].flex [class*="lg:gap-10"],
  html body *[class*="voice-widget"].flex-col [class*="lg:gap-10"],
  html body *[class*="voice-widget"].flex-row [class*="lg:gap-10"] { gap: 2.5rem !important; }
  
  html body .voice-widget [class*="lg:mb-2"],
  html body *[class*="voice-widget"] [class*="lg:mb-2"],
  .voice-widget [class*="lg:mb-2"],
  *[class*="voice-widget"] [class*="lg:mb-2"] { margin-bottom: 0.5rem !important; }
  
  html body .voice-widget.flex[class*="lg:items-end"],
  html body .voice-widget.flex-col[class*="lg:items-end"],
  html body .voice-widget.flex-row[class*="lg:items-end"],
  html body *[class*="voice-widget"].flex[class*="lg:items-end"],
  html body *[class*="voice-widget"].flex-col[class*="lg:items-end"],
  html body *[class*="voice-widget"].flex-row[class*="lg:items-end"] { align-items: flex-end !important; }
  
  html body .voice-widget.flex [class*="lg:items-end"],
  html body .voice-widget.flex-col [class*="lg:items-end"],
  html body .voice-widget.flex-row [class*="lg:items-end"],
  html body *[class*="voice-widget"].flex [class*="lg:items-end"],
  html body *[class*="voice-widget"].flex-col [class*="lg:items-end"],
  html body *[class*="voice-widget"].flex-row [class*="lg:items-end"] { align-items: flex-end !important; }
}

/* Original VoiceWidget.css responsive overrides */
@media (max-width: 1024px) {
  html body .voice-widget,
  html body *[class*="voice-widget"],
  .voice-widget,
  *[class*="voice-widget"] {
    padding: 30px 40px !important;
  }
}

@media (max-width: 640px) {
  html body .voice-widget,
  html body *[class*="voice-widget"],
  .voice-widget,
  *[class*="voice-widget"] {
    text-align: center !important;
    padding: 20px !important;
    max-width: 400px !important;
    margin: 0 auto !important;
  }
  
  html body .voice-widget button:not(.w-12):not(.w-14):not(.w-8),
  html body *[class*="voice-widget"] button:not([class*="w-12"]):not([class*="w-14"]):not([class*="w-8"]),
  .voice-widget button:not(.w-12):not(.w-14):not(.w-8),
  *[class*="voice-widget"] button:not([class*="w-12"]):not([class*="w-14"]):not([class*="w-8"]) {
    padding: 12px 20px !important;
  }
}

@media (max-width: 380px) {
  html body .voice-widget,
  html body *[class*="voice-widget"],
  .voice-widget,
  *[class*="voice-widget"] {
    padding: 25px 15px !important;
  }
  
  html body .voice-widget h2,
  html body *[class*="voice-widget"] h2,
  .voice-widget h2,
  *[class*="voice-widget"] h2 {
    font-size: 22px !important;
  }
  
  html body .voice-widget p,
  html body *[class*="voice-widget"] p,
  .voice-widget p,
  *[class*="voice-widget"] p {
    font-size: 14px !important;
  }
}