@wallavi/widget 1.11.0 → 1.11.1

package/dist/index.js

@@ -58,7 +58,7 @@ function styleInject(css, { insertAt } = {}) {
 }
 
 // src/styles.css
-styleInject(".ww-pointer-events-none {\n  pointer-events: none;\n}\n.ww-absolute {\n  position: absolute;\n}\n.ww-relative {\n  position: relative;\n}\n.ww-inset-0 {\n  inset: 0px;\n}\n.ww-inset-4 {\n  inset: 1rem;\n}\n.ww-inset-8 {\n  inset: 2rem;\n}\n.ww-left-2\\.5 {\n  left: 0.625rem;\n}\n.ww-top-1\\/2 {\n  top: 50%;\n}\n.ww-z-50 {\n  z-index: 50;\n}\n.ww-z-\\[100\\] {\n  z-index: 100;\n}\n.ww-mx-0\\.5 {\n  margin-left: 0.125rem;\n  margin-right: 0.125rem;\n}\n.ww-mb-1 {\n  margin-bottom: 0.25rem;\n}\n.ww-mb-12 {\n  margin-bottom: 3rem;\n}\n.ww-mb-2 {\n  margin-bottom: 0.5rem;\n}\n.ww-ml-0\\.5 {\n  margin-left: 0.125rem;\n}\n.ww-ml-1 {\n  margin-left: 0.25rem;\n}\n.ww-mt-0\\.5 {\n  margin-top: 0.125rem;\n}\n.ww-mt-1 {\n  margin-top: 0.25rem;\n}\n.ww-block {\n  display: block;\n}\n.ww-inline-block {\n  display: inline-block;\n}\n.ww-flex {\n  display: flex;\n}\n.ww-inline-flex {\n  display: inline-flex;\n}\n.ww-grid {\n  display: grid;\n}\n.ww-hidden {\n  display: none;\n}\n.ww-h-1\\.5 {\n  height: 0.375rem;\n}\n.ww-h-10 {\n  height: 2.5rem;\n}\n.ww-h-16 {\n  height: 4rem;\n}\n.ww-h-2 {\n  height: 0.5rem;\n}\n.ww-h-2\\.5 {\n  height: 0.625rem;\n}\n.ww-h-20 {\n  height: 5rem;\n}\n.ww-h-3 {\n  height: 0.75rem;\n}\n.ww-h-3\\.5 {\n  height: 0.875rem;\n}\n.ww-h-4 {\n  height: 1rem;\n}\n.ww-h-40 {\n  height: 10rem;\n}\n.ww-h-48 {\n  height: 12rem;\n}\n.ww-h-6 {\n  height: 1.5rem;\n}\n.ww-h-7 {\n  height: 1.75rem;\n}\n.ww-h-8 {\n  height: 2rem;\n}\n.ww-h-full {\n  height: 100%;\n}\n.ww-max-h-32 {\n  max-height: 8rem;\n}\n.ww-max-h-48 {\n  max-height: 12rem;\n}\n.ww-max-h-\\[168px\\] {\n  max-height: 168px;\n}\n.ww-max-h-\\[180px\\] {\n  max-height: 180px;\n}\n.ww-w-0\\.5 {\n  width: 0.125rem;\n}\n.ww-w-1\\.5 {\n  width: 0.375rem;\n}\n.ww-w-10 {\n  width: 2.5rem;\n}\n.ww-w-16 {\n  width: 4rem;\n}\n.ww-w-2 {\n  width: 0.5rem;\n}\n.ww-w-2\\.5 {\n  width: 0.625rem;\n}\n.ww-w-20 {\n  width: 5rem;\n}\n.ww-w-3 {\n  width: 0.75rem;\n}\n.ww-w-3\\.5 {\n  width: 0.875rem;\n}\n.ww-w-4 {\n  width: 1rem;\n}\n.ww-w-48 {\n  width: 12rem;\n}\n.ww-w-6 {\n  width: 1.5rem;\n}\n.ww-w-7 {\n  width: 1.75rem;\n}\n.ww-w-8 {\n  width: 2rem;\n}\n.ww-w-fit {\n  width: -moz-fit-content;\n  width: fit-content;\n}\n.ww-w-full {\n  width: 100%;\n}\n.ww-min-w-0 {\n  min-width: 0px;\n}\n.ww-max-w-\\[120px\\] {\n  max-width: 120px;\n}\n.ww-max-w-\\[200px\\] {\n  max-width: 200px;\n}\n.ww-max-w-\\[78\\%\\] {\n  max-width: 78%;\n}\n.ww-max-w-\\[82\\%\\] {\n  max-width: 82%;\n}\n.ww-max-w-none {\n  max-width: none;\n}\n.ww-flex-1 {\n  flex: 1 1 0%;\n}\n.ww-shrink-0 {\n  flex-shrink: 0;\n}\n.ww-rotate-180 {\n  --tw-rotate: 180deg;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.ww-scale-100 {\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.ww-scale-105 {\n  --tw-scale-x: 1.05;\n  --tw-scale-y: 1.05;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.ww-scale-110 {\n  --tw-scale-x: 1.1;\n  --tw-scale-y: 1.1;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.ww-scale-90 {\n  --tw-scale-x: .9;\n  --tw-scale-y: .9;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n@keyframes ww-ping {\n  75%, 100% {\n    transform: scale(2);\n    opacity: 0;\n  }\n}\n.ww-animate-ping {\n  animation: ww-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;\n}\n@keyframes ww-pulse {\n  50% {\n    opacity: .5;\n  }\n}\n.ww-animate-pulse {\n  animation: ww-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n@keyframes ww-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n.ww-animate-spin {\n  animation: ww-spin 1s linear infinite;\n}\n.ww-cursor-default {\n  cursor: default;\n}\n.ww-cursor-pointer {\n  cursor: pointer;\n}\n.ww-touch-none {\n  touch-action: none;\n}\n.ww-select-none {\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  user-select: none;\n}\n.ww-resize-none {\n  resize: none;\n}\n.ww-grid-cols-2 {\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.ww-flex-col {\n  flex-direction: column;\n}\n.ww-flex-wrap {\n  flex-wrap: wrap;\n}\n.ww-items-start {\n  align-items: flex-start;\n}\n.ww-items-end {\n  align-items: flex-end;\n}\n.ww-items-center {\n  align-items: center;\n}\n.ww-justify-end {\n  justify-content: flex-end;\n}\n.ww-justify-center {\n  justify-content: center;\n}\n.ww-justify-between {\n  justify-content: space-between;\n}\n.ww-gap-0\\.5 {\n  gap: 0.125rem;\n}\n.ww-gap-1 {\n  gap: 0.25rem;\n}\n.ww-gap-1\\.5 {\n  gap: 0.375rem;\n}\n.ww-gap-2 {\n  gap: 0.5rem;\n}\n.ww-gap-2\\.5 {\n  gap: 0.625rem;\n}\n.ww-gap-4 {\n  gap: 1rem;\n}\n.ww-gap-6 {\n  gap: 1.5rem;\n}\n.ww-gap-8 {\n  gap: 2rem;\n}\n.ww-divide-y > :not([hidden]) ~ :not([hidden]) {\n  --tw-divide-y-reverse: 0;\n  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));\n}\n.ww-divide-border\\/40 > :not([hidden]) ~ :not([hidden]) {\n  border-color: hsl(var(--border) / 0.4);\n}\n.ww-overflow-hidden {\n  overflow: hidden;\n}\n.ww-overflow-y-auto {\n  overflow-y: auto;\n}\n.ww-overscroll-contain {\n  overscroll-behavior: contain;\n}\n.ww-overscroll-none {\n  overscroll-behavior: none;\n}\n.ww-truncate {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ww-whitespace-pre-wrap {\n  white-space: pre-wrap;\n}\n.ww-rounded {\n  border-radius: 0.25rem;\n}\n.ww-rounded-2xl {\n  border-radius: 1rem;\n}\n.ww-rounded-full {\n  border-radius: 9999px;\n}\n.ww-rounded-lg {\n  border-radius: var(--radius);\n}\n.ww-rounded-md {\n  border-radius: calc(var(--radius) - 2px);\n}\n.ww-rounded-xl {\n  border-radius: 0.75rem;\n}\n.ww-rounded-tl-none {\n  border-top-left-radius: 0px;\n}\n.ww-rounded-tl-sm {\n  border-top-left-radius: calc(var(--radius) - 4px);\n}\n.ww-rounded-tr-sm {\n  border-top-right-radius: calc(var(--radius) - 4px);\n}\n.ww-border {\n  border-width: 1px;\n}\n.ww-border-2 {\n  border-width: 2px;\n}\n.ww-border-b {\n  border-bottom-width: 1px;\n}\n.ww-border-l-2 {\n  border-left-width: 2px;\n}\n.ww-border-t {\n  border-top-width: 1px;\n}\n.ww-border-background {\n  border-color: hsl(var(--background));\n}\n.ww-border-black\\/10 {\n  border-color: rgb(0 0 0 / 0.1);\n}\n.ww-border-border {\n  border-color: hsl(var(--border));\n}\n.ww-border-border\\/30 {\n  border-color: hsl(var(--border) / 0.3);\n}\n.ww-border-border\\/40 {\n  border-color: hsl(var(--border) / 0.4);\n}\n.ww-border-border\\/50 {\n  border-color: hsl(var(--border) / 0.5);\n}\n.ww-border-border\\/60 {\n  border-color: hsl(var(--border) / 0.6);\n}\n.ww-border-border\\/80 {\n  border-color: hsl(var(--border) / 0.8);\n}\n.ww-border-muted {\n  border-color: hsl(var(--muted));\n}\n.ww-border-muted-foreground\\/30 {\n  border-color: hsl(var(--muted-foreground) / 0.3);\n}\n.ww-border-primary\\/10 {\n  border-color: hsl(var(--primary) / 0.1);\n}\n.ww-border-primary\\/20 {\n  border-color: hsl(var(--primary) / 0.2);\n}\n.ww-border-red-200 {\n  --tw-border-opacity: 1;\n  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));\n}\n.ww-border-transparent {\n  border-color: transparent;\n}\n.ww-border-white\\/20 {\n  border-color: rgb(255 255 255 / 0.2);\n}\n.ww-bg-background {\n  background-color: hsl(var(--background));\n}\n.ww-bg-background\\/20 {\n  background-color: hsl(var(--background) / 0.2);\n}\n.ww-bg-background\\/90 {\n  background-color: hsl(var(--background) / 0.9);\n}\n.ww-bg-background\\/95 {\n  background-color: hsl(var(--background) / 0.95);\n}\n.ww-bg-black\\/10 {\n  background-color: rgb(0 0 0 / 0.1);\n}\n.ww-bg-emerald-400 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1));\n}\n.ww-bg-emerald-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));\n}\n.ww-bg-emerald-500\\/10 {\n  background-color: rgb(16 185 129 / 0.1);\n}\n.ww-bg-emerald-500\\/20 {\n  background-color: rgb(16 185 129 / 0.2);\n}\n.ww-bg-foreground\\/20 {\n  background-color: hsl(var(--foreground) / 0.2);\n}\n.ww-bg-foreground\\/5 {\n  background-color: hsl(var(--foreground) / 0.05);\n}\n.ww-bg-foreground\\/60 {\n  background-color: hsl(var(--foreground) / 0.6);\n}\n.ww-bg-muted {\n  background-color: hsl(var(--muted));\n}\n.ww-bg-muted-foreground\\/10 {\n  background-color: hsl(var(--muted-foreground) / 0.1);\n}\n.ww-bg-muted\\/30 {\n  background-color: hsl(var(--muted) / 0.3);\n}\n.ww-bg-muted\\/40 {\n  background-color: hsl(var(--muted) / 0.4);\n}\n.ww-bg-muted\\/50 {\n  background-color: hsl(var(--muted) / 0.5);\n}\n.ww-bg-muted\\/60 {\n  background-color: hsl(var(--muted) / 0.6);\n}\n.ww-bg-primary {\n  background-color: hsl(var(--primary));\n}\n.ww-bg-primary\\/10 {\n  background-color: hsl(var(--primary) / 0.1);\n}\n.ww-bg-primary\\/5 {\n  background-color: hsl(var(--primary) / 0.05);\n}\n.ww-bg-purple-500\\/20 {\n  background-color: rgb(168 85 247 / 0.2);\n}\n.ww-bg-purple-500\\/30 {\n  background-color: rgb(168 85 247 / 0.3);\n}\n.ww-bg-red-50 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));\n}\n.ww-bg-transparent {\n  background-color: transparent;\n}\n.ww-bg-white\\/10 {\n  background-color: rgb(255 255 255 / 0.1);\n}\n.ww-bg-white\\/15 {\n  background-color: rgb(255 255 255 / 0.15);\n}\n.ww-fill-current {\n  fill: currentColor;\n}\n.ww-object-cover {\n  -o-object-fit: cover;\n  object-fit: cover;\n}\n.ww-p-0\\.5 {\n  padding: 0.125rem;\n}\n.ww-p-1\\.5 {\n  padding: 0.375rem;\n}\n.ww-p-3 {\n  padding: 0.75rem;\n}\n.ww-px-1 {\n  padding-left: 0.25rem;\n  padding-right: 0.25rem;\n}\n.ww-px-2 {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.ww-px-2\\.5 {\n  padding-left: 0.625rem;\n  padding-right: 0.625rem;\n}\n.ww-px-3 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n.ww-px-3\\.5 {\n  padding-left: 0.875rem;\n  padding-right: 0.875rem;\n}\n.ww-px-4 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n.ww-py-0\\.5 {\n  padding-top: 0.125rem;\n  padding-bottom: 0.125rem;\n}\n.ww-py-1 {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n.ww-py-1\\.5 {\n  padding-top: 0.375rem;\n  padding-bottom: 0.375rem;\n}\n.ww-py-2 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n.ww-py-2\\.5 {\n  padding-top: 0.625rem;\n  padding-bottom: 0.625rem;\n}\n.ww-py-3 {\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n}\n.ww-py-4 {\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n}\n.ww-pb-1\\.5 {\n  padding-bottom: 0.375rem;\n}\n.ww-pb-2 {\n  padding-bottom: 0.5rem;\n}\n.ww-pb-4 {\n  padding-bottom: 1rem;\n}\n.ww-pl-2 {\n  padding-left: 0.5rem;\n}\n.ww-pl-7 {\n  padding-left: 1.75rem;\n}\n.ww-pr-0\\.5 {\n  padding-right: 0.125rem;\n}\n.ww-pr-3 {\n  padding-right: 0.75rem;\n}\n.ww-pt-2 {\n  padding-top: 0.5rem;\n}\n.ww-pt-2\\.5 {\n  padding-top: 0.625rem;\n}\n.ww-pt-5 {\n  padding-top: 1.25rem;\n}\n.ww-text-left {\n  text-align: left;\n}\n.ww-text-center {\n  text-align: center;\n}\n.ww-align-middle {\n  vertical-align: middle;\n}\n.ww-text-\\[10\\.5px\\] {\n  font-size: 10.5px;\n}\n.ww-text-\\[10px\\] {\n  font-size: 10px;\n}\n.ww-text-\\[11px\\] {\n  font-size: 11px;\n}\n.ww-text-\\[12\\.5px\\] {\n  font-size: 12.5px;\n}\n.ww-text-\\[13px\\] {\n  font-size: 13px;\n}\n.ww-text-\\[8px\\] {\n  font-size: 8px;\n}\n.ww-text-\\[9px\\] {\n  font-size: 9px;\n}\n.ww-text-sm {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.ww-text-xs {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n.ww-font-medium {\n  font-weight: 500;\n}\n.ww-font-semibold {\n  font-weight: 600;\n}\n.ww-uppercase {\n  text-transform: uppercase;\n}\n.ww-leading-none {\n  line-height: 1;\n}\n.ww-leading-relaxed {\n  line-height: 1.625;\n}\n.ww-leading-snug {\n  line-height: 1.375;\n}\n.ww-leading-tight {\n  line-height: 1.25;\n}\n.ww-tracking-wide {\n  letter-spacing: 0.025em;\n}\n.ww-tracking-wider {\n  letter-spacing: 0.05em;\n}\n.ww-tracking-widest {\n  letter-spacing: 0.1em;\n}\n.ww-text-black\\/40 {\n  color: rgb(0 0 0 / 0.4);\n}\n.ww-text-black\\/60 {\n  color: rgb(0 0 0 / 0.6);\n}\n.ww-text-destructive {\n  color: hsl(var(--destructive));\n}\n.ww-text-destructive\\/70 {\n  color: hsl(var(--destructive) / 0.7);\n}\n.ww-text-emerald-500 {\n  --tw-text-opacity: 1;\n  color: rgb(16 185 129 / var(--tw-text-opacity, 1));\n}\n.ww-text-foreground {\n  color: hsl(var(--foreground));\n}\n.ww-text-foreground\\/60 {\n  color: hsl(var(--foreground) / 0.6);\n}\n.ww-text-foreground\\/70 {\n  color: hsl(var(--foreground) / 0.7);\n}\n.ww-text-foreground\\/80 {\n  color: hsl(var(--foreground) / 0.8);\n}\n.ww-text-muted-foreground {\n  color: hsl(var(--muted-foreground));\n}\n.ww-text-muted-foreground\\/40 {\n  color: hsl(var(--muted-foreground) / 0.4);\n}\n.ww-text-muted-foreground\\/50 {\n  color: hsl(var(--muted-foreground) / 0.5);\n}\n.ww-text-muted-foreground\\/70 {\n  color: hsl(var(--muted-foreground) / 0.7);\n}\n.ww-text-muted-foreground\\/80 {\n  color: hsl(var(--muted-foreground) / 0.8);\n}\n.ww-text-primary {\n  color: hsl(var(--primary));\n}\n.ww-text-primary-foreground {\n  color: hsl(var(--primary-foreground));\n}\n.ww-text-primary\\/70 {\n  color: hsl(var(--primary) / 0.7);\n}\n.ww-text-primary\\/80 {\n  color: hsl(var(--primary) / 0.8);\n}\n.ww-text-red-400 {\n  --tw-text-opacity: 1;\n  color: rgb(248 113 113 / var(--tw-text-opacity, 1));\n}\n.ww-text-red-500 {\n  --tw-text-opacity: 1;\n  color: rgb(239 68 68 / var(--tw-text-opacity, 1));\n}\n.ww-text-red-600 {\n  --tw-text-opacity: 1;\n  color: rgb(220 38 38 / var(--tw-text-opacity, 1));\n}\n.ww-text-white {\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.ww-text-white\\/60 {\n  color: rgb(255 255 255 / 0.6);\n}\n.ww-text-white\\/80 {\n  color: rgb(255 255 255 / 0.8);\n}\n.ww-line-through {\n  text-decoration-line: line-through;\n}\n.ww-no-underline {\n  text-decoration-line: none;\n}\n.ww-decoration-foreground\\/20 {\n  text-decoration-color: hsl(var(--foreground) / 0.2);\n}\n.ww-opacity-100 {\n  opacity: 1;\n}\n.ww-opacity-25 {\n  opacity: 0.25;\n}\n.ww-opacity-30 {\n  opacity: 0.3;\n}\n.ww-opacity-40 {\n  opacity: 0.4;\n}\n.ww-opacity-60 {\n  opacity: 0.6;\n}\n.ww-opacity-70 {\n  opacity: 0.7;\n}\n.ww-opacity-75 {\n  opacity: 0.75;\n}\n.ww-opacity-80 {\n  opacity: 0.8;\n}\n.ww-opacity-90 {\n  opacity: 0.9;\n}\n.ww-shadow-2xl {\n  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);\n  box-shadow:\n    var(--tw-ring-offset-shadow, 0 0 #0000),\n    var(--tw-ring-shadow, 0 0 #0000),\n    var(--tw-shadow);\n}\n.ww-shadow-lg {\n  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n  box-shadow:\n    var(--tw-ring-offset-shadow, 0 0 #0000),\n    var(--tw-ring-shadow, 0 0 #0000),\n    var(--tw-shadow);\n}\n.ww-shadow-md {\n  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n  box-shadow:\n    var(--tw-ring-offset-shadow, 0 0 #0000),\n    var(--tw-ring-shadow, 0 0 #0000),\n    var(--tw-shadow);\n}\n.ww-shadow-sm {\n  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n  box-shadow:\n    var(--tw-ring-offset-shadow, 0 0 #0000),\n    var(--tw-ring-shadow, 0 0 #0000),\n    var(--tw-shadow);\n}\n.ww-shadow-xl {\n  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);\n  box-shadow:\n    var(--tw-ring-offset-shadow, 0 0 #0000),\n    var(--tw-ring-shadow, 0 0 #0000),\n    var(--tw-shadow);\n}\n.ww-outline-none {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n}\n.ww-ring-2 {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow:\n    var(--tw-ring-offset-shadow),\n    var(--tw-ring-shadow),\n    var(--tw-shadow, 0 0 #0000);\n}\n.ww-ring-inset {\n  --tw-ring-inset: inset;\n}\n.ww-ring-primary\\/20 {\n  --tw-ring-color: hsl(var(--primary) / 0.2);\n}\n.ww-ring-primary\\/60 {\n  --tw-ring-color: hsl(var(--primary) / 0.6);\n}\n.ww-backdrop-blur-sm {\n  --tw-backdrop-blur: blur(4px);\n  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n}\n.ww-backdrop-blur-xl {\n  --tw-backdrop-blur: blur(24px);\n  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n}\n.ww-transition-all {\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.ww-transition-colors {\n  transition-property:\n    color,\n    background-color,\n    border-color,\n    text-decoration-color,\n    fill,\n    stroke;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.ww-transition-opacity {\n  transition-property: opacity;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.ww-transition-shadow {\n  transition-property: box-shadow;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.ww-transition-transform {\n  transition-property: transform;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.ww-duration-1000 {\n  transition-duration: 1000ms;\n}\n.ww-duration-150 {\n  transition-duration: 150ms;\n}\n.ww-duration-200 {\n  transition-duration: 200ms;\n}\n.ww-duration-300 {\n  transition-duration: 300ms;\n}\n.ww-duration-500 {\n  transition-duration: 500ms;\n}\n.ww-duration-700 {\n  transition-duration: 700ms;\n}\n@keyframes enter {\n  from {\n    opacity: var(--tw-enter-opacity, 1);\n    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));\n  }\n}\n@keyframes exit {\n  to {\n    opacity: var(--tw-exit-opacity, 1);\n    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));\n  }\n}\n.ww-animate-in {\n  animation-name: enter;\n  animation-duration: 150ms;\n  --tw-enter-opacity: initial;\n  --tw-enter-scale: initial;\n  --tw-enter-rotate: initial;\n  --tw-enter-translate-x: initial;\n  --tw-enter-translate-y: initial;\n}\n.ww-fade-in {\n  --tw-enter-opacity: 0;\n}\n.ww-slide-in-from-top-1 {\n  --tw-enter-translate-y: -0.25rem;\n}\n.ww-duration-1000 {\n  animation-duration: 1000ms;\n}\n.ww-duration-150 {\n  animation-duration: 150ms;\n}\n.ww-duration-200 {\n  animation-duration: 200ms;\n}\n.ww-duration-300 {\n  animation-duration: 300ms;\n}\n.ww-duration-500 {\n  animation-duration: 500ms;\n}\n.ww-duration-700 {\n  animation-duration: 700ms;\n}\n.wallavi-widget *,\n.wallavi-widget *::before,\n.wallavi-widget *::after {\n  box-sizing: border-box;\n  border-width: 0;\n  border-style: solid;\n}\n.wallavi-widget button {\n  -moz-appearance: none;\n  appearance: none;\n  -webkit-appearance: none;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n}\n.wallavi-widget textarea,\n.wallavi-widget input,\n.wallavi-widget select {\n  font-family: inherit;\n  font-size: inherit;\n}\n.wallavi-widget img,\n.wallavi-widget video {\n  max-width: 100%;\n  height: auto;\n}\n.wallavi-widget .lk-control-bar {\n  background: transparent !important;\n  border: none !important;\n  box-shadow: none !important;\n  padding: 0 !important;\n  gap: 1.5rem !important;\n  justify-content: center !important;\n}\n.wallavi-widget .lk-button {\n  background: rgba(25, 25, 28, 0.05) !important;\n  border-radius: 9999px !important;\n  padding: 1.25rem !important;\n  color: var(--ww-fg, #19191c) !important;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;\n  border: 1px solid rgba(25, 25, 28, 0.1) !important;\n}\n.wallavi-widget .lk-button:hover {\n  background: rgba(25, 25, 28, 0.1) !important;\n  transform: scale(1.05) !important;\n}\n.wallavi-widget .lk-disconnect-button {\n  background: #ef4444 !important;\n  color: white !important;\n  border: none !important;\n}\n.wallavi-widget .lk-disconnect-button:hover {\n  background: #dc2626 !important;\n}\n.wallavi-widget .lk-device-menu {\n  bottom: 100% !important;\n  top: auto !important;\n  margin-bottom: 1rem !important;\n  max-width: 250px !important;\n  width: -moz-max-content !important;\n  width: max-content !important;\n  left: 50% !important;\n  transform: translateX(-50%) !important;\n  background: #ffffff !important;\n  border-radius: 16px !important;\n  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15), 0 10px 20px -10px rgba(0, 0, 0, 0.1) !important;\n  z-index: 1000 !important;\n  overflow: hidden !important;\n  border: 1px solid rgba(0, 0, 0, 0.05) !important;\n  padding: 0.5rem !important;\n}\n.wallavi-widget .lk-device-menu > li {\n  padding: 0.75rem 1rem !important;\n  font-size: 0.875rem !important;\n  color: #19191c !important;\n  white-space: nowrap !important;\n  overflow: hidden !important;\n  text-overflow: ellipsis !important;\n  border-radius: 8px !important;\n  transition: background 0.15s !important;\n}\n.wallavi-widget .lk-device-menu > li:hover {\n  background: rgba(0, 0, 0, 0.05) !important;\n}\n.wallavi-widget .lk-device-menu > li.lk-active {\n  background: rgba(0, 0, 0, 0.08) !important;\n  font-weight: 600 !important;\n}\n.placeholder\\:ww-text-muted-foreground\\/40::-moz-placeholder {\n  color: hsl(var(--muted-foreground) / 0.4);\n}\n.placeholder\\:ww-text-muted-foreground\\/40::placeholder {\n  color: hsl(var(--muted-foreground) / 0.4);\n}\n.placeholder\\:ww-text-muted-foreground\\/50::-moz-placeholder {\n  color: hsl(var(--muted-foreground) / 0.5);\n}\n.placeholder\\:ww-text-muted-foreground\\/50::placeholder {\n  color: hsl(var(--muted-foreground) / 0.5);\n}\n.focus-within\\:ww-ring-1:focus-within {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow:\n    var(--tw-ring-offset-shadow),\n    var(--tw-ring-shadow),\n    var(--tw-shadow, 0 0 #0000);\n}\n.focus-within\\:ww-ring-ring\\/40:focus-within {\n  --tw-ring-color: hsl(var(--ring) / 0.4);\n}\n.hover\\:-ww-translate-y-1:hover {\n  --tw-translate-y: -0.25rem;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.hover\\:ww-border-primary\\/40:hover {\n  border-color: hsl(var(--primary) / 0.4);\n}\n.hover\\:ww-bg-accent:hover {\n  background-color: hsl(var(--accent));\n}\n.hover\\:ww-bg-foreground\\/10:hover {\n  background-color: hsl(var(--foreground) / 0.1);\n}\n.hover\\:ww-bg-foreground\\/30:hover {\n  background-color: hsl(var(--foreground) / 0.3);\n}\n.hover\\:ww-bg-muted:hover {\n  background-color: hsl(var(--muted));\n}\n.hover\\:ww-bg-white\\/10:hover {\n  background-color: rgb(255 255 255 / 0.1);\n}\n.hover\\:ww-text-accent-foreground:hover {\n  color: hsl(var(--accent-foreground));\n}\n.hover\\:ww-text-foreground:hover {\n  color: hsl(var(--foreground));\n}\n.hover\\:ww-text-primary:hover {\n  color: hsl(var(--primary));\n}\n.hover\\:ww-opacity-80:hover {\n  opacity: 0.8;\n}\n.hover\\:ww-opacity-85:hover {\n  opacity: 0.85;\n}\n.hover\\:ww-shadow-sm:hover {\n  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n  box-shadow:\n    var(--tw-ring-offset-shadow, 0 0 #0000),\n    var(--tw-ring-shadow, 0 0 #0000),\n    var(--tw-shadow);\n}\n.hover\\:ww-shadow-xl:hover {\n  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);\n  box-shadow:\n    var(--tw-ring-offset-shadow, 0 0 #0000),\n    var(--tw-ring-shadow, 0 0 #0000),\n    var(--tw-shadow);\n}\n.focus\\:ww-ring-1:focus {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow:\n    var(--tw-ring-offset-shadow),\n    var(--tw-ring-shadow),\n    var(--tw-shadow, 0 0 #0000);\n}\n.focus\\:ww-ring-ring\\/40:focus {\n  --tw-ring-color: hsl(var(--ring) / 0.4);\n}\n.active\\:ww-scale-\\[0\\.98\\]:active {\n  --tw-scale-x: 0.98;\n  --tw-scale-y: 0.98;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.disabled\\:ww-pointer-events-none:disabled {\n  pointer-events: none;\n}\n.disabled\\:ww-opacity-40:disabled {\n  opacity: 0.4;\n}\n.disabled\\:ww-opacity-50:disabled {\n  opacity: 0.5;\n}\n.dark\\:ww-border-red-800:is(.ww-dark *) {\n  --tw-border-opacity: 1;\n  border-color: rgb(153 27 27 / var(--tw-border-opacity, 1));\n}\n.dark\\:ww-bg-red-950:is(.ww-dark *) {\n  --tw-bg-opacity: 1;\n  background-color: rgb(69 10 10 / var(--tw-bg-opacity, 1));\n}\n.dark\\:ww-text-red-400:is(.ww-dark *) {\n  --tw-text-opacity: 1;\n  color: rgb(248 113 113 / var(--tw-text-opacity, 1));\n}\n");
+styleInject(".ww-pointer-events-none {\n  pointer-events: none;\n}\n.ww-absolute {\n  position: absolute;\n}\n.ww-relative {\n  position: relative;\n}\n.ww-inset-0 {\n  inset: 0px;\n}\n.ww-inset-4 {\n  inset: 1rem;\n}\n.ww-inset-8 {\n  inset: 2rem;\n}\n.ww-left-2\\.5 {\n  left: 0.625rem;\n}\n.ww-top-1\\/2 {\n  top: 50%;\n}\n.ww-z-50 {\n  z-index: 50;\n}\n.ww-z-\\[100\\] {\n  z-index: 100;\n}\n.ww-mx-0\\.5 {\n  margin-left: 0.125rem;\n  margin-right: 0.125rem;\n}\n.ww-mb-1 {\n  margin-bottom: 0.25rem;\n}\n.ww-mb-12 {\n  margin-bottom: 3rem;\n}\n.ww-mb-2 {\n  margin-bottom: 0.5rem;\n}\n.ww-ml-0\\.5 {\n  margin-left: 0.125rem;\n}\n.ww-ml-1 {\n  margin-left: 0.25rem;\n}\n.ww-mt-0\\.5 {\n  margin-top: 0.125rem;\n}\n.ww-mt-1 {\n  margin-top: 0.25rem;\n}\n.ww-mt-2 {\n  margin-top: 0.5rem;\n}\n.ww-line-clamp-2 {\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n}\n.ww-block {\n  display: block;\n}\n.ww-inline-block {\n  display: inline-block;\n}\n.ww-flex {\n  display: flex;\n}\n.ww-inline-flex {\n  display: inline-flex;\n}\n.ww-grid {\n  display: grid;\n}\n.ww-hidden {\n  display: none;\n}\n.ww-h-1\\.5 {\n  height: 0.375rem;\n}\n.ww-h-10 {\n  height: 2.5rem;\n}\n.ww-h-16 {\n  height: 4rem;\n}\n.ww-h-2 {\n  height: 0.5rem;\n}\n.ww-h-2\\.5 {\n  height: 0.625rem;\n}\n.ww-h-20 {\n  height: 5rem;\n}\n.ww-h-3 {\n  height: 0.75rem;\n}\n.ww-h-3\\.5 {\n  height: 0.875rem;\n}\n.ww-h-4 {\n  height: 1rem;\n}\n.ww-h-40 {\n  height: 10rem;\n}\n.ww-h-48 {\n  height: 12rem;\n}\n.ww-h-6 {\n  height: 1.5rem;\n}\n.ww-h-7 {\n  height: 1.75rem;\n}\n.ww-h-8 {\n  height: 2rem;\n}\n.ww-h-full {\n  height: 100%;\n}\n.ww-max-h-32 {\n  max-height: 8rem;\n}\n.ww-max-h-48 {\n  max-height: 12rem;\n}\n.ww-max-h-\\[168px\\] {\n  max-height: 168px;\n}\n.ww-max-h-\\[180px\\] {\n  max-height: 180px;\n}\n.ww-min-h-\\[22px\\] {\n  min-height: 22px;\n}\n.ww-w-0\\.5 {\n  width: 0.125rem;\n}\n.ww-w-1\\.5 {\n  width: 0.375rem;\n}\n.ww-w-10 {\n  width: 2.5rem;\n}\n.ww-w-16 {\n  width: 4rem;\n}\n.ww-w-2 {\n  width: 0.5rem;\n}\n.ww-w-2\\.5 {\n  width: 0.625rem;\n}\n.ww-w-20 {\n  width: 5rem;\n}\n.ww-w-3 {\n  width: 0.75rem;\n}\n.ww-w-3\\.5 {\n  width: 0.875rem;\n}\n.ww-w-4 {\n  width: 1rem;\n}\n.ww-w-48 {\n  width: 12rem;\n}\n.ww-w-6 {\n  width: 1.5rem;\n}\n.ww-w-7 {\n  width: 1.75rem;\n}\n.ww-w-8 {\n  width: 2rem;\n}\n.ww-w-\\[280px\\] {\n  width: 280px;\n}\n.ww-w-fit {\n  width: -moz-fit-content;\n  width: fit-content;\n}\n.ww-w-full {\n  width: 100%;\n}\n.ww-min-w-0 {\n  min-width: 0px;\n}\n.ww-max-w-\\[120px\\] {\n  max-width: 120px;\n}\n.ww-max-w-\\[200px\\] {\n  max-width: 200px;\n}\n.ww-max-w-\\[78\\%\\] {\n  max-width: 78%;\n}\n.ww-max-w-\\[82\\%\\] {\n  max-width: 82%;\n}\n.ww-max-w-full {\n  max-width: 100%;\n}\n.ww-max-w-none {\n  max-width: none;\n}\n.ww-flex-1 {\n  flex: 1 1 0%;\n}\n.ww-shrink-0 {\n  flex-shrink: 0;\n}\n.ww-rotate-180 {\n  --tw-rotate: 180deg;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.ww-scale-100 {\n  --tw-scale-x: 1;\n  --tw-scale-y: 1;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.ww-scale-105 {\n  --tw-scale-x: 1.05;\n  --tw-scale-y: 1.05;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.ww-scale-110 {\n  --tw-scale-x: 1.1;\n  --tw-scale-y: 1.1;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.ww-scale-90 {\n  --tw-scale-x: .9;\n  --tw-scale-y: .9;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n@keyframes ww-ping {\n  75%, 100% {\n    transform: scale(2);\n    opacity: 0;\n  }\n}\n.ww-animate-ping {\n  animation: ww-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;\n}\n@keyframes ww-pulse {\n  50% {\n    opacity: .5;\n  }\n}\n.ww-animate-pulse {\n  animation: ww-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n@keyframes ww-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n.ww-animate-spin {\n  animation: ww-spin 1s linear infinite;\n}\n.ww-cursor-default {\n  cursor: default;\n}\n.ww-cursor-pointer {\n  cursor: pointer;\n}\n.ww-touch-none {\n  touch-action: none;\n}\n.ww-select-none {\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  user-select: none;\n}\n.ww-select-all {\n  -webkit-user-select: all;\n  -moz-user-select: all;\n  user-select: all;\n}\n.ww-grid-cols-2 {\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n.ww-flex-row {\n  flex-direction: row;\n}\n.ww-flex-col {\n  flex-direction: column;\n}\n.ww-flex-wrap {\n  flex-wrap: wrap;\n}\n.ww-items-start {\n  align-items: flex-start;\n}\n.ww-items-end {\n  align-items: flex-end;\n}\n.ww-items-center {\n  align-items: center;\n}\n.ww-justify-end {\n  justify-content: flex-end;\n}\n.ww-justify-center {\n  justify-content: center;\n}\n.ww-justify-between {\n  justify-content: space-between;\n}\n.ww-gap-0\\.5 {\n  gap: 0.125rem;\n}\n.ww-gap-1 {\n  gap: 0.25rem;\n}\n.ww-gap-1\\.5 {\n  gap: 0.375rem;\n}\n.ww-gap-2 {\n  gap: 0.5rem;\n}\n.ww-gap-2\\.5 {\n  gap: 0.625rem;\n}\n.ww-gap-4 {\n  gap: 1rem;\n}\n.ww-gap-5 {\n  gap: 1.25rem;\n}\n.ww-gap-6 {\n  gap: 1.5rem;\n}\n.ww-gap-8 {\n  gap: 2rem;\n}\n.ww-divide-y > :not([hidden]) ~ :not([hidden]) {\n  --tw-divide-y-reverse: 0;\n  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));\n}\n.ww-divide-border\\/40 > :not([hidden]) ~ :not([hidden]) {\n  border-color: hsl(var(--border) / 0.4);\n}\n.ww-overflow-hidden {\n  overflow: hidden;\n}\n.ww-overflow-y-auto {\n  overflow-y: auto;\n}\n.ww-overscroll-contain {\n  overscroll-behavior: contain;\n}\n.ww-overscroll-none {\n  overscroll-behavior: none;\n}\n.ww-truncate {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ww-whitespace-pre-wrap {\n  white-space: pre-wrap;\n}\n.ww-rounded {\n  border-radius: 0.25rem;\n}\n.ww-rounded-2xl {\n  border-radius: 1rem;\n}\n.ww-rounded-full {\n  border-radius: 9999px;\n}\n.ww-rounded-lg {\n  border-radius: var(--radius);\n}\n.ww-rounded-md {\n  border-radius: calc(var(--radius) - 2px);\n}\n.ww-rounded-xl {\n  border-radius: 0.75rem;\n}\n.ww-rounded-tl-none {\n  border-top-left-radius: 0px;\n}\n.ww-rounded-tl-sm {\n  border-top-left-radius: calc(var(--radius) - 4px);\n}\n.ww-rounded-tr-sm {\n  border-top-right-radius: calc(var(--radius) - 4px);\n}\n.ww-border {\n  border-width: 1px;\n}\n.ww-border-2 {\n  border-width: 2px;\n}\n.ww-border-b {\n  border-bottom-width: 1px;\n}\n.ww-border-l {\n  border-left-width: 1px;\n}\n.ww-border-l-2 {\n  border-left-width: 2px;\n}\n.ww-border-t {\n  border-top-width: 1px;\n}\n.ww-border-background {\n  border-color: hsl(var(--background));\n}\n.ww-border-black\\/10 {\n  border-color: rgb(0 0 0 / 0.1);\n}\n.ww-border-border {\n  border-color: hsl(var(--border));\n}\n.ww-border-border\\/30 {\n  border-color: hsl(var(--border) / 0.3);\n}\n.ww-border-border\\/40 {\n  border-color: hsl(var(--border) / 0.4);\n}\n.ww-border-border\\/50 {\n  border-color: hsl(var(--border) / 0.5);\n}\n.ww-border-border\\/60 {\n  border-color: hsl(var(--border) / 0.6);\n}\n.ww-border-border\\/80 {\n  border-color: hsl(var(--border) / 0.8);\n}\n.ww-border-muted {\n  border-color: hsl(var(--muted));\n}\n.ww-border-muted-foreground\\/30 {\n  border-color: hsl(var(--muted-foreground) / 0.3);\n}\n.ww-border-primary\\/10 {\n  border-color: hsl(var(--primary) / 0.1);\n}\n.ww-border-primary\\/20 {\n  border-color: hsl(var(--primary) / 0.2);\n}\n.ww-border-red-200 {\n  --tw-border-opacity: 1;\n  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));\n}\n.ww-border-transparent {\n  border-color: transparent;\n}\n.ww-border-white\\/20 {\n  border-color: rgb(255 255 255 / 0.2);\n}\n.ww-border-white\\/30 {\n  border-color: rgb(255 255 255 / 0.3);\n}\n.ww-bg-background {\n  background-color: hsl(var(--background));\n}\n.ww-bg-background\\/20 {\n  background-color: hsl(var(--background) / 0.2);\n}\n.ww-bg-background\\/90 {\n  background-color: hsl(var(--background) / 0.9);\n}\n.ww-bg-background\\/95 {\n  background-color: hsl(var(--background) / 0.95);\n}\n.ww-bg-black\\/10 {\n  background-color: rgb(0 0 0 / 0.1);\n}\n.ww-bg-emerald-400 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1));\n}\n.ww-bg-emerald-500 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));\n}\n.ww-bg-emerald-500\\/10 {\n  background-color: rgb(16 185 129 / 0.1);\n}\n.ww-bg-emerald-500\\/20 {\n  background-color: rgb(16 185 129 / 0.2);\n}\n.ww-bg-foreground\\/20 {\n  background-color: hsl(var(--foreground) / 0.2);\n}\n.ww-bg-foreground\\/5 {\n  background-color: hsl(var(--foreground) / 0.05);\n}\n.ww-bg-foreground\\/60 {\n  background-color: hsl(var(--foreground) / 0.6);\n}\n.ww-bg-muted {\n  background-color: hsl(var(--muted));\n}\n.ww-bg-muted-foreground\\/10 {\n  background-color: hsl(var(--muted-foreground) / 0.1);\n}\n.ww-bg-muted\\/10 {\n  background-color: hsl(var(--muted) / 0.1);\n}\n.ww-bg-muted\\/30 {\n  background-color: hsl(var(--muted) / 0.3);\n}\n.ww-bg-muted\\/40 {\n  background-color: hsl(var(--muted) / 0.4);\n}\n.ww-bg-muted\\/50 {\n  background-color: hsl(var(--muted) / 0.5);\n}\n.ww-bg-muted\\/60 {\n  background-color: hsl(var(--muted) / 0.6);\n}\n.ww-bg-primary {\n  background-color: hsl(var(--primary));\n}\n.ww-bg-primary\\/10 {\n  background-color: hsl(var(--primary) / 0.1);\n}\n.ww-bg-primary\\/5 {\n  background-color: hsl(var(--primary) / 0.05);\n}\n.ww-bg-purple-500\\/20 {\n  background-color: rgb(168 85 247 / 0.2);\n}\n.ww-bg-purple-500\\/30 {\n  background-color: rgb(168 85 247 / 0.3);\n}\n.ww-bg-red-50 {\n  --tw-bg-opacity: 1;\n  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));\n}\n.ww-bg-transparent {\n  background-color: transparent;\n}\n.ww-bg-white {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n.ww-bg-white\\/10 {\n  background-color: rgb(255 255 255 / 0.1);\n}\n.ww-bg-white\\/15 {\n  background-color: rgb(255 255 255 / 0.15);\n}\n.ww-bg-white\\/20 {\n  background-color: rgb(255 255 255 / 0.2);\n}\n.ww-fill-current {\n  fill: currentColor;\n}\n.ww-object-cover {\n  -o-object-fit: cover;\n  object-fit: cover;\n}\n.ww-p-0\\.5 {\n  padding: 0.125rem;\n}\n.ww-p-1\\.5 {\n  padding: 0.375rem;\n}\n.ww-p-2\\.5 {\n  padding: 0.625rem;\n}\n.ww-p-3 {\n  padding: 0.75rem;\n}\n.ww-p-4 {\n  padding: 1rem;\n}\n.ww-px-1 {\n  padding-left: 0.25rem;\n  padding-right: 0.25rem;\n}\n.ww-px-2 {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.ww-px-2\\.5 {\n  padding-left: 0.625rem;\n  padding-right: 0.625rem;\n}\n.ww-px-3 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n.ww-px-3\\.5 {\n  padding-left: 0.875rem;\n  padding-right: 0.875rem;\n}\n.ww-px-4 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n.ww-py-0\\.5 {\n  padding-top: 0.125rem;\n  padding-bottom: 0.125rem;\n}\n.ww-py-1 {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n.ww-py-1\\.5 {\n  padding-top: 0.375rem;\n  padding-bottom: 0.375rem;\n}\n.ww-py-2 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n.ww-py-2\\.5 {\n  padding-top: 0.625rem;\n  padding-bottom: 0.625rem;\n}\n.ww-py-3 {\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n}\n.ww-py-4 {\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n}\n.ww-pb-1\\.5 {\n  padding-bottom: 0.375rem;\n}\n.ww-pb-2 {\n  padding-bottom: 0.5rem;\n}\n.ww-pb-4 {\n  padding-bottom: 1rem;\n}\n.ww-pl-2 {\n  padding-left: 0.5rem;\n}\n.ww-pl-7 {\n  padding-left: 1.75rem;\n}\n.ww-pr-0\\.5 {\n  padding-right: 0.125rem;\n}\n.ww-pr-3 {\n  padding-right: 0.75rem;\n}\n.ww-pt-2 {\n  padding-top: 0.5rem;\n}\n.ww-pt-2\\.5 {\n  padding-top: 0.625rem;\n}\n.ww-pt-5 {\n  padding-top: 1.25rem;\n}\n.ww-text-left {\n  text-align: left;\n}\n.ww-text-center {\n  text-align: center;\n}\n.ww-align-middle {\n  vertical-align: middle;\n}\n.ww-text-\\[10\\.5px\\] {\n  font-size: 10.5px;\n}\n.ww-text-\\[10px\\] {\n  font-size: 10px;\n}\n.ww-text-\\[11px\\] {\n  font-size: 11px;\n}\n.ww-text-\\[12\\.5px\\] {\n  font-size: 12.5px;\n}\n.ww-text-\\[13px\\] {\n  font-size: 13px;\n}\n.ww-text-\\[8px\\] {\n  font-size: 8px;\n}\n.ww-text-\\[9px\\] {\n  font-size: 9px;\n}\n.ww-text-sm {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n.ww-text-xs {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n.ww-font-bold {\n  font-weight: 700;\n}\n.ww-font-medium {\n  font-weight: 500;\n}\n.ww-font-semibold {\n  font-weight: 600;\n}\n.ww-uppercase {\n  text-transform: uppercase;\n}\n.ww-italic {\n  font-style: italic;\n}\n.ww-leading-none {\n  line-height: 1;\n}\n.ww-leading-relaxed {\n  line-height: 1.625;\n}\n.ww-leading-snug {\n  line-height: 1.375;\n}\n.ww-leading-tight {\n  line-height: 1.25;\n}\n.ww-tracking-wide {\n  letter-spacing: 0.025em;\n}\n.ww-tracking-wider {\n  letter-spacing: 0.05em;\n}\n.ww-tracking-widest {\n  letter-spacing: 0.1em;\n}\n.ww-text-black\\/40 {\n  color: rgb(0 0 0 / 0.4);\n}\n.ww-text-black\\/60 {\n  color: rgb(0 0 0 / 0.6);\n}\n.ww-text-destructive {\n  color: hsl(var(--destructive));\n}\n.ww-text-destructive\\/70 {\n  color: hsl(var(--destructive) / 0.7);\n}\n.ww-text-emerald-500 {\n  --tw-text-opacity: 1;\n  color: rgb(16 185 129 / var(--tw-text-opacity, 1));\n}\n.ww-text-foreground {\n  color: hsl(var(--foreground));\n}\n.ww-text-foreground\\/60 {\n  color: hsl(var(--foreground) / 0.6);\n}\n.ww-text-foreground\\/70 {\n  color: hsl(var(--foreground) / 0.7);\n}\n.ww-text-foreground\\/80 {\n  color: hsl(var(--foreground) / 0.8);\n}\n.ww-text-foreground\\/90 {\n  color: hsl(var(--foreground) / 0.9);\n}\n.ww-text-inherit {\n  color: inherit;\n}\n.ww-text-muted-foreground {\n  color: hsl(var(--muted-foreground));\n}\n.ww-text-muted-foreground\\/40 {\n  color: hsl(var(--muted-foreground) / 0.4);\n}\n.ww-text-muted-foreground\\/50 {\n  color: hsl(var(--muted-foreground) / 0.5);\n}\n.ww-text-muted-foreground\\/70 {\n  color: hsl(var(--muted-foreground) / 0.7);\n}\n.ww-text-muted-foreground\\/80 {\n  color: hsl(var(--muted-foreground) / 0.8);\n}\n.ww-text-primary {\n  color: hsl(var(--primary));\n}\n.ww-text-primary-foreground {\n  color: hsl(var(--primary-foreground));\n}\n.ww-text-primary\\/70 {\n  color: hsl(var(--primary) / 0.7);\n}\n.ww-text-primary\\/80 {\n  color: hsl(var(--primary) / 0.8);\n}\n.ww-text-red-400 {\n  --tw-text-opacity: 1;\n  color: rgb(248 113 113 / var(--tw-text-opacity, 1));\n}\n.ww-text-red-500 {\n  --tw-text-opacity: 1;\n  color: rgb(239 68 68 / var(--tw-text-opacity, 1));\n}\n.ww-text-red-600 {\n  --tw-text-opacity: 1;\n  color: rgb(220 38 38 / var(--tw-text-opacity, 1));\n}\n.ww-text-white {\n  --tw-text-opacity: 1;\n  color: rgb(255 255 255 / var(--tw-text-opacity, 1));\n}\n.ww-text-white\\/60 {\n  color: rgb(255 255 255 / 0.6);\n}\n.ww-text-white\\/80 {\n  color: rgb(255 255 255 / 0.8);\n}\n.ww-text-zinc-400 {\n  --tw-text-opacity: 1;\n  color: rgb(161 161 170 / var(--tw-text-opacity, 1));\n}\n.ww-underline {\n  text-decoration-line: underline;\n}\n.ww-line-through {\n  text-decoration-line: line-through;\n}\n.ww-no-underline {\n  text-decoration-line: none;\n}\n.ww-decoration-foreground\\/20 {\n  text-decoration-color: hsl(var(--foreground) / 0.2);\n}\n.ww-opacity-100 {\n  opacity: 1;\n}\n.ww-opacity-25 {\n  opacity: 0.25;\n}\n.ww-opacity-30 {\n  opacity: 0.3;\n}\n.ww-opacity-40 {\n  opacity: 0.4;\n}\n.ww-opacity-60 {\n  opacity: 0.6;\n}\n.ww-opacity-70 {\n  opacity: 0.7;\n}\n.ww-opacity-75 {\n  opacity: 0.75;\n}\n.ww-opacity-80 {\n  opacity: 0.8;\n}\n.ww-opacity-90 {\n  opacity: 0.9;\n}\n.ww-shadow-2xl {\n  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);\n  box-shadow:\n    var(--tw-ring-offset-shadow, 0 0 #0000),\n    var(--tw-ring-shadow, 0 0 #0000),\n    var(--tw-shadow);\n}\n.ww-shadow-lg {\n  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);\n  box-shadow:\n    var(--tw-ring-offset-shadow, 0 0 #0000),\n    var(--tw-ring-shadow, 0 0 #0000),\n    var(--tw-shadow);\n}\n.ww-shadow-md {\n  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n  box-shadow:\n    var(--tw-ring-offset-shadow, 0 0 #0000),\n    var(--tw-ring-shadow, 0 0 #0000),\n    var(--tw-shadow);\n}\n.ww-shadow-sm {\n  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n  box-shadow:\n    var(--tw-ring-offset-shadow, 0 0 #0000),\n    var(--tw-ring-shadow, 0 0 #0000),\n    var(--tw-shadow);\n}\n.ww-shadow-xl {\n  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);\n  box-shadow:\n    var(--tw-ring-offset-shadow, 0 0 #0000),\n    var(--tw-ring-shadow, 0 0 #0000),\n    var(--tw-shadow);\n}\n.ww-outline-none {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n}\n.ww-ring-2 {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow:\n    var(--tw-ring-offset-shadow),\n    var(--tw-ring-shadow),\n    var(--tw-shadow, 0 0 #0000);\n}\n.ww-ring-inset {\n  --tw-ring-inset: inset;\n}\n.ww-ring-primary\\/20 {\n  --tw-ring-color: hsl(var(--primary) / 0.2);\n}\n.ww-ring-primary\\/60 {\n  --tw-ring-color: hsl(var(--primary) / 0.6);\n}\n.ww-backdrop-blur-sm {\n  --tw-backdrop-blur: blur(4px);\n  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n}\n.ww-backdrop-blur-xl {\n  --tw-backdrop-blur: blur(24px);\n  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n}\n.ww-transition-all {\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.ww-transition-colors {\n  transition-property:\n    color,\n    background-color,\n    border-color,\n    text-decoration-color,\n    fill,\n    stroke;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.ww-transition-opacity {\n  transition-property: opacity;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.ww-transition-shadow {\n  transition-property: box-shadow;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.ww-transition-transform {\n  transition-property: transform;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.ww-duration-1000 {\n  transition-duration: 1000ms;\n}\n.ww-duration-150 {\n  transition-duration: 150ms;\n}\n.ww-duration-200 {\n  transition-duration: 200ms;\n}\n.ww-duration-300 {\n  transition-duration: 300ms;\n}\n.ww-duration-500 {\n  transition-duration: 500ms;\n}\n.ww-duration-700 {\n  transition-duration: 700ms;\n}\n@keyframes enter {\n  from {\n    opacity: var(--tw-enter-opacity, 1);\n    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));\n  }\n}\n@keyframes exit {\n  to {\n    opacity: var(--tw-exit-opacity, 1);\n    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));\n  }\n}\n.ww-animate-in {\n  animation-name: enter;\n  animation-duration: 150ms;\n  --tw-enter-opacity: initial;\n  --tw-enter-scale: initial;\n  --tw-enter-rotate: initial;\n  --tw-enter-translate-x: initial;\n  --tw-enter-translate-y: initial;\n}\n.ww-fade-in {\n  --tw-enter-opacity: 0;\n}\n.ww-slide-in-from-top-1 {\n  --tw-enter-translate-y: -0.25rem;\n}\n.ww-duration-1000 {\n  animation-duration: 1000ms;\n}\n.ww-duration-150 {\n  animation-duration: 150ms;\n}\n.ww-duration-200 {\n  animation-duration: 200ms;\n}\n.ww-duration-300 {\n  animation-duration: 300ms;\n}\n.ww-duration-500 {\n  animation-duration: 500ms;\n}\n.ww-duration-700 {\n  animation-duration: 700ms;\n}\n.wallavi-widget *,\n.wallavi-widget *::before,\n.wallavi-widget *::after {\n  box-sizing: border-box;\n  border-width: 0;\n  border-style: solid;\n}\n.wallavi-widget button {\n  -moz-appearance: none;\n  appearance: none;\n  -webkit-appearance: none;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n}\n.wallavi-widget textarea,\n.wallavi-widget input,\n.wallavi-widget select {\n  font-family: inherit;\n  font-size: inherit;\n}\n.wallavi-widget img,\n.wallavi-widget video {\n  max-width: 100%;\n  height: auto;\n}\n.wallavi-widget .lk-control-bar {\n  background: transparent !important;\n  border: none !important;\n  box-shadow: none !important;\n  padding: 0 !important;\n  gap: 1.5rem !important;\n  justify-content: center !important;\n}\n.wallavi-widget .lk-button {\n  background: rgba(25, 25, 28, 0.05) !important;\n  border-radius: 9999px !important;\n  padding: 1.25rem !important;\n  color: var(--ww-fg, #19191c) !important;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;\n  border: 1px solid rgba(25, 25, 28, 0.1) !important;\n}\n.wallavi-widget .lk-button:hover {\n  background: rgba(25, 25, 28, 0.1) !important;\n  transform: scale(1.05) !important;\n}\n.wallavi-widget .lk-disconnect-button {\n  background: #ef4444 !important;\n  color: white !important;\n  border: none !important;\n}\n.wallavi-widget .lk-disconnect-button:hover {\n  background: #dc2626 !important;\n}\n.wallavi-widget .lk-device-menu {\n  bottom: 100% !important;\n  top: auto !important;\n  margin-bottom: 1rem !important;\n  max-width: 250px !important;\n  width: -moz-max-content !important;\n  width: max-content !important;\n  left: 50% !important;\n  transform: translateX(-50%) !important;\n  background: #ffffff !important;\n  border-radius: 16px !important;\n  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15), 0 10px 20px -10px rgba(0, 0, 0, 0.1) !important;\n  z-index: 1000 !important;\n  overflow: hidden !important;\n  border: 1px solid rgba(0, 0, 0, 0.05) !important;\n  padding: 0.5rem !important;\n}\n.wallavi-widget .lk-device-menu > li {\n  padding: 0.75rem 1rem !important;\n  font-size: 0.875rem !important;\n  color: #19191c !important;\n  white-space: nowrap !important;\n  overflow: hidden !important;\n  text-overflow: ellipsis !important;\n  border-radius: 8px !important;\n  transition: background 0.15s !important;\n}\n.wallavi-widget .lk-device-menu > li:hover {\n  background: rgba(0, 0, 0, 0.05) !important;\n}\n.wallavi-widget .lk-device-menu > li.lk-active {\n  background: rgba(0, 0, 0, 0.08) !important;\n  font-weight: 600 !important;\n}\n.placeholder\\:ww-text-muted-foreground\\/40::-moz-placeholder {\n  color: hsl(var(--muted-foreground) / 0.4);\n}\n.placeholder\\:ww-text-muted-foreground\\/40::placeholder {\n  color: hsl(var(--muted-foreground) / 0.4);\n}\n.focus-within\\:ww-ring-1:focus-within {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow:\n    var(--tw-ring-offset-shadow),\n    var(--tw-ring-shadow),\n    var(--tw-shadow, 0 0 #0000);\n}\n.focus-within\\:ww-ring-ring\\/40:focus-within {\n  --tw-ring-color: hsl(var(--ring) / 0.4);\n}\n.hover\\:-ww-translate-y-1:hover {\n  --tw-translate-y: -0.25rem;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.hover\\:ww-scale-110:hover {\n  --tw-scale-x: 1.1;\n  --tw-scale-y: 1.1;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.hover\\:ww-border-accent-foreground\\/20:hover {\n  border-color: hsl(var(--accent-foreground) / 0.2);\n}\n.hover\\:ww-border-accent-foreground\\/25:hover {\n  border-color: hsl(var(--accent-foreground) / 0.25);\n}\n.hover\\:ww-border-primary\\/40:hover {\n  border-color: hsl(var(--primary) / 0.4);\n}\n.hover\\:ww-bg-accent:hover {\n  background-color: hsl(var(--accent));\n}\n.hover\\:ww-bg-accent\\/30:hover {\n  background-color: hsl(var(--accent) / 0.3);\n}\n.hover\\:ww-bg-accent\\/40:hover {\n  background-color: hsl(var(--accent) / 0.4);\n}\n.hover\\:ww-bg-foreground\\/10:hover {\n  background-color: hsl(var(--foreground) / 0.1);\n}\n.hover\\:ww-bg-foreground\\/30:hover {\n  background-color: hsl(var(--foreground) / 0.3);\n}\n.hover\\:ww-bg-muted:hover {\n  background-color: hsl(var(--muted));\n}\n.hover\\:ww-bg-white\\/10:hover {\n  background-color: rgb(255 255 255 / 0.1);\n}\n.hover\\:ww-text-accent-foreground:hover {\n  color: hsl(var(--accent-foreground));\n}\n.hover\\:ww-text-foreground:hover {\n  color: hsl(var(--foreground));\n}\n.hover\\:ww-text-primary:hover {\n  color: hsl(var(--primary));\n}\n.hover\\:ww-opacity-80:hover {\n  opacity: 0.8;\n}\n.hover\\:ww-opacity-85:hover {\n  opacity: 0.85;\n}\n.hover\\:ww-shadow-sm:hover {\n  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n  box-shadow:\n    var(--tw-ring-offset-shadow, 0 0 #0000),\n    var(--tw-ring-shadow, 0 0 #0000),\n    var(--tw-shadow);\n}\n.hover\\:ww-shadow-xl:hover {\n  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);\n  box-shadow:\n    var(--tw-ring-offset-shadow, 0 0 #0000),\n    var(--tw-ring-shadow, 0 0 #0000),\n    var(--tw-shadow);\n}\n.focus\\:ww-ring-1:focus {\n  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n  box-shadow:\n    var(--tw-ring-offset-shadow),\n    var(--tw-ring-shadow),\n    var(--tw-shadow, 0 0 #0000);\n}\n.focus\\:ww-ring-ring\\/40:focus {\n  --tw-ring-color: hsl(var(--ring) / 0.4);\n}\n.active\\:ww-scale-\\[0\\.98\\]:active {\n  --tw-scale-x: 0.98;\n  --tw-scale-y: 0.98;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.disabled\\:ww-pointer-events-none:disabled {\n  pointer-events: none;\n}\n.disabled\\:ww-opacity-40:disabled {\n  opacity: 0.4;\n}\n.disabled\\:ww-opacity-50:disabled {\n  opacity: 0.5;\n}\n.ww-group:hover .group-hover\\:ww-rotate-12 {\n  --tw-rotate: 12deg;\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n.ww-group:hover .group-hover\\:ww-text-primary {\n  color: hsl(var(--primary));\n}\n.dark\\:ww-border-red-800:is(.ww-dark *) {\n  --tw-border-opacity: 1;\n  border-color: rgb(153 27 27 / var(--tw-border-opacity, 1));\n}\n.dark\\:ww-bg-red-950:is(.ww-dark *) {\n  --tw-bg-opacity: 1;\n  background-color: rgb(69 10 10 / var(--tw-bg-opacity, 1));\n}\n.dark\\:ww-text-red-400:is(.ww-dark *) {\n  --tw-text-opacity: 1;\n  color: rgb(248 113 113 / var(--tw-text-opacity, 1));\n}\n");
 var twMerge = tailwindMerge.extendTailwindMerge({ prefix: "ww-" });
 var cn = (...inputs) => twMerge(clsx.clsx(inputs));
 async function getFreshClerkToken() {
@@ -366,9 +366,12 @@ function useChat({
   });
   const streamingMsgIdRef = react.useRef(null);
   const [debugTraces, setDebugTraces] = react.useState([]);
-  const [selectedContext, setSelectedContext] = react.useState(null);
+  const [selectedContext, setSelectedContext] = react.useState(
+    null
+  );
   react.useEffect(() => {
-    if (typeof window === "undefined" || typeof document === "undefined") return;
+    if (typeof window === "undefined" || typeof document === "undefined")
+      return;
     const handleContextSelected = (event) => {
       const customEvent = event;
       if (customEvent.detail && customEvent.detail.id) {
@@ -377,7 +380,9 @@ function useChat({
     };
     const handleGlobalClick = (e) => {
       if (e.metaKey || e.ctrlKey) {
-        const target = e.target.closest("[data-wallavi-id]");
+        const target = e.target.closest(
+          "[data-wallavi-id]"
+        );
         if (target) {
           e.preventDefault();
           e.stopPropagation();
@@ -414,7 +419,10 @@ function useChat({
     window.addEventListener("wallavi:context-selected", handleContextSelected);
     document.addEventListener("click", handleGlobalClick, true);
     return () => {
-      window.removeEventListener("wallavi:context-selected", handleContextSelected);
+      window.removeEventListener(
+        "wallavi:context-selected",
+        handleContextSelected
+      );
       document.removeEventListener("click", handleGlobalClick, true);
     };
   }, []);
@@ -1729,7 +1737,10 @@ function PickerSelector({
   );
 }
 var ReactMarkdown = ReactMarkdownLib__default.default;
-function MarkdownContent({ text }) {
+function MarkdownContent({
+  text,
+  isUser
+}) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     ReactMarkdown,
     {
@@ -1817,10 +1828,15 @@ function MarkdownContent({ text }) {
             return /* @__PURE__ */ jsxRuntime.jsxs(
               "span",
               {
-                className: "ww-inline-flex ww-items-center ww-gap-1.5 ww-bg-primary/10 ww-border ww-border-primary/20 ww-text-primary ww-text-[11px] ww-font-semibold ww-px-2 ww-py-0.5 ww-rounded-md ww-mx-0.5 ww-shadow-3xs",
+                className: `ww-inline-flex ww-items-center ww-gap-1.5 ww-text-[11px] ww-font-semibold ww-px-2 ww-py-0.5 ww-rounded-md ww-mx-0.5 ww-shadow-3xs ${isUser ? "ww-bg-white/20 ww-border ww-border-white/30 ww-text-white" : "ww-bg-primary/10 ww-border ww-border-primary/20 ww-text-primary"}`,
                 title: `${type}: ${id}`,
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-h-1.5 ww-w-1.5 ww-rounded-full ww-bg-primary" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: `ww-h-1.5 ww-w-1.5 ww-rounded-full ${isUser ? "ww-bg-white" : "ww-bg-primary"}`
+                    }
+                  ),
                   /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ww-opacity-70 ww-uppercase ww-text-[8px] ww-tracking-wider", children: [
                     type,
                     ":"
@@ -1836,7 +1852,7 @@ function MarkdownContent({ text }) {
               href,
               target: "_blank",
               rel: "noopener noreferrer",
-              style: { textDecoration: "underline", opacity: 0.75 },
+              className: isUser ? "ww-text-inherit ww-underline ww-opacity-90" : "ww-underline ww-opacity-75",
               children
             }
           );
@@ -1973,7 +1989,7 @@ function MessageBubble({
               contrastColor
             }
           ),
-          textPart?.text && /* @__PURE__ */ jsxRuntime.jsx("span", { children: textPart.text })
+          textPart?.text && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ww-prose ww-prose-sm ww-max-w-none ww-text-inherit prose-p:ww-my-0.5", children: /* @__PURE__ */ jsxRuntime.jsx(MarkdownContent, { text: textPart.text, isUser: true }) })
         ]
       }
     ) });
@@ -2148,6 +2164,67 @@ function ChatMessages({
   ] });
 }
 var cn3 = (...inputs) => tailwindMerge.twMerge(clsx.clsx(inputs));
+var serializeNode = (node) => {
+  if (node.nodeType === Node.TEXT_NODE) {
+    return node.nodeValue || "";
+  }
+  if (node.nodeType === Node.ELEMENT_NODE) {
+    const el = node;
+    if (el.tagName === "SPAN" && el.getAttribute("data-wlv-context-id")) {
+      const id = el.getAttribute("data-wlv-context-id");
+      const type = el.getAttribute("data-wlv-context-type");
+      const name = el.getAttribute("data-wlv-context-name");
+      return `[${name}](wallavi://${type}/${id})`;
+    }
+    if (el.tagName === "BR") {
+      return "\n";
+    }
+    let childText = "";
+    for (const child of Array.from(el.childNodes)) {
+      childText += serializeNode(child);
+    }
+    const isBlock = ["DIV", "P", "TR", "LI"].includes(el.tagName);
+    return isBlock ? `
+${childText}` : childText;
+  }
+  return "";
+};
+var serializeEditor = (editor) => {
+  let text = "";
+  for (const child of Array.from(editor.childNodes)) {
+    text += serializeNode(child);
+  }
+  return text.replace(/^\n+/, "").replace(/\n+$/, "");
+};
+var createChipElement = (name, type, id, accentColor) => {
+  const span = document.createElement("span");
+  span.setAttribute("contenteditable", "false");
+  span.className = "ww-inline-flex ww-items-center ww-gap-1.5 ww-bg-primary/10 ww-border ww-border-primary/20 ww-text-primary ww-text-xs ww-font-semibold ww-px-2 ww-py-0.5 ww-rounded-md ww-mx-0.5 ww-align-middle ww-shadow-3xs ww-select-all";
+  span.style.setProperty("--primary", accentColor);
+  span.setAttribute("data-wlv-context-id", id);
+  span.setAttribute("data-wlv-context-type", type);
+  span.setAttribute("data-wlv-context-name", name);
+  const dot = document.createElement("span");
+  dot.className = "ww-h-1.5 ww-w-1.5 ww-rounded-full ww-bg-primary";
+  span.appendChild(dot);
+  const typeSpan = document.createElement("span");
+  typeSpan.className = "ww-opacity-70 ww-uppercase ww-text-[8px] ww-tracking-wider";
+  typeSpan.textContent = `${type}:`;
+  span.appendChild(typeSpan);
+  const nameSpan = document.createElement("span");
+  nameSpan.textContent = name;
+  span.appendChild(nameSpan);
+  const button = document.createElement("button");
+  button.type = "button";
+  button.className = "ww-ml-1 ww-text-primary/70 hover:ww-text-primary hover:ww-scale-110 ww-transition-transform ww-font-bold";
+  button.textContent = "\xD7";
+  button.onclick = () => {
+    span.remove();
+    window.dispatchEvent(new CustomEvent("wallavi:editor-change"));
+  };
+  span.appendChild(button);
+  return span;
+};
 function ChatInput({
   input,
   setInput,
@@ -2171,32 +2248,66 @@ function ChatInput({
   const hasAttachments = onAttach !== void 0;
   const fileInputRef = react.useRef(null);
   const textareaRef = react.useRef(null);
+  const insertNodeAtCursor = (node) => {
+    const sel = window.getSelection();
+    if (sel && sel.rangeCount > 0) {
+      const range = sel.getRangeAt(0);
+      const editor = textareaRef.current;
+      if (editor && editor.contains(range.commonAncestorContainer)) {
+        range.deleteContents();
+        const frag = document.createDocumentFragment();
+        frag.appendChild(node);
+        const spaceNode = document.createTextNode(" ");
+        frag.appendChild(spaceNode);
+        range.insertNode(frag);
+        const newRange = range.cloneRange();
+        newRange.setStartAfter(spaceNode);
+        newRange.collapse(true);
+        sel.removeAllRanges();
+        sel.addRange(newRange);
+        return;
+      }
+    }
+    if (textareaRef.current) {
+      textareaRef.current.appendChild(node);
+      textareaRef.current.appendChild(document.createTextNode(" "));
+    }
+  };
   react.useEffect(() => {
-    if (!input && textareaRef.current) {
-      textareaRef.current.style.height = "auto";
+    if (!input && textareaRef.current && textareaRef.current.innerHTML !== "") {
+      textareaRef.current.innerHTML = "";
     }
   }, [input]);
+  const handleInput = () => {
+    if (textareaRef.current) {
+      setInput(serializeEditor(textareaRef.current));
+    }
+  };
   react.useEffect(() => {
     if (selectedContext && textareaRef.current) {
-      const textarea = textareaRef.current;
-      const startPos = textarea.selectionStart;
-      const endPos = textarea.selectionEnd;
-      const text = textarea.value;
-      const inlineTag = `[${selectedContext.name}](wallavi://${selectedContext.type}/${selectedContext.id})`;
-      const newText = text.substring(0, startPos) + inlineTag + text.substring(endPos);
-      setInput(newText);
+      const chipEl = createChipElement(
+        selectedContext.name,
+        selectedContext.type,
+        selectedContext.id,
+        accentColor
+      );
+      textareaRef.current.focus();
+      insertNodeAtCursor(chipEl);
+      setInput(serializeEditor(textareaRef.current));
       if (onClearContext) {
         onClearContext();
       }
-      setTimeout(() => {
-        textarea.focus();
-        const newPos = startPos + inlineTag.length;
-        textarea.setSelectionRange(newPos, newPos);
-        textarea.style.height = "auto";
-        textarea.style.height = `${Math.min(textarea.scrollHeight, 128)}px`;
-      }, 50);
     }
-  }, [selectedContext, onClearContext, setInput]);
+  }, [selectedContext, onClearContext, setInput, accentColor]);
+  react.useEffect(() => {
+    const handleEditorChange = () => {
+      if (textareaRef.current) {
+        setInput(serializeEditor(textareaRef.current));
+      }
+    };
+    window.addEventListener("wallavi:editor-change", handleEditorChange);
+    return () => window.removeEventListener("wallavi:editor-change", handleEditorChange);
+  }, [setInput]);
   react.useEffect(() => {
     if (!streaming) {
       textareaRef.current?.focus();
@@ -2208,8 +2319,40 @@ function ChatInput({
       onSend();
     }
   };
+  const handlePaste = (e) => {
+    if (hasAttachments && onAttach) {
+      const files = Array.from(e.clipboardData?.files ?? []).filter(
+        (f) => f.type.startsWith("image/")
+      );
+      if (files.length > 0) {
+        e.preventDefault();
+        const dt = new DataTransfer();
+        files.forEach((f) => dt.items.add(f));
+        onAttach(dt.files);
+        return;
+      }
+    }
+    e.preventDefault();
+    const text = e.clipboardData?.getData("text/plain") || "";
+    const selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0) return;
+    const range = selection.getRangeAt(0);
+    range.deleteContents();
+    range.insertNode(document.createTextNode(text));
+    range.collapse(false);
+    if (textareaRef.current) {
+      setInput(serializeEditor(textareaRef.current));
+    }
+  };
   const hasText = input.trim().length > 0;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-shrink-0 ww-border-t ww-bg-background ww-px-3 ww-py-2.5", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+        #wallavi-chat-input:empty::before {
+          content: attr(placeholder);
+          color: rgba(120, 120, 120, 0.45);
+          pointer-events: none;
+        }
+      ` }),
     canRegenerate && onRegenerate && /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
@@ -2281,34 +2424,17 @@ function ChatInput({
       ),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-flex ww-items-end ww-gap-2 ww-px-3 ww-py-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          "textarea",
+          "div",
           {
             id: "wallavi-chat-input",
             ref: textareaRef,
-            rows: 1,
-            className: "ww-flex-1 ww-resize-none ww-bg-transparent ww-text-sm ww-outline-none placeholder:ww-text-muted-foreground/50 ww-leading-relaxed ww-max-h-32 ww-overflow-y-auto ww-py-0.5",
-            placeholder: placeholder ?? "Send a message\u2026",
-            value: input,
-            onChange: (e) => {
-              setInput(e.target.value);
-              e.target.style.height = "auto";
-              e.target.style.height = `${Math.min(e.target.scrollHeight, 128)}px`;
-            },
+            contentEditable: !streaming && voiceState !== "recording" && voiceState !== "transcribing",
+            className: "ww-flex-1 ww-min-h-[22px] ww-max-h-32 ww-overflow-y-auto ww-py-1 ww-outline-none ww-text-sm ww-leading-relaxed ww-bg-transparent",
+            ...{ placeholder: placeholder ?? "Send a message\u2026" },
             onKeyDown: handleKeyDown,
-            onPaste: (e) => {
-              if (!hasAttachments || !onAttach) return;
-              const files = Array.from(e.clipboardData?.files ?? []).filter(
-                (f) => f.type.startsWith("image/")
-              );
-              if (files.length > 0) {
-                e.preventDefault();
-                const dt = new DataTransfer();
-                files.forEach((f) => dt.items.add(f));
-                onAttach(dt.files);
-              }
-            },
-            disabled: streaming || voiceState === "recording" || voiceState === "transcribing",
-            autoFocus: true
+            onInput: handleInput,
+            onPaste: handlePaste,
+            style: { wordBreak: "break-word" }
           }
         ),
         hasVoice && /* @__PURE__ */ jsxRuntime.jsx(
@@ -2483,6 +2609,74 @@ function VoiceOverlay({ token, serverUrl, onClose }) {
     }
   ) });
 }
+function getContextQueries(url = "") {
+  const lowercaseUrl = url.toLowerCase();
+  if (/pricing|precio|planes|tarifas|costos|comprar|suscrip|subscribe/i.test(
+    lowercaseUrl
+  )) {
+    return [
+      {
+        text: "\xBFCu\xE1les son los planes de precios disponibles?",
+        category: "pricing"
+      },
+      {
+        text: "\xBFTienen alguna prueba gratuita o plan demo?",
+        category: "pricing"
+      },
+      {
+        text: "\xBFCu\xE1les son los m\xE9todos de pago aceptados?",
+        category: "pricing"
+      }
+    ];
+  }
+  if (/settings|config|cuenta|perfil|seguridad|account|profile|security/i.test(
+    lowercaseUrl
+  )) {
+    return [
+      { text: "\xBFC\xF3mo puedo cambiar mi contrase\xF1a?", category: "settings" },
+      {
+        text: "\xBFD\xF3nde encuentro mis credenciales de API?",
+        category: "settings"
+      },
+      { text: "\xBFC\xF3mo configuro las notificaciones?", category: "settings" }
+    ];
+  }
+  if (/dashboard|inicio|panel|resumen|metri|home|stats|analytics/i.test(
+    lowercaseUrl
+  )) {
+    return [
+      {
+        text: "\xBFC\xF3mo puedo ver las estad\xEDsticas de mi agente?",
+        category: "dashboard"
+      },
+      { text: "\xBFC\xF3mo interpreto las m\xE9tricas de uso?", category: "dashboard" },
+      {
+        text: "\xBFD\xF3nde descargo los reportes de actividad?",
+        category: "dashboard"
+      }
+    ];
+  }
+  if (/integration|conexi|conectar|plugins|api|webhooks|connect/i.test(
+    lowercaseUrl
+  )) {
+    return [
+      {
+        text: "\xBFC\xF3mo puedo conectar Wallavi con mi CRM?",
+        category: "integrations"
+      },
+      { text: "\xBFTienen soporte para webhooks?", category: "integrations" },
+      {
+        text: "\xBFD\xF3nde est\xE1 la documentaci\xF3n de la API?",
+        category: "integrations"
+      }
+    ];
+  }
+  return [
+    { text: "\xBFQu\xE9 puede hacer este asistente?", category: "general" },
+    { text: "\xBFC\xF3mo puedo empezar?", category: "general" },
+    { text: "\xBFC\xF3mo entreno a mi agente?", category: "general" }
+  ];
+}
 function ChatWidget({
   agentId,
   workspaceId,
@@ -2516,8 +2710,18 @@ function ChatWidget({
   expanded,
   embedded = false,
   envId,
-  onDebugTrace
+  onDebugTrace,
+  widgetLayout,
+  clientActions = []
 }) {
+  const [isDesktop, setIsDesktop] = react.useState(false);
+  react.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const checkSize = () => setIsDesktop(window.innerWidth >= 768);
+    checkSize();
+    window.addEventListener("resize", checkSize);
+    return () => window.removeEventListener("resize", checkSize);
+  }, []);
   const chat = useChat({
     agentId,
     workspaceId,
@@ -2618,11 +2822,13 @@ function ChatWidget({
     ["--ring"]: isDark ? "240 4.9% 83.9%" : "240 10% 3.9%",
     ["--radius"]: "0.5rem"
   };
+  const showSplitLayout = widgetLayout === "center" && isDesktop;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: cn(
-        "wallavi-widget ww-flex ww-flex-col ww-overflow-hidden ww-bg-background ww-h-full ww-relative ww-overscroll-none",
+        "wallavi-widget ww-flex ww-overflow-hidden ww-bg-background ww-h-full ww-relative ww-overscroll-none",
+        showSplitLayout ? "ww-flex-row" : "ww-flex-col",
         !embedded && "ww-rounded-2xl ww-border ww-shadow-xl",
         isDragOver && "ww-ring-2 ww-ring-inset ww-ring-primary/60",
         className
@@ -2633,200 +2839,293 @@ function ChatWidget({
       onDragLeave: handleDragLeave,
       onDrop: handleDrop,
       children: [
-        isDragOver && enableAttachments && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-absolute ww-inset-0 ww-z-50 ww-flex ww-flex-col ww-items-center ww-justify-center ww-gap-2 ww-rounded-2xl ww-bg-background/90 ww-backdrop-blur-sm ww-pointer-events-none", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.UploadCloud, { className: "ww-h-8 ww-w-8 ww-text-primary/70" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-text-sm ww-font-medium ww-text-foreground/70", children: "Drop files to attach" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-text-xs ww-text-muted-foreground", children: "CSV, TXT, PDF, JPG, PNG, WebP" })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-flex ww-flex-col ww-flex-1 ww-h-full ww-overflow-hidden ww-relative", children: [
+          isDragOver && enableAttachments && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-absolute ww-inset-0 ww-z-50 ww-flex ww-flex-col ww-items-center ww-justify-center ww-gap-2 ww-rounded-2xl ww-bg-background/90 ww-backdrop-blur-sm ww-pointer-events-none", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.UploadCloud, { className: "ww-h-8 ww-w-8 ww-text-primary/70" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-text-sm ww-font-medium ww-text-foreground/70", children: "Drop files to attach" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-text-xs ww-text-muted-foreground", children: "CSV, TXT, PDF, JPG, PNG, WebP" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ChatHeader,
+            {
+              title,
+              profilePicture,
+              headerBg,
+              headerText,
+              onReset: handleReset,
+              onClose: hideCloseButton ? void 0 : onClose,
+              onExpand,
+              expanded,
+              onCall: enableVoice && chat.voiceCall ? () => chat.voiceCall?.start() : void 0,
+              isCallLoading: chat.voiceCall?.loading
+            }
+          ),
+          chat.voiceCall?.active && chat.voiceCall.token && chat.voiceCall.serverUrl && /* @__PURE__ */ jsxRuntime.jsx(
+            VoiceOverlay,
+            {
+              token: chat.voiceCall.token,
+              serverUrl: chat.voiceCall.serverUrl,
+              onClose: chat.voiceCall.stop,
+              accentColor: userMessageColor
+            }
+          ),
+          customBackend?.mode === "human" && /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: "ww-shrink-0 ww-flex ww-items-center ww-gap-2 ww-px-4 ww-py-1.5 ww-border-b",
+              style: { backgroundColor: `${userMessageColor}0d` },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ww-relative ww-flex ww-h-2 ww-w-2 ww-shrink-0", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-animate-ping ww-absolute ww-inline-flex ww-h-full ww-w-full ww-rounded-full ww-bg-emerald-400 ww-opacity-75" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-relative ww-inline-flex ww-rounded-full ww-h-2 ww-w-2 ww-bg-emerald-500" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-text-xs ww-font-medium ww-text-foreground/60", children: "Hablando con un agente" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ChatMessages,
+            {
+              messages: chat.messages,
+              streaming: chat.streaming,
+              agentName,
+              profilePicture,
+              userColor: userMessageColor,
+              initialMessages,
+              suggestedMessages,
+              showThinking,
+              onSuggest: (msg) => chat.send(msg),
+              onPickerSelect: chat.selectPickerOption
+            }
+          ),
+          customBackend?.footerAction && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ww-shrink-0 ww-px-3 ww-py-1.5 ww-border-t ww-bg-background", children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              onClick: () => void customBackend.footerAction.onClick(),
+              disabled: customBackend.footerAction.loading,
+              style: customBackend.footerAction.icon === "human" ? {
+                backgroundColor: userMessageColor,
+                color: "#ffffff",
+                boxShadow: `0 2px 12px ${userMessageColor}55`
+              } : {
+                borderColor: `${userMessageColor}35`,
+                backgroundColor: `${userMessageColor}0d`,
+                color: userMessageColor
+              },
+              className: [
+                "ww-w-full ww-flex ww-items-center ww-gap-2 ww-rounded-full ww-px-3.5 ww-py-1.5 ww-text-xs ww-font-semibold ww-transition-all",
+                "hover:ww-opacity-85 active:ww-scale-[0.98] disabled:ww-opacity-50 disabled:ww-pointer-events-none",
+                customBackend.footerAction.icon === "human" ? "" : "ww-border"
+              ].join(" "),
+              children: [
+                customBackend.footerAction.loading ? /* @__PURE__ */ jsxRuntime.jsxs(
+                  "svg",
+                  {
+                    className: "ww-animate-spin ww-w-3.5 ww-h-3.5 ww-shrink-0",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "circle",
+                        {
+                          className: "ww-opacity-25",
+                          cx: "12",
+                          cy: "12",
+                          r: "10",
+                          stroke: "currentColor",
+                          strokeWidth: "3"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "path",
+                        {
+                          className: "ww-opacity-75",
+                          fill: "currentColor",
+                          d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+                        }
+                      )
+                    ]
+                  }
+                ) : customBackend.footerAction.icon === "ai" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "svg",
+                  {
+                    className: "ww-w-3.5 ww-h-3.5 ww-shrink-0",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" })
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsxs(
+                  "svg",
+                  {
+                    className: "ww-w-3.5 ww-h-3.5 ww-shrink-0",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 18v-6a9 9 0 0 1 18 0v6" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-flex-1 ww-text-left ww-truncate", children: customBackend.footerAction.label }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "svg",
+                  {
+                    className: "ww-shrink-0 ww-w-3 ww-h-3 ww-opacity-60",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2.5",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 18l6-6-6-6" })
+                  }
+                )
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ChatInput,
+            {
+              input: chat.input,
+              setInput: chat.setInput,
+              onSend: handleSend,
+              streaming: chat.streaming,
+              placeholder: messagePlaceholder,
+              accentColor: userMessageColor,
+              canRegenerate: !!canRegenerate,
+              onRegenerate: () => void chat.regenerate(),
+              selectedContext: chat.selectedContext,
+              onClearContext: () => chat.setSelectedContext(null),
+              ...enableVoice && voice.isSupported ? {
+                voiceState: voice.voiceState,
+                onVoiceStart: () => void voice.start(),
+                onVoiceStop: voice.stop
+              } : {},
+              ...enableAttachments ? {
+                attachments: attachmentHook.attachments,
+                onAttach: attachmentHook.attach,
+                onRemoveAttachment: attachmentHook.remove,
+                isUploading: attachmentHook.isUploading
+              } : {}
+            }
+          ),
+          watermark && /* @__PURE__ */ jsxRuntime.jsxs("footer", { className: "ww-shrink-0 ww-flex ww-items-center ww-justify-center ww-gap-1.5 ww-bg-muted/50 ww-py-1.5 ww-border-t ww-touch-none", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "a",
+              {
+                href: "https://wallavi.com",
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: "ww-flex ww-items-center ww-gap-1 ww-text-[10px] ww-text-muted-foreground hover:ww-text-foreground ww-transition-colors",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "img",
+                    {
+                      src: watermarkLogoUrl,
+                      alt: "Wallavi",
+                      width: 12,
+                      height: 12
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Powered by Wallavi" })
+                ]
+              }
+            ),
+            footer && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-text-muted-foreground/40 ww-text-[10px]", children: "\xB7" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-text-[10px] ww-text-muted-foreground", children: footer })
+            ] })
+          ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ChatHeader,
-          {
-            title,
-            profilePicture,
-            headerBg,
-            headerText,
-            onReset: handleReset,
-            onClose: hideCloseButton ? void 0 : onClose,
-            onExpand,
-            expanded,
-            onCall: enableVoice && chat.voiceCall ? () => chat.voiceCall?.start() : void 0,
-            isCallLoading: chat.voiceCall?.loading
-          }
-        ),
-        chat.voiceCall?.active && chat.voiceCall.token && chat.voiceCall.serverUrl && /* @__PURE__ */ jsxRuntime.jsx(
-          VoiceOverlay,
-          {
-            token: chat.voiceCall.token,
-            serverUrl: chat.voiceCall.serverUrl,
-            onClose: chat.voiceCall.stop,
-            accentColor: userMessageColor
-          }
-        ),
-        customBackend?.mode === "human" && /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: "ww-shrink-0 ww-flex ww-items-center ww-gap-2 ww-px-4 ww-py-1.5 ww-border-b",
-            style: { backgroundColor: `${userMessageColor}0d` },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ww-relative ww-flex ww-h-2 ww-w-2 ww-shrink-0", children: [
+        showSplitLayout && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-w-[280px] ww-shrink-0 ww-border-l ww-border-border ww-bg-muted/10 ww-flex ww-flex-col ww-h-full ww-overflow-hidden", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-p-4 ww-border-b ww-border-border ww-shrink-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "ww-text-xs ww-font-bold ww-text-foreground ww-uppercase ww-tracking-wider", children: "Centro de Comando" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-flex ww-items-center ww-gap-1.5 ww-px-2.5 ww-py-1 ww-rounded-full ww-text-[10px] ww-font-medium ww-bg-emerald-500/10 ww-text-emerald-500 ww-w-fit ww-mt-2 ww-max-w-full", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ww-relative ww-flex ww-h-1.5 ww-w-1.5", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-animate-ping ww-absolute ww-inline-flex ww-h-full ww-w-full ww-rounded-full ww-bg-emerald-400 ww-opacity-75" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-relative ww-inline-flex ww-rounded-full ww-h-2 ww-w-2 ww-bg-emerald-500" })
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-relative ww-inline-flex ww-rounded-full ww-h-1.5 ww-w-1.5 ww-bg-emerald-500" })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-text-xs ww-font-medium ww-text-foreground/60", children: "Hablando con un agente" })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ChatMessages,
-          {
-            messages: chat.messages,
-            streaming: chat.streaming,
-            agentName,
-            profilePicture,
-            userColor: userMessageColor,
-            initialMessages,
-            suggestedMessages,
-            showThinking,
-            onSuggest: (msg) => chat.send(msg),
-            onPickerSelect: chat.selectPickerOption
-          }
-        ),
-        customBackend?.footerAction && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ww-shrink-0 ww-px-3 ww-py-1.5 ww-border-t ww-bg-background", children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
-          {
-            onClick: () => void customBackend.footerAction.onClick(),
-            disabled: customBackend.footerAction.loading,
-            style: customBackend.footerAction.icon === "human" ? {
-              backgroundColor: userMessageColor,
-              color: "#ffffff",
-              boxShadow: `0 2px 12px ${userMessageColor}55`
-            } : {
-              borderColor: `${userMessageColor}35`,
-              backgroundColor: `${userMessageColor}0d`,
-              color: userMessageColor
-            },
-            className: [
-              "ww-w-full ww-flex ww-items-center ww-gap-2 ww-rounded-full ww-px-3.5 ww-py-1.5 ww-text-xs ww-font-semibold ww-transition-all",
-              "hover:ww-opacity-85 active:ww-scale-[0.98] disabled:ww-opacity-50 disabled:ww-pointer-events-none",
-              customBackend.footerAction.icon === "human" ? "" : "ww-border"
-            ].join(" "),
-            children: [
-              customBackend.footerAction.loading ? /* @__PURE__ */ jsxRuntime.jsxs(
-                "svg",
-                {
-                  className: "ww-animate-spin ww-w-3.5 ww-h-3.5 ww-shrink-0",
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "circle",
-                      {
-                        className: "ww-opacity-25",
-                        cx: "12",
-                        cy: "12",
-                        r: "10",
-                        stroke: "currentColor",
-                        strokeWidth: "3"
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "path",
-                      {
-                        className: "ww-opacity-75",
-                        fill: "currentColor",
-                        d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-                      }
-                    )
-                  ]
-                }
-              ) : customBackend.footerAction.icon === "ai" ? /* @__PURE__ */ jsxRuntime.jsx(
-                "svg",
-                {
-                  className: "ww-w-3.5 ww-h-3.5 ww-shrink-0",
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  stroke: "currentColor",
-                  strokeWidth: "2",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" })
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsxs(
-                "svg",
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-truncate", children: userContext?.pageContext?.title || userContext?.pageContext?.url || "P\xE1gina General" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-flex-1 ww-overflow-y-auto ww-p-4 ww-flex ww-flex-col ww-gap-5", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-flex ww-flex-col ww-gap-2.5", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "ww-text-[10px] ww-font-bold ww-text-muted-foreground ww-uppercase ww-tracking-wider", children: "Acciones R\xE1pidas" }),
+              clientActions && clientActions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ww-flex ww-flex-col ww-gap-2", children: clientActions.map((action) => /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
                 {
-                  className: "ww-w-3.5 ww-h-3.5 ww-shrink-0",
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  stroke: "currentColor",
-                  strokeWidth: "2",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
+                  onClick: () => executeDeclarativeSteps(action.steps, onNavigate),
+                  className: "ww-w-full ww-flex ww-flex-col ww-items-start ww-gap-1 ww-rounded-xl ww-border ww-border-border ww-p-3 ww-text-left ww-bg-background hover:ww-bg-accent/40 hover:ww-border-accent-foreground/25 active:ww-scale-[0.98] ww-transition-all ww-duration-200 ww-group",
                   children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 18v-6a9 9 0 0 1 18 0v6" }),
-                    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z" })
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-flex ww-items-center ww-gap-1.5 ww-w-full", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "svg",
+                        {
+                          className: "ww-w-3.5 ww-h-3.5 ww-text-zinc-400 group-hover:ww-text-primary group-hover:ww-rotate-12 ww-transition-transform",
+                          viewBox: "0 0 24 24",
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: "2",
+                          children: /* @__PURE__ */ jsxRuntime.jsx(
+                            "path",
+                            {
+                              strokeLinecap: "round",
+                              strokeLinejoin: "round",
+                              d: "M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-text-xs ww-font-semibold ww-text-foreground ww-truncate", children: action.name })
+                    ] }),
+                    action.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-text-[10px] ww-text-muted-foreground ww-line-clamp-2", children: action.description })
                   ]
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-flex-1 ww-text-left ww-truncate", children: customBackend.footerAction.label }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "svg",
-                {
-                  className: "ww-shrink-0 ww-w-3 ww-h-3 ww-opacity-60",
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  stroke: "currentColor",
-                  strokeWidth: "2.5",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 18l6-6-6-6" })
-                }
-              )
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ChatInput,
-          {
-            input: chat.input,
-            setInput: chat.setInput,
-            onSend: handleSend,
-            streaming: chat.streaming,
-            placeholder: messagePlaceholder,
-            accentColor: userMessageColor,
-            canRegenerate: !!canRegenerate,
-            onRegenerate: () => void chat.regenerate(),
-            selectedContext: chat.selectedContext,
-            onClearContext: () => chat.setSelectedContext(null),
-            ...enableVoice && voice.isSupported ? {
-              voiceState: voice.voiceState,
-              onVoiceStart: () => void voice.start(),
-              onVoiceStop: voice.stop
-            } : {},
-            ...enableAttachments ? {
-              attachments: attachmentHook.attachments,
-              onAttach: attachmentHook.attach,
-              onRemoveAttachment: attachmentHook.remove,
-              isUploading: attachmentHook.isUploading
-            } : {}
-          }
-        ),
-        watermark && /* @__PURE__ */ jsxRuntime.jsxs("footer", { className: "ww-shrink-0 ww-flex ww-items-center ww-justify-center ww-gap-1.5 ww-bg-muted/50 ww-py-1.5 ww-border-t ww-touch-none", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "a",
-            {
-              href: "https://wallavi.com",
-              target: "_blank",
-              rel: "noopener noreferrer",
-              className: "ww-flex ww-items-center ww-gap-1 ww-text-[10px] ww-text-muted-foreground hover:ww-text-foreground ww-transition-colors",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("img", { src: watermarkLogoUrl, alt: "Wallavi", width: 12, height: 12 }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Powered by Wallavi" })
-              ]
-            }
-          ),
-          footer && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-text-muted-foreground/40 ww-text-[10px]", children: "\xB7" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-text-[10px] ww-text-muted-foreground", children: footer })
+                },
+                action.name
+              )) }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-text-[10px] ww-text-muted-foreground ww-italic ww-px-1", children: "No hay acciones disponibles para esta p\xE1gina" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ww-flex ww-flex-col ww-gap-2.5", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "ww-text-[10px] ww-font-bold ww-text-muted-foreground ww-uppercase ww-tracking-wider", children: "Sugerencias" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ww-flex ww-flex-col ww-gap-2", children: getContextQueries(userContext?.pageContext?.url || "").map(
+                (query) => /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    onClick: () => chat.send(query.text),
+                    className: "ww-w-full ww-flex ww-items-start ww-gap-2 ww-rounded-xl ww-border ww-border-border/60 ww-p-2.5 ww-text-left ww-bg-muted/30 hover:ww-bg-accent/30 hover:ww-border-accent-foreground/20 active:ww-scale-[0.98] ww-transition-all ww-duration-200",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "svg",
+                        {
+                          className: "ww-w-3.5 ww-h-3.5 ww-text-zinc-400 ww-shrink-0 ww-mt-0.5",
+                          viewBox: "0 0 24 24",
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: "2",
+                          children: /* @__PURE__ */ jsxRuntime.jsx(
+                            "path",
+                            {
+                              strokeLinecap: "round",
+                              strokeLinejoin: "round",
+                              d: "M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.12 2.9 2.78 2.9h6.22l3.75 3.75V18.1H18c1.66 0 2.78-1.3 2.78-2.9v-7c0-1.6-1.12-2.9-2.78-2.9H5.25c-1.66 0-2.78 1.3-2.78 2.9v7z"
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ww-text-xs ww-font-medium ww-text-foreground/90", children: query.text })
+                    ]
+                  },
+                  query.text
+                )
+              ) })
+            ] })
           ] })
         ] })
       ]
@@ -2841,6 +3140,7 @@ var EMPTY = {
   keyboardShortcut: false,
   position: "bottom-right",
   widgetLayout: "bubble",
+  clientActions: [],
   bubbleSize: 52,
   panelWidth: 360,
   panelHeight: 580,
@@ -2884,6 +3184,8 @@ function useAutoConfig(agentId, enabled) {
         remote.widgetLayout = cfg.widgetLayout;
       if (cfg.enableVoice != null)
         remote.enableVoice = cfg.enableVoice;
+      if (cfg.clientActions)
+        remote.clientActions = cfg.clientActions;
       setResult({
         remoteConfig: remote,
         bubbleIconUrl: cfg.chatIcon || cfg.profilePicture || void 0,
@@ -2891,6 +3193,7 @@ function useAutoConfig(agentId, enabled) {
         keyboardShortcut: Boolean(cfg.keyboardShortcut),
         position: cfg.alignChatBubbleButton === "left" ? "bottom-left" : "bottom-right",
         widgetLayout: cfg.widgetLayout === "center" ? "center" : "bubble",
+        clientActions: Array.isArray(cfg.clientActions) ? cfg.clientActions : [],
         bubbleSize: typeof cfg.bubbleSize === "number" ? cfg.bubbleSize : 52,
         panelWidth: typeof cfg.panelWidth === "number" ? cfg.panelWidth : 360,
         panelHeight: typeof cfg.panelHeight === "number" ? cfg.panelHeight : 580,