npm - zignal-stencil-library - Versions diffs - 1.1.121 → 1.1.123 - Mend

zignal-stencil-library 1.1.121 → 1.1.123

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.

Files changed (391) hide show

package/dist/components/p-DJPhPlLw.js ADDED Viewed

@@ -0,0 +1,101 @@
+import { p as proxyCustomElement, H, h, a as Host } from './p-DRz4sc4i.js';
+import { I as Icon } from './p-BhidTUJs.js';
+import { c as configStore } from './p-C-yg0vtE.js';
+const zAvatarCss = "@layer base{*,::backdrop,:after,:before{--tw-space-y-reverse:0;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-space-x-reverse:0;--tw-shadow:0 0 #0000;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-alpha:100%;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-offset-width:0;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-drop-shadow-alpha:100%;--tw-border-style:solid;border:0 solid;box-sizing:border-box;margin:0;padding:0}}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-space-x-reverse:0;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-font-weight:initial;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-border-style:solid;--tw-space-y-reverse:0;--tw-leading:initial;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0}}}@layer theme{:host,:root{--container-xl:36rem;--container-3xs:16rem;--color-yellow-500:oklch(79.5% .184 86.047);--container-sm:24rem;--color-red-50:oklch(97.1% .013 17.38);--color-red-200:oklch(88.5% .062 18.334);--color-slate-100:oklch(96.8% .007 247.896);--color-slate-200:oklch(92.9% .013 255.508);--color-slate-700:oklch(37.2% .044 257.287);--color-slate-900:oklch(20.8% .042 265.755);--container-xs:20rem;--container-md:28rem;--text-2xl:1.5rem;--text-2xl--line-height:1.33333;--color-gray-400:oklch(70.7% .022 261.325);--color-slate-500:oklch(55.4% .046 257.417);--leading-tight:1.25;--leading-snug:1.375;--leading-relaxed:1.625;--color-yellow-300:oklch(90.5% .182 98.111);--color-red-700:oklch(50.5% .213 27.518);--color-green-500:oklch(72.3% .219 149.579);--color-green-700:oklch(52.7% .154 150.069);--color-blue-500:oklch(62.3% .214 259.815);--color-pink-100:oklch(94.8% .028 342.258);--font-weight-semibold:600;--font-weight-bold:700;--animate-spin:spin 1s linear infinite;--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--color-red-500:oklch(63.7% .237 25.331);--color-blue-600:oklch(54.6% .245 262.881);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-black:#000;--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:1.33333;--text-sm:.875rem;--text-sm--line-height:1.42857;--text-base:1rem;--text-base--line-height:1.5;--text-lg:1.125rem;--text-lg--line-height:1.55556;--font-weight-medium:500;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:\"Kanit\",var(--default-font);--default-mono-font-family:var(--font-mono);--default-font:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";--color-primary:#e02848;--color-secondary:#023761;--color-background:#fff;--color-surface:#000;--color-paper:#f3f4f6;--color-divider:#e5e7eb;--color-theme-gray:#6b7280}}@layer base{::file-selector-button{appearance:button;background-color:#0000;border:0 solid;border-radius:0;box-sizing:border-box;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;margin:0;margin-inline-end:4px;opacity:1;padding:0}:host,html{-webkit-text-size-adjust:100%;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);tab-size:4;-webkit-tap-highlight-color:transparent;line-height:1.5}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-size:1em;font-variation-settings:var(--default-mono-font-variation-settings,normal)}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}menu,ol,ul{list-style:none}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}button,input,optgroup,select,textarea{background-color:#0000;border-radius:0;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;min-height:1.5em;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field{padding-block:0;padding-bottom:0;padding-top:0}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-month-field{padding-block:0;padding-bottom:0;padding-top:0}::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field{padding-block:0;padding-bottom:0;padding-top:0}::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-second-field{padding-block:0;padding-bottom:0;padding-top:0}::-webkit-datetime-edit-meridiem-field{padding-block:0;padding-bottom:0;padding-top:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}[multiple],[type=date],[type=datetime-local],[type=email],[type=month],[type=number],[type=password],[type=search],[type=tel],[type=text],[type=time],[type=url],[type=week],input:where(:not([type])),select,textarea{appearance:none;--tw-shadow:0 0 #0000;background-color:#fff;border-color:oklch(55.1% .027 264.364);border-radius:0;border-width:1px;font-size:1rem;line-height:1.5rem;padding:.5rem .75rem}:is([type=text],input:where(:not([type])),[type=email],[type=url],[type=password],[type=number],[type=date],[type=datetime-local],[type=month],[type=search],[type=tel],[type=time],[type=week],[multiple],textarea,select):focus{outline-offset:2px;--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:oklch(54.6% .245 262.881);--tw-ring-offset-shadow:var(--tw-ring-inset)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color);border-color:oklch(54.6% .245 262.881);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);outline:2px solid #0000}input::placeholder,textarea::placeholder{color:oklch(55.1% .027 264.364);opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}select{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='oklch(55.1%25 0.027 264.364)' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E\");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;print-color-adjust:exact}[multiple],[size]:where(select:not([size=\"1\"])){background-image:none;background-position:0 0;background-repeat:unset;background-size:initial;padding-right:.75rem;print-color-adjust:unset}[type=checkbox],[type=radio]{appearance:none;color:oklch(54.6% .245 262.881);print-color-adjust:exact;-webkit-user-select:none;user-select:none;vertical-align:middle;--tw-shadow:0 0 #0000;background-color:#fff;background-origin:border-box;border-color:oklch(55.1% .027 264.364);border-width:1px;display:inline-block;flex-shrink:0;height:1rem;padding:0;width:1rem}[type=checkbox]{border-radius:0}[type=radio]{border-radius:100%}[type=checkbox]:focus,[type=radio]:focus{outline-offset:2px;--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:2px;--tw-ring-offset-color:#fff;--tw-ring-color:oklch(54.6% .245 262.881);--tw-ring-offset-shadow:var(--tw-ring-inset)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);outline:2px solid #0000}[type=checkbox]:checked,[type=radio]:checked{background-color:currentColor;background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-color:#0000}[type=checkbox]:checked{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0'/%3E%3C/svg%3E\")}[type=radio]:checked{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E\")}[type=checkbox]:checked:focus,[type=checkbox]:checked:hover,[type=radio]:checked:focus,[type=radio]:checked:hover{background-color:currentColor;border-color:#0000}[type=checkbox]:indeterminate{background-color:currentColor;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3E%3C/svg%3E\");background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-color:#0000}[type=checkbox]:indeterminate:focus,[type=checkbox]:indeterminate:hover{background-color:currentColor;border-color:#0000}[type=file]{background:unset;border-color:inherit;border-radius:0;border-width:0;font-size:unset;line-height:inherit;padding:0}[type=file]:focus{outline:1px solid buttontext;outline:1px auto -webkit-focus-ring-color}}@layer components{.dialog-backdrop{align-items:center;background-color:#0006;display:flex;inset:calc(var(--spacing)*0);justify-content:center;position:fixed;z-index:50}@supports (color:color-mix(in lab,red,red)){.dialog-backdrop{background-color:color-mix(in oklab,var(--color-black)40%,transparent);background-color:color-mix(in srgb,#00040%,transparent)}}.chat-item{border-radius:var(--radius-xl);cursor:pointer;margin-block:calc(var(--spacing)*1);margin-inline:calc(var(--spacing)*2);padding-block:calc(var(--spacing)*3);padding-inline:calc(var(--spacing)*4);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);align-items:flex-start;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);display:flex;position:relative}:where(.chat-item>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-end:calc(var(--spacing)*4*(1 - var(--tw-space-x-reverse)));margin-inline-start:calc(var(--spacing)*4*var(--tw-space-x-reverse))}.chat-item .chat-item-pin{position:absolute;right:calc(var(--spacing)*-3);top:calc(var(--spacing)*1)}.chat-item .chat-item-pin-icon{fill:currentColor;height:calc(var(--spacing)*3);rotate:45deg;width:calc(var(--spacing)*3)}.chat-item .chat-item-content-container{display:flex;flex-direction:row;width:100%}:where(.chat-item .chat-item-content-container>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-end:calc(var(--spacing)*4*(1 - var(--tw-space-x-reverse)));margin-inline-start:calc(var(--spacing)*4*var(--tw-space-x-reverse))}.chat-item .chat-item-avatar-wrapper{align-self:center;flex-shrink:0;position:relative}.chat-item .chat-item-avatar-badge{bottom:calc(var(--spacing)*-.5);position:absolute;right:calc(var(--spacing)*-.5)}.chat-item .chat-item-content-wrapper{min-height:calc(var(--spacing)*18);width:100%}.chat-item .chat-item-content-main{align-items:center;display:flex}:where(.chat-item .chat-item-content-main>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-end:calc(var(--spacing)*1*(1 - var(--tw-space-x-reverse)));margin-inline-start:calc(var(--spacing)*1*var(--tw-space-x-reverse))}.chat-item .chat-item-content-main-image{border-radius:3.40282e+38px;height:calc(var(--spacing)*4);width:calc(var(--spacing)*4)}.chat-item .chat-item-content-main-name{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.chat-item .chat-item-content-main-name,.chat-item .chat-item-content-main-time{-webkit-line-clamp:1;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.chat-item .chat-item-content-main-time{color:var(--color-gray-500);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));margin-left:auto}.chat-item .chat-item-content-secondary{align-items:flex-start;display:flex;flex-direction:row;width:100%}.chat-item .chat-item-content-secondary-nickname{font-size:var(--text-base);-webkit-line-clamp:1;line-height:var(--tw-leading,var(--text-base--line-height));-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.chat-item .chat-item-content-secondary-message{color:var(--color-gray-600);font-size:var(--text-sm);-webkit-line-clamp:1;line-height:var(--tw-leading,var(--text-sm--line-height));-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.chat-item .chat-item-content-unread{background-color:var(--color-primary);border-radius:3.40282e+38px;color:var(--color-white);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));margin-left:auto}.chat-item .chat-item-content-unread-mark{display:inline-block;height:calc(var(--spacing)*2.5);width:calc(var(--spacing)*2.5)}.chat-item .chat-item-content-unread-count{padding-block:calc(var(--spacing)*.5);padding-inline:calc(var(--spacing)*2)}.z-icon-button{cursor:pointer;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-medium);align-items:center;border-radius:3.40282e+38px;display:inline-flex;font-weight:var(--font-weight-medium);justify-content:center;transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.z-icon-button:focus{--tw-outline-style:none;outline-style:none}.z-icon-button-primary{background-color:var(--color-primary);color:var(--color-white)}.z-icon-button-outlined{border-color:var(--color-primary);border-style:var(--tw-border-style);border-width:1px}.z-icon-button-outlined,.z-icon-button-text{color:var(--color-primary)}.z-icon-button-disabled{cursor:not-allowed;opacity:.5}.z-button{cursor:pointer;--tw-font-weight:var(--font-weight-medium);align-items:center;border-radius:3.40282e+38px;display:inline-flex;font-weight:var(--font-weight-medium);justify-content:center;transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.z-button:focus{--tw-outline-style:none;outline-style:none}.z-button-small{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));padding-block:calc(var(--spacing)*1.5);padding-inline:calc(var(--spacing)*2)}.z-button-medium{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));padding-block:calc(var(--spacing)*2);padding-inline:calc(var(--spacing)*3)}.z-button-large{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));padding-block:calc(var(--spacing)*3);padding-inline:calc(var(--spacing)*4)}.z-button-primary{background-color:var(--color-primary);color:var(--color-white)}.z-button-outlined{border-color:var(--color-primary);border-style:var(--tw-border-style);border-width:1px;color:var(--color-primary)}.z-button-disabled{cursor:not-allowed;opacity:.5}.z-button-text{margin-inline:calc(var(--spacing)*2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.z-input-area-label{margin-bottom:calc(var(--spacing)*1);--tw-font-weight:var(--font-weight-medium);display:block;font-weight:var(--font-weight-medium)}.z-input-area-input,.z-input-area-label{color:var(--color-surface);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.z-input-area-input{background-color:var(--color-paper);border-color:var(--color-surface);border-radius:var(--radius-lg);border-style:var(--tw-border-style);padding-block:calc(var(--spacing)*2);padding-inline:calc(var(--spacing)*4);--tw-ring-color:var(--color-primary);border-width:1px;width:100%}.z-input-area-input:focus{border-color:var(--color-primary);--tw-outline-style:none;outline-style:none}.z-input-area-error{color:var(--color-red-500);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));margin-top:calc(var(--spacing)*1)}.z-input-label{margin-bottom:calc(var(--spacing)*1);--tw-font-weight:var(--font-weight-medium);display:block;font-weight:var(--font-weight-medium)}.z-input,.z-input-label{color:var(--color-surface);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.z-input{background-color:var(--color-background);border-color:var(--color-divider);border-style:var(--tw-border-style);padding-block:calc(var(--spacing)*2);padding-inline:calc(var(--spacing)*4);--tw-ring-color:var(--color-primary);border-radius:3.40282e+38px;border-width:1px;width:100%}.z-input:focus{border-color:var(--color-primary);--tw-outline-style:none;outline-style:none}.z-input-error{color:var(--color-red-500);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));margin-top:calc(var(--spacing)*1)}.z-select-input-label{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));margin-bottom:calc(var(--spacing)*1);--tw-font-weight:var(--font-weight-medium);display:block;font-weight:var(--font-weight-medium)}.z-tag-or-status-item{align-items:center;border-radius:var(--radius-2xl);gap:calc(var(--spacing)*2);padding-block:calc(var(--spacing)*1.5);padding-inline:calc(var(--spacing)*3);--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);display:inline-flex}.z-tag-or-status-item .z-tag-or-status-item-name{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));max-width:calc(var(--spacing)*20)}.z-tag-or-status-item .z-tag-or-status-item-icon{border-radius:3.40282e+38px;height:calc(var(--spacing)*4);width:calc(var(--spacing)*4)}.z-context-input{align-items:stretch;display:flex;flex-direction:row;margin-block:calc(var(--spacing)*1)}.z-context-input-key{background-color:var(--color-background);border-bottom-left-radius:var(--radius-3xl);border-color:var(--color-divider);border-style:var(--tw-border-style);border-top-left-radius:var(--radius-3xl);border-width:1px;color:var(--color-surface);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));max-height:6.4rem;min-height:2.4rem;padding-block:calc(var(--spacing)*2);padding-inline:calc(var(--spacing)*4);resize:none;width:100%;--tw-ring-color:var(--color-primary);flex:1}.z-context-input-key:focus{border-color:var(--color-primary);--tw-outline-style:none;outline-style:none}.z-context-input-value{background-color:var(--color-background);border-bottom-right-radius:var(--radius-3xl);border-color:var(--color-primary);border-style:var(--tw-border-style);border-top-right-radius:var(--radius-3xl);border-width:1px;color:var(--color-surface);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));max-height:6.4rem;min-height:2.4rem;padding-block:calc(var(--spacing)*2);padding-inline:calc(var(--spacing)*4);resize:none;width:100%;--tw-ring-color:var(--color-primary);flex:1}.z-context-input-value:focus{border-color:var(--color-primary);--tw-outline-style:none;outline-style:none}.z-text-with-link{color:var(--color-blue-600);text-decoration-line:underline}.z-button-group{display:inline-flex}.z-button-group-tab{border-radius:var(--radius-md);display:flex;gap:calc(var(--spacing)*1);padding:calc(var(--spacing)*.5)!important}.z-button-group-item{border-style:var(--tw-border-style);cursor:pointer;--tw-font-weight:var(--font-weight-medium);align-items:center;border-width:1px;display:inline-flex;font-weight:var(--font-weight-medium);justify-content:center;transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.z-button-group-item:focus{--tw-outline-style:none;outline-style:none}.z-button-group-item-tab{align-items:center;border-radius:var(--radius-sm);border-style:var(--tw-border-style)!important;border-width:0!important;display:flex;flex:1;flex-direction:column;gap:calc(var(--spacing)*2);justify-content:center;padding:calc(var(--spacing)*1)!important}.z-button-group-item-tab-selected{background-color:var(--color-white);--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.z-button-group-item-tab-selected,.z-button-group-item-tab-unselected{border-style:var(--tw-border-style)!important;border-width:0!important}.z-button-group-small{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));padding-block:calc(var(--spacing)*1.5);padding-inline:calc(var(--spacing)*2)}.z-button-group-medium{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));padding-block:calc(var(--spacing)*2);padding-inline:calc(var(--spacing)*3)}.z-button-group-large{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));padding-block:calc(var(--spacing)*3);padding-inline:calc(var(--spacing)*4)}.z-button-group-item-first{border-bottom-left-radius:3.40282e+38px;border-top-left-radius:3.40282e+38px}.z-button-group-item-last{border-bottom-right-radius:3.40282e+38px;border-top-right-radius:3.40282e+38px}.z-button-group-item-middle{border-radius:0}.z-button-group-item-primary-selected{background-color:var(--color-primary);border-color:var(--color-primary);color:var(--color-white)}.z-button-group-item-primary-unselected{background-color:var(--color-white);border-color:var(--color-primary);color:var(--color-primary)}.z-button-group-item-outlined-selected{background-color:var(--color-primary);border-color:var(--color-primary);color:var(--color-white)}.z-button-group-item-outlined-unselected{background-color:#0000;border-color:var(--color-primary);color:var(--color-primary)}.z-button-group-item-disabled{cursor:not-allowed;opacity:.5}.z-button-group-item:not(:first-child){margin-left:-1px}}@layer utilities{.visible{visibility:visible}.mx-auto{margin-inline:auto}.size-18{height:calc(var(--spacing)*18);width:calc(var(--spacing)*18)}.text-theme-gray{color:var(--color-theme-gray)}}[data-theme=light]{--color-primary:#e02848;--color-secondary:#023761;--color-background:#fff;--color-surface:#000;--color-paper:#f3f4f6;--color-divider:#e5e7eb;--color-theme-gray:#6b7280}[data-theme=dark]{--color-primary:#b50f30;--color-secondary:#fff;--color-background:#23292d;--color-surface:#fff;--color-paper:#374151;--color-divider:#4b5563;--color-theme-gray:#d1d5db}.scroll-container::-webkit-scrollbar{background:#0000001a;height:8px;width:8px}.scroll-container:active::-webkit-scrollbar,.scroll-container:hover::-webkit-scrollbar{background:#0003}.scroll-container:active::-webkit-scrollbar-thumb,.scroll-container:hover::-webkit-scrollbar-thumb{background:#0006;border-radius:4px}.bg-time-badge{background-color:#0000004d}@supports (color:color-mix(in lab,red,red)){.bg-time-badge{background-color:color-mix(in srgb,var(--color-surface)30%,transparent);background-color:color-mix(in srgb,#00030%,transparent)}}.placeholder-surface::placeholder{color:var(--color-text-gray)}.z-width-100{width:100%}.z-width-90{width:90%}.z-width-75{width:75%}.z-width-50{width:50%}.z-width-25{width:25%}.z-width-0{width:0}.z-animate-width{transition-duration:.5s;transition-property:width;transition-timing-function:cubic-bezier(.4,0,.2,1)}.z-animate-grid-template-cols{transition:grid-template-rows .5s}[type=checkbox]{background-color:var(--color-gray-300);border-color:var(--color-gray-300);border-radius:4px;cursor:pointer}[type=checkbox]:checked,[type=checkbox]:indeterminate{background-color:var(--color-primary);border-color:var(--color-primary);border-radius:4px;cursor:pointer}[type=checkbox]:focus{offset:0;outline-offset:0;--tw-ring-color:var(--color-primary);outline:none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.grid-cols-1{grid-template-columns:1fr}.grid-cols-1_3{grid-template-columns:1fr 3fr}.grid-cols-1_2_1{grid-template-columns:1fr 2fr 1fr}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{.absolute{position:absolute}.flex{display:flex}.hidden{display:none}.resize{resize:both}.container{width:100%}.hidden\\!{display:none!important}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.relative{position:relative}.size-4{height:calc(var(--spacing)*4);width:calc(var(--spacing)*4)}.size-8{height:calc(var(--spacing)*8);width:calc(var(--spacing)*8)}.size-16{height:calc(var(--spacing)*16);width:calc(var(--spacing)*16)}.size-32{height:calc(var(--spacing)*32);width:calc(var(--spacing)*32)}.size-\\[8px\\]{height:8px;width:8px}.size-\\[10px\\]{height:10px;width:10px}.rounded-full{border-radius:3.40282e+38px}.bg-paper{background-color:var(--color-paper)}.object-cover{object-fit:cover}.text-surface{color:var(--color-surface)}.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.m-2{margin:calc(var(--spacing)*2)}.mx-4{margin-inline:calc(var(--spacing)*4)}.mt-2{margin-top:calc(var(--spacing)*2)}.mt-auto{margin-top:auto}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.ml-0\\.5{margin-left:calc(var(--spacing)*.5)}.ml-auto{margin-left:auto}.size-3{height:calc(var(--spacing)*3);width:calc(var(--spacing)*3)}.size-5{height:calc(var(--spacing)*5);width:calc(var(--spacing)*5)}.w-1\\/2{width:50%}.w-9{width:calc(var(--spacing)*9)}.w-full{width:100%}.max-w-32{max-width:calc(var(--spacing)*32)}.translate-y-0{--tw-translate-y:calc(var(--spacing)*0)}.translate-y-0,.translate-y-full{translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-y-full{--tw-translate-y:100%}.animate-spin{animation:var(--animate-spin)}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}.gap-y-1{row-gap:calc(var(--spacing)*1)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.border{border-style:var(--tw-border-style);border-width:1px}.border-b-\\[0\\.5px\\]{border-bottom-style:var(--tw-border-style);border-bottom-width:.5px}.border-divider{border-color:var(--color-divider)}.border-primary{border-color:var(--color-primary)}.bg-background{background-color:var(--color-background)}.bg-pink-100{background-color:var(--color-pink-100)}.bg-secondary{background-color:var(--color-secondary)}.pt-2{padding-top:calc(var(--spacing)*2)}.text-right{text-align:right}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-line{white-space:pre-line}.text-background{color:var(--color-background)}.text-black{color:var(--color-black)}.text-blue-500{color:var(--color-blue-500)}.text-green-500{color:var(--color-green-500)}.text-green-700{color:var(--color-green-700)}.text-primary{color:var(--color-primary)}.text-red-700{color:var(--color-red-700)}.text-white{color:var(--color-white)}.capitalize{text-transform:capitalize}.opacity-0{opacity:0}.opacity-100{opacity:1}}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}@keyframes spin{to{transform:rotate(1turn)}}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.rotate-45{rotate:45deg}.w-xl{width:var(--container-xl)}.w-xs{width:var(--container-xs)}.m-auto{margin:auto}}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-end:calc(var(--spacing)*2*(1 - var(--tw-space-y-reverse)));margin-block-start:calc(var(--spacing)*2*var(--tw-space-y-reverse))}}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{.my-2{margin-block:calc(var(--spacing)*2)}.-top-12{top:calc(var(--spacing)*-12)}.-top-24{top:calc(var(--spacing)*-24)}.mt-10{margin-top:calc(var(--spacing)*10)}.mb-10{margin-bottom:calc(var(--spacing)*10)}.inline-block{display:inline-block}.p-4{padding:calc(var(--spacing)*4)}.px-4{padding-inline:calc(var(--spacing)*4)}.pt-4{padding-top:calc(var(--spacing)*4)}.pb-8{padding-bottom:calc(var(--spacing)*8)}.mt-1{margin-top:calc(var(--spacing)*1)}.line-clamp-3{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.max-w-3xs{max-width:var(--container-3xs)}.max-w-sm{max-width:var(--container-sm)}.cursor-pointer{cursor:pointer}.rounded-br-\\[0\\]{border-bottom-right-radius:0}.rounded-bl-\\[0\\]{border-bottom-left-radius:0}.bg-black{background-color:var(--color-black)}.bg-white{background-color:var(--color-white)}.p-2{padding:calc(var(--spacing)*2)}.p-3{padding:calc(var(--spacing)*3)}.px-3{padding-inline:calc(var(--spacing)*3)}.py-2{padding-block:calc(var(--spacing)*2)}.underline{text-decoration-line:underline}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.right-full{right:100%}.-bottom-2{bottom:calc(var(--spacing)*-2)}.left-full{left:100%}.mr-2{margin-right:calc(var(--spacing)*2)}.mb-0\\.5{margin-bottom:calc(var(--spacing)*.5)}.mb-2\\.5{margin-bottom:calc(var(--spacing)*2.5)}.ml-2{margin-left:calc(var(--spacing)*2)}.size-6{height:calc(var(--spacing)*6);width:calc(var(--spacing)*6)}.flex-row{flex-direction:row}.items-center{align-items:center}.justify-center{justify-content:center}.justify-start{justify-content:flex-start}.bg-yellow-300{background-color:var(--color-yellow-300)}.pl-10{padding-left:calc(var(--spacing)*10)}.text-left{text-align:left}.size-42{height:calc(var(--spacing)*42);width:calc(var(--spacing)*42)}.h-20{height:calc(var(--spacing)*20)}.w-42{width:calc(var(--spacing)*42)}.border-transparent{border-color:#0000}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.-right-0\\.5{right:calc(var(--spacing)*-.5)}.-bottom-0\\.5{bottom:calc(var(--spacing)*-.5)}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.fixed{position:fixed}.inset-0{inset:calc(var(--spacing)*0)}.top-3{top:calc(var(--spacing)*3)}.right-3{right:calc(var(--spacing)*3)}.right-4{right:calc(var(--spacing)*4)}.bottom-3{bottom:calc(var(--spacing)*3)}.left-3{left:calc(var(--spacing)*3)}.z-10{z-index:10}.z-80{z-index:80}.mt-4{margin-top:calc(var(--spacing)*4)}.mt-6{margin-top:calc(var(--spacing)*6)}.contents{display:contents}.grid{display:grid}.inline-flex{display:inline-flex}.aspect-square{aspect-ratio:1}.size-12{height:calc(var(--spacing)*12);width:calc(var(--spacing)*12)}.size-14{height:calc(var(--spacing)*14);width:calc(var(--spacing)*14)}.h-7{height:calc(var(--spacing)*7)}.h-8{height:calc(var(--spacing)*8)}.h-9{height:calc(var(--spacing)*9)}.h-\\[180px\\]{height:180px}.h-\\[220px\\]{height:220px}.h-\\[280px\\]{height:280px}.h-full{height:100%}.w-7{width:calc(var(--spacing)*7)}.w-8{width:calc(var(--spacing)*8)}.w-\\[200px\\]{width:200px}.w-\\[250px\\]{width:250px}.max-w-full{max-width:100%}.max-w-md{max-width:var(--container-md)}.max-w-xs{max-width:var(--container-xs)}.flex-1{flex:1}.flex-shrink-0,.shrink-0{flex-shrink:0}.cursor-not-allowed{cursor:not-allowed}.resize-none{resize:none}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.gap-1{gap:calc(var(--spacing)*1)}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-\\[18px\\]{border-radius:18px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.border-0{border-style:var(--tw-border-style);border-width:0}.border-\\[1\\.5px\\]{border-style:var(--tw-border-style);border-width:1.5px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-b-\\[1\\.5px\\]{border-bottom-style:var(--tw-border-style);border-bottom-width:1.5px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-none{--tw-border-style:none;border-style:none}.border-current{border-color:currentColor}.border-red-500{border-color:var(--color-red-500)}.bg-slate-900\\/40{background-color:#0f172b66}}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities;/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{@supports (color:color-mix(in lab,red,red)){.bg-slate-900\\/40{background-color:color-mix(in oklab,var(--color-slate-900)40%,transparent)}}.bg-slate-900\\/60{background-color:#0f172b99}@supports (color:color-mix(in lab,red,red)){.bg-slate-900\\/60{background-color:color-mix(in oklab,var(--color-slate-900)60%,transparent)}}.bg-surface{background-color:var(--color-surface)}.bg-transparent{background-color:#0000}.bg-white\\/90{background-color:#ffffffe6}@supports (color:color-mix(in lab,red,red)){.bg-white\\/90{background-color:color-mix(in srgb,#fff90%,transparent);background-color:color-mix(in oklab,var(--color-white)90%,transparent)}}.p-1{padding:calc(var(--spacing)*1)}.p-5{padding:calc(var(--spacing)*5)}.p-6{padding:calc(var(--spacing)*6)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-6{padding-inline:calc(var(--spacing)*6)}.px-8{padding-inline:calc(var(--spacing)*8)}.py-1\\.5{padding-block:calc(var(--spacing)*1.5)}.py-3{padding-block:calc(var(--spacing)*3)}.py-4{padding-block:calc(var(--spacing)*4)}.py-12{padding-block:calc(var(--spacing)*12)}.pr-16{padding-right:calc(var(--spacing)*16)}.pb-2{padding-bottom:calc(var(--spacing)*2)}.pl-2{padding-left:calc(var(--spacing)*2)}.text-center{text-align:center}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-\\[13px\\]{font-size:13px}.leading-snug{--tw-leading:var(--leading-snug);line-height:var(--leading-snug)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.text-red-500{color:var(--color-red-500)}.text-slate-700{color:var(--color-slate-700)}.placeholder-surface::placeholder{color:var(--color-surface)}.opacity-60{opacity:.6}.opacity-80{opacity:.8}.shadow,.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a)}.shadow,.shadow-sm,.shadow-xl{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a),0 8px 10px -6px var(--tw-shadow-color,#0000001a)}.ring-primary{--tw-ring-color:var(--color-primary)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.transition-all,.transition-colors{transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.transition-opacity{transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.focus\\:border-red-500:focus{border-color:var(--color-red-500)}.focus\\:ring-0:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor)}.focus\\:ring-0:focus,.focus\\:ring-2:focus{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor)}.focus\\:ring-red-200:focus{--tw-ring-color:var(--color-red-200)}.focus\\:ring-red-500:focus{--tw-ring-color:var(--color-red-500)}.focus\\:ring-slate-200:focus{--tw-ring-color:var(--color-slate-200)}.focus\\:outline-none:focus{--tw-outline-style:none;outline-style:none}.top-1\\/2{top:50%}.right-2{right:calc(var(--spacing)*2)}.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.h-10{height:calc(var(--spacing)*10)}.min-h-0{min-height:calc(var(--spacing)*0)}.w-10{width:calc(var(--spacing)*10)}.min-w-0{min-width:calc(var(--spacing)*0)}.-translate-y-1\\/2{--tw-translate-y:-50%;translate:var(--tw-translate-x)var(--tw-translate-y)}.gap-2\\.5{gap:calc(var(--spacing)*2.5)}.overflow-y-auto{overflow-y:auto}.bg-primary{background-color:var(--color-primary)}.py-2\\.5{padding-block:calc(var(--spacing)*2.5)}.pr-9{padding-right:calc(var(--spacing)*9)}.break-words{overflow-wrap:break-word}.text-gray-400{color:var(--color-gray-400)}.focus\\:border-primary:focus{border-color:var(--color-primary)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-40:disabled{opacity:.4}.col-span-full{grid-column:1/-1}.h-16{height:calc(var(--spacing)*16)}.w-16{width:calc(var(--spacing)*16)}.auto-rows-auto{grid-auto-rows:auto}.content-start{align-content:flex-start}.p-1\\.5{padding:calc(var(--spacing)*1.5)}.inset-y-0{inset-block:calc(var(--spacing)*0)}.size-10{height:calc(var(--spacing)*10);width:calc(var(--spacing)*10)}.h-40{height:calc(var(--spacing)*40)}.h-\\[200px\\]{height:200px}.w-60{width:calc(var(--spacing)*60)}.shrink-0{flex-shrink:0}.gap-1\\.5{gap:calc(var(--spacing)*1.5)}.self-end{align-self:flex-end}.border-surface{border-color:var(--color-surface)}.py-1{padding-block:calc(var(--spacing)*1)}.py-10{padding-block:calc(var(--spacing)*10)}.pb-1{padding-bottom:calc(var(--spacing)*1)}.text-\\[10px\\]{font-size:10px}.text-\\[11px\\]{font-size:11px}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.text-slate-500{color:var(--color-slate-500)}.opacity-70{opacity:.7}.shadow-\\[0_8px_24px_rgba\\(15\\,23\\,42\\,0\\.08\\)\\]{--tw-shadow:0 8px 24px var(--tw-shadow-color,#0f172a14)}.shadow-\\[0_8px_24px_rgba\\(15\\,23\\,42\\,0\\.08\\)\\],.shadow-sm{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a)}.text-yellow-500{color:var(--color-yellow-500)}}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities;/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components{.chat-item .chat-item-content-main-name,.chat-item .chat-item-content-main-time{-webkit-line-clamp:1;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.z-icon-button-outlined,.z-icon-button-text{color:var(--color-primary)}.z-input,.z-input-area-input,.z-input-area-label,.z-input-label{color:var(--color-surface);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.z-button-group-item-tab,.z-button-group-item-tab-selected{border-style:var(--tw-border-style)!important;border-width:0!important}}@layer utilities{.translate-y-0,.translate-y-full{translate:var(--tw-translate-x)var(--tw-translate-y)}.focus\\:ring-0:focus,.focus\\:ring-2:focus,.shadow,.shadow-\\[0_8px_24px_rgba\\(15\\,23\\,42\\,0\\.08\\)\\],.shadow-sm,.shadow-xl{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}@property --tw-space-y-reverse{syntax:\"*\";inherits:false;initial-value:0}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-translate-x{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-y{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-z{syntax:\"*\";inherits:false;initial-value:0}:host{display:block}.z-avatar-error{align-items:center;display:flex;justify-content:center}.z-avatar-2x-small{height:12px;min-height:12px;min-width:12px;width:12px}.z-avatar-x-small{height:calc(var(--spacing)*4);min-height:calc(var(--spacing)*4);min-width:calc(var(--spacing)*4);width:calc(var(--spacing)*4)}.z-avatar-small{height:calc(var(--spacing)*8);min-height:calc(var(--spacing)*8);min-width:calc(var(--spacing)*8);width:calc(var(--spacing)*8)}.z-avatar-medium{height:calc(var(--spacing)*16);min-height:calc(var(--spacing)*16);min-width:calc(var(--spacing)*16);width:calc(var(--spacing)*16)}.z-avatar-large{height:calc(var(--spacing)*32);min-height:calc(var(--spacing)*32);min-width:calc(var(--spacing)*32);width:calc(var(--spacing)*32)}.z-avatar-full{height:100%;width:100%}@property --tw-space-x-reverse{syntax:\"*\";inherits:false;initial-value:0}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-blur{syntax:\"*\";inherits:false}@property --tw-brightness{syntax:\"*\";inherits:false}@property --tw-contrast{syntax:\"*\";inherits:false}@property --tw-grayscale{syntax:\"*\";inherits:false}@property --tw-hue-rotate{syntax:\"*\";inherits:false}@property --tw-invert{syntax:\"*\";inherits:false}@property --tw-opacity{syntax:\"*\";inherits:false}@property --tw-saturate{syntax:\"*\";inherits:false}@property --tw-sepia{syntax:\"*\";inherits:false}@property --tw-drop-shadow{syntax:\"*\";inherits:false}@property --tw-drop-shadow-color{syntax:\"*\";inherits:false}@property --tw-drop-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:\"*\";inherits:false}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@media (forced-colors:active){[type=checkbox]:checked,[type=radio]:checked{appearance:auto}[type=checkbox]:indeterminate{appearance:auto}[type=checkbox]:checked,[type=checkbox]:indeterminate,[type=radio]:checked{appearance:auto}}@media (hover:hover){.z-button-outlined:hover,.z-button-primary:hover,.z-icon-button-outlined:hover,.z-icon-button-primary:hover,.z-icon-button-text:hover{--tw-brightness:brightness(110%);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,)}.z-button-group-item-tab:hover{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.z-button-group-item-tab-unselected:hover{background-color:var(--color-white)}.z-button-group-item-primary-unselected:hover{--tw-brightness:brightness(95%);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,)}.z-button-group-item-outlined-unselected:hover{background-color:#e028481a}@supports (color:color-mix(in lab,red,red)){.z-button-group-item-outlined-unselected:hover{background-color:color-mix(in oklab,var(--color-primary)10%,transparent);background-color:color-mix(in srgb,#e0284810%,transparent)}}.hover\\:brightness-110:hover{--tw-brightness:brightness(110%);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,)}.group-hover\\:opacity-100:is(:where(.group):hover *){opacity:1}.hover\\:bg-background:hover{background-color:var(--color-background)}.hover\\:bg-red-50:hover{background-color:var(--color-red-50)}.hover\\:bg-slate-100:hover{background-color:var(--color-slate-100)}.hover\\:bg-white:hover{background-color:var(--color-white)}.hover\\:text-gray-600:hover{color:var(--color-gray-600)}.hover\\:opacity-100:hover{opacity:1}.z-button-outlined:hover,.z-button-primary:hover,.z-icon-button-outlined:hover,.z-icon-button-primary:hover,.z-icon-button-text:hover{--tw-brightness:brightness(110%);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,)}}@media screen and (min-width:0){.z-max-height{height:calc(100vh - 56px)}}@media screen and (min-width:600px){.z-max-height{height:calc(100vh - 64px)}}@media (min-width:40rem){.container{max-width:40rem}.sm\\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\\:min-w-0{min-width:calc(var(--spacing)*0)}.sm\\:flex-row{flex-direction:row}}@media (min-width:48rem){.container{max-width:48rem}.md\\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (min-width:64rem){.container{max-width:64rem}.lg\\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}@media not all and (min-width:40rem){.max-sm\\:hidden{display:none}}";
+const ZAvatar = /*@__PURE__*/ proxyCustomElement(class ZAvatar extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+    }
+    pictureUrl = '';
+    size = 'medium';
+    isNotRound = false;
+    hasError = false;
+    handleError = () => {
+        this.hasError = true;
+    };
+    watchPictureUrl(newValue) {
+        if (!newValue) {
+            this.hasError = true;
+        }
+        else {
+            this.hasError = false;
+        }
+    }
+    render() {
+        const theme = configStore.get('theme');
+        const size = () => {
+            if (this.size === '2x-small') {
+                return {
+                    base: 'z-avatar-2x-small',
+                    icon: 'size-[8px]',
+                };
+            }
+            if (this.size === 'x-small') {
+                return {
+                    base: 'z-avatar-x-small',
+                    icon: 'size-[10px]',
+                };
+            }
+            if (this.size === 'small') {
+                return {
+                    base: 'z-avatar-small',
+                    icon: 'size-4',
+                };
+            }
+            if (this.size === 'medium') {
+                return {
+                    base: 'z-avatar-medium',
+                    icon: 'size-8',
+                };
+            }
+            if (this.size === 'large') {
+                return {
+                    base: 'z-avatar-large',
+                    icon: 'size-16',
+                };
+            }
+            if (this.size === 'full') {
+                return {
+                    base: 'z-avatar-full',
+                    icon: 'size-32',
+                };
+            }
+        };
+        return (h(Host, { "data-theme": theme }, this.hasError ? (h("div", { class: `bg-paper ${this.isNotRound ? '' : 'rounded-full'} ${size().base} z-avatar-error` }, h(Icon, { name: "UsersRound", addClass: `${size().icon} text-surface` }))) : (h("img", { key: this.pictureUrl, src: this.pictureUrl, alt: "avatar", class: `${size().base} ${this.isNotRound ? '' : 'rounded-full'} object-cover`, onError: this.handleError, loading: "lazy" }))));
+    }
+    static get watchers() { return {
+        "pictureUrl": ["watchPictureUrl"]
+    }; }
+    static get style() { return zAvatarCss; }
+}, [256, "z-avatar", {
+        "pictureUrl": [1, "picture-url"],
+        "size": [1],
+        "isNotRound": [4, "is-not-round"],
+        "hasError": [32]
+    }, undefined, {
+        "pictureUrl": ["watchPictureUrl"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["z-avatar"];
+    components.forEach(tagName => { switch (tagName) {
+        case "z-avatar":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZAvatar);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+export { ZAvatar as Z, defineCustomElement as d };
+//# sourceMappingURL=p-DJPhPlLw.js.map
+//# sourceMappingURL=p-DJPhPlLw.js.map

package/dist/components/p-DJPhPlLw.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-DJPhPlLw.js","mappings":";;;;AAAA,MAAM,UAAU,GAAG,oq2DAAoq2D;;MCQ1q2D,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;;;;;;;IACV,UAAU,GAAY,EAAE;IACxB,IAAI,GAAoE,QAAQ;IAChF,UAAU,GAAa,KAAK;IAE3B,QAAQ,GAAY,KAAK;IAE1B,WAAW,GAAG,MAAK;AACzB,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;AACtB,KAAC;AAGD,IAAA,eAAe,CAAC,QAAgB,EAAA;QAC9B,IAAI,CAAC,QAAQ,EAAE;AACb,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;;aACf;AACL,YAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;;;IAIzB,MAAM,GAAA;QACJ,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC;QAEtC,MAAM,IAAI,GAAG,MAAK;AAChB,YAAA,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE;gBAC5B,OAAO;AACL,oBAAA,IAAI,EAAE,mBAAmB;AACzB,oBAAA,IAAI,EAAE,YAAY;iBACnB;;AAEH,YAAA,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE;gBAC3B,OAAO;AACL,oBAAA,IAAI,EAAE,kBAAkB;AACxB,oBAAA,IAAI,EAAE,aAAa;iBACpB;;AAEH,YAAA,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE;gBACzB,OAAO;AACL,oBAAA,IAAI,EAAE,gBAAgB;AACtB,oBAAA,IAAI,EAAE,QAAQ;iBACf;;AAEH,YAAA,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;gBAC1B,OAAO;AACL,oBAAA,IAAI,EAAE,iBAAiB;AACvB,oBAAA,IAAI,EAAE,QAAQ;iBACf;;AAEH,YAAA,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE;gBACzB,OAAO;AACL,oBAAA,IAAI,EAAE,gBAAgB;AACtB,oBAAA,IAAI,EAAE,SAAS;iBAChB;;AAEH,YAAA,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE;gBACxB,OAAO;AACL,oBAAA,IAAI,EAAE,eAAe;AACrB,oBAAA,IAAI,EAAE,SAAS;iBAChB;;AAEL,SAAC;AAED,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,YAAA,EAAa,KAAK,EACpB,EAAA,IAAI,CAAC,QAAQ,IACZ,WAAK,KAAK,EAAE,CAAA,SAAA,EAAY,IAAI,CAAC,UAAU,GAAG,EAAE,GAAG,cAAc,CAAA,CAAA,EAAI,IAAI,EAAE,CAAC,IAAI,CAAiB,eAAA,CAAA,EAAA,EAC3F,CAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAC,YAAY,EAAC,QAAQ,EAAE,CAAG,EAAA,IAAI,EAAE,CAAC,IAAI,CAAe,aAAA,CAAA,GAAI,CAC/D,KAEN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,IAAI,CAAC,UAAU,EAAE,GAAG,EAAE,IAAI,CAAC,UAAU,EAAE,GAAG,EAAC,QAAQ,EAAC,KAAK,EAAE,CAAG,EAAA,IAAI,EAAE,CAAC,IAAI,CAAA,CAAA,EAAI,IAAI,CAAC,UAAU,GAAG,EAAE,GAAG,cAAc,CAAA,aAAA,CAAe,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,EAAC,MAAM,EAAA,CAAG,CAC1L,CACI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/z-avatar/z-avatar.css?tag=z-avatar","src/components/z-avatar/z-avatar.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.z-avatar-error {\n @apply flex items-center justify-center\n}\n\n.z-avatar-2x-small {\n @apply size-[12px] min-w-[12px] min-h-[12px]\n}\n\n.z-avatar-x-small {\n @apply size-4 min-w-4 min-h-4\n}\n\n.z-avatar-small {\n @apply size-8 min-w-8 min-h-8\n}\n\n.z-avatar-medium {\n @apply size-16 min-w-16 min-h-16\n}\n\n.z-avatar-large {\n @apply size-32 min-w-32 min-h-32\n}\n\n.z-avatar-full {\n @apply w-full h-full\n}","import { Component, Host, Prop, State, h, Watch } from '@stencil/core';\nimport { Icon } from '../internal-component/icon';\nimport { configStore } from '../../store/store';\n\n@Component({\n tag: 'z-avatar',\n styleUrl: 'z-avatar.css',\n})\nexport class ZAvatar {\n @Prop() pictureUrl?: string = '';\n @Prop() size?: '2x-small' | 'x-small' | 'small' | 'medium' | 'large' | 'full' = 'medium';\n @Prop() isNotRound?: boolean = false;\n\n @State() hasError: boolean = false;\n\n private handleError = () => {\n this.hasError = true;\n };\n\n @Watch('pictureUrl')\n watchPictureUrl(newValue: string) {\n if (!newValue) {\n this.hasError = true;\n } else {\n this.hasError = false;\n }\n }\n\n render() {\n const theme = configStore.get('theme');\n\n const size = () => {\n if (this.size === '2x-small') {\n return {\n base: 'z-avatar-2x-small',\n icon: 'size-[8px]',\n };\n }\n if (this.size === 'x-small') {\n return {\n base: 'z-avatar-x-small',\n icon: 'size-[10px]',\n };\n }\n if (this.size === 'small') {\n return {\n base: 'z-avatar-small',\n icon: 'size-4',\n };\n }\n if (this.size === 'medium') {\n return {\n base: 'z-avatar-medium',\n icon: 'size-8',\n };\n }\n if (this.size === 'large') {\n return {\n base: 'z-avatar-large',\n icon: 'size-16',\n };\n }\n if (this.size === 'full') {\n return {\n base: 'z-avatar-full',\n icon: 'size-32',\n };\n }\n };\n\n return (\n <Host data-theme={theme}>\n {this.hasError ? (\n <div class={`bg-paper ${this.isNotRound ? '' : 'rounded-full'} ${size().base} z-avatar-error`}>\n <Icon name=\"UsersRound\" addClass={`${size().icon} text-surface`} />\n </div>\n ) : (\n <img key={this.pictureUrl} src={this.pictureUrl} alt=\"avatar\" class={`${size().base} ${this.isNotRound ? '' : 'rounded-full'} object-cover`} onError={this.handleError} loading=\"lazy\" />\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/p-DLnTQGP9.js ADDED Viewed

@@ -0,0 +1,188 @@
+import { h, p as proxyCustomElement, H, F as Fragment, a as Host } from './p-DRz4sc4i.js';
+import { c as configStore, s as selectedChatStore, a as chatsStore, f as filterChatsStore } from './p-C-yg0vtE.js';
+import { l as leaveRoom, i as initSocket } from './p-rEwMLqpC.js';
+import { i as isToday, d as displayTime, a as displayDateTime } from './p-CWHeSqYk.js';
+import { I as Icon } from './p-BhidTUJs.js';
+import { u as useTranslation } from './p-GPPFvEYq.js';
+import { b as getChatPicture, d as getChatChannelPictureUrl, g as getChatName, e as handleGetChat } from './p-svoisvoB.js';
+import { Z as ZAvatarGroup } from './p-Bk5H61H8.js';
+import { d as defineCustomElement$4 } from './p-DYEy-cA-.js';
+import { d as defineCustomElement$3 } from './p-DiSPdOEp.js';
+import { d as defineCustomElement$2 } from './p-BYEXI48l.js';
+import { d as defineCustomElement$1 } from './p-DJPhPlLw.js';
+const ChatItem = ({ item }) => {
+    const t = useTranslation();
+    const { id, connection, channel, tags, unread_count, last_message, last_message_at, type, pin, mark_as_unread } = item;
+    const platformColor = channel === 'line' ? 'text-green-500' : 'text-blue-500';
+    const theme = configStore.get('theme');
+    const isSelected = selectedChatStore.get('selectedChat')?.id === id;
+    const isUnread = (unread_count > 0) || mark_as_unread;
+    const chatName = getChatName(item);
+    const getLastMessage = () => {
+        if (['{image}', '{sticker}', '{audio}', '{video}', '{location}', '{text}', '{file}', '{template}', '{ig_reel}', '{story_mention}'].includes(last_message?.toLowerCase())) {
+            const sender = ['user', 'group'].includes(type) ? chatName : t('you');
+            let lastMessage = '';
+            switch (last_message) {
+                case '{ig_reel}':
+                    lastMessage = t('ig_reel');
+                    break;
+                case '{story_mention}':
+                    lastMessage = t('story_mention');
+                    break;
+                case '{file}':
+                    lastMessage = t('file');
+                    break;
+                case '{image}':
+                    lastMessage = t('image');
+                    break;
+                case '{video}':
+                    lastMessage = t('video');
+                    break;
+            }
+            return sender + ' ' + t('sent') + ' ' + lastMessage;
+        }
+        return last_message;
+    };
+    const getLastMessageTime = () => {
+        if (last_message_at) {
+            if (isToday(last_message_at)) {
+                return displayTime(last_message_at);
+            }
+            else {
+                return displayDateTime(last_message_at);
+            }
+        }
+    };
+    const handleSelectChatClick = () => {
+        const selectedChat = selectedChatStore.get('selectedChat');
+        if (selectedChat && selectedChat.id !== item.id) {
+            leaveRoom(selectedChat.id);
+        }
+        selectedChatStore.set('selectedChat', item);
+    };
+    const _sortedTags = tags.sort((a, b) => a.sequence - b.sequence);
+    return (h("div", { class: `chat-item ${isSelected ? 'bg-pink-100' : 'bg-background'}`, "data-theme": theme, onClick: () => handleSelectChatClick() }, pin && (h("div", { class: "chat-item-pin" }, h(Icon, { name: "Pin", addClass: "chat-item-pin-icon text-primary" }))), h("div", { class: "chat-item-content-container" }, h("div", { class: "chat-item-avatar-wrapper" }, h("z-avatar", { pictureUrl: getChatPicture(item) }), type === 'group' &&
+        h("div", { class: "chat-item-avatar-badge" }, h(ZAvatarGroup, { size: "x-small" }))), h("div", { class: "chat-item-content-wrapper" }, h("div", { class: "chat-item-content-main" }, connection.type === 'zwiz' &&
+        h("img", { src: `https://zwizai-platform.s3.ap-southeast-1.amazonaws.com/zignal-package/zwiz.png`, alt: "agent avatar zwiz", class: "chat-item-content-main-image", loading: "lazy" }), h("img", { src: getChatChannelPictureUrl(item), alt: "agent avatar", class: "chat-item-content-main-image", loading: "lazy" }), h("span", { title: connection.name, class: `chat-item-content-main-name ${platformColor} ` }, connection.name), h("div", { title: getLastMessageTime(), class: "chat-item-content-main-time" }, getLastMessageTime())), h("div", { class: `chat-item-content-secondary` }, h("div", null, h("div", { title: chatName, class: `${isUnread ? 'font-bold' : ''} ${isSelected ? 'text-black' : 'text-surface'} chat-item-content-secondary-nickname` }, chatName), h("div", { title: getLastMessage(), class: `${isUnread ? 'font-bold' : ''} chat-item-content-secondary-message` }, getLastMessage())), isUnread && (h("span", { class: `chat-item-content-unread ${unread_count === 0 ? 'chat-item-content-unread-mark' : 'chat-item-content-unread-count'}` }, unread_count > 0 && (unread_count > 1000 ? '999+' : unread_count)))), h("tag-list", { tags: _sortedTags, chatId: id, referenceSelector: `chat-tag-${id}` })))));
+};
+const channelBoxCss = "@layer base{*,::backdrop,:after,:before{--tw-space-y-reverse:0;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-space-x-reverse:0;--tw-shadow:0 0 #0000;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-alpha:100%;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-offset-width:0;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-drop-shadow-alpha:100%;--tw-border-style:solid;border:0 solid;box-sizing:border-box;margin:0;padding:0}}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-space-x-reverse:0;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-font-weight:initial;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-border-style:solid;--tw-space-y-reverse:0;--tw-leading:initial;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0}}}@layer theme{:host,:root{--container-xl:36rem;--container-3xs:16rem;--color-yellow-300:oklch(90.5% .182 98.111);--color-red-50:oklch(97.1% .013 17.38);--color-red-200:oklch(88.5% .062 18.334);--color-slate-100:oklch(96.8% .007 247.896);--color-slate-200:oklch(92.9% .013 255.508);--color-slate-700:oklch(37.2% .044 257.287);--color-slate-900:oklch(20.8% .042 265.755);--container-md:28rem;--text-2xl:1.5rem;--text-2xl--line-height:1.33333;--color-gray-400:oklch(70.7% .022 261.325);--color-slate-500:oklch(55.4% .046 257.417);--leading-tight:1.25;--leading-snug:1.375;--leading-relaxed:1.625;--color-yellow-500:oklch(79.5% .184 86.047);--container-xs:20rem;--container-sm:24rem;--color-red-700:oklch(50.5% .213 27.518);--color-green-500:oklch(72.3% .219 149.579);--color-green-700:oklch(52.7% .154 150.069);--color-blue-500:oklch(62.3% .214 259.815);--color-pink-100:oklch(94.8% .028 342.258);--font-weight-semibold:600;--font-weight-bold:700;--animate-spin:spin 1s linear infinite;--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace;--color-red-500:oklch(63.7% .237 25.331);--color-blue-600:oklch(54.6% .245 262.881);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-black:#000;--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:1.33333;--text-sm:.875rem;--text-sm--line-height:1.42857;--text-base:1rem;--text-base--line-height:1.5;--text-lg:1.125rem;--text-lg--line-height:1.55556;--font-weight-medium:500;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:\"Kanit\",var(--default-font);--default-mono-font-family:var(--font-mono);--default-font:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";--color-primary:#e02848;--color-secondary:#023761;--color-background:#fff;--color-surface:#000;--color-paper:#f3f4f6;--color-divider:#e5e7eb;--color-theme-gray:#6b7280}}@layer base{::file-selector-button{appearance:button;background-color:#0000;border:0 solid;border-radius:0;box-sizing:border-box;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;margin:0;margin-inline-end:4px;opacity:1;padding:0}:host,html{-webkit-text-size-adjust:100%;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);tab-size:4;-webkit-tap-highlight-color:transparent;line-height:1.5}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-size:1em;font-variation-settings:var(--default-mono-font-variation-settings,normal)}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}menu,ol,ul{list-style:none}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}button,input,optgroup,select,textarea{background-color:#0000;border-radius:0;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;min-height:1.5em;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field{padding-block:0;padding-bottom:0;padding-top:0}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-month-field{padding-block:0;padding-bottom:0;padding-top:0}::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field{padding-block:0;padding-bottom:0;padding-top:0}::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-second-field{padding-block:0;padding-bottom:0;padding-top:0}::-webkit-datetime-edit-meridiem-field{padding-block:0;padding-bottom:0;padding-top:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}[multiple],[type=date],[type=datetime-local],[type=email],[type=month],[type=number],[type=password],[type=search],[type=tel],[type=text],[type=time],[type=url],[type=week],input:where(:not([type])),select,textarea{appearance:none;--tw-shadow:0 0 #0000;background-color:#fff;border-color:oklch(55.1% .027 264.364);border-radius:0;border-width:1px;font-size:1rem;line-height:1.5rem;padding:.5rem .75rem}:is([type=text],input:where(:not([type])),[type=email],[type=url],[type=password],[type=number],[type=date],[type=datetime-local],[type=month],[type=search],[type=tel],[type=time],[type=week],[multiple],textarea,select):focus{outline-offset:2px;--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:oklch(54.6% .245 262.881);--tw-ring-offset-shadow:var(--tw-ring-inset)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color);border-color:oklch(54.6% .245 262.881);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);outline:2px solid #0000}input::placeholder,textarea::placeholder{color:oklch(55.1% .027 264.364);opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}select{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='oklch(55.1%25 0.027 264.364)' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E\");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;print-color-adjust:exact}[multiple],[size]:where(select:not([size=\"1\"])){background-image:none;background-position:0 0;background-repeat:unset;background-size:initial;padding-right:.75rem;print-color-adjust:unset}[type=checkbox],[type=radio]{appearance:none;color:oklch(54.6% .245 262.881);print-color-adjust:exact;-webkit-user-select:none;user-select:none;vertical-align:middle;--tw-shadow:0 0 #0000;background-color:#fff;background-origin:border-box;border-color:oklch(55.1% .027 264.364);border-width:1px;display:inline-block;flex-shrink:0;height:1rem;padding:0;width:1rem}[type=checkbox]{border-radius:0}[type=radio]{border-radius:100%}[type=checkbox]:focus,[type=radio]:focus{outline-offset:2px;--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:2px;--tw-ring-offset-color:#fff;--tw-ring-color:oklch(54.6% .245 262.881);--tw-ring-offset-shadow:var(--tw-ring-inset)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);outline:2px solid #0000}[type=checkbox]:checked,[type=radio]:checked{background-color:currentColor;background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-color:#0000}[type=checkbox]:checked{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0'/%3E%3C/svg%3E\")}[type=radio]:checked{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E\")}[type=checkbox]:checked:focus,[type=checkbox]:checked:hover,[type=radio]:checked:focus,[type=radio]:checked:hover{background-color:currentColor;border-color:#0000}[type=checkbox]:indeterminate{background-color:currentColor;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3E%3C/svg%3E\");background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-color:#0000}[type=checkbox]:indeterminate:focus,[type=checkbox]:indeterminate:hover{background-color:currentColor;border-color:#0000}[type=file]{background:unset;border-color:inherit;border-radius:0;border-width:0;font-size:unset;line-height:inherit;padding:0}[type=file]:focus{outline:1px solid buttontext;outline:1px auto -webkit-focus-ring-color}}@layer components{.dialog-backdrop{align-items:center;background-color:#0006;display:flex;inset:calc(var(--spacing)*0);justify-content:center;position:fixed;z-index:50}@supports (color:color-mix(in lab,red,red)){.dialog-backdrop{background-color:color-mix(in oklab,var(--color-black)40%,transparent);background-color:color-mix(in srgb,#00040%,transparent)}}.chat-item{border-radius:var(--radius-xl);cursor:pointer;margin-block:calc(var(--spacing)*1);margin-inline:calc(var(--spacing)*2);padding-block:calc(var(--spacing)*3);padding-inline:calc(var(--spacing)*4);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);align-items:flex-start;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);display:flex;position:relative}:where(.chat-item>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-end:calc(var(--spacing)*4*(1 - var(--tw-space-x-reverse)));margin-inline-start:calc(var(--spacing)*4*var(--tw-space-x-reverse))}.chat-item .chat-item-pin{position:absolute;right:calc(var(--spacing)*-3);top:calc(var(--spacing)*1)}.chat-item .chat-item-pin-icon{fill:currentColor;height:calc(var(--spacing)*3);rotate:45deg;width:calc(var(--spacing)*3)}.chat-item .chat-item-content-container{display:flex;flex-direction:row;width:100%}:where(.chat-item .chat-item-content-container>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-end:calc(var(--spacing)*4*(1 - var(--tw-space-x-reverse)));margin-inline-start:calc(var(--spacing)*4*var(--tw-space-x-reverse))}.chat-item .chat-item-avatar-wrapper{align-self:center;flex-shrink:0;position:relative}.chat-item .chat-item-avatar-badge{bottom:calc(var(--spacing)*-.5);position:absolute;right:calc(var(--spacing)*-.5)}.chat-item .chat-item-content-wrapper{min-height:calc(var(--spacing)*18);width:100%}.chat-item .chat-item-content-main{align-items:center;display:flex}:where(.chat-item .chat-item-content-main>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-end:calc(var(--spacing)*1*(1 - var(--tw-space-x-reverse)));margin-inline-start:calc(var(--spacing)*1*var(--tw-space-x-reverse))}.chat-item .chat-item-content-main-image{border-radius:3.40282e+38px;height:calc(var(--spacing)*4);width:calc(var(--spacing)*4)}.chat-item .chat-item-content-main-name{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.chat-item .chat-item-content-main-name,.chat-item .chat-item-content-main-time{-webkit-line-clamp:1;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.chat-item .chat-item-content-main-time{color:var(--color-gray-500);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));margin-left:auto}.chat-item .chat-item-content-secondary{align-items:flex-start;display:flex;flex-direction:row;width:100%}.chat-item .chat-item-content-secondary-nickname{font-size:var(--text-base);-webkit-line-clamp:1;line-height:var(--tw-leading,var(--text-base--line-height));-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.chat-item .chat-item-content-secondary-message{color:var(--color-gray-600);font-size:var(--text-sm);-webkit-line-clamp:1;line-height:var(--tw-leading,var(--text-sm--line-height));-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.chat-item .chat-item-content-unread{background-color:var(--color-primary);border-radius:3.40282e+38px;color:var(--color-white);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));margin-left:auto}.chat-item .chat-item-content-unread-mark{display:inline-block;height:calc(var(--spacing)*2.5);width:calc(var(--spacing)*2.5)}.chat-item .chat-item-content-unread-count{padding-block:calc(var(--spacing)*.5);padding-inline:calc(var(--spacing)*2)}.z-icon-button{cursor:pointer;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-medium);align-items:center;border-radius:3.40282e+38px;display:inline-flex;font-weight:var(--font-weight-medium);justify-content:center;transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.z-icon-button:focus{--tw-outline-style:none;outline-style:none}.z-icon-button-primary{background-color:var(--color-primary);color:var(--color-white)}.z-icon-button-outlined{border-color:var(--color-primary);border-style:var(--tw-border-style);border-width:1px}.z-icon-button-outlined,.z-icon-button-text{color:var(--color-primary)}.z-icon-button-disabled{cursor:not-allowed;opacity:.5}.z-button{cursor:pointer;--tw-font-weight:var(--font-weight-medium);align-items:center;border-radius:3.40282e+38px;display:inline-flex;font-weight:var(--font-weight-medium);justify-content:center;transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.z-button:focus{--tw-outline-style:none;outline-style:none}.z-button-small{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));padding-block:calc(var(--spacing)*1.5);padding-inline:calc(var(--spacing)*2)}.z-button-medium{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));padding-block:calc(var(--spacing)*2);padding-inline:calc(var(--spacing)*3)}.z-button-large{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));padding-block:calc(var(--spacing)*3);padding-inline:calc(var(--spacing)*4)}.z-button-primary{background-color:var(--color-primary);color:var(--color-white)}.z-button-outlined{border-color:var(--color-primary);border-style:var(--tw-border-style);border-width:1px;color:var(--color-primary)}.z-button-disabled{cursor:not-allowed;opacity:.5}.z-button-text{margin-inline:calc(var(--spacing)*2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.z-input-area-label{margin-bottom:calc(var(--spacing)*1);--tw-font-weight:var(--font-weight-medium);display:block;font-weight:var(--font-weight-medium)}.z-input-area-input,.z-input-area-label{color:var(--color-surface);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.z-input-area-input{background-color:var(--color-paper);border-color:var(--color-surface);border-radius:var(--radius-lg);border-style:var(--tw-border-style);padding-block:calc(var(--spacing)*2);padding-inline:calc(var(--spacing)*4);--tw-ring-color:var(--color-primary);border-width:1px;width:100%}.z-input-area-input:focus{border-color:var(--color-primary);--tw-outline-style:none;outline-style:none}.z-input-area-error{color:var(--color-red-500);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));margin-top:calc(var(--spacing)*1)}.z-input-label{margin-bottom:calc(var(--spacing)*1);--tw-font-weight:var(--font-weight-medium);display:block;font-weight:var(--font-weight-medium)}.z-input,.z-input-label{color:var(--color-surface);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.z-input{background-color:var(--color-background);border-color:var(--color-divider);border-style:var(--tw-border-style);padding-block:calc(var(--spacing)*2);padding-inline:calc(var(--spacing)*4);--tw-ring-color:var(--color-primary);border-radius:3.40282e+38px;border-width:1px;width:100%}.z-input:focus{border-color:var(--color-primary);--tw-outline-style:none;outline-style:none}.z-input-error{color:var(--color-red-500);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));margin-top:calc(var(--spacing)*1)}.z-select-input-label{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));margin-bottom:calc(var(--spacing)*1);--tw-font-weight:var(--font-weight-medium);display:block;font-weight:var(--font-weight-medium)}.z-tag-or-status-item{align-items:center;border-radius:var(--radius-2xl);gap:calc(var(--spacing)*2);padding-block:calc(var(--spacing)*1.5);padding-inline:calc(var(--spacing)*3);--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);display:inline-flex}.z-tag-or-status-item .z-tag-or-status-item-name{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));max-width:calc(var(--spacing)*20)}.z-tag-or-status-item .z-tag-or-status-item-icon{border-radius:3.40282e+38px;height:calc(var(--spacing)*4);width:calc(var(--spacing)*4)}.z-context-input{align-items:stretch;display:flex;flex-direction:row;margin-block:calc(var(--spacing)*1)}.z-context-input-key{background-color:var(--color-background);border-bottom-left-radius:var(--radius-3xl);border-color:var(--color-divider);border-style:var(--tw-border-style);border-top-left-radius:var(--radius-3xl);border-width:1px;color:var(--color-surface);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));max-height:6.4rem;min-height:2.4rem;padding-block:calc(var(--spacing)*2);padding-inline:calc(var(--spacing)*4);resize:none;width:100%;--tw-ring-color:var(--color-primary);flex:1}.z-context-input-key:focus{border-color:var(--color-primary);--tw-outline-style:none;outline-style:none}.z-context-input-value{background-color:var(--color-background);border-bottom-right-radius:var(--radius-3xl);border-color:var(--color-primary);border-style:var(--tw-border-style);border-top-right-radius:var(--radius-3xl);border-width:1px;color:var(--color-surface);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));max-height:6.4rem;min-height:2.4rem;padding-block:calc(var(--spacing)*2);padding-inline:calc(var(--spacing)*4);resize:none;width:100%;--tw-ring-color:var(--color-primary);flex:1}.z-context-input-value:focus{border-color:var(--color-primary);--tw-outline-style:none;outline-style:none}.z-text-with-link{color:var(--color-blue-600);text-decoration-line:underline}.z-button-group{display:inline-flex}.z-button-group-tab{border-radius:var(--radius-md);display:flex;gap:calc(var(--spacing)*1);padding:calc(var(--spacing)*.5)!important}.z-button-group-item{border-style:var(--tw-border-style);cursor:pointer;--tw-font-weight:var(--font-weight-medium);align-items:center;border-width:1px;display:inline-flex;font-weight:var(--font-weight-medium);justify-content:center;transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.z-button-group-item:focus{--tw-outline-style:none;outline-style:none}.z-button-group-item-tab{align-items:center;border-radius:var(--radius-sm);border-style:var(--tw-border-style)!important;border-width:0!important;display:flex;flex:1;flex-direction:column;gap:calc(var(--spacing)*2);justify-content:center;padding:calc(var(--spacing)*1)!important}.z-button-group-item-tab-selected{background-color:var(--color-white);--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.z-button-group-item-tab-selected,.z-button-group-item-tab-unselected{border-style:var(--tw-border-style)!important;border-width:0!important}.z-button-group-small{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));padding-block:calc(var(--spacing)*1.5);padding-inline:calc(var(--spacing)*2)}.z-button-group-medium{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));padding-block:calc(var(--spacing)*2);padding-inline:calc(var(--spacing)*3)}.z-button-group-large{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));padding-block:calc(var(--spacing)*3);padding-inline:calc(var(--spacing)*4)}.z-button-group-item-first{border-bottom-left-radius:3.40282e+38px;border-top-left-radius:3.40282e+38px}.z-button-group-item-last{border-bottom-right-radius:3.40282e+38px;border-top-right-radius:3.40282e+38px}.z-button-group-item-middle{border-radius:0}.z-button-group-item-primary-selected{background-color:var(--color-primary);border-color:var(--color-primary);color:var(--color-white)}.z-button-group-item-primary-unselected{background-color:var(--color-white);border-color:var(--color-primary);color:var(--color-primary)}.z-button-group-item-outlined-selected{background-color:var(--color-primary);border-color:var(--color-primary);color:var(--color-white)}.z-button-group-item-outlined-unselected{background-color:#0000;border-color:var(--color-primary);color:var(--color-primary)}.z-button-group-item-disabled{cursor:not-allowed;opacity:.5}.z-button-group-item:not(:first-child){margin-left:-1px}}@layer utilities{.visible{visibility:visible}.mx-auto{margin-inline:auto}.size-18{height:calc(var(--spacing)*18);width:calc(var(--spacing)*18)}.text-theme-gray{color:var(--color-theme-gray)}}[data-theme=light]{--color-primary:#e02848;--color-secondary:#023761;--color-background:#fff;--color-surface:#000;--color-paper:#f3f4f6;--color-divider:#e5e7eb;--color-theme-gray:#6b7280}[data-theme=dark]{--color-primary:#b50f30;--color-secondary:#fff;--color-background:#23292d;--color-surface:#fff;--color-paper:#374151;--color-divider:#4b5563;--color-theme-gray:#d1d5db}.scroll-container::-webkit-scrollbar{background:#0000001a;height:8px;width:8px}.scroll-container:active::-webkit-scrollbar,.scroll-container:hover::-webkit-scrollbar{background:#0003}.scroll-container:active::-webkit-scrollbar-thumb,.scroll-container:hover::-webkit-scrollbar-thumb{background:#0006;border-radius:4px}.bg-time-badge{background-color:#0000004d}@supports (color:color-mix(in lab,red,red)){.bg-time-badge{background-color:color-mix(in srgb,var(--color-surface)30%,transparent);background-color:color-mix(in srgb,#00030%,transparent)}}.placeholder-surface::placeholder{color:var(--color-text-gray)}.z-width-100{width:100%}.z-width-90{width:90%}.z-width-75{width:75%}.z-width-50{width:50%}.z-width-25{width:25%}.z-width-0{width:0}.z-animate-width{transition-duration:.5s;transition-property:width;transition-timing-function:cubic-bezier(.4,0,.2,1)}.z-animate-grid-template-cols{transition:grid-template-rows .5s}[type=checkbox]{background-color:var(--color-gray-300);border-color:var(--color-gray-300);border-radius:4px;cursor:pointer}[type=checkbox]:checked,[type=checkbox]:indeterminate{background-color:var(--color-primary);border-color:var(--color-primary);border-radius:4px;cursor:pointer}[type=checkbox]:focus{offset:0;outline-offset:0;--tw-ring-color:var(--color-primary);outline:none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.grid-cols-1{grid-template-columns:1fr}.grid-cols-1_3{grid-template-columns:1fr 3fr}.grid-cols-1_2_1{grid-template-columns:1fr 2fr 1fr}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{.absolute{position:absolute}.flex{display:flex}.hidden{display:none}.resize{resize:both}.container{width:100%}.hidden\\!{display:none!important}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.relative{position:relative}.size-4{height:calc(var(--spacing)*4);width:calc(var(--spacing)*4)}.size-8{height:calc(var(--spacing)*8);width:calc(var(--spacing)*8)}.size-16{height:calc(var(--spacing)*16);width:calc(var(--spacing)*16)}.size-32{height:calc(var(--spacing)*32);width:calc(var(--spacing)*32)}.size-\\[8px\\]{height:8px;width:8px}.size-\\[10px\\]{height:10px;width:10px}.rounded-full{border-radius:3.40282e+38px}.bg-paper{background-color:var(--color-paper)}.object-cover{object-fit:cover}.text-surface{color:var(--color-surface)}.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.m-2{margin:calc(var(--spacing)*2)}.mx-4{margin-inline:calc(var(--spacing)*4)}.mt-2{margin-top:calc(var(--spacing)*2)}.mt-auto{margin-top:auto}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.ml-0\\.5{margin-left:calc(var(--spacing)*.5)}.ml-auto{margin-left:auto}.size-3{height:calc(var(--spacing)*3);width:calc(var(--spacing)*3)}.size-5{height:calc(var(--spacing)*5);width:calc(var(--spacing)*5)}.w-1\\/2{width:50%}.w-9{width:calc(var(--spacing)*9)}.w-full{width:100%}.max-w-32{max-width:calc(var(--spacing)*32)}.translate-y-0{--tw-translate-y:calc(var(--spacing)*0)}.translate-y-0,.translate-y-full{translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-y-full{--tw-translate-y:100%}.animate-spin{animation:var(--animate-spin)}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}.gap-y-1{row-gap:calc(var(--spacing)*1)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.border{border-style:var(--tw-border-style);border-width:1px}.border-b-\\[0\\.5px\\]{border-bottom-style:var(--tw-border-style);border-bottom-width:.5px}.border-divider{border-color:var(--color-divider)}.border-primary{border-color:var(--color-primary)}.bg-background{background-color:var(--color-background)}.bg-pink-100{background-color:var(--color-pink-100)}.bg-secondary{background-color:var(--color-secondary)}.pt-2{padding-top:calc(var(--spacing)*2)}.text-right{text-align:right}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-line{white-space:pre-line}.text-background{color:var(--color-background)}.text-black{color:var(--color-black)}.text-blue-500{color:var(--color-blue-500)}.text-green-500{color:var(--color-green-500)}.text-green-700{color:var(--color-green-700)}.text-primary{color:var(--color-primary)}.text-red-700{color:var(--color-red-700)}.text-white{color:var(--color-white)}.capitalize{text-transform:capitalize}.opacity-0{opacity:0}.opacity-100{opacity:1}}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}@keyframes spin{to{transform:rotate(1turn)}}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.rotate-45{rotate:45deg}.w-xl{width:var(--container-xl)}.w-xs{width:var(--container-xs)}.m-auto{margin:auto}}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-end:calc(var(--spacing)*2*(1 - var(--tw-space-y-reverse)));margin-block-start:calc(var(--spacing)*2*var(--tw-space-y-reverse))}}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{.my-2{margin-block:calc(var(--spacing)*2)}.-top-12{top:calc(var(--spacing)*-12)}.-top-24{top:calc(var(--spacing)*-24)}.mt-10{margin-top:calc(var(--spacing)*10)}.mb-10{margin-bottom:calc(var(--spacing)*10)}.inline-block{display:inline-block}.p-4{padding:calc(var(--spacing)*4)}.px-4{padding-inline:calc(var(--spacing)*4)}.pt-4{padding-top:calc(var(--spacing)*4)}.pb-8{padding-bottom:calc(var(--spacing)*8)}.mt-1{margin-top:calc(var(--spacing)*1)}.line-clamp-3{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.max-w-3xs{max-width:var(--container-3xs)}.max-w-sm{max-width:var(--container-sm)}.cursor-pointer{cursor:pointer}.rounded-br-\\[0\\]{border-bottom-right-radius:0}.rounded-bl-\\[0\\]{border-bottom-left-radius:0}.bg-black{background-color:var(--color-black)}.bg-white{background-color:var(--color-white)}.p-2{padding:calc(var(--spacing)*2)}.p-3{padding:calc(var(--spacing)*3)}.px-3{padding-inline:calc(var(--spacing)*3)}.py-2{padding-block:calc(var(--spacing)*2)}.underline{text-decoration-line:underline}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.right-full{right:100%}.-bottom-2{bottom:calc(var(--spacing)*-2)}.left-full{left:100%}.mr-2{margin-right:calc(var(--spacing)*2)}.mb-0\\.5{margin-bottom:calc(var(--spacing)*.5)}.mb-2\\.5{margin-bottom:calc(var(--spacing)*2.5)}.ml-2{margin-left:calc(var(--spacing)*2)}.size-6{height:calc(var(--spacing)*6);width:calc(var(--spacing)*6)}.flex-row{flex-direction:row}.items-center{align-items:center}.justify-center{justify-content:center}.justify-start{justify-content:flex-start}.bg-yellow-300{background-color:var(--color-yellow-300)}.pl-10{padding-left:calc(var(--spacing)*10)}.text-left{text-align:left}.size-42{height:calc(var(--spacing)*42);width:calc(var(--spacing)*42)}.h-20{height:calc(var(--spacing)*20)}.w-42{width:calc(var(--spacing)*42)}.border-transparent{border-color:#0000}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.-right-0\\.5{right:calc(var(--spacing)*-.5)}.-bottom-0\\.5{bottom:calc(var(--spacing)*-.5)}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.fixed{position:fixed}.inset-0{inset:calc(var(--spacing)*0)}.top-3{top:calc(var(--spacing)*3)}.right-3{right:calc(var(--spacing)*3)}.right-4{right:calc(var(--spacing)*4)}.bottom-3{bottom:calc(var(--spacing)*3)}.left-3{left:calc(var(--spacing)*3)}.z-10{z-index:10}.z-80{z-index:80}.mt-4{margin-top:calc(var(--spacing)*4)}.mt-6{margin-top:calc(var(--spacing)*6)}.contents{display:contents}.grid{display:grid}.inline-flex{display:inline-flex}.aspect-square{aspect-ratio:1}.size-12{height:calc(var(--spacing)*12);width:calc(var(--spacing)*12)}.size-14{height:calc(var(--spacing)*14);width:calc(var(--spacing)*14)}.h-7{height:calc(var(--spacing)*7)}.h-8{height:calc(var(--spacing)*8)}.h-9{height:calc(var(--spacing)*9)}.h-\\[180px\\]{height:180px}.h-\\[220px\\]{height:220px}.h-\\[280px\\]{height:280px}.h-full{height:100%}.w-7{width:calc(var(--spacing)*7)}.w-8{width:calc(var(--spacing)*8)}.w-\\[200px\\]{width:200px}.w-\\[250px\\]{width:250px}.max-w-full{max-width:100%}.max-w-md{max-width:var(--container-md)}.max-w-xs{max-width:var(--container-xs)}.flex-1{flex:1}.flex-shrink-0,.shrink-0{flex-shrink:0}.cursor-not-allowed{cursor:not-allowed}.resize-none{resize:none}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.gap-1{gap:calc(var(--spacing)*1)}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-\\[18px\\]{border-radius:18px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.border-0{border-style:var(--tw-border-style);border-width:0}.border-\\[1\\.5px\\]{border-style:var(--tw-border-style);border-width:1.5px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-b-\\[1\\.5px\\]{border-bottom-style:var(--tw-border-style);border-bottom-width:1.5px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-none{--tw-border-style:none;border-style:none}.border-current{border-color:currentColor}.border-red-500{border-color:var(--color-red-500)}.bg-slate-900\\/40{background-color:#0f172b66}}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities;/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{@supports (color:color-mix(in lab,red,red)){.bg-slate-900\\/40{background-color:color-mix(in oklab,var(--color-slate-900)40%,transparent)}}.bg-slate-900\\/60{background-color:#0f172b99}@supports (color:color-mix(in lab,red,red)){.bg-slate-900\\/60{background-color:color-mix(in oklab,var(--color-slate-900)60%,transparent)}}.bg-surface{background-color:var(--color-surface)}.bg-transparent{background-color:#0000}.bg-white\\/90{background-color:#ffffffe6}@supports (color:color-mix(in lab,red,red)){.bg-white\\/90{background-color:color-mix(in srgb,#fff90%,transparent);background-color:color-mix(in oklab,var(--color-white)90%,transparent)}}.p-1{padding:calc(var(--spacing)*1)}.p-5{padding:calc(var(--spacing)*5)}.p-6{padding:calc(var(--spacing)*6)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-6{padding-inline:calc(var(--spacing)*6)}.px-8{padding-inline:calc(var(--spacing)*8)}.py-1\\.5{padding-block:calc(var(--spacing)*1.5)}.py-3{padding-block:calc(var(--spacing)*3)}.py-4{padding-block:calc(var(--spacing)*4)}.py-12{padding-block:calc(var(--spacing)*12)}.pr-16{padding-right:calc(var(--spacing)*16)}.pb-2{padding-bottom:calc(var(--spacing)*2)}.pl-2{padding-left:calc(var(--spacing)*2)}.text-center{text-align:center}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-\\[13px\\]{font-size:13px}.leading-snug{--tw-leading:var(--leading-snug);line-height:var(--leading-snug)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.text-red-500{color:var(--color-red-500)}.text-slate-700{color:var(--color-slate-700)}.placeholder-surface::placeholder{color:var(--color-surface)}.opacity-60{opacity:.6}.opacity-80{opacity:.8}.shadow,.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a)}.shadow,.shadow-sm,.shadow-xl{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a),0 8px 10px -6px var(--tw-shadow-color,#0000001a)}.ring-primary{--tw-ring-color:var(--color-primary)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.transition-all,.transition-colors{transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.transition-opacity{transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.focus\\:border-red-500:focus{border-color:var(--color-red-500)}.focus\\:ring-0:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor)}.focus\\:ring-0:focus,.focus\\:ring-2:focus{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor)}.focus\\:ring-red-200:focus{--tw-ring-color:var(--color-red-200)}.focus\\:ring-red-500:focus{--tw-ring-color:var(--color-red-500)}.focus\\:ring-slate-200:focus{--tw-ring-color:var(--color-slate-200)}.focus\\:outline-none:focus{--tw-outline-style:none;outline-style:none}.top-1\\/2{top:50%}.right-2{right:calc(var(--spacing)*2)}.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.h-10{height:calc(var(--spacing)*10)}.min-h-0{min-height:calc(var(--spacing)*0)}.w-10{width:calc(var(--spacing)*10)}.min-w-0{min-width:calc(var(--spacing)*0)}.-translate-y-1\\/2{--tw-translate-y:-50%;translate:var(--tw-translate-x)var(--tw-translate-y)}.gap-2\\.5{gap:calc(var(--spacing)*2.5)}.overflow-y-auto{overflow-y:auto}.bg-primary{background-color:var(--color-primary)}.py-2\\.5{padding-block:calc(var(--spacing)*2.5)}.pr-9{padding-right:calc(var(--spacing)*9)}.break-words{overflow-wrap:break-word}.text-gray-400{color:var(--color-gray-400)}.focus\\:border-primary:focus{border-color:var(--color-primary)}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-40:disabled{opacity:.4}.col-span-full{grid-column:1/-1}.h-16{height:calc(var(--spacing)*16)}.w-16{width:calc(var(--spacing)*16)}.auto-rows-auto{grid-auto-rows:auto}.content-start{align-content:flex-start}.p-1\\.5{padding:calc(var(--spacing)*1.5)}.inset-y-0{inset-block:calc(var(--spacing)*0)}.size-10{height:calc(var(--spacing)*10);width:calc(var(--spacing)*10)}.h-40{height:calc(var(--spacing)*40)}.h-\\[200px\\]{height:200px}.w-60{width:calc(var(--spacing)*60)}.shrink-0{flex-shrink:0}.gap-1\\.5{gap:calc(var(--spacing)*1.5)}.self-end{align-self:flex-end}.border-surface{border-color:var(--color-surface)}.py-1{padding-block:calc(var(--spacing)*1)}.py-10{padding-block:calc(var(--spacing)*10)}.pb-1{padding-bottom:calc(var(--spacing)*1)}.text-\\[10px\\]{font-size:10px}.text-\\[11px\\]{font-size:11px}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.text-slate-500{color:var(--color-slate-500)}.opacity-70{opacity:.7}.shadow-\\[0_8px_24px_rgba\\(15\\,23\\,42\\,0\\.08\\)\\]{--tw-shadow:0 8px 24px var(--tw-shadow-color,#0f172a14)}.shadow-\\[0_8px_24px_rgba\\(15\\,23\\,42\\,0\\.08\\)\\],.shadow-sm{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a)}.text-yellow-500{color:var(--color-yellow-500)}}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer components{.chat-item .chat-item-content-main-name,.chat-item .chat-item-content-main-time{-webkit-line-clamp:1;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.z-icon-button-outlined,.z-icon-button-text{color:var(--color-primary)}.z-input,.z-input-area-input,.z-input-area-label,.z-input-label{color:var(--color-surface);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.z-button-group-item-tab,.z-button-group-item-tab-selected{border-style:var(--tw-border-style)!important;border-width:0!important}}@layer utilities{.translate-y-0,.translate-y-full{translate:var(--tw-translate-x)var(--tw-translate-y)}.focus\\:ring-0:focus,.focus\\:ring-2:focus,.shadow,.shadow-\\[0_8px_24px_rgba\\(15\\,23\\,42\\,0\\.08\\)\\],.shadow-sm,.shadow-xl{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}@property --tw-space-y-reverse{syntax:\"*\";inherits:false;initial-value:0}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-translate-x{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-y{syntax:\"*\";inherits:false;initial-value:0}@property --tw-translate-z{syntax:\"*\";inherits:false;initial-value:0}:host{display:block}.channel-box{display:flex;flex-direction:column;padding-block:calc(var(--spacing)*1)}.channel-box-no-user{display:grid;margin-block:auto;padding-top:calc(var(--spacing)*20);place-content:center;text-align:center}@property --tw-space-x-reverse{syntax:\"*\";inherits:false;initial-value:0}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-blur{syntax:\"*\";inherits:false}@property --tw-brightness{syntax:\"*\";inherits:false}@property --tw-contrast{syntax:\"*\";inherits:false}@property --tw-grayscale{syntax:\"*\";inherits:false}@property --tw-hue-rotate{syntax:\"*\";inherits:false}@property --tw-invert{syntax:\"*\";inherits:false}@property --tw-opacity{syntax:\"*\";inherits:false}@property --tw-saturate{syntax:\"*\";inherits:false}@property --tw-sepia{syntax:\"*\";inherits:false}@property --tw-drop-shadow{syntax:\"*\";inherits:false}@property --tw-drop-shadow-color{syntax:\"*\";inherits:false}@property --tw-drop-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:\"*\";inherits:false}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@media (forced-colors:active){[type=checkbox]:checked,[type=radio]:checked{appearance:auto}[type=checkbox]:indeterminate{appearance:auto}[type=checkbox]:checked,[type=checkbox]:indeterminate,[type=radio]:checked{appearance:auto}}@media (hover:hover){.z-button-outlined:hover,.z-button-primary:hover,.z-icon-button-outlined:hover,.z-icon-button-primary:hover,.z-icon-button-text:hover{--tw-brightness:brightness(110%);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,)}.z-button-group-item-tab:hover{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.z-button-group-item-tab-unselected:hover{background-color:var(--color-white)}.z-button-group-item-primary-unselected:hover{--tw-brightness:brightness(95%);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,)}.z-button-group-item-outlined-unselected:hover{background-color:#e028481a}@supports (color:color-mix(in lab,red,red)){.z-button-group-item-outlined-unselected:hover{background-color:color-mix(in oklab,var(--color-primary)10%,transparent);background-color:color-mix(in srgb,#e0284810%,transparent)}}.hover\\:brightness-110:hover{--tw-brightness:brightness(110%);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,)}.group-hover\\:opacity-100:is(:where(.group):hover *){opacity:1}.hover\\:bg-background:hover{background-color:var(--color-background)}.hover\\:bg-red-50:hover{background-color:var(--color-red-50)}.hover\\:bg-slate-100:hover{background-color:var(--color-slate-100)}.hover\\:bg-white:hover{background-color:var(--color-white)}.hover\\:text-gray-600:hover{color:var(--color-gray-600)}.hover\\:opacity-100:hover{opacity:1}.z-button-outlined:hover,.z-button-primary:hover,.z-icon-button-outlined:hover,.z-icon-button-primary:hover,.z-icon-button-text:hover{--tw-brightness:brightness(110%);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,)}}@media screen and (min-width:0){.z-max-height{height:calc(100vh - 56px)}}@media screen and (min-width:600px){.z-max-height{height:calc(100vh - 64px)}}@media (min-width:40rem){.container{max-width:40rem}.sm\\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\\:min-w-0{min-width:calc(var(--spacing)*0)}.sm\\:flex-row{flex-direction:row}}@media (min-width:48rem){.container{max-width:48rem}.md\\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (min-width:64rem){.container{max-width:64rem}.lg\\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}@media not all and (min-width:40rem){.max-sm\\:hidden{display:none}}";
+const ChannelBox = /*@__PURE__*/ proxyCustomElement(class ChannelBox extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+    }
+    nextKey;
+    isLoading = false;
+    // Virtual scrolling for chat list performance
+    ENABLE_VIRTUAL_SCROLLING = true;
+    visibleRange = { start: 0, end: 0 };
+    BUFFER_SIZE = 5; // Extra items to render above/below viewport
+    ESTIMATED_ITEM_HEIGHT = 64; // Average chat item height in pixels
+    VIRTUAL_SCROLL_THRESHOLD = 30; // Only use virtual scrolling when > 30 chats
+    scrollContainerRef;
+    async componentWillLoad() {
+        const socket = initSocket();
+        socket.on('chat', async ({ sessionId }) => await handleGetChat(sessionId));
+        // Initialize visible range for virtual scrolling
+        const chats = chatsStore.get('chats');
+        if (this.ENABLE_VIRTUAL_SCROLLING && chats.length > this.VIRTUAL_SCROLL_THRESHOLD) {
+            this.visibleRange = { start: 0, end: Math.min(chats.length, 10 + this.BUFFER_SIZE) };
+        }
+        else {
+            this.visibleRange = { start: 0, end: chats.length };
+        }
+    }
+    /**
+     * Calculate which chat items should be visible based on scroll position
+     */
+    updateVisibleRange(scrollTop, clientHeight, totalChats) {
+        const viewportStart = Math.floor(scrollTop / this.ESTIMATED_ITEM_HEIGHT);
+        const viewportEnd = Math.ceil((scrollTop + clientHeight) / this.ESTIMATED_ITEM_HEIGHT);
+        const start = Math.max(0, viewportStart - this.BUFFER_SIZE);
+        const end = Math.min(totalChats, viewportEnd + this.BUFFER_SIZE);
+        // Only update if range changed significantly (hysteresis to reduce re-render frequency)
+        if (Math.abs(this.visibleRange.start - start) > 5 || Math.abs(this.visibleRange.end - end) > 5) {
+            this.visibleRange = { start, end };
+        }
+    }
+    /**
+     * Handle scroll events for virtual scrolling
+     */
+    handleScroll = () => {
+        if (!this.scrollContainerRef)
+            return;
+        const chats = chatsStore.get('chats');
+        if (!this.ENABLE_VIRTUAL_SCROLLING || chats.length <= this.VIRTUAL_SCROLL_THRESHOLD) {
+            return;
+        }
+        this.updateVisibleRange(this.scrollContainerRef.scrollTop, this.scrollContainerRef.clientHeight, chats.length);
+    };
+    render() {
+        const t = useTranslation();
+        const theme = configStore.get('theme');
+        const chats = chatsStore.get('chats');
+        const filterChat = filterChatsStore.get('filterChat');
+        // Determine if virtual scrolling should be used
+        const useVirtualScrolling = this.ENABLE_VIRTUAL_SCROLLING && chats.length > this.VIRTUAL_SCROLL_THRESHOLD;
+        // Get visible chats or all chats
+        let visibleChats = chats;
+        let paddingTop = 0;
+        let paddingBottom = 0;
+        if (useVirtualScrolling) {
+            const { start, end } = this.visibleRange;
+            visibleChats = chats.slice(start, end);
+            paddingTop = start * this.ESTIMATED_ITEM_HEIGHT;
+            paddingBottom = (chats.length - end) * this.ESTIMATED_ITEM_HEIGHT;
+        }
+        return (h(Host, { key: 'dd43e75345717b8a05943da6f89489cde5028ecb', "data-theme": theme }, h("div", { key: '210bd87813b7a2237c3f8d4598775422f569ac87', class: "channel-box", ref: el => (this.scrollContainerRef = el), onScroll: this.handleScroll }, filterChat && chats.length === 0 ? (h("div", { class: "channel-box-no-user text-theme-gray" }, h("div", { class: "mx-auto" }, h(Icon, { name: "UsersRound", addClass: "size-18" })), t('chat_tab.no_user_found'))) : (h(Fragment, null, paddingTop > 0 && h("div", { style: { height: `${paddingTop}px` } }), visibleChats.map(item => (h("div", { key: item.id }, h(ChatItem, { item: item })))), paddingBottom > 0 && h("div", { style: { height: `${paddingBottom}px` } }))))));
+    }
+    static get style() { return channelBoxCss; }
+}, [256, "channel-box", {
+        "nextKey": [32],
+        "isLoading": [32],
+        "visibleRange": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["channel-box", "tag-list", "tag-or-status-item", "tag-popper", "z-avatar"];
+    components.forEach(tagName => { switch (tagName) {
+        case "channel-box":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ChannelBox);
+            }
+            break;
+        case "tag-list":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "tag-or-status-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "tag-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "z-avatar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+export { ChannelBox as C, defineCustomElement as d };
+//# sourceMappingURL=p-DLnTQGP9.js.map
+//# sourceMappingURL=p-DLnTQGP9.js.map

package/dist/components/p-DLnTQGP9.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-DLnTQGP9.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/internal-component/chat-item.tsx","src/components/channel-box/channel-box.css?tag=channel-box","src/components/channel-box/channel-box.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { configStore, selectedChatStore } from '../../store/store';\nimport { leaveRoom } from '../../utils/socket';\nimport { TChatItem } from '../../store/type';\nimport { displayDateTime, displayTime, isToday } from '../../utils/dayjs';\nimport { Icon } from './icon';\nimport { useTranslation } from '../../utils/utils';\nimport { getChatChannelPictureUrl, getChatName, getChatPicture } from '../../store/chat';\nimport { ZAvatarGroup } from './z-avatar-group';\n\ninterface ChatItemProps {\n item: TChatItem;\n}\n\nexport const ChatItem: FunctionalComponent<ChatItemProps> = ({ item }) => {\n const t = useTranslation();\n const { id, connection, channel, tags, unread_count, last_message, last_message_at, type, pin, mark_as_unread } = item;\n const platformColor = channel === 'line' ? 'text-green-500' : 'text-blue-500';\n const theme = configStore.get('theme');\n const isSelected = selectedChatStore.get('selectedChat')?.id === id;\n const isUnread = (unread_count > 0) || mark_as_unread\n const chatName = getChatName(item);\n\n const getLastMessage = () => {\n if (['{image}', '{sticker}', '{audio}', '{video}', '{location}', '{text}', '{file}', '{template}', '{ig_reel}', '{story_mention}'].includes(last_message?.toLowerCase())) {\n const sender = ['user', 'group'].includes(type) ? chatName : t('you');\n let lastMessage = '';\n switch (last_message) {\n case '{ig_reel}':\n lastMessage = t('ig_reel');\n break;\n case '{story_mention}':\n lastMessage = t('story_mention');\n break;\n case '{file}':\n lastMessage = t('file');\n break;\n case '{image}':\n lastMessage = t('image');\n break;\n case '{video}':\n lastMessage = t('video');\n break;\n }\n\n return sender + ' ' + t('sent') + ' ' + lastMessage;\n }\n\n return last_message;\n };\n\n const getLastMessageTime = () => {\n if (last_message_at) {\n if (isToday(last_message_at)) {\n return displayTime(last_message_at);\n } else {\n return displayDateTime(last_message_at);\n }\n }\n }\n\n const handleSelectChatClick = () => {\n const selectedChat = selectedChatStore.get('selectedChat');\n if (selectedChat && selectedChat.id !== item.id) {\n leaveRoom(selectedChat.id);\n }\n\n selectedChatStore.set('selectedChat', item);\n };\n\n const _sortedTags = tags.sort((a, b) => a.sequence - b.sequence);\n\n return (\n <div\n class={`chat-item ${isSelected ? 'bg-pink-100' : 'bg-background'}`}\n data-theme={theme}\n onClick={() => handleSelectChatClick()}\n >\n {pin && (\n <div class=\"chat-item-pin\">\n <Icon name=\"Pin\" addClass=\"chat-item-pin-icon text-primary\" />\n </div>\n )}\n\n <div class=\"chat-item-content-container\">\n <div class=\"chat-item-avatar-wrapper\">\n <z-avatar pictureUrl={getChatPicture(item)} />\n {type === 'group' &&\n <div class=\"chat-item-avatar-badge\">\n <ZAvatarGroup size=\"x-small\" />\n </div>\n }\n </div>\n <div class=\"chat-item-content-wrapper\">\n <div class=\"chat-item-content-main\">\n {connection.type === 'zwiz' &&\n <img src={`https://zwizai-platform.s3.ap-southeast-1.amazonaws.com/zignal-package/zwiz.png`} alt=\"agent avatar zwiz\" class=\"chat-item-content-main-image\" loading=\"lazy\" />\n }\n <img src={getChatChannelPictureUrl(item)} alt=\"agent avatar\" class=\"chat-item-content-main-image\" loading=\"lazy\" />\n <span title={connection.name} class={`chat-item-content-main-name ${platformColor} `}>\n {connection.name}\n </span>\n\n <div title={getLastMessageTime()} class=\"chat-item-content-main-time\">\n {getLastMessageTime()}\n </div>\n </div>\n <div class={`chat-item-content-secondary`}>\n <div>\n <div title={chatName} class={`${isUnread ? 'font-bold' : ''} ${isSelected ? 'text-black' : 'text-surface'} chat-item-content-secondary-nickname`}>\n {chatName}\n </div>\n <div title={getLastMessage()} class={`${isUnread ? 'font-bold' : ''} chat-item-content-secondary-message`}>\n {getLastMessage()}\n </div>\n </div>\n\n {isUnread && (\n <span class={`chat-item-content-unread ${unread_count === 0 ? 'chat-item-content-unread-mark' : 'chat-item-content-unread-count'}`}>\n {unread_count > 0 && (unread_count > 1000 ? '999+' : unread_count)}\n </span>\n )}\n </div>\n\n <tag-list tags={_sortedTags} chatId={id} referenceSelector={`chat-tag-${id}`} />\n </div>\n {/* <div class=\"text-right flex flex-col justify-between\">\n <div class=\"mt-auto ml-auto\">\n <img\n src={`https://zwizai-platform.s3.ap-southeast-1.amazonaws.com/zignal-package/nong-z.png`}\n alt=\"agent avatar\"\n class=\"size-5 rounded-full\"\n />\n </div>\n </div> */}\n </div>\n </div>\n );\n};\n",":host {\n display: block;\n}\n\n.channel-box {\n @apply flex flex-col py-1\n}\n\n.channel-box-no-user {\n @apply grid place-content-center my-auto text-center pt-20\n}","import { Component, Fragment, Host, State, h } from '@stencil/core';\nimport { ChatItem } from '../internal-component/chat-item';\nimport { configStore, chatsStore, filterChatsStore } from '../../store/store';\nimport { initSocket } from '../../utils/socket';\nimport { Icon } from '../internal-component/icon';\nimport { useTranslation } from '../../utils/utils';\nimport { handleGetChat } from '../../store/chat';\n\n@Component({\n tag: 'channel-box',\n styleUrl: 'channel-box.css',\n})\nexport class ChannelBox {\n @State() nextKey?: string;\n @State() isLoading = false;\n\n // Virtual scrolling for chat list performance\n private readonly ENABLE_VIRTUAL_SCROLLING = true;\n @State() private visibleRange: { start: number; end: number } = { start: 0, end: 0 };\n private readonly BUFFER_SIZE = 5; // Extra items to render above/below viewport\n private readonly ESTIMATED_ITEM_HEIGHT = 64; // Average chat item height in pixels\n private readonly VIRTUAL_SCROLL_THRESHOLD = 30; // Only use virtual scrolling when > 30 chats\n private scrollContainerRef?: HTMLDivElement;\n\n async componentWillLoad() {\n const socket = initSocket();\n\n socket.on('chat', async ({ sessionId }: { sessionId: string }) => await handleGetChat(sessionId));\n\n // Initialize visible range for virtual scrolling\n const chats = chatsStore.get('chats');\n if (this.ENABLE_VIRTUAL_SCROLLING && chats.length > this.VIRTUAL_SCROLL_THRESHOLD) {\n this.visibleRange = { start: 0, end: Math.min(chats.length, 10 + this.BUFFER_SIZE) };\n } else {\n this.visibleRange = { start: 0, end: chats.length };\n }\n }\n\n /**\n * Calculate which chat items should be visible based on scroll position\n */\n private updateVisibleRange(scrollTop: number, clientHeight: number, totalChats: number) {\n const viewportStart = Math.floor(scrollTop / this.ESTIMATED_ITEM_HEIGHT);\n const viewportEnd = Math.ceil((scrollTop + clientHeight) / this.ESTIMATED_ITEM_HEIGHT);\n\n const start = Math.max(0, viewportStart - this.BUFFER_SIZE);\n const end = Math.min(totalChats, viewportEnd + this.BUFFER_SIZE);\n\n // Only update if range changed significantly (hysteresis to reduce re-render frequency)\n if (Math.abs(this.visibleRange.start - start) > 5 || Math.abs(this.visibleRange.end - end) > 5) {\n this.visibleRange = { start, end };\n }\n }\n\n /**\n * Handle scroll events for virtual scrolling\n */\n private handleScroll = () => {\n if (!this.scrollContainerRef) return;\n\n const chats = chatsStore.get('chats');\n if (!this.ENABLE_VIRTUAL_SCROLLING || chats.length <= this.VIRTUAL_SCROLL_THRESHOLD) {\n return;\n }\n\n this.updateVisibleRange(\n this.scrollContainerRef.scrollTop,\n this.scrollContainerRef.clientHeight,\n chats.length\n );\n };\n\n render() {\n const t = useTranslation();\n const theme = configStore.get('theme');\n const chats = chatsStore.get('chats');\n const filterChat = filterChatsStore.get('filterChat');\n\n // Determine if virtual scrolling should be used\n const useVirtualScrolling = this.ENABLE_VIRTUAL_SCROLLING && chats.length > this.VIRTUAL_SCROLL_THRESHOLD;\n\n // Get visible chats or all chats\n let visibleChats = chats;\n let paddingTop = 0;\n let paddingBottom = 0;\n\n if (useVirtualScrolling) {\n const { start, end } = this.visibleRange;\n visibleChats = chats.slice(start, end);\n paddingTop = start * this.ESTIMATED_ITEM_HEIGHT;\n paddingBottom = (chats.length - end) * this.ESTIMATED_ITEM_HEIGHT;\n }\n\n return (\n <Host data-theme={theme}>\n <div\n class=\"channel-box\"\n ref={el => (this.scrollContainerRef = el as HTMLDivElement)}\n onScroll={this.handleScroll}\n >\n {filterChat && chats.length === 0 ? (\n <div class=\"channel-box-no-user text-theme-gray\">\n <div class=\"mx-auto\">\n <Icon name=\"UsersRound\" addClass=\"size-18\" />\n </div>\n {t('chat_tab.no_user_found')}\n </div>\n ) : (\n <Fragment>\n {paddingTop > 0 && <div style={{ height: `${paddingTop}px` }} />}\n {visibleChats.map(item => (\n <div key={item.id}>\n <ChatItem item={item} />\n </div>\n ))}\n {paddingBottom > 0 && <div style={{ height: `${paddingBottom}px` }} />}\n </Fragment>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}