@cuekit-ai/react 1.2.2 → 1.3.0

package/dist/cuekit.css

@@ -1,330 +1,8 @@
-/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */
-@layer properties;
-@layer theme, base, components, utilities;
-@layer theme {
-  :root, :host {
-    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
-      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
-      "Courier New", monospace;
-    --color-black: #000;
-    --color-white: #fff;
-    --spacing: 0.25rem;
-    --text-4xl: 2.25rem;
-    --text-4xl--line-height: calc(2.5 / 2.25);
-    --text-7xl: 4.5rem;
-    --text-7xl--line-height: 1;
-    --font-weight-bold: 700;
-    --radius-lg: 0.5rem;
-    --ease-out: cubic-bezier(0, 0, 0.2, 1);
-    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
-    --default-transition-duration: 150ms;
-    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    --default-font-family: var(--font-sans);
-    --default-mono-font-family: var(--font-mono);
-  }
-}
-@layer base {
-  *, ::after, ::before, ::backdrop, ::file-selector-button {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    border: 0 solid;
-  }
-  html, :host {
-    line-height: 1.5;
-    -webkit-text-size-adjust: 100%;
-    tab-size: 4;
-    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
-    font-feature-settings: var(--default-font-feature-settings, normal);
-    font-variation-settings: var(--default-font-variation-settings, normal);
-    -webkit-tap-highlight-color: transparent;
-  }
-  hr {
-    height: 0;
-    color: inherit;
-    border-top-width: 1px;
-  }
-  abbr:where([title]) {
-    -webkit-text-decoration: underline dotted;
-    text-decoration: underline dotted;
-  }
-  h1, h2, h3, h4, h5, h6 {
-    font-size: inherit;
-    font-weight: inherit;
-  }
-  a {
-    color: inherit;
-    -webkit-text-decoration: inherit;
-    text-decoration: inherit;
-  }
-  b, strong {
-    font-weight: bolder;
-  }
-  code, kbd, samp, pre {
-    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
-    font-feature-settings: var(--default-mono-font-feature-settings, normal);
-    font-variation-settings: var(--default-mono-font-variation-settings, normal);
-    font-size: 1em;
-  }
-  small {
-    font-size: 80%;
-  }
-  sub, sup {
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
-  }
-  sub {
-    bottom: -0.25em;
-  }
-  sup {
-    top: -0.5em;
-  }
-  table {
-    text-indent: 0;
-    border-color: inherit;
-    border-collapse: collapse;
-  }
-  :-moz-focusring {
-    outline: auto;
-  }
-  progress {
-    vertical-align: baseline;
-  }
-  summary {
-    display: list-item;
-  }
-  ol, ul, menu {
-    list-style: none;
-  }
-  img, svg, video, canvas, audio, iframe, embed, object {
-    display: block;
-    vertical-align: middle;
-  }
-  img, video {
-    max-width: 100%;
-    height: auto;
-  }
-  button, input, select, optgroup, textarea, ::file-selector-button {
-    font: inherit;
-    font-feature-settings: inherit;
-    font-variation-settings: inherit;
-    letter-spacing: inherit;
-    color: inherit;
-    border-radius: 0;
-    background-color: transparent;
-    opacity: 1;
-  }
-  :where(select:is([multiple], [size])) optgroup {
-    font-weight: bolder;
-  }
-  :where(select:is([multiple], [size])) optgroup option {
-    padding-inline-start: 20px;
-  }
-  ::file-selector-button {
-    margin-inline-end: 4px;
-  }
-  ::placeholder {
-    opacity: 1;
-  }
-  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
-    ::placeholder {
-      color: currentcolor;
-      @supports (color: color-mix(in lab, red, red)) {
-        color: color-mix(in oklab, currentcolor 50%, transparent);
-      }
-    }
-  }
-  textarea {
-    resize: vertical;
-  }
-  ::-webkit-search-decoration {
-    -webkit-appearance: none;
-  }
-  ::-webkit-date-and-time-value {
-    min-height: 1lh;
-    text-align: inherit;
-  }
-  ::-webkit-datetime-edit {
-    display: inline-flex;
-  }
-  ::-webkit-datetime-edit-fields-wrapper {
-    padding: 0;
-  }
-  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
-    padding-block: 0;
-  }
-  ::-webkit-calendar-picker-indicator {
-    line-height: 1;
-  }
-  :-moz-ui-invalid {
-    box-shadow: none;
-  }
-  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
-    appearance: button;
-  }
-  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
-    height: auto;
-  }
-  [hidden]:where(:not([hidden="until-found"])) {
-    display: none !important;
-  }
-}
-@layer utilities {
-  .absolute {
-    position: absolute;
-  }
-  .fixed {
-    position: fixed;
-  }
-  .relative {
-    position: relative;
-  }
-  .z-10 {
-    z-index: 10;
-  }
-  .container {
-    width: 100%;
-    @media (width >= 40rem) {
-      max-width: 40rem;
-    }
-    @media (width >= 48rem) {
-      max-width: 48rem;
-    }
-    @media (width >= 64rem) {
-      max-width: 64rem;
-    }
-    @media (width >= 80rem) {
-      max-width: 80rem;
-    }
-    @media (width >= 96rem) {
-      max-width: 96rem;
-    }
-  }
-  .flex {
-    display: flex;
-  }
-  .hidden {
-    display: none;
-  }
-  .inline-block {
-    display: inline-block;
-  }
-  .min-h-4 {
-    min-height: calc(var(--spacing) * 4);
-  }
-  .w-4 {
-    width: calc(var(--spacing) * 4);
-  }
-  .origin-center {
-    transform-origin: center;
-  }
-  .transform {
-    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
-  }
-  .items-center {
-    align-items: center;
-  }
-  .justify-center {
-    justify-content: center;
-  }
-  .gap-1 {
-    gap: calc(var(--spacing) * 1);
-  }
-  .rounded-full {
-    border-radius: calc(infinity * 1px);
-  }
-  .rounded-lg {
-    border-radius: var(--radius-lg);
-  }
-  .border {
-    border-style: var(--tw-border-style);
-    border-width: 1px;
-  }
-  .px-2 {
-    padding-inline: calc(var(--spacing) * 2);
-  }
-  .pt-2 {
-    padding-top: calc(var(--spacing) * 2);
-  }
-  .pb-3 {
-    padding-bottom: calc(var(--spacing) * 3);
-  }
-  .text-center {
-    text-align: center;
-  }
-  .text-left {
-    text-align: left;
-  }
-  .text-4xl {
-    font-size: var(--text-4xl);
-    line-height: var(--tw-leading, var(--text-4xl--line-height));
-  }
-  .font-bold {
-    --tw-font-weight: var(--font-weight-bold);
-    font-weight: var(--font-weight-bold);
-  }
-  .whitespace-nowrap {
-    white-space: nowrap;
-  }
-  .text-black {
-    color: var(--color-black);
-  }
-  .italic {
-    font-style: italic;
-  }
-  .shadow {
-    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-  .outline {
-    outline-style: var(--tw-outline-style);
-    outline-width: 1px;
-  }
-  .filter {
-    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
-  }
-  .transition {
-    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
-  .transition-colors {
-    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
-  .duration-250 {
-    --tw-duration: 250ms;
-    transition-duration: 250ms;
-  }
-  .ease-in-out {
-    --tw-ease: var(--ease-in-out);
-    transition-timing-function: var(--ease-in-out);
-  }
-  .ease-linear {
-    --tw-ease: linear;
-    transition-timing-function: linear;
-  }
-  .ease-out {
-    --tw-ease: var(--ease-out);
-    transition-timing-function: var(--ease-out);
-  }
-  .md\:text-7xl {
-    @media (width >= 48rem) {
-      font-size: var(--text-7xl);
-      line-height: var(--tw-leading, var(--text-7xl--line-height));
-    }
-  }
-  .dark\:text-white {
-    @media (prefers-color-scheme: dark) {
-      color: var(--color-white);
-    }
-  }
-}
+/* CueKit Voice Chat Popup Theme - Scoped to popup only */
+
+/* Global CSS Variables for CueKit */
 :root {
+  /* Light theme (default) */
   --voice-bg: 0 0% 100%;
   --voice-surface: 0 0% 100%;
   --voice-border: 214.3 31.8% 91.4%;
@@ -338,11 +16,17 @@
   --voice-ai-text: 222.2 84% 4.9%;
   --indicator-bg: 200 98% 39%;
   --voice-placeholder: 215.4 16.3% 46.9%;
+
+  /* Gradients Light */
   --gradient-primary: linear-gradient(135deg, hsl(200 98% 39%), hsl(200 98% 50%));
   --gradient-surface: linear-gradient(180deg, hsl(0 0% 100%), hsl(210 40% 98%));
+
+  /* Shadows Light */
   --shadow-soft: 0 4px 20px -2px hsl(200 98% 39% / 0.1);
   --shadow-card: 0 10px 40px -10px hsl(0 0% 0% / 0.05);
 }
+
+/* Dark theme variables */
 @media (prefers-color-scheme: dark) {
   :root {
     --voice-bg: 211 32% 11%;
@@ -358,13 +42,19 @@
     --voice-ai-text: 0 0% 100%;
     --indicator-bg: 200.12 80.39% 60%;
     --voice-placeholder: 215 20.2% 65.1%;
+
+    /* Gradients Dark */
     --gradient-primary: linear-gradient(135deg, hsl(200 98% 60%), hsl(200 98% 70%));
     --gradient-surface: linear-gradient(180deg, hsl(217.2 32.6% 17.5%), hsl(211 32% 11%));
+
+    /* Shadows Dark */
     --shadow-soft: 0 4px 20px -2px hsl(200 98% 60% / 0.2);
     --shadow-card: 0 10px 40px -10px hsl(0 0% 0% / 0.3);
   }
 }
+
 .cuekit-voice-popup.cuekit-dark {
+  /* Dark theme */
   --voice-bg: 211 32% 11%;
   --voice-surface: 217.2 32.6% 17.5%;
   --voice-border: 217.2 32.6% 17.5%;
@@ -378,11 +68,17 @@
   --voice-ai-text: 0 0% 100%;
   --indicator-bg: 200.12 80.39% 60%;
   --voice-placeholder: 215 20.2% 65.1%;
+
+  /* Gradients Dark */
   --gradient-primary: linear-gradient(135deg, hsl(200 98% 60%), hsl(200 98% 70%));
   --gradient-surface: linear-gradient(180deg, hsl(217.2 32.6% 17.5%), hsl(211 32% 11%));
+
+  /* Shadows Dark */
   --shadow-soft: 0 4px 20px -2px hsl(200 98% 60% / 0.2);
   --shadow-card: 0 10px 40px -10px hsl(0 0% 0% / 0.3);
 }
+
+/* Animations */
 @keyframes slideUp {
   0% {
     transform: translateY(100%);
@@ -391,6 +87,7 @@
     transform: translateY(0);
   }
 }
+
 @keyframes slideInUp {
   0% {
     transform: translateY(100%);
@@ -399,6 +96,7 @@
     transform: translateY(0);
   }
 }
+
 @keyframes pulse {
   0%,
   100% {
@@ -408,6 +106,7 @@
     opacity: 0.5;
   }
 }
+
 @keyframes ping {
   75%,
   100% {
@@ -415,6 +114,7 @@
     opacity: 0;
   }
 }
+
 @keyframes bounce {
   0%,
   100% {
@@ -426,6 +126,7 @@
     animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
   }
 }
+
 @keyframes spin {
   from {
     transform: rotate(0deg);
@@ -434,6 +135,7 @@
     transform: rotate(360deg);
   }
 }
+
 @keyframes equalize {
   0% {
     transform: scaleY(0.3);
@@ -454,15 +156,21 @@
     transform: scaleY(0.7);
   }
 }
+
+/* Placeholder styles */
 input::placeholder {
   color: hsl(var(--voice-placeholder));
 }
+
+/* Theme toggle animations */
 .theme-toggle-enter {
   animation: themeToggleEnter 0.3s ease-in-out;
 }
+
 .theme-toggle-exit {
   animation: themeToggleExit 0.3s ease-in-out;
 }
+
 @keyframes themeToggleEnter {
   0% {
     transform: scale(0.8) rotate(-180deg);
@@ -473,6 +181,7 @@ input::placeholder {
     opacity: 1;
   }
 }
+
 @keyframes themeToggleExit {
   0% {
     transform: scale(1) rotate(0deg);
@@ -483,6 +192,8 @@ input::placeholder {
     opacity: 0;
   }
 }
+
+/* Message animations */
 @keyframes bubbleIn {
   0% {
     opacity: 0;
@@ -493,6 +204,7 @@ input::placeholder {
     transform: translateY(0);
   }
 }
+
 @keyframes scaleIn {
   0% {
     transform: scale(0.95);
@@ -501,6 +213,8 @@ input::placeholder {
     transform: scale(1);
   }
 }
+
+/* FlipWords animations */
 @keyframes flipWordEnter {
   0% {
     opacity: 0;
@@ -511,6 +225,7 @@ input::placeholder {
     transform: translateY(0);
   }
 }
+
 @keyframes flipWordExit {
   0% {
     opacity: 1;
@@ -524,6 +239,7 @@ input::placeholder {
     position: absolute;
   }
 }
+
 @keyframes letterAppear {
   0% {
     opacity: 0;
@@ -536,18 +252,23 @@ input::placeholder {
     filter: blur(0px);
   }
 }
+
 .animate-flip-word-enter {
   animation: flipWordEnter 0.3s ease-out forwards;
 }
+
 .animate-flip-word-exit {
   animation: flipWordExit 0.3s ease-out forwards;
 }
+
 .animate-letter-appear {
   animation: letterAppear 0.2s ease-out forwards;
 }
+
 .animate-letter-appear-container {
   animation: letterAppearContainer 0.3s ease-out forwards;
 }
+
 @keyframes letterAppearContainer {
   0% {
     opacity: 0;
@@ -558,6 +279,7 @@ input::placeholder {
     filter: blur(0px);
   }
 }
+
 @keyframes micStateChange {
   0% {
     opacity: 0;
@@ -570,18 +292,25 @@ input::placeholder {
     filter: blur(0px);
   }
 }
+
+/* LiveKit BarVisualizer Support Classes */
 .bg-muted {
-  background-color: rgba(255, 255, 255, 0.85) !important;
+  background-color: rgba(255, 255, 255, 0.85) !important; /* White dots */
 }
+
 .bg-foreground {
-  background-color: rgba(255, 255, 255, 1) !important;
+  background-color: rgba(255, 255, 255, 1) !important; /* Bright white for highlighted */
 }
+
 .data-\[lk-highlighted\=true\]\:bg-foreground[data-lk-highlighted='true'] {
   background-color: rgba(255, 255, 255, 1) !important;
 }
+
 .data-\[lk-muted\=true\]\:bg-muted[data-lk-muted='true'] {
   background-color: rgba(255, 255, 255, 0.85) !important;
 }
+
+/* Voice Intensity Visualizer - Scale with mic button */
 .voice-intensity-visualizer {
   position: absolute;
   inset: 0;
@@ -590,228 +319,52 @@ input::placeholder {
   justify-content: center;
   pointer-events: none;
 }
+
+/* Make bars scale with container size */
 .voice-intensity-visualizer .lk-audio-bar-visualizer {
   width: 100% !important;
   height: 100% !important;
-  gap: 2px !important;
+  gap: 2px !important; /* Smaller gap for 4 dots */
 }
+
+/* Individual bar styling - Rectangular bars with rounded ends */
 .voice-intensity-visualizer .lk-audio-bar {
   background-color: rgba(255, 255, 255, 0.85) !important;
-  border-radius: 3px !important;
-  min-width: 6px !important;
-  min-height: 6px !important;
-  transition: height 0.1s ease-out !important;
+  border-radius: 3px !important; /* Rounded ends, not full circles */
+  min-width: 6px !important; /* Fixed width */
+  min-height: 6px !important; /* Minimum height */
+  transition: height 0.1s ease-out !important; /* Smooth height animation */
 }
+
+/* Ensure proper spacing for 4 dots */
 .voice-intensity-visualizer .lk-audio-bar-visualizer {
   width: 100% !important;
   height: 100% !important;
-  gap: 4px !important;
+  gap: 4px !important; /* Larger gap for bigger dots */
   justify-content: center !important;
   align-items: center !important;
 }
+
+/* Smooth transitions for voice bars */
 .voice-intensity-visualizer > div {
   will-change: height, opacity, transform;
 }
-@property --tw-rotate-x {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-rotate-y {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-rotate-z {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-skew-x {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-skew-y {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-@property --tw-font-weight {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-shadow-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-shadow-alpha {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
-@property --tw-inset-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-inset-shadow-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-inset-shadow-alpha {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
-@property --tw-ring-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-ring-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-inset-ring-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-inset-ring-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-ring-inset {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-ring-offset-width {
-  syntax: "<length>";
-  inherits: false;
-  initial-value: 0px;
-}
-@property --tw-ring-offset-color {
-  syntax: "*";
-  inherits: false;
-  initial-value: #fff;
-}
-@property --tw-ring-offset-shadow {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0 0 #0000;
-}
-@property --tw-outline-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-@property --tw-blur {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-brightness {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-contrast {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-grayscale {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-hue-rotate {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-invert {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-opacity {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-saturate {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-sepia {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-drop-shadow {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-drop-shadow-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-drop-shadow-alpha {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
-@property --tw-drop-shadow-size {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-duration {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-ease {
-  syntax: "*";
-  inherits: false;
-}
-@layer properties {
-  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
-    *, ::before, ::after, ::backdrop {
-      --tw-rotate-x: initial;
-      --tw-rotate-y: initial;
-      --tw-rotate-z: initial;
-      --tw-skew-x: initial;
-      --tw-skew-y: initial;
-      --tw-border-style: solid;
-      --tw-font-weight: initial;
-      --tw-shadow: 0 0 #0000;
-      --tw-shadow-color: initial;
-      --tw-shadow-alpha: 100%;
-      --tw-inset-shadow: 0 0 #0000;
-      --tw-inset-shadow-color: initial;
-      --tw-inset-shadow-alpha: 100%;
-      --tw-ring-color: initial;
-      --tw-ring-shadow: 0 0 #0000;
-      --tw-inset-ring-color: initial;
-      --tw-inset-ring-shadow: 0 0 #0000;
-      --tw-ring-inset: initial;
-      --tw-ring-offset-width: 0px;
-      --tw-ring-offset-color: #fff;
-      --tw-ring-offset-shadow: 0 0 #0000;
-      --tw-outline-style: solid;
-      --tw-blur: initial;
-      --tw-brightness: initial;
-      --tw-contrast: initial;
-      --tw-grayscale: initial;
-      --tw-hue-rotate: initial;
-      --tw-invert: initial;
-      --tw-opacity: initial;
-      --tw-saturate: initial;
-      --tw-sepia: initial;
-      --tw-drop-shadow: initial;
-      --tw-drop-shadow-color: initial;
-      --tw-drop-shadow-alpha: 100%;
-      --tw-drop-shadow-size: initial;
-      --tw-duration: initial;
-      --tw-ease: initial;
-    }
-  }
+
+.cuekit-voice-intensity-bar {
+  background-color: hsl(var(--voice-text-muted));
+  min-height: 1rem;
+  width: 1rem;
+  border-radius: 9999px;
+  transform-origin: center;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 250ms;
+}
+
+.cuekit-voice-intensity-bar[data-lk-highlighted='true'] {
+  background-color: hsl(var(--voice-text));
+}
+
+.cuekit-voice-intensity-bar[data-lk-muted='true'] {
+  background-color: hsl(var(--voice-text-muted));
 }