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

zignal-stencil-library 1.1.121 → 1.1.123

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (391) hide show

package/dist/collection/components/quick-message-add-template/quick-message-add-template.css CHANGED Viewed

	@@ -1 +1 @@
1	- @layer base{,::backdrop,:after,:before{--tw-space-y-reverse:0;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-border-style:solid;--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-space-x-reverse:0;--tw-drop-shadow-alpha:100%;border:0 solid;box-sizing:border-box;margin:0;padding:0}}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){,::backdrop,:after,:before{--tw-space-y-reverse:0;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-space-x-reverse:0;--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}}}@layer theme{:host,:root{--color-yellow-500:oklch(79.5% .184 86.047);--container-xl:36rem;--color-yellow-300:oklch(90.5% .182 98.111);--container-3xs:16rem;--container-sm:24rem;--color-slate-500:oklch(55.4% .046 257.417);--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-bold:700;--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-50:oklch(97.1% .013 17.38);--color-red-200:oklch(88.5% .062 18.334);--color-red-500:oklch(63.7% .237 25.331);--color-blue-600:oklch(54.6% .245 262.881);--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);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--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-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-xs:20rem;--container-md:28rem;--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;--text-2xl:1.5rem;--text-2xl--line-height:1.33333;--font-weight-medium:500;--font-weight-semibold:600;--leading-tight:1.25;--leading-snug:1.375;--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-primary-dark:#b50f30;--color-secondary-dark:#fff;--color-background-dark:#23292d}}@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);line-height:1.5;tab-size:4;-webkit-tap-highlight-color:transparent}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)}}.chat-item{align-items:flex-start;border-radius:var(--radius-xl);cursor:pointer;display:flex;margin-block:calc(var(--spacing)1);margin-inline:calc(var(--spacing)2);padding-block:calc(var(--spacing)3);padding-inline:calc(var(--spacing)4);position:relative;--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)}: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)4var(--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)4var(--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)1var(--tw-space-x-reverse))}.chat-item .chat-item-content-main-image{border-radius:3.40282e+38px;height:calc(var(--spacing)4);width:calc(var(--spacing)4)}.chat-item .chat-item-content-main-name{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.chat-item .chat-item-content-main-name,.chat-item .chat-item-content-main-time{-webkit-line-clamp:1;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.chat-item .chat-item-content-main-time{color:var(--color-gray-500);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));margin-left:auto}.chat-item .chat-item-content-secondary{align-items:flex-start;display:flex;flex-direction:row;width:100%}.chat-item .chat-item-content-secondary-nickname{font-size:var(--text-base);-webkit-line-clamp:1;line-height:var(--tw-leading,var(--text-base--line-height));-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.chat-item .chat-item-content-secondary-message{color:var(--color-gray-600);font-size:var(--text-sm);-webkit-line-clamp:1;line-height:var(--tw-leading,var(--text-sm--line-height));-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.chat-item .chat-item-content-unread{background-color:var(--color-primary);border-radius:3.40282e+38px;color:var(--color-white);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));margin-left:auto}.chat-item .chat-item-content-unread-mark{display:inline-block;height:calc(var(--spacing)2.5);width:calc(var(--spacing)2.5)}.chat-item .chat-item-content-unread-count{padding-block:calc(var(--spacing).5);padding-inline:calc(var(--spacing)2)}.z-icon-button{cursor:pointer;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-medium);align-items:center;border-radius:3.40282e+38px;display:inline-flex;font-weight:var(--font-weight-medium);justify-content:center;transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.z-icon-button:focus{--tw-outline-style:none;outline-style:none}.z-icon-button-primary{background-color:var(--color-primary);color:var(--color-white)}.z-icon-button-outlined{border-color:var(--color-primary);border-style:var(--tw-border-style);border-width:1px}.z-icon-button-outlined,.z-icon-button-text{color:var(--color-primary)}.z-icon-button-disabled{cursor:not-allowed;opacity:.5}.z-button{cursor:pointer;--tw-font-weight:var(--font-weight-medium);align-items:center;border-radius:3.40282e+38px;display:inline-flex;font-weight:var(--font-weight-medium);justify-content:center;transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.z-button:focus{--tw-outline-style:none;outline-style:none}.z-button-small{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));padding-block:calc(var(--spacing)1.5);padding-inline:calc(var(--spacing)2)}.z-button-medium{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));padding-block:calc(var(--spacing)2);padding-inline:calc(var(--spacing)3)}.z-button-large{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));padding-block:calc(var(--spacing)3);padding-inline:calc(var(--spacing)4)}.z-button-primary{background-color:var(--color-primary);color:var(--color-white)}.z-button-outlined{border-color:var(--color-primary);border-style:var(--tw-border-style);border-width:1px;color:var(--color-primary)}.z-button-disabled{cursor:not-allowed;opacity:.5}.z-button-text{margin-inline:calc(var(--spacing)2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.z-input-area-label{margin-bottom:calc(var(--spacing)1);--tw-font-weight:var(--font-weight-medium);display:block;font-weight:var(--font-weight-medium)}.z-input-area-input,.z-input-area-label{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.z-input-area-input{border-radius:var(--radius-lg);border-style:var(--tw-border-style);padding-block:calc(var(--spacing)2);padding-inline:calc(var(--spacing)4);width:100%;--tw-ring-color:var(--color-primary);border-width:1px}.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{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.z-input{border-style:var(--tw-border-style);padding-block:calc(var(--spacing)2);padding-inline:calc(var(--spacing)4);width:100%;--tw-ring-color:var(--color-primary);border-radius:3.40282e+38px;border-width:1px}.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{border-bottom-left-radius:var(--radius-3xl);border-style:var(--tw-border-style);border-top-left-radius:var(--radius-3xl);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);border-width:1px;flex:1}.z-context-input-key:focus{border-color:var(--color-primary);--tw-outline-style:none;outline-style:none}.z-context-input-value{border-bottom-right-radius:var(--radius-3xl);border-style:var(--tw-border-style);border-top-right-radius:var(--radius-3xl);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);border-width:1px;flex:1}.z-context-input-value:focus{border-color:var(--color-primary);--tw-outline-style:none;outline-style:none}.z-text-with-link{color:var(--color-blue-600);text-decoration-line:underline}.z-button-group{display:inline-flex}.z-button-group-tab{border-radius:var(--radius-md);display:flex;gap:calc(var(--spacing)1);padding:calc(var(--spacing).5)!important}.z-button-group-item{border-style:var(--tw-border-style);cursor:pointer;--tw-font-weight:var(--font-weight-medium);align-items:center;border-width:1px;display:inline-flex;font-weight:var(--font-weight-medium);justify-content:center;transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.z-button-group-item:focus{--tw-outline-style:none;outline-style:none}.z-button-group-item-tab{align-items:center;border-radius:var(--radius-sm);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,.z-button-group-item-tab-selected{border-style:var(--tw-border-style)!important;border-width:0!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-unselected{border-style:var(--tw-border-style)!important;border-width:0!important}.z-button-group-small{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));padding-block:calc(var(--spacing)1.5);padding-inline:calc(var(--spacing)2)}.z-button-group-medium{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));padding-block:calc(var(--spacing)2);padding-inline:calc(var(--spacing)3)}.z-button-group-large{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));padding-block:calc(var(--spacing)3);padding-inline:calc(var(--spacing)4)}.z-button-group-item-first{border-bottom-left-radius:3.40282e+38px;border-top-left-radius:3.40282e+38px}.z-button-group-item-last{border-bottom-right-radius:3.40282e+38px;border-top-right-radius:3.40282e+38px}.z-button-group-item-middle{border-radius:0}.z-button-group-item-primary-selected{background-color:var(--color-primary);border-color:var(--color-primary);color:var(--color-white)}.z-button-group-item-primary-unselected{background-color:var(--color-white);border-color:var(--color-primary);color:var(--color-primary)}.z-button-group-item-outlined-selected{background-color:var(--color-primary);border-color:var(--color-primary);color:var(--color-white)}.z-button-group-item-outlined-unselected{background-color:#0000;border-color:var(--color-primary);color:var(--color-primary)}.z-button-group-item-disabled{cursor:not-allowed;opacity:.5}.z-button-group-item:not(:first-child){margin-left:-1px}}@layer utilities{.contents{display:contents}.px-4{padding-inline:calc(var(--spacing)4)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}}.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}[data-theme=light] .text-primary{color:var(--color-black)}[data-theme=dark] .text-primary{color:var(--color-white)}[data-theme=light] .text-gray{color:var(--color-gray-500)}[data-theme=dark] .text-gray{color:var(--color-gray-300)}[data-theme=light] .text-accent{color:var(--color-primary)}[data-theme=dark] .text-accent{color:var(--color-primary-dark)}[data-theme=light] .bg-surface{background-color:var(--color-background,#fff)}[data-theme=dark] .bg-surface{background-color:var(--color-background-dark,#23292d)}[data-theme=light] .bg-paper{background-color:var(--color-gray-100)}[data-theme=dark] .bg-paper{background-color:var(--color-gray-700)}[data-theme=light] .bg-time-badge{background-color:#0000004d}[data-theme=dark] .bg-time-badge{background-color:#ffffff4d}[data-theme=light] .bg-primary{background-color:var(--color-black)}[data-theme=dark] .bg-primary{background-color:var(--color-white)}[data-theme=light] .bg-accent{background-color:var(--color-primary)}[data-theme=dark] .bg-accent{background-color:var(--color-primary-dark)}[data-theme=light] .border-primary{border-color:var(--color-black)}[data-theme=dark] .border-primary{border-color:var(--color-white)}[data-theme=light] .border-divider{border-color:var(--color-gray-200)}[data-theme=dark] .border-divider{border-color:var(--color-gray-600)}[data-theme=light] .border-accent{border-color:var(--color-primary)}[data-theme=dark] .border-accent{border-color:var(--color-primary-dark)}.z-text-light{color:var(--color-black)}.z-text-dark{color:var(--color-white)}.z-text-primary-light{color:var(--color-primary)}.z-text-primary-dark{color:var(--color-primary-dark)}.z-text-gray-light{color:var(--color-gray-500)}.z-text-gray-dark{color:var(--color-gray-300)}.z-text-background-light{color:var(--color-background)}.z-text-background-dark{color:var(--color-background-dark)}.z-border-light{border-color:var(--color-black)}.z-border-dark{border-color:var(--color-white)}.z-border-primary-light{border-color:var(--color-primary)}.z-border-primary-dark{border-color:var(--color-primary-dark)}.z-border-divider-light{border-color:var(--color-gray-400)}.z-border-divider-dark{border-color:var(--color-gray-300)}.z-search-input-background-light{background-color:var(--color-gray-200)}.z-search-input-background-dark{background-color:var(--color-gray-500)}.z-chat-input-background-light{background-color:var(--color-white)}.z-chat-input-background-dark{background-color:var(--color-gray-700)}.z-placeholder-light::placeholder{color:var(--color-gray-500)}.z-placeholder-dark::placeholder{color:var(--color-gray-200)}.z-background-primary-light{background-color:var(--color-primary)}.z-background-primary-dark{background-color:var(--color-primary-dark)}.z-background-light{background-color:var(--color-background)}.z-background-dark{background-color:var(--color-background-dark)}.z-paper-light{background-color:var(--color-gray-100)}.z-paper-dark{background-color:var(--color-gray-700)}.z-bg-gray-light{background-color:var(--color-gray-500)}.z-bg-gray-dark{background-color:var(--color-gray-300)}.z-width-100{width:100%}.z-width-90{width:90%}.z-width-75{width:75%}.z-width-50{width:50%}.z-width-25{width:25%}.z-width-0{width:0}.z-animate-width{transition-duration:.5s;transition-property:width;transition-timing-function:cubic-bezier(.4,0,.2,1)}.z-animate-grid-template-cols{transition:grid-template-rows .5s}[type=checkbox]{background-color:var(--color-gray-300);border-color:var(--color-gray-300);border-radius:4px;cursor:pointer}[type=checkbox]:checked,[type=checkbox]:indeterminate{background-color:var(--color-primary);border-color:var(--color-primary);border-radius:4px;cursor:pointer}[type=checkbox]:focus{offset:0;outline-offset:0;--tw-ring-color:var(--color-primary);outline:none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.grid-cols-1{grid-template-columns:1fr}.grid-cols-1_3{grid-template-columns:1fr 3fr}.grid-cols-1_2_1{grid-template-columns:1fr 2fr 1fr}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}@layer utilities{.absolute{position:absolute}.relative{position:relative}.top-1\/2{top:50%}.right-2{right:calc(var(--spacing)2)}.mt-auto{margin-top:auto}.ml-auto{margin-left:auto}.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.flex{display:flex}.hidden{display:none}.inline-flex{display:inline-flex}.size-4{height:calc(var(--spacing)4);width:calc(var(--spacing)4)}.h-9{height:calc(var(--spacing)9)}.h-10{height:calc(var(--spacing)10)}.min-h-0{min-height:calc(var(--spacing)0)}.w-9{width:calc(var(--spacing)9)}.w-10{width:calc(var(--spacing)10)}.w-full{width:100%}.min-w-0{min-width:calc(var(--spacing)0)}.flex-1{flex:1}.-translate-y-1\/2{--tw-translate-y:-50%;translate:var(--tw-translate-x)var(--tw-translate-y)}.animate-spin{animation:var(--animate-spin)}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing)1)}.gap-2{gap:calc(var(--spacing)2)}.gap-2\.5{gap:calc(var(--spacing)2.5)}.gap-3{gap:calc(var(--spacing)3)}.gap-4{gap:calc(var(--spacing)4)}.overflow-y-auto{overflow-y:auto}.rounded-full{border-radius:3.40282e+38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.px-3{padding-inline:calc(var(--spacing)3)}.py-2{padding-block:calc(var(--spacing)2)}.py-2\.5{padding-block:calc(var(--spacing)2.5)}.py-3{padding-block:calc(var(--spacing)3)}.pt-2{padding-top:calc(var(--spacing)2)}.pr-9{padding-right:calc(var(--spacing)9)}.text-center{text-align:center}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--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)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.break-words{overflow-wrap:break-word}.text-gray-400{color:var(--color-gray-400)}.text-primary{color:var(--color-primary)}.text-white{color:var(--color-white)}.ring-primary{--tw-ring-color:var(--color-primary)}.focus\:border-primary:focus{border-color:var(--color-primary)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-40:disabled{opacity:.4}}@keyframes spin{to{transform:rotate(1turn)}}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}@layer utilities{.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-1{margin-top:calc(var(--spacing)1)}.mt-2{margin-top:calc(var(--spacing)2)}.mt-4{margin-top:calc(var(--spacing)4)}.mt-6{margin-top:calc(var(--spacing)6)}.mb-4{margin-bottom:calc(var(--spacing)4)}.grid{display:grid}.aspect-square{aspect-ratio:1}.size-6{height:calc(var(--spacing)6);width:calc(var(--spacing)6)}.size-8{height:calc(var(--spacing)8);width:calc(var(--spacing)8)}.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-\[180px\]{height:180px}.h-\[220px\]{height:220px}.h-\[280px\]{height:280px}.h-full{height:100%}.w-7{width:calc(var(--spacing)7)}.w-8{width:calc(var(--spacing)8)}.w-\[200px\]{width:200px}.w-\[250px\]{width:250px}.max-w-full{max-width:100%}.max-w-md{max-width:var(--container-md)}.max-w-xs{max-width:var(--container-xs)}.flex-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}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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}.border-0{border-style:var(--tw-border-style);border-width:0}.border-\[1\.5px\]{border-style:var(--tw-border-style);border-width:1.5px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-b-\[1\.5px\]{border-bottom-style:var(--tw-border-style);border-bottom-width:1.5px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-none{--tw-border-style:none;border-style:none}.border-current{border-color:currentColor}.border-red-500{border-color:var(--color-red-500)}.bg-slate-900\/40{background-color:#0f172b66}@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 oklab,var(--color-white)90%,transparent)}}.object-cover{object-fit:cover}.p-1{padding:calc(var(--spacing)1)}.p-3{padding:calc(var(--spacing)3)}.p-4{padding:calc(var(--spacing)4)}.p-5{padding:calc(var(--spacing)5)}.p-6{padding:calc(var(--spacing)6)}.px-2{padding-inline:calc(var(--spacing)2)}.px-6{padding-inline:calc(var(--spacing)6)}.px-8{padding-inline:calc(var(--spacing)8)}.py-1\.5{padding-block:calc(var(--spacing)1.5)}.py-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)}.pb-8{padding-bottom:calc(var(--spacing)8)}.pl-2{padding-left:calc(var(--spacing)2)}.text-right{text-align:right}.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)}.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)}.transition-all{transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.transition-colors{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;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)}.inset-y-0{inset-block:calc(var(--spacing)0)}.container{width:100%}.mb-2{margin-bottom:calc(var(--spacing)2)}.size-5{height:calc(var(--spacing)5);width:calc(var(--spacing)5)}.size-10{height:calc(var(--spacing)10);width:calc(var(--spacing)10)}.h-\[160px\]{height:160px}.h-\[200px\]{height:200px}.w-\[240px\]{width:240px}.shrink-0{flex-shrink:0}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.gap-1\.5{gap:calc(var(--spacing)1.5)}.self-end{align-self:flex-end}.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}.size-3{height:calc(var(--spacing)3);width:calc(var(--spacing)3)}.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}.border-transparent{border-color:#0000}.p-1\.5{padding:calc(var(--spacing)1.5)}.max-w-sm{max-width:var(--container-sm)}.text-green-500{color:var(--color-green-500)}.text-yellow-500{color:var(--color-yellow-500)}.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,)}.border-primary{border-color:var(--color-primary)}.rotate-45{rotate:45deg}.text-blue-500{color:var(--color-blue-500)}}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}@layer utilities{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}@layer utilities{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}@layer utilities{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}@layer utilities{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}@layer utilities{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}@layer utilities{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}@layer utilities{:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-end:calc(var(--spacing)2(1 - var(--tw-space-y-reverse)));margin-block-start:calc(var(--spacing)2var(--tw-space-y-reverse))}}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}@layer utilities{.mb-auto{margin-bottom:auto}.text-black{color:var(--color-black)}.w-xl{width:var(--container-xl)}.w-xs{width:var(--container-xs)}.m-auto{margin:auto}.size-32{height:calc(var(--spacing)32);width:calc(var(--spacing)32)}.\!hidden{display:none!important}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.col-span-2{grid-column:span 2/span 2}.my-2{margin-block:calc(var(--spacing)2)}.visible{visibility:visible}.-top-12{top:calc(var(--spacing)-12)}.-top-24{top:calc(var(--spacing)-24)}.mx-auto{margin-inline:auto}.mt-10{margin-top:calc(var(--spacing)10)}.mb-10{margin-bottom:calc(var(--spacing)10)}.inline-block{display:inline-block}.size-18{height:calc(var(--spacing)18);width:calc(var(--spacing)18)}.pt-4{padding-top:calc(var(--spacing)4)}.bg-pink-100{background-color:var(--color-pink-100)}.right-full{right:100%}.-bottom-2{bottom:calc(var(--spacing)-2)}.left-full{left:100%}.mr-2{margin-right:calc(var(--spacing)2)}.mb-0\.5{margin-bottom:calc(var(--spacing).5)}.mb-2\.5{margin-bottom:calc(var(--spacing)2.5)}.ml-2{margin-left:calc(var(--spacing)2)}.justify-start{justify-content:flex-start}.bg-yellow-300{background-color:var(--color-yellow-300)}.pl-10{padding-left:calc(var(--spacing)10)}.text-left{text-align:left}.line-clamp-3{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.max-w-3xs{max-width:var(--container-3xs)}.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)}.underline{text-decoration-line:underline}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.-right-0\.5{right:calc(var(--spacing)-.5)}.-bottom-0\.5{bottom:calc(var(--spacing)-.5)}.col-span-3{grid-column:span 3/span 3}.gap-y-1{row-gap:calc(var(--spacing)1)}.border-b-\[0\.5px\]{border-bottom-style:var(--tw-border-style);border-bottom-width:.5px}.whitespace-nowrap{white-space:nowrap}.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)}.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-secondary{background-color:var(--color-secondary)}.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.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}@layer utilities{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}@layer utilities{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}@layer utilities{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}@layer utilities{}@property --tw-space-y-reverse{syntax:"";inherits:false;initial-value:0}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}@layer utilities{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}@layer utilities{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}@layer utilities{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}@layer utilities{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}@layer utilities{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}@layer utilities{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}@layer utilities;/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}@layer utilities{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}@layer utilities{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}@layer utilities{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}@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}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}:host{display:block}.quick-message-add-template-overlay{--quick-message-modal-base-z-index:var(--quick-message-modal-z-index,2147480000);--quick-message-overlay-padding:clamp(16px,2vh,40px);background:#00000080;box-sizing:border-box;display:grid;inset:0;padding:var(--quick-message-overlay-padding);place-items:center;position:fixed;z-index:var(--quick-message-modal-base-z-index)}.quick-message-add-template-container{height:min(800px,88vh);max-height:min(88vh,calc(100vh - var(--quick-message-overlay-padding,0px)2));width:min(920px,92vw);--quick-modal-surface:var(--color-background);--quick-modal-primary:var(--color-primary);--quick-modal-primary-soft:var(--quick-modal-primary);border-radius:16px;box-shadow:0 20px 45px #11182740;display:flex;flex-direction:column;--quick-modal-primary-border:var(--quick-modal-primary);--quick-modal-primary-shadow:var(--quick-modal-primary);--quick-modal-primary-ghost:var(--quick-modal-primary)}@supports (color:color-mix(in lab,red,red)){.quick-message-add-template-container{--quick-modal-primary-soft:color-mix(in srgb,var(--quick-modal-primary)14%,transparent);--quick-modal-primary-border:color-mix(in srgb,var(--quick-modal-primary)55%,transparent);--quick-modal-primary-shadow:color-mix(in srgb,var(--quick-modal-primary)22%,transparent);--quick-modal-primary-ghost:color-mix(in srgb,var(--quick-modal-primary)18%,var(--quick-modal-surface))}}.quick-message-add-template-container.theme-dark{--quick-modal-surface:var(--color-background-dark);--quick-modal-primary:var(--color-primary-dark)}.quick-message-button-content__dialog-backdrop{align-items:center;background:#0f172a73;display:flex;inset:0;justify-content:center;padding:16px;position:fixed;z-index:var(--quick-message-modal-dialog-z-index,2147480000)}.quick-message-button-content__dialog{max-height:90vh;overflow-y:auto;width:min(420px,100%)}.quick-message-button-content__tab{border-color:#0000}.quick-message-button-content__dialog-body{min-height:250px}.quick-message-button-content__action{display:flex;flex-direction:column;min-height:82px}.quick-message-button-content__action--empty{visibility:hidden}@property --tw-border-style{syntax:"";inherits:false;initial-value:solid}@property --tw-leading{syntax:"";inherits:false}@property --tw-font-weight{syntax:"";inherits:false}@property --tw-shadow{syntax:"";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"";inherits:false}@property --tw-ring-shadow{syntax:"";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"";inherits:false}@property --tw-inset-ring-shadow{syntax:"";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value: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-space-x-reverse{syntax:"";inherits:false;initial-value:0}@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}@media (forced-colors:active){[type=checkbox]:checked,[type=radio]:checked{appearance:auto}[type=checkbox]:indeterminate{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)}}.hover\:text-gray-600:hover{color:var(--color-gray-600)}.group-hover\:opacity-100:is(:where(.group):hover ){opacity:1}.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\:opacity-100:hover{opacity:1}.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,)}}@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 not all and (min-width:40rem){.max-sm\:hidden{display:none}}@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 (max-width:768px){.quick-message-add-template-container{max-height:88vh;width:94vw}}
1	+ @layer base{,::backdrop,:after,:before{--tw-space-y-reverse:0;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-border-style:solid;--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-space-x-reverse:0;--tw-drop-shadow-alpha:100%;border:0 solid;box-sizing:border-box;margin:0;padding:0}}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){,::backdrop,:after,:before{--tw-space-y-reverse:0;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-space-x-reverse:0;--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}}}@layer theme{:host,:root{--container-3xs:16rem;--color-yellow-500:oklch(79.5% .184 86.047);--container-sm:24rem;--container-xl:36rem;--color-yellow-300:oklch(90.5% .182 98.111);--color-gray-400:oklch(70.7% .022 261.325);--color-slate-500:oklch(55.4% .046 257.417);--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-bold:700;--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-50:oklch(97.1% .013 17.38);--color-red-200:oklch(88.5% .062 18.334);--color-red-500:oklch(63.7% .237 25.331);--color-blue-600:oklch(54.6% .245 262.881);--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);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-xs:20rem;--container-md:28rem;--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;--text-2xl:1.5rem;--text-2xl--line-height:1.33333;--font-weight-medium:500;--font-weight-semibold:600;--leading-tight:1.25;--leading-snug:1.375;--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}}@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);line-height:1.5;tab-size:4;-webkit-tap-highlight-color:transparent}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)}}.chat-item{align-items:flex-start;border-radius:var(--radius-xl);cursor:pointer;display:flex;margin-block:calc(var(--spacing)1);margin-inline:calc(var(--spacing)2);padding-block:calc(var(--spacing)3);padding-inline:calc(var(--spacing)4);position:relative;--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)}: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)4var(--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)4var(--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)1var(--tw-space-x-reverse))}.chat-item .chat-item-content-main-image{border-radius:3.40282e+38px;height:calc(var(--spacing)4);width:calc(var(--spacing)4)}.chat-item .chat-item-content-main-name{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.chat-item .chat-item-content-main-name,.chat-item .chat-item-content-main-time{-webkit-line-clamp:1;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.chat-item .chat-item-content-main-time{color:var(--color-gray-500);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));margin-left:auto}.chat-item .chat-item-content-secondary{align-items:flex-start;display:flex;flex-direction:row;width:100%}.chat-item .chat-item-content-secondary-nickname{font-size:var(--text-base);-webkit-line-clamp:1;line-height:var(--tw-leading,var(--text-base--line-height));-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.chat-item .chat-item-content-secondary-message{color:var(--color-gray-600);font-size:var(--text-sm);-webkit-line-clamp:1;line-height:var(--tw-leading,var(--text-sm--line-height));-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.chat-item .chat-item-content-unread{background-color:var(--color-primary);border-radius:3.40282e+38px;color:var(--color-white);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));margin-left:auto}.chat-item .chat-item-content-unread-mark{display:inline-block;height:calc(var(--spacing)2.5);width:calc(var(--spacing)2.5)}.chat-item .chat-item-content-unread-count{padding-block:calc(var(--spacing).5);padding-inline:calc(var(--spacing)2)}.z-icon-button{cursor:pointer;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-medium);align-items:center;border-radius:3.40282e+38px;display:inline-flex;font-weight:var(--font-weight-medium);justify-content:center;transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.z-icon-button:focus{--tw-outline-style:none;outline-style:none}.z-icon-button-primary{background-color:var(--color-primary);color:var(--color-white)}.z-icon-button-outlined{border-color:var(--color-primary);border-style:var(--tw-border-style);border-width:1px}.z-icon-button-outlined,.z-icon-button-text{color:var(--color-primary)}.z-icon-button-disabled{cursor:not-allowed;opacity:.5}.z-button{cursor:pointer;--tw-font-weight:var(--font-weight-medium);align-items:center;border-radius:3.40282e+38px;display:inline-flex;font-weight:var(--font-weight-medium);justify-content:center;transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.z-button:focus{--tw-outline-style:none;outline-style:none}.z-button-small{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));padding-block:calc(var(--spacing)1.5);padding-inline:calc(var(--spacing)2)}.z-button-medium{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));padding-block:calc(var(--spacing)2);padding-inline:calc(var(--spacing)3)}.z-button-large{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));padding-block:calc(var(--spacing)3);padding-inline:calc(var(--spacing)4)}.z-button-primary{background-color:var(--color-primary);color:var(--color-white)}.z-button-outlined{border-color:var(--color-primary);border-style:var(--tw-border-style);border-width:1px;color:var(--color-primary)}.z-button-disabled{cursor:not-allowed;opacity:.5}.z-button-text{margin-inline:calc(var(--spacing)2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.z-input-area-label{margin-bottom:calc(var(--spacing)1);--tw-font-weight:var(--font-weight-medium);display:block;font-weight:var(--font-weight-medium)}.z-input-area-input,.z-input-area-label{color:var(--color-surface);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.z-input-area-input{background-color:var(--color-paper);border-color:var(--color-surface);border-radius:var(--radius-lg);border-style:var(--tw-border-style);border-width:1px;padding-block:calc(var(--spacing)2);padding-inline:calc(var(--spacing)4);width:100%;--tw-ring-color:var(--color-primary)}.z-input-area-input:focus{border-color:var(--color-primary);--tw-outline-style:none;outline-style:none}.z-input-area-error{color:var(--color-red-500);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));margin-top:calc(var(--spacing)1)}.z-input-label{margin-bottom:calc(var(--spacing)1);--tw-font-weight:var(--font-weight-medium);display:block;font-weight:var(--font-weight-medium)}.z-input,.z-input-label{color:var(--color-surface);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.z-input{background-color:var(--color-background);border-color:var(--color-divider);border-style:var(--tw-border-style);border-width:1px;padding-block:calc(var(--spacing)2);padding-inline:calc(var(--spacing)4);width:100%;--tw-ring-color:var(--color-primary);border-radius:3.40282e+38px}.z-input:focus{border-color:var(--color-primary);--tw-outline-style:none;outline-style:none}.z-input-error{color:var(--color-red-500);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));margin-top:calc(var(--spacing)1)}.z-select-input-label{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));margin-bottom:calc(var(--spacing)1);--tw-font-weight:var(--font-weight-medium);display:block;font-weight:var(--font-weight-medium)}.z-tag-or-status-item{align-items:center;border-radius:var(--radius-2xl);gap:calc(var(--spacing)2);padding-block:calc(var(--spacing)1.5);padding-inline:calc(var(--spacing)3);--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);display:inline-flex}.z-tag-or-status-item .z-tag-or-status-item-name{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));max-width:calc(var(--spacing)20)}.z-tag-or-status-item .z-tag-or-status-item-icon{border-radius:3.40282e+38px;height:calc(var(--spacing)4);width:calc(var(--spacing)4)}.z-context-input{align-items:stretch;display:flex;flex-direction:row;margin-block:calc(var(--spacing)1)}.z-context-input-key{background-color:var(--color-background);border-bottom-left-radius:var(--radius-3xl);border-color:var(--color-divider);border-style:var(--tw-border-style);border-top-left-radius:var(--radius-3xl);border-width:1px;color:var(--color-surface);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));max-height:6.4rem;min-height:2.4rem;padding-block:calc(var(--spacing)2);padding-inline:calc(var(--spacing)4);resize:none;width:100%;--tw-ring-color:var(--color-primary);flex:1}.z-context-input-key:focus{border-color:var(--color-primary);--tw-outline-style:none;outline-style:none}.z-context-input-value{background-color:var(--color-background);border-bottom-right-radius:var(--radius-3xl);border-color:var(--color-primary);border-style:var(--tw-border-style);border-top-right-radius:var(--radius-3xl);border-width:1px;color:var(--color-surface);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));max-height:6.4rem;min-height:2.4rem;padding-block:calc(var(--spacing)2);padding-inline:calc(var(--spacing)4);resize:none;width:100%;--tw-ring-color:var(--color-primary);flex:1}.z-context-input-value:focus{border-color:var(--color-primary);--tw-outline-style:none;outline-style:none}.z-text-with-link{color:var(--color-blue-600);text-decoration-line:underline}.z-button-group{display:inline-flex}.z-button-group-tab{border-radius:var(--radius-md);display:flex;gap:calc(var(--spacing)1);padding:calc(var(--spacing).5)!important}.z-button-group-item{border-style:var(--tw-border-style);cursor:pointer;--tw-font-weight:var(--font-weight-medium);align-items:center;border-width:1px;display:inline-flex;font-weight:var(--font-weight-medium);justify-content:center;transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.z-button-group-item:focus{--tw-outline-style:none;outline-style:none}.z-button-group-item-tab{align-items:center;border-radius:var(--radius-sm);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,.z-button-group-item-tab-selected{border-style:var(--tw-border-style)!important;border-width:0!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-unselected{border-style:var(--tw-border-style)!important;border-width:0!important}.z-button-group-small{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));padding-block:calc(var(--spacing)1.5);padding-inline:calc(var(--spacing)2)}.z-button-group-medium{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));padding-block:calc(var(--spacing)2);padding-inline:calc(var(--spacing)3)}.z-button-group-large{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));padding-block:calc(var(--spacing)3);padding-inline:calc(var(--spacing)4)}.z-button-group-item-first{border-bottom-left-radius:3.40282e+38px;border-top-left-radius:3.40282e+38px}.z-button-group-item-last{border-bottom-right-radius:3.40282e+38px;border-top-right-radius:3.40282e+38px}.z-button-group-item-middle{border-radius:0}.z-button-group-item-primary-selected{background-color:var(--color-primary);border-color:var(--color-primary);color:var(--color-white)}.z-button-group-item-primary-unselected{background-color:var(--color-white);border-color:var(--color-primary);color:var(--color-primary)}.z-button-group-item-outlined-selected{background-color:var(--color-primary);border-color:var(--color-primary);color:var(--color-white)}.z-button-group-item-outlined-unselected{background-color:#0000;border-color:var(--color-primary);color:var(--color-primary)}.z-button-group-item-disabled{cursor:not-allowed;opacity:.5}.z-button-group-item:not(:first-child){margin-left:-1px}}@layer utilities{.contents{display:contents}.bg-background{background-color:var(--color-background)}.px-4{padding-inline:calc(var(--spacing)4)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-surface{color:var(--color-surface)}}[data-theme=light]{--color-primary:#e02848;--color-secondary:#023761;--color-background:#fff;--color-surface:#000;--color-paper:#f3f4f6;--color-divider:#e5e7eb;--color-theme-gray:#6b7280}[data-theme=dark]{--color-primary:#b50f30;--color-secondary:#fff;--color-background:#23292d;--color-surface:#fff;--color-paper:#374151;--color-divider:#4b5563;--color-theme-gray:#d1d5db}.scroll-container::-webkit-scrollbar{background:#0000001a;height:8px;width:8px}.scroll-container:active::-webkit-scrollbar,.scroll-container:hover::-webkit-scrollbar{background:#0003}.scroll-container:active::-webkit-scrollbar-thumb,.scroll-container:hover::-webkit-scrollbar-thumb{background:#0006;border-radius:4px}.bg-time-badge{background-color:#0000004d}@supports (color:color-mix(in lab,red,red)){.bg-time-badge{background-color:color-mix(in srgb,var(--color-surface)30%,transparent)}}.placeholder-surface::placeholder{color:var(--color-text-gray)}.z-width-100{width:100%}.z-width-90{width:90%}.z-width-75{width:75%}.z-width-50{width:50%}.z-width-25{width:25%}.z-width-0{width:0}.z-animate-width{transition-duration:.5s;transition-property:width;transition-timing-function:cubic-bezier(.4,0,.2,1)}.z-animate-grid-template-cols{transition:grid-template-rows .5s}[type=checkbox]{background-color:var(--color-gray-300);border-color:var(--color-gray-300);border-radius:4px;cursor:pointer}[type=checkbox]:checked,[type=checkbox]:indeterminate{background-color:var(--color-primary);border-color:var(--color-primary);border-radius:4px;cursor:pointer}[type=checkbox]:focus{offset:0;outline-offset:0;--tw-ring-color:var(--color-primary);outline:none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.grid-cols-1{grid-template-columns:1fr}.grid-cols-1_3{grid-template-columns:1fr 3fr}.grid-cols-1_2_1{grid-template-columns:1fr 2fr 1fr}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}@layer utilities{.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.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-1{margin-top:calc(var(--spacing)1)}.mt-2{margin-top:calc(var(--spacing)2)}.mt-4{margin-top:calc(var(--spacing)4)}.mt-6{margin-top:calc(var(--spacing)6)}.mb-4{margin-bottom:calc(var(--spacing)4)}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.aspect-square{aspect-ratio:1}.size-4{height:calc(var(--spacing)4);width:calc(var(--spacing)4)}.size-6{height:calc(var(--spacing)6);width:calc(var(--spacing)6)}.size-8{height:calc(var(--spacing)8);width:calc(var(--spacing)8)}.size-12{height:calc(var(--spacing)12);width:calc(var(--spacing)12)}.size-14{height:calc(var(--spacing)14);width:calc(var(--spacing)14)}.h-7{height:calc(var(--spacing)7)}.h-8{height:calc(var(--spacing)8)}.h-9{height:calc(var(--spacing)9)}.h-\[180px\]{height:180px}.h-\[220px\]{height:220px}.h-\[280px\]{height:280px}.h-full{height:100%}.w-7{width:calc(var(--spacing)7)}.w-8{width:calc(var(--spacing)8)}.w-9{width:calc(var(--spacing)9)}.w-\[200px\]{width:200px}.w-\[250px\]{width:250px}.w-full{width:100%}.max-w-full{max-width:100%}.max-w-md{max-width:var(--container-md)}.max-w-xs{max-width:var(--container-xs)}.flex-1{flex:1}.flex-shrink-0,.shrink-0{flex-shrink:0}.animate-spin{animation:var(--animate-spin)}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.resize-none{resize:none}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing)1)}.gap-2{gap:calc(var(--spacing)2)}.gap-3{gap:calc(var(--spacing)3)}.gap-4{gap:calc(var(--spacing)4)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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-full{border-radius:3.40282e+38px}.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{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-b-\[1\.5px\]{border-bottom-style:var(--tw-border-style);border-bottom-width:1.5px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-none{--tw-border-style:none;border-style:none}.border-current{border-color:currentColor}.border-primary{border-color:var(--color-primary)}.border-red-500{border-color:var(--color-red-500)}.bg-slate-900\/40{background-color:#0f172b66}@supports (color:color-mix(in lab,red,red)){.bg-slate-900\/40{background-color:color-mix(in oklab,var(--color-slate-900)40%,transparent)}}.bg-slate-900\/60{background-color:#0f172b99}@supports (color:color-mix(in lab,red,red)){.bg-slate-900\/60{background-color:color-mix(in oklab,var(--color-slate-900)60%,transparent)}}.bg-surface{background-color:var(--color-surface)}.bg-transparent{background-color:#0000}.bg-white\/90{background-color:#ffffffe6}@supports (color:color-mix(in lab,red,red)){.bg-white\/90{background-color:color-mix(in oklab,var(--color-white)90%,transparent)}}.object-cover{object-fit:cover}.p-1{padding:calc(var(--spacing)1)}.p-3{padding:calc(var(--spacing)3)}.p-4{padding:calc(var(--spacing)4)}.p-5{padding:calc(var(--spacing)5)}.p-6{padding:calc(var(--spacing)6)}.px-2{padding-inline:calc(var(--spacing)2)}.px-3{padding-inline:calc(var(--spacing)3)}.px-6{padding-inline:calc(var(--spacing)6)}.px-8{padding-inline:calc(var(--spacing)8)}.py-1\.5{padding-block:calc(var(--spacing)1.5)}.py-2{padding-block:calc(var(--spacing)2)}.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)}.pb-8{padding-bottom:calc(var(--spacing)8)}.pl-2{padding-left:calc(var(--spacing)2)}.text-center{text-align:center}.text-right{text-align:right}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--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)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-primary{color:var(--color-primary)}.text-red-500{color:var(--color-red-500)}.text-slate-700{color:var(--color-slate-700)}.text-theme-gray{color:var(--color-theme-gray)}.text-white{color:var(--color-white)}.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-duration:var(--tw-duration,var(--default-transition-duration));transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.transition-colors{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;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}}@keyframes spin{to{transform:rotate(1turn)}}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}@layer utilities{.top-1\/2{top:50%}.right-2{right:calc(var(--spacing)2)}.mt-auto{margin-top:auto}.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}.border-divider{border-color:var(--color-divider)}.bg-primary{background-color:var(--color-primary)}.py-2\.5{padding-block:calc(var(--spacing)2.5)}.pt-2{padding-top:calc(var(--spacing)2)}.pr-9{padding-right:calc(var(--spacing)9)}.break-words{overflow-wrap:break-word}.text-gray-400{color:var(--color-gray-400)}.focus\:border-primary:focus{border-color:var(--color-primary)}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-40:disabled{opacity:.4}.col-span-full{grid-column:1/-1}.size-3{height:calc(var(--spacing)3);width:calc(var(--spacing)3)}.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}.border-transparent{border-color:#0000}.p-1\.5{padding:calc(var(--spacing)1.5)}.inset-y-0{inset-block:calc(var(--spacing)0)}.container{width:100%}.mb-2{margin-bottom:calc(var(--spacing)2)}.size-5{height:calc(var(--spacing)5);width:calc(var(--spacing)5)}.size-10{height:calc(var(--spacing)10);width:calc(var(--spacing)10)}.h-40{height:calc(var(--spacing)40)}.h-\[200px\]{height:200px}.w-60{width:calc(var(--spacing)60)}.shrink-0{flex-shrink:0}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.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)}.max-w-sm{max-width:var(--container-sm)}.text-green-500{color:var(--color-green-500)}.text-yellow-500{color:var(--color-yellow-500)}.hidden\!{display:none!important}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.bg-paper{background-color:var(--color-paper)}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.rotate-45{rotate:45deg}.text-blue-500{color:var(--color-blue-500)}.w-xl{width:var(--container-xl)}.w-xs{width:var(--container-xs)}.m-auto{margin:auto}.size-32{height:calc(var(--spacing)32);width:calc(var(--spacing)32)}}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}@layer utilities{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}@layer utilities{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}@layer utilities{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}@layer utilities{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}@layer utilities{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}@layer utilities{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}@layer utilities{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}@layer utilities{:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-end:calc(var(--spacing)2(1 - var(--tw-space-y-reverse)));margin-block-start:calc(var(--spacing)2var(--tw-space-y-reverse))}}@property --tw-space-y-reverse{syntax:"";inherits:false;initial-value:0}/! tailwindcss v4.1.16 \| 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)}.bg-pink-100{background-color:var(--color-pink-100)}.text-black{color:var(--color-black)}.visible{visibility:visible}.-top-12{top:calc(var(--spacing)-12)}.-top-24{top:calc(var(--spacing)-24)}.mx-auto{margin-inline:auto}.mt-10{margin-top:calc(var(--spacing)10)}.mb-10{margin-bottom:calc(var(--spacing)10)}.inline-block{display:inline-block}.size-18{height:calc(var(--spacing)18);width:calc(var(--spacing)18)}.pt-4{padding-top:calc(var(--spacing)4)}.line-clamp-3{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.max-w-3xs{max-width:var(--container-3xs)}.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)}.underline{text-decoration-line:underline}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.right-full{right:100%}.-bottom-2{bottom:calc(var(--spacing)-2)}.left-full{left:100%}.mr-2{margin-right:calc(var(--spacing)2)}.mb-0\.5{margin-bottom:calc(var(--spacing).5)}.mb-2\.5{margin-bottom:calc(var(--spacing)2.5)}.ml-2{margin-left:calc(var(--spacing)2)}.justify-start{justify-content:flex-start}.bg-yellow-300{background-color:var(--color-yellow-300)}.pl-10{padding-left:calc(var(--spacing)10)}.text-left{text-align:left}.size-42{height:calc(var(--spacing)42);width:calc(var(--spacing)42)}.h-20{height:calc(var(--spacing)20)}.w-42{width:calc(var(--spacing)42)}.-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}.gap-y-1{row-gap:calc(var(--spacing)1)}.border-b-\[0\.5px\]{border-bottom-style:var(--tw-border-style);border-bottom-width:.5px}.whitespace-nowrap{white-space:nowrap}.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}.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-secondary{background-color:var(--color-secondary)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.text-green-700{color:var(--color-green-700)}.text-red-700{color:var(--color-red-700)}.capitalize{text-transform:capitalize}.opacity-100{opacity:1}.mb-auto{margin-bottom:auto}}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}@layer utilities{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}@layer utilities{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}@layer utilities{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}@layer utilities{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}@layer utilities{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}@layer utilities;/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}@layer utilities{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}@layer utilities{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}@layer utilities{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}@layer utilities{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}@layer utilities{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}@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}/! tailwindcss v4.1.16 \| MIT License \| https://tailwindcss.com /@layer properties{}@layer base{}:host{display:block}.quick-message-add-template-overlay{--quick-message-modal-base-z-index:var(--quick-message-modal-z-index,2147480000);--quick-message-overlay-padding:clamp(16px,2vh,40px);background:#00000080;box-sizing:border-box;display:grid;inset:0;padding:var(--quick-message-overlay-padding);place-items:center;position:fixed;z-index:var(--quick-message-modal-base-z-index)}.quick-message-add-template-container{height:min(800px,88vh);max-height:min(88vh,calc(100vh - var(--quick-message-overlay-padding,0px)2));width:min(920px,92vw);--quick-modal-surface:var(--color-background);--quick-modal-primary:var(--color-primary);--quick-modal-primary-soft:var(--quick-modal-primary);border-radius:16px;box-shadow:0 20px 45px #11182740;display:flex;flex-direction:column;--quick-modal-primary-border:var(--quick-modal-primary);--quick-modal-primary-shadow:var(--quick-modal-primary);--quick-modal-primary-ghost:var(--quick-modal-primary)}@supports (color:color-mix(in lab,red,red)){.quick-message-add-template-container{--quick-modal-primary-soft:color-mix(in srgb,var(--quick-modal-primary)14%,transparent);--quick-modal-primary-border:color-mix(in srgb,var(--quick-modal-primary)55%,transparent);--quick-modal-primary-shadow:color-mix(in srgb,var(--quick-modal-primary)22%,transparent);--quick-modal-primary-ghost:color-mix(in srgb,var(--quick-modal-primary)18%,var(--quick-modal-surface))}}.quick-message-add-template-container.theme-dark{--quick-modal-surface:var(--color-background-dark);--quick-modal-primary:var(--color-primary-dark)}.quick-message-button-content__dialog-backdrop{align-items:center;background:#0f172a73;display:flex;inset:0;justify-content:center;padding:16px;position:fixed;z-index:var(--quick-message-modal-dialog-z-index,2147480000)}.quick-message-button-content__dialog{max-height:90vh;overflow-y:auto;width:min(420px,100%)}.quick-message-button-content__tab{border-color:#0000}.quick-message-button-content__dialog-body{min-height:250px}.quick-message-button-content__action{display:flex;flex-direction:column;min-height:82px}.quick-message-button-content__action--empty{visibility:hidden}@property --tw-border-style{syntax:"";inherits:false;initial-value:solid}@property --tw-leading{syntax:"";inherits:false}@property --tw-font-weight{syntax:"";inherits:false}@property --tw-shadow{syntax:"";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"";inherits:false}@property --tw-ring-shadow{syntax:"";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"";inherits:false}@property --tw-inset-ring-shadow{syntax:"";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value: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-space-x-reverse{syntax:"";inherits:false;initial-value:0}@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}@media (forced-colors:active){[type=checkbox]:checked,[type=radio]:checked{appearance:auto}[type=checkbox]:indeterminate{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)}}.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\: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,)}}@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 not all and (min-width:40rem){.max-sm\:hidden{display:none}}@media (min-width:40rem){.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.container{max-width:40rem}.sm\:min-w-0{min-width:calc(var(--spacing)0)}.sm\:flex-row{flex-direction:row}}@media (min-width:48rem){.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.container{max-width:48rem}}@media (min-width:64rem){.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}@media (max-width:768px){.quick-message-add-template-container{max-height:88vh;width:94vw}}

package/dist/collection/components/quick-message-add-template/quick-message-add-template.js CHANGED Viewed

@@ -136,13 +136,13 @@ export class QuickMessageAddTemplateComponent {
         const isSendMode = this.mode === 'edit-send';
         const isCreateMode = this.mode === 'create';
         const isTitleEmpty = this.draftTemplate.title.trim() === '';
-        return (h(Host, { key: '49c770b49016fed4de2fb5093a7b791afdd6b87a' }, h("div", { key: '82570dfc68bc89154b7b2750a797b159eaf09fa0', class: "quick-message-add-template-overlay", onClick: () => this.handleClose() }, h("div", { key: '8971a16952262dd72ce659f4cb46f03f30b54dc1', class: `quick-message-add-template-container z-background-${theme} z-text-${theme} px-6 py-4`, onClick: event => event.stopPropagation() }, h("div", { key: '696c5ac9178efc8aab80b56cdc16522e02c6ef64', class: "flex items-center justify-between" }, h("h2", { key: '25caa8f8e8050bc1190067c9515fea017bf0e7d3', class: "mb-4 text-lg font-semibold" }, isCreateMode ? t('quick_message.add_template') : t('quick_message.edit_template')), h("button", { key: '5a52c4655daab143a35d5bbb4e17c191a89b322a', type: "button", onClick: () => this.handleClose(), class: "cursor-pointer" }, h(Icon, { key: 'cc7fc2fa6dfb0f8a4bfca35908a47a6a764e2d80', name: "X" }))), h("div", { key: 'cb7bc80fb6b82d6041ee73b8ed83b05b648db169', class: `flex flex-col h-full gap-2 overflow-auto rounded-xl z-border-primary-${theme} border-[1.5px] p-3` }, h("input", { key: '44a532ae5c0c544b5c07601ad9fe38b94c1729bf', type: "text", class: `w-full px-4 py-2 rounded-xl z-border-primary-${theme} border-[1.5px] focus:outline-none ring-primary z-placeholder-${theme} z-text-${theme} z-background-${theme}`, placeholder: t('quick_message.template_name'), value: this.draftTemplate.title, onInput: e => {
+        return (h(Host, { key: 'd2eea5dc4c0ffc2e17b52e8d1f71b14154540850', "data-theme": theme }, h("div", { key: '871f31b887d896fb7a6631b566946f908e337214', class: "quick-message-add-template-overlay", onClick: () => this.handleClose() }, h("div", { key: 'bd898fc20c92ff91ffe6ed2233ff54645ecf0106', class: `quick-message-add-template-container bg-background text-surface px-6 py-4`, onClick: event => event.stopPropagation() }, h("div", { key: 'd374b4d99164c12c09c6e01d338f8955af362fe6', class: "flex items-center justify-between" }, h("h2", { key: 'b07a42e3fdb56f5447f3f3123e674bf9a9ceac5a', class: "mb-4 text-lg font-semibold" }, isCreateMode ? t('quick_message.add_template') : t('quick_message.edit_template')), h("button", { key: '3ba72dac3387b1eee54c7748d757ff661f1ec759', type: "button", onClick: () => this.handleClose(), class: "cursor-pointer" }, h(Icon, { key: '63d9a1f02de3965c69ed80d354adb902e7d9740f', name: "X" }))), h("div", { key: '33e166333fabc6ae390241bd039b0f0912434f28', class: `flex flex-col h-full gap-2 overflow-auto rounded-xl border-primary border-[1.5px] p-3` }, h("input", { key: 'cb41e600c28b8471fe802e022d6b4e79b81db42e', type: "text", class: `w-full px-4 py-2 rounded-xl border-primary border-[1.5px] focus:outline-none ring-primary placeholder-surface text-surface bg-background`, placeholder: t('quick_message.template_name'), value: this.draftTemplate.title, onInput: e => {
                 this.draftTemplate = { ...this.draftTemplate, title: e.target.value };
-            } }), isTitleEmpty && h("p", { key: '1b437a1f65e885cb560548ebfa3bde574c50059b', class: "pl-2 text-xs text-red-500" }, t('quick_message.template_name_warning')), h("span", { key: '2f729dc33ee8e654a8e231af578fe18f252ec9e3', class: "text-xs pl-2" }, t('quick_message.count_template_content'), " ", this.draftTemplate.contents.length, "/5"), h("div", { key: '1ab9a63689646f99ad128466ae3603f304dfedb5' }, this.draftTemplate.contents.map((content, index) => {
+            } }), isTitleEmpty && h("p", { key: 'aae6ee6b7940f2061c17ef324622686cb92fb39c', class: "pl-2 text-xs text-red-500" }, t('quick_message.template_name_warning')), h("span", { key: '7ce0b3c193b1f55dcd8340b9e3233b85dcbc4f04', class: "text-xs pl-2" }, t('quick_message.count_template_content'), " ", this.draftTemplate.contents.length, "/5"), h("div", { key: 'b58239de871ff574df10bffcadec1096b6da5281' }, this.draftTemplate.contents.map((content, index) => {
             const isFirst = index === 0;
             const isLast = index === this.draftTemplate.contents.length - 1;
-            return (h("div", { key: content.id, class: "mt-2 flex items-start gap-3" }, h("div", { class: "flex items-center gap-2" }, h("div", { class: "flex flex-col items-center gap-2" }, !isFirst && (h("button", { type: "button", class: `inline-flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full border-[1.5px] z-border-primary-${theme} z-text-primary-${theme} transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-200 ${this.isSaving ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'}`, "aria-label": t('quick_message.move_up'), disabled: this.isSaving, onClick: () => !this.isSaving && this.reorderTemplateContent(content.id, 'up') }, h(Icon, { name: "ChevronUp", addClass: "size-4" }))), !isLast && (h("button", { type: "button", class: `inline-flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full border-[1.5px] z-border-primary-${theme} z-text-primary-${theme} transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-200 ${this.isSaving ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'}`, "aria-label": t('quick_message.move_down'), disabled: this.isSaving, onClick: () => !this.isSaving && this.reorderTemplateContent(content.id, 'down') }, h(Icon, { name: "ChevronDown", addClass: "size-4" })))), h("button", { type: "button", class: `inline-flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full border border-red-500 text-red-500 transition-colors hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-red-200 ${this.isSaving ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'}`, "aria-label": t('remove'), disabled: this.isSaving, onClick: () => !this.isSaving && this.removeTemplateContent(content.id) }, h(Icon, { name: "Trash2", addClass: "size-4" }))), h("div", { class: "flex-1 overflow-hidden" }, this.renderTemplateContent(content))));
-        }))), h("div", { key: '9b85c97a7b98b99ca440fef8d355d8a8a921c982', class: `mt-2 flex rounded-xl border-[1.5px] z-border-primary-${theme}` }, this.templateOptions.map((option, index) => (h("button", { type: "button", class: `flex flex-1 ${this.isSaving ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'} flex-col items-center justify-center gap-1 px-4 py-2 text-xs font-medium text-center focus:outline-none ${index === 0 ? '' : `border-l z-border-primary-${theme}`} z-text-primary-${theme}`, disabled: this.isSaving, onClick: () => !this.isSaving && option.onClick() }, h(Icon, { name: option.icon, addClass: `size-4 z-text-primary-${theme}` }), h("span", { class: "max-sm:hidden" }, option.label))))), h("div", { key: '5abfeef80acb2d1637dfc4ca956636276b9f55e2', class: "mt-2 grid w-full grid-cols-2 gap-2" }, h(ZButton, { key: '4c8e661691c77d17f894d2515da01de9e14951ae', variant: "outlined", label: t('cancel'), fullWidth: true, disabled: this.isSaving, onClick: () => this.handleClose() }), isSendMode ? (h(ZButton, { variant: "primary", label: t('send'), fullWidth: true, onClick: () => this.handleSend({ ...this.draftTemplate, last_updated_at: dayjs().toDate() }), disabled: isTitleEmpty || this.isSaving, startIcon: this.isSaving ? h(Icon, { name: "Loader2", addClass: "size-4 animate-spin" }) : undefined })) : (h(ZButton, { variant: "primary", label: t('save'), fullWidth: true, onClick: () => this.handleSave({ ...this.draftTemplate, last_updated_at: dayjs().toDate() }), disabled: isTitleEmpty || this.isSaving, startIcon: this.isSaving ? h(Icon, { name: "Loader2", addClass: "size-4 animate-spin" }) : undefined })))))));
+            return (h("div", { key: content.id, class: "mt-2 flex items-start gap-3" }, h("div", { class: "flex items-center gap-2" }, h("div", { class: "flex flex-col items-center gap-2" }, !isFirst && (h("button", { type: "button", class: `inline-flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full border-[1.5px] border-primary text-primary transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-200 ${this.isSaving ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'}`, "aria-label": t('quick_message.move_up'), disabled: this.isSaving, onClick: () => !this.isSaving && this.reorderTemplateContent(content.id, 'up') }, h(Icon, { name: "ChevronUp", addClass: "size-4" }))), !isLast && (h("button", { type: "button", class: `inline-flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full border-[1.5px] border-primary text-primary transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-200 ${this.isSaving ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'}`, "aria-label": t('quick_message.move_down'), disabled: this.isSaving, onClick: () => !this.isSaving && this.reorderTemplateContent(content.id, 'down') }, h(Icon, { name: "ChevronDown", addClass: "size-4" })))), h("button", { type: "button", class: `inline-flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full border border-red-500 text-red-500 transition-colors hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-red-200 ${this.isSaving ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'}`, "aria-label": t('remove'), disabled: this.isSaving, onClick: () => !this.isSaving && this.removeTemplateContent(content.id) }, h(Icon, { name: "Trash2", addClass: "size-4" }))), h("div", { class: "flex-1 overflow-hidden" }, this.renderTemplateContent(content))));
+        }))), h("div", { key: 'b2abff18d138eba472554b6759c8b89359a0ad7f', class: `mt-2 flex rounded-xl border-[1.5px] border-primary` }, this.templateOptions.map((option, index) => (h("button", { type: "button", class: `flex flex-1 ${this.isSaving ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'} flex-col items-center justify-center gap-1 px-4 py-2 text-xs font-medium text-center focus:outline-none ${index === 0 ? '' : `border-l border-primary`} text-primary`, disabled: this.isSaving, onClick: () => !this.isSaving && option.onClick() }, h(Icon, { name: option.icon, addClass: `size-4 text-primary` }), h("span", { class: "max-sm:hidden" }, option.label))))), h("div", { key: '1f406d70051fddc15e9fd3c6d8817527021bf64c', class: "mt-2 grid w-full grid-cols-2 gap-2" }, h(ZButton, { key: 'd9535522e2d10636247627be2e1a51fa7ab41e56', variant: "outlined", label: t('cancel'), fullWidth: true, disabled: this.isSaving, onClick: () => this.handleClose() }), isSendMode ? (h(ZButton, { variant: "primary", label: t('send'), fullWidth: true, onClick: () => this.handleSend({ ...this.draftTemplate, last_updated_at: dayjs().toDate() }), disabled: isTitleEmpty || this.isSaving, startIcon: this.isSaving ? h(Icon, { name: "Loader2", addClass: "size-4 animate-spin" }) : undefined })) : (h(ZButton, { variant: "primary", label: t('save'), fullWidth: true, onClick: () => this.handleSave({ ...this.draftTemplate, last_updated_at: dayjs().toDate() }), disabled: isTitleEmpty || this.isSaving, startIcon: this.isSaving ? h(Icon, { name: "Loader2", addClass: "size-4 animate-spin" }) : undefined })))))));
     }
     static get is() { return "quick-message-add-template"; }
     static get originalStyleUrls() {

package/dist/collection/components/quick-message-add-template/quick-message-add-template.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"quick-message-add-template.js","sourceRoot":"","sources":["../../../src/components/quick-message-add-template/quick-message-add-template.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAClD,OAAO,EAAE,CAAC,EAAE,MAAM,SAAS,CAAC;AAC5B,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAC;AAQzD,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,OAAO,gCAAgC;IACnC,WAAW,CAAa;IACxB,UAAU,CAAgD;IAC1D,UAAU,CAAgD;IAC1D,eAAe,CAA6B;IAC5C,IAAI,GAA0B,MAAM,CAAC;IACrC,QAAQ,GAAY,KAAK,CAAC;IAEzB,aAAa,GAA8B,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAE/E,iBAAiB;QACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACtE,CAAC;IAGS,2BAA2B,CAAC,WAAuC;QAC3E,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC;IAC7D,CAAC;IAEO,mBAAmB,CAAC,QAAoC;QAC9D,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,OAAO;gBACL,EAAE,EAAE,WAAW,GAAG,IAAI,CAAC,GAAG,EAAE;gBAC5B,KAAK,EAAE,EAAE;gBACT,eAAe,EAAE,KAAK,EAAE,CAAC,MAAM,EAAE;gBACjC,eAAe,EAAE,YAAY;gBAC7B,UAAU,EAAE,KAAK;gBACjB,QAAQ,EAAE,EAAE;aACb,CAAC;QACJ,CAAC;QAED,OAAO;YACL,GAAG,QAAQ;YACX,QAAQ,EAAE,CAAC,QAAQ,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;gBAClD,GAAG,OAAO;gBACV,OAAO,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC;gBACrC,OAAO,EAAE,OAAO,CAAC,QAAQ;gBACzB,QAAQ,EAAE,CAAC,OAAO,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;oBAC/C,GAAG,IAAI;oBACP,OAAO,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC;iBACnC,CAAC,CAAC;aACJ,CAAC,CAAC;SACJ,CAAC;IACJ,CAAC;IAEgB,eAAe,GAAG;QACjC,EAAE,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,CAAC,CAAC,uBAAuB,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,MAAM,CAAC,EAAE;QAC5G,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,CAAC,sBAAsB,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,QAAQ,CAAC,EAAE;QACxG,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,EAAE;QACrF,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC,CAAC,yBAAyB,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,WAAW,CAAC,EAAE;QAChH,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,EAAE;KACrF,CAAC;IAEM,kBAAkB,CAAC,IAAqC;QAC9D,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,OAAO;QACT,CAAC;QACD,IAAI,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,MAAM,IAAI,CAAC,EAAE,CAAC;YAC5C,OAAO;QACT,CAAC;QACD,IAAI,QAAQ,GAAuC,EAAE,CAAC;QACtD,IAAI,IAAI,KAAK,WAAW,EAAE,CAAC;YACzB,QAAQ,GAAG;gBACT;oBACE,EAAE,EAAE,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE;oBACxB,KAAK,EAAE,EAAE;oBACT,WAAW,EAAE,EAAE;oBACf,OAAO,EAAE,EAAE;iBACZ;aACF,CAAC;QACJ,CAAC;QACD,MAAM,UAAU,GAAG;YACjB,EAAE,EAAE,UAAU,GAAG,IAAI,CAAC,GAAG,EAAE;YAC3B,IAAI;YACJ,OAAO,EAAE,EAAE;YACX,KAAK,EAAE,EAAE;YACT,SAAS,EAAE,QAAQ;YACnB,IAAI,EAAE,EAAE;YACR,aAAa,EAAE,EAAE;SAClB,CAAC;QACF,IAAI,CAAC,aAAa,GAAG,EAAE,GAAG,IAAI,CAAC,aAAa,EAAE,QAAQ,EAAE,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,QAAQ,EAAE,UAAU,CAAC,EAAE,CAAC;IACzG,CAAC;IAEO,qBAAqB,CAAC,OAAoC;QAChE,IAAI,OAAO,CAAC,IAAI,KAAK,WAAW,IAAI,OAAO,CAAC,SAAS,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACnE,IAAI,CAAC,aAAa,GAAG,EAAE,GAAG,IAAI,CAAC,aAAa,EAAE,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC;YACvH,OAAO;QACT,CAAC;QACD,IAAI,CAAC,aAAa,GAAG,EAAE,GAAG,IAAI,CAAC,aAAa,EAAE,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IACtI,CAAC;IAEO,qBAAqB,CAAC,SAAiB;QAC7C,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,OAAO;QACT,CAAC;QACD,IAAI,CAAC,aAAa,GAAG;YACnB,GAAG,IAAI,CAAC,aAAa;YACrB,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE,KAAK,SAAS,CAAC;SAClF,CAAC;IACJ,CAAC;IAEO,sBAAsB,CAAC,SAAiB,EAAE,SAAwB;QACxE,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,OAAO;QACT,CAAC;QACD,MAAM,YAAY,GAAG,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,SAAS,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE,KAAK,SAAS,CAAC,CAAC;QAChG,IAAI,YAAY,KAAK,CAAC,CAAC,EAAE,CAAC;YACxB,OAAO;QACT,CAAC;QAED,MAAM,WAAW,GAAG,SAAS,KAAK,IAAI,CAAC,CAAC,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC,CAAC,YAAY,GAAG,CAAC,CAAC;QAC7E,IAAI,WAAW,GAAG,CAAC,IAAI,WAAW,IAAI,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;YACzE,OAAO;QACT,CAAC;QAED,MAAM,cAAc,GAAG,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACxD,CAAC,cAAc,CAAC,YAAY,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,CAAC,CAAC;QAE1H,IAAI,CAAC,aAAa,GAAG;YACnB,GAAG,IAAI,CAAC,aAAa;YACrB,QAAQ,EAAE,cAAc;SACzB,CAAC;IACJ,CAAC;IAEO,qBAAqB,CAAC,OAAoC;QAChE,QAAQ,OAAO,CAAC,IAAI,EAAE,CAAC;YACrB,KAAK,MAAM;gBACT,OAAO,kCAA4B,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,CAAC,KAA+C,EAAE,EAAE,CAAC,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,MAAM,CAAC,GAAI,CAAC;YAC1K,KAAK,QAAQ;gBACX,OAAO,oCAA8B,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,CAAC,KAA+C,EAAE,EAAE,CAAC,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,MAAM,CAAC,GAAI,CAAC;YAC5K,KAAK,OAAO;gBACV,OAAO,mCAA6B,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,CAAC,KAA+C,EAAE,EAAE,CAAC,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,MAAM,CAAC,GAAI,CAAC;YAC3K,KAAK,WAAW;gBACd,OAAO,CACL,uCAAiC,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,CAAC,KAA+C,EAAE,EAAE,CAAC,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,MAAM,CAAC,GAAI,CACtK,CAAC;YACJ,KAAK,OAAO;gBACV,OAAO,mCAA6B,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,CAAC,KAA+C,EAAE,EAAE,CAAC,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,MAAM,CAAC,GAAI,CAAC;YAC3K;gBACE,OAAO,IAAI,CAAC;QAChB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QACvC,MAAM,CAAC,GAAG,cAAc,EAAE,CAAC;QAC3B,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,KAAK,WAAW,CAAC;QAC7C,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC;QAC5C,MAAM,YAAY,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC;QAE5D,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,oCAAoC,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;gBAC/E,4DAAK,KAAK,EAAE,qDAAqD,KAAK,WAAW,KAAK,YAAY,EAAE,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,eAAe,EAAE;oBAC3I,4DAAK,KAAK,EAAC,mCAAmC;wBAC5C,2DAAI,KAAK,EAAC,4BAA4B,IACpC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,6BAA6B,CAAC,CAC7E;wBACN,+DAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,KAAK,EAAC,gBAAgB;4BAC7E,EAAC,IAAI,qDAAC,IAAI,EAAC,GAAG,GAAG,CACV,CACL;oBAEN,4DAAK,KAAK,EAAE,wEAAwE,KAAK,qBAAqB;wBAC5G,8DACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,gDAAgD,KAAK,iEAAiE,KAAK,WAAW,KAAK,iBAAiB,KAAK,EAAE,EAC1K,WAAW,EAAE,CAAC,CAAC,6BAA6B,CAAC,EAC7C,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,KAAK,EAC/B,OAAO,EAAE,CAAC,CAAC,EAAE;gCACX,IAAI,CAAC,aAAa,GAAG,EAAE,GAAG,IAAI,CAAC,aAAa,EAAE,KAAK,EAAG,CAAC,CAAC,MAA2B,CAAC,KAAK,EAAE,CAAC;4BAC9F,CAAC,GACD;wBACD,YAAY,IAAI,0DAAG,KAAK,EAAC,2BAA2B,IAAE,CAAC,CAAC,qCAAqC,CAAC,CAAK;wBACpG,6DAAM,KAAK,EAAC,cAAc;4BACvB,CAAC,CAAC,sCAAsC,CAAC;;4BAAG,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,MAAM;iCAC1E;wBACP,8DACG,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE;4BAClD,MAAM,OAAO,GAAG,KAAK,KAAK,CAAC,CAAC;4BAC5B,MAAM,MAAM,GAAG,KAAK,KAAK,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;4BAEhE,OAAO,CACL,WAAK,GAAG,EAAE,OAAO,CAAC,EAAE,EAAE,KAAK,EAAC,6BAA6B;gCACvD,WAAK,KAAK,EAAC,yBAAyB;oCAClC,WAAK,KAAK,EAAC,kCAAkC;wCAC1C,CAAC,OAAO,IAAI,CACX,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,8GAA8G,KAAK,mBAAmB,KAAK,8FAA8F,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,gBAAgB,EAAE,gBACxS,CAAC,CAAC,uBAAuB,CAAC,EACtC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,sBAAsB,CAAC,OAAO,CAAC,EAAE,EAAE,IAAI,CAAC;4CAE9E,EAAC,IAAI,IAAC,IAAI,EAAC,WAAW,EAAC,QAAQ,EAAC,QAAQ,GAAG,CACpC,CACV;wCACA,CAAC,MAAM,IAAI,CACV,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,8GAA8G,KAAK,mBAAmB,KAAK,8FAA8F,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,gBAAgB,EAAE,gBACxS,CAAC,CAAC,yBAAyB,CAAC,EACxC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,sBAAsB,CAAC,OAAO,CAAC,EAAE,EAAE,MAAM,CAAC;4CAEhF,EAAC,IAAI,IAAC,IAAI,EAAC,aAAa,EAAC,QAAQ,EAAC,QAAQ,GAAG,CACtC,CACV,CACG;oCACN,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,sMAAsM,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,gBAAgB,EAAE,gBACrQ,CAAC,CAAC,QAAQ,CAAC,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,EAAE,CAAC;wCAEvE,EAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAC,QAAQ,GAAG,CACjC,CACL;gCACN,WAAK,KAAK,EAAC,wBAAwB,IAAE,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAO,CAC3E,CACP,CAAC;wBACJ,CAAC,CAAC,CACE,CACF;oBACN,4DAAK,KAAK,EAAE,wDAAwD,KAAK,EAAE,IACxE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAC3C,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,eAAe,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,gBAAgB,4GAA4G,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,6BAA6B,KAAK,EACvP,mBAAmB,KAAK,EAAE,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,MAAM,CAAC,OAAO,EAAE;wBAEjD,EAAC,IAAI,IAAC,IAAI,EAAE,MAAM,CAAC,IAAI,EAAE,QAAQ,EAAE,yBAAyB,KAAK,EAAE,GAAI;wBACvE,YAAM,KAAK,EAAC,eAAe,IAAE,MAAM,CAAC,KAAK,CAAQ,CAC1C,CACV,CAAC,CACE;oBACN,4DAAK,KAAK,EAAC,oCAAoC;wBAC7C,EAAC,OAAO,qDAAC,OAAO,EAAC,UAAU,EAAC,KAAK,EAAE,CAAC,CAAC,QAAQ,CAAC,EAAE,SAAS,QAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,GAAI;wBACvH,UAAU,CAAC,CAAC,CAAC,CACZ,EAAC,OAAO,IACN,OAAO,EAAC,SAAS,EACjB,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,EAChB,SAAS,QACT,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,GAAG,IAAI,CAAC,aAAa,EAAE,eAAe,EAAE,KAAK,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,EAC5F,QAAQ,EAAE,YAAY,IAAI,IAAI,CAAC,QAAQ,EACvC,SAAS,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAC,IAAI,IAAC,IAAI,EAAC,SAAS,EAAC,QAAQ,EAAC,qBAAqB,GAAG,CAAC,CAAC,CAAC,SAAS,GAC7F,CACH,CAAC,CAAC,CAAC,CACF,EAAC,OAAO,IACN,OAAO,EAAC,SAAS,EACjB,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,EAChB,SAAS,QACT,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,GAAG,IAAI,CAAC,aAAa,EAAE,eAAe,EAAE,KAAK,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,EAC5F,QAAQ,EAAE,YAAY,IAAI,IAAI,CAAC,QAAQ,EACvC,SAAS,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAC,IAAI,IAAC,IAAI,EAAC,SAAS,EAAC,QAAQ,EAAC,qBAAqB,GAAG,CAAC,CAAC,CAAC,SAAS,GAC7F,CACH,CACG,CACF,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { configStore } from '../../store/store';\nimport { useTranslation } from '../../utils/utils';\nimport { Icon } from '../internal-component/icon';\nimport { t } from 'i18next';\nimport { ZButton } from '../internal-component/z-button';\nimport {\n QuickMessageTemplate as QuickMessageTemplateModel,\n QuickMessageTemplateContent,\n QuickMessageTemplateContentType,\n QuickMessageTemplateMenuListItem,\n} from '../../store/type';\nimport type { TemplateSelectionMode } from '../quick-message-modal/template-selection';\nimport dayjs from 'dayjs';\n\n@Component({\n tag: 'quick-message-add-template',\n styleUrl: 'quick-message-add-template.css',\n})\nexport class QuickMessageAddTemplateComponent {\n @Prop() handleClose: () => void;\n @Prop() handleSave: (template: QuickMessageTemplateModel) => void;\n @Prop() handleSend: (template: QuickMessageTemplateModel) => void;\n @Prop() initialTemplate?: QuickMessageTemplateModel;\n @Prop() mode: TemplateSelectionMode = 'edit';\n @Prop() isSaving: boolean = false;\n\n @State() draftTemplate: QuickMessageTemplateModel = this.createTemplateState();\n\n componentWillLoad() {\n this.draftTemplate = this.createTemplateState(this.initialTemplate);\n }\n\n @Watch('initialTemplate')\n protected handleInitialTemplateChange(newTemplate?: QuickMessageTemplateModel) {\n this.draftTemplate = this.createTemplateState(newTemplate);\n }\n\n private createTemplateState(template?: QuickMessageTemplateModel): QuickMessageTemplateModel {\n if (!template) {\n return {\n id: 'template-' + Date.now(),\n title: '',\n last_updated_at: dayjs().toDate(),\n last_updated_by: 'zignal-bot',\n isExpanded: false,\n contents: [],\n };\n }\n\n return {\n ...template,\n contents: (template.contents \|\| []).map(content => ({\n ...content,\n buttons: [...(content.buttons \|\| [])],\n fileUrl: content.file_url,\n menuList: (content.menu_list \|\| []).map(menu => ({\n ...menu,\n buttons: [...(menu.buttons \|\| [])],\n })),\n })),\n };\n }\n\n private readonly templateOptions = [\n { icon: 'MessageSquare', label: t('quick_message.message'), onClick: () => this.addTemplateContent('text') },\n { icon: 'Touchpad', label: t('quick_message.button'), onClick: () => this.addTemplateContent('button') },\n { icon: 'Image', label: t('image'), onClick: () => this.addTemplateContent('image') },\n { icon: 'SquareMenu', label: t('quick_message.menu_list'), onClick: () => this.addTemplateContent('menu_list') },\n { icon: 'Play', label: t('video'), onClick: () => this.addTemplateContent('video') },\n ];\n\n private addTemplateContent(type: QuickMessageTemplateContentType) {\n if (this.isSaving) {\n return;\n }\n if (this.draftTemplate.contents.length >= 5) {\n return;\n }\n let menuList: QuickMessageTemplateMenuListItem[] = [];\n if (type === 'menu_list') {\n menuList = [\n {\n id: 'menu-' + Date.now(),\n title: '',\n description: '',\n buttons: [],\n },\n ];\n }\n const newContent = {\n id: 'content-' + Date.now(),\n type,\n buttons: [],\n files: [],\n menu_list: menuList,\n text: '',\n translateText: '',\n };\n this.draftTemplate = { ...this.draftTemplate, contents: [...this.draftTemplate.contents, newContent] };\n }\n\n private updateTemplateContent(content: QuickMessageTemplateContent) {\n if (content.type === 'menu_list' && content.menu_list.length === 0) {\n this.draftTemplate = { ...this.draftTemplate, contents: this.draftTemplate.contents.filter(c => c.id !== content.id) };\n return;\n }\n this.draftTemplate = { ...this.draftTemplate, contents: this.draftTemplate.contents.map(c => (c.id === content.id ? content : c)) };\n }\n\n private removeTemplateContent(contentId: string) {\n if (this.isSaving) {\n return;\n }\n this.draftTemplate = {\n ...this.draftTemplate,\n contents: this.draftTemplate.contents.filter(content => content.id !== contentId),\n };\n }\n\n private reorderTemplateContent(contentId: string, direction: 'up' \| 'down') {\n if (this.isSaving) {\n return;\n }\n const currentIndex = this.draftTemplate.contents.findIndex(content => content.id === contentId);\n if (currentIndex === -1) {\n return;\n }\n\n const targetIndex = direction === 'up' ? currentIndex - 1 : currentIndex + 1;\n if (targetIndex < 0 \|\| targetIndex >= this.draftTemplate.contents.length) {\n return;\n }\n\n const updatedContent = [...this.draftTemplate.contents];\n [updatedContent[currentIndex], updatedContent[targetIndex]] = [updatedContent[targetIndex], updatedContent[currentIndex]];\n\n this.draftTemplate = {\n ...this.draftTemplate,\n contents: updatedContent,\n };\n }\n\n private renderTemplateContent(content: QuickMessageTemplateContent) {\n switch (content.type) {\n case 'text':\n return <quick-message-text-content content={content} onContentChange={(event: CustomEvent<QuickMessageTemplateContent>) => this.updateTemplateContent(event.detail)} />;\n case 'button':\n return <quick-message-button-content content={content} onContentChange={(event: CustomEvent<QuickMessageTemplateContent>) => this.updateTemplateContent(event.detail)} />;\n case 'image':\n return <quick-message-image-content content={content} onContentChange={(event: CustomEvent<QuickMessageTemplateContent>) => this.updateTemplateContent(event.detail)} />;\n case 'menu_list':\n return (\n <quick-message-menu-list-content content={content} onContentChange={(event: CustomEvent<QuickMessageTemplateContent>) => this.updateTemplateContent(event.detail)} />\n );\n case 'video':\n return <quick-message-video-content content={content} onContentChange={(event: CustomEvent<QuickMessageTemplateContent>) => this.updateTemplateContent(event.detail)} />;\n default:\n return null;\n }\n }\n\n render() {\n const theme = configStore.get('theme');\n const t = useTranslation();\n const isSendMode = this.mode === 'edit-send';\n const isCreateMode = this.mode === 'create';\n const isTitleEmpty = this.draftTemplate.title.trim() === '';\n\n return (\n <Host>\n <div class=\"quick-message-add-template-overlay\" onClick={() => this.handleClose()}>\n <div class={`quick-message-add-template-container z-background-${theme} z-text-${theme} px-6 py-4`} onClick={event => event.stopPropagation()}>\n <div class=\"flex items-center justify-between\">\n <h2 class=\"mb-4 text-lg font-semibold\">{\n isCreateMode ? t('quick_message.add_template') : t('quick_message.edit_template')\n }</h2>\n <button type=\"button\" onClick={() => this.handleClose()} class=\"cursor-pointer\">\n <Icon name=\"X\" />\n </button>\n </div>\n\n <div class={`flex flex-col h-full gap-2 overflow-auto rounded-xl z-border-primary-${theme} border-[1.5px] p-3`}>\n <input\n type=\"text\"\n class={`w-full px-4 py-2 rounded-xl z-border-primary-${theme} border-[1.5px] focus:outline-none ring-primary z-placeholder-${theme} z-text-${theme} z-background-${theme}`}\n placeholder={t('quick_message.template_name')}\n value={this.draftTemplate.title}\n onInput={e => {\n this.draftTemplate = { ...this.draftTemplate, title: (e.target as HTMLInputElement).value };\n }}\n />\n {isTitleEmpty && <p class=\"pl-2 text-xs text-red-500\">{t('quick_message.template_name_warning')}</p>}\n <span class=\"text-xs pl-2\">\n {t('quick_message.count_template_content')} {this.draftTemplate.contents.length}/5\n </span>\n <div>\n {this.draftTemplate.contents.map((content, index) => {\n const isFirst = index === 0;\n const isLast = index === this.draftTemplate.contents.length - 1;\n\n return (\n <div key={content.id} class=\"mt-2 flex items-start gap-3\">\n <div class=\"flex items-center gap-2\">\n <div class=\"flex flex-col items-center gap-2\">\n {!isFirst && (\n <button\n type=\"button\"\n class={`inline-flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full border-[1.5px] z-border-primary-${theme} z-text-primary-${theme} transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-200 ${this.isSaving ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'}`}\n aria-label={t('quick_message.move_up')}\n disabled={this.isSaving}\n onClick={() => !this.isSaving && this.reorderTemplateContent(content.id, 'up')}\n >\n <Icon name=\"ChevronUp\" addClass=\"size-4\" />\n </button>\n )}\n {!isLast && (\n <button\n type=\"button\"\n class={`inline-flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full border-[1.5px] z-border-primary-${theme} z-text-primary-${theme} transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-200 ${this.isSaving ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'}`}\n aria-label={t('quick_message.move_down')}\n disabled={this.isSaving}\n onClick={() => !this.isSaving && this.reorderTemplateContent(content.id, 'down')}\n >\n <Icon name=\"ChevronDown\" addClass=\"size-4\" />\n </button>\n )}\n </div>\n <button\n type=\"button\"\n class={`inline-flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full border border-red-500 text-red-500 transition-colors hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-red-200 ${this.isSaving ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'}`}\n aria-label={t('remove')}\n disabled={this.isSaving}\n onClick={() => !this.isSaving && this.removeTemplateContent(content.id)}\n >\n <Icon name=\"Trash2\" addClass=\"size-4\" />\n </button>\n </div>\n <div class=\"flex-1 overflow-hidden\">{this.renderTemplateContent(content)}</div>\n </div>\n );\n })}\n </div>\n </div>\n <div class={`mt-2 flex rounded-xl border-[1.5px] z-border-primary-${theme}`}>\n {this.templateOptions.map((option, index) => (\n <button\n type=\"button\"\n class={`flex flex-1 ${this.isSaving ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'} flex-col items-center justify-center gap-1 px-4 py-2 text-xs font-medium text-center focus:outline-none ${index === 0 ? '' : `border-l z-border-primary-${theme}`\n } z-text-primary-${theme}`}\n disabled={this.isSaving}\n onClick={() => !this.isSaving && option.onClick()}\n >\n <Icon name={option.icon} addClass={`size-4 z-text-primary-${theme}`} />\n <span class=\"max-sm:hidden\">{option.label}</span>\n </button>\n ))}\n </div>\n <div class=\"mt-2 grid w-full grid-cols-2 gap-2\">\n <ZButton variant=\"outlined\" label={t('cancel')} fullWidth disabled={this.isSaving} onClick={() => this.handleClose()} />\n {isSendMode ? (\n <ZButton\n variant=\"primary\"\n label={t('send')}\n fullWidth\n onClick={() => this.handleSend({ ...this.draftTemplate, last_updated_at: dayjs().toDate() })}\n disabled={isTitleEmpty \|\| this.isSaving}\n startIcon={this.isSaving ? <Icon name=\"Loader2\" addClass=\"size-4 animate-spin\" /> : undefined}\n />\n ) : (\n <ZButton\n variant=\"primary\"\n label={t('save')}\n fullWidth\n onClick={() => this.handleSave({ ...this.draftTemplate, last_updated_at: dayjs().toDate() })}\n disabled={isTitleEmpty \|\| this.isSaving}\n startIcon={this.isSaving ? <Icon name=\"Loader2\" addClass=\"size-4 animate-spin\" /> : undefined}\n />\n )}\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"quick-message-add-template.js","sourceRoot":"","sources":["../../../src/components/quick-message-add-template/quick-message-add-template.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { configStore } from '../../store/store';\nimport { useTranslation } from '../../utils/utils';\nimport { Icon } from '../internal-component/icon';\nimport { t } from 'i18next';\nimport { ZButton } from '../internal-component/z-button';\nimport {\n QuickMessageTemplate as QuickMessageTemplateModel,\n QuickMessageTemplateContent,\n QuickMessageTemplateContentType,\n QuickMessageTemplateMenuListItem,\n} from '../../store/type';\nimport type { TemplateSelectionMode } from '../quick-message-modal/template-selection';\nimport dayjs from 'dayjs';\n\n@Component({\n tag: 'quick-message-add-template',\n styleUrl: 'quick-message-add-template.css',\n})\nexport class QuickMessageAddTemplateComponent {\n @Prop() handleClose: () => void;\n @Prop() handleSave: (template: QuickMessageTemplateModel) => void;\n @Prop() handleSend: (template: QuickMessageTemplateModel) => void;\n @Prop() initialTemplate?: QuickMessageTemplateModel;\n @Prop() mode: TemplateSelectionMode = 'edit';\n @Prop() isSaving: boolean = false;\n\n @State() draftTemplate: QuickMessageTemplateModel = this.createTemplateState();\n\n componentWillLoad() {\n this.draftTemplate = this.createTemplateState(this.initialTemplate);\n }\n\n @Watch('initialTemplate')\n protected handleInitialTemplateChange(newTemplate?: QuickMessageTemplateModel) {\n this.draftTemplate = this.createTemplateState(newTemplate);\n }\n\n private createTemplateState(template?: QuickMessageTemplateModel): QuickMessageTemplateModel {\n if (!template) {\n return {\n id: 'template-' + Date.now(),\n title: '',\n last_updated_at: dayjs().toDate(),\n last_updated_by: 'zignal-bot',\n isExpanded: false,\n contents: [],\n };\n }\n\n return {\n ...template,\n contents: (template.contents \|\| []).map(content => ({\n ...content,\n buttons: [...(content.buttons \|\| [])],\n fileUrl: content.file_url,\n menuList: (content.menu_list \|\| []).map(menu => ({\n ...menu,\n buttons: [...(menu.buttons \|\| [])],\n })),\n })),\n };\n }\n\n private readonly templateOptions = [\n { icon: 'MessageSquare', label: t('quick_message.message'), onClick: () => this.addTemplateContent('text') },\n { icon: 'Touchpad', label: t('quick_message.button'), onClick: () => this.addTemplateContent('button') },\n { icon: 'Image', label: t('image'), onClick: () => this.addTemplateContent('image') },\n { icon: 'SquareMenu', label: t('quick_message.menu_list'), onClick: () => this.addTemplateContent('menu_list') },\n { icon: 'Play', label: t('video'), onClick: () => this.addTemplateContent('video') },\n ];\n\n private addTemplateContent(type: QuickMessageTemplateContentType) {\n if (this.isSaving) {\n return;\n }\n if (this.draftTemplate.contents.length >= 5) {\n return;\n }\n let menuList: QuickMessageTemplateMenuListItem[] = [];\n if (type === 'menu_list') {\n menuList = [\n {\n id: 'menu-' + Date.now(),\n title: '',\n description: '',\n buttons: [],\n },\n ];\n }\n const newContent = {\n id: 'content-' + Date.now(),\n type,\n buttons: [],\n files: [],\n menu_list: menuList,\n text: '',\n translateText: '',\n };\n this.draftTemplate = { ...this.draftTemplate, contents: [...this.draftTemplate.contents, newContent] };\n }\n\n private updateTemplateContent(content: QuickMessageTemplateContent) {\n if (content.type === 'menu_list' && content.menu_list.length === 0) {\n this.draftTemplate = { ...this.draftTemplate, contents: this.draftTemplate.contents.filter(c => c.id !== content.id) };\n return;\n }\n this.draftTemplate = { ...this.draftTemplate, contents: this.draftTemplate.contents.map(c => (c.id === content.id ? content : c)) };\n }\n\n private removeTemplateContent(contentId: string) {\n if (this.isSaving) {\n return;\n }\n this.draftTemplate = {\n ...this.draftTemplate,\n contents: this.draftTemplate.contents.filter(content => content.id !== contentId),\n };\n }\n\n private reorderTemplateContent(contentId: string, direction: 'up' \| 'down') {\n if (this.isSaving) {\n return;\n }\n const currentIndex = this.draftTemplate.contents.findIndex(content => content.id === contentId);\n if (currentIndex === -1) {\n return;\n }\n\n const targetIndex = direction === 'up' ? currentIndex - 1 : currentIndex + 1;\n if (targetIndex < 0 \|\| targetIndex >= this.draftTemplate.contents.length) {\n return;\n }\n\n const updatedContent = [...this.draftTemplate.contents];\n [updatedContent[currentIndex], updatedContent[targetIndex]] = [updatedContent[targetIndex], updatedContent[currentIndex]];\n\n this.draftTemplate = {\n ...this.draftTemplate,\n contents: updatedContent,\n };\n }\n\n private renderTemplateContent(content: QuickMessageTemplateContent) {\n switch (content.type) {\n case 'text':\n return <quick-message-text-content content={content} onContentChange={(event: CustomEvent<QuickMessageTemplateContent>) => this.updateTemplateContent(event.detail)} />;\n case 'button':\n return <quick-message-button-content content={content} onContentChange={(event: CustomEvent<QuickMessageTemplateContent>) => this.updateTemplateContent(event.detail)} />;\n case 'image':\n return <quick-message-image-content content={content} onContentChange={(event: CustomEvent<QuickMessageTemplateContent>) => this.updateTemplateContent(event.detail)} />;\n case 'menu_list':\n return (\n <quick-message-menu-list-content content={content} onContentChange={(event: CustomEvent<QuickMessageTemplateContent>) => this.updateTemplateContent(event.detail)} />\n );\n case 'video':\n return <quick-message-video-content content={content} onContentChange={(event: CustomEvent<QuickMessageTemplateContent>) => this.updateTemplateContent(event.detail)} />;\n default:\n return null;\n }\n }\n\n render() {\n const theme = configStore.get('theme');\n const t = useTranslation();\n const isSendMode = this.mode === 'edit-send';\n const isCreateMode = this.mode === 'create';\n const isTitleEmpty = this.draftTemplate.title.trim() === '';\n\n return (\n <Host data-theme={theme}>\n <div class=\"quick-message-add-template-overlay\" onClick={() => this.handleClose()}>\n <div class={`quick-message-add-template-container bg-background text-surface px-6 py-4`} onClick={event => event.stopPropagation()}>\n <div class=\"flex items-center justify-between\">\n <h2 class=\"mb-4 text-lg font-semibold\">{\n isCreateMode ? t('quick_message.add_template') : t('quick_message.edit_template')\n }</h2>\n <button type=\"button\" onClick={() => this.handleClose()} class=\"cursor-pointer\">\n <Icon name=\"X\" />\n </button>\n </div>\n\n <div class={`flex flex-col h-full gap-2 overflow-auto rounded-xl border-primary border-[1.5px] p-3`}>\n <input\n type=\"text\"\n class={`w-full px-4 py-2 rounded-xl border-primary border-[1.5px] focus:outline-none ring-primary placeholder-surface text-surface bg-background`}\n placeholder={t('quick_message.template_name')}\n value={this.draftTemplate.title}\n onInput={e => {\n this.draftTemplate = { ...this.draftTemplate, title: (e.target as HTMLInputElement).value };\n }}\n />\n {isTitleEmpty && <p class=\"pl-2 text-xs text-red-500\">{t('quick_message.template_name_warning')}</p>}\n <span class=\"text-xs pl-2\">\n {t('quick_message.count_template_content')} {this.draftTemplate.contents.length}/5\n </span>\n <div>\n {this.draftTemplate.contents.map((content, index) => {\n const isFirst = index === 0;\n const isLast = index === this.draftTemplate.contents.length - 1;\n\n return (\n <div key={content.id} class=\"mt-2 flex items-start gap-3\">\n <div class=\"flex items-center gap-2\">\n <div class=\"flex flex-col items-center gap-2\">\n {!isFirst && (\n <button\n type=\"button\"\n class={`inline-flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full border-[1.5px] border-primary text-primary transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-200 ${this.isSaving ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'}`}\n aria-label={t('quick_message.move_up')}\n disabled={this.isSaving}\n onClick={() => !this.isSaving && this.reorderTemplateContent(content.id, 'up')}\n >\n <Icon name=\"ChevronUp\" addClass=\"size-4\" />\n </button>\n )}\n {!isLast && (\n <button\n type=\"button\"\n class={`inline-flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full border-[1.5px] border-primary text-primary transition-colors hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-200 ${this.isSaving ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'}`}\n aria-label={t('quick_message.move_down')}\n disabled={this.isSaving}\n onClick={() => !this.isSaving && this.reorderTemplateContent(content.id, 'down')}\n >\n <Icon name=\"ChevronDown\" addClass=\"size-4\" />\n </button>\n )}\n </div>\n <button\n type=\"button\"\n class={`inline-flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full border border-red-500 text-red-500 transition-colors hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-red-200 ${this.isSaving ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'}`}\n aria-label={t('remove')}\n disabled={this.isSaving}\n onClick={() => !this.isSaving && this.removeTemplateContent(content.id)}\n >\n <Icon name=\"Trash2\" addClass=\"size-4\" />\n </button>\n </div>\n <div class=\"flex-1 overflow-hidden\">{this.renderTemplateContent(content)}</div>\n </div>\n );\n })}\n </div>\n </div>\n <div class={`mt-2 flex rounded-xl border-[1.5px] border-primary`}>\n {this.templateOptions.map((option, index) => (\n <button\n type=\"button\"\n class={`flex flex-1 ${this.isSaving ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'} flex-col items-center justify-center gap-1 px-4 py-2 text-xs font-medium text-center focus:outline-none ${index === 0 ? '' : `border-l border-primary`\n } text-primary`}\n disabled={this.isSaving}\n onClick={() => !this.isSaving && option.onClick()}\n >\n <Icon name={option.icon} addClass={`size-4 text-primary`} />\n <span class=\"max-sm:hidden\">{option.label}</span>\n </button>\n ))}\n </div>\n <div class=\"mt-2 grid w-full grid-cols-2 gap-2\">\n <ZButton variant=\"outlined\" label={t('cancel')} fullWidth disabled={this.isSaving} onClick={() => this.handleClose()} />\n {isSendMode ? (\n <ZButton\n variant=\"primary\"\n label={t('send')}\n fullWidth\n onClick={() => this.handleSend({ ...this.draftTemplate, last_updated_at: dayjs().toDate() })}\n disabled={isTitleEmpty \|\| this.isSaving}\n startIcon={this.isSaving ? <Icon name=\"Loader2\" addClass=\"size-4 animate-spin\" /> : undefined}\n />\n ) : (\n <ZButton\n variant=\"primary\"\n label={t('save')}\n fullWidth\n onClick={() => this.handleSave({ ...this.draftTemplate, last_updated_at: dayjs().toDate() })}\n disabled={isTitleEmpty \|\| this.isSaving}\n startIcon={this.isSaving ? <Icon name=\"Loader2\" addClass=\"size-4 animate-spin\" /> : undefined}\n />\n )}\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/quick-message-add-template/quick-message-button-content.js CHANGED Viewed

@@ -119,7 +119,7 @@ export class QuickMessageButtonContentComponent {
         const text = this.content.text ?? '';
         const buttons = this.content.buttons || [];
         const t = useTranslation();
-        return (h("div", { class: "flex flex-col gap-4 items-end" }, h("div", { class: `relative w-full max-w-md rounded-xl border-[1.5px] p-4 pb-8 focus:outline-none ring-primary z-border-primary-${theme}` }, h("textarea", { value: text, onInput: this.handleTextChange, placeholder: this.placeholder, class: `w-full z-border-primary-${theme} pr-16 focus:outline-none ring-primary rounded-xl text-sm z-background-${theme}`, maxLength: this.maxLength, rows: 3 }), h("div", { class: `flex items-center justify-end text-sm z-text-gray-${theme}` }, text.length, "/", this.maxLength), h(QuickMessageTemplateButtonList, { theme: theme, buttons: buttons, maxButtonCount: this.maxButtonCount, addButtonLabel: t('quick_message.add_button'), onButtonClick: button => this.openCreateButtonDialog(button), onAddButton: () => this.openCreateButtonDialog(), onReorderButton: (buttonId, direction) => this.reorderButtons(buttonId, direction), listClass: "mt-2 flex flex-col gap-3", buttonClass: "px-2" }), h(QuickMessageTemplateButtonDialog, { theme: theme, isOpen: this.isShowCreateButtonDialog, isEditing: !!this.editingButtonId, label: this.createButtonLabel, actionValue: this.createButtonAction, actionType: this.createButtonType, maxButtonNameLength: this.maxButtonNameLength, onLabelInput: value => (this.createButtonLabel = value), onActionInput: value => (this.createButtonAction = value), onActionTypeChange: type => this.setCreateButtonType(type), onClose: () => this.closeCreateButtonDialog(), onSave: () => this.handleCreateButtonSave(), onDelete: this.editingButtonId ? () => this.handleDeleteEditingButton() : undefined }))));
+        return (h("div", { class: "flex flex-col gap-4 items-end", "data-theme": theme }, h("div", { class: `relative w-full max-w-md rounded-xl border-[1.5px] p-4 pb-8 focus:outline-none ring-primary border-primary` }, h("textarea", { value: text, onInput: this.handleTextChange, placeholder: this.placeholder, class: `w-full border-primary pr-16 focus:outline-none ring-primary rounded-xl text-sm bg-background`, maxLength: this.maxLength, rows: 3 }), h("div", { class: `flex items-center justify-end text-sm text-theme-gray` }, text.length, "/", this.maxLength), h(QuickMessageTemplateButtonList, { buttons: buttons, maxButtonCount: this.maxButtonCount, addButtonLabel: t('quick_message.add_button'), onButtonClick: button => this.openCreateButtonDialog(button), onAddButton: () => this.openCreateButtonDialog(), onReorderButton: (buttonId, direction) => this.reorderButtons(buttonId, direction), listClass: "mt-2 flex flex-col gap-3", buttonClass: "px-2" }), h(QuickMessageTemplateButtonDialog, { isOpen: this.isShowCreateButtonDialog, isEditing: !!this.editingButtonId, label: this.createButtonLabel, actionValue: this.createButtonAction, actionType: this.createButtonType, maxButtonNameLength: this.maxButtonNameLength, onLabelInput: value => (this.createButtonLabel = value), onActionInput: value => (this.createButtonAction = value), onActionTypeChange: type => this.setCreateButtonType(type), onClose: () => this.closeCreateButtonDialog(), onSave: () => this.handleCreateButtonSave(), onDelete: this.editingButtonId ? () => this.handleDeleteEditingButton() : undefined }))));
     }
     static get is() { return "quick-message-button-content"; }
     static get properties() {

package/dist/collection/components/quick-message-add-template/quick-message-button-content.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"quick-message-button-content.js","sourceRoot":"","sources":["../../../src/components/quick-message-add-template/quick-message-button-content.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Prop, State, h } from '@stencil/core';\nimport { configStore } from '../../store/store';\nimport { QuickMessageTemplateButton, QuickMessageTemplateButtonAction, QuickMessageTemplateContent } from '../../store/type';\nimport { useTranslation } from '../../utils/utils';\nimport { QuickMessageTemplateButtonList } from './quick-message-template-button-list';\nimport { QuickMessageTemplateButtonDialog } from './quick-message-template-button-dialog';\nimport { isValidTelephoneNumber, isValidUrl } from '../../utils/validators';\n\n@Component({\n tag: 'quick-message-button-content',\n})\nexport class QuickMessageButtonContentComponent {\n @Prop() content: QuickMessageTemplateContent;\n @Prop() maxLength: number = 640;\n @Prop() maxButtonCount: number = 3;\n @Prop() maxButtonNameLength: number = 20;\n @Prop() placeholder: string = 'พิมพ์ข้อความที่นี่';\n\n @Event({ bubbles: true, composed: true }) contentChange!: EventEmitter<QuickMessageTemplateContent>;\n\n @State() isShowCreateButtonDialog: boolean = false;\n @State() createButtonLabel: string = '';\n @State() createButtonAction: string = '';\n @State() createButtonType: QuickMessageTemplateButtonAction = 'text';\n @State() editingButtonId?: string;\n\n private emitContent(update: Partial<QuickMessageTemplateContent>) {\n if (!this.content) {\n return;\n }\n\n this.contentChange.emit({ ...this.content, ...update });\n }\n\n private updateButtons(updater: (buttons: QuickMessageTemplateButton[]) => QuickMessageTemplateButton[]) {\n if (!this.content) {\n return;\n }\n\n const currentButtons = this.content.buttons \|\| [];\n const nextButtons = updater(currentButtons);\n this.emitContent({ buttons: nextButtons });\n }\n\n private reorderButtons(buttonId: string, direction: 'up' \| 'down') {\n this.updateButtons(current => {\n const index = current.findIndex(button => button.id === buttonId);\n if (index === -1) {\n return current;\n }\n\n const targetIndex = direction === 'up' ? index - 1 : index + 1;\n if (targetIndex < 0 \|\| targetIndex >= current.length) {\n return current;\n }\n\n const nextButtons = [...current];\n [nextButtons[index], nextButtons[targetIndex]] = [nextButtons[targetIndex], nextButtons[index]];\n return nextButtons;\n });\n }\n\n private readonly handleTextChange = (event: Event) => {\n const target = event.target as HTMLTextAreaElement;\n this.emitContent({ text: target.value });\n };\n\n private openCreateButtonDialog(button?: QuickMessageTemplateButton) {\n if (button) {\n this.editingButtonId = button.id;\n this.createButtonLabel = button.text \|\| '';\n this.createButtonAction = button.action \|\| '';\n this.createButtonType = button.action_type;\n } else {\n this.editingButtonId = undefined;\n this.createButtonLabel = '';\n this.createButtonAction = '';\n this.createButtonType = 'text';\n }\n\n this.isShowCreateButtonDialog = true;\n }\n\n private closeCreateButtonDialog() {\n this.isShowCreateButtonDialog = false;\n this.editingButtonId = undefined;\n }\n\n private handleCreateButtonSave() {\n const label = this.createButtonLabel.trim();\n const actionType = this.createButtonType;\n const trimmedActionValue = this.createButtonAction.trim();\n const actionValue = actionType === 'text' ? undefined : trimmedActionValue;\n\n const isActionInvalid =\n actionType !== 'text' &&\n (!trimmedActionValue \|\| (actionType === 'url' && !isValidUrl(trimmedActionValue)) \|\| (actionType === 'tel' && !isValidTelephoneNumber(trimmedActionValue)));\n\n if (!label \|\| isActionInvalid) {\n return;\n }\n\n if (this.editingButtonId) {\n const updatedButton: QuickMessageTemplateButton = {\n id: this.editingButtonId,\n action_type: actionType,\n text: label,\n action: actionValue,\n };\n\n this.updateButtons(current => current.map(button => (button.id === this.editingButtonId ? updatedButton : button)));\n } else {\n const newButton: QuickMessageTemplateButton = {\n id: `button-${Date.now()}`,\n action_type: actionType,\n text: label,\n action: actionValue,\n };\n\n this.updateButtons(current => [...current, newButton]);\n }\n\n this.closeCreateButtonDialog();\n }\n\n private setCreateButtonType(type: QuickMessageTemplateButtonAction) {\n this.createButtonType = type;\n if (type === 'text') {\n this.createButtonAction = '';\n }\n }\n\n private handleDeleteEditingButton() {\n if (!this.editingButtonId) {\n return;\n }\n\n this.updateButtons(current => current.filter(button => button.id !== this.editingButtonId));\n this.closeCreateButtonDialog();\n }\n\n render() {\n if (!this.content) {\n return null;\n }\n\n const theme = configStore.get('theme');\n const text = this.content.text ?? '';\n const buttons = this.content.buttons \|\| [];\n const t = useTranslation();\n\n return (\n <div class=\"flex flex-col gap-4 items-end\">\n <div class={`relative w-full max-w-md rounded-xl border-[1.5px] p-4 pb-8 focus:outline-none ring-primary z-border-primary-${theme}`}>\n <textarea\n value={text}\n onInput={this.handleTextChange}\n placeholder={this.placeholder}\n class={`w-full z-border-primary-${theme} pr-16 focus:outline-none ring-primary rounded-xl text-sm z-background-${theme}`}\n maxLength={this.maxLength}\n rows={3}\n />\n <div class={`flex items-center justify-end text-sm z-text-gray-${theme}`}>\n {text.length}/{this.maxLength}\n </div>\n\n <QuickMessageTemplateButtonList\n theme={theme}\n buttons={buttons}\n maxButtonCount={this.maxButtonCount}\n addButtonLabel={t('quick_message.add_button')}\n onButtonClick={button => this.openCreateButtonDialog(button)}\n onAddButton={() => this.openCreateButtonDialog()}\n onReorderButton={(buttonId, direction) => this.reorderButtons(buttonId, direction)}\n listClass=\"mt-2 flex flex-col gap-3\"\n buttonClass=\"px-2\"\n />\n\n <QuickMessageTemplateButtonDialog\n theme={theme}\n isOpen={this.isShowCreateButtonDialog}\n isEditing={!!this.editingButtonId}\n label={this.createButtonLabel}\n actionValue={this.createButtonAction}\n actionType={this.createButtonType}\n maxButtonNameLength={this.maxButtonNameLength}\n onLabelInput={value => (this.createButtonLabel = value)}\n onActionInput={value => (this.createButtonAction = value)}\n onActionTypeChange={type => this.setCreateButtonType(type)}\n onClose={() => this.closeCreateButtonDialog()}\n onSave={() => this.handleCreateButtonSave()}\n onDelete={this.editingButtonId ? () => this.handleDeleteEditingButton() : undefined}\n />\n </div>\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"quick-message-button-content.js","sourceRoot":"","sources":["../../../src/components/quick-message-add-template/quick-message-button-content.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Prop, State, h } from '@stencil/core';\nimport { configStore } from '../../store/store';\nimport { QuickMessageTemplateButton, QuickMessageTemplateButtonAction, QuickMessageTemplateContent } from '../../store/type';\nimport { useTranslation } from '../../utils/utils';\nimport { QuickMessageTemplateButtonList } from './quick-message-template-button-list';\nimport { QuickMessageTemplateButtonDialog } from './quick-message-template-button-dialog';\nimport { isValidTelephoneNumber, isValidUrl } from '../../utils/validators';\n\n@Component({\n tag: 'quick-message-button-content',\n})\nexport class QuickMessageButtonContentComponent {\n @Prop() content: QuickMessageTemplateContent;\n @Prop() maxLength: number = 640;\n @Prop() maxButtonCount: number = 3;\n @Prop() maxButtonNameLength: number = 20;\n @Prop() placeholder: string = 'พิมพ์ข้อความที่นี่';\n\n @Event({ bubbles: true, composed: true }) contentChange!: EventEmitter<QuickMessageTemplateContent>;\n\n @State() isShowCreateButtonDialog: boolean = false;\n @State() createButtonLabel: string = '';\n @State() createButtonAction: string = '';\n @State() createButtonType: QuickMessageTemplateButtonAction = 'text';\n @State() editingButtonId?: string;\n\n private emitContent(update: Partial<QuickMessageTemplateContent>) {\n if (!this.content) {\n return;\n }\n\n this.contentChange.emit({ ...this.content, ...update });\n }\n\n private updateButtons(updater: (buttons: QuickMessageTemplateButton[]) => QuickMessageTemplateButton[]) {\n if (!this.content) {\n return;\n }\n\n const currentButtons = this.content.buttons \|\| [];\n const nextButtons = updater(currentButtons);\n this.emitContent({ buttons: nextButtons });\n }\n\n private reorderButtons(buttonId: string, direction: 'up' \| 'down') {\n this.updateButtons(current => {\n const index = current.findIndex(button => button.id === buttonId);\n if (index === -1) {\n return current;\n }\n\n const targetIndex = direction === 'up' ? index - 1 : index + 1;\n if (targetIndex < 0 \|\| targetIndex >= current.length) {\n return current;\n }\n\n const nextButtons = [...current];\n [nextButtons[index], nextButtons[targetIndex]] = [nextButtons[targetIndex], nextButtons[index]];\n return nextButtons;\n });\n }\n\n private readonly handleTextChange = (event: Event) => {\n const target = event.target as HTMLTextAreaElement;\n this.emitContent({ text: target.value });\n };\n\n private openCreateButtonDialog(button?: QuickMessageTemplateButton) {\n if (button) {\n this.editingButtonId = button.id;\n this.createButtonLabel = button.text \|\| '';\n this.createButtonAction = button.action \|\| '';\n this.createButtonType = button.action_type;\n } else {\n this.editingButtonId = undefined;\n this.createButtonLabel = '';\n this.createButtonAction = '';\n this.createButtonType = 'text';\n }\n\n this.isShowCreateButtonDialog = true;\n }\n\n private closeCreateButtonDialog() {\n this.isShowCreateButtonDialog = false;\n this.editingButtonId = undefined;\n }\n\n private handleCreateButtonSave() {\n const label = this.createButtonLabel.trim();\n const actionType = this.createButtonType;\n const trimmedActionValue = this.createButtonAction.trim();\n const actionValue = actionType === 'text' ? undefined : trimmedActionValue;\n\n const isActionInvalid =\n actionType !== 'text' &&\n (!trimmedActionValue \|\| (actionType === 'url' && !isValidUrl(trimmedActionValue)) \|\| (actionType === 'tel' && !isValidTelephoneNumber(trimmedActionValue)));\n\n if (!label \|\| isActionInvalid) {\n return;\n }\n\n if (this.editingButtonId) {\n const updatedButton: QuickMessageTemplateButton = {\n id: this.editingButtonId,\n action_type: actionType,\n text: label,\n action: actionValue,\n };\n\n this.updateButtons(current => current.map(button => (button.id === this.editingButtonId ? updatedButton : button)));\n } else {\n const newButton: QuickMessageTemplateButton = {\n id: `button-${Date.now()}`,\n action_type: actionType,\n text: label,\n action: actionValue,\n };\n\n this.updateButtons(current => [...current, newButton]);\n }\n\n this.closeCreateButtonDialog();\n }\n\n private setCreateButtonType(type: QuickMessageTemplateButtonAction) {\n this.createButtonType = type;\n if (type === 'text') {\n this.createButtonAction = '';\n }\n }\n\n private handleDeleteEditingButton() {\n if (!this.editingButtonId) {\n return;\n }\n\n this.updateButtons(current => current.filter(button => button.id !== this.editingButtonId));\n this.closeCreateButtonDialog();\n }\n\n render() {\n if (!this.content) {\n return null;\n }\n\n const theme = configStore.get('theme');\n const text = this.content.text ?? '';\n const buttons = this.content.buttons \|\| [];\n const t = useTranslation();\n\n return (\n <div class=\"flex flex-col gap-4 items-end\" data-theme={theme}>\n <div class={`relative w-full max-w-md rounded-xl border-[1.5px] p-4 pb-8 focus:outline-none ring-primary border-primary`}>\n <textarea\n value={text}\n onInput={this.handleTextChange}\n placeholder={this.placeholder}\n class={`w-full border-primary pr-16 focus:outline-none ring-primary rounded-xl text-sm bg-background`}\n maxLength={this.maxLength}\n rows={3}\n />\n <div class={`flex items-center justify-end text-sm text-theme-gray`}>\n {text.length}/{this.maxLength}\n </div>\n\n <QuickMessageTemplateButtonList\n buttons={buttons}\n maxButtonCount={this.maxButtonCount}\n addButtonLabel={t('quick_message.add_button')}\n onButtonClick={button => this.openCreateButtonDialog(button)}\n onAddButton={() => this.openCreateButtonDialog()}\n onReorderButton={(buttonId, direction) => this.reorderButtons(buttonId, direction)}\n listClass=\"mt-2 flex flex-col gap-3\"\n buttonClass=\"px-2\"\n />\n\n <QuickMessageTemplateButtonDialog\n isOpen={this.isShowCreateButtonDialog}\n isEditing={!!this.editingButtonId}\n label={this.createButtonLabel}\n actionValue={this.createButtonAction}\n actionType={this.createButtonType}\n maxButtonNameLength={this.maxButtonNameLength}\n onLabelInput={value => (this.createButtonLabel = value)}\n onActionInput={value => (this.createButtonAction = value)}\n onActionTypeChange={type => this.setCreateButtonType(type)}\n onClose={() => this.closeCreateButtonDialog()}\n onSave={() => this.handleCreateButtonSave()}\n onDelete={this.editingButtonId ? () => this.handleDeleteEditingButton() : undefined}\n />\n </div>\n </div>\n );\n }\n}\n"]}

package/dist/collection/components/quick-message-add-template/quick-message-image-content.js CHANGED Viewed

@@ -49,10 +49,10 @@ export class QuickMessageImageContentComponent {
         const theme = configStore.get('theme');
         const t = useTranslation();
         const preview = this.content.file_url;
-        const borderClass = `z-border-primary-${theme}`;
-        const primaryTextClass = `z-text-primary-${theme}`;
-        const grayTextClass = `z-text-gray-${theme}`;
-        return (h("div", { class: "flex justify-end" }, h("div", { class: "max-w-xs h-[220px] aspect-square" }, h("input", { type: "file", accept: "image/*", class: "hidden", ref: el => (this.fileInput = el), onChange: this.handleFileChange }), preview ? (h("div", { class: `group h-[220px] relative w-full overflow-hidden rounded-[18px] border-[1.5px] z-background-${theme} shadow-sm ${borderClass}` }, h("img", { src: preview, alt: "preview-message-image", class: "h-[220px] w-full object-cover", loading: "lazy" }), h("div", { class: "absolute inset-0 flex flex-col items-center justify-center gap-2 bg-slate-900/60 opacity-0 transition-opacity group-hover:opacity-100" }, h("button", { type: "button", class: `inline-flex items-center gap-2 rounded-full z-background-${theme} px-4 py-2 text-xs font-semibold text-slate-700 shadow cursor-pointer`, onClick: this.handleSelectClick }, h(Icon, { name: "Image", addClass: `size-4 z-text-${theme}` }), h("span", { class: `z-text-${theme}` }, t('quick_message.change_image'))), h("button", { type: "button", class: `inline-flex items-center gap-2 rounded-full z-background-${theme} px-4 py-2 text-xs font-semibold text-red-500 shadow cursor-pointer`, onClick: this.handleRemoveImage }, h(Icon, { name: "Trash2", addClass: "size-4" }), h("span", { class: "text-red-500" }, t('remove')))))) : (h("button", { type: "button", class: `flex w-full flex-col items-center justify-center gap-2 rounded-[18px] border-[1.5px] border-current z-background-${theme} px-8 py-12 text-center shadow-sm transition-colors hover:z-background-${theme} ${borderClass} cursor-pointer`, onClick: this.handleSelectClick }, h(Icon, { name: "Image", addClass: `size-12 ${primaryTextClass}` }), h("span", { class: `text-base font-semibold leading-tight ${primaryTextClass}` }, "+ ", t('quick_message.add_image')), h("span", { class: `text-[13px] font-medium ${grayTextClass}` }, t('quick_message.image_size_hint')))), this.errorMessage && h("p", { class: "mt-2 text-xs text-red-500" }, this.errorMessage))));
+        const borderClass = `border-primary`;
+        const primaryTextClass = `text-primary`;
+        const grayTextClass = `text-theme-gray`;
+        return (h("div", { class: "flex justify-end", "data-theme": theme }, h("div", { class: "max-w-xs h-[220px] aspect-square" }, h("input", { type: "file", accept: "image/*", class: "hidden", ref: el => (this.fileInput = el), onChange: this.handleFileChange }), preview ? (h("div", { class: `group h-[220px] relative w-full overflow-hidden rounded-[18px] border-[1.5px] bg-background shadow-sm ${borderClass}` }, h("img", { src: preview, alt: "preview-message-image", class: "h-[220px] w-full object-cover", loading: "lazy" }), h("div", { class: "absolute inset-0 flex flex-col items-center justify-center gap-2 bg-slate-900/60 opacity-0 transition-opacity group-hover:opacity-100" }, h("button", { type: "button", class: `inline-flex items-center gap-2 rounded-full bg-background px-4 py-2 text-xs font-semibold text-slate-700 shadow cursor-pointer`, onClick: this.handleSelectClick }, h(Icon, { name: "Image", addClass: `size-4 text-surface` }), h("span", { class: `text-surface` }, t('quick_message.change_image'))), h("button", { type: "button", class: `inline-flex items-center gap-2 rounded-full bg-background px-4 py-2 text-xs font-semibold text-red-500 shadow cursor-pointer`, onClick: this.handleRemoveImage }, h(Icon, { name: "Trash2", addClass: "size-4" }), h("span", { class: "text-red-500" }, t('remove')))))) : (h("button", { type: "button", class: `flex w-full flex-col items-center justify-center gap-2 rounded-[18px] border-[1.5px] border-current bg-background px-8 py-12 text-center shadow-sm transition-colors hover:bg-background ${borderClass} cursor-pointer`, onClick: this.handleSelectClick }, h(Icon, { name: "Image", addClass: `size-12 ${primaryTextClass}` }), h("span", { class: `text-base font-semibold leading-tight ${primaryTextClass}` }, "+ ", t('quick_message.add_image')), h("span", { class: `text-[13px] font-medium ${grayTextClass}` }, t('quick_message.image_size_hint')))), this.errorMessage && h("p", { class: "mt-2 text-xs text-red-500" }, this.errorMessage))));
     }
     static get is() { return "quick-message-image-content"; }
     static get properties() {