npm - zignal-stencil-library - Versions diffs - 1.1.208 → 1.1.209 - Mend

zignal-stencil-library 1.1.208 → 1.1.209

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 (148) hide show

package/dist/components/message-box2.js CHANGED Viewed

@@ -32,7 +32,7 @@ import { d as defineCustomElement$3 } from './quick-message-video-content2.js';
 import { d as defineCustomElement$2 } from './status-badge2.js';
 import { d as defineCustomElement$1 } from './z-avatar2.js';
-const messageBoxCss = "@layer base{*,::backdrop,:after,:before{--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;--tw-space-y-reverse:0;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;border:0 solid;box-sizing:border-box;margin:0;padding:0}}/*! tailwindcss v4.1.17 | 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-leading:initial;--tw-space-y-reverse:0;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0}}}@layer theme{:host,:root{--container-xl:36rem;--text-xl:1.25rem;--text-xl--line-height:1.4;--color-yellow-500:oklch(79.5% .184 86.047);--container-3xs:16rem;--container-sm:24rem;--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-xs:20rem;--container-md:28rem;--text-2xl:1.5rem;--text-2xl--line-height:1.33333;--color-slate-500:oklch(55.4% .046 257.417);--leading-tight:1.25;--leading-snug:1.375;--leading-relaxed:1.625;--color-gray-600:oklch(44.6% .03 256.802);--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;--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-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--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;--animate-spin:spin 1s linear infinite;--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;--color-overlay:#0000004d;--color-selected:#fdeef1}}@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);line-height:var(--tw-leading,var(--text-base--line-height))}.chat-item .chat-item-content-secondary-message,.chat-item .chat-item-content-secondary-nickname{color:var(--color-surface);-webkit-line-clamp:1;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.chat-item .chat-item-content-secondary-message{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.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-background);border-color:var(--color-divider);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-radius:var(--radius-md);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: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-tab-overlay{background-color:var(--color-overlay)}.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}.z-avatar-error{align-items:center;display:flex;justify-content:center}.z-avatar-2x-small{height:calc(var(--spacing)*3);min-height:calc(var(--spacing)*3);min-width:calc(var(--spacing)*3);width:calc(var(--spacing)*3)}.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%}.z-avatar-group{background-color:#023761;border-radius:3.40282e+38px}}@layer utilities{.hidden\\!{display:none!important}.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,)}}[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;--color-overlay:#0000004d;--color-selected:#fdeef1}[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;--color-overlay:#ffffff4d;--color-selected:#3a242e}.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}.z-zwiz-max-height{height:100vh}.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.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@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)}.relative{position:relative}.size-5{height:calc(var(--spacing)*5);width:calc(var(--spacing)*5)}.rotate-45{rotate:45deg}.bg-background{background-color:var(--color-background)}.text-blue-500{color:var(--color-blue-500)}.text-green-500{color:var(--color-green-500)}.text-primary{color:var(--color-primary)}.text-surface{color:var(--color-surface)}.mt-auto{margin-top:auto}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-2\\.5{margin-bottom:calc(var(--spacing)*2.5)}.mb-auto{margin-bottom:auto}.hidden{display:none}.px-1{padding-inline:calc(var(--spacing)*1)}.text-black{color:var(--color-black)}}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.17 | 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))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.col-span-2{grid-column:span 2/span 2}.my-2{margin-block:calc(var(--spacing)*2)}.w-xl{width:var(--container-xl)}.w-xs{width:var(--container-xs)}.mt-4{margin-top:calc(var(--spacing)*4)}.mr-2{margin-right:calc(var(--spacing)*2)}.flex{display:flex}.size-4{height:calc(var(--spacing)*4);width:calc(var(--spacing)*4)}.w-full{width:100%}.flex-1{flex:1}.animate-spin{animation:var(--animate-spin)}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-center{justify-content:center}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-divider{border-color:var(--color-divider)}.bg-primary\\/10{background-color:#e028481a}}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{@supports (color:color-mix(in lab,red,red)){.bg-primary\\/10{background-color:color-mix(in srgb,#e0284810%,transparent);background-color:color-mix(in oklab,var(--color-primary)10%,transparent)}}.px-4{padding-inline:calc(var(--spacing)*4)}.py-2{padding-block:calc(var(--spacing)*2)}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.underline{text-decoration-line:underline}}@keyframes spin{to{transform:rotate(1turn)}}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{.mt-1{margin-top:calc(var(--spacing)*1)}.mt-2{margin-top:calc(var(--spacing)*2)}.mb-1{margin-bottom:calc(var(--spacing)*1)}.ml-1{margin-left:calc(var(--spacing)*1)}.inline-flex{display:inline-flex}.size-1\\.5{height:calc(var(--spacing)*1.5);width:calc(var(--spacing)*1.5)}.h-\\[40px\\]{height:40px}.w-1\\/4{width:25%}.rotate-0{rotate:none}.rotate-180{rotate:180deg}.flex-col{flex-direction:column}.gap-2{gap:calc(var(--spacing)*2)}.fill-current{fill:currentColor}.container{width:100%}.py-1\\.5{padding-block:calc(var(--spacing)*1.5)}.m-auto{margin:auto}.size-32{height:calc(var(--spacing)*32);width:calc(var(--spacing)*32)}.size-2{height:calc(var(--spacing)*2);width:calc(var(--spacing)*2)}.bg-pink-100{background-color:var(--color-pink-100)}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.-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)}.pt-4{padding-top:calc(var(--spacing)*4)}.pb-8{padding-bottom:calc(var(--spacing)*8)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.line-clamp-3{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.size-3{height:calc(var(--spacing)*3);width:calc(var(--spacing)*3)}.size-8{height:calc(var(--spacing)*8);width:calc(var(--spacing)*8)}.max-w-3xs{max-width:var(--container-3xs)}.max-w-sm{max-width:var(--container-sm)}.resize{resize:both}.rounded-br-\\[0\\]{border-bottom-right-radius:0}.rounded-bl-\\[0\\]{border-bottom-left-radius:0}.bg-black{background-color:var(--color-black)}.bg-paper{background-color:var(--color-paper)}.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)}.text-white{color:var(--color-white)}.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)}.absolute{position:absolute}.right-full{right:100%}.-bottom-2{bottom:calc(var(--spacing)*-2)}.left-full{left:100%}.mb-0\\.5{margin-bottom:calc(var(--spacing)*.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}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.rounded-full{border-radius:3.40282e+38px}.bg-yellow-300{background-color:var(--color-yellow-300)}.pl-10{padding-left:calc(var(--spacing)*10)}.text-left{text-align:left}.text-right{text-align:right}.-right-0\\.5{right:calc(var(--spacing)*-.5)}.-bottom-0\\.5{bottom:calc(var(--spacing)*-.5)}.col-span-3{grid-column:span 3/span 3}.flex-wrap{flex-wrap:wrap}.gap-y-1{row-gap:calc(var(--spacing)*1)}.border-b-\\[0\\.5px\\]{border-bottom-style:var(--tw-border-style);border-bottom-width:.5px}.border-primary{border-color:var(--color-primary)}.pt-2{padding-top:calc(var(--spacing)*2)}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.whitespace-nowrap{white-space:nowrap}.h-full{height:100%}.border-transparent{border-color:#0000}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.mb-6{margin-bottom:calc(var(--spacing)*6)}.mb-12{margin-bottom:calc(var(--spacing)*12)}.h-40{height:calc(var(--spacing)*40)}.gap-3{gap:calc(var(--spacing)*3)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.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-6{margin-top:calc(var(--spacing)*6)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.contents{display:contents}.grid{display:grid}.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}.w-7{width:calc(var(--spacing)*7)}.w-8{width:calc(var(--spacing)*8)}.w-9{width:calc(var(--spacing)*9)}.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-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}.justify-between{justify-content:space-between}.gap-1{gap:calc(var(--spacing)*1)}.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{border-style:var(--tw-border-style);border-width:1px}.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-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-primary{background-color:var(--color-primary)}.bg-slate-900\\/40{background-color:#0f172b66}}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities;/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.17 | 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-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)}}.object-cover{object-fit:cover}.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-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-0{opacity:0}.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)}.ml-auto{margin-left:auto}.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}.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}.top-4{top:calc(var(--spacing)*4)}.h-4{height:calc(var(--spacing)*4)}.w-4{width:calc(var(--spacing)*4)}.line-through{text-decoration-line:line-through}.inset-y-0{inset-block:calc(var(--spacing)*0)}.size-10{height:calc(var(--spacing)*10);width:calc(var(--spacing)*10)}.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)}.whitespace-pre-line{white-space:pre-line}.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)}.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)}.text-background{color:var(--color-background)}.size-16{height:calc(var(--spacing)*16);width:calc(var(--spacing)*16)}.size-\\[8px\\]{height:8px;width:8px}.size-\\[10px\\]{height:10px;width:10px}.text-yellow-500{color:var(--color-yellow-500)}.sticky{position:sticky}.top-0{top:calc(var(--spacing)*0)}.right-0{right:calc(var(--spacing)*0)}.z-50{z-index:50}.block{display:block}.max-h-60{max-height:calc(var(--spacing)*60)}.w-64{width:calc(var(--spacing)*64)}.w-auto\\!{width:auto!important}.min-w-\\[100px\\]{min-width:100px}.rounded{border-radius:.25rem}.rounded-md{border-radius:var(--radius-md)}.pr-8\\!{padding-right:calc(var(--spacing)*8)!important}.text-surface\\/50{color:#00000080}}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{@supports (color:color-mix(in lab,red,red)){.text-surface\\/50{color:color-mix(in srgb,#00050%,transparent);color:color-mix(in oklab,var(--color-surface)50%,transparent)}}.text-surface\\/70{color:#000000b3}@supports (color:color-mix(in lab,red,red)){.text-surface\\/70{color:color-mix(in srgb,#00070%,transparent);color:color-mix(in oklab,var(--color-surface)70%,transparent)}}.opacity-50{opacity:.5}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px 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)}.outline-none{--tw-outline-style:none;outline-style:none}.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)}.col-span-1{grid-column:span 1/span 1}.m-2{margin:calc(var(--spacing)*2)}.mx-4{margin-inline:calc(var(--spacing)*4)}.ml-0\\.5{margin-left:calc(var(--spacing)*.5)}.w-1\\/2{width:50%}.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%}.bg-selected{background-color:var(--color-selected)}.text-green-700{color:var(--color-green-700)}.text-red-700{color:var(--color-red-700)}.capitalize{text-transform:capitalize}.opacity-100{opacity:1}}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | 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}.chat-item .chat-item-content-secondary-message,.chat-item .chat-item-content-secondary-nickname{color:var(--color-surface);-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{.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)}.translate-y-0,.translate-y-full{translate:var(--tw-translate-x)var(--tw-translate-y)}}@property --tw-leading{syntax:\"*\";inherits:false}:host{contain:content;display:block}.message-box-wrapper{display:flex;flex-direction:column}.message-box-no-selected-chat-box{color:var(--color-primary);display:grid;margin-block:auto;place-content:center;text-align:center}.message-box-syncing-message{display:flex;flex-direction:column;gap:calc(var(--spacing)*2);margin-inline:auto;margin-top:calc(var(--spacing)*4);pointer-events:none;width:fit-content;z-index:10}.message-box-container{flex:1;overflow-y:auto;scroll-behavior:smooth}:where(.message-box-container>: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))}.message-box-loading{color:var(--color-gray-400);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));text-align:center}.message-box-loading-icon{animation:var(--animate-spin);height:calc(var(--spacing)*5);margin-inline:auto;width:calc(var(--spacing)*5)}.message-box-time-wrapper{margin-block:calc(var(--spacing)*2);text-align:center}.message-box-time{border-radius:var(--radius-xl);color:var(--color-theme-gray);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));padding-block:calc(var(--spacing)*1);padding-inline:calc(var(--spacing)*2)}.message-box-scroll-to-bottom{--tw-translate-x:-50%;left:50%;opacity:.5;position:absolute;translate:var(--tw-translate-x)var(--tw-translate-y)}.message-box-token-wrapper{border-radius:var(--radius-2xl);padding-block:calc(var(--spacing)*2);padding-inline:calc(var(--spacing)*4);pointer-events:none;white-space:nowrap;width:fit-content;z-index:10}.message-box-new-message,.message-box-token-wrapper{--tw-translate-x:-50%;background-color:var(--color-primary);color:var(--color-white);left:50%;position:absolute;translate:var(--tw-translate-x)var(--tw-translate-y)}.message-box-new-message{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));opacity:.7;padding:calc(var(--spacing)*2);width:100%;z-index:1}.message-box-new-message-link{cursor:pointer;text-decoration-line:underline}@property --tw-space-y-reverse{syntax:\"*\";inherits:false;initial-value:0}@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}@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\\:bg-primary\\/10:hover{background-color:#e028481a}@supports (color:color-mix(in lab,red,red)){.hover\\:bg-primary\\/10:hover{background-color:color-mix(in srgb,#e0284810%,transparent);background-color:color-mix(in oklab,var(--color-primary)10%,transparent)}}.hover\\:text-primary:hover{color:var(--color-primary)}.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}.hover\\:bg-surface\\/10:hover{background-color:#0000001a}@supports (color:color-mix(in lab,red,red)){.hover\\:bg-surface\\/10:hover{background-color:color-mix(in srgb,#00010%,transparent);background-color:color-mix(in oklab,var(--color-surface)10%,transparent)}}.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\\:min-w-0{min-width:calc(var(--spacing)*0)}.sm\\:flex-row{flex-direction:row}.sm\\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}@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 messageBoxCss = "@layer base{*,::backdrop,:after,:before{--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;--tw-space-y-reverse:0;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;border:0 solid;box-sizing:border-box;margin:0;padding:0}}/*! tailwindcss v4.1.17 | 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-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-duration:initial;--tw-leading:initial;--tw-space-y-reverse:0;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0}}}@layer theme{:host,:root{--container-xl:36rem;--text-xl:1.25rem;--text-xl--line-height:1.4;--color-yellow-500:oklch(79.5% .184 86.047);--color-yellow-300:oklch(90.5% .182 98.111);--container-3xs:16rem;--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-600:oklch(44.6% .03 256.802);--color-slate-500:oklch(55.4% .046 257.417);--leading-tight:1.25;--leading-snug:1.375;--leading-relaxed:1.625;--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;--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-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--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;--animate-spin:spin 1s linear infinite;--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;--color-overlay:#0000004d;--color-selected:#fdeef1}}@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);line-height:var(--tw-leading,var(--text-base--line-height))}.chat-item .chat-item-content-secondary-message,.chat-item .chat-item-content-secondary-nickname{color:var(--color-surface);-webkit-line-clamp:1;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.chat-item .chat-item-content-secondary-message{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.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-background);border-color:var(--color-divider);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-radius:var(--radius-md);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: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-tab-overlay{background-color:var(--color-overlay)}.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}.z-avatar-error{align-items:center;display:flex;justify-content:center}.z-avatar-2x-small{height:calc(var(--spacing)*3);min-height:calc(var(--spacing)*3);min-width:calc(var(--spacing)*3);width:calc(var(--spacing)*3)}.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%}.z-avatar-group{background-color:#023761;border-radius:3.40282e+38px}}@layer utilities{.hidden\\!{display:none!important}.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,)}}[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;--color-overlay:#0000004d;--color-selected:#fdeef1}[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;--color-overlay:#ffffff4d;--color-selected:#3a242e}.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}.z-zwiz-max-height{height:100vh}.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.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{.container{width:100%}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.border-divider{border-color:var(--color-divider)}.bg-background{background-color:var(--color-background)}.text-primary{color:var(--color-primary)}.text-surface{color:var(--color-surface)}.focus\\:border-primary:focus{border-color:var(--color-primary)}.cursor-pointer{cursor:pointer}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-theme-gray{color:var(--color-theme-gray)}.relative{position:relative}.z-50{z-index:50}.mt-1{margin-top:calc(var(--spacing)*1)}.mt-2{margin-top:calc(var(--spacing)*2)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.flex{display:flex}.size-3{height:calc(var(--spacing)*3);width:calc(var(--spacing)*3)}.size-4{height:calc(var(--spacing)*4);width:calc(var(--spacing)*4)}.size-5{width:calc(var(--spacing)*5)}.h-5,.size-5{height:calc(var(--spacing)*5)}.h-16{height:calc(var(--spacing)*16)}.h-40{height:calc(var(--spacing)*40)}.w-5{width:calc(var(--spacing)*5)}.w-16{width:calc(var(--spacing)*16)}.flex-1{flex:1}.animate-spin{animation:var(--animate-spin)}.flex-row{flex-direction:row}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:calc(var(--spacing)*2)}.overflow-hidden{overflow:hidden}.rounded{border-radius:.25rem}.rounded-lg{border-radius:var(--radius-lg)}.border{border-style:var(--tw-border-style);border-width:1px}.border-primary{border-color:var(--color-primary)}.bg-primary{background-color:var(--color-primary)}.p-4{padding:calc(var(--spacing)*4)}.px-2{padding-inline:calc(var(--spacing)*2)}.py-2{padding-block:calc(var(--spacing)*2)}.py-4{padding-block:calc(var(--spacing)*4)}.pt-1{padding-top:calc(var(--spacing)*1)}.pt-2{padding-top:calc(var(--spacing)*2)}.text-center{text-align:center}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.text-gray-500{color:var(--color-gray-500)}.text-red-500{color:var(--color-red-500)}.text-white{color:var(--color-white)}.underline{text-decoration-line:underline}.opacity-70{opacity:.7}.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))}}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}@keyframes spin{to{transform:rotate(1turn)}}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{.rotate-45{rotate:45deg}.text-blue-500{color:var(--color-blue-500)}.text-green-500{color:var(--color-green-500)}.mt-auto{margin-top:auto}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-2\\.5{margin-bottom:calc(var(--spacing)*2.5)}.mb-auto{margin-bottom:auto}.hidden{display:none}.px-1{padding-inline:calc(var(--spacing)*1)}.text-black{color:var(--color-black)}.rotate-180{rotate:180deg}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.transition-transform{transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.duration-300{--tw-duration:.3s;transition-duration:.3s}.visible{visibility:visible}.mx-auto{margin-inline:auto}.size-18{height:calc(var(--spacing)*18);width:calc(var(--spacing)*18)}}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.17 | 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.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{.col-span-2{grid-column:span 2/span 2}.my-2{margin-block:calc(var(--spacing)*2)}.w-xl{width:var(--container-xl)}.w-xs{width:var(--container-xs)}.size-2{height:calc(var(--spacing)*2);width:calc(var(--spacing)*2)}.bg-pink-100{background-color:var(--color-pink-100)}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.m-auto{margin:auto}.size-32{height:calc(var(--spacing)*32);width:calc(var(--spacing)*32)}.-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}.px-4{padding-inline:calc(var(--spacing)*4)}.pt-4{padding-top:calc(var(--spacing)*4)}.pb-8{padding-bottom:calc(var(--spacing)*8)}.absolute{position:absolute}.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)}.ml-2{margin-left:calc(var(--spacing)*2)}.size-6{height:calc(var(--spacing)*6);width:calc(var(--spacing)*6)}.flex-col{flex-direction:column}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.rounded-full{border-radius:3.40282e+38px}.bg-yellow-300{background-color:var(--color-yellow-300)}.pl-10{padding-left:calc(var(--spacing)*10)}.text-left{text-align:left}.text-right{text-align:right}.mt-4{margin-top:calc(var(--spacing)*4)}.w-full{width:100%}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.bg-primary\\/10{background-color:#e028481a}}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{@supports (color:color-mix(in lab,red,red)){.bg-primary\\/10{background-color:color-mix(in srgb,#e0284810%,transparent);background-color:color-mix(in oklab,var(--color-primary)10%,transparent)}}}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{.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)}.bg-paper{background-color:var(--color-paper)}.top-4{top:calc(var(--spacing)*4)}.right-4{right:calc(var(--spacing)*4)}.h-4{height:calc(var(--spacing)*4)}.w-4{width:calc(var(--spacing)*4)}.items-end{align-items:flex-end}.text-gray-400{color:var(--color-gray-400)}.line-through{text-decoration-line:line-through}.py-1\\.5{padding-block:calc(var(--spacing)*1.5)}.-right-0\\.5{right:calc(var(--spacing)*-.5)}.-bottom-0\\.5{bottom:calc(var(--spacing)*-.5)}.col-span-3{grid-column:span 3/span 3}.size-8{height:calc(var(--spacing)*8);width:calc(var(--spacing)*8)}.flex-wrap{flex-wrap:wrap}.gap-y-1{row-gap:calc(var(--spacing)*1)}.border-b-\\[0\\.5px\\]{border-bottom-style:var(--tw-border-style);border-bottom-width:.5px}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.whitespace-nowrap{white-space:nowrap}.mb-1{margin-bottom:calc(var(--spacing)*1)}.ml-1{margin-left:calc(var(--spacing)*1)}.inline-flex{display:inline-flex}.size-1\\.5{height:calc(var(--spacing)*1.5);width:calc(var(--spacing)*1.5)}.h-\\[40px\\]{height:40px}.w-1\\/4{width:25%}.rotate-0{rotate:none}.fill-current{fill:currentColor}.h-full{height:100%}.border-transparent{border-color:#0000}.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)}.resize{resize:both}.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)}.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.fixed{position:fixed}.inset-0{inset:calc(var(--spacing)*0)}.top-3{top:calc(var(--spacing)*3)}.right-3{right:calc(var(--spacing)*3)}.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-6{margin-top:calc(var(--spacing)*6)}.contents{display:contents}.grid{display:grid}.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}.w-7{width:calc(var(--spacing)*7)}.w-8{width:calc(var(--spacing)*8)}.w-9{width:calc(var(--spacing)*9)}.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-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-start{align-items:flex-start}.justify-between{justify-content:space-between}.gap-1{gap:calc(var(--spacing)*1)}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}.overflow-auto{overflow:auto}.overflow-x-auto{overflow-x:auto}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-\\[18px\\]{border-radius:18px}.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-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.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities;/*! tailwindcss v4.1.17 | 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-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)}}.object-cover{object-fit:cover}.p-1{padding:calc(var(--spacing)*1)}.p-5{padding:calc(var(--spacing)*5)}.p-6{padding:calc(var(--spacing)*6)}.px-6{padding-inline:calc(var(--spacing)*6)}.px-8{padding-inline:calc(var(--spacing)*8)}.py-3{padding-block:calc(var(--spacing)*3)}.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-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-slate-700{color:var(--color-slate-700)}.placeholder-surface::placeholder{color:var(--color-surface)}.opacity-0{opacity:0}.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))}.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)}.ml-auto{margin-left:auto}.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}.py-2\\.5{padding-block:calc(var(--spacing)*2.5)}.pr-9{padding-right:calc(var(--spacing)*9)}.break-words{overflow-wrap:break-word}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-40:disabled{opacity:.4}.mb-6{margin-bottom:calc(var(--spacing)*6)}.mb-12{margin-bottom:calc(var(--spacing)*12)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.col-span-full{grid-column:1/-1}.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-\\[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)}.whitespace-pre-line{white-space:pre-line}.text-slate-500{color:var(--color-slate-500)}.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-background{color:var(--color-background)}.text-yellow-500{color:var(--color-yellow-500)}.block{display:block}.rounded-md{border-radius:var(--radius-md)}.text-surface\\/50{color:#00000080}}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{@supports (color:color-mix(in lab,red,red)){.text-surface\\/50{color:color-mix(in srgb,#00050%,transparent);color:color-mix(in oklab,var(--color-surface)50%,transparent)}}.opacity-50{opacity:.5}.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)}.outline-none{--tw-outline-style:none;outline-style:none}.sticky{position:sticky}.top-0{top:calc(var(--spacing)*0)}.right-0{right:calc(var(--spacing)*0)}.max-h-60{max-height:calc(var(--spacing)*60)}.w-64{width:calc(var(--spacing)*64)}.w-auto\\!{width:auto!important}.min-w-\\[100px\\]{min-width:100px}.pr-8\\!{padding-right:calc(var(--spacing)*8)!important}.text-surface\\/70{color:#000000b3}}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{@supports (color:color-mix(in lab,red,red)){.text-surface\\/70{color:color-mix(in srgb,#00070%,transparent);color:color-mix(in oklab,var(--color-surface)70%,transparent)}}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px 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)}.size-16{height:calc(var(--spacing)*16);width:calc(var(--spacing)*16)}.size-\\[8px\\]{height:8px;width:8px}.size-\\[10px\\]{height:10px;width:10px}.col-span-1{grid-column:span 1/span 1}.m-2{margin:calc(var(--spacing)*2)}.mx-4{margin-inline:calc(var(--spacing)*4)}.ml-0\\.5{margin-left:calc(var(--spacing)*.5)}.w-1\\/2{width:50%}.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%}.bg-selected{background-color:var(--color-selected)}.text-green-700{color:var(--color-green-700)}.text-red-700{color:var(--color-red-700)}.capitalize{text-transform:capitalize}.opacity-100{opacity:1}}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}@layer utilities{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{}@layer base{}/*! tailwindcss v4.1.17 | 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}.chat-item .chat-item-content-secondary-message,.chat-item .chat-item-content-secondary-nickname{color:var(--color-surface);-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{.h-5,.size-5{height:calc(var(--spacing)*5)}.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)}.translate-y-0,.translate-y-full{translate:var(--tw-translate-x)var(--tw-translate-y)}}@property --tw-rotate-x{syntax:\"*\";inherits:false}@property --tw-rotate-y{syntax:\"*\";inherits:false}@property --tw-rotate-z{syntax:\"*\";inherits:false}@property --tw-skew-x{syntax:\"*\";inherits:false}@property --tw-skew-y{syntax:\"*\";inherits:false}@property --tw-duration{syntax:\"*\";inherits:false}@property --tw-leading{syntax:\"*\";inherits:false}:host{contain:content;display:block}.message-box-wrapper{display:flex;flex-direction:column}.message-box-no-selected-chat-box{color:var(--color-primary);display:grid;margin-block:auto;place-content:center;text-align:center}.message-box-syncing-message{display:flex;flex-direction:column;gap:calc(var(--spacing)*2);margin-inline:auto;margin-top:calc(var(--spacing)*4);pointer-events:none;width:fit-content;z-index:10}.message-box-container{flex:1;overflow-y:auto;scroll-behavior:smooth}:where(.message-box-container>: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))}.message-box-loading{color:var(--color-gray-400);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));text-align:center}.message-box-loading-icon{animation:var(--animate-spin);height:calc(var(--spacing)*5);margin-inline:auto;width:calc(var(--spacing)*5)}.message-box-time-wrapper{margin-block:calc(var(--spacing)*2);text-align:center}.message-box-time{border-radius:var(--radius-xl);color:var(--color-theme-gray);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));padding-block:calc(var(--spacing)*1);padding-inline:calc(var(--spacing)*2)}.message-box-scroll-to-bottom{--tw-translate-x:-50%;left:50%;opacity:.5;position:absolute;translate:var(--tw-translate-x)var(--tw-translate-y)}.message-box-token-wrapper{border-radius:var(--radius-2xl);padding-block:calc(var(--spacing)*2);padding-inline:calc(var(--spacing)*4);pointer-events:none;white-space:nowrap;width:fit-content;z-index:10}.message-box-new-message,.message-box-token-wrapper{--tw-translate-x:-50%;background-color:var(--color-primary);color:var(--color-white);left:50%;position:absolute;translate:var(--tw-translate-x)var(--tw-translate-y)}.message-box-new-message{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));opacity:.7;padding:calc(var(--spacing)*2);width:100%;z-index:1}.message-box-new-message-link{cursor:pointer;text-decoration-line:underline}@property --tw-space-y-reverse{syntax:\"*\";inherits:false;initial-value:0}@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}@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,)}.hover\\:opacity-90:hover{opacity:.9}.hover\\:bg-primary\\/10:hover{background-color:#e028481a}@supports (color:color-mix(in lab,red,red)){.hover\\:bg-primary\\/10:hover{background-color:color-mix(in srgb,#e0284810%,transparent);background-color:color-mix(in oklab,var(--color-primary)10%,transparent)}}.hover\\:text-primary:hover{color:var(--color-primary)}.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}.hover\\:bg-surface\\/10:hover{background-color:#0000001a}@supports (color:color-mix(in lab,red,red)){.hover\\:bg-surface\\/10:hover{background-color:color-mix(in srgb,#00010%,transparent);background-color:color-mix(in oklab,var(--color-surface)10%,transparent)}}.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 MessageBox = /*@__PURE__*/ proxyCustomElement(class MessageBox extends H {
     constructor(registerHost) {

package/dist/components/message-box2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"message-box2.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/message-box/message-box.css?tag=message-box","src/components/message-box/message-box.tsx"],"sourcesContent":[":host {\n display: block;\n contain: content; /* Isolates layout, style, and paint for better performance /\n}\n\n.message-box-wrapper {\n @apply flex flex-col;\n}\n\n.message-box-no-selected-chat-box {\n @apply text-primary my-auto grid place-content-center text-center;\n}\n\n.message-box-syncing-message {\n @apply pointer-events-none z-10 mx-auto mt-4 flex w-fit flex-col gap-2;\n}\n\n.message-box-container {\n @apply flex-1 space-y-2 overflow-y-auto scroll-smooth;\n}\n\n.message-box-loading {\n @apply text-center text-sm text-gray-400;\n}\n\n.message-box-loading-icon {\n @apply mx-auto size-5 animate-spin;\n}\n\n.message-box-time-wrapper {\n @apply my-2 text-center;\n}\n\n.message-box-time {\n @apply text-theme-gray rounded-xl px-2 py-1 text-sm;\n}\n\n.message-box-scroll-to-bottom {\n @apply absolute left-1/2 -translate-x-1/2 opacity-50;\n}\n\n.message-box-token-wrapper {\n @apply bg-primary pointer-events-none absolute left-1/2 z-10 w-fit -translate-x-1/2 rounded-2xl px-4 py-2 whitespace-nowrap text-white;\n}\n\n.message-box-new-message {\n @apply bg-primary absolute left-1/2 z-1 w-full -translate-x-1/2 p-2 text-sm text-white opacity-70;\n}\n\n.message-box-new-message-link {\n @apply cursor-pointer underline;\n}\n","import { Component, Host, State, h, Event, EventEmitter, Element, Listen } from '@stencil/core';\nimport { chatsStore, configStore, messagesStore, selectedChatStore } from '../../store/store';\nimport { useTranslation } from '../../utils/utils';\nimport { Icon } from '../internal-component/icon';\nimport { initSocket, joinRoom, leaveRoom } from '../../utils/socket';\nimport { ChannelType, ChatMessageItem, ChatRead, TChatItem } from '../../store/type';\nimport {\n getOrFetchTranslation,\n handleGetChatMessages,\n handleMapReadMessage,\n serviceReadMessage,\n initDB,\n serviceUpdateChatItem,\n serviceUpdateMessageItems,\n} from '../../store/message';\nimport { getReplyTokenInfo } from '../../api';\nimport { GetReplyTokenInfoResponse } from '../../api/type';\nimport { groupBy } from '../../utils/helpers';\nimport { displayLongDate } from '../../utils/dayjs';\nimport { ZButton } from '../internal-component/z-button';\nimport dayjs from 'dayjs';\nimport { ZIconButton } from '../internal-component/z-icon-button';\nimport { handleError } from '../../store/dialog';\n\n@Component({\n tag: 'message-box',\n styleUrl: 'message-box.css',\n})\nexport class MessageBox {\n @Element() hostElement!: HTMLElement;\n\n private disposeListener: () => void;\n private disposeReadsMapListener: () => void;\n private replyTokenTimer?: number;\n private contentObserver?: MutationObserver;\n\n @Event({ bubbles: true, composed: true }) focusRequested!: EventEmitter;\n\n @Listen('click')\n handleClick() {\n this.handleReadMessage();\n }\n\n @State() isInitial = false;\n @State() isLoadingTop = false;\n @State() isLoadingBottom = false;\n @State() isAtBottom: boolean = true;\n @State() replyTokenInfo: GetReplyTokenInfoResponse \| null = null;\n @State() showReplyTokenBanner: boolean = false;\n @State() numberOfNewMessages: number = 0;\n private scrollContainer?: HTMLDivElement;\n private prevSelectedChat: TChatItem \| null = null;\n private replyTokenSpan?: HTMLSpanElement;\n private lastScrollTop: number = 0;\n private scrollDirection: 'up' \| 'down' \| null = null;\n\n // Memoization cache for grouped messages\n private cachedGroupedMessages: Record<string, ChatMessageItem[]> \| null = null;\n private cachedMessagesLength: number = 0;\n private cachedMessageIds: string = '';\n\n // Enable virtual scrolling to reduce DOM nodes for large message lists\n private readonly ENABLE_VIRTUAL_SCROLLING = true;\n @State() private visibleRange: { start: number; end: number } = { start: 0, end: 0 };\n private readonly BUFFER_SIZE = 3; // Extra items to render above/below viewport (reduced from 5 for optimal performance)\n private readonly ESTIMATED_ITEM_HEIGHT = 72; // Average message height in pixels\n private readonly VIRTUAL_SCROLL_THRESHOLD = 30; // Only use virtual scrolling when > 30 messages (reduced from 150 for better performance)\n\n /\n Calculate which messages should be visible based on scroll position\n * Virtual scrolling: Only render messages in viewport + buffer\n /\n private updateVisibleRange(scrollTop: number, clientHeight: number, totalMessages: 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(totalMessages, viewportEnd + this.BUFFER_SIZE);\n\n // Only update if range changed significantly (avoid unnecessary re-renders)\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 Get only visible messages from grouped messages\n * Reduces DOM nodes by only rendering what's in viewport\n /\n private getVisibleGroupedMessages(groupedByDate: Record<string, ChatMessageItem[]>): Record<string, ChatMessageItem[]> {\n const { start, end } = this.visibleRange;\n // eslint-disable-next-line no-unused-vars\n const allMessages = Object.entries(groupedByDate).flatMap(([_, items]) => items);\n const visibleMessages = allMessages.slice(start, end);\n\n // Re-group visible messages by date\n const visibleGrouped: Record<string, ChatMessageItem[]> = {};\n for (const message of visibleMessages) {\n const date = displayLongDate(message.message_at);\n if (!visibleGrouped[date]) {\n visibleGrouped[date] = [];\n }\n visibleGrouped[date].push(message);\n }\n\n return visibleGrouped;\n }\n\n /\n Memoized message grouping - only recalculates when messages actually change\n * Performance: Reduces 60fps operations to ~1-5 per second (when messages update)\n /\n private getGroupedMessages(messages: ChatMessageItem[]): Record<string, ChatMessageItem[]> {\n // Quick check: If length hasn't changed and IDs match, return cached\n const messageIds = messages.map(m => m.id).join(',');\n\n if (this.cachedGroupedMessages && messages.length === this.cachedMessagesLength && messageIds === this.cachedMessageIds) {\n return this.cachedGroupedMessages;\n }\n\n // Recalculate: Sort and group messages\n const sorted = [...messages].sort((a, b) => (dayjs(a.message_at).isBefore(dayjs(b.message_at)) ? -1 : 1));\n\n const grouped = groupBy(sorted, item => displayLongDate(item.message_at));\n\n // Update cache\n this.cachedGroupedMessages = grouped;\n this.cachedMessagesLength = messages.length;\n this.cachedMessageIds = messageIds;\n\n return grouped;\n }\n\n componentDidLoad() {\n initDB();\n this.scrollToBottom();\n this.setupContentObserver();\n }\n\n private setupContentObserver() {\n if (!this.scrollContainer) return;\n\n this.contentObserver = new MutationObserver(() => {\n if (!this.scrollContainer) return;\n\n const { scrollTop, scrollHeight, clientHeight } = this.scrollContainer;\n const isAtBottom = Math.floor(scrollTop) + Math.floor(clientHeight) >= Math.ceil(scrollHeight);\n\n if (this.isAtBottom !== isAtBottom) {\n this.isAtBottom = isAtBottom;\n }\n\n if (isAtBottom) {\n this.scrollToBottom();\n }\n });\n\n this.contentObserver.observe(this.scrollContainer, {\n childList: true,\n subtree: true,\n });\n }\n\n private handleReadMessage = async () => {\n const selectedChat = selectedChatStore.get('selectedChat');\n if (!selectedChat) return;\n const matchChat = chatsStore.get('chats').find(item => item.id === selectedChat.id);\n if (!matchChat) return;\n if (matchChat.unread_count > 0) {\n await serviceReadMessage(selectedChat.id);\n }\n };\n\n private scrollToBottom(isSmooth?: boolean) {\n if (this.scrollContainer) {\n setTimeout(() => {\n this.scrollContainer.scrollTo({\n top: this.scrollContainer.scrollHeight,\n behavior: isSmooth ? 'smooth' : 'instant',\n });\n }, 100);\n }\n }\n\n private async fetchReplyTokenInfo(sessionId: string, channel: ChannelType) {\n if (channel !== 'line') return;\n try {\n const info = await getReplyTokenInfo({ sessionId });\n this.replyTokenInfo = info;\n this.startReplyTokenTimer();\n } catch (error: unknown) {\n handleError(error, 'Failed to get reply token info');\n }\n }\n\n // private async handleSetChatLanguage(sessionId: string, newChat: TChatItem, newLanguage: string) {\n // const language = newLanguage;\n // const { code } = await updateChat({ sessionId, language })\n // if (code === 'chat-updated') {\n // const readChats = chatsStore.get('chats').map((chat) => {\n // if (chat.id === sessionId) {\n // return { ...chat, language };\n // }\n // return chat;\n // })\n\n // chatsStore.set('chats', readChats);\n // selectedChatStore.set('selectedChat', { ...newChat, language });\n // }\n // }\n\n private handleSocketEvents() {\n const socket = initSocket();\n const selectedChat = selectedChatStore.get('selectedChat');\n const chatId = selectedChat.id;\n joinRoom(chatId);\n\n socket.on('message', async (message: ChatMessageItem) => {\n try {\n const messageId = message.id;\n const existChatIdx = messagesStore.get('messages').findIndex(item => item.id === messageId);\n if (existChatIdx !== -1) return;\n\n let translatedMessage = message;\n const translationSettings = configStore.get('translationSettings');\n if (\n translationSettings.is_auto &&\n selectedChat.language !== translationSettings.target_language &&\n !translationSettings.exclude_languages.includes(selectedChat.language)\n ) {\n if (message.text) {\n const translatedResponse = await getOrFetchTranslation({\n chat_id: chatId,\n message_ids: [messageId],\n });\n\n translatedMessage = {\n ...message,\n translatedText: (translatedResponse ? translatedResponse.text : undefined) \|\| message.translatedText,\n };\n } else {\n translatedMessage = message;\n }\n }\n\n serviceUpdateMessageItems({ updateMessages: [translatedMessage], clearSending: true });\n\n if (message.sender.type !== 'admin') {\n this.numberOfNewMessages += 1;\n }\n\n this.fetchReplyTokenInfo(chatId, selectedChat.channel);\n } catch (error: unknown) {\n handleError(error, 'Failed to process message from socket');\n }\n });\n\n socket.on('read', (chatRead: ChatRead) => {\n try {\n if (chatRead) {\n const chatId = chatRead.id;\n\n serviceUpdateChatItem({\n chatId,\n updateValue: {\n unread_count: 0,\n updated_at: chatRead.read_at,\n },\n });\n\n const reads = messagesStore.get('reads');\n const readIndex = reads.findIndex(item => item.id === chatId);\n if (readIndex !== -1) {\n reads[readIndex] = chatRead;\n } else {\n reads.push(chatRead);\n }\n\n messagesStore.set('reads', reads);\n handleMapReadMessage();\n }\n } catch (error: unknown) {\n handleError(error, 'Failed to process read message event');\n }\n });\n\n // Deprecate backend will check and update automatically\n // socket.on('language', (detectedLanguage: { language?: string }) => {\n // this.handleSetChatLanguage(chatId, selectedChat, detectedLanguage.language)\n // });\n }\n\n private handleResetMessageCache = () => {\n messagesStore.reset();\n this.prevSelectedChat = null;\n // Clear render immediately\n this.cachedGroupedMessages = null;\n this.cachedMessagesLength = 0;\n this.cachedMessageIds = '';\n this.visibleRange = { start: 0, end: 0 };\n }\n\n async componentWillLoad() {\n this.disposeReadsMapListener = messagesStore.onChange('readsMap', () => {\n if (this.isAtBottom) {\n this.scrollToBottom();\n }\n });\n\n this.disposeListener = selectedChatStore.onChange('selectedChat', async newChat => {\n if (!newChat) {\n this.handleResetMessageCache();\n return;\n }\n\n const sessionId = newChat.id;\n const prevSessionId = this.prevSelectedChat ? this.prevSelectedChat.id : '';\n\n if (sessionId !== prevSessionId) {\n // IMPORTANT: Clear everything FIRST to remove old DOM nodes immediately\n this.handleResetMessageCache();\n\n selectedChatStore.set('isSyncingMessage', false);\n selectedChatStore.set('isSyncingTag', false);\n\n // reset reply token info when switching chats\n if (this.replyTokenTimer) window.clearInterval(this.replyTokenTimer);\n this.replyTokenInfo = null;\n this.showReplyTokenBanner = false;\n\n // if (newChat.language === null) {\n // await this.handleSetChatLanguage(sessionId, newChat, configStore.get('translationSettings').target_language)\n // }\n\n await this.loadMessages({});\n\n // After messages loaded, clamp visibleRange to the most recent chunk when using virtual scroll.\n const messages = messagesStore.get('messages');\n const total = messages.length;\n if (this.ENABLE_VIRTUAL_SCROLLING && total > this.VIRTUAL_SCROLL_THRESHOLD) {\n const CHUNK = 50; // number of recent messages to render initially (reduced from 200 for faster initial render)\n const start = Math.max(0, total - CHUNK);\n this.visibleRange = { start, end: total };\n } else {\n this.visibleRange = { start: 0, end: Math.max(50, total) };\n }\n\n this.prevSelectedChat = newChat;\n this.focusRequested.emit();\n\n await this.fetchReplyTokenInfo(sessionId, newChat.channel);\n\n this.isInitial = true;\n this.scrollToBottom();\n\n if (this.contentObserver) {\n this.contentObserver.disconnect();\n }\n this.setupContentObserver();\n\n this.handleSocketEvents();\n }\n\n //Always read message when click\n // if (newChat.unread_count > 0) {\n // await serviceReadMessage(sessionId);\n // }\n });\n }\n\n disconnectedCallback() {\n if (this.disposeListener) this.disposeListener();\n if (this.disposeReadsMapListener) this.disposeReadsMapListener();\n if (this.replyTokenTimer) window.clearInterval(this.replyTokenTimer);\n if (this.contentObserver) {\n this.contentObserver.disconnect();\n this.contentObserver = undefined;\n }\n const selectedChat = selectedChatStore.get('selectedChat');\n if (selectedChat) {\n leaveRoom(selectedChat.id);\n }\n }\n\n private updateReplyTokenRemainingDOM() {\n if (!(this.replyTokenInfo && this.replyTokenInfo.expired_at)) return;\n const now = new Date();\n const expiredAt = new Date(this.replyTokenInfo.expired_at);\n const diffMs = expiredAt.getTime() - now.getTime();\n\n if (diffMs <= 0) {\n if (this.replyTokenTimer) window.clearInterval(this.replyTokenTimer);\n this.replyTokenInfo = null; // reset when expired\n this.showReplyTokenBanner = false;\n return;\n }\n\n const totalSeconds = Math.floor(diffMs / 1000);\n const minutes = Math.floor(totalSeconds / 60);\n const seconds = totalSeconds % 60;\n const minutesStr = minutes.toString().padStart(2, '0');\n const secondsStr = seconds.toString().padStart(2, '0');\n const remaining = `${minutesStr}:${secondsStr}`;\n if (this.replyTokenSpan) {\n this.replyTokenSpan.textContent = remaining;\n }\n }\n\n private startReplyTokenTimer() {\n if (!this.replyTokenInfo) return;\n if (this.replyTokenTimer) window.clearInterval(this.replyTokenTimer);\n this.showReplyTokenBanner = (this.replyTokenInfo.total \|\| 0) > 0;\n // prime the DOM value once and then tick\n requestAnimationFrame(() => this.updateReplyTokenRemainingDOM());\n this.replyTokenTimer = window.setInterval(() => this.updateReplyTokenRemainingDOM(), 1000);\n }\n\n private async loadMessages({ startMessageId, next, prev, isNewer = false }: { startMessageId?: string; next?: string; prev?: string; isNewer?: boolean }) {\n if (this.isLoadingTop \|\| this.isLoadingBottom) return;\n\n try {\n if (prev) {\n this.isLoadingBottom = true;\n } else {\n this.isLoadingTop = true;\n }\n\n await handleGetChatMessages({\n startMessageId,\n next,\n prev,\n isNewer,\n });\n } catch (error: unknown) {\n handleError(error, 'Failed to load chat messages');\n } finally {\n if (prev) {\n this.isLoadingBottom = false;\n } else {\n this.isLoadingTop = false;\n }\n }\n }\n\n private handleScroll = async () => {\n const element = this.scrollContainer;\n if (!element) return;\n\n const threshold = 100;\n const { scrollTop, scrollHeight, clientHeight } = element;\n\n // Update visible range for virtual scrolling\n const totalMessages = messagesStore.get('messages').length;\n this.updateVisibleRange(scrollTop, clientHeight, totalMessages);\n\n //Detect scroll direction\n if (scrollTop > this.lastScrollTop) {\n this.scrollDirection = 'down';\n } else if (scrollTop < this.lastScrollTop) {\n this.scrollDirection = 'up';\n }\n this.lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;\n\n //Check bottom\n this.isAtBottom = (Math.floor(scrollTop) + Math.floor(clientHeight)) >= (Math.ceil(scrollHeight) - threshold);\n if (this.isAtBottom) {\n this.numberOfNewMessages = 0;\n return;\n }\n\n const jumpMessageId = messagesStore.get('jumpMessageId');\n const olderMessages = messagesStore.get('older');\n const newerMessages = messagesStore.get('newer');\n\n //Is Scroll up and Near top → Load older messages\n if (this.scrollDirection === 'up') {\n const olderNextKey = olderMessages ? olderMessages.next : null;\n const isNearTop = scrollTop < threshold;\n if (isNearTop && olderNextKey && !jumpMessageId) {\n await this.loadMessages({ next: olderNextKey });\n return;\n }\n }\n\n //Is Scroll down and Near bottom → Load newer messages\n if (this.scrollDirection === 'down') {\n const prevKey = newerMessages ? newerMessages.prev : null;\n const olderPrevKey = olderMessages ? olderMessages.prev : null;\n const isNearBottom = scrollTop + clientHeight > scrollHeight - threshold;\n if (isNearBottom && (prevKey \|\| olderPrevKey) && !jumpMessageId) {\n await this.loadMessages({ prev: prevKey \|\| olderPrevKey, isNewer: true });\n return;\n }\n }\n };\n\n private goToLastMessage() {\n this.numberOfNewMessages = 0;\n this.scrollToBottom(true)\n }\n\n render() {\n const t = useTranslation();\n const messages = messagesStore.get('messages');\n const selectedChat = selectedChatStore.get('selectedChat');\n const isNotConnected = configStore.get('isNotConnected');\n const isZwiz = configStore.get('isZwiz');\n // Use memoized grouping - only recalculates when messages change\n const groupedByDate = this.getGroupedMessages(messages);\n\n // Virtual scrolling - only enabled if flag is true and message count exceeds threshold\n const useVirtualScrolling = this.ENABLE_VIRTUAL_SCROLLING && messages.length > this.VIRTUAL_SCROLL_THRESHOLD;\n const visibleGroupedByDate = useVirtualScrolling ? this.getVisibleGroupedMessages(groupedByDate) : groupedByDate;\n\n const isReplyTokenInfo = this.showReplyTokenBanner;\n\n // Calculate spacer heights for virtual scrolling (only if enabled)\n const { start, end } = this.visibleRange;\n const topSpacerHeight = useVirtualScrolling ? start this.ESTIMATED_ITEM_HEIGHT : 0;\n const bottomSpacerHeight = useVirtualScrolling ? Math.max(0, (messages.length - end) * this.ESTIMATED_ITEM_HEIGHT) : 0;\n\n return (\n <Host>\n {selectedChat === null ? (\n <div class={`message-box-wrapper ${isZwiz ? 'z-zwiz-max-height' : 'z-max-height'}`}>\n <div class=\"message-box-no-selected-chat-box\">\n <div class=\"mx-auto\">\n <Icon name=\"MessageSquareText\" addClass=\"size-18\" />\n </div>\n {isNotConnected ? t('chat_tab.you_not_connect_chat') : t('chat_tab.please_choose_chat_to_reply')}\n {isNotConnected && <ZButton startIcon={<Icon name=\"Plus\" />} label={t('chat_tab.add_connection')} id=\"connect-channel\" />}\n </div>\n </div>\n ) : (\n <div class={`message-box-wrapper ${isZwiz ? 'z-zwiz-max-height' : 'z-max-height'}`}>\n <chat-header />\n {(selectedChatStore.get('isSyncingMessage') \|\| selectedChatStore.get('isSyncingTag')) && (\n <div class=\"message-box-syncing-message\">\n {selectedChatStore.get('isSyncingMessage') && <status-badge status=\"loading\" label={t('chat_tab.syncing_message')} />}\n {selectedChatStore.get('isSyncingTag') && <status-badge status=\"loading\" label={t('chat_tab.syncing_tag')} />}\n </div>\n )}\n <div class=\"relative\">\n {!this.isAtBottom &&\n this.numberOfNewMessages > 0 &&\n <div class=\"message-box-new-message\">\n {t('you_have_new_message')} <span class=\"message-box-new-message-link\" onClick={() => this.goToLastMessage()}>{t('go_to_last_message')}</span>\n </div>\n }\n </div>\n <div\n class={`message-box-container scroll-container ${isReplyTokenInfo ? 'pb-8 pt-4 px-4' : 'p-4'}`}\n id={`message-box-${selectedChat.id}`}\n ref={el => (this.scrollContainer = el)}\n onScroll={this.handleScroll}\n >\n {this.isLoadingTop && (\n <div id=\"loading-top\" class=\"message-box-loading mb-10\">\n <Icon name=\"LoaderCircle\" addClass=\"message-box-loading-icon\" />\n </div>\n )}\n {/* Top spacer for virtual scrolling /}\n {topSpacerHeight > 0 && <div style={{ height: `${topSpacerHeight}px` }} />}\n\n {/ Render only visible messages /}\n {Object.entries(visibleGroupedByDate).map(([date, items]) => [\n <div key={`time-${date}`} class=\"message-box-time-wrapper\">\n <span class=\"message-box-time bg-time-badge\">\n {dayjs().tz().format('DD MMM YYYY') === date ? t('today') : date}\n </span>\n </div>,\n ...items.map(item => (\n <message-item key={item.id} item={item} />\n ))\n ])}\n\n {/ Bottom spacer for virtual scrolling */}\n {bottomSpacerHeight > 0 && <div style={{ height: `${bottomSpacerHeight}px` }} />}\n\n {this.isLoadingBottom && (\n <div id=\"loading-bottom\" class=\"message-box-loading mt-10\">\n <Icon name=\"LoaderCircle\" addClass=\"message-box-loading-icon\" />\n </div>\n )}\n </div>\n <div class=\"relative\">\n {!this.isAtBottom && (\n <div class={`message-box-scroll-to-bottom ${isReplyTokenInfo ? '-top-24' : '-top-12'}`}>\n <ZIconButton iconName=\"ArrowDown\" onClick={() => this.goToLastMessage()} />\n </div>\n )}\n {isReplyTokenInfo &&\n (() => {\n const template = t('chat_tab.reply_token_info');\n const totalStr = String(this.replyTokenInfo ? this.replyTokenInfo.total : 0);\n const replacedTotal = template.replace('{total}', totalStr);\n const parts = replacedTotal.split('{remaining}');\n const before = parts[0] \|\| '';\n const after = parts[1] \|\| '';\n return (\n <div\n class=\"message-box-token-wrapper\"\n style={{ bottom: 'calc(100% + 8px)' }}\n >\n <span>{before}</span>\n <span\n ref={el => {\n this.replyTokenSpan = el;\n this.updateReplyTokenRemainingDOM();\n }}\n style={{ minWidth: '4ch', display: 'inline-block', textAlign: 'center' }}\n ></span>\n <span>{after}</span>\n </div>\n );\n })()}\n <chat-input />\n </div>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"message-box2.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/message-box/message-box.css?tag=message-box","src/components/message-box/message-box.tsx"],"sourcesContent":[":host {\n display: block;\n contain: content; /* Isolates layout, style, and paint for better performance /\n}\n\n.message-box-wrapper {\n @apply flex flex-col;\n}\n\n.message-box-no-selected-chat-box {\n @apply text-primary my-auto grid place-content-center text-center;\n}\n\n.message-box-syncing-message {\n @apply pointer-events-none z-10 mx-auto mt-4 flex w-fit flex-col gap-2;\n}\n\n.message-box-container {\n @apply flex-1 space-y-2 overflow-y-auto scroll-smooth;\n}\n\n.message-box-loading {\n @apply text-center text-sm text-gray-400;\n}\n\n.message-box-loading-icon {\n @apply mx-auto size-5 animate-spin;\n}\n\n.message-box-time-wrapper {\n @apply my-2 text-center;\n}\n\n.message-box-time {\n @apply text-theme-gray rounded-xl px-2 py-1 text-sm;\n}\n\n.message-box-scroll-to-bottom {\n @apply absolute left-1/2 -translate-x-1/2 opacity-50;\n}\n\n.message-box-token-wrapper {\n @apply bg-primary pointer-events-none absolute left-1/2 z-10 w-fit -translate-x-1/2 rounded-2xl px-4 py-2 whitespace-nowrap text-white;\n}\n\n.message-box-new-message {\n @apply bg-primary absolute left-1/2 z-1 w-full -translate-x-1/2 p-2 text-sm text-white opacity-70;\n}\n\n.message-box-new-message-link {\n @apply cursor-pointer underline;\n}\n","import { Component, Host, State, h, Event, EventEmitter, Element, Listen } from '@stencil/core';\nimport { chatsStore, configStore, messagesStore, selectedChatStore } from '../../store/store';\nimport { useTranslation } from '../../utils/utils';\nimport { Icon } from '../internal-component/icon';\nimport { initSocket, joinRoom, leaveRoom } from '../../utils/socket';\nimport { ChannelType, ChatMessageItem, ChatRead, TChatItem } from '../../store/type';\nimport {\n getOrFetchTranslation,\n handleGetChatMessages,\n handleMapReadMessage,\n serviceReadMessage,\n initDB,\n serviceUpdateChatItem,\n serviceUpdateMessageItems,\n} from '../../store/message';\nimport { getReplyTokenInfo } from '../../api';\nimport { GetReplyTokenInfoResponse } from '../../api/type';\nimport { groupBy } from '../../utils/helpers';\nimport { displayLongDate } from '../../utils/dayjs';\nimport { ZButton } from '../internal-component/z-button';\nimport dayjs from 'dayjs';\nimport { ZIconButton } from '../internal-component/z-icon-button';\nimport { handleError } from '../../store/dialog';\n\n@Component({\n tag: 'message-box',\n styleUrl: 'message-box.css',\n})\nexport class MessageBox {\n @Element() hostElement!: HTMLElement;\n\n private disposeListener: () => void;\n private disposeReadsMapListener: () => void;\n private replyTokenTimer?: number;\n private contentObserver?: MutationObserver;\n\n @Event({ bubbles: true, composed: true }) focusRequested!: EventEmitter;\n\n @Listen('click')\n handleClick() {\n this.handleReadMessage();\n }\n\n @State() isInitial = false;\n @State() isLoadingTop = false;\n @State() isLoadingBottom = false;\n @State() isAtBottom: boolean = true;\n @State() replyTokenInfo: GetReplyTokenInfoResponse \| null = null;\n @State() showReplyTokenBanner: boolean = false;\n @State() numberOfNewMessages: number = 0;\n private scrollContainer?: HTMLDivElement;\n private prevSelectedChat: TChatItem \| null = null;\n private replyTokenSpan?: HTMLSpanElement;\n private lastScrollTop: number = 0;\n private scrollDirection: 'up' \| 'down' \| null = null;\n\n // Memoization cache for grouped messages\n private cachedGroupedMessages: Record<string, ChatMessageItem[]> \| null = null;\n private cachedMessagesLength: number = 0;\n private cachedMessageIds: string = '';\n\n // Enable virtual scrolling to reduce DOM nodes for large message lists\n private readonly ENABLE_VIRTUAL_SCROLLING = true;\n @State() private visibleRange: { start: number; end: number } = { start: 0, end: 0 };\n private readonly BUFFER_SIZE = 3; // Extra items to render above/below viewport (reduced from 5 for optimal performance)\n private readonly ESTIMATED_ITEM_HEIGHT = 72; // Average message height in pixels\n private readonly VIRTUAL_SCROLL_THRESHOLD = 30; // Only use virtual scrolling when > 30 messages (reduced from 150 for better performance)\n\n /\n Calculate which messages should be visible based on scroll position\n * Virtual scrolling: Only render messages in viewport + buffer\n /\n private updateVisibleRange(scrollTop: number, clientHeight: number, totalMessages: 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(totalMessages, viewportEnd + this.BUFFER_SIZE);\n\n // Only update if range changed significantly (avoid unnecessary re-renders)\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 Get only visible messages from grouped messages\n * Reduces DOM nodes by only rendering what's in viewport\n /\n private getVisibleGroupedMessages(groupedByDate: Record<string, ChatMessageItem[]>): Record<string, ChatMessageItem[]> {\n const { start, end } = this.visibleRange;\n // eslint-disable-next-line no-unused-vars\n const allMessages = Object.entries(groupedByDate).flatMap(([_, items]) => items);\n const visibleMessages = allMessages.slice(start, end);\n\n // Re-group visible messages by date\n const visibleGrouped: Record<string, ChatMessageItem[]> = {};\n for (const message of visibleMessages) {\n const date = displayLongDate(message.message_at);\n if (!visibleGrouped[date]) {\n visibleGrouped[date] = [];\n }\n visibleGrouped[date].push(message);\n }\n\n return visibleGrouped;\n }\n\n /\n Memoized message grouping - only recalculates when messages actually change\n * Performance: Reduces 60fps operations to ~1-5 per second (when messages update)\n /\n private getGroupedMessages(messages: ChatMessageItem[]): Record<string, ChatMessageItem[]> {\n // Quick check: If length hasn't changed and IDs match, return cached\n const messageIds = messages.map(m => m.id).join(',');\n\n if (this.cachedGroupedMessages && messages.length === this.cachedMessagesLength && messageIds === this.cachedMessageIds) {\n return this.cachedGroupedMessages;\n }\n\n // Recalculate: Sort and group messages\n const sorted = [...messages].sort((a, b) => (dayjs(a.message_at).isBefore(dayjs(b.message_at)) ? -1 : 1));\n\n const grouped = groupBy(sorted, item => displayLongDate(item.message_at));\n\n // Update cache\n this.cachedGroupedMessages = grouped;\n this.cachedMessagesLength = messages.length;\n this.cachedMessageIds = messageIds;\n\n return grouped;\n }\n\n componentDidLoad() {\n initDB();\n this.scrollToBottom();\n this.setupContentObserver();\n }\n\n private setupContentObserver() {\n if (!this.scrollContainer) return;\n\n this.contentObserver = new MutationObserver(() => {\n if (!this.scrollContainer) return;\n\n const { scrollTop, scrollHeight, clientHeight } = this.scrollContainer;\n const isAtBottom = Math.floor(scrollTop) + Math.floor(clientHeight) >= Math.ceil(scrollHeight);\n\n if (this.isAtBottom !== isAtBottom) {\n this.isAtBottom = isAtBottom;\n }\n\n if (isAtBottom) {\n this.scrollToBottom();\n }\n });\n\n this.contentObserver.observe(this.scrollContainer, {\n childList: true,\n subtree: true,\n });\n }\n\n private handleReadMessage = async () => {\n const selectedChat = selectedChatStore.get('selectedChat');\n if (!selectedChat) return;\n const matchChat = chatsStore.get('chats').find(item => item.id === selectedChat.id);\n if (!matchChat) return;\n if (matchChat.unread_count > 0) {\n await serviceReadMessage(selectedChat.id);\n }\n };\n\n private scrollToBottom(isSmooth?: boolean) {\n if (this.scrollContainer) {\n setTimeout(() => {\n this.scrollContainer.scrollTo({\n top: this.scrollContainer.scrollHeight,\n behavior: isSmooth ? 'smooth' : 'instant',\n });\n }, 100);\n }\n }\n\n private async fetchReplyTokenInfo(sessionId: string, channel: ChannelType) {\n if (channel !== 'line') return;\n try {\n const info = await getReplyTokenInfo({ sessionId });\n this.replyTokenInfo = info;\n this.startReplyTokenTimer();\n } catch (error: unknown) {\n handleError(error, 'Failed to get reply token info');\n }\n }\n\n // private async handleSetChatLanguage(sessionId: string, newChat: TChatItem, newLanguage: string) {\n // const language = newLanguage;\n // const { code } = await updateChat({ sessionId, language })\n // if (code === 'chat-updated') {\n // const readChats = chatsStore.get('chats').map((chat) => {\n // if (chat.id === sessionId) {\n // return { ...chat, language };\n // }\n // return chat;\n // })\n\n // chatsStore.set('chats', readChats);\n // selectedChatStore.set('selectedChat', { ...newChat, language });\n // }\n // }\n\n private handleSocketEvents() {\n const socket = initSocket();\n const selectedChat = selectedChatStore.get('selectedChat');\n const chatId = selectedChat.id;\n joinRoom(chatId);\n\n socket.on('message', async (message: ChatMessageItem) => {\n try {\n const messageId = message.id;\n const existChatIdx = messagesStore.get('messages').findIndex(item => item.id === messageId);\n if (existChatIdx !== -1) return;\n\n let translatedMessage = message;\n const translationSettings = configStore.get('translationSettings');\n if (\n translationSettings.is_auto &&\n selectedChat.language !== translationSettings.target_language &&\n !translationSettings.exclude_languages.includes(selectedChat.language)\n ) {\n if (message.text) {\n const translatedResponse = await getOrFetchTranslation({\n chat_id: chatId,\n message_ids: [messageId],\n });\n\n translatedMessage = {\n ...message,\n translatedText: (translatedResponse ? translatedResponse.text : undefined) \|\| message.translatedText,\n };\n } else {\n translatedMessage = message;\n }\n }\n\n serviceUpdateMessageItems({ updateMessages: [translatedMessage], clearSending: true });\n\n if (message.sender.type !== 'admin') {\n this.numberOfNewMessages += 1;\n }\n\n this.fetchReplyTokenInfo(chatId, selectedChat.channel);\n } catch (error: unknown) {\n handleError(error, 'Failed to process message from socket');\n }\n });\n\n socket.on('read', (chatRead: ChatRead) => {\n try {\n if (chatRead) {\n const chatId = chatRead.id;\n\n serviceUpdateChatItem({\n chatId,\n updateValue: {\n unread_count: 0,\n updated_at: chatRead.read_at,\n },\n });\n\n const reads = messagesStore.get('reads');\n const readIndex = reads.findIndex(item => item.id === chatId);\n if (readIndex !== -1) {\n reads[readIndex] = chatRead;\n } else {\n reads.push(chatRead);\n }\n\n messagesStore.set('reads', reads);\n handleMapReadMessage();\n }\n } catch (error: unknown) {\n handleError(error, 'Failed to process read message event');\n }\n });\n\n // Deprecate backend will check and update automatically\n // socket.on('language', (detectedLanguage: { language?: string }) => {\n // this.handleSetChatLanguage(chatId, selectedChat, detectedLanguage.language)\n // });\n }\n\n private handleResetMessageCache = () => {\n messagesStore.reset();\n this.prevSelectedChat = null;\n // Clear render immediately\n this.cachedGroupedMessages = null;\n this.cachedMessagesLength = 0;\n this.cachedMessageIds = '';\n this.visibleRange = { start: 0, end: 0 };\n }\n\n async componentWillLoad() {\n this.disposeReadsMapListener = messagesStore.onChange('readsMap', () => {\n if (this.isAtBottom) {\n this.scrollToBottom();\n }\n });\n\n this.disposeListener = selectedChatStore.onChange('selectedChat', async newChat => {\n if (!newChat) {\n this.handleResetMessageCache();\n return;\n }\n\n const sessionId = newChat.id;\n const prevSessionId = this.prevSelectedChat ? this.prevSelectedChat.id : '';\n\n if (sessionId !== prevSessionId) {\n // IMPORTANT: Clear everything FIRST to remove old DOM nodes immediately\n this.handleResetMessageCache();\n\n selectedChatStore.set('isSyncingMessage', false);\n selectedChatStore.set('isSyncingTag', false);\n\n // reset reply token info when switching chats\n if (this.replyTokenTimer) window.clearInterval(this.replyTokenTimer);\n this.replyTokenInfo = null;\n this.showReplyTokenBanner = false;\n\n // if (newChat.language === null) {\n // await this.handleSetChatLanguage(sessionId, newChat, configStore.get('translationSettings').target_language)\n // }\n\n await this.loadMessages({});\n\n // After messages loaded, clamp visibleRange to the most recent chunk when using virtual scroll.\n const messages = messagesStore.get('messages');\n const total = messages.length;\n if (this.ENABLE_VIRTUAL_SCROLLING && total > this.VIRTUAL_SCROLL_THRESHOLD) {\n const CHUNK = 50; // number of recent messages to render initially (reduced from 200 for faster initial render)\n const start = Math.max(0, total - CHUNK);\n this.visibleRange = { start, end: total };\n } else {\n this.visibleRange = { start: 0, end: Math.max(50, total) };\n }\n\n this.prevSelectedChat = newChat;\n this.focusRequested.emit();\n\n await this.fetchReplyTokenInfo(sessionId, newChat.channel);\n\n this.isInitial = true;\n this.scrollToBottom();\n\n if (this.contentObserver) {\n this.contentObserver.disconnect();\n }\n this.setupContentObserver();\n\n this.handleSocketEvents();\n }\n\n //Always read message when click\n // if (newChat.unread_count > 0) {\n // await serviceReadMessage(sessionId);\n // }\n });\n }\n\n disconnectedCallback() {\n if (this.disposeListener) this.disposeListener();\n if (this.disposeReadsMapListener) this.disposeReadsMapListener();\n if (this.replyTokenTimer) window.clearInterval(this.replyTokenTimer);\n if (this.contentObserver) {\n this.contentObserver.disconnect();\n this.contentObserver = undefined;\n }\n const selectedChat = selectedChatStore.get('selectedChat');\n if (selectedChat) {\n leaveRoom(selectedChat.id);\n }\n }\n\n private updateReplyTokenRemainingDOM() {\n if (!(this.replyTokenInfo && this.replyTokenInfo.expired_at)) return;\n const now = new Date();\n const expiredAt = new Date(this.replyTokenInfo.expired_at);\n const diffMs = expiredAt.getTime() - now.getTime();\n\n if (diffMs <= 0) {\n if (this.replyTokenTimer) window.clearInterval(this.replyTokenTimer);\n this.replyTokenInfo = null; // reset when expired\n this.showReplyTokenBanner = false;\n return;\n }\n\n const totalSeconds = Math.floor(diffMs / 1000);\n const minutes = Math.floor(totalSeconds / 60);\n const seconds = totalSeconds % 60;\n const minutesStr = minutes.toString().padStart(2, '0');\n const secondsStr = seconds.toString().padStart(2, '0');\n const remaining = `${minutesStr}:${secondsStr}`;\n if (this.replyTokenSpan) {\n this.replyTokenSpan.textContent = remaining;\n }\n }\n\n private startReplyTokenTimer() {\n if (!this.replyTokenInfo) return;\n if (this.replyTokenTimer) window.clearInterval(this.replyTokenTimer);\n this.showReplyTokenBanner = (this.replyTokenInfo.total \|\| 0) > 0;\n // prime the DOM value once and then tick\n requestAnimationFrame(() => this.updateReplyTokenRemainingDOM());\n this.replyTokenTimer = window.setInterval(() => this.updateReplyTokenRemainingDOM(), 1000);\n }\n\n private async loadMessages({ startMessageId, next, prev, isNewer = false }: { startMessageId?: string; next?: string; prev?: string; isNewer?: boolean }) {\n if (this.isLoadingTop \|\| this.isLoadingBottom) return;\n\n try {\n if (prev) {\n this.isLoadingBottom = true;\n } else {\n this.isLoadingTop = true;\n }\n\n await handleGetChatMessages({\n startMessageId,\n next,\n prev,\n isNewer,\n });\n } catch (error: unknown) {\n handleError(error, 'Failed to load chat messages');\n } finally {\n if (prev) {\n this.isLoadingBottom = false;\n } else {\n this.isLoadingTop = false;\n }\n }\n }\n\n private handleScroll = async () => {\n const element = this.scrollContainer;\n if (!element) return;\n\n const threshold = 100;\n const { scrollTop, scrollHeight, clientHeight } = element;\n\n // Update visible range for virtual scrolling\n const totalMessages = messagesStore.get('messages').length;\n this.updateVisibleRange(scrollTop, clientHeight, totalMessages);\n\n //Detect scroll direction\n if (scrollTop > this.lastScrollTop) {\n this.scrollDirection = 'down';\n } else if (scrollTop < this.lastScrollTop) {\n this.scrollDirection = 'up';\n }\n this.lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;\n\n //Check bottom\n this.isAtBottom = (Math.floor(scrollTop) + Math.floor(clientHeight)) >= (Math.ceil(scrollHeight) - threshold);\n if (this.isAtBottom) {\n this.numberOfNewMessages = 0;\n return;\n }\n\n const jumpMessageId = messagesStore.get('jumpMessageId');\n const olderMessages = messagesStore.get('older');\n const newerMessages = messagesStore.get('newer');\n\n //Is Scroll up and Near top → Load older messages\n if (this.scrollDirection === 'up') {\n const olderNextKey = olderMessages ? olderMessages.next : null;\n const isNearTop = scrollTop < threshold;\n if (isNearTop && olderNextKey && !jumpMessageId) {\n await this.loadMessages({ next: olderNextKey });\n return;\n }\n }\n\n //Is Scroll down and Near bottom → Load newer messages\n if (this.scrollDirection === 'down') {\n const prevKey = newerMessages ? newerMessages.prev : null;\n const olderPrevKey = olderMessages ? olderMessages.prev : null;\n const isNearBottom = scrollTop + clientHeight > scrollHeight - threshold;\n if (isNearBottom && (prevKey \|\| olderPrevKey) && !jumpMessageId) {\n await this.loadMessages({ prev: prevKey \|\| olderPrevKey, isNewer: true });\n return;\n }\n }\n };\n\n private goToLastMessage() {\n this.numberOfNewMessages = 0;\n this.scrollToBottom(true)\n }\n\n render() {\n const t = useTranslation();\n const messages = messagesStore.get('messages');\n const selectedChat = selectedChatStore.get('selectedChat');\n const isNotConnected = configStore.get('isNotConnected');\n const isZwiz = configStore.get('isZwiz');\n // Use memoized grouping - only recalculates when messages change\n const groupedByDate = this.getGroupedMessages(messages);\n\n // Virtual scrolling - only enabled if flag is true and message count exceeds threshold\n const useVirtualScrolling = this.ENABLE_VIRTUAL_SCROLLING && messages.length > this.VIRTUAL_SCROLL_THRESHOLD;\n const visibleGroupedByDate = useVirtualScrolling ? this.getVisibleGroupedMessages(groupedByDate) : groupedByDate;\n\n const isReplyTokenInfo = this.showReplyTokenBanner;\n\n // Calculate spacer heights for virtual scrolling (only if enabled)\n const { start, end } = this.visibleRange;\n const topSpacerHeight = useVirtualScrolling ? start this.ESTIMATED_ITEM_HEIGHT : 0;\n const bottomSpacerHeight = useVirtualScrolling ? Math.max(0, (messages.length - end) * this.ESTIMATED_ITEM_HEIGHT) : 0;\n\n return (\n <Host>\n {selectedChat === null ? (\n <div class={`message-box-wrapper ${isZwiz ? 'z-zwiz-max-height' : 'z-max-height'}`}>\n <div class=\"message-box-no-selected-chat-box\">\n <div class=\"mx-auto\">\n <Icon name=\"MessageSquareText\" addClass=\"size-18\" />\n </div>\n {isNotConnected ? t('chat_tab.you_not_connect_chat') : t('chat_tab.please_choose_chat_to_reply')}\n {isNotConnected && <ZButton startIcon={<Icon name=\"Plus\" />} label={t('chat_tab.add_connection')} id=\"connect-channel\" />}\n </div>\n </div>\n ) : (\n <div class={`message-box-wrapper ${isZwiz ? 'z-zwiz-max-height' : 'z-max-height'}`}>\n <chat-header />\n {(selectedChatStore.get('isSyncingMessage') \|\| selectedChatStore.get('isSyncingTag')) && (\n <div class=\"message-box-syncing-message\">\n {selectedChatStore.get('isSyncingMessage') && <status-badge status=\"loading\" label={t('chat_tab.syncing_message')} />}\n {selectedChatStore.get('isSyncingTag') && <status-badge status=\"loading\" label={t('chat_tab.syncing_tag')} />}\n </div>\n )}\n <div class=\"relative\">\n {!this.isAtBottom &&\n this.numberOfNewMessages > 0 &&\n <div class=\"message-box-new-message\">\n {t('you_have_new_message')} <span class=\"message-box-new-message-link\" onClick={() => this.goToLastMessage()}>{t('go_to_last_message')}</span>\n </div>\n }\n </div>\n <div\n class={`message-box-container scroll-container ${isReplyTokenInfo ? 'pb-8 pt-4 px-4' : 'p-4'}`}\n id={`message-box-${selectedChat.id}`}\n ref={el => (this.scrollContainer = el)}\n onScroll={this.handleScroll}\n >\n {this.isLoadingTop && (\n <div id=\"loading-top\" class=\"message-box-loading mb-10\">\n <Icon name=\"LoaderCircle\" addClass=\"message-box-loading-icon\" />\n </div>\n )}\n {/* Top spacer for virtual scrolling /}\n {topSpacerHeight > 0 && <div style={{ height: `${topSpacerHeight}px` }} />}\n\n {/ Render only visible messages /}\n {Object.entries(visibleGroupedByDate).map(([date, items]) => [\n <div key={`time-${date}`} class=\"message-box-time-wrapper\">\n <span class=\"message-box-time bg-time-badge\">\n {dayjs().tz().format('DD MMM YYYY') === date ? t('today') : date}\n </span>\n </div>,\n ...items.map(item => (\n <message-item key={item.id} item={item} />\n ))\n ])}\n\n {/ Bottom spacer for virtual scrolling */}\n {bottomSpacerHeight > 0 && <div style={{ height: `${bottomSpacerHeight}px` }} />}\n\n {this.isLoadingBottom && (\n <div id=\"loading-bottom\" class=\"message-box-loading mt-10\">\n <Icon name=\"LoaderCircle\" addClass=\"message-box-loading-icon\" />\n </div>\n )}\n </div>\n <div class=\"relative\">\n {!this.isAtBottom && (\n <div class={`message-box-scroll-to-bottom ${isReplyTokenInfo ? '-top-24' : '-top-12'}`}>\n <ZIconButton iconName=\"ArrowDown\" onClick={() => this.goToLastMessage()} />\n </div>\n )}\n {isReplyTokenInfo &&\n (() => {\n const template = t('chat_tab.reply_token_info');\n const totalStr = String(this.replyTokenInfo ? this.replyTokenInfo.total : 0);\n const replacedTotal = template.replace('{total}', totalStr);\n const parts = replacedTotal.split('{remaining}');\n const before = parts[0] \|\| '';\n const after = parts[1] \|\| '';\n return (\n <div\n class=\"message-box-token-wrapper\"\n style={{ bottom: 'calc(100% + 8px)' }}\n >\n <span>{before}</span>\n <span\n ref={el => {\n this.replyTokenSpan = el;\n this.updateReplyTokenRemainingDOM();\n }}\n style={{ minWidth: '4ch', display: 'inline-block', textAlign: 'center' }}\n ></span>\n <span>{after}</span>\n </div>\n );\n })()}\n <chat-input />\n </div>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}