@cognigy/chat-components-vue 0.1.0

package/LICENSE

@@ -0,0 +1,20 @@
+Cognigy Commercial License
+
+Copyright (c) 2024 Cognigy GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to use
+the Software for purposes of interacting with Cognigy.AI, including without limitation 
+the rights to use, copy, modify or merge copies of the Software, and to permit persons 
+to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,178 @@
+# @cognigy/chat-components-vue
+
+[![npm version](https://img.shields.io/npm/v/@cognigy/chat-components-vue.svg)](https://www.npmjs.com/package/@cognigy/chat-components-vue)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+[![Node.js](https://img.shields.io/badge/node-%3E%3D22.12.0-brightgreen.svg)](https://nodejs.org/)
+[![Vue 3](https://img.shields.io/badge/vue-3.x-42b883.svg)](https://vuejs.org/)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.x-blue.svg)](https://www.typescriptlang.org/)
+
+Vue 3 chat message components for building conversational interfaces. A Vue port of [@cognigy/chat-components](https://github.com/Cognigy/chat-components).
+
+## Features
+
+- **Data-driven rendering** - Single `Message` component handles all message types automatically
+- **Rich message types** - Text, images, video, audio, galleries, lists, buttons, and more
+- **Plugin system** - Extend with custom message types
+- **TypeScript** - Full type safety with exported types
+- **Accessible** - ARIA attributes and keyboard navigation
+- **Themeable** - CSS variables for customization
+
+## Installation
+
+```bash
+npm install @cognigy/chat-components-vue
+```
+
+## Quick Start
+
+```vue
+<template>
+  <div class="chat-container">
+    <Message
+      v-for="msg in messages"
+      :key="msg.traceId"
+      :message="msg"
+      :config="chatConfig"
+      :action="handleAction"
+    />
+    <TypingIndicator v-if="isTyping" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  Message,
+  TypingIndicator,
+  type IMessage,
+  type ChatConfig
+} from '@cognigy/chat-components-vue'
+
+// Import styles
+import '@cognigy/chat-components-vue/style.css'
+
+const messages = ref<IMessage[]>([])
+const isTyping = ref(false)
+
+const chatConfig: ChatConfig = {
+  settings: {
+    layout: {
+      botOutputMaxWidthPercentage: 80,
+    },
+  },
+}
+
+const handleAction = (text: string, data: Record<string, any> | null) => {
+  console.log('User action:', text, data)
+}
+</script>
+```
+
+## Components
+
+### Message Renderer
+
+| Component | Description |
+|-----------|-------------|
+| [Message](./docs/components/message.md) | Main renderer - automatically routes to correct message type |
+
+### Message Types
+
+| Component | Description |
+|-----------|-------------|
+| [TextMessage](./docs/components/text-message.md) | Plain text with HTML/Markdown support |
+| [ImageMessage](./docs/components/image-message.md) | Images with lightbox |
+| [VideoMessage](./docs/components/video-message.md) | Video player (direct, YouTube, Vimeo) |
+| [AudioMessage](./docs/components/audio-message.md) | Audio player |
+| [TextWithButtons](./docs/components/text-with-buttons.md) | Text with action buttons or quick replies |
+| [Gallery](./docs/components/gallery.md) | Horizontal carousel of cards |
+| [List](./docs/components/list.md) | Vertical list with items and actions |
+| [FileMessage](./docs/components/file-message.md) | File attachments with download |
+| [DatePicker](./docs/components/date-picker.md) | Date selection display |
+| [AdaptiveCard](./docs/components/adaptive-card.md) | Microsoft Adaptive Cards |
+
+### UI Components
+
+| Component | Description |
+|-----------|-------------|
+| [TypingIndicator](./docs/components/typing-indicator.md) | Animated typing dots |
+| [ChatBubble](./docs/components/chat-bubble.md) | Message bubble wrapper |
+| [ActionButtons](./docs/components/action-buttons.md) | Button group for actions |
+| [ChatEvent](./docs/components/chat-event.md) | System event notifications |
+| [Typography](./docs/components/typography.md) | Text with style variants |
+
+## Custom Message Types
+
+Extend with your own message types using plugins:
+
+```vue
+<script setup lang="ts">
+import { Message, type MessagePlugin } from '@cognigy/chat-components-vue'
+import CustomCard from './CustomCard.vue'
+
+const plugins: MessagePlugin[] = [
+  {
+    name: 'CustomCard',
+    match: (message) => message.data?.customType === 'card',
+    component: CustomCard,
+  }
+]
+</script>
+
+<template>
+  <Message :message="msg" :plugins="plugins" :action="handleAction" />
+</template>
+```
+
+## Theming
+
+Customize colors via the `config.settings.colors` object:
+
+```typescript
+const chatConfig: ChatConfig = {
+  settings: {
+    colors: {
+      // Primary colors (buttons, links, focus states)
+      primaryColor: '#1976d2',
+      primaryColorHover: '#1565c0',
+      primaryColorFocus: '#1976d2',
+      primaryContrastColor: '#ffffff',
+
+      // Message bubble backgrounds
+      botMessageColor: '#f5f5f5',
+      userMessageColor: '#1976d2',
+      agentMessageColor: '#e8f4fd',
+
+      // Message text colors
+      botMessageContrastColor: '#1a1a1a',
+      userMessageContrastColor: '#ffffff',
+      agentMessageContrastColor: '#1a1a1a',
+
+      // Message bubble borders
+      borderBotMessage: 'transparent',
+      borderUserMessage: 'transparent',
+      borderAgentMessage: 'transparent',
+
+      // Link color
+      textLinkColor: '#1976d2',
+    },
+  },
+}
+```
+
+All color properties are optional and have sensible defaults.
+
+## Documentation
+
+- [Component API Reference](./docs/components/README.md) - Props, events, and usage
+- [Message Data Structures](./docs/data-structures/README.md) - Backend integration guide
+- [Consumer Guide](./docs/CONSUMER_GUIDE.md) - Installation and CI/CD setup
+
+## Requirements
+
+- Vue 3.4+
+- Node.js 22.12+
+
+## License
+
+MIT

package/dist/assets/svg/ArrowBackIcon.vue.d.ts

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    width?: string;
+    height?: string;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    height: string;
+    width: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, SVGSVGElement>;
+export default _default;

package/dist/assets/svg/AudioPauseIcon.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, SVGSVGElement>;
+export default _default;

package/dist/assets/svg/AudioPlayIcon.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, SVGSVGElement>;
+export default _default;

package/dist/assets/svg/CloseIcon.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, SVGSVGElement>;
+export default _default;

package/dist/assets/svg/DownloadIcon.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, SVGSVGElement>;
+export default _default;

package/dist/assets/svg/VideoPlayIcon.vue.d.ts

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    width?: string;
+    height?: string;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    height: string;
+    width: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, SVGSVGElement>;
+export default _default;

package/dist/assets/svg/index.d.ts

@@ -0,0 +1,7 @@
+export { default as CloseIcon } from './CloseIcon.vue';
+export { default as DownloadIcon } from './DownloadIcon.vue';
+export { default as VideoPlayIcon } from './VideoPlayIcon.vue';
+export { default as AudioPlayIcon } from './AudioPlayIcon.vue';
+export { default as AudioPauseIcon } from './AudioPauseIcon.vue';
+export { default as ArrowBackIcon } from './ArrowBackIcon.vue';
+export { default as LinkIcon } from '../../components/common/LinkIcon.vue';

package/dist/chat-components-vue.css

@@ -0,0 +1 @@
+._bubble_ebnr7_2{border-radius:15px;border:1px solid var(--cc-border-bot-message, transparent);padding:12px;max-width:295px;width:max-content;box-sizing:border-box;margin-block-end:12px;word-break:break-word;white-space:pre-wrap}._bubble_ebnr7_2._disableBorder_ebnr7_14{border:none;background:none!important}article.bot ._bubble_ebnr7_2{background:var(--cc-background-bot-message, #f5f5f5);color:var(--cc-bot-message-contrast-color, #1a1a1a)}article.agent ._bubble_ebnr7_2{background:var(--cc-background-agent-message, #e8f4fd);border-color:var(--cc-border-agent-message, transparent);color:var(--cc-agent-message-contrast-color, #1a1a1a)}article.user ._bubble_ebnr7_2{background:var(--cc-background-user-message, #1976d2);border-color:var(--cc-border-user-message, transparent);color:var(--cc-user-message-contrast-color, #ffffff)}article:not(.user) ._incoming_ebnr7_36,article.user ._incoming_ebnr7_36{margin-inline-start:none}article:not(.user) ._outgoing_ebnr7_41,article.user ._outgoing_ebnr7_41{margin-inline-start:auto}._text_dkd42_2{white-space:pre-wrap;overflow-wrap:break-word;display:inline}._text_dkd42_2 a:focus-visible{outline:2px solid var(--cc-primary-color-focus);outline-offset:2px}._text_dkd42_2 img{max-width:100%}._markdown_dkd42_17{display:inline;white-space:normal}._markdown_dkd42_17>p:only-child{margin:0}._markdown_dkd42_17 *:first-child{margin-top:0}._markdown_dkd42_17 *:last-child{margin-bottom:0}._markdown_dkd42_17 p:last-child{display:inline}._markdown_dkd42_17 table{border-collapse:separate;border-spacing:0;margin-bottom:4px;margin-top:4px}._markdown_dkd42_17 th{text-align:left;border-top-width:1px;border-bottom-width:1px;border-left-width:1px;border-right-width:0px;background-color:var(--cc-black-90);border-style:solid;border-color:var(--cc-black-80);padding:4px 12px}._markdown_dkd42_17 th:first-child{border-top-left-radius:6px}._markdown_dkd42_17 th:last-child{border-top-right-radius:6px;border-right-width:1px}._markdown_dkd42_17 td{border-style:solid;border-bottom-width:1px;border-left-width:1px;border-top-width:0px;border-right-width:0px;border-color:var(--cc-black-80);padding:4px 12px}._markdown_dkd42_17 td:last-child{border-right-width:1px}._markdown_dkd42_17 tbody tr:last-child td:first-child{border-bottom-left-radius:6px}._markdown_dkd42_17 tbody tr:last-child td:last-child{border-bottom-right-radius:6px}._h1-semibold_1g8ig_2{font-family:Figtree;font-size:2.125rem;font-style:normal;font-weight:600;line-height:2.55rem}._h2-regular_1g8ig_10{font-family:Figtree;font-size:1.125rem;font-style:normal;font-weight:400;line-height:1.4625rem}._h2-semibold_1g8ig_18{font-family:Figtree;font-size:1.125rem;font-style:normal;font-weight:600;line-height:1.4625rem}._title1-regular_1g8ig_26{font-family:Figtree;font-size:1rem;font-style:normal;font-weight:400;line-height:1.4rem}._title1-semibold_1g8ig_34{font-family:Figtree;font-size:1rem;font-style:normal;font-weight:600;line-height:1.4rem}._title2-regular_1g8ig_42{font-family:Figtree;font-size:.75rem;font-style:normal;font-weight:400;line-height:1.05rem}._title2-semibold_1g8ig_50{font-family:Figtree;font-size:.75rem;font-style:normal;font-weight:600;line-height:.975rem}._body-regular_1g8ig_58{font-family:Figtree;font-size:.875rem;font-style:normal;font-weight:400;line-height:1.225rem}._body-semibold_1g8ig_66{font-family:Figtree;font-size:.875rem;font-style:normal;font-weight:600;line-height:1.1375rem}._copy-medium_1g8ig_74{font-family:Figtree;font-size:.75rem;font-style:normal;font-weight:500;line-height:1.05rem}._cta-semibold_1g8ig_82{font-family:Figtree;font-size:.875rem;font-style:normal;font-weight:600;line-height:1.1375rem}svg[data-v-7917dee1]{flex-shrink:0}button._button_14rzz_2,a._button_14rzz_2{border-radius:19px;padding:8px 10px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;background:var(--cc-primary-color);color:var(--cc-primary-contrast-color);border:none;outline:none;position:relative}a._button_14rzz_2.phone-number-or-url-anchor{background:var(--cc-primary-color)}button._button_14rzz_2 svg,a._button_14rzz_2 svg,button._button_14rzz_2 path,a._button_14rzz_2 svg path{fill:var(--cc-primary-contrast-color);width:12px}button._button_14rzz_2:hover,a._button_14rzz_2:hover,button._button_14rzz_2:focus,a._button_14rzz_2:focus{background:var(--cc-primary-color-hover)}[data-cognigy-webchat-root] button._button_14rzz_2:focus-visible,[data-cognigy-webchat-root] a._button_14rzz_2:focus-visible,[data-cognigy-webchat-root] a._button_14rzz_2.phone-number-or-url-anchor:focus-visible{outline:2px solid var(--cc-primary-color-focus);outline-offset:2px;box-shadow:0 0 0 4px var(--cc-primary-contrast-color)}button._button_14rzz_2:disabled,button._button_14rzz_2:disabled:hover,button._button_14rzz_2:disabled:focus,a._button_14rzz_2._disabled_14rzz_50,a._button_14rzz_2._disabled_14rzz_50:hover,a._button_14rzz_2._disabled_14rzz_50:focus{background:var(--cc-primary-color-disabled);cursor:default;pointer-events:none}._buttonLabelWithImage_14rzz_58{margin-left:40px}._buttonImage_14rzz_62{width:100%;height:100%;object-fit:cover;border-top-left-radius:19px;border-bottom-left-radius:19px}._buttonImage_14rzz_62._imageDisabled_14rzz_70{opacity:.6}._buttonImageContainer_14rzz_74{display:flex;position:absolute;left:0;width:40px;height:100%;border-right:2px solid var(--cc-primary-contrast-color)}._wrapper_19nul_2{position:relative;border-radius:var(--cc-bubble-border-radius, 15px);max-width:295px;width:100%;outline:none}._wrapper_19nul_2 ._fixedImage_19nul_10,._wrapper_19nul_2 ._flexImage_19nul_11{border-top-left-radius:var(--cc-bubble-border-radius, 15px);border-top-right-radius:var(--cc-bubble-border-radius, 15px)}._wrapper_19nul_2 ._fixedImage_19nul_10:focus-visible,._wrapper_19nul_2 ._flexImage_19nul_11:focus-visible{outline:2px solid var(--cc-primary-color-focus, #1976d2)}._wrapper_19nul_2 img{border-radius:var(--cc-bubble-border-radius, 15px);width:100%;display:block;outline:none}._downloadable_19nul_28{background-color:var(--cc-white, #ffffff);cursor:pointer;border:1px solid var(--cc-black-80, rgba(0, 0, 0, .8))}._downloadable_19nul_28 img{border-bottom-left-radius:0;border-bottom-right-radius:0}._downloadable_19nul_28 img:hover,._downloadable_19nul_28 img:focus{opacity:.8}._flexImage_19nul_11 img{aspect-ratio:16/9;object-fit:cover;object-position:left}._fixedImage_19nul_10 img{height:auto}._downloadButtonWrapper_19nul_58{padding:16px}._brokenImage_19nul_62{aspect-ratio:16/9;width:100%;display:block;outline:none;border-radius:var(--cc-bubble-border-radius, 15px);background-color:var(--cc-black-80, rgba(0, 0, 0, .8))}._lightboxWrapper_19nul_72{position:fixed;z-index:5000;left:0;top:0;width:100%;height:100%;background-color:#000c;touch-action:none;overflow:hidden}._lightboxContent_19nul_84{position:relative;height:100%;width:100%}._fullImage_19nul_90{position:absolute;top:50%;left:50%;max-width:100%;max-height:100%;height:auto;transform:translate3d(-50%,-50%,0);overflow:hidden}._lightboxHeader_19nul_102{position:absolute;top:0;height:56px;width:100%;background-color:var(--cc-white, #ffffff);overflow:hidden;display:flex;justify-content:space-between}._caption_19nul_113{display:flex;align-items:center;margin-left:15px;color:var(--cc-black-10, #1a1a1a);font-weight:700;font-size:16px}._iconsGroup_19nul_122{display:flex;align-items:center;margin-right:10px}._icon_19nul_122{display:flex;align-items:center;justify-content:center;box-sizing:border-box;background-color:transparent;border:none;outline:none;margin:0;transition:background-color .1s ease-out,color .1s ease-out,fill .1s ease-out;color:var(--cc-black-10, #1a1a1a);border-radius:50%;cursor:pointer;width:40px;height:40px}._icon_19nul_122:hover,._icon_19nul_122:focus{background-color:var(--cc-black-95, #f5f5f5);opacity:.85}._icon_19nul_122:focus-visible{border:2px solid var(--cc-primary-color-focus, #1976d2)}._icon_19nul_122 svg{fill:var(--cc-black-10, #1a1a1a)}._wrapper_5exb7_2{border-radius:var(--cc-bubble-border-radius, 15px);max-width:295px;position:relative}._player_5exb7_8{aspect-ratio:16/9;max-width:295px;object-fit:cover;object-position:left;overflow:hidden;border-radius:var(--cc-bubble-border-radius, 15px);width:100%;display:block}._player_5exb7_8 video{max-width:295px;object-fit:cover;object-position:left;overflow:hidden}._wrapperWithButton_5exb7_26{border:1px solid var(--cc-black-80, rgba(0, 0, 0, .8))}._wrapperWithButton_5exb7_26 ._player_5exb7_8{border-bottom-left-radius:0;border-bottom-right-radius:0}._downloadButtonWrapper_5exb7_35{padding:16px;background-color:var(--cc-white, #ffffff);border-bottom-left-radius:var(--cc-bubble-border-radius, 15px);border-bottom-right-radius:var(--cc-bubble-border-radius, 15px)}._downloadButton_5exb7_35{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px;background-color:var(--cc-primary-color, #1976d2);color:var(--cc-primary-contrast-color, #ffffff);border:none;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600;transition:background-color .2s ease}._downloadButton_5exb7_35:hover{background-color:var(--cc-primary-color-hover, #1565c0)}._downloadButton_5exb7_35:focus-visible{outline:2px solid var(--cc-primary-color-focus, #1976d2);outline-offset:2px}._downloadIcon_5exb7_68{width:12px;height:12px}._downloadIcon_5exb7_68 :deep(path){fill:var(--cc-primary-contrast-color, #ffffff)}._playerWrapper_5exb7_77{position:relative}._playerWrapper_5exb7_77:focus ._player_5exb7_8,._player_5exb7_8:focus-within{outline:2px solid var(--cc-primary-color-focus, #1976d2)}._playerWrapper_5exb7_77:focus,._player_5exb7_8 video:focus{outline:none}._lightOverlay_5exb7_92{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--cc-black-10, #1a1a1a);border-radius:var(--cc-bubble-border-radius, 15px);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1}._lightOverlay_5exb7_92:hover,._lightOverlay_5exb7_92:focus{opacity:.85}._lightOverlay_5exb7_92:hover svg circle,._lightOverlay_5exb7_92:focus svg circle{fill-opacity:1}._wrapper_lhtu3_2{border-radius:var(--cc-bubble-border-radius, 15px);max-width:295px;position:relative;display:flex}._audioWrapper_lhtu3_9{display:flex;align-items:center;justify-content:space-between;height:52px;width:100%;gap:10px;background-color:var(--cc-white, #ffffff);border-radius:var(--cc-bubble-border-radius, 15px);border:1px solid var(--cc-black-80, rgba(0, 0, 0, .8));padding:0 12px}._audioWrapper_lhtu3_9 ._controls_lhtu3_22{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:16px;width:100%}._audioWrapper_lhtu3_9 ._downloadButton_lhtu3_31{background-color:transparent;border:none;outline:none;cursor:pointer;width:30px;height:30px}._audioWrapper_lhtu3_9 ._downloadButton_lhtu3_31:hover :deep(svg path){fill-opacity:.85}._audioWrapper_lhtu3_9 ._downloadButton_lhtu3_31:focus-visible{outline:2px solid var(--cc-primary-color-focus, #1976d2);outline-offset:2px}button._playButton_lhtu3_49{all:unset;outline:revert;line-height:0;display:block;cursor:pointer}button._playButton_lhtu3_49:hover,button._playButton_lhtu3_49:focus{outline:none}button._playButton_lhtu3_49:focus-visible{outline:2px solid var(--cc-primary-color-focus, #1976d2);outline-offset:2px}button._playButton_lhtu3_49:focus :deep(svg circle),button._playButton_lhtu3_49:hover :deep(svg circle){fill-opacity:.85}._progressBar_lhtu3_73{display:flex;width:100%}._progressBar_lhtu3_73 input[type=range]{-webkit-appearance:none;appearance:none;width:100%;cursor:pointer;outline:none;border-radius:var(--cc-bubble-border-radius, 15px);height:3px;background:var(--cc-black-80, rgba(0, 0, 0, .8))}._progressBar_lhtu3_73 input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:13px;width:13px;background-color:var(--cc-primary-color-focus, #1976d2);border-radius:50%;border:none;transition:.2s ease-in-out}._progressBar_lhtu3_73 input[type=range]::-moz-range-thumb{height:13px;width:13px;background-color:var(--cc-primary-color-focus, #1976d2);border-radius:50%;border:none;transition:.2s ease-in-out}._progressBar_lhtu3_73 input[type=range]::-webkit-slider-thumb:hover{box-shadow:0 0 0 7px var(--cc-primary-color-opacity-10, rgba(25, 118, 210, .1))}._progressBar_lhtu3_73 input[type=range]:active::-webkit-slider-thumb{box-shadow:0 0 0 9px var(--cc-primary-color-opacity-20, rgba(25, 118, 210, .2))}._progressBar_lhtu3_73 input[type=range]:focus::-webkit-slider-thumb{box-shadow:0 0 0 9px var(--cc-primary-color-opacity-20, rgba(25, 118, 210, .2))}._progressBar_lhtu3_73 input[type=range]::-moz-range-thumb:hover{box-shadow:0 0 0 7px var(--cc-primary-color-opacity-10, rgba(25, 118, 210, .1))}._progressBar_lhtu3_73 input[type=range]:active::-moz-range-thumb{box-shadow:0 0 0 9px var(--cc-primary-color-opacity-20, rgba(25, 118, 210, .2))}._progressBar_lhtu3_73 input[type=range]:focus::-moz-range-thumb{box-shadow:0 0 0 9px var(--cc-primary-color-opacity-20, rgba(25, 118, 210, .2))}._buttons_1ohyn_2{align-items:flex-start;display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;max-width:295px}ul._buttons_1ohyn_2{list-style:none;padding-inline-start:0;margin-block:0}ul._buttons_1ohyn_2 li{list-style:none}._buttons_1c7di_2{align-items:flex-start;display:flex;flex-direction:row;flex-wrap:wrap;margin-top:10px;max-width:295px}._slideItem_f4ada_2{position:relative;width:206px;overflow:hidden}._slideItem_f4ada_2 ._top_f4ada_8{position:relative;border-radius:var(--cc-bubble-border-radius, 15px)}._slideItem_f4ada_2 ._bottom_f4ada_13{border-bottom-left-radius:var(--cc-bubble-border-radius, 15px);border-bottom-right-radius:var(--cc-bubble-border-radius, 15px);border:1px solid var(--cc-black-80, rgba(0, 0, 0, .8));background-color:var(--cc-white, #ffffff);display:flex;flex-direction:column;gap:8px;padding:8px;cursor:pointer}._slideItem_f4ada_2 ._top_f4ada_8 img{aspect-ratio:206/150;object-fit:cover;object-position:left;border-radius:var(--cc-bubble-border-radius, 15px);width:100%;display:block;outline:none}._slideItem_f4ada_2 ._brokenImage_f4ada_35{aspect-ratio:206/150;width:100%;display:block;outline:none;border-radius:var(--cc-bubble-border-radius, 15px);background-color:var(--cc-black-80, rgba(0, 0, 0, .8))}._slideItem_f4ada_2 ._hasExtraInfo_f4ada_44,._slideItem_f4ada_2 ._hasExtraInfo_f4ada_44 img,._slideItem_f4ada_2 ._brokenImage_f4ada_35{border-bottom-left-radius:0;border-bottom-right-radius:0}._slideItem_f4ada_2 ._top_f4ada_8 h4{position:absolute;margin:0;margin-inline-start:8px;bottom:10px;color:var(--cc-white, #ffffff)}._slideItem_f4ada_2 ._bottom_f4ada_13 p{padding:0;margin:0}._slideItem_f4ada_2 ._bottom_f4ada_13 ._buttonListItem_f4ada_64{width:100%}:root{--swiper-theme-color: #007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function, initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translateZ(0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-slide,.swiper-3d .swiper-cube-shadow{transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper:before{content:"";flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper:before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper:before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-slide-shadow-bottom{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:#00000026}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,#00000080,#0000)}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color, var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}:is(.swiper:not(.swiper-watch-progress),.swiper-watch-progress .swiper-slide-visible) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color: #fff}.swiper-lazy-preloader-black{--swiper-preloader-color: #000}@keyframes swiper-preloader-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:root{--swiper-navigation-size: 44px}.swiper-button-prev,.swiper-button-next{position:absolute;width:var(--swiper-navigation-size);height:var(--swiper-navigation-size);z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color, var(--swiper-theme-color))}:is(.swiper-button-prev,.swiper-button-next).swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}:is(.swiper-button-prev,.swiper-button-next).swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled :is(.swiper-button-prev,.swiper-button-next){display:none!important}:is(.swiper-button-prev,.swiper-button-next) svg{width:100%;height:100%;object-fit:contain;transform-origin:center;fill:currentColor;pointer-events:none}.swiper-button-lock{display:none}.swiper-button-prev,.swiper-button-next{top:var(--swiper-navigation-top-offset, 50%);margin-top:calc(0px - (var(--swiper-navigation-size) / 2))}.swiper-button-prev{left:var(--swiper-navigation-sides-offset, 4px);right:auto}.swiper-button-prev .swiper-navigation-icon{transform:rotate(180deg)}.swiper-button-next{right:var(--swiper-navigation-sides-offset, 4px);left:auto}.swiper-horizontal .swiper-button-prev,.swiper-horizontal .swiper-button-next,.swiper-horizontal~.swiper-button-prev,.swiper-horizontal~.swiper-button-next{top:var(--swiper-navigation-top-offset, 50%);margin-top:calc(0px - (var(--swiper-navigation-size) / 2));margin-left:0}.swiper-horizontal .swiper-button-prev,.swiper-horizontal~.swiper-button-prev,.swiper-horizontal.swiper-rtl .swiper-button-next,.swiper-horizontal.swiper-rtl~.swiper-button-next{left:var(--swiper-navigation-sides-offset, 4px);right:auto}.swiper-horizontal .swiper-button-next,.swiper-horizontal~.swiper-button-next,.swiper-horizontal.swiper-rtl .swiper-button-prev,.swiper-horizontal.swiper-rtl~.swiper-button-prev{right:var(--swiper-navigation-sides-offset, 4px);left:auto}:is(.swiper-horizontal .swiper-button-prev,.swiper-horizontal~.swiper-button-prev,.swiper-horizontal.swiper-rtl .swiper-button-next,.swiper-horizontal.swiper-rtl~.swiper-button-next) .swiper-navigation-icon{transform:rotate(180deg)}:is(.swiper-horizontal.swiper-rtl .swiper-button-prev,.swiper-horizontal.swiper-rtl~.swiper-button-prev) .swiper-navigation-icon{transform:rotate(0)}.swiper-vertical .swiper-button-prev,.swiper-vertical .swiper-button-next,.swiper-vertical~.swiper-button-prev,.swiper-vertical~.swiper-button-next{left:var(--swiper-navigation-top-offset, 50%);right:auto;margin-left:calc(0px - (var(--swiper-navigation-size) / 2));margin-top:0}.swiper-vertical .swiper-button-prev,.swiper-vertical~.swiper-button-prev{top:var(--swiper-navigation-sides-offset, 4px);bottom:auto}:is(.swiper-vertical .swiper-button-prev,.swiper-vertical~.swiper-button-prev) .swiper-navigation-icon{transform:rotate(-90deg)}.swiper-vertical .swiper-button-next,.swiper-vertical~.swiper-button-next{bottom:var(--swiper-navigation-sides-offset, 4px);top:auto}:is(.swiper-vertical .swiper-button-next,.swiper-vertical~.swiper-button-next) .swiper-navigation-icon{transform:rotate(90deg)}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translateZ(0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-pagination-fraction,.swiper-pagination-custom,.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal{bottom:var(--swiper-pagination-bottom, 8px);top:var(--swiper-pagination-top, auto);left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active,.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));height:var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius, 50%);background:var(--swiper-pagination-bullet-inactive-color, #000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color, var(--swiper-theme-color))}.swiper-vertical>.swiper-pagination-bullets,.swiper-pagination-vertical.swiper-pagination-bullets{right:var(--swiper-pagination-right, 8px);left:var(--swiper-pagination-left, auto);top:50%;transform:translate3d(0,-50%,0)}:is(.swiper-vertical>.swiper-pagination-bullets,.swiper-pagination-vertical.swiper-pagination-bullets) .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap, 6px) 0;display:block}:is(.swiper-vertical>.swiper-pagination-bullets,.swiper-pagination-vertical.swiper-pagination-bullets).swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}:is(.swiper-vertical>.swiper-pagination-bullets,.swiper-pagination-vertical.swiper-pagination-bullets).swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}:is(.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-horizontal.swiper-pagination-bullets) .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap, 4px)}:is(.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-horizontal.swiper-pagination-bullets).swiper-pagination-bullets-dynamic{left:50%;transform:translate(-50%);white-space:nowrap}:is(.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-horizontal.swiper-pagination-bullets).swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color, inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, .25));position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color, var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size, 4px);left:0;top:0}.swiper-vertical>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite{width:var(--swiper-pagination-progressbar-size, 4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}._slideItem_9ucp4_2{position:relative;width:206px;overflow:hidden}article .swiper._wrapper_9ucp4_14{margin-left:-20px;margin-right:-20px;padding:0 20px 22px;position:relative;overflow:hidden;list-style:none;z-index:1;display:block}article .swiper._wrapper_9ucp4_14 .swiper-wrapper{position:relative;width:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:initial;box-sizing:content-box}article .swiper._wrapper_9ucp4_14 .swiper-android .swiper-slide,article .swiper._wrapper_9ucp4_14 .swiper-ios .swiper-slide,article .swiper._wrapper_9ucp4_14 .swiper-wrapper{transform:translateZ(0)}article .swiper._wrapper_9ucp4_14 .swiper-horizontal{touch-action:pan-y}article .swiper._wrapper_9ucp4_14 .swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}article .swiper._wrapper_9ucp4_14 .swiper-slide-invisible-blank{visibility:hidden}article .swiper._wrapper_9ucp4_14 .gallery-button-prev,article .swiper._wrapper_9ucp4_14 .gallery-button-next{position:absolute;top:67px;z-index:10;cursor:pointer;width:30px;height:30px;background-color:#00000080;border:none;border-radius:50%;display:flex;align-items:center;justify-content:center}article .swiper._wrapper_9ucp4_14 .gallery-button-prev{left:20px}article .swiper._wrapper_9ucp4_14 .gallery-button-next{right:20px;transform:rotate(180deg)}article .swiper._wrapper_9ucp4_14 .gallery-button-prev:dir(rtl){left:unset;right:20px;transform:rotate(180deg)}article .swiper._wrapper_9ucp4_14 .gallery-button-next:dir(rtl){right:unset;left:20px;transform:rotate(0)}article .swiper._wrapper_9ucp4_14 .swiper-button-disabled{opacity:0}article .swiper._wrapper_9ucp4_14 .swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translateZ(0);z-index:10}article .swiper._wrapper_9ucp4_14 .swiper-pagination.swiper-pagination-hidden{opacity:0}article .swiper._wrapper_9ucp4_14 .swiper-pagination-disabled>.swiper-pagination,article .swiper._wrapper_9ucp4_14 .swiper-pagination.swiper-pagination-disabled{display:none!important}article .swiper._wrapper_9ucp4_14 .swiper-horizontal>.swiper-pagination-bullets,article .swiper._wrapper_9ucp4_14 .swiper-pagination-bullets.swiper-pagination-horizontal{bottom:4px;left:0;width:100%}article .swiper._wrapper_9ucp4_14 .swiper-pagination-bullet{width:6px;height:6px;display:inline-block;border-radius:50%;background:var(--cc-black-50, rgba(0, 0, 0, .5));opacity:1}article .swiper._wrapper_9ucp4_14 .swiper-pagination-bullet:focus{background-color:var(--cc-primary-color-focus, #1976d2);box-shadow:0 0 0 4px var(--cc-primary-color-opacity-10, rgba(25, 118, 210, .1));outline:none}article .swiper._wrapper_9ucp4_14 .swiper-pagination-bullet:focus-visible{outline:2px solid var(--cc-primary-color-focus, #1976d2);outline-offset:2px}article .swiper._wrapper_9ucp4_14 button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}article .swiper._wrapper_9ucp4_14 .swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}article .swiper._wrapper_9ucp4_14 .swiper-pagination-bullet:only-child{display:none!important}article .swiper._wrapper_9ucp4_14 .swiper-pagination-bullet-active{opacity:1;background-color:#000}article .swiper._wrapper_9ucp4_14 .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,article .swiper._wrapper_9ucp4_14 .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 4px}._listItemRoot_1m8oe_2{list-style:none}._divider_1m8oe_6{border-top:1px solid var(--cc-black-80, rgba(0, 0, 0, .8))}._headerRoot_1m8oe_11{aspect-ratio:16/9;background-size:cover;background-position:center center;position:relative;display:flex;flex-direction:column;border-top-right-radius:var(--cc-bubble-border-radius, 15px);border-top-left-radius:var(--cc-bubble-border-radius, 15px)}._headerRoot_1m8oe_11:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0006;border-radius:inherit}._headerRoot_1m8oe_11:focus{opacity:.6}._headerContentWrapper_1m8oe_37{border-radius:inherit;position:relative;flex-grow:1;align-content:flex-end}._headerContentWrapper_1m8oe_37:focus-visible{outline:2px solid var(--cc-primary-color-focus, #1976d2);box-shadow:inset 0 0 0 2px var(--cc-white, #ffffff)}._headerContent_1m8oe_37{padding:16px 16px 12px;color:var(--cc-white, #ffffff)}._headerContent_1m8oe_37>*{color:var(--cc-white, #ffffff)}._headerContentWithButton_1m8oe_58{padding-bottom:72px}._itemTitle_1m8oe_63{margin-top:0;margin-bottom:0}._itemTitleWithSubtitle_1m8oe_68{margin-top:0;margin-bottom:8px}._itemSubtitle_1m8oe_73{margin-top:0;margin-bottom:0}._listItemWrapper_1m8oe_79{position:relative;display:flex}._listItemWrapper_1m8oe_79:focus{outline:none}._listItemWrapper_1m8oe_79:focus-visible{outline:2px solid var(--cc-primary-color-focus, #1976d2);outline-offset:-10px}._listItemContent_1m8oe_93{padding:16px 16px 12px;overflow-wrap:break-word;display:flex;-webkit-box-pack:justify;justify-content:space-between;align-items:center;gap:16px;width:100%;color:var(--cc-black-20, rgba(0, 0, 0, .2))}._listItemText_1m8oe_105{width:100%}._listItemText_1m8oe_105>*{color:var(--cc-black-20, rgba(0, 0, 0, .2))}._listItemImage_1m8oe_113{background-size:cover;background-position:center center;border-radius:10px;width:86px;height:102px;flex-shrink:0}._listHeaderButtonWrapper_1m8oe_123{position:absolute;bottom:16px;right:16px;left:16px}._listItemButtonWrapper_1m8oe_130{padding:0 16px 16px}._wrapper_1de1t_2{max-width:295px;border-radius:var(--cc-bubble-border-radius, 15px);border:1px solid var(--cc-black-80, rgba(0, 0, 0, .8));background-color:var(--cc-white, #ffffff)}._wrapper_1de1t_2 ._listItemRoot_1de1t_9{border-top-right-radius:var(--cc-bubble-border-radius, 15px);border-top-left-radius:var(--cc-bubble-border-radius, 15px)}._list_1de1t_9{list-style:none;padding-inline-start:0;margin-block:0}._list_1de1t_9 ._listItemRoot_1de1t_9{list-style:none}._mainButtonWrapper_1de1t_24{padding:16px}._filesWrapper_zthuk_2{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:8px}._filePreviewContainer_zthuk_10{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px}@keyframes _webchatImagePreviewPopIn_zthuk_1{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}._imagePreview_zthuk_28{border-radius:var(--cc-bubble-border-radius, 15px);max-height:256px;max-width:295px;object-fit:cover;object-position:center center;animation:_webchatImagePreviewPopIn_zthuk_1 .2s ease-out;transform-origin:center}._smallImagePreview_zthuk_38{border-radius:var(--cc-bubble-border-radius, 15px);height:128px;width:128px;object-fit:cover;object-position:center center;animation:_webchatImagePreviewPopIn_zthuk_1 .2s ease-out;transform-origin:center}._filePreview_zthuk_10{display:flex;gap:12px;padding:8px 12px;border-radius:var(--cc-bubble-border-radius, 15px);height:33px;background-color:var(--cc-black-95, rgba(0, 0, 0, .95));max-width:295px}._filePreview_zthuk_10 ._fileNameWrapper_zthuk_58{display:flex;flex-direction:row;align-items:center;max-width:200px;color:var(--cc-black-10, rgba(0, 0, 0, .1))}._filePreview_zthuk_10 ._fileName_zthuk_58{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}._filePreview_zthuk_10 ._fileExtension_zthuk_72{max-width:60px}._filePreview_zthuk_10 ._fileSize_zthuk_76{color:var(--cc-black-40, rgba(0, 0, 0, .4))}._wrapper_1mlia_2{display:flex;flex-direction:column;gap:8px;align-items:flex-start}._button_1mlia_9{min-width:120px;padding:10px 16px;border:none;border-radius:var(--cc-button-border-radius, 8px);background-color:var(--cc-primary-color, #1976d2);color:var(--cc-white, #ffffff);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}._button_1mlia_9:hover:not(:disabled){opacity:.9}._button_1mlia_9:disabled{opacity:.5;cursor:not-allowed}._selectedDate_1mlia_31{padding:8px 12px;background-color:var(--cc-primary-color, #1976d2);color:var(--cc-white, #ffffff);border-radius:var(--cc-bubble-border-radius, 15px)}._eventName_1mlia_38{padding:4px 8px}._eventLabel_1mlia_42{color:var(--cc-black-40, rgba(0, 0, 0, .4));font-style:italic}._wrapper_1tiie_2{max-width:400px}._card_1tiie_6{display:flex;gap:12px;padding:16px;background-color:var(--cc-white, #ffffff);border-radius:var(--cc-bubble-border-radius, 15px)}._icon_1tiie_14{flex-shrink:0;color:var(--cc-primary-color, #1976d2);display:flex;align-items:flex-start;padding-top:2px}._content_1tiie_22{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}._title_1tiie_30{color:var(--cc-black-10, rgba(0, 0, 0, .1));margin:0}._body_1tiie_35{color:var(--cc-black-20, rgba(0, 0, 0, .2));margin:0;overflow-wrap:break-word}._actions_1tiie_41{margin-top:4px;padding-top:8px;border-top:1px solid var(--cc-black-80, rgba(0, 0, 0, .8))}._actionsLabel_1tiie_47{color:var(--cc-black-40, rgba(0, 0, 0, .4));font-style:italic}._message_y290c_2{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}._message_y290c_2._bot_y290c_9{align-items:flex-start}._message_y290c_2._user_y290c_13{align-items:flex-end}._message_y290c_2._agent_y290c_17{align-items:flex-start}._srOnly_y290c_22{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}._typingIndicator_sgok9_2{align-items:center;background-color:var(--cc-white, #ffffff);border-radius:15px;border:1px solid var(--cc-black-80, rgba(0, 0, 0, .8));box-sizing:border-box;display:flex;gap:6px;height:44px;justify-content:center;padding-block:10px;padding-inline:10px;width:62px;margin-block:var(--webchat-message-margin-block, 24px);margin-inline:var(--webchat-message-margin-inline, 20px)}._typingIndicator_sgok9_2._disableBorder_sgok9_19{border:none;background:none!important}._incoming_sgok9_24{margin-inline-start:none}._outgoing_sgok9_28{margin-inline-start:auto}._dot_sgok9_32{background:var(--cc-black-40, rgba(0, 0, 0, .4));border-radius:999px;width:6px;height:6px}._dot_sgok9_32:nth-child(1),._dot_sgok9_32:nth-child(2),._dot_sgok9_32:nth-child(3){animation-duration:1.2s;animation-timing-function:ease-in-out;animation-fill-mode:both;animation-iteration-count:infinite;animation-delay:-1s}._dot_sgok9_32:nth-child(1){animation-name:_dot1_sgok9_1}._dot_sgok9_32:nth-child(2){animation-name:_dot2_sgok9_1}._dot_sgok9_32:nth-child(3){animation-name:_dot3_sgok9_1}@media(prefers-reduced-motion){._dot_sgok9_32{animation:none!important}}@keyframes _dot1_sgok9_1{0%{transform:translateY(0)}10%{transform:translateY(-3px)}20%{transform:translateY(-6px)}30%{transform:translateY(-3px)}40%{transform:translateY(0)}50%{transform:translateY(0)}}@keyframes _dot2_sgok9_1{0%{transform:translateY(0)}10%{transform:translateY(0)}20%{transform:translateY(-3px)}30%{transform:translateY(-6px)}40%{transform:translateY(-3px)}50%{transform:translateY(0)}}@keyframes _dot3_sgok9_1{0%{transform:translateY(0)}10%{transform:translateY(0)}20%{transform:translateY(0)}30%{transform:translateY(-3px)}40%{transform:translateY(-6px)}50%{transform:translateY(-3px)}65%{transform:translateY(0)}}._eventPill_1gtvh_2{display:flex;max-width:250px;justify-content:center;align-items:center;gap:10px;margin-inline:auto;margin-block-start:40px}._eventPillTextWrapper_1gtvh_12{border-radius:15px;background:var(--cc-black-80, rgba(0, 0, 0, .8));color:var(--cc-black-20, rgba(0, 0, 0, .2));padding:8px 12px}._eventText_1gtvh_19{font-family:Figtree,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:14px;font-weight:600;line-height:1.4;margin:0}