@banbox/chat 1.0.7 → 1.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +110 -73
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +4 -2
- package/dist/index.d.ts +4 -2
- package/dist/index.js +108 -71
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/chat/InboxPopup.tsx +78 -26
- package/src/ui/chat/ChatHeader.tsx +7 -4
- package/src/ui/chat/ChatListHeader.tsx +48 -24
- package/src/ui/chat/ChatScroll.tsx +23 -16
- package/src/ui/chat/ChatThreadItem.tsx +8 -15
package/dist/index.js
CHANGED
|
@@ -2,7 +2,7 @@ import { AnimatePresence, motion } from 'framer-motion';
|
|
|
2
2
|
import { createPortal } from 'react-dom';
|
|
3
3
|
import React10, { createContext, useContext, useRef, useState, useEffect, useMemo, useCallback } from 'react';
|
|
4
4
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
5
|
-
import
|
|
5
|
+
import clsx18, { clsx } from 'clsx';
|
|
6
6
|
import { twMerge } from 'tailwind-merge';
|
|
7
7
|
import _Lottie from 'lottie-react';
|
|
8
8
|
|
|
@@ -29,7 +29,7 @@ function styleInject(css, { insertAt } = {}) {
|
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
// src/styles/index.css
|
|
32
|
-
styleInject('/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n :root,\n :host {\n --font-sans:\n ui-sans-serif,\n system-ui,\n sans-serif,\n "Apple Color Emoji",\n "Segoe UI Emoji",\n "Segoe UI Symbol",\n "Noto Color Emoji";\n --font-mono:\n ui-monospace,\n SFMono-Regular,\n Menlo,\n Monaco,\n Consolas,\n "Liberation Mono",\n "Courier New",\n monospace;\n --color-gray-50: oklch(98.5% 0.002 247.839);\n --color-black: #000;\n --color-white: #fff;\n --spacing: 0.25rem;\n --text-xs: 0.75rem;\n --text-xs--line-height: calc(1 / 0.75);\n --text-sm: 0.875rem;\n --text-sm--line-height: calc(1.25 / 0.875);\n --text-lg: 1.125rem;\n --text-lg--line-height: calc(1.75 / 1.125);\n --text-xl: 1.25rem;\n --text-xl--line-height: calc(1.75 / 1.25);\n --text-2xl: 1.5rem;\n --text-2xl--line-height: calc(2 / 1.5);\n --text-4xl: 2.25rem;\n --text-4xl--line-height: calc(2.5 / 2.25);\n --font-weight-light: 300;\n --font-weight-normal: 400;\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --tracking-wide: 0.025em;\n --leading-relaxed: 1.625;\n --radius-xs: 0.125rem;\n --radius-sm: 0.25rem;\n --radius-md: 0.375rem;\n --radius-lg: 0.5rem;\n --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n --default-transition-duration: 150ms;\n --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n --default-font-family: var(--font-sans);\n --default-mono-font-family: var(--font-mono);\n }\n}\n@layer base {\n *,\n ::after,\n ::before,\n ::backdrop,\n ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html,\n :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n b,\n strong {\n font-weight: bolder;\n }\n code,\n kbd,\n samp,\n pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n small {\n font-size: 80%;\n }\n sub,\n sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n :-moz-focusring {\n outline: auto;\n }\n progress {\n vertical-align: baseline;\n }\n summary {\n display: list-item;\n }\n ol,\n ul,\n menu {\n list-style: none;\n }\n img,\n svg,\n video,\n canvas,\n audio,\n iframe,\n embed,\n object {\n display: block;\n vertical-align: middle;\n }\n img,\n video {\n max-width: 100%;\n height: auto;\n }\n button,\n input,\n select,\n optgroup,\n textarea,\n ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n ::placeholder {\n opacity: 1;\n }\n @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n textarea {\n resize: vertical;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n ::-webkit-datetime-edit,\n ::-webkit-datetime-edit-year-field,\n ::-webkit-datetime-edit-month-field,\n ::-webkit-datetime-edit-day-field,\n ::-webkit-datetime-edit-hour-field,\n ::-webkit-datetime-edit-minute-field,\n ::-webkit-datetime-edit-second-field,\n ::-webkit-datetime-edit-millisecond-field,\n ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n ::-webkit-calendar-picker-indicator {\n line-height: 1;\n }\n :-moz-ui-invalid {\n box-shadow: none;\n }\n button,\n input:where([type=button], [type=reset], [type=submit]),\n ::file-selector-button {\n appearance: button;\n }\n ::-webkit-inner-spin-button,\n ::-webkit-outer-spin-button {\n height: auto;\n }\n [hidden]:where(:not([hidden=until-found])) {\n display: none !important;\n }\n}\n@layer utilities {\n .pointer-events-auto {\n pointer-events: auto;\n }\n .pointer-events-none {\n pointer-events: none;\n }\n .visible {\n visibility: visible;\n }\n .absolute {\n position: absolute;\n }\n .fixed {\n position: fixed;\n }\n .relative {\n position: relative;\n }\n .static {\n position: static;\n }\n .inset-0 {\n inset: calc(var(--spacing) * 0);\n }\n .inset-x-0 {\n inset-inline: calc(var(--spacing) * 0);\n }\n .inset-y-0 {\n inset-block: calc(var(--spacing) * 0);\n }\n .top-0 {\n top: calc(var(--spacing) * 0);\n }\n .top-1\\/2 {\n top: calc(1 / 2 * 100%);\n }\n .top-\\[-4px\\] {\n top: -4px;\n }\n .top-full {\n top: 100%;\n }\n .right-0 {\n right: calc(var(--spacing) * 0);\n }\n .right-3 {\n right: calc(var(--spacing) * 3);\n }\n .right-4 {\n right: calc(var(--spacing) * 4);\n }\n .right-6 {\n right: calc(var(--spacing) * 6);\n }\n .right-\\[-63px\\] {\n right: -63px;\n }\n .right-full {\n right: 100%;\n }\n .-bottom-2 {\n bottom: calc(var(--spacing) * -2);\n }\n .bottom-0 {\n bottom: calc(var(--spacing) * 0);\n }\n .bottom-4 {\n bottom: calc(var(--spacing) * 4);\n }\n .bottom-6 {\n bottom: calc(var(--spacing) * 6);\n }\n .bottom-\\[-13px\\] {\n bottom: -13px;\n }\n .bottom-full {\n bottom: 100%;\n }\n .left-0 {\n left: calc(var(--spacing) * 0);\n }\n .left-1\\/2 {\n left: calc(1 / 2 * 100%);\n }\n .left-6 {\n left: calc(var(--spacing) * 6);\n }\n .left-\\[30px\\] {\n left: 30px;\n }\n .left-full {\n left: 100%;\n }\n .z-10 {\n z-index: 10;\n }\n .z-50 {\n z-index: 50;\n }\n .z-70 {\n z-index: 70;\n }\n .z-71 {\n z-index: 71;\n }\n .z-999 {\n z-index: 999;\n }\n .z-9999 {\n z-index: 9999;\n }\n .z-10000 {\n z-index: 10000;\n }\n .z-\\[10002\\] {\n z-index: 10002;\n }\n .container {\n width: 100%;\n @media (width >= 40rem) {\n max-width: 40rem;\n }\n @media (width >= 48rem) {\n max-width: 48rem;\n }\n @media (width >= 64rem) {\n max-width: 64rem;\n }\n @media (width >= 80rem) {\n max-width: 80rem;\n }\n @media (width >= 96rem) {\n max-width: 96rem;\n }\n }\n .mx-auto {\n margin-inline: auto;\n }\n .ms-1 {\n margin-inline-start: calc(var(--spacing) * 1);\n }\n .ms-\\[3px\\] {\n margin-inline-start: 3px;\n }\n .ms-\\[12px\\] {\n margin-inline-start: 12px;\n }\n .me-1 {\n margin-inline-end: calc(var(--spacing) * 1);\n }\n .mt-0\\.5 {\n margin-top: calc(var(--spacing) * 0.5);\n }\n .mt-1 {\n margin-top: calc(var(--spacing) * 1);\n }\n .mt-2 {\n margin-top: calc(var(--spacing) * 2);\n }\n .mt-3 {\n margin-top: calc(var(--spacing) * 3);\n }\n .mt-4 {\n margin-top: calc(var(--spacing) * 4);\n }\n .mt-6 {\n margin-top: calc(var(--spacing) * 6);\n }\n .mt-\\[2px\\] {\n margin-top: 2px;\n }\n .mt-\\[6px\\] {\n margin-top: 6px;\n }\n .mr-2 {\n margin-right: calc(var(--spacing) * 2);\n }\n .mr-auto {\n margin-right: auto;\n }\n .mb-0 {\n margin-bottom: calc(var(--spacing) * 0);\n }\n .mb-0\\.5 {\n margin-bottom: calc(var(--spacing) * 0.5);\n }\n .mb-1 {\n margin-bottom: calc(var(--spacing) * 1);\n }\n .mb-1\\.5 {\n margin-bottom: calc(var(--spacing) * 1.5);\n }\n .mb-2 {\n margin-bottom: calc(var(--spacing) * 2);\n }\n .mb-4 {\n margin-bottom: calc(var(--spacing) * 4);\n }\n .mb-5 {\n margin-bottom: calc(var(--spacing) * 5);\n }\n .mb-10 {\n margin-bottom: calc(var(--spacing) * 10);\n }\n .mb-\\[24px\\] {\n margin-bottom: 24px;\n }\n .-ml-\\[5px\\] {\n margin-left: calc(5px * -1);\n }\n .ml-\\[2px\\] {\n margin-left: 2px;\n }\n .ml-\\[4px\\] {\n margin-left: 4px;\n }\n .ml-auto {\n margin-left: auto;\n }\n .block {\n display: block;\n }\n .flex {\n display: flex;\n }\n .grid {\n display: grid;\n }\n .hidden {\n display: none;\n }\n .inline {\n display: inline;\n }\n .inline-block {\n display: inline-block;\n }\n .inline-flex {\n display: inline-flex;\n }\n .h-0 {\n height: calc(var(--spacing) * 0);\n }\n .h-2\\.5 {\n height: calc(var(--spacing) * 2.5);\n }\n .h-3 {\n height: calc(var(--spacing) * 3);\n }\n .h-3\\.5 {\n height: calc(var(--spacing) * 3.5);\n }\n .h-4 {\n height: calc(var(--spacing) * 4);\n }\n .h-5 {\n height: calc(var(--spacing) * 5);\n }\n .h-6 {\n height: calc(var(--spacing) * 6);\n }\n .h-7 {\n height: calc(var(--spacing) * 7);\n }\n .h-8 {\n height: calc(var(--spacing) * 8);\n }\n .h-9 {\n height: calc(var(--spacing) * 9);\n }\n .h-10 {\n height: calc(var(--spacing) * 10);\n }\n .h-\\[1\\.17px\\] {\n height: 1.17px;\n }\n .h-\\[4px\\] {\n height: 4px;\n }\n .h-\\[5\\.5px\\] {\n height: 5.5px;\n }\n .h-\\[11\\.25px\\] {\n height: 11.25px;\n }\n .h-\\[14px\\] {\n height: 14px;\n }\n .h-\\[17\\.5px\\] {\n height: 17.5px;\n }\n .h-\\[18px\\] {\n height: 18px;\n }\n .h-\\[21px\\] {\n height: 21px;\n }\n .h-\\[22px\\] {\n height: 22px;\n }\n .h-\\[26px\\] {\n height: 26px;\n }\n .h-\\[28px\\] {\n height: 28px;\n }\n .h-\\[30px\\] {\n height: 30px;\n }\n .h-\\[32px\\] {\n height: 32px;\n }\n .h-\\[34px\\] {\n height: 34px;\n }\n .h-\\[36px\\] {\n height: 36px;\n }\n .h-\\[40px\\] {\n height: 40px;\n }\n .h-\\[41px\\] {\n height: 41px;\n }\n .h-\\[44px\\] {\n height: 44px;\n }\n .h-\\[46px\\] {\n height: 46px;\n }\n .h-\\[52px\\] {\n height: 52px;\n }\n .h-\\[64px\\] {\n height: 64px;\n }\n .h-\\[65px\\] {\n height: 65px;\n }\n .h-\\[75px\\] {\n height: 75px;\n }\n .h-\\[100px\\] {\n height: 100px;\n }\n .h-\\[208px\\] {\n height: 208px;\n }\n .h-\\[650px\\] {\n height: 650px;\n }\n .h-full {\n height: 100%;\n }\n .h-px {\n height: 1px;\n }\n .max-h-\\[200px\\] {\n max-height: 200px;\n }\n .min-h-0 {\n min-height: calc(var(--spacing) * 0);\n }\n .min-h-\\[50px\\] {\n min-height: 50px;\n }\n .min-h-full {\n min-height: 100%;\n }\n .w-0 {\n width: calc(var(--spacing) * 0);\n }\n .w-2 {\n width: calc(var(--spacing) * 2);\n }\n .w-2\\.5 {\n width: calc(var(--spacing) * 2.5);\n }\n .w-3 {\n width: calc(var(--spacing) * 3);\n }\n .w-3\\.5 {\n width: calc(var(--spacing) * 3.5);\n }\n .w-4 {\n width: calc(var(--spacing) * 4);\n }\n .w-5 {\n width: calc(var(--spacing) * 5);\n }\n .w-6 {\n width: calc(var(--spacing) * 6);\n }\n .w-8 {\n width: calc(var(--spacing) * 8);\n }\n .w-9 {\n width: calc(var(--spacing) * 9);\n }\n .w-10 {\n width: calc(var(--spacing) * 10);\n }\n .w-\\[5\\.5px\\] {\n width: 5.5px;\n }\n .w-\\[11\\.25px\\] {\n width: 11.25px;\n }\n .w-\\[14px\\] {\n width: 14px;\n }\n .w-\\[18\\.08px\\] {\n width: 18.08px;\n }\n .w-\\[18px\\] {\n width: 18px;\n }\n .w-\\[22px\\] {\n width: 22px;\n }\n .w-\\[26px\\] {\n width: 26px;\n }\n .w-\\[28px\\] {\n width: 28px;\n }\n .w-\\[34px\\] {\n width: 34px;\n }\n .w-\\[36px\\] {\n width: 36px;\n }\n .w-\\[40px\\] {\n width: 40px;\n }\n .w-\\[44px\\] {\n width: 44px;\n }\n .w-\\[46px\\] {\n width: 46px;\n }\n .w-\\[65px\\] {\n width: 65px;\n }\n .w-\\[105px\\] {\n width: 105px;\n }\n .w-\\[130px\\] {\n width: 130px;\n }\n .w-\\[186px\\] {\n width: 186px;\n }\n .w-\\[340px\\] {\n width: 340px;\n }\n .w-\\[355px\\] {\n width: 355px;\n }\n .w-\\[420px\\] {\n width: 420px;\n }\n .w-\\[450px\\] {\n width: 450px;\n }\n .w-\\[500px\\] {\n width: 500px;\n }\n .w-fit {\n width: fit-content;\n }\n .w-full {\n width: 100%;\n }\n .w-px {\n width: 1px;\n }\n .max-w-\\[95vw\\] {\n max-width: 95vw;\n }\n .max-w-\\[110px\\] {\n max-width: 110px;\n }\n .max-w-\\[151px\\] {\n max-width: 151px;\n }\n .max-w-\\[185px\\] {\n max-width: 185px;\n }\n .max-w-\\[200px\\] {\n max-width: 200px;\n }\n .max-w-\\[260px\\] {\n max-width: 260px;\n }\n .max-w-\\[289px\\] {\n max-width: 289px;\n }\n .max-w-\\[300px\\] {\n max-width: 300px;\n }\n .max-w-\\[410px\\] {\n max-width: 410px;\n }\n .min-w-0 {\n min-width: calc(var(--spacing) * 0);\n }\n .flex-1 {\n flex: 1;\n }\n .shrink-0 {\n flex-shrink: 0;\n }\n .-translate-x-1\\.5 {\n --tw-translate-x: calc(var(--spacing) * -1.5);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .-translate-x-1\\/2 {\n --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .translate-x-1\\.5 {\n --tw-translate-x: calc(var(--spacing) * 1.5);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .-translate-y-1\\/2 {\n --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .rotate-45 {\n rotate: 45deg;\n }\n .rotate-180 {\n rotate: 180deg;\n }\n .transform {\n transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n }\n .cursor-auto\\! {\n cursor: auto !important;\n }\n .cursor-default {\n cursor: default;\n }\n .cursor-not-allowed {\n cursor: not-allowed;\n }\n .cursor-pointer {\n cursor: pointer;\n }\n .cursor-zoom-in {\n cursor: zoom-in;\n }\n .resize {\n resize: both;\n }\n .resize-none {\n resize: none;\n }\n .grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .grid-cols-7 {\n grid-template-columns: repeat(7, minmax(0, 1fr));\n }\n .grid-cols-\\[1fr_310px\\] {\n grid-template-columns: 1fr 310px;\n }\n .grid-cols-\\[18px_120px_1fr\\] {\n grid-template-columns: 18px 120px 1fr;\n }\n .grid-cols-\\[125px_125px\\] {\n grid-template-columns: 125px 125px;\n }\n .flex-col {\n flex-direction: column;\n }\n .place-items-center {\n place-items: center;\n }\n .items-center {\n align-items: center;\n }\n .items-end {\n align-items: flex-end;\n }\n .items-start {\n align-items: flex-start;\n }\n .items-stretch {\n align-items: stretch;\n }\n .justify-between {\n justify-content: space-between;\n }\n .justify-center {\n justify-content: center;\n }\n .justify-end {\n justify-content: flex-end;\n }\n .justify-start {\n justify-content: flex-start;\n }\n .gap-0 {\n gap: calc(var(--spacing) * 0);\n }\n .gap-1 {\n gap: calc(var(--spacing) * 1);\n }\n .gap-1\\.5 {\n gap: calc(var(--spacing) * 1.5);\n }\n .gap-2 {\n gap: calc(var(--spacing) * 2);\n }\n .gap-3 {\n gap: calc(var(--spacing) * 3);\n }\n .gap-4 {\n gap: calc(var(--spacing) * 4);\n }\n .space-y-1\\.5 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-\\[2px\\] {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(2px * var(--tw-space-y-reverse));\n margin-block-end: calc(2px * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .overflow-hidden {\n overflow: hidden;\n }\n .overflow-visible {\n overflow: visible;\n }\n .overflow-x-auto {\n overflow-x: auto;\n }\n .overflow-y-auto {\n overflow-y: auto;\n }\n .rounded {\n border-radius: 0.25rem;\n }\n .rounded-\\[2\\.33px\\] {\n border-radius: 2.33px;\n }\n .rounded-\\[3\\.5px\\] {\n border-radius: 3.5px;\n }\n .rounded-\\[3px\\] {\n border-radius: 3px;\n }\n .rounded-\\[4px\\] {\n border-radius: 4px;\n }\n .rounded-\\[6px\\] {\n border-radius: 6px;\n }\n .rounded-\\[12px\\] {\n border-radius: 12px;\n }\n .rounded-\\[14px\\] {\n border-radius: 14px;\n }\n .rounded-\\[18px\\] {\n border-radius: 18px;\n }\n .rounded-\\[20px\\] {\n border-radius: 20px;\n }\n .rounded-full {\n border-radius: calc(infinity * 1px);\n }\n .rounded-lg {\n border-radius: var(--radius-lg);\n }\n .rounded-md {\n border-radius: var(--radius-md);\n }\n .rounded-sm {\n border-radius: var(--radius-sm);\n }\n .rounded-xs {\n border-radius: var(--radius-xs);\n }\n .rounded-t-md {\n border-top-left-radius: var(--radius-md);\n border-top-right-radius: var(--radius-md);\n }\n .rounded-tl-\\[3px\\] {\n border-top-left-radius: 3px;\n }\n .rounded-tl-md {\n border-top-left-radius: var(--radius-md);\n }\n .rounded-tr-\\[3px\\] {\n border-top-right-radius: 3px;\n }\n .rounded-tr-\\[6px\\] {\n border-top-right-radius: 6px;\n }\n .rounded-b-md {\n border-bottom-right-radius: var(--radius-md);\n border-bottom-left-radius: var(--radius-md);\n }\n .rounded-br-\\[3px\\] {\n border-bottom-right-radius: 3px;\n }\n .rounded-bl-\\[3px\\] {\n border-bottom-left-radius: 3px;\n }\n .border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n .border-\\[0\\.7px\\] {\n border-style: var(--tw-border-style);\n border-width: 0.7px;\n }\n .border-t {\n border-top-style: var(--tw-border-style);\n border-top-width: 1px;\n }\n .border-t-16 {\n border-top-style: var(--tw-border-style);\n border-top-width: 16px;\n }\n .border-t-\\[5px\\] {\n border-top-style: var(--tw-border-style);\n border-top-width: 5px;\n }\n .border-r {\n border-right-style: var(--tw-border-style);\n border-right-width: 1px;\n }\n .border-r-\\[5px\\] {\n border-right-style: var(--tw-border-style);\n border-right-width: 5px;\n }\n .border-b {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\n }\n .border-l {\n border-left-style: var(--tw-border-style);\n border-left-width: 1px;\n }\n .border-l-2 {\n border-left-style: var(--tw-border-style);\n border-left-width: 2px;\n }\n .border-l-16 {\n border-left-style: var(--tw-border-style);\n border-left-width: 16px;\n }\n .border-l-\\[5px\\] {\n border-left-style: var(--tw-border-style);\n border-left-width: 5px;\n }\n .border-none {\n --tw-border-style: none;\n border-style: none;\n }\n .border-\\[\\#00b8d4\\] {\n border-color: #00b8d4;\n }\n .border-\\[\\#3D3D3D\\] {\n border-color: #3D3D3D;\n }\n .border-\\[\\#3d3d3d\\] {\n border-color: #3d3d3d;\n }\n .border-\\[\\#3d6b42\\] {\n border-color: #3d6b42;\n }\n .border-\\[\\#6A6A6A\\] {\n border-color: #6A6A6A;\n }\n .border-\\[\\#9BBCCF\\] {\n border-color: #9BBCCF;\n }\n .border-\\[\\#005694\\] {\n border-color: #005694;\n }\n .border-\\[\\#086600\\] {\n border-color: #086600;\n }\n .border-\\[\\#CCCCCC\\] {\n border-color: #CCCCCC;\n }\n .border-\\[\\#D8D8D8\\] {\n border-color: #D8D8D8;\n }\n .border-\\[\\#E5E5E5\\] {\n border-color: #E5E5E5;\n }\n .border-\\[\\#EFEFEF\\] {\n border-color: #EFEFEF;\n }\n .border-\\[\\#F1F1F1\\] {\n border-color: #F1F1F1;\n }\n .border-\\[\\#FF5300\\] {\n border-color: #FF5300;\n }\n .border-\\[\\#cacaca\\] {\n border-color: #cacaca;\n }\n .border-\\[\\#e1e1e1\\] {\n border-color: #e1e1e1;\n }\n .border-\\[\\#ededed\\] {\n border-color: #ededed;\n }\n .border-\\[\\#ef4444\\] {\n border-color: #ef4444;\n }\n .border-\\[\\#f1f1f1\\] {\n border-color: #f1f1f1;\n }\n .border-\\[\\#f8f8f8\\] {\n border-color: #f8f8f8;\n }\n .border-\\[\\#f59e0b\\] {\n border-color: #f59e0b;\n }\n .border-transparent {\n border-color: transparent;\n }\n .border-t-\\[\\#636363\\] {\n border-top-color: #636363;\n }\n .border-t-\\[\\#FFD2BD\\] {\n border-top-color: #FFD2BD;\n }\n .border-t-transparent {\n border-top-color: transparent;\n }\n .border-r-transparent {\n border-right-color: transparent;\n }\n .border-l-transparent {\n border-left-color: transparent;\n }\n .\\!bg-\\[\\#636363\\] {\n background-color: #636363 !important;\n }\n .bg-\\[\\#00b8d4\\] {\n background-color: #00b8d4;\n }\n .bg-\\[\\#00b8d4\\]\\/10 {\n background-color: color-mix(in oklab, #00b8d4 10%, transparent);\n }\n .bg-\\[\\#1E8E3E\\] {\n background-color: #1E8E3E;\n }\n .bg-\\[\\#3D3D3D\\] {\n background-color: #3D3D3D;\n }\n .bg-\\[\\#3D3D3D\\]\\/10 {\n background-color: color-mix(in oklab, #3D3D3D 10%, transparent);\n }\n .bg-\\[\\#3d3d3d\\] {\n background-color: #3d3d3d;\n }\n .bg-\\[\\#3d6b42\\] {\n background-color: #3d6b42;\n }\n .bg-\\[\\#3d6b42\\]\\/10 {\n background-color: color-mix(in oklab, #3d6b42 10%, transparent);\n }\n .bg-\\[\\#005694\\] {\n background-color: #005694;\n }\n .bg-\\[\\#086600\\] {\n background-color: #086600;\n }\n .bg-\\[\\#328545\\] {\n background-color: #328545;\n }\n .bg-\\[\\#636363\\] {\n background-color: #636363;\n }\n .bg-\\[\\#747474\\] {\n background-color: #747474;\n }\n .bg-\\[\\#BDBDBD\\] {\n background-color: #BDBDBD;\n }\n .bg-\\[\\#E0EFF8\\] {\n background-color: #E0EFF8;\n }\n .bg-\\[\\#E6F5E6\\] {\n background-color: #E6F5E6;\n }\n .bg-\\[\\#E7E7E7\\] {\n background-color: #E7E7E7;\n }\n .bg-\\[\\#F1F1F1\\] {\n background-color: #F1F1F1;\n }\n .bg-\\[\\#F5F7FA\\] {\n background-color: #F5F7FA;\n }\n .bg-\\[\\#F7F7F7\\] {\n background-color: #F7F7F7;\n }\n .bg-\\[\\#FF5300\\] {\n background-color: #FF5300;\n }\n .bg-\\[\\#FFDBCF\\] {\n background-color: #FFDBCF;\n }\n .bg-\\[\\#FFE9DB\\] {\n background-color: #FFE9DB;\n }\n .bg-\\[\\#FFEAE0\\] {\n background-color: #FFEAE0;\n }\n .bg-\\[\\#cacaca\\] {\n background-color: #cacaca;\n }\n .bg-\\[\\#e1e1e1\\] {\n background-color: #e1e1e1;\n }\n .bg-\\[\\#eb2127\\] {\n background-color: #eb2127;\n }\n .bg-\\[\\#ececec\\] {\n background-color: #ececec;\n }\n .bg-\\[\\#ef4444\\] {\n background-color: #ef4444;\n }\n .bg-\\[\\#ef4444\\]\\/10 {\n background-color: color-mix(in oklab, #ef4444 10%, transparent);\n }\n .bg-\\[\\#f1f1f1\\] {\n background-color: #f1f1f1;\n }\n .bg-\\[\\#f8f8f8\\] {\n background-color: #f8f8f8;\n }\n .bg-\\[\\#f59e0b\\] {\n background-color: #f59e0b;\n }\n .bg-\\[\\#f59e0b\\]\\/10 {\n background-color: color-mix(in oklab, #f59e0b 10%, transparent);\n }\n .bg-\\[\\#ff5200\\] {\n background-color: #ff5200;\n }\n .bg-black {\n background-color: var(--color-black);\n }\n .bg-black\\/5 {\n background-color: color-mix(in srgb, #000 5%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-black) 5%, transparent);\n }\n }\n .bg-black\\/30 {\n background-color: color-mix(in srgb, #000 30%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-black) 30%, transparent);\n }\n }\n .bg-black\\/35 {\n background-color: color-mix(in srgb, #000 35%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-black) 35%, transparent);\n }\n }\n .bg-black\\/40 {\n background-color: color-mix(in srgb, #000 40%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-black) 40%, transparent);\n }\n }\n .bg-transparent {\n background-color: transparent;\n }\n .bg-white {\n background-color: var(--color-white);\n }\n .bg-cover {\n background-size: cover;\n }\n .bg-no-repeat {\n background-repeat: no-repeat;\n }\n .object-contain {\n object-fit: contain;\n }\n .object-cover {\n object-fit: cover;\n }\n .p-1 {\n padding: calc(var(--spacing) * 1);\n }\n .p-2 {\n padding: calc(var(--spacing) * 2);\n }\n .p-3 {\n padding: calc(var(--spacing) * 3);\n }\n .p-3\\.5 {\n padding: calc(var(--spacing) * 3.5);\n }\n .p-4 {\n padding: calc(var(--spacing) * 4);\n }\n .p-\\[1\\.75px\\] {\n padding: 1.75px;\n }\n .p-\\[2px\\] {\n padding: 2px;\n }\n .p-\\[3px\\] {\n padding: 3px;\n }\n .p-\\[7px\\] {\n padding: 7px;\n }\n .p-px {\n padding: 1px;\n }\n .px-2 {\n padding-inline: calc(var(--spacing) * 2);\n }\n .px-2\\.5 {\n padding-inline: calc(var(--spacing) * 2.5);\n }\n .px-3 {\n padding-inline: calc(var(--spacing) * 3);\n }\n .px-4 {\n padding-inline: calc(var(--spacing) * 4);\n }\n .px-5 {\n padding-inline: calc(var(--spacing) * 5);\n }\n .px-6 {\n padding-inline: calc(var(--spacing) * 6);\n }\n .px-\\[3px\\] {\n padding-inline: 3px;\n }\n .px-\\[4px\\] {\n padding-inline: 4px;\n }\n .px-\\[10px\\] {\n padding-inline: 10px;\n }\n .px-\\[12px\\] {\n padding-inline: 12px;\n }\n .px-\\[14px\\] {\n padding-inline: 14px;\n }\n .px-\\[16px\\] {\n padding-inline: 16px;\n }\n .px-\\[18px\\] {\n padding-inline: 18px;\n }\n .px-\\[20px\\] {\n padding-inline: 20px;\n }\n .py-1\\.5 {\n padding-block: calc(var(--spacing) * 1.5);\n }\n .py-2 {\n padding-block: calc(var(--spacing) * 2);\n }\n .py-2\\.5 {\n padding-block: calc(var(--spacing) * 2.5);\n }\n .py-6 {\n padding-block: calc(var(--spacing) * 6);\n }\n .py-\\[2px\\] {\n padding-block: 2px;\n }\n .py-\\[3px\\] {\n padding-block: 3px;\n }\n .py-\\[7px\\] {\n padding-block: 7px;\n }\n .ps-\\[16px\\] {\n padding-inline-start: 16px;\n }\n .pe-\\[4px\\] {\n padding-inline-end: 4px;\n }\n .pe-\\[30px\\] {\n padding-inline-end: 30px;\n }\n .pt-1 {\n padding-top: calc(var(--spacing) * 1);\n }\n .pt-\\[2px\\] {\n padding-top: 2px;\n }\n .pt-\\[24px\\] {\n padding-top: 24px;\n }\n .pr-1\\.5 {\n padding-right: calc(var(--spacing) * 1.5);\n }\n .pr-2 {\n padding-right: calc(var(--spacing) * 2);\n }\n .pb-1 {\n padding-bottom: calc(var(--spacing) * 1);\n }\n .pb-2 {\n padding-bottom: calc(var(--spacing) * 2);\n }\n .pb-10 {\n padding-bottom: calc(var(--spacing) * 10);\n }\n .pb-\\[2px\\] {\n padding-bottom: 2px;\n }\n .text-left {\n text-align: left;\n }\n .text-right {\n text-align: right;\n }\n .text-2xl {\n font-size: var(--text-2xl);\n line-height: var(--tw-leading, var(--text-2xl--line-height));\n }\n .text-4xl {\n font-size: var(--text-4xl);\n line-height: var(--tw-leading, var(--text-4xl--line-height));\n }\n .text-lg {\n font-size: var(--text-lg);\n line-height: var(--tw-leading, var(--text-lg--line-height));\n }\n .text-sm {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n .text-xl {\n font-size: var(--text-xl);\n line-height: var(--tw-leading, var(--text-xl--line-height));\n }\n .text-xs {\n font-size: var(--text-xs);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n }\n .text-\\[10px\\] {\n font-size: 10px;\n }\n .text-\\[12px\\] {\n font-size: 12px;\n }\n .text-\\[13px\\] {\n font-size: 13px;\n }\n .text-\\[14px\\] {\n font-size: 14px;\n }\n .text-\\[15px\\] {\n font-size: 15px;\n }\n .text-\\[16px\\] {\n font-size: 16px;\n }\n .text-\\[20px\\] {\n font-size: 20px;\n }\n .text-\\[22px\\] {\n font-size: 22px;\n }\n .leading-4 {\n --tw-leading: calc(var(--spacing) * 4);\n line-height: calc(var(--spacing) * 4);\n }\n .leading-relaxed {\n --tw-leading: var(--leading-relaxed);\n line-height: var(--leading-relaxed);\n }\n .font-light {\n --tw-font-weight: var(--font-weight-light);\n font-weight: var(--font-weight-light);\n }\n .font-medium {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: var(--font-weight-medium);\n }\n .font-normal {\n --tw-font-weight: var(--font-weight-normal);\n font-weight: var(--font-weight-normal);\n }\n .font-semibold {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n .tracking-\\[0\\.4px\\] {\n --tw-tracking: 0.4px;\n letter-spacing: 0.4px;\n }\n .tracking-wide {\n --tw-tracking: var(--tracking-wide);\n letter-spacing: var(--tracking-wide);\n }\n .break-words {\n overflow-wrap: break-word;\n }\n .whitespace-nowrap {\n white-space: nowrap;\n }\n .whitespace-pre-wrap {\n white-space: pre-wrap;\n }\n .text-\\[\\#0D5EA8\\] {\n color: #0D5EA8;\n }\n .text-\\[\\#0F0F0F\\] {\n color: #0F0F0F;\n }\n .text-\\[\\#00b8d4\\] {\n color: #00b8d4;\n }\n .text-\\[\\#1E9E6A\\] {\n color: #1E9E6A;\n }\n .text-\\[\\#2B579A\\] {\n color: #2B579A;\n }\n .text-\\[\\#2c2c2c\\] {\n color: #2c2c2c;\n }\n .text-\\[\\#3D3D3D\\] {\n color: #3D3D3D;\n }\n .text-\\[\\#3d6b42\\] {\n color: #3d6b42;\n }\n .text-\\[\\#004F4F\\] {\n color: #004F4F;\n }\n .text-\\[\\#6B7280\\] {\n color: #6B7280;\n }\n .text-\\[\\#9AA1A9\\] {\n color: #9AA1A9;\n }\n .text-\\[\\#9C9C9C\\] {\n color: #9C9C9C;\n }\n .text-\\[\\#9ca3af\\] {\n color: #9ca3af;\n }\n .text-\\[\\#00486F\\] {\n color: #00486F;\n }\n .text-\\[\\#005694\\] {\n color: #005694;\n }\n .text-\\[\\#086600\\] {\n color: #086600;\n }\n .text-\\[\\#636363\\] {\n color: #636363;\n }\n .text-\\[\\#747474\\] {\n color: #747474;\n }\n .text-\\[\\#929292\\] {\n color: #929292;\n }\n .text-\\[\\#B7B7B7\\] {\n color: #B7B7B7;\n }\n .text-\\[\\#B9C3D4\\] {\n color: #B9C3D4;\n }\n .text-\\[\\#D93025\\] {\n color: #D93025;\n }\n .text-\\[\\#E63946\\] {\n color: #E63946;\n }\n .text-\\[\\#E69138\\] {\n color: #E69138;\n }\n .text-\\[\\#EA580C\\] {\n color: #EA580C;\n }\n .text-\\[\\#FF5300\\] {\n color: #FF5300;\n }\n .text-\\[\\#ef4444\\] {\n color: #ef4444;\n }\n .text-\\[\\#f59e0b\\] {\n color: #f59e0b;\n }\n .text-\\[\\#ff5301\\] {\n color: #ff5301;\n }\n .text-black {\n color: var(--color-black);\n }\n .text-white {\n color: var(--color-white);\n }\n .uppercase {\n text-transform: uppercase;\n }\n .opacity-0 {\n opacity: 0%;\n }\n .opacity-30 {\n opacity: 30%;\n }\n .opacity-50 {\n opacity: 50%;\n }\n .opacity-100 {\n opacity: 100%;\n }\n .shadow-\\[-3px_0px_6px_0px_rgba\\(0\\,0\\,0\\,0\\.1\\)\\] {\n --tw-shadow: -3px 0px 6px 0px var(--tw-shadow-color, rgba(0,0,0,0.1));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .shadow-\\[0_1px_2px_rgba\\(0\\,0\\,0\\,0\\.04\\)\\] {\n --tw-shadow: 0 1px 2px var(--tw-shadow-color, rgba(0,0,0,0.04));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .shadow-\\[0_1px_3px_rgba\\(0\\,0\\,0\\,0\\.08\\)\\] {\n --tw-shadow: 0 1px 3px var(--tw-shadow-color, rgba(0,0,0,0.08));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .shadow-\\[0_2px_8px_rgba\\(0\\,0\\,0\\,0\\.15\\)\\] {\n --tw-shadow: 0 2px 8px var(--tw-shadow-color, rgba(0,0,0,0.15));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .shadow-\\[0_2px_12px_rgba\\(59\\,51\\,51\\,0\\.1\\)\\] {\n --tw-shadow: 0 2px 12px var(--tw-shadow-color, rgba(59,51,51,0.1));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .shadow-\\[0_4px_16px_rgba\\(0\\,0\\,0\\,0\\.08\\)\\] {\n --tw-shadow: 0 4px 16px var(--tw-shadow-color, rgba(0,0,0,0.08));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .shadow-\\[0_8px_24px_rgba\\(0\\,0\\,0\\,0\\.12\\)\\] {\n --tw-shadow: 0 8px 24px var(--tw-shadow-color, rgba(0,0,0,0.12));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .shadow-\\[0_12px_30px_rgba\\(0\\,0\\,0\\,0\\.18\\)\\] {\n --tw-shadow: 0 12px 30px var(--tw-shadow-color, rgba(0,0,0,0.18));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .shadow-\\[0px_2px_2px_rgba\\(47\\,47\\,47\\,0\\.08\\)\\] {\n --tw-shadow: 0px 2px 2px var(--tw-shadow-color, rgba(47,47,47,0.08));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .shadow-\\[0px_2px_4px_0px_\\#A5A3AE4D\\] {\n --tw-shadow: 0px 2px 4px 0px var(--tw-shadow-color, #A5A3AE4D);\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .shadow-\\[3px_0px_6px_0px_rgba\\(0\\,0\\,0\\,0\\.1\\)\\] {\n --tw-shadow: 3px 0px 6px 0px var(--tw-shadow-color, rgba(0,0,0,0.1));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .ring-1 {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .ring-\\[\\#2F80ED\\]\\/40 {\n --tw-ring-color: color-mix(in oklab, #2F80ED 40%, transparent);\n }\n .ring-white {\n --tw-ring-color: var(--color-white);\n }\n .backdrop-blur-\\[2px\\] {\n --tw-backdrop-blur: blur(2px);\n -webkit-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 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 .transition {\n transition-property:\n color,\n background-color,\n border-color,\n outline-color,\n text-decoration-color,\n fill,\n stroke,\n --tw-gradient-from,\n --tw-gradient-via,\n --tw-gradient-to,\n opacity,\n box-shadow,\n transform,\n translate,\n scale,\n rotate,\n filter,\n -webkit-backdrop-filter,\n backdrop-filter,\n display,\n content-visibility,\n overlay,\n pointer-events;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-\\[background\\] {\n transition-property: background;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-all {\n transition-property: all;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-colors {\n transition-property:\n color,\n background-color,\n border-color,\n outline-color,\n text-decoration-color,\n fill,\n stroke,\n --tw-gradient-from,\n --tw-gradient-via,\n --tw-gradient-to;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-opacity {\n transition-property: opacity;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-transform {\n transition-property:\n transform,\n translate,\n scale,\n rotate;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .duration-150 {\n --tw-duration: 150ms;\n transition-duration: 150ms;\n }\n .duration-200 {\n --tw-duration: 200ms;\n transition-duration: 200ms;\n }\n .duration-300 {\n --tw-duration: 300ms;\n transition-duration: 300ms;\n }\n .ease-in-out {\n --tw-ease: var(--ease-in-out);\n transition-timing-function: var(--ease-in-out);\n }\n .outline-none {\n --tw-outline-style: none;\n outline-style: none;\n }\n .select-none {\n -webkit-user-select: none;\n user-select: none;\n }\n .group-hover\\:opacity-0 {\n &:is(:where(.group):hover *) {\n @media (hover: hover) {\n opacity: 0%;\n }\n }\n }\n .group-hover\\:opacity-100 {\n &:is(:where(.group):hover *) {\n @media (hover: hover) {\n opacity: 100%;\n }\n }\n }\n .group-hover\\/message\\:opacity-100 {\n &:is(:where(.group\\/message):hover *) {\n @media (hover: hover) {\n opacity: 100%;\n }\n }\n }\n .group-hover\\/replay\\:opacity-100 {\n &:is(:where(.group\\/replay):hover *) {\n @media (hover: hover) {\n opacity: 100%;\n }\n }\n }\n .group-hover\\/translate\\:opacity-100 {\n &:is(:where(.group\\/translate):hover *) {\n @media (hover: hover) {\n opacity: 100%;\n }\n }\n }\n .placeholder\\:text-\\[\\#9C9C9C\\] {\n &::placeholder {\n color: #9C9C9C;\n }\n }\n .hover\\:border-\\[\\#777\\] {\n &:hover {\n @media (hover: hover) {\n border-color: #777;\n }\n }\n }\n .hover\\:border-\\[\\#e04a00\\] {\n &:hover {\n @media (hover: hover) {\n border-color: #e04a00;\n }\n }\n }\n .hover\\:bg-\\[\\#2e5939\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #2e5939;\n }\n }\n }\n .hover\\:bg-\\[\\#009db3\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #009db3;\n }\n }\n }\n .hover\\:bg-\\[\\#28A745\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #28A745;\n }\n }\n }\n .hover\\:bg-\\[\\#00375E\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #00375E;\n }\n }\n }\n .hover\\:bg-\\[\\#646464\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #646464;\n }\n }\n }\n .hover\\:bg-\\[\\#F4F6F8\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #F4F6F8;\n }\n }\n }\n .hover\\:bg-\\[\\#c91b20\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #c91b20;\n }\n }\n }\n .hover\\:bg-\\[\\#d97706\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #d97706;\n }\n }\n }\n .hover\\:bg-\\[\\#e04a00\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #e04a00;\n }\n }\n }\n .hover\\:bg-\\[\\#e64a00\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #e64a00;\n }\n }\n }\n .hover\\:bg-\\[\\#f1f1f1\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #f1f1f1;\n }\n }\n }\n .hover\\:bg-\\[\\#f8f8f8\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #f8f8f8;\n }\n }\n }\n .hover\\:bg-black\\/5 {\n &:hover {\n @media (hover: hover) {\n background-color: color-mix(in srgb, #000 5%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-black) 5%, transparent);\n }\n }\n }\n }\n .hover\\:bg-black\\/10 {\n &:hover {\n @media (hover: hover) {\n background-color: color-mix(in srgb, #000 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-black) 10%, transparent);\n }\n }\n }\n }\n .hover\\:bg-gray-50 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-gray-50);\n }\n }\n }\n .hover\\:text-\\[\\#FF5300\\] {\n &:hover {\n @media (hover: hover) {\n color: #FF5300;\n }\n }\n }\n .hover\\:text-\\[\\#ff5301\\] {\n &:hover {\n @media (hover: hover) {\n color: #ff5301;\n }\n }\n }\n .hover\\:text-\\[var\\(--color-banbox-warning\\)\\] {\n &:hover {\n @media (hover: hover) {\n color: var(--color-banbox-warning);\n }\n }\n }\n .hover\\:brightness-95 {\n &:hover {\n @media (hover: hover) {\n --tw-brightness: brightness(95%);\n filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n }\n }\n }\n .focus\\:outline-none {\n &:focus {\n --tw-outline-style: none;\n outline-style: none;\n }\n }\n .disabled\\:opacity-50 {\n &:disabled {\n opacity: 50%;\n }\n }\n}\n.banbox-chat-root {\n --color-banbox-primary: #ff5300;\n --color-banbox-primary-active: #dc4c07;\n --color-banbox-secondary: #2079b0;\n --color-banbox-tertiary: #74a380;\n --color-banbox-primary-container: #f9d2c4;\n --color-banbox-on-primary-container: #9e3505;\n --color-banbox-secondary-container: #b2e0fc;\n --color-banbox-on-secondary-container: #17547b;\n --color-banbox-tertiary-container: #ceefd6;\n --color-banbox-on-tertiary-container: #3b7249;\n --color-banbox-surface-dim: #f1f1f1;\n --color-banbox-surface: #f2f3f7;\n --color-banbox-surface-bright: #fffcfa;\n --color-banbox-surface-container-lowest: #ffffff;\n --color-banbox-surface-container-low: #fff1ec;\n --color-banbox-surface-container: #fceae5;\n --color-banbox-surface-container-high: #f7e4df;\n --color-banbox-surface-container-highest: #f1dfd9;\n --color-banbox-on-surface: #2c2c2c;\n --color-banbox-text-dynamic: #636363;\n --color-banbox-outline: #e0d6cf;\n --color-banbox-outline-variant: #a89e97;\n --color-banbox-blue: #0d99ff;\n --color-banbox-blue-deep: #1078d8;\n --color-banbox-blue-dim-deep: #006fd6;\n --color-banbox-blue-h: #0a7acc;\n --color-banbox-red: #eb2127;\n --color-banbox-link: #005694;\n --color-banbox-link-h: #004576;\n --color-banbox-review: #fcb532;\n --color-banbox-green: #28c76f;\n --color-banbox-deep-green: #097000;\n --color-banbox-warning: #ff5301;\n --color-banbox-error: #eb2127;\n --color-banbox-ed: #ededed;\n --color-banbox-f8: #f8f8f8;\n --color-banbox-e1: #e1e1e1;\n --color-banbox-fc: #fcfcfc;\n --color-banbox-ca: #cacaca;\n --color-banbox-e5: #e5e5e5;\n --color-banbox-92: #929292;\n --color-banbox-63: #636363;\n --color-banbox-2c: #2c2c2c;\n --color-banbox-f1: #f1f1f1;\n --border-banbox-primary: #636363;\n --border-banbox-e1: #e1e1e1;\n --border-banbox-dark: #374151;\n --radius-banbox-sm: 4px;\n --radius-banbox-md: 6px;\n --radius-lg: 12px;\n --radius-full: 100px;\n --shadow-banbox-modal-primary: 0px 2px 12px 0px #3b33331a;\n --shadow-banbox-card-primary: 0px 6px 12px 0px #3b33331a;\n --shadow-banbox-card-secondary: 0px 2px 2px 0px #2f2f2f14;\n --shadow-banbox-footer-primary: 0px -2px 4px 0px #0000000a;\n}\n.banbox-chat-root[data-theme=marketplace] {\n --color-banbox-primary: #ff5300;\n --color-banbox-primary-active: #dc4c07;\n --color-banbox-surface-container-low: #fff1ec;\n --color-banbox-surface-container: #fceae5;\n}\n.banbox-chat-root[data-theme=admin] {\n --color-banbox-primary: #1a1a1a;\n --color-banbox-primary-active: #000000;\n --color-banbox-secondary: #374151;\n --color-banbox-surface-container-lowest: #ffffff;\n --color-banbox-surface-container-low: #f5f5f5;\n --color-banbox-surface-container: #eeeeee;\n --color-banbox-surface-container-high: #e8e8e8;\n --color-banbox-surface-container-highest: #e0e0e0;\n --color-banbox-outline: #d4d4d4;\n --color-banbox-outline-variant: #9e9e9e;\n}\n.banbox-chat-root .custom-scroll,\n.banbox-chat-root .custom-scroll-hidden {\n --sb-size: 6px;\n --sb-track: #f1f1f1;\n --sb-thumb: #c1c1c1;\n --sb-thumb-hover: #898989;\n overflow-y: auto;\n overscroll-behavior: contain;\n scrollbar-width: thin;\n scrollbar-color: #c1c1c1 #f1f1f1;\n}\n.banbox-chat-root .custom-scroll::-webkit-scrollbar,\n.banbox-chat-root .custom-scroll-hidden::-webkit-scrollbar {\n width: 6px;\n height: 6px;\n display: block;\n}\n.banbox-chat-root .custom-scroll::-webkit-scrollbar-track,\n.banbox-chat-root .custom-scroll-hidden::-webkit-scrollbar-track {\n background: #f1f1f1;\n border-radius: 9999px;\n}\n.banbox-chat-root .custom-scroll::-webkit-scrollbar-thumb,\n.banbox-chat-root .custom-scroll-hidden::-webkit-scrollbar-thumb {\n background-color: #c1c1c1;\n border-radius: 9999px;\n border: 1px solid #f1f1f1;\n min-height: 40px;\n}\n.banbox-chat-root .custom-scroll::-webkit-scrollbar-thumb:hover,\n.banbox-chat-root .custom-scroll-hidden::-webkit-scrollbar-thumb:hover {\n background-color: #898989;\n}\n.banbox-chat-root .custom-scroll-hidden {\n scrollbar-width: none;\n}\n.banbox-chat-root .custom-scroll-hidden::-webkit-scrollbar {\n display: none;\n}\n.banbox-chat-root .no-scrollbar {\n -ms-overflow-style: none;\n scrollbar-width: none;\n}\n.banbox-chat-root .no-scrollbar::-webkit-scrollbar {\n display: none;\n}\n@keyframes banbox-chat-fade-in {\n from {\n opacity: 0;\n transform: translateY(6px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n.banbox-chat-root .animate-fade-in {\n animation: banbox-chat-fade-in 0.2s ease-out forwards;\n}\n.banbox-chat-root .chat-bubble-mine {\n background-color: var(--color-banbox-primary);\n color: #fff;\n}\n.banbox-chat-root .chat-thread-active {\n background-color: var(--color-banbox-surface-container-low);\n}\n.banbox-chat-root .chat-btn-send {\n background-color: var(--color-banbox-primary);\n color: #fff;\n}\n.banbox-chat-root .chat-btn-send:hover {\n background-color: var(--color-banbox-primary-active);\n}\n.banbox-chat-root .chat-badge-unread {\n background-color: var(--color-banbox-primary);\n color: #fff;\n}\n@layer utilities {\n .banbox-chat-root * {\n box-sizing: border-box;\n }\n}\n@property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-rotate-x { syntax: "*"; inherits: false; }\n@property --tw-rotate-y { syntax: "*"; inherits: false; }\n@property --tw-rotate-z { syntax: "*"; inherits: false; }\n@property --tw-skew-x { syntax: "*"; inherits: false; }\n@property --tw-skew-y { syntax: "*"; inherits: false; }\n@property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }\n@property --tw-leading { syntax: "*"; inherits: false; }\n@property --tw-font-weight { syntax: "*"; inherits: false; }\n@property --tw-tracking { syntax: "*"; inherits: false; }\n@property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-inset-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-ring-color { syntax: "*"; inherits: false; }\n@property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-inset-ring-color { syntax: "*"; inherits: false; }\n@property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-ring-inset { syntax: "*"; inherits: false; }\n@property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0px; }\n@property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }\n@property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-backdrop-blur { syntax: "*"; inherits: false; }\n@property --tw-backdrop-brightness { syntax: "*"; inherits: false; }\n@property --tw-backdrop-contrast { syntax: "*"; inherits: false; }\n@property --tw-backdrop-grayscale { syntax: "*"; inherits: false; }\n@property --tw-backdrop-hue-rotate { syntax: "*"; inherits: false; }\n@property --tw-backdrop-invert { syntax: "*"; inherits: false; }\n@property --tw-backdrop-opacity { syntax: "*"; inherits: false; }\n@property --tw-backdrop-saturate { syntax: "*"; inherits: false; }\n@property --tw-backdrop-sepia { syntax: "*"; inherits: false; }\n@property --tw-duration { syntax: "*"; inherits: false; }\n@property --tw-ease { syntax: "*"; inherits: false; }\n@property --tw-blur { syntax: "*"; inherits: false; }\n@property --tw-brightness { syntax: "*"; inherits: false; }\n@property --tw-contrast { syntax: "*"; inherits: false; }\n@property --tw-grayscale { syntax: "*"; inherits: false; }\n@property --tw-hue-rotate { syntax: "*"; inherits: false; }\n@property --tw-invert { syntax: "*"; inherits: false; }\n@property --tw-opacity { syntax: "*"; inherits: false; }\n@property --tw-saturate { syntax: "*"; inherits: false; }\n@property --tw-sepia { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-drop-shadow-size { syntax: "*"; inherits: false; }\n@layer properties {\n @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n *,\n ::before,\n ::after,\n ::backdrop {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-translate-z: 0;\n --tw-rotate-x: initial;\n --tw-rotate-y: initial;\n --tw-rotate-z: initial;\n --tw-skew-x: initial;\n --tw-skew-y: initial;\n --tw-space-y-reverse: 0;\n --tw-border-style: solid;\n --tw-leading: initial;\n --tw-font-weight: initial;\n --tw-tracking: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-backdrop-blur: initial;\n --tw-backdrop-brightness: initial;\n --tw-backdrop-contrast: initial;\n --tw-backdrop-grayscale: initial;\n --tw-backdrop-hue-rotate: initial;\n --tw-backdrop-invert: initial;\n --tw-backdrop-opacity: initial;\n --tw-backdrop-saturate: initial;\n --tw-backdrop-sepia: initial;\n --tw-duration: initial;\n --tw-ease: initial;\n --tw-blur: initial;\n --tw-brightness: initial;\n --tw-contrast: initial;\n --tw-grayscale: initial;\n --tw-hue-rotate: initial;\n --tw-invert: initial;\n --tw-opacity: initial;\n --tw-saturate: initial;\n --tw-sepia: initial;\n --tw-drop-shadow: initial;\n --tw-drop-shadow-color: initial;\n --tw-drop-shadow-alpha: 100%;\n --tw-drop-shadow-size: initial;\n }\n }\n}\n');
|
|
32
|
+
styleInject('/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n :root,\n :host {\n --font-sans:\n ui-sans-serif,\n system-ui,\n sans-serif,\n "Apple Color Emoji",\n "Segoe UI Emoji",\n "Segoe UI Symbol",\n "Noto Color Emoji";\n --font-mono:\n ui-monospace,\n SFMono-Regular,\n Menlo,\n Monaco,\n Consolas,\n "Liberation Mono",\n "Courier New",\n monospace;\n --color-gray-50: oklch(98.5% 0.002 247.839);\n --color-black: #000;\n --color-white: #fff;\n --spacing: 0.25rem;\n --text-xs: 0.75rem;\n --text-xs--line-height: calc(1 / 0.75);\n --text-sm: 0.875rem;\n --text-sm--line-height: calc(1.25 / 0.875);\n --text-lg: 1.125rem;\n --text-lg--line-height: calc(1.75 / 1.125);\n --text-xl: 1.25rem;\n --text-xl--line-height: calc(1.75 / 1.25);\n --text-2xl: 1.5rem;\n --text-2xl--line-height: calc(2 / 1.5);\n --text-4xl: 2.25rem;\n --text-4xl--line-height: calc(2.5 / 2.25);\n --font-weight-light: 300;\n --font-weight-normal: 400;\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --tracking-wide: 0.025em;\n --leading-relaxed: 1.625;\n --radius-xs: 0.125rem;\n --radius-sm: 0.25rem;\n --radius-md: 0.375rem;\n --radius-lg: 0.5rem;\n --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n --default-transition-duration: 150ms;\n --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n --default-font-family: var(--font-sans);\n --default-mono-font-family: var(--font-mono);\n }\n}\n@layer base {\n *,\n ::after,\n ::before,\n ::backdrop,\n ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html,\n :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n b,\n strong {\n font-weight: bolder;\n }\n code,\n kbd,\n samp,\n pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n small {\n font-size: 80%;\n }\n sub,\n sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n :-moz-focusring {\n outline: auto;\n }\n progress {\n vertical-align: baseline;\n }\n summary {\n display: list-item;\n }\n ol,\n ul,\n menu {\n list-style: none;\n }\n img,\n svg,\n video,\n canvas,\n audio,\n iframe,\n embed,\n object {\n display: block;\n vertical-align: middle;\n }\n img,\n video {\n max-width: 100%;\n height: auto;\n }\n button,\n input,\n select,\n optgroup,\n textarea,\n ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n ::placeholder {\n opacity: 1;\n }\n @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n textarea {\n resize: vertical;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n ::-webkit-datetime-edit,\n ::-webkit-datetime-edit-year-field,\n ::-webkit-datetime-edit-month-field,\n ::-webkit-datetime-edit-day-field,\n ::-webkit-datetime-edit-hour-field,\n ::-webkit-datetime-edit-minute-field,\n ::-webkit-datetime-edit-second-field,\n ::-webkit-datetime-edit-millisecond-field,\n ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n ::-webkit-calendar-picker-indicator {\n line-height: 1;\n }\n :-moz-ui-invalid {\n box-shadow: none;\n }\n button,\n input:where([type=button], [type=reset], [type=submit]),\n ::file-selector-button {\n appearance: button;\n }\n ::-webkit-inner-spin-button,\n ::-webkit-outer-spin-button {\n height: auto;\n }\n [hidden]:where(:not([hidden=until-found])) {\n display: none !important;\n }\n}\n@layer utilities {\n .pointer-events-auto {\n pointer-events: auto;\n }\n .pointer-events-none {\n pointer-events: none;\n }\n .visible {\n visibility: visible;\n }\n .absolute {\n position: absolute;\n }\n .fixed {\n position: fixed;\n }\n .relative {\n position: relative;\n }\n .static {\n position: static;\n }\n .inset-0 {\n inset: calc(var(--spacing) * 0);\n }\n .inset-x-0 {\n inset-inline: calc(var(--spacing) * 0);\n }\n .inset-y-0 {\n inset-block: calc(var(--spacing) * 0);\n }\n .top-0 {\n top: calc(var(--spacing) * 0);\n }\n .top-1\\/2 {\n top: calc(1 / 2 * 100%);\n }\n .top-\\[-4px\\] {\n top: -4px;\n }\n .top-full {\n top: 100%;\n }\n .right-0 {\n right: calc(var(--spacing) * 0);\n }\n .right-3 {\n right: calc(var(--spacing) * 3);\n }\n .right-4 {\n right: calc(var(--spacing) * 4);\n }\n .right-6 {\n right: calc(var(--spacing) * 6);\n }\n .right-\\[-63px\\] {\n right: -63px;\n }\n .right-full {\n right: 100%;\n }\n .-bottom-2 {\n bottom: calc(var(--spacing) * -2);\n }\n .bottom-0 {\n bottom: calc(var(--spacing) * 0);\n }\n .bottom-4 {\n bottom: calc(var(--spacing) * 4);\n }\n .bottom-6 {\n bottom: calc(var(--spacing) * 6);\n }\n .bottom-\\[-13px\\] {\n bottom: -13px;\n }\n .bottom-full {\n bottom: 100%;\n }\n .left-0 {\n left: calc(var(--spacing) * 0);\n }\n .left-1\\/2 {\n left: calc(1 / 2 * 100%);\n }\n .left-6 {\n left: calc(var(--spacing) * 6);\n }\n .left-\\[30px\\] {\n left: 30px;\n }\n .left-full {\n left: 100%;\n }\n .z-10 {\n z-index: 10;\n }\n .z-50 {\n z-index: 50;\n }\n .z-70 {\n z-index: 70;\n }\n .z-71 {\n z-index: 71;\n }\n .z-999 {\n z-index: 999;\n }\n .z-9999 {\n z-index: 9999;\n }\n .z-10000 {\n z-index: 10000;\n }\n .z-\\[10002\\] {\n z-index: 10002;\n }\n .container {\n width: 100%;\n @media (width >= 40rem) {\n max-width: 40rem;\n }\n @media (width >= 48rem) {\n max-width: 48rem;\n }\n @media (width >= 64rem) {\n max-width: 64rem;\n }\n @media (width >= 80rem) {\n max-width: 80rem;\n }\n @media (width >= 96rem) {\n max-width: 96rem;\n }\n }\n .mx-auto {\n margin-inline: auto;\n }\n .ms-1 {\n margin-inline-start: calc(var(--spacing) * 1);\n }\n .ms-\\[3px\\] {\n margin-inline-start: 3px;\n }\n .ms-\\[12px\\] {\n margin-inline-start: 12px;\n }\n .me-1 {\n margin-inline-end: calc(var(--spacing) * 1);\n }\n .mt-0\\.5 {\n margin-top: calc(var(--spacing) * 0.5);\n }\n .mt-1 {\n margin-top: calc(var(--spacing) * 1);\n }\n .mt-2 {\n margin-top: calc(var(--spacing) * 2);\n }\n .mt-3 {\n margin-top: calc(var(--spacing) * 3);\n }\n .mt-4 {\n margin-top: calc(var(--spacing) * 4);\n }\n .mt-6 {\n margin-top: calc(var(--spacing) * 6);\n }\n .mt-\\[2px\\] {\n margin-top: 2px;\n }\n .mt-\\[6px\\] {\n margin-top: 6px;\n }\n .mr-2 {\n margin-right: calc(var(--spacing) * 2);\n }\n .mr-auto {\n margin-right: auto;\n }\n .mb-0 {\n margin-bottom: calc(var(--spacing) * 0);\n }\n .mb-0\\.5 {\n margin-bottom: calc(var(--spacing) * 0.5);\n }\n .mb-1 {\n margin-bottom: calc(var(--spacing) * 1);\n }\n .mb-1\\.5 {\n margin-bottom: calc(var(--spacing) * 1.5);\n }\n .mb-2 {\n margin-bottom: calc(var(--spacing) * 2);\n }\n .mb-4 {\n margin-bottom: calc(var(--spacing) * 4);\n }\n .mb-5 {\n margin-bottom: calc(var(--spacing) * 5);\n }\n .mb-10 {\n margin-bottom: calc(var(--spacing) * 10);\n }\n .mb-\\[24px\\] {\n margin-bottom: 24px;\n }\n .-ml-\\[5px\\] {\n margin-left: calc(5px * -1);\n }\n .ml-\\[2px\\] {\n margin-left: 2px;\n }\n .ml-\\[4px\\] {\n margin-left: 4px;\n }\n .ml-auto {\n margin-left: auto;\n }\n .block {\n display: block;\n }\n .flex {\n display: flex;\n }\n .grid {\n display: grid;\n }\n .hidden {\n display: none;\n }\n .inline {\n display: inline;\n }\n .inline-block {\n display: inline-block;\n }\n .inline-flex {\n display: inline-flex;\n }\n .h-0 {\n height: calc(var(--spacing) * 0);\n }\n .h-2\\.5 {\n height: calc(var(--spacing) * 2.5);\n }\n .h-3 {\n height: calc(var(--spacing) * 3);\n }\n .h-3\\.5 {\n height: calc(var(--spacing) * 3.5);\n }\n .h-4 {\n height: calc(var(--spacing) * 4);\n }\n .h-5 {\n height: calc(var(--spacing) * 5);\n }\n .h-6 {\n height: calc(var(--spacing) * 6);\n }\n .h-7 {\n height: calc(var(--spacing) * 7);\n }\n .h-8 {\n height: calc(var(--spacing) * 8);\n }\n .h-9 {\n height: calc(var(--spacing) * 9);\n }\n .h-10 {\n height: calc(var(--spacing) * 10);\n }\n .h-\\[1\\.17px\\] {\n height: 1.17px;\n }\n .h-\\[4px\\] {\n height: 4px;\n }\n .h-\\[5\\.5px\\] {\n height: 5.5px;\n }\n .h-\\[11\\.25px\\] {\n height: 11.25px;\n }\n .h-\\[14px\\] {\n height: 14px;\n }\n .h-\\[17\\.5px\\] {\n height: 17.5px;\n }\n .h-\\[18px\\] {\n height: 18px;\n }\n .h-\\[21px\\] {\n height: 21px;\n }\n .h-\\[22px\\] {\n height: 22px;\n }\n .h-\\[26px\\] {\n height: 26px;\n }\n .h-\\[28px\\] {\n height: 28px;\n }\n .h-\\[30px\\] {\n height: 30px;\n }\n .h-\\[32px\\] {\n height: 32px;\n }\n .h-\\[34px\\] {\n height: 34px;\n }\n .h-\\[36px\\] {\n height: 36px;\n }\n .h-\\[40px\\] {\n height: 40px;\n }\n .h-\\[41px\\] {\n height: 41px;\n }\n .h-\\[44px\\] {\n height: 44px;\n }\n .h-\\[46px\\] {\n height: 46px;\n }\n .h-\\[52px\\] {\n height: 52px;\n }\n .h-\\[64px\\] {\n height: 64px;\n }\n .h-\\[65px\\] {\n height: 65px;\n }\n .h-\\[75px\\] {\n height: 75px;\n }\n .h-\\[100px\\] {\n height: 100px;\n }\n .h-\\[208px\\] {\n height: 208px;\n }\n .h-\\[650px\\] {\n height: 650px;\n }\n .h-full {\n height: 100%;\n }\n .h-px {\n height: 1px;\n }\n .max-h-\\[200px\\] {\n max-height: 200px;\n }\n .min-h-0 {\n min-height: calc(var(--spacing) * 0);\n }\n .min-h-\\[50px\\] {\n min-height: 50px;\n }\n .min-h-full {\n min-height: 100%;\n }\n .w-0 {\n width: calc(var(--spacing) * 0);\n }\n .w-2 {\n width: calc(var(--spacing) * 2);\n }\n .w-2\\.5 {\n width: calc(var(--spacing) * 2.5);\n }\n .w-3 {\n width: calc(var(--spacing) * 3);\n }\n .w-3\\.5 {\n width: calc(var(--spacing) * 3.5);\n }\n .w-4 {\n width: calc(var(--spacing) * 4);\n }\n .w-5 {\n width: calc(var(--spacing) * 5);\n }\n .w-6 {\n width: calc(var(--spacing) * 6);\n }\n .w-8 {\n width: calc(var(--spacing) * 8);\n }\n .w-9 {\n width: calc(var(--spacing) * 9);\n }\n .w-10 {\n width: calc(var(--spacing) * 10);\n }\n .w-\\[5\\.5px\\] {\n width: 5.5px;\n }\n .w-\\[11\\.25px\\] {\n width: 11.25px;\n }\n .w-\\[14px\\] {\n width: 14px;\n }\n .w-\\[18\\.08px\\] {\n width: 18.08px;\n }\n .w-\\[18px\\] {\n width: 18px;\n }\n .w-\\[22px\\] {\n width: 22px;\n }\n .w-\\[26px\\] {\n width: 26px;\n }\n .w-\\[28px\\] {\n width: 28px;\n }\n .w-\\[34px\\] {\n width: 34px;\n }\n .w-\\[36px\\] {\n width: 36px;\n }\n .w-\\[40px\\] {\n width: 40px;\n }\n .w-\\[44px\\] {\n width: 44px;\n }\n .w-\\[46px\\] {\n width: 46px;\n }\n .w-\\[65px\\] {\n width: 65px;\n }\n .w-\\[105px\\] {\n width: 105px;\n }\n .w-\\[130px\\] {\n width: 130px;\n }\n .w-\\[186px\\] {\n width: 186px;\n }\n .w-\\[340px\\] {\n width: 340px;\n }\n .w-\\[355px\\] {\n width: 355px;\n }\n .w-\\[420px\\] {\n width: 420px;\n }\n .w-\\[450px\\] {\n width: 450px;\n }\n .w-\\[500px\\] {\n width: 500px;\n }\n .w-fit {\n width: fit-content;\n }\n .w-full {\n width: 100%;\n }\n .w-px {\n width: 1px;\n }\n .max-w-\\[95vw\\] {\n max-width: 95vw;\n }\n .max-w-\\[110px\\] {\n max-width: 110px;\n }\n .max-w-\\[151px\\] {\n max-width: 151px;\n }\n .max-w-\\[185px\\] {\n max-width: 185px;\n }\n .max-w-\\[200px\\] {\n max-width: 200px;\n }\n .max-w-\\[260px\\] {\n max-width: 260px;\n }\n .max-w-\\[289px\\] {\n max-width: 289px;\n }\n .max-w-\\[300px\\] {\n max-width: 300px;\n }\n .max-w-\\[410px\\] {\n max-width: 410px;\n }\n .min-w-0 {\n min-width: calc(var(--spacing) * 0);\n }\n .flex-1 {\n flex: 1;\n }\n .shrink-0 {\n flex-shrink: 0;\n }\n .-translate-x-1\\.5 {\n --tw-translate-x: calc(var(--spacing) * -1.5);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .-translate-x-1\\/2 {\n --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .translate-x-1\\.5 {\n --tw-translate-x: calc(var(--spacing) * 1.5);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .-translate-y-1\\/2 {\n --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .rotate-45 {\n rotate: 45deg;\n }\n .rotate-180 {\n rotate: 180deg;\n }\n .transform {\n transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n }\n .cursor-auto\\! {\n cursor: auto !important;\n }\n .cursor-default {\n cursor: default;\n }\n .cursor-not-allowed {\n cursor: not-allowed;\n }\n .cursor-pointer {\n cursor: pointer;\n }\n .cursor-zoom-in {\n cursor: zoom-in;\n }\n .resize {\n resize: both;\n }\n .resize-none {\n resize: none;\n }\n .grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .grid-cols-7 {\n grid-template-columns: repeat(7, minmax(0, 1fr));\n }\n .grid-cols-\\[1fr_350px\\] {\n grid-template-columns: 1fr 350px;\n }\n .grid-cols-\\[18px_120px_1fr\\] {\n grid-template-columns: 18px 120px 1fr;\n }\n .grid-cols-\\[125px_125px\\] {\n grid-template-columns: 125px 125px;\n }\n .flex-col {\n flex-direction: column;\n }\n .place-items-center {\n place-items: center;\n }\n .items-center {\n align-items: center;\n }\n .items-end {\n align-items: flex-end;\n }\n .items-start {\n align-items: flex-start;\n }\n .items-stretch {\n align-items: stretch;\n }\n .justify-between {\n justify-content: space-between;\n }\n .justify-center {\n justify-content: center;\n }\n .justify-end {\n justify-content: flex-end;\n }\n .justify-start {\n justify-content: flex-start;\n }\n .gap-0 {\n gap: calc(var(--spacing) * 0);\n }\n .gap-1 {\n gap: calc(var(--spacing) * 1);\n }\n .gap-1\\.5 {\n gap: calc(var(--spacing) * 1.5);\n }\n .gap-2 {\n gap: calc(var(--spacing) * 2);\n }\n .gap-3 {\n gap: calc(var(--spacing) * 3);\n }\n .gap-4 {\n gap: calc(var(--spacing) * 4);\n }\n .space-y-1\\.5 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-\\[2px\\] {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(2px * var(--tw-space-y-reverse));\n margin-block-end: calc(2px * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .overflow-hidden {\n overflow: hidden;\n }\n .overflow-visible {\n overflow: visible;\n }\n .overflow-x-auto {\n overflow-x: auto;\n }\n .overflow-y-auto {\n overflow-y: auto;\n }\n .rounded {\n border-radius: 0.25rem;\n }\n .rounded-\\[2\\.33px\\] {\n border-radius: 2.33px;\n }\n .rounded-\\[3\\.5px\\] {\n border-radius: 3.5px;\n }\n .rounded-\\[3px\\] {\n border-radius: 3px;\n }\n .rounded-\\[4px\\] {\n border-radius: 4px;\n }\n .rounded-\\[6px\\] {\n border-radius: 6px;\n }\n .rounded-\\[12px\\] {\n border-radius: 12px;\n }\n .rounded-\\[14px\\] {\n border-radius: 14px;\n }\n .rounded-\\[18px\\] {\n border-radius: 18px;\n }\n .rounded-\\[20px\\] {\n border-radius: 20px;\n }\n .rounded-full {\n border-radius: calc(infinity * 1px);\n }\n .rounded-lg {\n border-radius: var(--radius-lg);\n }\n .rounded-md {\n border-radius: var(--radius-md);\n }\n .rounded-sm {\n border-radius: var(--radius-sm);\n }\n .rounded-xs {\n border-radius: var(--radius-xs);\n }\n .rounded-t-md {\n border-top-left-radius: var(--radius-md);\n border-top-right-radius: var(--radius-md);\n }\n .rounded-tl-\\[3px\\] {\n border-top-left-radius: 3px;\n }\n .rounded-tl-md {\n border-top-left-radius: var(--radius-md);\n }\n .rounded-tr-\\[3px\\] {\n border-top-right-radius: 3px;\n }\n .rounded-tr-\\[6px\\] {\n border-top-right-radius: 6px;\n }\n .rounded-b-md {\n border-bottom-right-radius: var(--radius-md);\n border-bottom-left-radius: var(--radius-md);\n }\n .rounded-br-\\[3px\\] {\n border-bottom-right-radius: 3px;\n }\n .rounded-bl-\\[3px\\] {\n border-bottom-left-radius: 3px;\n }\n .border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n .border-\\[0\\.7px\\] {\n border-style: var(--tw-border-style);\n border-width: 0.7px;\n }\n .border-t {\n border-top-style: var(--tw-border-style);\n border-top-width: 1px;\n }\n .border-t-16 {\n border-top-style: var(--tw-border-style);\n border-top-width: 16px;\n }\n .border-t-\\[5px\\] {\n border-top-style: var(--tw-border-style);\n border-top-width: 5px;\n }\n .border-r {\n border-right-style: var(--tw-border-style);\n border-right-width: 1px;\n }\n .border-r-\\[5px\\] {\n border-right-style: var(--tw-border-style);\n border-right-width: 5px;\n }\n .border-b {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\n }\n .border-l {\n border-left-style: var(--tw-border-style);\n border-left-width: 1px;\n }\n .border-l-2 {\n border-left-style: var(--tw-border-style);\n border-left-width: 2px;\n }\n .border-l-16 {\n border-left-style: var(--tw-border-style);\n border-left-width: 16px;\n }\n .border-l-\\[5px\\] {\n border-left-style: var(--tw-border-style);\n border-left-width: 5px;\n }\n .border-none {\n --tw-border-style: none;\n border-style: none;\n }\n .border-\\[\\#00b8d4\\] {\n border-color: #00b8d4;\n }\n .border-\\[\\#3D3D3D\\] {\n border-color: #3D3D3D;\n }\n .border-\\[\\#3d3d3d\\] {\n border-color: #3d3d3d;\n }\n .border-\\[\\#3d6b42\\] {\n border-color: #3d6b42;\n }\n .border-\\[\\#6A6A6A\\] {\n border-color: #6A6A6A;\n }\n .border-\\[\\#9BBCCF\\] {\n border-color: #9BBCCF;\n }\n .border-\\[\\#005694\\] {\n border-color: #005694;\n }\n .border-\\[\\#086600\\] {\n border-color: #086600;\n }\n .border-\\[\\#CCCCCC\\] {\n border-color: #CCCCCC;\n }\n .border-\\[\\#D8D8D8\\] {\n border-color: #D8D8D8;\n }\n .border-\\[\\#E5E5E5\\] {\n border-color: #E5E5E5;\n }\n .border-\\[\\#EFEFEF\\] {\n border-color: #EFEFEF;\n }\n .border-\\[\\#F1F1F1\\] {\n border-color: #F1F1F1;\n }\n .border-\\[\\#FF5300\\] {\n border-color: #FF5300;\n }\n .border-\\[\\#cacaca\\] {\n border-color: #cacaca;\n }\n .border-\\[\\#e1e1e1\\] {\n border-color: #e1e1e1;\n }\n .border-\\[\\#ededed\\] {\n border-color: #ededed;\n }\n .border-\\[\\#ef4444\\] {\n border-color: #ef4444;\n }\n .border-\\[\\#f1f1f1\\] {\n border-color: #f1f1f1;\n }\n .border-\\[\\#f8f8f8\\] {\n border-color: #f8f8f8;\n }\n .border-\\[\\#f59e0b\\] {\n border-color: #f59e0b;\n }\n .border-transparent {\n border-color: transparent;\n }\n .border-t-\\[\\#636363\\] {\n border-top-color: #636363;\n }\n .border-t-\\[\\#FFD2BD\\] {\n border-top-color: #FFD2BD;\n }\n .border-t-transparent {\n border-top-color: transparent;\n }\n .border-r-transparent {\n border-right-color: transparent;\n }\n .border-l-transparent {\n border-left-color: transparent;\n }\n .\\!bg-\\[\\#636363\\] {\n background-color: #636363 !important;\n }\n .bg-\\[\\#00b8d4\\] {\n background-color: #00b8d4;\n }\n .bg-\\[\\#00b8d4\\]\\/10 {\n background-color: color-mix(in oklab, #00b8d4 10%, transparent);\n }\n .bg-\\[\\#1E8E3E\\] {\n background-color: #1E8E3E;\n }\n .bg-\\[\\#3D3D3D\\] {\n background-color: #3D3D3D;\n }\n .bg-\\[\\#3D3D3D\\]\\/10 {\n background-color: color-mix(in oklab, #3D3D3D 10%, transparent);\n }\n .bg-\\[\\#3d3d3d\\] {\n background-color: #3d3d3d;\n }\n .bg-\\[\\#3d6b42\\] {\n background-color: #3d6b42;\n }\n .bg-\\[\\#3d6b42\\]\\/10 {\n background-color: color-mix(in oklab, #3d6b42 10%, transparent);\n }\n .bg-\\[\\#005694\\] {\n background-color: #005694;\n }\n .bg-\\[\\#086600\\] {\n background-color: #086600;\n }\n .bg-\\[\\#328545\\] {\n background-color: #328545;\n }\n .bg-\\[\\#636363\\] {\n background-color: #636363;\n }\n .bg-\\[\\#747474\\] {\n background-color: #747474;\n }\n .bg-\\[\\#BDBDBD\\] {\n background-color: #BDBDBD;\n }\n .bg-\\[\\#E0EFF8\\] {\n background-color: #E0EFF8;\n }\n .bg-\\[\\#E6F5E6\\] {\n background-color: #E6F5E6;\n }\n .bg-\\[\\#E7E7E7\\] {\n background-color: #E7E7E7;\n }\n .bg-\\[\\#F1F1F1\\] {\n background-color: #F1F1F1;\n }\n .bg-\\[\\#F5F7FA\\] {\n background-color: #F5F7FA;\n }\n .bg-\\[\\#F7F7F7\\] {\n background-color: #F7F7F7;\n }\n .bg-\\[\\#FF5300\\] {\n background-color: #FF5300;\n }\n .bg-\\[\\#FFDBCF\\] {\n background-color: #FFDBCF;\n }\n .bg-\\[\\#FFE9DB\\] {\n background-color: #FFE9DB;\n }\n .bg-\\[\\#FFEAE0\\] {\n background-color: #FFEAE0;\n }\n .bg-\\[\\#cacaca\\] {\n background-color: #cacaca;\n }\n .bg-\\[\\#e1e1e1\\] {\n background-color: #e1e1e1;\n }\n .bg-\\[\\#eb2127\\] {\n background-color: #eb2127;\n }\n .bg-\\[\\#ececec\\] {\n background-color: #ececec;\n }\n .bg-\\[\\#ef4444\\] {\n background-color: #ef4444;\n }\n .bg-\\[\\#ef4444\\]\\/10 {\n background-color: color-mix(in oklab, #ef4444 10%, transparent);\n }\n .bg-\\[\\#f1f1f1\\] {\n background-color: #f1f1f1;\n }\n .bg-\\[\\#f8f8f8\\] {\n background-color: #f8f8f8;\n }\n .bg-\\[\\#f59e0b\\] {\n background-color: #f59e0b;\n }\n .bg-\\[\\#f59e0b\\]\\/10 {\n background-color: color-mix(in oklab, #f59e0b 10%, transparent);\n }\n .bg-\\[\\#ff5200\\] {\n background-color: #ff5200;\n }\n .bg-black {\n background-color: var(--color-black);\n }\n .bg-black\\/5 {\n background-color: color-mix(in srgb, #000 5%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-black) 5%, transparent);\n }\n }\n .bg-black\\/30 {\n background-color: color-mix(in srgb, #000 30%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-black) 30%, transparent);\n }\n }\n .bg-black\\/35 {\n background-color: color-mix(in srgb, #000 35%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-black) 35%, transparent);\n }\n }\n .bg-black\\/40 {\n background-color: color-mix(in srgb, #000 40%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-black) 40%, transparent);\n }\n }\n .bg-transparent {\n background-color: transparent;\n }\n .bg-white {\n background-color: var(--color-white);\n }\n .bg-cover {\n background-size: cover;\n }\n .bg-no-repeat {\n background-repeat: no-repeat;\n }\n .object-contain {\n object-fit: contain;\n }\n .object-cover {\n object-fit: cover;\n }\n .p-1 {\n padding: calc(var(--spacing) * 1);\n }\n .p-2 {\n padding: calc(var(--spacing) * 2);\n }\n .p-3 {\n padding: calc(var(--spacing) * 3);\n }\n .p-3\\.5 {\n padding: calc(var(--spacing) * 3.5);\n }\n .p-4 {\n padding: calc(var(--spacing) * 4);\n }\n .p-\\[1\\.75px\\] {\n padding: 1.75px;\n }\n .p-\\[2px\\] {\n padding: 2px;\n }\n .p-\\[3px\\] {\n padding: 3px;\n }\n .p-\\[7px\\] {\n padding: 7px;\n }\n .p-px {\n padding: 1px;\n }\n .px-2 {\n padding-inline: calc(var(--spacing) * 2);\n }\n .px-2\\.5 {\n padding-inline: calc(var(--spacing) * 2.5);\n }\n .px-3 {\n padding-inline: calc(var(--spacing) * 3);\n }\n .px-4 {\n padding-inline: calc(var(--spacing) * 4);\n }\n .px-5 {\n padding-inline: calc(var(--spacing) * 5);\n }\n .px-6 {\n padding-inline: calc(var(--spacing) * 6);\n }\n .px-\\[3px\\] {\n padding-inline: 3px;\n }\n .px-\\[4px\\] {\n padding-inline: 4px;\n }\n .px-\\[10px\\] {\n padding-inline: 10px;\n }\n .px-\\[12px\\] {\n padding-inline: 12px;\n }\n .px-\\[14px\\] {\n padding-inline: 14px;\n }\n .px-\\[16px\\] {\n padding-inline: 16px;\n }\n .px-\\[18px\\] {\n padding-inline: 18px;\n }\n .px-\\[20px\\] {\n padding-inline: 20px;\n }\n .py-0 {\n padding-block: calc(var(--spacing) * 0);\n }\n .py-1\\.5 {\n padding-block: calc(var(--spacing) * 1.5);\n }\n .py-2 {\n padding-block: calc(var(--spacing) * 2);\n }\n .py-2\\.5 {\n padding-block: calc(var(--spacing) * 2.5);\n }\n .py-6 {\n padding-block: calc(var(--spacing) * 6);\n }\n .py-\\[2px\\] {\n padding-block: 2px;\n }\n .py-\\[3px\\] {\n padding-block: 3px;\n }\n .py-\\[7px\\] {\n padding-block: 7px;\n }\n .ps-\\[16px\\] {\n padding-inline-start: 16px;\n }\n .pe-\\[4px\\] {\n padding-inline-end: 4px;\n }\n .pe-\\[30px\\] {\n padding-inline-end: 30px;\n }\n .pt-1 {\n padding-top: calc(var(--spacing) * 1);\n }\n .pt-2\\.5 {\n padding-top: calc(var(--spacing) * 2.5);\n }\n .pt-\\[2px\\] {\n padding-top: 2px;\n }\n .pt-\\[24px\\] {\n padding-top: 24px;\n }\n .pr-1\\.5 {\n padding-right: calc(var(--spacing) * 1.5);\n }\n .pr-2 {\n padding-right: calc(var(--spacing) * 2);\n }\n .pb-1 {\n padding-bottom: calc(var(--spacing) * 1);\n }\n .pb-2 {\n padding-bottom: calc(var(--spacing) * 2);\n }\n .pb-10 {\n padding-bottom: calc(var(--spacing) * 10);\n }\n .pb-\\[2px\\] {\n padding-bottom: 2px;\n }\n .text-left {\n text-align: left;\n }\n .text-right {\n text-align: right;\n }\n .text-2xl {\n font-size: var(--text-2xl);\n line-height: var(--tw-leading, var(--text-2xl--line-height));\n }\n .text-4xl {\n font-size: var(--text-4xl);\n line-height: var(--tw-leading, var(--text-4xl--line-height));\n }\n .text-lg {\n font-size: var(--text-lg);\n line-height: var(--tw-leading, var(--text-lg--line-height));\n }\n .text-sm {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n .text-xl {\n font-size: var(--text-xl);\n line-height: var(--tw-leading, var(--text-xl--line-height));\n }\n .text-xs {\n font-size: var(--text-xs);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n }\n .text-\\[10px\\] {\n font-size: 10px;\n }\n .text-\\[12px\\] {\n font-size: 12px;\n }\n .text-\\[13px\\] {\n font-size: 13px;\n }\n .text-\\[14px\\] {\n font-size: 14px;\n }\n .text-\\[15px\\] {\n font-size: 15px;\n }\n .text-\\[16px\\] {\n font-size: 16px;\n }\n .text-\\[20px\\] {\n font-size: 20px;\n }\n .text-\\[22px\\] {\n font-size: 22px;\n }\n .leading-4 {\n --tw-leading: calc(var(--spacing) * 4);\n line-height: calc(var(--spacing) * 4);\n }\n .leading-relaxed {\n --tw-leading: var(--leading-relaxed);\n line-height: var(--leading-relaxed);\n }\n .font-light {\n --tw-font-weight: var(--font-weight-light);\n font-weight: var(--font-weight-light);\n }\n .font-medium {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: var(--font-weight-medium);\n }\n .font-normal {\n --tw-font-weight: var(--font-weight-normal);\n font-weight: var(--font-weight-normal);\n }\n .font-semibold {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n .tracking-\\[0\\.4px\\] {\n --tw-tracking: 0.4px;\n letter-spacing: 0.4px;\n }\n .tracking-wide {\n --tw-tracking: var(--tracking-wide);\n letter-spacing: var(--tracking-wide);\n }\n .break-words {\n overflow-wrap: break-word;\n }\n .whitespace-nowrap {\n white-space: nowrap;\n }\n .whitespace-pre-wrap {\n white-space: pre-wrap;\n }\n .text-\\[\\#0D5EA8\\] {\n color: #0D5EA8;\n }\n .text-\\[\\#0F0F0F\\] {\n color: #0F0F0F;\n }\n .text-\\[\\#00b8d4\\] {\n color: #00b8d4;\n }\n .text-\\[\\#1E9E6A\\] {\n color: #1E9E6A;\n }\n .text-\\[\\#2B579A\\] {\n color: #2B579A;\n }\n .text-\\[\\#2c2c2c\\] {\n color: #2c2c2c;\n }\n .text-\\[\\#3D3D3D\\] {\n color: #3D3D3D;\n }\n .text-\\[\\#3d6b42\\] {\n color: #3d6b42;\n }\n .text-\\[\\#004F4F\\] {\n color: #004F4F;\n }\n .text-\\[\\#6B7280\\] {\n color: #6B7280;\n }\n .text-\\[\\#9AA1A9\\] {\n color: #9AA1A9;\n }\n .text-\\[\\#9C9C9C\\] {\n color: #9C9C9C;\n }\n .text-\\[\\#9ca3af\\] {\n color: #9ca3af;\n }\n .text-\\[\\#00486F\\] {\n color: #00486F;\n }\n .text-\\[\\#005694\\] {\n color: #005694;\n }\n .text-\\[\\#086600\\] {\n color: #086600;\n }\n .text-\\[\\#636363\\] {\n color: #636363;\n }\n .text-\\[\\#747474\\] {\n color: #747474;\n }\n .text-\\[\\#929292\\] {\n color: #929292;\n }\n .text-\\[\\#B7B7B7\\] {\n color: #B7B7B7;\n }\n .text-\\[\\#B9C3D4\\] {\n color: #B9C3D4;\n }\n .text-\\[\\#D93025\\] {\n color: #D93025;\n }\n .text-\\[\\#E63946\\] {\n color: #E63946;\n }\n .text-\\[\\#E69138\\] {\n color: #E69138;\n }\n .text-\\[\\#EA580C\\] {\n color: #EA580C;\n }\n .text-\\[\\#FF5300\\] {\n color: #FF5300;\n }\n .text-\\[\\#ef4444\\] {\n color: #ef4444;\n }\n .text-\\[\\#f59e0b\\] {\n color: #f59e0b;\n }\n .text-\\[\\#ff5301\\] {\n color: #ff5301;\n }\n .text-black {\n color: var(--color-black);\n }\n .text-white {\n color: var(--color-white);\n }\n .uppercase {\n text-transform: uppercase;\n }\n .opacity-0 {\n opacity: 0%;\n }\n .opacity-30 {\n opacity: 30%;\n }\n .opacity-50 {\n opacity: 50%;\n }\n .opacity-100 {\n opacity: 100%;\n }\n .shadow-\\[-3px_0px_6px_0px_rgba\\(0\\,0\\,0\\,0\\.1\\)\\] {\n --tw-shadow: -3px 0px 6px 0px var(--tw-shadow-color, rgba(0,0,0,0.1));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .shadow-\\[0_1px_2px_rgba\\(0\\,0\\,0\\,0\\.04\\)\\] {\n --tw-shadow: 0 1px 2px var(--tw-shadow-color, rgba(0,0,0,0.04));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .shadow-\\[0_1px_3px_rgba\\(0\\,0\\,0\\,0\\.08\\)\\] {\n --tw-shadow: 0 1px 3px var(--tw-shadow-color, rgba(0,0,0,0.08));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .shadow-\\[0_2px_8px_rgba\\(0\\,0\\,0\\,0\\.15\\)\\] {\n --tw-shadow: 0 2px 8px var(--tw-shadow-color, rgba(0,0,0,0.15));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .shadow-\\[0_2px_12px_rgba\\(59\\,51\\,51\\,0\\.1\\)\\] {\n --tw-shadow: 0 2px 12px var(--tw-shadow-color, rgba(59,51,51,0.1));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .shadow-\\[0_4px_16px_rgba\\(0\\,0\\,0\\,0\\.08\\)\\] {\n --tw-shadow: 0 4px 16px var(--tw-shadow-color, rgba(0,0,0,0.08));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .shadow-\\[0_8px_24px_rgba\\(0\\,0\\,0\\,0\\.12\\)\\] {\n --tw-shadow: 0 8px 24px var(--tw-shadow-color, rgba(0,0,0,0.12));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .shadow-\\[0_12px_30px_rgba\\(0\\,0\\,0\\,0\\.18\\)\\] {\n --tw-shadow: 0 12px 30px var(--tw-shadow-color, rgba(0,0,0,0.18));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .shadow-\\[0px_2px_2px_rgba\\(47\\,47\\,47\\,0\\.08\\)\\] {\n --tw-shadow: 0px 2px 2px var(--tw-shadow-color, rgba(47,47,47,0.08));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .shadow-\\[0px_2px_4px_0px_\\#A5A3AE4D\\] {\n --tw-shadow: 0px 2px 4px 0px var(--tw-shadow-color, #A5A3AE4D);\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .shadow-\\[3px_0px_6px_0px_rgba\\(0\\,0\\,0\\,0\\.1\\)\\] {\n --tw-shadow: 3px 0px 6px 0px var(--tw-shadow-color, rgba(0,0,0,0.1));\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .ring-1 {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow:\n var(--tw-inset-shadow),\n var(--tw-inset-ring-shadow),\n var(--tw-ring-offset-shadow),\n var(--tw-ring-shadow),\n var(--tw-shadow);\n }\n .ring-\\[\\#2F80ED\\]\\/40 {\n --tw-ring-color: color-mix(in oklab, #2F80ED 40%, transparent);\n }\n .ring-white {\n --tw-ring-color: var(--color-white);\n }\n .backdrop-blur-\\[2px\\] {\n --tw-backdrop-blur: blur(2px);\n -webkit-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 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 .transition {\n transition-property:\n color,\n background-color,\n border-color,\n outline-color,\n text-decoration-color,\n fill,\n stroke,\n --tw-gradient-from,\n --tw-gradient-via,\n --tw-gradient-to,\n opacity,\n box-shadow,\n transform,\n translate,\n scale,\n rotate,\n filter,\n -webkit-backdrop-filter,\n backdrop-filter,\n display,\n content-visibility,\n overlay,\n pointer-events;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-\\[background\\] {\n transition-property: background;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-all {\n transition-property: all;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-colors {\n transition-property:\n color,\n background-color,\n border-color,\n outline-color,\n text-decoration-color,\n fill,\n stroke,\n --tw-gradient-from,\n --tw-gradient-via,\n --tw-gradient-to;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-opacity {\n transition-property: opacity;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-transform {\n transition-property:\n transform,\n translate,\n scale,\n rotate;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .duration-150 {\n --tw-duration: 150ms;\n transition-duration: 150ms;\n }\n .duration-200 {\n --tw-duration: 200ms;\n transition-duration: 200ms;\n }\n .duration-300 {\n --tw-duration: 300ms;\n transition-duration: 300ms;\n }\n .ease-in-out {\n --tw-ease: var(--ease-in-out);\n transition-timing-function: var(--ease-in-out);\n }\n .outline-none {\n --tw-outline-style: none;\n outline-style: none;\n }\n .select-none {\n -webkit-user-select: none;\n user-select: none;\n }\n .group-hover\\:opacity-0 {\n &:is(:where(.group):hover *) {\n @media (hover: hover) {\n opacity: 0%;\n }\n }\n }\n .group-hover\\:opacity-100 {\n &:is(:where(.group):hover *) {\n @media (hover: hover) {\n opacity: 100%;\n }\n }\n }\n .group-hover\\/message\\:opacity-100 {\n &:is(:where(.group\\/message):hover *) {\n @media (hover: hover) {\n opacity: 100%;\n }\n }\n }\n .group-hover\\/replay\\:opacity-100 {\n &:is(:where(.group\\/replay):hover *) {\n @media (hover: hover) {\n opacity: 100%;\n }\n }\n }\n .group-hover\\/translate\\:opacity-100 {\n &:is(:where(.group\\/translate):hover *) {\n @media (hover: hover) {\n opacity: 100%;\n }\n }\n }\n .placeholder\\:text-\\[\\#9C9C9C\\] {\n &::placeholder {\n color: #9C9C9C;\n }\n }\n .hover\\:border-\\[\\#777\\] {\n &:hover {\n @media (hover: hover) {\n border-color: #777;\n }\n }\n }\n .hover\\:border-\\[\\#e04a00\\] {\n &:hover {\n @media (hover: hover) {\n border-color: #e04a00;\n }\n }\n }\n .hover\\:bg-\\[\\#2e5939\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #2e5939;\n }\n }\n }\n .hover\\:bg-\\[\\#009db3\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #009db3;\n }\n }\n }\n .hover\\:bg-\\[\\#28A745\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #28A745;\n }\n }\n }\n .hover\\:bg-\\[\\#00375E\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #00375E;\n }\n }\n }\n .hover\\:bg-\\[\\#646464\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #646464;\n }\n }\n }\n .hover\\:bg-\\[\\#F4F6F8\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #F4F6F8;\n }\n }\n }\n .hover\\:bg-\\[\\#c91b20\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #c91b20;\n }\n }\n }\n .hover\\:bg-\\[\\#d97706\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #d97706;\n }\n }\n }\n .hover\\:bg-\\[\\#e04a00\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #e04a00;\n }\n }\n }\n .hover\\:bg-\\[\\#e64a00\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #e64a00;\n }\n }\n }\n .hover\\:bg-\\[\\#f1f1f1\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #f1f1f1;\n }\n }\n }\n .hover\\:bg-\\[\\#f8f8f8\\] {\n &:hover {\n @media (hover: hover) {\n background-color: #f8f8f8;\n }\n }\n }\n .hover\\:bg-black\\/5 {\n &:hover {\n @media (hover: hover) {\n background-color: color-mix(in srgb, #000 5%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-black) 5%, transparent);\n }\n }\n }\n }\n .hover\\:bg-black\\/10 {\n &:hover {\n @media (hover: hover) {\n background-color: color-mix(in srgb, #000 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-black) 10%, transparent);\n }\n }\n }\n }\n .hover\\:bg-gray-50 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-gray-50);\n }\n }\n }\n .hover\\:text-\\[\\#FF5300\\] {\n &:hover {\n @media (hover: hover) {\n color: #FF5300;\n }\n }\n }\n .hover\\:text-\\[\\#ff5301\\] {\n &:hover {\n @media (hover: hover) {\n color: #ff5301;\n }\n }\n }\n .hover\\:text-\\[var\\(--color-banbox-warning\\)\\] {\n &:hover {\n @media (hover: hover) {\n color: var(--color-banbox-warning);\n }\n }\n }\n .hover\\:brightness-95 {\n &:hover {\n @media (hover: hover) {\n --tw-brightness: brightness(95%);\n filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n }\n }\n }\n .focus\\:outline-none {\n &:focus {\n --tw-outline-style: none;\n outline-style: none;\n }\n }\n .disabled\\:opacity-50 {\n &:disabled {\n opacity: 50%;\n }\n }\n}\n.banbox-chat-root {\n --color-banbox-primary: #ff5300;\n --color-banbox-primary-active: #dc4c07;\n --color-banbox-secondary: #2079b0;\n --color-banbox-tertiary: #74a380;\n --color-banbox-primary-container: #f9d2c4;\n --color-banbox-on-primary-container: #9e3505;\n --color-banbox-secondary-container: #b2e0fc;\n --color-banbox-on-secondary-container: #17547b;\n --color-banbox-tertiary-container: #ceefd6;\n --color-banbox-on-tertiary-container: #3b7249;\n --color-banbox-surface-dim: #f1f1f1;\n --color-banbox-surface: #f2f3f7;\n --color-banbox-surface-bright: #fffcfa;\n --color-banbox-surface-container-lowest: #ffffff;\n --color-banbox-surface-container-low: #fff1ec;\n --color-banbox-surface-container: #fceae5;\n --color-banbox-surface-container-high: #f7e4df;\n --color-banbox-surface-container-highest: #f1dfd9;\n --color-banbox-on-surface: #2c2c2c;\n --color-banbox-text-dynamic: #636363;\n --color-banbox-outline: #e0d6cf;\n --color-banbox-outline-variant: #a89e97;\n --color-banbox-blue: #0d99ff;\n --color-banbox-blue-deep: #1078d8;\n --color-banbox-blue-dim-deep: #006fd6;\n --color-banbox-blue-h: #0a7acc;\n --color-banbox-red: #eb2127;\n --color-banbox-link: #005694;\n --color-banbox-link-h: #004576;\n --color-banbox-review: #fcb532;\n --color-banbox-green: #28c76f;\n --color-banbox-deep-green: #097000;\n --color-banbox-warning: #ff5301;\n --color-banbox-error: #eb2127;\n --color-banbox-ed: #ededed;\n --color-banbox-f8: #f8f8f8;\n --color-banbox-e1: #e1e1e1;\n --color-banbox-fc: #fcfcfc;\n --color-banbox-ca: #cacaca;\n --color-banbox-e5: #e5e5e5;\n --color-banbox-92: #929292;\n --color-banbox-63: #636363;\n --color-banbox-2c: #2c2c2c;\n --color-banbox-f1: #f1f1f1;\n --border-banbox-primary: #636363;\n --border-banbox-e1: #e1e1e1;\n --border-banbox-dark: #374151;\n --radius-banbox-sm: 4px;\n --radius-banbox-md: 6px;\n --radius-lg: 12px;\n --radius-full: 100px;\n --shadow-banbox-modal-primary: 0px 2px 12px 0px #3b33331a;\n --shadow-banbox-card-primary: 0px 6px 12px 0px #3b33331a;\n --shadow-banbox-card-secondary: 0px 2px 2px 0px #2f2f2f14;\n --shadow-banbox-footer-primary: 0px -2px 4px 0px #0000000a;\n}\n.banbox-chat-root[data-theme=marketplace] {\n --color-banbox-primary: #ff5300;\n --color-banbox-primary-active: #dc4c07;\n --color-banbox-surface-container-low: #fff1ec;\n --color-banbox-surface-container: #fceae5;\n}\n.banbox-chat-root[data-theme=admin] {\n --color-banbox-primary: #1a1a1a;\n --color-banbox-primary-active: #000000;\n --color-banbox-secondary: #374151;\n --color-banbox-surface-container-lowest: #ffffff;\n --color-banbox-surface-container-low: #f5f5f5;\n --color-banbox-surface-container: #eeeeee;\n --color-banbox-surface-container-high: #e8e8e8;\n --color-banbox-surface-container-highest: #e0e0e0;\n --color-banbox-outline: #d4d4d4;\n --color-banbox-outline-variant: #9e9e9e;\n}\n.banbox-chat-root .custom-scroll,\n.banbox-chat-root .custom-scroll-hidden {\n --sb-size: 6px;\n --sb-track: #f1f1f1;\n --sb-thumb: #c1c1c1;\n --sb-thumb-hover: #898989;\n overflow-y: auto;\n overscroll-behavior: contain;\n scrollbar-width: thin;\n scrollbar-color: #c1c1c1 #f1f1f1;\n}\n.banbox-chat-root .custom-scroll::-webkit-scrollbar,\n.banbox-chat-root .custom-scroll-hidden::-webkit-scrollbar {\n width: 6px;\n height: 6px;\n display: block;\n}\n.banbox-chat-root .custom-scroll::-webkit-scrollbar-track,\n.banbox-chat-root .custom-scroll-hidden::-webkit-scrollbar-track {\n background: #f1f1f1;\n border-radius: 9999px;\n}\n.banbox-chat-root .custom-scroll::-webkit-scrollbar-thumb,\n.banbox-chat-root .custom-scroll-hidden::-webkit-scrollbar-thumb {\n background-color: #c1c1c1;\n border-radius: 9999px;\n border: 1px solid #f1f1f1;\n min-height: 40px;\n}\n.banbox-chat-root .custom-scroll::-webkit-scrollbar-thumb:hover,\n.banbox-chat-root .custom-scroll-hidden::-webkit-scrollbar-thumb:hover {\n background-color: #898989;\n}\n.banbox-chat-root .custom-scroll-hidden {\n scrollbar-width: none;\n}\n.banbox-chat-root .custom-scroll-hidden::-webkit-scrollbar {\n display: none;\n}\n.banbox-chat-root .no-scrollbar {\n -ms-overflow-style: none;\n scrollbar-width: none;\n}\n.banbox-chat-root .no-scrollbar::-webkit-scrollbar {\n display: none;\n}\n@keyframes banbox-chat-fade-in {\n from {\n opacity: 0;\n transform: translateY(6px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n.banbox-chat-root .animate-fade-in {\n animation: banbox-chat-fade-in 0.2s ease-out forwards;\n}\n.banbox-chat-root .chat-bubble-mine {\n background-color: var(--color-banbox-primary);\n color: #fff;\n}\n.banbox-chat-root .chat-thread-active {\n background-color: var(--color-banbox-surface-container-low);\n}\n.banbox-chat-root .chat-btn-send {\n background-color: var(--color-banbox-primary);\n color: #fff;\n}\n.banbox-chat-root .chat-btn-send:hover {\n background-color: var(--color-banbox-primary-active);\n}\n.banbox-chat-root .chat-badge-unread {\n background-color: var(--color-banbox-primary);\n color: #fff;\n}\n@layer utilities {\n .banbox-chat-root * {\n box-sizing: border-box;\n }\n}\n@property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-rotate-x { syntax: "*"; inherits: false; }\n@property --tw-rotate-y { syntax: "*"; inherits: false; }\n@property --tw-rotate-z { syntax: "*"; inherits: false; }\n@property --tw-skew-x { syntax: "*"; inherits: false; }\n@property --tw-skew-y { syntax: "*"; inherits: false; }\n@property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; }\n@property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }\n@property --tw-leading { syntax: "*"; inherits: false; }\n@property --tw-font-weight { syntax: "*"; inherits: false; }\n@property --tw-tracking { syntax: "*"; inherits: false; }\n@property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-inset-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-inset-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-ring-color { syntax: "*"; inherits: false; }\n@property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-inset-ring-color { syntax: "*"; inherits: false; }\n@property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-ring-inset { syntax: "*"; inherits: false; }\n@property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0px; }\n@property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }\n@property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }\n@property --tw-backdrop-blur { syntax: "*"; inherits: false; }\n@property --tw-backdrop-brightness { syntax: "*"; inherits: false; }\n@property --tw-backdrop-contrast { syntax: "*"; inherits: false; }\n@property --tw-backdrop-grayscale { syntax: "*"; inherits: false; }\n@property --tw-backdrop-hue-rotate { syntax: "*"; inherits: false; }\n@property --tw-backdrop-invert { syntax: "*"; inherits: false; }\n@property --tw-backdrop-opacity { syntax: "*"; inherits: false; }\n@property --tw-backdrop-saturate { syntax: "*"; inherits: false; }\n@property --tw-backdrop-sepia { syntax: "*"; inherits: false; }\n@property --tw-duration { syntax: "*"; inherits: false; }\n@property --tw-ease { syntax: "*"; inherits: false; }\n@property --tw-blur { syntax: "*"; inherits: false; }\n@property --tw-brightness { syntax: "*"; inherits: false; }\n@property --tw-contrast { syntax: "*"; inherits: false; }\n@property --tw-grayscale { syntax: "*"; inherits: false; }\n@property --tw-hue-rotate { syntax: "*"; inherits: false; }\n@property --tw-invert { syntax: "*"; inherits: false; }\n@property --tw-opacity { syntax: "*"; inherits: false; }\n@property --tw-saturate { syntax: "*"; inherits: false; }\n@property --tw-sepia { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow-color { syntax: "*"; inherits: false; }\n@property --tw-drop-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }\n@property --tw-drop-shadow-size { syntax: "*"; inherits: false; }\n@layer properties {\n @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n *,\n ::before,\n ::after,\n ::backdrop {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-translate-z: 0;\n --tw-rotate-x: initial;\n --tw-rotate-y: initial;\n --tw-rotate-z: initial;\n --tw-skew-x: initial;\n --tw-skew-y: initial;\n --tw-space-y-reverse: 0;\n --tw-border-style: solid;\n --tw-leading: initial;\n --tw-font-weight: initial;\n --tw-tracking: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-backdrop-blur: initial;\n --tw-backdrop-brightness: initial;\n --tw-backdrop-contrast: initial;\n --tw-backdrop-grayscale: initial;\n --tw-backdrop-hue-rotate: initial;\n --tw-backdrop-invert: initial;\n --tw-backdrop-opacity: initial;\n --tw-backdrop-saturate: initial;\n --tw-backdrop-sepia: initial;\n --tw-duration: initial;\n --tw-ease: initial;\n --tw-blur: initial;\n --tw-brightness: initial;\n --tw-contrast: initial;\n --tw-grayscale: initial;\n --tw-hue-rotate: initial;\n --tw-invert: initial;\n --tw-opacity: initial;\n --tw-saturate: initial;\n --tw-sepia: initial;\n --tw-drop-shadow: initial;\n --tw-drop-shadow-color: initial;\n --tw-drop-shadow-alpha: 100%;\n --tw-drop-shadow-size: initial;\n }\n }\n}\n');
|
|
33
33
|
var ChatUIContext = createContext(null);
|
|
34
34
|
function useChatUI() {
|
|
35
35
|
const ctx = useContext(ChatUIContext);
|
|
@@ -480,7 +480,7 @@ var ChatTranslateSettingsModal = ({
|
|
|
480
480
|
const content = /* @__PURE__ */ jsxs(
|
|
481
481
|
"div",
|
|
482
482
|
{
|
|
483
|
-
className:
|
|
483
|
+
className: clsx18(
|
|
484
484
|
isSingle ? "fixed inset-0 z-9999 flex" : "absolute inset-0 z-50 flex items-center justify-center"
|
|
485
485
|
),
|
|
486
486
|
onClick: () => onClose(),
|
|
@@ -493,7 +493,7 @@ var ChatTranslateSettingsModal = ({
|
|
|
493
493
|
"aria-modal": "true",
|
|
494
494
|
"aria-labelledby": "translate-settings-title",
|
|
495
495
|
onClick: (e) => e.stopPropagation(),
|
|
496
|
-
className:
|
|
496
|
+
className: clsx18(
|
|
497
497
|
isSingle ? "fixed bottom-6 right-6 w-[500px] max-w-[95vw]" : "relative w-[500px] max-w-[95vw]",
|
|
498
498
|
"z-10000 overflow-visible rounded-md bg-white shadow-[0_12px_30px_rgba(0,0,0,0.18)]",
|
|
499
499
|
className
|
|
@@ -576,7 +576,7 @@ var extColor = (ext) => {
|
|
|
576
576
|
var FilePreviewChip = ({ name, sizeMB, ext, onRemove }) => /* @__PURE__ */ jsxs("div", { className: "mr-2 inline-flex items-center gap-3 whitespace-nowrap rounded-sm border border-[#e1e1e1] bg-white px-3 py-2 h-[65px] max-w-[185px]", children: [
|
|
577
577
|
/* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center gap-2", children: /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
|
|
578
578
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
|
|
579
|
-
/* @__PURE__ */ jsx(FileIcon, { className:
|
|
579
|
+
/* @__PURE__ */ jsx(FileIcon, { className: clsx18("h-[18px] w-[18px]", extColor(ext)) }),
|
|
580
580
|
" ",
|
|
581
581
|
/* @__PURE__ */ jsx("div", { className: "truncate text-sm font-normal text-black", children: name })
|
|
582
582
|
] }),
|
|
@@ -727,7 +727,7 @@ var ChatComposerBar = ({
|
|
|
727
727
|
{
|
|
728
728
|
type: "button",
|
|
729
729
|
onClick: sendText,
|
|
730
|
-
className:
|
|
730
|
+
className: clsx18(
|
|
731
731
|
"ms-1 grid h-[40px] w-[40px] place-items-center rounded-full text-[#ff5301] hover:bg-[#f8f8f8]"
|
|
732
732
|
),
|
|
733
733
|
title: hasAttachments ? "Send attachments" : "Send",
|
|
@@ -743,7 +743,7 @@ var ChatComposerBar = ({
|
|
|
743
743
|
type: "button",
|
|
744
744
|
onClick: sendAttachments,
|
|
745
745
|
disabled: !hasAttachments,
|
|
746
|
-
className:
|
|
746
|
+
className: clsx18(
|
|
747
747
|
"ms-1 grid h-[40px] w-[40px] place-items-center rounded-full hover:bg-[#f8f8f8]",
|
|
748
748
|
hasAttachments ? "text-[#ff5301]" : "text-[#B9C3D4]"
|
|
749
749
|
),
|
|
@@ -768,7 +768,7 @@ var ChatComposerBar = ({
|
|
|
768
768
|
children: /* @__PURE__ */ jsx(
|
|
769
769
|
RecordMicIcon,
|
|
770
770
|
{
|
|
771
|
-
className:
|
|
771
|
+
className: clsx18(
|
|
772
772
|
"h-6 w-6",
|
|
773
773
|
seconds % 2 === 0 ? "text-[#929292]" : "text-[#ff5301]"
|
|
774
774
|
)
|
|
@@ -1065,7 +1065,7 @@ var EmojiDropup = ({ open, onClose, onSelect, anchorRef, className }) => {
|
|
|
1065
1065
|
ref: panelRef,
|
|
1066
1066
|
role: "dialog",
|
|
1067
1067
|
"aria-label": "Emoji picker",
|
|
1068
|
-
className:
|
|
1068
|
+
className: clsx18("emoji-dropup", className),
|
|
1069
1069
|
style: {
|
|
1070
1070
|
zIndex: "9999",
|
|
1071
1071
|
width: WIDTH2,
|
|
@@ -1209,7 +1209,7 @@ var ReplyCard = ({ refMsg, onClose, compact, className, jumpOnClick }) => {
|
|
|
1209
1209
|
"div",
|
|
1210
1210
|
{
|
|
1211
1211
|
onClick: clickToJump,
|
|
1212
|
-
className:
|
|
1212
|
+
className: clsx18(
|
|
1213
1213
|
widthClamp,
|
|
1214
1214
|
"relative rounded-md bg-[#f8f8f8] px-3",
|
|
1215
1215
|
"border-l-2 border-[#FF5300]",
|
|
@@ -1528,7 +1528,7 @@ var ChatFooter = ({
|
|
|
1528
1528
|
}
|
|
1529
1529
|
setSeconds(0);
|
|
1530
1530
|
};
|
|
1531
|
-
return /* @__PURE__ */ jsxs("div", { className:
|
|
1531
|
+
return /* @__PURE__ */ jsxs("div", { className: clsx18("border-t border-[#ededed] bg-white p-3.5", className), children: [
|
|
1532
1532
|
replyTo && /* @__PURE__ */ jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsx(ReplyCard_default, { refMsg: replyTo, onClose: clearReply }) }),
|
|
1533
1533
|
/* @__PURE__ */ jsx(
|
|
1534
1534
|
AttachmentPreviewStrip_default,
|
|
@@ -1627,11 +1627,11 @@ var ChatFooter = ({
|
|
|
1627
1627
|
};
|
|
1628
1628
|
var ChatFooter_default = ChatFooter;
|
|
1629
1629
|
function ChatHeader({ left, right, below, className }) {
|
|
1630
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
1631
|
-
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4
|
|
1630
|
+
return /* @__PURE__ */ jsxs("div", { children: [
|
|
1631
|
+
/* @__PURE__ */ jsx("div", { className: clsx18("border-b border-[#ededed] h-[64px]", className), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 pt-2.5", children: [
|
|
1632
1632
|
/* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: left }),
|
|
1633
1633
|
right
|
|
1634
|
-
] }),
|
|
1634
|
+
] }) }),
|
|
1635
1635
|
below && /* @__PURE__ */ jsx(Fragment, { children: below })
|
|
1636
1636
|
] });
|
|
1637
1637
|
}
|
|
@@ -1649,11 +1649,11 @@ var ChatIdentity = (props) => {
|
|
|
1649
1649
|
size = 46,
|
|
1650
1650
|
className
|
|
1651
1651
|
} = props;
|
|
1652
|
-
const subtitleClass =
|
|
1652
|
+
const subtitleClass = clsx18(
|
|
1653
1653
|
"text-[10px] font-medium",
|
|
1654
1654
|
subtitleVariant === "live" ? "text-[#1E9E6A]" : "text-[#929292]"
|
|
1655
1655
|
);
|
|
1656
|
-
return /* @__PURE__ */ jsxs("div", { className:
|
|
1656
|
+
return /* @__PURE__ */ jsxs("div", { className: clsx18("flex items-start gap-3", className), children: [
|
|
1657
1657
|
/* @__PURE__ */ jsxs("div", { className: "relative", style: { width: size, height: size }, children: [
|
|
1658
1658
|
props.variant === "avatar" && /* @__PURE__ */ jsx(
|
|
1659
1659
|
"img",
|
|
@@ -1666,7 +1666,7 @@ var ChatIdentity = (props) => {
|
|
|
1666
1666
|
props.variant === "initial" && /* @__PURE__ */ jsx(
|
|
1667
1667
|
"div",
|
|
1668
1668
|
{
|
|
1669
|
-
className:
|
|
1669
|
+
className: clsx18(
|
|
1670
1670
|
"grid h-full w-full place-items-center rounded-xs text-[15px] font-semibold text-[#2c2c2c]",
|
|
1671
1671
|
props.textClassName
|
|
1672
1672
|
),
|
|
@@ -1741,7 +1741,7 @@ var ChatInquiryBar = ({ id, onView, className, label, buttonLabel }) => {
|
|
|
1741
1741
|
return /* @__PURE__ */ jsxs(
|
|
1742
1742
|
"div",
|
|
1743
1743
|
{
|
|
1744
|
-
className:
|
|
1744
|
+
className: clsx18(
|
|
1745
1745
|
"flex items-center justify-between border-b border-[#ededed] bg-[#f8f8f8] ps-[16px] pe-[30px] h-[30px]",
|
|
1746
1746
|
className
|
|
1747
1747
|
),
|
|
@@ -1774,7 +1774,12 @@ var ChatInquiryBar = ({ id, onView, className, label, buttonLabel }) => {
|
|
|
1774
1774
|
);
|
|
1775
1775
|
};
|
|
1776
1776
|
var ChatInquiryBar_default = ChatInquiryBar;
|
|
1777
|
-
var ChatListHeader = ({
|
|
1777
|
+
var ChatListHeader = ({
|
|
1778
|
+
className,
|
|
1779
|
+
onClose,
|
|
1780
|
+
onSearchChange,
|
|
1781
|
+
hideSearch = false
|
|
1782
|
+
}) => {
|
|
1778
1783
|
const [searching, setSearching] = React10.useState(false);
|
|
1779
1784
|
const [q, setQ] = React10.useState("");
|
|
1780
1785
|
const inputRef = React10.useRef(null);
|
|
@@ -1787,7 +1792,9 @@ var ChatListHeader = ({ className, onClose, onSearchChange }) => {
|
|
|
1787
1792
|
};
|
|
1788
1793
|
}, [searching]);
|
|
1789
1794
|
React10.useEffect(() => {
|
|
1790
|
-
if (!searching)
|
|
1795
|
+
if (!searching) {
|
|
1796
|
+
return;
|
|
1797
|
+
}
|
|
1791
1798
|
const onKey = (e) => {
|
|
1792
1799
|
if (e.key === "Escape") {
|
|
1793
1800
|
setSearching(false);
|
|
@@ -1806,7 +1813,7 @@ var ChatListHeader = ({ className, onClose, onSearchChange }) => {
|
|
|
1806
1813
|
inFromLeft: { opacity: 1, x: 0, transition: { duration: 0.18, ease: [0.16, 1, 0.3, 1] } },
|
|
1807
1814
|
outToRight: { opacity: 0, x: 24, transition: { duration: 0.16, ease: [0.4, 0, 1, 1] } }
|
|
1808
1815
|
};
|
|
1809
|
-
return /* @__PURE__ */ jsx("div", { className:
|
|
1816
|
+
return /* @__PURE__ */ jsx("div", { className: clsx18("h-[64px] border-b border-[#ededed]", className), children: /* @__PURE__ */ jsx("div", { className: "flex h-full items-center px-[20px]", children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "wait", children: !searching ? /* @__PURE__ */ jsxs(
|
|
1810
1817
|
motion.div,
|
|
1811
1818
|
{
|
|
1812
1819
|
className: "flex w-full items-center justify-between",
|
|
@@ -1820,7 +1827,7 @@ var ChatListHeader = ({ className, onClose, onSearchChange }) => {
|
|
|
1820
1827
|
/* @__PURE__ */ jsx("span", { className: "text-[22px] font-semibold", children: "Messenger" })
|
|
1821
1828
|
] }) }),
|
|
1822
1829
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
1823
|
-
/* @__PURE__ */ jsx(
|
|
1830
|
+
!hideSearch && /* @__PURE__ */ jsx(
|
|
1824
1831
|
"button",
|
|
1825
1832
|
{
|
|
1826
1833
|
title: "Search",
|
|
@@ -1853,7 +1860,6 @@ var ChatListHeader = ({ className, onClose, onSearchChange }) => {
|
|
|
1853
1860
|
children: /* @__PURE__ */ jsx("div", { className: "relative flex-1", children: /* @__PURE__ */ jsxs("div", { className: "flex h-10 w-full items-center rounded-full border border-[#6A6A6A] bg-white px-[4px] gap-1.5", children: [
|
|
1854
1861
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center ms-[12px] w-full", children: [
|
|
1855
1862
|
/* @__PURE__ */ jsx("span", { className: "mr-2 grid h-6 w-6 shrink-0 place-items-center text-[#929292]", children: /* @__PURE__ */ jsx(ChatSearchIcon, { className: "w-5 h-5" }) }),
|
|
1856
|
-
/* @__PURE__ */ jsx("span", { className: "mr-2 h-6 w-px shrink-0 bg-[#e1e1e1]" }),
|
|
1857
1863
|
/* @__PURE__ */ jsx(
|
|
1858
1864
|
"input",
|
|
1859
1865
|
{
|
|
@@ -1868,7 +1874,7 @@ var ChatListHeader = ({ className, onClose, onSearchChange }) => {
|
|
|
1868
1874
|
}
|
|
1869
1875
|
)
|
|
1870
1876
|
] }),
|
|
1871
|
-
/* @__PURE__ */ jsx(
|
|
1877
|
+
/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
|
|
1872
1878
|
"button",
|
|
1873
1879
|
{
|
|
1874
1880
|
title: "Close search",
|
|
@@ -1880,7 +1886,7 @@ var ChatListHeader = ({ className, onClose, onSearchChange }) => {
|
|
|
1880
1886
|
className: "grid h-8 w-8 place-items-center rounded-full text-xl hover:bg-black/5 cursor-pointer border-none bg-transparent",
|
|
1881
1887
|
children: /* @__PURE__ */ jsx(ChatXIcon, { className: "w-5 h-5" })
|
|
1882
1888
|
}
|
|
1883
|
-
)
|
|
1889
|
+
) })
|
|
1884
1890
|
] }) })
|
|
1885
1891
|
},
|
|
1886
1892
|
"search"
|
|
@@ -1942,7 +1948,7 @@ var ChatAddressCard = ({ mine, card, className }) => {
|
|
|
1942
1948
|
return /* @__PURE__ */ jsxs(
|
|
1943
1949
|
"div",
|
|
1944
1950
|
{
|
|
1945
|
-
className:
|
|
1951
|
+
className: clsx18(
|
|
1946
1952
|
"w-[340px] rounded-md bg-[#f8f8f8] p-2",
|
|
1947
1953
|
mine ? "ml-auto" : "mr-auto",
|
|
1948
1954
|
className
|
|
@@ -2090,7 +2096,7 @@ var ChatBubbleAudio = ({ mine, audio }) => {
|
|
|
2090
2096
|
type: "button",
|
|
2091
2097
|
"aria-label": playing ? "Pause" : "Play",
|
|
2092
2098
|
onClick: toggle,
|
|
2093
|
-
className:
|
|
2099
|
+
className: clsx18(
|
|
2094
2100
|
"grid h-7 w-[34px] place-items-center rounded-md transition-colors",
|
|
2095
2101
|
mine ? "bg-[#F1F1F1] text-[#00486F]" : "bg-[#F1F1F1] text-[#00486F]"
|
|
2096
2102
|
),
|
|
@@ -2161,7 +2167,7 @@ var extColor2 = (ext) => {
|
|
|
2161
2167
|
var FileChip = ({ file }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 rounded-sm border border-[#e1e1e1] bg-white px-3 py-2", children: [
|
|
2162
2168
|
/* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center gap-2", children: /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
|
|
2163
2169
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
|
|
2164
|
-
/* @__PURE__ */ jsx(FileIcon, { className:
|
|
2170
|
+
/* @__PURE__ */ jsx(FileIcon, { className: clsx18("h-[18px] w-[18px]", extColor2(file.ext)) }),
|
|
2165
2171
|
" ",
|
|
2166
2172
|
/* @__PURE__ */ jsx("div", { className: "truncate text-xs font-normal text-black", children: file.name })
|
|
2167
2173
|
] }),
|
|
@@ -2276,14 +2282,14 @@ var ChatBubbleText = ({ mine, text }) => {
|
|
|
2276
2282
|
const color = mine ? "bg-[#f8f8f8] border-[#f1f1f1]" : "bg-white border-[#EFEFEF]";
|
|
2277
2283
|
const corner = mine ? "rounded-tr-[6px]" : "rounded-tl-md";
|
|
2278
2284
|
const textFormatting = "whitespace-pre-wrap break-words";
|
|
2279
|
-
return /* @__PURE__ */ jsx("div", { className:
|
|
2285
|
+
return /* @__PURE__ */ jsx("div", { className: clsx18(base, color, corner, textFormatting), children: text });
|
|
2280
2286
|
};
|
|
2281
2287
|
var ChatBubbleText_default = ChatBubbleText;
|
|
2282
2288
|
var ChatBusinessCard = ({ mine, card }) => {
|
|
2283
2289
|
return /* @__PURE__ */ jsx(
|
|
2284
2290
|
"div",
|
|
2285
2291
|
{
|
|
2286
|
-
className:
|
|
2292
|
+
className: clsx18(
|
|
2287
2293
|
"relative h-[208px] w-[355px] overflow-hidden rounded-[12px] bg-white bg-cover bg-no-repeat",
|
|
2288
2294
|
"shadow-[0_2px_12px_rgba(59,51,51,0.1)]",
|
|
2289
2295
|
mine ? "ml-auto" : "mr-auto"
|
|
@@ -2343,13 +2349,13 @@ var MessageHoverActions = ({
|
|
|
2343
2349
|
const showTranslate = !isItemButton || isItemButton.includes("translate");
|
|
2344
2350
|
const hasAny = showReplay || showTranslate;
|
|
2345
2351
|
const isActive = (k) => !!activeButtons?.includes(k);
|
|
2346
|
-
return /* @__PURE__ */ jsxs("div", { className:
|
|
2352
|
+
return /* @__PURE__ */ jsxs("div", { className: clsx18("relative inline-flex group/message", className), children: [
|
|
2347
2353
|
children,
|
|
2348
2354
|
hasAny && /* @__PURE__ */ jsx(
|
|
2349
2355
|
"div",
|
|
2350
2356
|
{
|
|
2351
2357
|
"aria-hidden": true,
|
|
2352
|
-
className:
|
|
2358
|
+
className: clsx18(
|
|
2353
2359
|
"absolute inset-y-0 w-2",
|
|
2354
2360
|
mine ? "right-full" : "left-full",
|
|
2355
2361
|
"pointer-events-auto"
|
|
@@ -2359,7 +2365,7 @@ var MessageHoverActions = ({
|
|
|
2359
2365
|
hasAny && /* @__PURE__ */ jsx(
|
|
2360
2366
|
"div",
|
|
2361
2367
|
{
|
|
2362
|
-
className:
|
|
2368
|
+
className: clsx18(
|
|
2363
2369
|
"absolute bottom-0 pointer-events-auto transition-opacity",
|
|
2364
2370
|
sidePos,
|
|
2365
2371
|
railNudge,
|
|
@@ -2379,7 +2385,7 @@ var MessageHoverActions = ({
|
|
|
2379
2385
|
e.stopPropagation();
|
|
2380
2386
|
onReply?.();
|
|
2381
2387
|
},
|
|
2382
|
-
className:
|
|
2388
|
+
className: clsx18(
|
|
2383
2389
|
"inline-flex h-[22px] w-[22px] items-center justify-center rounded-sm bg-white text-[#2c2c2c] shadow-[0_1px_3px_rgba(0,0,0,0.08)] hover:bg-[#f8f8f8]",
|
|
2384
2390
|
isActive("replay") && "bg-[#636363] text-white"
|
|
2385
2391
|
),
|
|
@@ -2400,7 +2406,7 @@ var MessageHoverActions = ({
|
|
|
2400
2406
|
e.stopPropagation();
|
|
2401
2407
|
onTranslate?.();
|
|
2402
2408
|
},
|
|
2403
|
-
className:
|
|
2409
|
+
className: clsx18(
|
|
2404
2410
|
"inline-flex h-[22px] w-[22px] items-center justify-center rounded-sm bg-white text-[#2c2c2c] shadow-[0_1px_3px_rgba(0,0,0,0.08)] hover:bg-[#f8f8f8]",
|
|
2405
2411
|
isActive("translate") && "!bg-[#636363] text-white"
|
|
2406
2412
|
),
|
|
@@ -2456,7 +2462,7 @@ var ChatMessageItem = ({
|
|
|
2456
2462
|
setTranslated((v) => !v);
|
|
2457
2463
|
onTranslate?.();
|
|
2458
2464
|
};
|
|
2459
|
-
return /* @__PURE__ */ jsx("div", { className:
|
|
2465
|
+
return /* @__PURE__ */ jsx("div", { className: clsx18("mb-4", className), "data-msg-id": id, children: /* @__PURE__ */ jsxs("div", { className: clsx18("flex items-end gap-3", mine && "justify-end"), children: [
|
|
2460
2466
|
!mine && /* @__PURE__ */ jsx("div", { className: `${showStatus ? "mb-5" : "mb-0"}`, children: initialSrc ? /* @__PURE__ */ jsxs("div", { className: "relative h-10 w-10 shrink-0 rounded-full border border-[#F1F1F1]", children: [
|
|
2461
2467
|
/* @__PURE__ */ jsx(
|
|
2462
2468
|
"img",
|
|
@@ -2478,19 +2484,19 @@ var ChatMessageItem = ({
|
|
|
2478
2484
|
]
|
|
2479
2485
|
}
|
|
2480
2486
|
) }),
|
|
2481
|
-
/* @__PURE__ */ jsxs("div", { className:
|
|
2487
|
+
/* @__PURE__ */ jsxs("div", { className: clsx18("flex flex-col gap-1 w-full"), children: [
|
|
2482
2488
|
/* @__PURE__ */ jsx(
|
|
2483
2489
|
"div",
|
|
2484
2490
|
{
|
|
2485
|
-
className:
|
|
2491
|
+
className: clsx18(
|
|
2486
2492
|
" text-xs font-light text-[#636363]",
|
|
2487
2493
|
mine ? "text-right" : "text-left"
|
|
2488
2494
|
),
|
|
2489
2495
|
children: time
|
|
2490
2496
|
}
|
|
2491
2497
|
),
|
|
2492
|
-
/* @__PURE__ */ jsxs("div", { className:
|
|
2493
|
-
/* @__PURE__ */ jsx("div", { className:
|
|
2498
|
+
/* @__PURE__ */ jsxs("div", { className: clsx18("flex flex-col gap-1 w-full", mine ? "items-end" : "items-start"), children: [
|
|
2499
|
+
/* @__PURE__ */ jsx("div", { className: clsx18("flex w-full", mine ? "justify-end" : "justify-start"), children: replyTo && /* @__PURE__ */ jsx(ReplyCard_default, { jumpOnClick: true, refMsg: replyTo, compact: true, className: "mb-1" }) }),
|
|
2494
2500
|
businessCard ? /* @__PURE__ */ jsx(ChatBusinessCard_default, { mine, card: businessCard }) : null,
|
|
2495
2501
|
addressCard ? /* @__PURE__ */ jsx(ChatAddressCard_default, { mine, card: addressCard }) : null,
|
|
2496
2502
|
images?.length ? /* @__PURE__ */ jsx(MessageHoverActions_default, { mine, onReply, isItemButton: ["replay"], children: /* @__PURE__ */ jsx(ChatBubbleImages_default, { images }) }) : null,
|
|
@@ -2507,42 +2513,40 @@ var ChatMessageItem = ({
|
|
|
2507
2513
|
children: /* @__PURE__ */ jsx(ChatBubbleText_default, { mine, text: displayText })
|
|
2508
2514
|
}
|
|
2509
2515
|
) : null,
|
|
2510
|
-
showStatus && /* @__PURE__ */ jsx("div", { className:
|
|
2516
|
+
showStatus && /* @__PURE__ */ jsx("div", { className: clsx18("text-xs text-[#9AA1A9]", mine ? "text-right" : "text-left"), children: status })
|
|
2511
2517
|
] })
|
|
2512
2518
|
] })
|
|
2513
2519
|
] }) });
|
|
2514
2520
|
};
|
|
2515
2521
|
var ChatMessageItem_default = ChatMessageItem;
|
|
2516
|
-
var ChatScroll = ({
|
|
2517
|
-
top,
|
|
2518
|
-
children,
|
|
2519
|
-
className,
|
|
2520
|
-
style,
|
|
2521
|
-
bottomAlignWhenShort = false,
|
|
2522
|
-
scrollKey
|
|
2523
|
-
}) => {
|
|
2522
|
+
var ChatScroll = React10.forwardRef(function ChatScroll2({ top, children, className, bottomAlignWhenShort = false, scrollKey }, _) {
|
|
2524
2523
|
const ref = React10.useRef(null);
|
|
2525
2524
|
const scrollToBottom = React10.useCallback(() => {
|
|
2526
2525
|
const el = ref.current;
|
|
2527
|
-
if (!el)
|
|
2526
|
+
if (!el) {
|
|
2527
|
+
return;
|
|
2528
|
+
}
|
|
2528
2529
|
el.scrollTop = el.scrollHeight;
|
|
2529
2530
|
}, []);
|
|
2530
|
-
React10.
|
|
2531
|
+
React10.useLayoutEffect(() => {
|
|
2531
2532
|
scrollToBottom();
|
|
2532
|
-
const id = window.setTimeout(scrollToBottom, 0);
|
|
2533
|
-
return () => window.clearTimeout(id);
|
|
2534
2533
|
}, [scrollKey, scrollToBottom]);
|
|
2535
2534
|
return /* @__PURE__ */ jsx(
|
|
2536
2535
|
"div",
|
|
2537
2536
|
{
|
|
2538
2537
|
ref,
|
|
2539
2538
|
"data-chat-scroll": true,
|
|
2540
|
-
className:
|
|
2541
|
-
|
|
2539
|
+
className: clsx18(
|
|
2540
|
+
"h-full min-h-0 overflow-y-auto bg-white p-4 custom-scroll-hidden",
|
|
2541
|
+
className
|
|
2542
|
+
),
|
|
2542
2543
|
children: /* @__PURE__ */ jsxs(
|
|
2543
2544
|
"div",
|
|
2544
2545
|
{
|
|
2545
|
-
className:
|
|
2546
|
+
className: clsx18(
|
|
2547
|
+
"min-h-full flex flex-col",
|
|
2548
|
+
bottomAlignWhenShort ? "justify-end" : "justify-between"
|
|
2549
|
+
),
|
|
2546
2550
|
children: [
|
|
2547
2551
|
top,
|
|
2548
2552
|
children
|
|
@@ -2551,7 +2555,7 @@ var ChatScroll = ({
|
|
|
2551
2555
|
)
|
|
2552
2556
|
}
|
|
2553
2557
|
);
|
|
2554
|
-
};
|
|
2558
|
+
});
|
|
2555
2559
|
var ChatScroll_default = ChatScroll;
|
|
2556
2560
|
var ChatThreadItem = ({
|
|
2557
2561
|
active,
|
|
@@ -2564,12 +2568,10 @@ var ChatThreadItem = ({
|
|
|
2564
2568
|
status,
|
|
2565
2569
|
avatarText,
|
|
2566
2570
|
avatarSrc,
|
|
2567
|
-
_size = 46,
|
|
2568
2571
|
avatarBg = "#FFF1EC",
|
|
2569
2572
|
className,
|
|
2570
2573
|
onClick
|
|
2571
2574
|
}) => {
|
|
2572
|
-
const count = status.kind === "new" ? String(Math.max(0, status.count)).padStart(2, "0") : "";
|
|
2573
2575
|
const statusEl = (() => {
|
|
2574
2576
|
switch (status.kind) {
|
|
2575
2577
|
case "seen":
|
|
@@ -2578,7 +2580,7 @@ var ChatThreadItem = ({
|
|
|
2578
2580
|
return /* @__PURE__ */ jsx("span", { className: "text-[#B7B7B7]", children: "Delivered" });
|
|
2579
2581
|
case "new":
|
|
2580
2582
|
return /* @__PURE__ */ jsxs("span", { className: "text-[#E63946]", children: [
|
|
2581
|
-
count,
|
|
2583
|
+
String(Math.max(0, status.count)).padStart(2, "0"),
|
|
2582
2584
|
" New"
|
|
2583
2585
|
] });
|
|
2584
2586
|
default:
|
|
@@ -2589,7 +2591,7 @@ var ChatThreadItem = ({
|
|
|
2589
2591
|
"button",
|
|
2590
2592
|
{
|
|
2591
2593
|
onClick,
|
|
2592
|
-
className:
|
|
2594
|
+
className: clsx18(
|
|
2593
2595
|
"relative w-full text-left px-5 py-2 hover:bg-[#f8f8f8] focus:outline-none h-[75px]",
|
|
2594
2596
|
active && "bg-[#f8f8f8]",
|
|
2595
2597
|
className
|
|
@@ -2598,7 +2600,7 @@ var ChatThreadItem = ({
|
|
|
2598
2600
|
pinned && /* @__PURE__ */ jsx("span", { className: "absolute right-0 top-0 h-0 w-0 border-l-16 border-t-16 border-l-transparent border-t-[#FFD2BD]" }),
|
|
2599
2601
|
/* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 border-b border-[#f8f8f8] pb-2", children: [
|
|
2600
2602
|
/* @__PURE__ */ jsxs("div", { className: "relative mt-[2px]", children: [
|
|
2601
|
-
avatarSrc ? /* @__PURE__ */ jsx("div", { className: "grid h-9 w-9 place-items-center rounded-xs font-semibold text-2xl border border-[#f1f1f1]
|
|
2603
|
+
avatarSrc ? /* @__PURE__ */ jsx("div", { className: "grid h-9 w-9 place-items-center rounded-xs font-semibold text-2xl border border-[#f1f1f1]", children: /* @__PURE__ */ jsx(
|
|
2602
2604
|
"img",
|
|
2603
2605
|
{
|
|
2604
2606
|
src: avatarSrc,
|
|
@@ -2884,7 +2886,7 @@ var ChatImagePreviewModal = ({
|
|
|
2884
2886
|
var ChatImagePreviewModal_default = ChatImagePreviewModal;
|
|
2885
2887
|
var avatarBgByInitial = {
|
|
2886
2888
|
K: "#FFE7DB",
|
|
2887
|
-
A: "#
|
|
2889
|
+
A: "#FFF1EC",
|
|
2888
2890
|
F: "#E8F7FF",
|
|
2889
2891
|
B: "#F0EDEB",
|
|
2890
2892
|
b: "#F0EDEB"
|
|
@@ -2944,6 +2946,7 @@ var InboxPopup = ({ adapter, uiCallbacks, theme }) => {
|
|
|
2944
2946
|
const online = Boolean(activeThread?.online);
|
|
2945
2947
|
const isVerified = Boolean(activeThread?.badge);
|
|
2946
2948
|
const avatarBg = avatarBgByInitial[initial] ?? "#FFF1EC";
|
|
2949
|
+
const initialSrc = activeThread?.avatarSrc ?? "/chat/banbox_chat_logo.png";
|
|
2947
2950
|
const idLabel = activeThread?.orderId ? "Order ID" : activeThread?.inquiryId ? "Inquiry ID" : void 0;
|
|
2948
2951
|
const idButtonLabel = activeThread?.orderId ? "View Order" : activeThread?.inquiryId ? "View Inquiry" : void 0;
|
|
2949
2952
|
const idValue = activeThread?.orderId ?? activeThread?.inquiryId ?? void 0;
|
|
@@ -2975,7 +2978,11 @@ var InboxPopup = ({ adapter, uiCallbacks, theme }) => {
|
|
|
2975
2978
|
if (nextId) selectThread(nextId);
|
|
2976
2979
|
setReplyTo(void 0);
|
|
2977
2980
|
setShowDelete(false);
|
|
2978
|
-
uiCallbacks?.showToast?.({
|
|
2981
|
+
uiCallbacks?.showToast?.({
|
|
2982
|
+
type: "success",
|
|
2983
|
+
title: "Chat Deleted",
|
|
2984
|
+
message: "The chat has been deleted successfully."
|
|
2985
|
+
});
|
|
2979
2986
|
};
|
|
2980
2987
|
const filteredThreads = threads.filter((t) => {
|
|
2981
2988
|
if (!searchQuery.trim()) return true;
|
|
@@ -2988,7 +2995,7 @@ var InboxPopup = ({ adapter, uiCallbacks, theme }) => {
|
|
|
2988
2995
|
{
|
|
2989
2996
|
"aria-label": "Close chat",
|
|
2990
2997
|
onClick: close,
|
|
2991
|
-
className: "fixed inset-0
|
|
2998
|
+
className: "fixed inset-0",
|
|
2992
2999
|
style: { background: "transparent", border: "none" },
|
|
2993
3000
|
initial: { opacity: 0 },
|
|
2994
3001
|
animate: { opacity: 1 },
|
|
@@ -3021,12 +3028,35 @@ var InboxPopup = ({ adapter, uiCallbacks, theme }) => {
|
|
|
3021
3028
|
style: { overscrollBehavior: "contain" },
|
|
3022
3029
|
children: [
|
|
3023
3030
|
/* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 rounded-[14px] ring-1 ring-[#2F80ED]/40" }),
|
|
3024
|
-
/* @__PURE__ */ jsxs("div", { className: "grid h-full min-h-0 grid-cols-[
|
|
3031
|
+
/* @__PURE__ */ jsxs("div", { className: "grid h-full min-h-0 grid-cols-[1fr_350px]", children: [
|
|
3025
3032
|
/* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 flex-col border-r border-[#9BBCCF]", children: [
|
|
3026
3033
|
/* @__PURE__ */ jsx("div", { className: "h-[64px] shrink-0", children: /* @__PURE__ */ jsx(
|
|
3027
3034
|
ChatHeader,
|
|
3028
3035
|
{
|
|
3029
|
-
left: activeThread?.avatarSrc ? /* @__PURE__ */ jsx(
|
|
3036
|
+
left: activeThread?.avatarSrc ? /* @__PURE__ */ jsx(
|
|
3037
|
+
ChatIdentity_default,
|
|
3038
|
+
{
|
|
3039
|
+
variant: "avatar",
|
|
3040
|
+
src: initialSrc,
|
|
3041
|
+
online,
|
|
3042
|
+
title,
|
|
3043
|
+
subtitle,
|
|
3044
|
+
verified: isVerified,
|
|
3045
|
+
subtitleVariant: "muted"
|
|
3046
|
+
}
|
|
3047
|
+
) : /* @__PURE__ */ jsx(
|
|
3048
|
+
ChatIdentity_default,
|
|
3049
|
+
{
|
|
3050
|
+
variant: "initial",
|
|
3051
|
+
initial,
|
|
3052
|
+
bg: avatarBg,
|
|
3053
|
+
online,
|
|
3054
|
+
title,
|
|
3055
|
+
subtitle,
|
|
3056
|
+
verified: isVerified,
|
|
3057
|
+
subtitleVariant: "muted"
|
|
3058
|
+
}
|
|
3059
|
+
),
|
|
3030
3060
|
right: uiCallbacks?.renderKebabMenu?.({
|
|
3031
3061
|
pinned: Boolean(activeThread?.pinned),
|
|
3032
3062
|
onPinToggle: () => {
|
|
@@ -3098,9 +3128,9 @@ var InboxPopup = ({ adapter, uiCallbacks, theme }) => {
|
|
|
3098
3128
|
activeId
|
|
3099
3129
|
) })
|
|
3100
3130
|
] }),
|
|
3101
|
-
/* @__PURE__ */ jsxs("div", { className: "
|
|
3102
|
-
/* @__PURE__ */ jsx(
|
|
3103
|
-
/* @__PURE__ */ jsx("div", { className: "
|
|
3131
|
+
/* @__PURE__ */ jsxs("div", { className: "h-full min-h-0", children: [
|
|
3132
|
+
/* @__PURE__ */ jsx(ChatListHeader_default, { onClose: close, onSearchChange: (val) => setSearchQuery(val) }),
|
|
3133
|
+
/* @__PURE__ */ jsx("div", { className: "h-full overflow-y-auto custom-scroll py-0", children: filteredThreads.map((t) => {
|
|
3104
3134
|
const status = t.status ?? (t.unread && t.unread > 0 ? { kind: "new", count: t.unread } : { kind: "seen" });
|
|
3105
3135
|
return /* @__PURE__ */ jsx(
|
|
3106
3136
|
ChatThreadItem_default,
|
|
@@ -3125,7 +3155,14 @@ var InboxPopup = ({ adapter, uiCallbacks, theme }) => {
|
|
|
3125
3155
|
}) })
|
|
3126
3156
|
] })
|
|
3127
3157
|
] }),
|
|
3128
|
-
/* @__PURE__ */ jsx(
|
|
3158
|
+
/* @__PURE__ */ jsx(
|
|
3159
|
+
ChatConfirmModal,
|
|
3160
|
+
{
|
|
3161
|
+
open: showDelete,
|
|
3162
|
+
onClose: () => setShowDelete(false),
|
|
3163
|
+
onConfirm: handleConfirmDelete
|
|
3164
|
+
}
|
|
3165
|
+
),
|
|
3129
3166
|
/* @__PURE__ */ jsx(ChatImagePreviewModal_default, { isOpen: isGalleryOpen, onClose: closeGallery })
|
|
3130
3167
|
]
|
|
3131
3168
|
}
|