@amityco/ui-kit-open-source 4.0.0-beta.1 → 4.0.0-beta.3

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 (10) hide show
  1. package/README.md +120 -16
  2. package/dist/esm/index.css +1 -1
  3. package/dist/esm/index.js +2064 -2288
  4. package/dist/index.css +1 -1
  5. package/dist/index.d.mts +398 -77
  6. package/dist/index.d.ts +398 -77
  7. package/dist/index.js +2104 -2321
  8. package/dist/metafile-cjs.json +1 -1
  9. package/dist/metafile-esm.json +1 -1
  10. package/package.json +4 -3
package/README.md CHANGED
@@ -1,26 +1,130 @@
1
- # Amity Ui-Kit for Web (open-source)
1
+ # Amity UI-Kit for Web (Open-Source)
2
2
 
3
- ## Getting started
3
+ ## Prerequisites
4
4
 
5
- ### Installation
5
+ Before getting started, ensure that you have the following prerequisites installed on your system:
6
6
 
7
- Here are the steps to install ui-kit together with another project.
7
+ - [Node.js](https://nodejs.org/) LTS version (currently version 20)
8
+ - [pnpm](https://pnpm.io/) version 8
8
9
 
9
- 1. git clone git@github.com:AmityCo/Amity-Social-Cloud-UIKit-Web-OpenSource.git
10
- 2. cd ./Amity-Social-Cloud-UIKit-Web-OpenSource
11
- 3. npm ci
12
- 4. npm link
13
- 5. npm link ./`<path-to-your-app>`/node_modules/react ./`<path-to-your-app>`/node_modules/react-dom
14
- 6. npm run build
15
- 7. cd ./`<path-to-your-app>`
16
- 8. npm link @amityco/ui-kit-open-source --save
10
+ ## How to install PNPM (Optional)
17
11
 
18
- ** We need to link react module to react module in destination project so that react is the same instance otherwise we will encounter [issues with react hook](https://medium.com/bbc-product-technology/solving-the-problem-with-npm-link-and-react-hooks-266c832dd019).
12
+ ```
13
+ corepack enable pnpm
14
+ ```
19
15
 
20
- ### Documentation
16
+ Ref: https://pnpm.io/installation#using-corepack
21
17
 
22
- Please refer to our online documentation at https://docs.amity.co or contact a Ui-Kit representative at **developers@amity.co** for support.
18
+ ## Running Storybook (Optional)
19
+
20
+ To run Storybook and view the UI components in isolation, follow these steps:
21
+
22
+ 1. Clone the Amity UI-Kit repository:
23
+
24
+ ```
25
+ git clone https://github.com/AmityCo/Amity-Social-Cloud-UIKit-Web-OpenSource.git
26
+ ```
27
+
28
+ 2. Navigate to the cloned repository's directory:
29
+
30
+ ```
31
+ cd Amity-Social-Cloud-UIKit-Web-OpenSource
32
+ ```
33
+
34
+ 3. Install the dependencies using pnpm:
35
+
36
+ ```
37
+ pnpm install
38
+ ```
39
+
40
+ 4. Create a `.env` file at the root of the project with the following content:
41
+
42
+ ```
43
+ STORYBOOK_API_REGION=<API_REGION>
44
+ STORYBOOK_API_KEY=<API_KEY>
45
+ ```
46
+
47
+ Replace `<API_REGION>` and `<API_KEY>` with your actual credentials.
48
+
49
+ 5. Run Storybook:
50
+
51
+ ```
52
+ pnpm run storybook
53
+ ```
54
+
55
+ 6. Open your browser and navigate to `http://localhost:6006` to view the Storybook interface.
56
+
57
+ ## Installation
58
+
59
+ To install the Amity UI-Kit together with another project, follow these steps:
60
+
61
+ 1. Clone the repository using the following command:
62
+
63
+ ```
64
+ git clone https://github.com/AmityCo/Amity-Social-Cloud-UIKit-Web-OpenSource.git
65
+ ```
66
+
67
+ 2. Navigate to the cloned repository's directory:
68
+
69
+ ```
70
+ cd ./Amity-Social-Cloud-UIKit-Web-OpenSource
71
+ ```
72
+
73
+ 3. Install the dependencies using pnpm:
74
+
75
+ ```
76
+ pnpm install
77
+ ```
78
+
79
+ 4. Build the project:
80
+
81
+ ```
82
+ pnpm run build
83
+ ```
84
+
85
+ 5. Navigate to your application's directory:
86
+
87
+ ```
88
+ cd <path-to-your-app>
89
+ ```
90
+
91
+ 6. Link the Amity UI-Kit repository to your application using one of the following package managers:
92
+ - NPM:
93
+ ```
94
+ npm link file:<path-to-amity-ui-kit-repository> --save
95
+ ```
96
+ - Yarn (Classic):
97
+ ```
98
+ yarn add file:<path-to-amity-ui-kit-repository>
99
+ ```
100
+ - PNPM:
101
+ ```
102
+ pnpm i file:<path-to-amity-ui-kit-repository>
103
+ ```
104
+
105
+ ## Documentation
106
+
107
+ For detailed information and guidance on using the Amity UI-Kit, please refer to our comprehensive online documentation available at [https://docs.amity.co](https://docs.amity.co).
108
+
109
+ If you require further assistance or have any questions, please don't hesitate to contact our dedicated UI-Kit support team at **developers@amity.co**. We are here to help you make the most of the Amity UI-Kit.
23
110
 
24
111
  ## Contributing
25
112
 
26
- See [our contributing guide](https://github.com/EkoCommunications/AmityUiKitWeb/blob/develop/CONTRIBUTING.md)
113
+ We welcome contributions from the community to help improve and enhance the Amity UI-Kit. If you are interested in contributing to this project, please review our [contributing guide](https://github.com/AmityCo/Amity-Social-Cloud-UIKit-Web-OpenSource/blob/develop/contributing.md) for guidelines and best practices.
114
+
115
+ Thank you for choosing the Amity UI-Kit for your web development needs!
116
+
117
+ ### FAQ
118
+
119
+ Q: I tried to run `pnpm build` and it throws a types error.
120
+ A: Try to structure your project to be like this:
121
+
122
+ ```
123
+ - your_app
124
+ - src
125
+ - Amity-Social-Cloud-UIKit-Web-OpenSource
126
+ - src
127
+ ```
128
+
129
+ Q: The modifications I made to the code do not appear to be applied.
130
+ A: Please attempt to execute `npm cache clean` or `npm cache clean --force` to resolve this issue.
package/dist/esm/index.css CHANGED
@@ -1 +1 @@
1
- @font-face{font-family:Inter;font-style:normal;font-weight:100;font-display:swap;src:url("./Inter-Thin-3L5KITMZ.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:100;font-display:swap;src:url("./Inter-ThinItalic-J7DGFM6P.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:200;font-display:swap;src:url("./Inter-ExtraLight-NASBO7I6.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:200;font-display:swap;src:url("./Inter-ExtraLightItalic-AUJY3XPT.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:300;font-display:swap;src:url("./Inter-Light-E4ED7JRX.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:300;font-display:swap;src:url("./Inter-LightItalic-BJ4DXCNT.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url("./Inter-Regular-6HYMGWZS.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:400;font-display:swap;src:url("./Inter-Italic-2WJ2RX3Z.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url("./Inter-Medium-3R4SWUEO.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:500;font-display:swap;src:url("./Inter-MediumItalic-QTJUSOU7.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url("./Inter-SemiBold-7SYQBR3A.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:600;font-display:swap;src:url("./Inter-SemiBoldItalic-3EHSSXIM.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url("./Inter-Bold-K6PA7FOK.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:700;font-display:swap;src:url("./Inter-BoldItalic-QKFESTQE.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:800;font-display:swap;src:url("./Inter-ExtraBold-2ZPQFALF.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:800;font-display:swap;src:url("./Inter-ExtraBoldItalic-RR7KYXHD.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:900;font-display:swap;src:url("./Inter-Black-PFV6RWF7.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:900;font-display:swap;src:url("./Inter-BlackItalic-OUXR4CVK.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter var;font-style:normal;font-weight:100 900;font-display:swap;src:url("./Inter-roman.var-WIJJYAE4.woff2?v=3.19") format("woff2");font-named-instance:"Regular"}@font-face{font-family:Inter var;font-style:italic;font-weight:100 900;font-display:swap;src:url("./Inter-italic.var-SWFAXF2C.woff2?v=3.19") format("woff2");font-named-instance:"Italic"}@font-face{font-family:Inter var experimental;font-style:oblique 0deg 10deg;font-weight:100 900;font-display:swap;src:url("./Inter.var-OMHIC2JW.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter var alt;font-weight:100 900;font-style:normal;font-named-instance:"Regular";font-display:swap;src:url("./Inter-roman.var-WIJJYAE4.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter var alt;font-weight:100 900;font-style:italic;font-named-instance:"Italic";font-display:swap;src:url("./Inter-italic.var-SWFAXF2C.woff2?v=3.19") format("woff2")}@keyframes react-loading-skeleton{to{transform:translate(100%)}}.react-loading-skeleton{--base-color: #ebebeb;--highlight-color: #f5f5f5;--animation-duration: 1.5s;--animation-direction: normal;--pseudo-element-display: block;background-color:var(--base-color);width:100%;border-radius:.25rem;display:inline-flex;line-height:1;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;z-index:1}.react-loading-skeleton:after{content:" ";display:var(--pseudo-element-display);position:absolute;top:0;left:0;right:0;height:100%;background-repeat:no-repeat;background-image:linear-gradient(90deg,var(--base-color),var(--highlight-color),var(--base-color));transform:translate(-100%);animation-name:react-loading-skeleton;animation-direction:var(--animation-direction);animation-duration:var(--animation-duration);animation-timing-function:ease-in-out;animation-iteration-count:infinite}@media (prefers-reduced-motion){.react-loading-skeleton{--pseudo-element-display: none}}
1
+ @font-face{font-family:Inter;font-style:normal;font-weight:100;font-display:swap;src:url("./Inter-Thin-3L5KITMZ.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:100;font-display:swap;src:url("./Inter-ThinItalic-J7DGFM6P.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:200;font-display:swap;src:url("./Inter-ExtraLight-NASBO7I6.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:200;font-display:swap;src:url("./Inter-ExtraLightItalic-AUJY3XPT.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:300;font-display:swap;src:url("./Inter-Light-E4ED7JRX.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:300;font-display:swap;src:url("./Inter-LightItalic-BJ4DXCNT.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url("./Inter-Regular-6HYMGWZS.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:400;font-display:swap;src:url("./Inter-Italic-2WJ2RX3Z.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url("./Inter-Medium-3R4SWUEO.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:500;font-display:swap;src:url("./Inter-MediumItalic-QTJUSOU7.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url("./Inter-SemiBold-7SYQBR3A.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:600;font-display:swap;src:url("./Inter-SemiBoldItalic-3EHSSXIM.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url("./Inter-Bold-K6PA7FOK.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:700;font-display:swap;src:url("./Inter-BoldItalic-QKFESTQE.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:800;font-display:swap;src:url("./Inter-ExtraBold-2ZPQFALF.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:800;font-display:swap;src:url("./Inter-ExtraBoldItalic-RR7KYXHD.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:900;font-display:swap;src:url("./Inter-Black-PFV6RWF7.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter;font-style:italic;font-weight:900;font-display:swap;src:url("./Inter-BlackItalic-OUXR4CVK.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter var;font-style:normal;font-weight:100 900;font-display:swap;src:url("./Inter-roman.var-WIJJYAE4.woff2?v=3.19") format("woff2");font-named-instance:"Regular"}@font-face{font-family:Inter var;font-style:italic;font-weight:100 900;font-display:swap;src:url("./Inter-italic.var-SWFAXF2C.woff2?v=3.19") format("woff2");font-named-instance:"Italic"}@font-face{font-family:Inter var experimental;font-style:oblique 0deg 10deg;font-weight:100 900;font-display:swap;src:url("./Inter.var-OMHIC2JW.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter var alt;font-weight:100 900;font-style:normal;font-named-instance:"Regular";font-display:swap;src:url("./Inter-roman.var-WIJJYAE4.woff2?v=3.19") format("woff2")}@font-face{font-family:Inter var alt;font-weight:100 900;font-style:italic;font-named-instance:"Italic";font-display:swap;src:url("./Inter-italic.var-SWFAXF2C.woff2?v=3.19") format("woff2")}@keyframes react-loading-skeleton{to{transform:translate(100%)}}.react-loading-skeleton{--base-color: #ebebeb;--highlight-color: #f5f5f5;--animation-duration: 1.5s;--animation-direction: normal;--pseudo-element-display: block;background-color:var(--base-color);width:100%;border-radius:.25rem;display:inline-flex;line-height:1;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;z-index:1}.react-loading-skeleton:after{content:" ";display:var(--pseudo-element-display);position:absolute;top:0;left:0;right:0;height:100%;background-repeat:no-repeat;background-image:linear-gradient(90deg,var(--base-color),var(--highlight-color),var(--base-color));transform:translate(-100%);animation-name:react-loading-skeleton;animation-direction:var(--animation-direction);animation-duration:var(--animation-duration);animation-timing-function:ease-in-out;animation-iteration-count:infinite}@media (prefers-reduced-motion){.react-loading-skeleton{--pseudo-element-display: none}}.closeIcon{width:1.125rem;height:1.125rem;padding:0 .375rem;cursor:pointer;margin-left:auto;&.svg-inline--fa{width:auto}}.overlay{z-index:9999;position:fixed;inset:0;overflow-y:auto;display:flex;padding:var(--asc-spacing-m2) 0;background:#17181ccc;animation-duration:.3s;animation-name:appear;margin-top:0!important}.modalWindow{margin:auto;background-color:var(--asc-color-base-background);border-radius:var(--asc-border-radius-lg);max-width:32.5rem;min-width:20rem}.modalWindow:focus{outline:none}.smallModalWindow{width:27.5rem!important}.header{padding:var(--asc-spacing-m1) var(--asc-spacing-m1) 0 var(--asc-spacing-m1);display:flex;align-items:center;color:var(--asc-color-base-inverse);border-bottom:1px solid var(--theme-palette-base-shade4);font-size:var(--asc-text-font-size-lg)!important;font-weight:var(--asc-text-font-weight-bold)}.content{color:var(--asc-color-base-default);padding:var(--asc-spacing-m2) var(--asc-spacing-m1)}.footer{padding:var(--asc-spacing-m2) var(--asc-spacing-s2);padding-top:var(--asc-spacing-xxs2)}.button{display:inline-flex;align-items:center;justify-content:center;padding:var(--asc-spacing-s1) var(--asc-spacing-m1);font-size:var(--asc-text-font-size-md);font-weight:var(--asc-text-font-weight-bold);border-radius:var(--asc-border-radius-sm);cursor:pointer;transition:background-color .3s ease}.disabled{opacity:.6;cursor:not-allowed}.primary{background-color:var(--asc-color-primary-default);color:var(--asc-color-white);border:none}.primary:hover:not(.disabled){background-color:var(--asc-color-primary-50)}.secondary{background-color:var(--asc-color-white);color:var(--asc-color-primary-default);border:1px solid var(--asc-color-primary-default)}.secondary:hover:not(.disabled){background-color:var(--asc-color-base-shade4)}.small{font-size:var(--asc-text-font-size-sm);padding:var(--asc-spacing-xxs2) var(--asc-spacing-s1)}.medium{font-size:var(--asc-text-font-size-md);padding:var(--asc-spacing-s1) var(--asc-spacing-m1)}.large{font-size:var(--asc-text-font-size-xl);padding:var(--asc-spacing-s2) var(--asc-spacing-m2)}.icon{margin-right:var(--asc-spacing-s1)}.modal{max-width:22.5rem!important}.footer{display:flex;justify-content:flex-end}.okButton{background:var(--asc-color-alert)!important;border:none}.cancelButton{margin-right:var(--asc-spacing-s1);background:transparent!important;color:var(--asc-color-secondary-default);border:1px solid var(--asc-color-secondary-default)!important}.cancelButton:hover{color:var(--asc-color-secondary-default)}.icon{width:1.125rem;height:1.125rem;margin-right:8px}.notificationContainer{width:480px;padding:8px 30px;display:flex;justify-content:center;align-items:center;color:var(--asc-color-white);border-radius:4px;margin-bottom:10px;animation-duration:.3s;animation-name:appear;pointer-events:auto;background-color:var(--asc-color-base-default)}.icon{width:1.125rem;height:1.125rem;margin-right:8px;fill:var(--asc-color-white)}.notifications{position:fixed;padding-top:50px;top:0;left:0;right:0;display:flex;flex-direction:column;align-items:center;z-index:99999;pointer-events:none}.notificationContainer{width:480px;padding:8px 30px;display:flex;justify-content:center;align-items:center;color:#fff;border-radius:4px;margin-bottom:10px;animation-duration:.3s;animation-name:appear;pointer-events:auto;background-color:var(--asc-color-base-shade4)}@supports (font-variation-settings: normal){:root{font-family:Inter var,sans-serif}}:root{color-scheme:light dark;font-family:Inter,sans-serif;--asc-color-alert: #fa4d30;--asc-color-black: #000000;--asc-color-white: #ffffff;--asc-color-primary-default: #1054de;--asc-color-primary-shade1: #4a82f2;--asc-color-primary-shade2: #a0bdf8;--asc-color-primary-shade3: #d9e5fc;--asc-color-primary-shade4: #ffffff;--asc-color-base-inverse: #000000;--asc-color-base-default: #292b32;--asc-color-base-shade1: #636878;--asc-color-base-shade2: #898e9e;--asc-color-base-shade3: #a5a9b5;--asc-color-base-shade4: #ebecef;--asc-color-base-shade5: #f9f9fa;--asc-color-secondary-default: #292b32;--asc-color-secondary-shade1: #636878;--asc-color-secondary-shade2: #898e9e;--asc-color-secondary-shade3: #a5a9b5;--asc-color-secondary-shade4: #ebecef;--asc-color-secondary-shade5: #f9f9fa;--asc-text-global-font-family: Inter, -apple-system, BlinkMacSystemFont, Arial, sans-serif;--asc-text-global-font-style: normal;--asc-text-font-size-xs: .75rem;--asc-text-font-size-sm: .875rem;--asc-text-font-size-md: 1rem;--asc-text-font-size-lg: 1.125rem;--asc-text-font-size-xl: 1.25rem;--asc-text-font-size-xxl: 1.5rem;--asc-text-font-size-3xl: 1.875rem;--asc-text-font-size-4xl: 2.25rem;--asc-text-font-size-5xl: 3rem;--asc-text-font-size-6xl: 3.75rem;--asc-text-font-size-7xl: 4.5rem;--asc-text-font-weight-light: 300;--asc-text-font-weight-normal: 400;--asc-text-font-weight-medium: 500;--asc-text-font-weight-bold: 600;--asc-text-font-weight-black: 900;--asc-line-height-xs: 1rem;--asc-line-height-sm: 1.125rem;--asc-line-height-md: 1.25rem;--asc-line-height-lg: 1.5rem;--asc-line-height-xl: 1.75rem;--asc-line-height-xxl: 2rem;--asc-border-radius-none: 0;--asc-border-radius-sm: .25rem;--asc-border-radius-md: .5rem;--asc-border-radius-lg: .75rem;--asc-border-radius-xl: 1rem;--asc-border-radius-xxl: 1.5rem;--asc-border-radius-full: 9999px;--asc-spacing-none: 0;--asc-spacing-xxs1: .125rem;--asc-spacing-xxs2: .25rem;--asc-spacing-xxs3: .375rem;--asc-spacing-s1: .5rem;--asc-spacing-s2: .75rem;--asc-spacing-m1: 1rem;--asc-spacing-m2: 1.25rem;--asc-spacing-m3: 1.5rem;--asc-spacing-l1: 2rem;--asc-spacing-l2: 2.5rem;--asc-spacing-l3: 3rem;--asc-spacing-l4: 3.5rem;--asc-spacing-xl1: 4rem;--asc-spacing-xl2: 4.5em;--asc-spacing-xl3: 6rem;--asc-box-shadow-01: 0px .5px 2px 0px rgba(96, 97, 112, .16), 0px 0px 1px 0px rgba(40, 41, 61, .08);--asc-box-shadow-02: 0px .5px 2px 0px rgba(96, 97, 112, .16), 0px 0px 1px 0px rgba(40, 41, 61, .08);--asc-box-shadow-03: 0px 2px 4px 0px rgba(96, 97, 112, .16), 0px 0px 1px 0px rgba(40, 41, 61, .04);--asc-box-shadow-04: 0px 4px 8px 0px rgba(96, 97, 112, .2), 0px 0px 2px 0px rgba(40, 41, 61, .1);--asc-box-shadow-05: 0px 8px 16px 0px rgba(96, 97, 112, .16), 0px 2px 4px 0px rgba(40, 41, 61, .04)}[data-theme=light]{--asc-color-base-default: #292b32;--asc-color-base-shade1: #636878;--asc-color-base-shade2: #898e9e;--asc-color-base-shade3: #a5a9b5;--asc-color-base-shade4: #ebecef;--asc-color-base-shade5: #f9f9fa;--asc-color-base-inverse: #ffffff;--asc-color-secondary-default: #292b32;--asc-color-secondary-shade1: #636878;--asc-color-secondary-shade2: #898e9e;--asc-color-secondary-shade3: #a5a9b5;--asc-color-secondary-shade4: #ebecef;--asc-color-secondary-shade5: #f9f9fa}[data-theme=dark]{--asc-color-base-background: #191919;--asc-color-base-inverse: #ffffff;--asc-color-base-default: #ebecef;--asc-color-base-shade1: #a5a9b5;--asc-color-base-shade2: #6e7487;--asc-color-base-shade3: #40434e;--asc-color-base-shade4: #292b32;--asc-color-base-shade5: #191919;--asc-color-secondary-default: #ebecef;--asc-color-secondary-shade1: #a5a9b5;--asc-color-secondary-shade2: #6e7487;--asc-color-secondary-shade3: #40434e;--asc-color-secondary-shade4: #292b32;--asc-color-secondary-shade5: #191919}.typography{padding:0;margin:0}.typography-headings{font-weight:var(--asc-text-font-weight-bold);font-size:var(--asc-text-font-size-lg);line-height:var(--asc-line-height-lg)}.typography-titles{font-weight:var(--asc-text-font-weight-bold);font-size:var(--asc-text-font-size-md);line-height:var(--asc-line-height-md)}.typography-sub-title{font-weight:var(--asc-text-font-weight-normal);font-size:.8125rem;line-height:var(--asc-line-height-xs)}.typography-body{font-weight:var(--asc-text-font-weight-normal);font-size:var(--asc-text-font-size-sm);line-height:var(--asc-line-height-md)}.typography-body-bold{font-weight:var(--asc-text-font-weight-bold);font-size:var(--asc-text-font-size-sm);line-height:var(--asc-line-height-md)}.typography-caption{font-weight:var(--asc-text-font-weight-normal);font-size:var(--asc-text-font-size-xs);line-height:var(--asc-line-height-xs)}.typography-caption-bold{font-weight:var(--asc-text-font-weight-bold);font-size:var(--asc-text-font-size-xs);line-height:var(--asc-line-height-xs)}.uiCommentButton{font-family:Inter;font-weight:var(--asc-text-font-weight-bold);color:var(--asc-color-white);display:flex;align-items:center;justify-content:space-between;gap:var(--asc-spacing-xxs2);border-radius:1.5rem;padding:var(--asc-spacing-s1) var(--asc-spacing-s2);background-color:var(--asc-color-base-default);cursor:pointer;border:none}.uiRemoteImageButton{width:var(--asc-spacing-m3);height:var(--asc-spacing-m3);cursor:pointer;border:none;outline:none;padding:var(--asc-spacing-none);margin:var(--asc-spacing-none);display:flex;align-items:center;justify-content:center}.uiShareStoryButton{display:inline-flex;height:2.5rem;padding:.375rem .5rem .375rem .25rem;align-items:center;gap:var(--asc-spacing-s1);flex-shrink:0;border-radius:var(--asc-border-radius-full);border:none;cursor:pointer;background-color:var(--asc-color-white);color:var(--asc-color-black)}.uiShareStoryButton>span{font-weight:var(--asc-text-font-weight-bold);font-family:var(--asc-text-global-font-family);font-size:var(--asc-text-font-size-md);line-height:var(--asc-line-height-md)}.shareStoryIcon{margin-left:var(--asc-spacing-s1)}.remoteImageIcon{width:1.5rem;height:1.5rem;background-color:transparent;border:none;outline:none;padding:0;margin:0}.reactionListContainer{display:flex;flex-direction:column;gap:var(--asc-spacing-m)}.tabList{display:flex;gap:var(--asc-spacing-s1);border-bottom:1px solid var(--asc-color-base-shade3);padding-bottom:var(--asc-spacing-s1)}.tabItem{cursor:pointer;padding:var(--asc-spacing-xxs2) var(--asc-spacing-s1);border-radius:var(--asc-border-radius-sm);background-color:var(--asc-color-base-inverse);color:var(--asc-color-base-shade6)}.tabItem.active{background-color:var(--asc-color-base-shade4);color:var(--asc-color-base-inverse)}.reactionEmoji{display:flex;align-items:center;gap:var(--asc-spacing-xxs)}.tabCount{font-size:.8rem;background-color:var(--asc-color-base-shade4);color:var(--asc-color-base-inverse);padding:.1rem .3rem;border-radius:var(--asc-border-radius-sm)}.userList{display:flex;flex-wrap:wrap;gap:var(--asc-spacing-s1)}.userItem{display:flex;align-items:center;gap:var(--asc-spacing-s1);background-color:var(--asc-color-base-inverse);padding:var(--asc-spacing-s1);border-radius:var(--asc-border-radius-sm);width:100%}.userDetailsContainer{display:flex;align-items:center;gap:var(--asc-spacing-s1)}.hyperlinkFormContainer{padding:var(--asc-spacing-m1);border-radius:var(--asc-border-radius-md)}.form{display:flex;flex-direction:column;gap:var(--asc-spacing-l1)}.inputContainer{display:flex;flex-direction:column;gap:var(--asc-spacing-xxs2)}.input{width:100%;padding:var(--asc-spacing-s1);border:none;border-bottom:1px solid var(--asc-color-base-shade4);outline:none;color:var(--asc-color-base-default);background-color:transparent}.input.hasError{border-bottom-color:var(--asc-color-alert);color:var(--asc-color-alert)}.label{display:block}.label:after{content:none;color:var(--asc-color-alert)}.label.required:after{content:"*";color:var(--asc-color-alert)}.description{color:var(--asc-color-base-shade2)}.errorText{color:var(--asc-color-alert)}.characterCount{color:var(--asc-color-base-shade1);text-align:right;margin-top:.3rem}.headerContainer{display:flex;align-items:center;justify-content:space-between;padding:0 var(--asc-spacing-m1)}.labelContainer{display:flex;justify-content:space-between;align-items:center}.headerTitle,.styledSecondaryButton{color:var(--asc-color-base-default)}.removeIcon{width:1.5rem;height:1.5rem;fill:var(--asc-color-alert)}.removeLinkButton{display:flex;justify-content:flex-start;align-items:center;gap:var(--asc-spacing-s1);color:var(--asc-color-alert);border-radius:0;background-color:transparent;transition:color .3s ease;border:none;font-weight:var(--asc-text-font-weight-normal)}.divider{width:100%;height:.0625rem;align-self:stretch;background-color:var(--asc-color-base-shade4)}@keyframes animateRing{0%{stroke-dashoffset:339}to{stroke-dashoffset:0}}.uploadingProgressRing{animation:animateRing 2s linear 0s infinite;-webkit-animation:animateRing 2s linear 0s infinite;-moz-animation:animateRing 2s linear 0s infinite}.storyTabContainer{display:flex;overflow:auto;padding:.625rem;background-color:var(--asc-color-white);border-bottom:.0625rem solid #e6e6e6;gap:var(--asc-spacing-s1)}.storyTab{display:flex;flex-direction:column;align-items:center;margin-right:1.25rem;cursor:pointer}.storyTabImage{width:3.75rem;height:3.75rem;border-radius:50%;overflow:hidden;border:.125rem solid var(--asc-color-white);box-shadow:0 .125rem .25rem #0000001a}.storyTabContent{margin-top:.5rem;text-align:center}.storyTabTitle{font-size:.875rem;font-weight:500;color:var(--asc-color-base-default)}.storyTabIcons{display:flex;justify-content:center;margin-top:.25rem}.storyTabIcons svg{width:1rem;height:1rem;margin:0 .25rem;fill:var(--asc-color-base-shade4)}.storyTabSkeleton{display:flex;flex-direction:column;align-items:center;margin-right:1rem}.storyTabSkeletonAvatar{width:4.5rem;height:4.5rem;border-radius:50%;background-color:var(--asc-color-base-shade4);margin-bottom:.5rem;animation:skeletonPulse 1.5s ease-in-out infinite}.storyTabSkeletonUsername{width:4.5rem;height:.75rem;border-radius:.25rem;background-color:#f0f0f0;animation:skeletonPulse 1.5s ease-in-out infinite}@keyframes skeletonPulse{0%{opacity:.6}50%{opacity:1}to{opacity:.6}}.container{display:flex;flex-direction:column;align-items:center;cursor:pointer}.avatarContainer{position:relative;width:4rem;height:4rem;margin-bottom:.5rem}.verifiedIcon{position:absolute;bottom:0;right:0;z-index:2;fill:var(--asc-color-primary-default)}.avatarBackground{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:3.5rem;height:3.5rem;border-radius:50%;overflow:hidden;background-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='40' height='40' rx='20' fill='%23D9E5FC'/%3E%3Cpath d='M19.8462 12C20.7625 12 21.6413 12.356 22.2893 12.9898C22.9373 13.6235 23.3013 14.4831 23.3013 15.3793C23.3013 16.2756 22.9373 17.1351 22.2893 17.7688C21.6413 18.4026 20.7625 18.7586 19.8462 18.7586C18.9298 18.7586 18.051 18.4026 17.403 17.7688C16.755 17.1351 16.391 16.2756 16.391 15.3793C16.391 14.4831 16.755 13.6235 17.403 12.9898C18.051 12.356 18.9298 12 19.8462 12ZM12.9359 14.4138C13.4887 14.4138 14.0021 14.5586 14.4463 14.8193C14.2982 16.2 14.7128 17.571 15.5618 18.6428C15.0682 19.5697 14.081 20.2069 12.9359 20.2069C12.1504 20.2069 11.3972 19.9017 10.8418 19.3585C10.2864 18.8153 9.97436 18.0786 9.97436 17.3103C9.97436 16.5421 10.2864 15.8054 10.8418 15.2622C11.3972 14.719 12.1504 14.4138 12.9359 14.4138ZM26.7564 14.4138C27.5419 14.4138 28.2951 14.719 28.8505 15.2622C29.4059 15.8054 29.7179 16.5421 29.7179 17.3103C29.7179 18.0786 29.4059 18.8153 28.8505 19.3585C28.2951 19.9017 27.5419 20.2069 26.7564 20.2069C25.6113 20.2069 24.6241 19.5697 24.1305 18.6428C24.9795 17.571 25.3941 16.2 25.246 14.8193C25.6903 14.5586 26.2036 14.4138 26.7564 14.4138ZM13.4295 24.3103C13.4295 22.3117 16.3022 20.6897 19.8462 20.6897C23.3901 20.6897 26.2628 22.3117 26.2628 24.3103V26H13.4295V24.3103ZM8 26V24.5517C8 23.2097 9.86577 22.08 12.3929 21.7517C11.8105 22.4083 11.4551 23.3159 11.4551 24.3103V26H8ZM31.6923 26H28.2372V24.3103C28.2372 23.3159 27.8818 22.4083 27.2994 21.7517C29.8265 22.08 31.6923 23.2097 31.6923 24.5517V26Z' fill='white'/%3E%3C/svg%3E%0A")}.avatar{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:50%}.displayName{margin:0;text-align:center;max-width:4.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.draftPage{display:flex;flex-direction:column;width:23.438rem;height:40.875rem;position:relative;font-family:var(--asc-text-global-font-family);font-style:var(--asc-text-global-font-style)}.headerContainer{position:absolute;top:0;left:0;right:0;z-index:1}.header{display:flex;width:100%;justify-content:space-between;align-items:center;padding:var(--asc-spacing-m1)}.topRightButtons{display:flex;width:100%;justify-content:flex-end;gap:var(--asc-spacing-s2)}.mainContainer{flex:1;display:flex;justify-content:center;align-items:center;overflow:hidden;border-top-left-radius:var(--asc-border-radius-lg);border-top-right-radius:var(--asc-border-radius-lg);background:linear-gradient(180deg,var(--draft-image-container-color-0, var(--asc-color-black)) 0%,var(--draft-image-container-color-last, var(--asc-color-black)) 100%)}.previewImage{max-width:100%;max-height:100%}.footer{display:flex;justify-content:flex-end;padding:var(--asc-spacing-m1);background-color:var(--asc-color-black);width:100%}.hyperLinkContainer{position:absolute;background-color:transparent;padding:1rem;display:flex;justify-content:center;bottom:6rem;left:0;right:0}.iconButton{position:absolute;width:2rem;height:2rem;background-color:#00000080;border-radius:50%;border:none;top:6rem;left:1.25rem;z-index:9999;cursor:pointer}.loadingOverlay{position:absolute;left:0;top:0;background:#000000e6;z-index:9;display:flex;justify-content:center;align-items:center;color:#ccc}.playStoryButton,.pauseStoryButton{color:#fff;cursor:pointer}.closeButton{color:#fff;width:1.25rem;height:1.25rem;cursor:pointer}.verifiedBadge{color:#fff}.dotsButton{width:1.5rem;height:1.5rem;cursor:pointer;color:#fff}.viewStoryCompostBarContainer{width:100%;display:flex;position:absolute;justify-content:space-between;align-items:center;height:3.5rem;padding:.75rem;background-color:#000;bottom:0}.viewStoryCompostBarViewIconContainer{display:flex;align-items:center;justify-content:space-between;color:#fff;gap:.25rem}.viewStoryCompostBarEngagementContainer{display:flex;align-items:center;justify-content:space-between;color:#fff;gap:.75rem}.viewStoryCompostBarEngagementIconContainer{display:flex;align-items:center;justify-content:space-between;color:#fff;gap:.25rem;border-radius:50%;padding:.5rem .625rem;background-color:#292b32}.viewStoryContainer{position:relative;width:100%;height:100%;display:flex;flex-direction:column;background-color:#000}.viewStoryHeaderContainer{z-index:9999;position:absolute;width:100%;display:flex;justify-content:space-between;align-items:center;flex-direction:column;padding:1.5rem 1rem .625rem;gap:.5rem}.viewStoryHeadingInfoContainer{display:flex;justify-content:space-between;width:100%;gap:.75rem;align-items:center}.viewStoryHeading{cursor:pointer;display:flex;gap:.25rem;color:#fff;font-size:.938rem;font-style:normal;font-weight:600;line-height:1.25rem;letter-spacing:-.24px;margin-right:.25rem;align-items:center}.viewStorySubHeading{display:inline-flex;gap:.25rem;margin-bottom:.25rem;color:#fff;font-size:.813rem;font-style:normal;font-weight:400;line-height:1.25rem;letter-spacing:-.1px}.story{display:flex;position:relative;overflow:hidden}.storyContent{width:auto;max-width:100%;max-height:100%;margin:auto}.viewStoryCompostBarContainer{width:100%;display:flex;justify-content:space-between;align-items:center;padding:var(--asc-spacing-s2);background-color:var(--asc-color-black);color:var(--asc-color-white);position:absolute;bottom:0;z-index:99999}.viewStoryFailedCompostBarContainer{position:absolute;bottom:0;display:flex;justify-content:space-between;align-items:center;width:100%;height:var(--asc-spacing-l4);padding:var(--asc-spacing-s2);background-color:var(--asc-color-alert);color:var(--asc-color-white);z-index:0}.viewStoryFailedCompostBarWrapper{display:flex;align-items:center;justify-content:flex-start;gap:var(--asc-spacing-s1);width:100%}.viewStoryUploadingWrapper{display:flex;align-items:center;justify-content:flex-start;gap:var(--asc-spacing-s1)}.viewStoryCompostBarViewIconContainer{font-weight:var(--asc-text-font-weight-bold);color:var(--asc-color-white);display:flex;align-items:center;justify-content:space-between;gap:var(--asc-spacing-xxs2)}.viewStoryCompostBarEngagementContainer{font-weight:var(--asc-text-font-weight-bold);display:flex;align-items:center;justify-content:space-between;gap:var(--asc-spacing-s2)}.iconButton{position:absolute;width:2rem;height:2rem;background-color:rgba(var(--asc-color-black),.5);border-radius:50%;border:none;top:6rem;left:1.25rem;z-index:9999;cursor:pointer}.rendererContainer{position:relative;width:100%;height:100%}.storyVideo{width:100%;height:100%;-o-object-fit:contain;object-fit:contain}.muteCircleIcon,.unmuteCircleIcon{width:100%;height:100%}.loadingOverlay{position:absolute;left:0;top:0;background:rgba(var(--asc-color-black),.9);z-index:9;display:flex;justify-content:center;align-items:center;color:var(--asc-color-base-shade3)}.storyImage{width:auto;max-width:100%;max-height:100%;margin:auto}.playStoryButton,.pauseStoryButton{color:var(--asc-color-white);cursor:pointer}.closeButton{color:var(--asc-color-white);width:1.25rem;height:1.25rem;cursor:pointer}.verifiedBadge{fill:var(--asc-color-white)}.dotsButton{width:1.5rem;height:1.5rem;cursor:pointer;color:var(--asc-color-white)}.viewStoryInfoContainer{display:flex;flex-direction:column;justify-content:flex-start;width:100%}.viewStoryCompostBarContainer{width:100%;display:flex;position:absolute;justify-content:space-between;align-items:center;height:3.5rem;padding:.75rem;background-color:var(--asc-color-black);bottom:0}.viewStoryCompostBarViewIconContainer{display:flex;align-items:center;justify-content:space-between;color:var(--asc-color-white);gap:.25rem}.viewStoryCompostBarEngagementContainer{display:flex;align-items:center;justify-content:space-between;color:var(--asc-color-white);gap:.75rem}.viewStoryCompostBarEngagementIconContainer{display:flex;align-items:center;justify-content:space-between;color:var(--asc-color-white);gap:.25rem;border-radius:50%;padding:.5rem .625rem;background-color:var(--asc-color-secondary-default)}.storyContent{flex:1}.header{height:5rem;padding:.75rem 1rem .625rem}.viewStoryContainer{position:relative;width:100%;height:100%;display:flex;flex-direction:column;background-color:var(--asc-color-black)}.viewStoryHeaderContainer{z-index:99999;position:absolute;width:100%;display:flex;justify-content:space-between;align-items:center;padding:1.5rem 1rem .625rem;gap:.5rem}.avatarContainer{position:relative;width:2.5rem;height:2.5rem;border-radius:50%;flex-shrink:0}.addStoryButton{position:absolute;bottom:0;right:0}.addStoryButton:hover{cursor:pointer}.viewStoryHeaderListActionsContainer{display:flex;gap:1.25rem;justify-content:flex-end;align-items:center}.viewStoryHeadingInfoContainer{display:inline-flex;justify-content:space-between;gap:.75rem;align-items:center}.viewStoryHeading{cursor:pointer;display:flex;gap:.25rem;color:var(--asc-color-white);font-size:var(--asc-text-font-size-sm);font-style:normal;font-weight:var(--asc-text-font-weight-bold);line-height:var(--asc-line-height-md);letter-spacing:-.24px;margin-right:.25rem;align-items:center}.viewStoryHeadingTitle{width:auto;max-width:11.688rem}.viewStorySubHeading{display:inline-flex;gap:.25rem;margin-bottom:.25rem;color:var(--asc-color-white);font-size:var(--asc-text-font-size-xs);font-style:normal;font-weight:var(--asc-text-font-weight-normal);line-height:var(--asc-line-height-md);letter-spacing:-.1px}.messageListHeader{display:flex;padding:var(--asc-spacing-m1);padding-top:0;gap:var(--asc-spacing-s1);align-items:center}.displayName{color:var( --live-chat-chat-header-asc-color-base-inverse, var(--live-chat-asc-color-base-inverse, var(--asc-color-base-inverse)) )}.memberCount{color:var( --live-chat-chat-header-asc-color-base-default, var(--live-chat-asc-color-base-default, var(--asc-color-base-default)) );display:flex;align-items:center}.memberIcon{width:.75rem;height:.75rem;margin-right:var(--asc-spacing-xxs2);fill:var( --live-chat-chat-header-asc-color-base-default, var(--live-chat-asc-color-base-default, var(--asc-color-base-default)) )}.messageBubbleWrap{display:flex;align-items:flex-end;gap:var(--asc-spacing-xxs3)}.messageDeletedBubble{display:flex;align-items:center;justify-content:center;padding:var(--asc-spacing-xxs2) var(--asc-spacing-s1);background-color:var(--asc-color-base-shade4);gap:var(--asc-spacing-xxs2);border-radius:var(--asc-border-radius-lg);color:var( --live-chat-message-list-asc-color-base-inverse, var(--live-chat-asc-color-base-inverse, var(--asc-color-base-inverse)) )}.messageOptionsWrap{display:flex;align-items:flex-start;padding-bottom:var(--asc-spacing-xxs2)}.binIcon{height:1rem;width:1rem;fill:var( --live-chat-message-list-asc-color-base-inverse, var(--live-chat-asc-color-base-inverse, var(--asc-color-base-inverse)) )}.optionIcon{width:auto;height:1.25rem}.flagIcon{height:1rem}.timestamp{font-family:var(--asc-text-global-font-family);color:var( --live-chat-message-list-asc-color-base-shade2, var(--live-chat-asc-color-base-shade2, var(--asc-color-base-shade2)) );margin-bottom:var(--asc-spacing-s1);font-size:.5rem;line-height:.75rem}.optionButton{display:flex;:hover{cursor:pointer;background-color:var( --live-chat-message-list-asc-color-secondary-shade4, var(--live-chat-asc-color-secondary-shade4, var(--asc-color-secondary-shade4)) );border-radius:var(--asc-border-radius-sm)}}.optionIcon{fill:var( --live-chat-message-list-asc-color-secondary-shade2, var(--live-chat-asc-color-secondary-shade2, var(--asc-color-secondary-shade2)) );width:auto;height:1.25rem}.reactionIcon{width:1.25rem;height:1.25rem}.timestamp{font-family:var(--asc-text-global-font-family);color:var( --live-chat-message-list-asc-color-base-shade2, var(--live-chat-asc-color-base-shade2, var(--asc-color-base-shade2)) );font-size:.5rem;line-height:.75rem;margin-bottom:var(--asc-spacing-s1)}.messageActionButton{cursor:pointer;display:flex;padding:var(--asc-spacing-s2) var(--asc-spacing-m1);justify-content:space-between}.messageActionButtonText{color:var( --live-chat-message-list-asc-color-base-inverse, var(--live-chat-asc-color-base-inverse, var(--asc-color-base-inverse)) )}.messageDangerActionButtonText{color:var( --live-chat-message-list-asc-color-alert, var(--live-chat-asc-color-alert, var(--asc-color-alert)) )}.copyIcon,.replyIcon{fill:var( --live-chat-message-list-asc-color-base-inverse, var(--live-chat-asc-color-base-inverse, var(--asc-color-base-inverse)) )}.binIcon{width:1.25rem;height:1.25rem;fill:var( --live-chat-message-list-asc-color-alert, var(--live-chat-asc-color-alert, var(--asc-color-alert)) )}.mentionIcon{width:1.25rem;height:1.25rem}.flagIcon{width:1rem}.popover{width:12.5rem;background-color:var(--asc-color-secondary-shade4);z-index:10000;padding:var(--asc-spacing-s2) 0;border-radius:var(--asc-border-radius-lg);&.fixed{position:fixed!important}}.messageItemContainer{padding:var(--asc-spacing-s1) var(--asc-spacing-m1);display:flex;gap:var(--asc-spacing-s1)}.userDisplayName{display:flex;gap:var(--asc-spacing-xxs2);align-items:center;color:var( --live-chat-message-list-asc-color-secondary-shade1, var(--live-chat-asc-color-secondary-shade1, var(--asc-color-secondary-shade1)) );margin-bottom:var(--asc-spacing-xxs2)}.avatar{width:2rem;height:2rem}.moderatorBadge{width:1rem;height:1rem}.messageBubble{padding:var(--asc-spacing-s1) .625rem;border-radius:var(--asc-border-radius-lg);border-top-left-radius:var(--asc-border-radius-none);color:var( --live-chat-message-list-asc-color-base-inverse, var(--live-chat-asc-color-base-inverse, var(--asc-color-base-inverse)) );background-color:var( --live-chat-message-list-asc-color-base-shade4, var(--live-chat-asc-color-base-shade4, var(--asc-color-base-shade4)) );max-width:7.5rem;word-break:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;white-space:pre-wrap}.messageBubble[data-mentioned=true]{border:1px solid var( --live-chat-message-list-asc-color-primary-default, var(--live-chat-asc-color-primary-default, var(--asc-color-primary-default)) )}.messageRepliedBubble{width:12.5rem}.messageParentContainer{padding:var(--asc-spacing-s2);border-radius:var(--asc-border-radius-lg) var(--asc-border-radius-lg) 0 0;background-color:var( --live-chat-message-list-asc-color-base-shade3, var(--live-chat-asc-color-base-shade3, var(--asc-color-base-shade3)) )}.messageParentDisplayName{color:var( --live-chat-message-list-asc-color-base-inverse, var(--live-chat-asc-color-base-inverse, var(--asc-color-base-inverse)) )}.messageParentText{color:var( --live-chat-message-list-asc-color-base-default, var(--live-chat-asc-color-base-default, var(--asc-color-base-default)) );text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.messageChildContainer{border-radius:0 0 var(--asc-border-radius-lg) var(--asc-border-radius-lg);background-color:var( --live-chat-message-list-asc-color-base-shade4, var(--live-chat-asc-color-base-shade4, var(--asc-color-base-shade4)) );color:var( --live-chat-message-list-asc-color-base-inverse, var(--live-chat-asc-color-base-inverse, var(--asc-color-base-inverse)) );padding:var(--asc-spacing-s1) var(--asc-spacing-s2)}.messageChildText{-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis}.mentionText,.hyperlink{color:var( --live-chat-message-list-asc-color-primary-default, var(--live-chat-asc-color-primary-default, var(--asc-color-primary-default)) )}.hyperlink{color:var(--asc-color-primary-dark, var(--asc-color-primary-default))}.infiniteScrollContainer{display:flex;flex-direction:column-reverse;flex-grow:1;overflow-y:hidden}.loadingIndicatorWrap{margin:auto;padding-top:var(--asc-spacing-m1);padding-bottom:var(--asc-spacing-m1)}.loadingIndicator{width:1.25rem;height:1.25rem}.infiniteScrollInner{display:flex;flex-direction:column-reverse;overflow:auto}.customStatusContainer{display:flex;flex-direction:column;justify-content:center;width:100%;height:100%;align-items:center;color:var(--live-chat-message-list-asc-color-secondary-shade2),var(--live-chat-asc-color-secondary-shade2, var(--asc-color-secondary-shade2));font-weight:var(--asc-text-font-weight-light);font-size:var(--asc-text-font-size-md)}.iconContainer{margin-bottom:var(--asc-spacing-m1)}.icon{width:1.5rem;height:1.5rem;fill:var(--live-chat-asc-color-base-inverse, var(--asc-color-base-inverse));margin-right:var(--asc-spacing-s2)}.homeIndicatorContainer{padding-top:1.3125rem;padding-bottom:.5rem}.homeIndicator{margin:auto;width:8.375rem;height:.3125rem;border-radius:var(--asc-border-radius-full);background-color:var(--live-chat-asc-color-base-shade1, var(--asc-color-base-shade1))}.sendButton{border-radius:var(--asc-border-radius-xxl);width:1rem;height:1rem;background-color:var( --live-chat-message-composer-asc-color-primary-default, var(--live-chat-asc-color-primary-default, var(--asc-color-primary-default)) );cursor:pointer;padding:var(--asc-spacing-xxs2);fill:#fff}.reactionButton{width:2rem;height:2rem;cursor:pointer}.sendButtonContainer{display:flex;align-items:center;gap:var(--asc-spacing-s2);width:2rem;height:2rem}.composeBar{display:flex;align-items:center;gap:var(--asc-spacing-s2);padding:var(--asc-spacing-s1) var(--asc-spacing-s2);background-color:inherit;box-shadow:0 -1px 0 0 var(--live-chat-message-composer-asc-color-base-shade4, var(--live-chat-asc-color-base-shade4, var(--asc-color-base-shade4)))}.textInputContainer{display:flex;width:calc(100% - 2.8rem);>div{width:100%;border-radius:var(--asc-border-radius-xxl);background:var( --live-chat-message-composer-asc-color-secondary-shade4, var(--live-chat-asc-color-secondary-shade4, var(--asc-color-secondary-shade4)) );textarea{padding:.563rem 1rem;background-color:transparent}}}.composeBarLoading{width:100%;height:var(--asc-spacing-l1);padding:var(--asc-spacing-s1) var(--asc-spacing-s2);border-radius:var(--asc-border-radius-sm);border:var(--asc-border-radius-none);background-color:var( --live-chat-message-composer-asc-color-secondary, var(--live-chat-asc-color-secondary, var(--asc-color-secondary-default)) );color:var( --live-chat-message-composer-asc-color-base-inverse, var(--live-chat-asc-color-base-inverse, var(--asc-color-base-inverse)) );display:flex;align-items:center;span{padding-left:var(--asc-spacing-s1);font-weight:var(--asc-text-font-weight-light)}}.mentionText{color:var( --live-chat-message-composer-asc-color-primary-default, var(--live-chat-asc-color-primary-default, var(--asc-color-primary-default)) )!important}.mentionItem{display:flex;align-items:center;padding:.313rem .938rem;font-weight:600;background-color:var(--asc-color-base-shade4)}.mentionItem.isBanned{pointer-events:none;cursor:not-allowed}.mentionItem:hover{background-color:var(--asc-color-base-background)}.userDisplayName{margin-left:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--asc-color-base-inverse)}.mentionAllDescription{display:flex;align-items:center;color:var(--asc-color-base-shade2)}.mentionAll{justify-content:space-between;div{display:flex;align-items:center}}.inputTextContainer{position:relative;display:flex;flex-wrap:wrap;min-width:1em;background:var(--asc-color-base-shade4);border:1px solid var(--asc-color-base-shade4);border-radius:var(--asc-border-radius-sm);transition:background .2s,border-color .2s;&.invalid{border-color:var(--asc-color-alert)}&.disabled{background:var(--asc-color-base-shade4);border-color:var(--asc-color-base-shade3)}}.baseInputStyle{flex:1 1 auto;display:block;width:1%;min-width:0;margin:0;padding:.563rem;background:none;border:none;box-sizing:border-box;outline:none;font:inherit;resize:vertical;&::-moz-placeholder{font-weight:400}&::placeholder{font-weight:400}&[disabled]{background:none}}.mentionContainer{position:relative;width:100%;>div:first-child{position:absolute!important;width:100%;top:revert!important;left:revert!important;right:revert!important;bottom:revert!important}}.live-chat-mention-input{padding:var(--asc-spacing-s1);width:calc(100% - 1rem);>div:first-child{>div:first-child{padding:0 .45rem}}textarea{flex:1 1 auto;display:block;width:1%;min-width:0;margin:0;padding:.563rem;background:none;border:none;box-sizing:border-box;outline:none;font:inherit;resize:vertical;color:var(--asc-color-base-inverse);&::-moz-placeholder{font-weight:400}&::placeholder{font-weight:400}&[disabled]{background:none}}}.live-chat-mention-input__suggestions__list{z-index:999;width:100%;position:absolute;transform:translateY(1.25rem);background-color:var(--asc-color-base-shade4);max-height:8rem;overflow:auto;border-bottom:1px solid var(--asc-color-base-shade3);bottom:2rem!important;left:0!important}.mentions_mention{position:relative;z-index:1;color:var(--asc-color-primary-dark, var(--asc-color-primary-default));pointer-events:none;background-color:var(--asc-color-base-shade4)}.live-chat-mention-input .mentions__highlighter{padding:0 .4rem}.composeBarContainer{min-height:3.5rem;z-index:99;background-color:inherit}.composeBar{display:flex;align-items:center;gap:var(--asc-spacing-s2);padding:var(--asc-spacing-s1) var(--asc-spacing-s2);background-color:inherit;border-top:1px solid var(--live-chat-asc-color-base-shade2, var(--asc-color-base-shade2))}.textInputContainer{display:flex;flex-grow:1;>div{width:100%;border-radius:var(--asc-border-radius-xxl);border:1px solid var(--live-chat-asc-color-base-background, var(--asc-color-base-background));background:var(--live-chat-asc-color-secondary-shade4, var(--asc-color-secondary-shade4));textarea{padding:.563rem 1rem;background-color:transparent}}}.composeBarLoading{width:100%;height:var(--asc-spacing-l1);padding:var(--asc-spacing-s1) var(--asc-spacing-s2);border-radius:var(--asc-border-radius-sm);border:var(--asc-border-radius-none);background-color:var( --live-chat-asc-color-secondary-default, var(--asc-color-secondary-default) );color:var(--live-chat-asc-color-base-inverse, var(--asc-color-base-inverse));display:flex;align-items:center;span{padding-left:var(--asc-spacing-s1);font-weight:var(--asc-text-font-weight-light)}}.replyPlaceholderContainer{display:flex;font-family:var(--asc-text-global-font-family);background-color:var(--live-chat-asc-color-base-shade4, var(--asc-color-base-shade4));color:var(--live-chat-asc-color-base-inverse, var(--asc-color-base-inverse));max-width:100%;padding:var(--asc-spacing-s2);padding-left:var(--asc-spacing-m1);gap:var(--asc-spacing-s2);justify-content:space-between;align-items:center;.replyAvatar{flex:0 0 auto}.replyProfile{display:flex;flex-direction:column;color:var(--live-chat-asc-color-base-inverse, var(--asc-color-base-inverse));font-size:var(--asc-text-font-size-sm);line-height:var(--asc-line-height-sm);flex:1;overflow:hidden;gap:.125rem;.replyProfileName{font-weight:var(--asc-text-font-weight-bold)}.replyProfileMessage{font-weight:var(--asc-text-font-weight-light);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}.replyDismiss{flex:0 0 auto;cursor:pointer}}.notificationPosition{position:relative;height:0}.messageListPlaceholder{height:100%}.mutedChannelContainer{display:flex;font-family:var(--asc-text-global-font-family);background-color:var(--live-chat-asc-color-base-shade4, var(--asc-color-base-shade4));color:var(--live-chat-asc-color-base-shade1, var(--asc-color-base-shade1));max-width:100%;padding:var(--asc-spacing-s2);padding-left:var(--asc-spacing-m1);gap:var(--asc-spacing-s2);align-items:center}.mutedIcon{color:var(--live-chat-asc-color-base-shade3, var(--asc-color-base-shade3))}.commentAltIcon{color:var(--live-chat-asc-color-base-shade2, var(--asc-color-base-shade2))}.banStatePanel{display:flex;height:100%;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:var(--asc-spacing-s2);padding:var(--asc-spacing-m1);color:var(--live-chat-asc-color-base-shade2, var(--asc-color-base-shade2))}.notifications{position:relative;bottom:var(--asc-spacing-m1);display:flex;flex-direction:column;align-items:center;z-index:99999;pointer-events:none}.notificationContainer{width:calc(100% - var(--asc-spacing-m1) * 4);padding:1.125rem var(--asc-spacing-m1);display:flex;align-items:center;color:var(--live-chat-asc-color-base-inverse, var(--asc-color-base-inverse));border-radius:var(--asc-border-radius-md);animation-duration:.3s;animation-name:appear;animation-fill-mode:forwards;pointer-events:auto;background-color:var(--live-chat-asc-color-base-shade4, var(--asc-color-base-shade4))}@keyframes appear{0%{opacity:0}to{opacity:1}}.messageListSheet{z-index:1000!important;@media (min-width: 768px){width:375px!important}.messageListSheetContainer{height:100%!important;background-color:var(--asc-color-base-background)!important}}.messageListHeaderWrap{box-shadow:var(--asc-box-shadow-01)}.amtiyLivechatPage{display:flex;flex-direction:column;background-color:var(--live-chat-asc-color-base-background, var(--asc-color-base-background));height:100%;overflow-y:hidden}