aloha-ui-library 0.3.0 → 0.3.1

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.
@@ -9,8 +9,11 @@ export interface AvatarAttributes {
9
9
  mouthId?: number;
10
10
  }
11
11
  export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
12
- emoji: AvatarAttributes;
12
+ emoji?: AvatarAttributes;
13
13
  size?: number;
14
+ src?: string;
15
+ alt?: string;
16
+ fallback?: string;
14
17
  }
15
18
  declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;
16
19
  export { Avatar };
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import './ChatMessage.css';
3
+ import { type AvatarAttributes } from '../Avatar';
3
4
  import { type ColorName } from '../../colors';
4
5
  export type ChatMessageVariant = 'sent' | 'received';
5
6
  export interface ChatMessageProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -9,10 +10,8 @@ export interface ChatMessageProps extends React.HTMLAttributes<HTMLDivElement> {
9
10
  name: string;
10
11
  /** Hora del mensaje, ej: "16:34" */
11
12
  time: string;
12
- /** URL del avatar del usuario (se muestra dentro de la burbuja) */
13
- avatarSrc?: string;
14
- /** Fallback del avatar si no hay imagen (iniciales) */
15
- avatarFallback?: string;
13
+ /** Emoji del avatar del usuario */
14
+ emoji: AvatarAttributes;
16
15
  /**
17
16
  * 'received' = izquierda, verde lima | 'sent' = derecha, verde bosque
18
17
  * @default 'received'
@@ -1,12 +1,14 @@
1
1
  import React from 'react';
2
2
  import './QuestionCard.css';
3
+ import { type AvatarAttributes } from '../Avatar';
4
+ import { type EmojiName } from '../Emoji';
3
5
  import { type ColorName } from '../../colors';
4
6
  export type QuestionCardState = 'pending' | 'responded' | 'closed' | 'revealed';
5
7
  export interface QuestionRespondent {
6
8
  /** Nombre del participante */
7
9
  name: string;
8
- avatarSrc?: string;
9
- avatarFallback?: string;
10
+ /** Emoji del avatar del participante */
11
+ emoji: AvatarAttributes;
10
12
  /** Respuesta del participante (se muestra en estado 'revealed') */
11
13
  answer?: string;
12
14
  }
@@ -15,9 +17,8 @@ export interface QuestionCardProps extends React.HTMLAttributes<HTMLDivElement>
15
17
  questionLabel: string;
16
18
  /** Texto completo de la pregunta, visible en estado 'revealed' */
17
19
  questionText?: string;
18
- /** Avatar del creador de la pregunta (mostrado en el badge) */
19
- labelAvatarSrc?: string;
20
- labelAvatarFallback?: string;
20
+ /** Emoji del badge (ej: "happy", "crazy") */
21
+ labelEmoji?: EmojiName;
21
22
  /**
22
23
  * Estado del componente:
23
24
  * - 'pending' → badge + botón Responder
@@ -42,7 +43,7 @@ export interface QuestionCardProps extends React.HTMLAttributes<HTMLDivElement>
42
43
  buttonBgColor?: ColorName;
43
44
  /** Color del texto del botón Responder */
44
45
  buttonTextColor?: ColorName;
45
- /** Color del texto de los respondents ("Ale ya ha respondido.") */
46
+ /** Color del texto de los respondents ("Ana ya ha respondido.") */
46
47
  respondedTextColor?: ColorName;
47
48
  /** Color del texto de la pregunta (estado revealed) */
48
49
  questionTextColor?: ColorName;
package/dist/index.css CHANGED
@@ -1,4 +1,4 @@
1
- .avatar-container{border-radius:20px;height:120px;margin:0 auto;overflow:hidden;position:relative;width:120px}.avatar-layer{height:100%;left:0;-o-object-fit:cover;object-fit:cover;position:absolute;top:0;width:100%}.avatar-preview .avatar-container{height:300px;position:relative;width:300px}.menu-icon .avatar-container{border-radius:50%;height:50px;margin:0;width:50px}@media (max-width:768px){.avatar-container{height:100px;width:100px}.avatar-preview .avatar-container{height:250px;width:250px}.menu-icon .avatar-container{height:40px;width:40px}}@media (max-width:480px){.avatar-preview .avatar-container{height:200px;width:200px}}.text-divider{align-items:center;display:flex;gap:10px;width:100%}.text-divider h1,.text-divider h2,.text-divider h3,.text-divider h4,.text-divider p,.text-divider small{line-height:1;margin:0}.text-divider__avatar-stack{align-items:center;display:flex;flex-direction:row-reverse;flex-shrink:0}.text-divider__stack-avatar{border-radius:50%;margin-left:-6px;outline:2px solid var(--td-ring,#fff);outline-offset:0}.text-divider__avatar-stack>:last-child{margin-left:0}.text-divider__line{flex:1}.text-divider__right{flex-shrink:0}.chat-message{background-color:var(--chat-bg);border-radius:18px;display:inline-flex;flex-direction:column;font-family:var(--font-nunito);gap:6px;max-width:72%;padding:12px 16px;position:relative;word-break:break-word}.chat-message--received{align-self:flex-start;border-bottom-left-radius:4px}.chat-message--received:after{background:var(--chat-bg);border-radius:0 0 60% 0;bottom:-14px;content:"";height:16px;left:0;position:absolute;width:22px}.chat-message--sent{align-self:flex-end;border-bottom-right-radius:4px}.chat-message--sent:after{background:var(--chat-bg);border-radius:0 0 0 60%;bottom:-14px;content:"";height:16px;position:absolute;right:0;width:22px}.chat-message__header{align-items:center;color:var(--chat-hdr);display:flex;font-size:.8125rem;gap:6px;line-height:1;white-space:nowrap}.chat-message__avatar{flex-shrink:0;height:22px!important;width:22px!important}.chat-message__name{font-weight:700}.chat-message__separator,.chat-message__time{font-weight:400;opacity:.6}.chat-message__body{color:var(--chat-msg);font-size:.9375rem;font-weight:700;line-height:1.5;margin:0}.chat-thread{gap:14px;padding:16px}.chat-thread,.question-card{display:flex;flex-direction:column;width:100%}.question-card{background-color:var(--qc-bg);border-radius:16px;box-sizing:border-box;font-family:var(--font-nunito);gap:10px;padding:12px 14px}.question-card__label{align-items:center;background-color:var(--qc-label-bg);border-radius:.5rem;display:inline-flex;gap:6px;padding:4px 10px 4px 4px;width:-moz-fit-content;width:fit-content}.question-card__label-text{color:var(--qc-label-txt);font-size:.8125rem;font-weight:700;line-height:1}.question-card__respondents{display:flex;flex-direction:column;gap:6px;list-style:none;margin:0;padding:0}.question-card__respondent{align-items:center;display:flex;gap:8px}.question-card__respondent-text{color:var(--qc-resp-txt);font-size:.875rem;font-weight:600}.question-card__revealed{display:flex;flex-direction:column;gap:10px}.question-card__question-text{background-color:var(--qc-btn-bg);border-radius:.4rem;color:var(--qc-q-txt);font-size:.9375rem;font-weight:600;line-height:1.4;margin:0;padding:.3rem}.question-card__answers{display:flex;flex-direction:column;gap:8px;list-style:none;margin:0;padding:0}.question-card__answer-row{align-items:center;display:flex;gap:8px}.question-card__answer-name{color:var(--qc-resp-txt);font-size:.8125rem;font-weight:700;min-width:32px}.question-card__answer-chip{align-items:center;background-color:var(--qc-ans-bg);border-radius:.4rem;color:var(--qc-ans-txt);display:inline-flex;font-size:.8125rem;font-weight:700;padding:3px 12px}.question-card__btn{background-color:var(--qc-btn-bg);border:none;border-radius:10px;color:var(--qc-btn-txt);cursor:pointer;display:block;font-family:var(--font-nunito);font-size:.9375rem;font-weight:700;padding:10px 0;text-align:center;transition:opacity .15s ease,transform .1s ease;width:100%}.question-card__btn:hover{opacity:.88}.question-card__btn:active{opacity:.75;transform:scale(.98)}.friend-list-item{align-items:center;background-color:var(--fi-bg);border:2px solid transparent;border-radius:14px;box-sizing:border-box;cursor:pointer;display:flex;font-family:var(--font-nunito);justify-content:space-between;padding:8px 12px;text-align:left;transition:opacity .15s ease,transform .1s ease;width:100%}.friend-list-item:hover{opacity:.88}.friend-list-item:active{opacity:.75;transform:scale(.98)}.friend-list-item--selected{border-color:var(--fi-selected-border)}.friend-list-item__left{align-items:center;display:flex;flex:1;gap:12px;min-width:0}.friend-list-item__avatar{margin:0!important}.friend-list-item__name{color:var(--fi-name);font-size:.9375rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.friend-list-item__avatar-stack{align-items:center;display:flex;flex-direction:row-reverse}.friend-list-item__avatar-stack>:last-child{margin-left:0!important}.friend-list-item__count-wrap{align-items:baseline;display:flex;gap:5px;margin-left:2px}.friend-list-item__count{color:var(--fi-count);font-size:1rem;font-weight:800;line-height:1}.friend-list-item__count-label{color:var(--fi-count-label);font-size:.8125rem;font-weight:600}.friend-list-item__chevron{color:var(--fi-chevron);flex-shrink:0;margin-left:8px}@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;500;700&family=Nunito+Sans:wght@300;500;700;900&display=swap");*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
1
+ .avatar-container{border-radius:20px;height:120px;overflow:hidden;position:relative;width:120px}.avatar-layer{left:0;position:absolute;top:0}.avatar-image,.avatar-layer{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.avatar-fallback{align-items:center;background:linear-gradient(135deg,#a8e6cf,#56ab2f);color:#fff;display:flex;font-size:.5em;font-weight:700;justify-content:center}.avatar-preview .avatar-container{height:300px;position:relative;width:300px}.menu-icon .avatar-container{border-radius:50%;height:50px;margin:0;width:50px}@media (max-width:768px){.avatar-container{height:100px;width:100px}.avatar-preview .avatar-container{height:250px;width:250px}.menu-icon .avatar-container{height:40px;width:40px}}@media (max-width:480px){.avatar-preview .avatar-container{height:200px;width:200px}}.text-divider{align-items:center;display:flex;gap:10px;width:100%}.text-divider h1,.text-divider h2,.text-divider h3,.text-divider h4,.text-divider p,.text-divider small{line-height:1;margin:0}.text-divider__avatar-stack{align-items:center;display:flex;flex-direction:row-reverse;flex-shrink:0}.text-divider__stack-avatar{border-radius:50%;margin-left:-6px;outline:2px solid var(--td-ring,#fff);outline-offset:0}.text-divider__avatar-stack>:last-child{margin-left:0}.text-divider__line{flex:1}.text-divider__right{flex-shrink:0}.chat-message{background-color:var(--chat-bg);border-radius:18px;display:inline-flex;flex-direction:column;font-family:var(--font-nunito);gap:6px;max-width:72%;padding:12px 16px;position:relative;word-break:break-word}.chat-message--received{align-self:flex-start;border-bottom-left-radius:4px}.chat-message--received:after{background:var(--chat-bg);border-radius:0 0 60% 0;bottom:-14px;content:"";height:16px;left:0;position:absolute;width:22px}.chat-message--sent{align-self:flex-end;border-bottom-right-radius:4px}.chat-message--sent:after{background:var(--chat-bg);border-radius:0 0 0 60%;bottom:-14px;content:"";height:16px;position:absolute;right:0;width:22px}.chat-message__header{align-items:center;color:var(--chat-hdr);display:flex;font-size:.8125rem;gap:6px;line-height:1;white-space:nowrap}.chat-message__avatar-name{align-items:center;display:flex;gap:2px}.chat-message__avatar{border-radius:50%!important;flex-shrink:0;height:22px!important;width:22px!important}.chat-message__name{font-weight:700}.chat-message__separator,.chat-message__time{font-weight:400;opacity:.6}.chat-message__body{color:var(--chat-msg);font-size:.9375rem;font-weight:700;line-height:1.5;margin:0}.chat-thread{gap:14px;padding:16px 0}.chat-thread,.question-card{display:flex;flex-direction:column;width:100%}.question-card{background-color:var(--qc-bg);border-radius:16px;box-sizing:border-box;font-family:var(--font-nunito);gap:10px;padding:12px 14px}.question-card__label{align-items:center;background-color:var(--qc-label-bg);border-radius:.5rem;display:inline-flex;gap:6px;padding:4px 10px 4px 4px;width:-moz-fit-content;width:fit-content}.question-card__label-emoji{display:inline-block}.question-card__label-text{color:var(--qc-label-txt);font-size:.8125rem;font-weight:700;line-height:1}.question-card__respondents{display:flex;flex-direction:column;gap:12px;list-style:none;margin:0;padding:0}.question-card__respondent{align-items:center;display:flex;gap:0;justify-content:flex-start}.question-card__respondent-avatar{background-color:var(--qc-ans-bg);border-radius:.4rem!important;flex-shrink:0;height:40px!important;margin-right:12px;width:40px!important}.question-card__respondent-text{align-items:center;background-color:var(--qc-ans-bg);border-radius:.4rem!important;color:var(--qc-btn-txt);display:flex;font-size:.875rem;font-weight:600;height:40px;padding:0 1rem}.question-card__revealed{display:flex;flex-direction:column;gap:10px}.question-card__question-text{background-color:var(--qc-btn-bg);border-radius:.4rem;color:var(--qc-ans-txt);font-size:.9375rem;font-weight:600;line-height:1.4;margin:0;padding:.3rem}.question-card__answers{display:flex;flex-direction:column;gap:8px;list-style:none;margin:0;padding:0}.question-card__answer-row{align-items:center;display:flex;gap:8px}.question-card__answer-avatar{background-color:var(--qc-ans-bg);border-radius:.4rem!important;flex-shrink:0;height:40px!important;width:40px!important}.question-card__answer-name{display:flex;min-width:32px}.question-card__answer-chip,.question-card__answer-name{align-items:center;background-color:var(--qc-ans-bg);border-radius:.4rem!important;font-size:.8125rem;font-weight:700;height:40px;padding:0 1rem}.question-card__answer-chip{display:inline-flex;display:flex}.question-card__btn{background-color:var(--qc-btn-bg);border:none;border-radius:10px;color:var(--qc-btn-txt);cursor:pointer;display:block;font-family:var(--font-nunito);font-size:.9375rem;font-weight:700;padding:10px 0;text-align:center;transition:opacity .15s ease,transform .1s ease;width:100%}.question-card__btn:hover{opacity:.88}.question-card__btn:active{opacity:.75;transform:scale(.98)}.friend-list-item{align-items:center;background-color:var(--fi-bg);border:2px solid transparent;border-radius:14px;box-sizing:border-box;cursor:pointer;display:flex;font-family:var(--font-nunito);justify-content:space-between;padding:8px 12px;text-align:left;transition:opacity .15s ease,transform .1s ease;width:100%}.friend-list-item:hover{opacity:.88}.friend-list-item:active{opacity:.75;transform:scale(.98)}.friend-list-item--selected{border-color:var(--fi-selected-border)}.friend-list-item__left{align-items:center;display:flex;flex:1;gap:12px;min-width:0}.friend-list-item__avatar{margin:0!important}.friend-list-item__name{color:var(--fi-name);font-size:.9375rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.friend-list-item__avatar-stack{align-items:center;display:flex;flex-direction:row-reverse}.friend-list-item__avatar-stack>:last-child{margin-left:0!important}.friend-list-item__count-wrap{align-items:baseline;display:flex;gap:5px;margin-left:2px}.friend-list-item__count{color:var(--fi-count);font-size:1rem;font-weight:800;line-height:1}.friend-list-item__count-label{color:var(--fi-count-label);font-size:.8125rem;font-weight:600}.friend-list-item__chevron{color:var(--fi-chevron);flex-shrink:0;margin-left:8px}@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;500;700&family=Nunito+Sans:wght@300;500;700;900&display=swap");*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
2
2
 
3
3
  /*
4
4
  ! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com
@@ -1,4 +1,4 @@
1
- .avatar-container{border-radius:20px;height:120px;margin:0 auto;overflow:hidden;position:relative;width:120px}.avatar-layer{height:100%;left:0;-o-object-fit:cover;object-fit:cover;position:absolute;top:0;width:100%}.avatar-preview .avatar-container{height:300px;position:relative;width:300px}.menu-icon .avatar-container{border-radius:50%;height:50px;margin:0;width:50px}@media (max-width:768px){.avatar-container{height:100px;width:100px}.avatar-preview .avatar-container{height:250px;width:250px}.menu-icon .avatar-container{height:40px;width:40px}}@media (max-width:480px){.avatar-preview .avatar-container{height:200px;width:200px}}.text-divider{align-items:center;display:flex;gap:10px;width:100%}.text-divider h1,.text-divider h2,.text-divider h3,.text-divider h4,.text-divider p,.text-divider small{line-height:1;margin:0}.text-divider__avatar-stack{align-items:center;display:flex;flex-direction:row-reverse;flex-shrink:0}.text-divider__stack-avatar{border-radius:50%;margin-left:-6px;outline:2px solid var(--td-ring,#fff);outline-offset:0}.text-divider__avatar-stack>:last-child{margin-left:0}.text-divider__line{flex:1}.text-divider__right{flex-shrink:0}.chat-message{background-color:var(--chat-bg);border-radius:18px;display:inline-flex;flex-direction:column;font-family:var(--font-nunito);gap:6px;max-width:72%;padding:12px 16px;position:relative;word-break:break-word}.chat-message--received{align-self:flex-start;border-bottom-left-radius:4px}.chat-message--received:after{background:var(--chat-bg);border-radius:0 0 60% 0;bottom:-14px;content:"";height:16px;left:0;position:absolute;width:22px}.chat-message--sent{align-self:flex-end;border-bottom-right-radius:4px}.chat-message--sent:after{background:var(--chat-bg);border-radius:0 0 0 60%;bottom:-14px;content:"";height:16px;position:absolute;right:0;width:22px}.chat-message__header{align-items:center;color:var(--chat-hdr);display:flex;font-size:.8125rem;gap:6px;line-height:1;white-space:nowrap}.chat-message__avatar{flex-shrink:0;height:22px!important;width:22px!important}.chat-message__name{font-weight:700}.chat-message__separator,.chat-message__time{font-weight:400;opacity:.6}.chat-message__body{color:var(--chat-msg);font-size:.9375rem;font-weight:700;line-height:1.5;margin:0}.chat-thread{gap:14px;padding:16px}.chat-thread,.question-card{display:flex;flex-direction:column;width:100%}.question-card{background-color:var(--qc-bg);border-radius:16px;box-sizing:border-box;font-family:var(--font-nunito);gap:10px;padding:12px 14px}.question-card__label{align-items:center;background-color:var(--qc-label-bg);border-radius:.5rem;display:inline-flex;gap:6px;padding:4px 10px 4px 4px;width:-moz-fit-content;width:fit-content}.question-card__label-text{color:var(--qc-label-txt);font-size:.8125rem;font-weight:700;line-height:1}.question-card__respondents{display:flex;flex-direction:column;gap:6px;list-style:none;margin:0;padding:0}.question-card__respondent{align-items:center;display:flex;gap:8px}.question-card__respondent-text{color:var(--qc-resp-txt);font-size:.875rem;font-weight:600}.question-card__revealed{display:flex;flex-direction:column;gap:10px}.question-card__question-text{background-color:var(--qc-btn-bg);border-radius:.4rem;color:var(--qc-q-txt);font-size:.9375rem;font-weight:600;line-height:1.4;margin:0;padding:.3rem}.question-card__answers{display:flex;flex-direction:column;gap:8px;list-style:none;margin:0;padding:0}.question-card__answer-row{align-items:center;display:flex;gap:8px}.question-card__answer-name{color:var(--qc-resp-txt);font-size:.8125rem;font-weight:700;min-width:32px}.question-card__answer-chip{align-items:center;background-color:var(--qc-ans-bg);border-radius:.4rem;color:var(--qc-ans-txt);display:inline-flex;font-size:.8125rem;font-weight:700;padding:3px 12px}.question-card__btn{background-color:var(--qc-btn-bg);border:none;border-radius:10px;color:var(--qc-btn-txt);cursor:pointer;display:block;font-family:var(--font-nunito);font-size:.9375rem;font-weight:700;padding:10px 0;text-align:center;transition:opacity .15s ease,transform .1s ease;width:100%}.question-card__btn:hover{opacity:.88}.question-card__btn:active{opacity:.75;transform:scale(.98)}.friend-list-item{align-items:center;background-color:var(--fi-bg);border:2px solid transparent;border-radius:14px;box-sizing:border-box;cursor:pointer;display:flex;font-family:var(--font-nunito);justify-content:space-between;padding:8px 12px;text-align:left;transition:opacity .15s ease,transform .1s ease;width:100%}.friend-list-item:hover{opacity:.88}.friend-list-item:active{opacity:.75;transform:scale(.98)}.friend-list-item--selected{border-color:var(--fi-selected-border)}.friend-list-item__left{align-items:center;display:flex;flex:1;gap:12px;min-width:0}.friend-list-item__avatar{margin:0!important}.friend-list-item__name{color:var(--fi-name);font-size:.9375rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.friend-list-item__avatar-stack{align-items:center;display:flex;flex-direction:row-reverse}.friend-list-item__avatar-stack>:last-child{margin-left:0!important}.friend-list-item__count-wrap{align-items:baseline;display:flex;gap:5px;margin-left:2px}.friend-list-item__count{color:var(--fi-count);font-size:1rem;font-weight:800;line-height:1}.friend-list-item__count-label{color:var(--fi-count-label);font-size:.8125rem;font-weight:600}.friend-list-item__chevron{color:var(--fi-chevron);flex-shrink:0;margin-left:8px}@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;500;700&family=Nunito+Sans:wght@300;500;700;900&display=swap");*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
1
+ .avatar-container{border-radius:20px;height:120px;overflow:hidden;position:relative;width:120px}.avatar-layer{left:0;position:absolute;top:0}.avatar-image,.avatar-layer{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.avatar-fallback{align-items:center;background:linear-gradient(135deg,#a8e6cf,#56ab2f);color:#fff;display:flex;font-size:.5em;font-weight:700;justify-content:center}.avatar-preview .avatar-container{height:300px;position:relative;width:300px}.menu-icon .avatar-container{border-radius:50%;height:50px;margin:0;width:50px}@media (max-width:768px){.avatar-container{height:100px;width:100px}.avatar-preview .avatar-container{height:250px;width:250px}.menu-icon .avatar-container{height:40px;width:40px}}@media (max-width:480px){.avatar-preview .avatar-container{height:200px;width:200px}}.text-divider{align-items:center;display:flex;gap:10px;width:100%}.text-divider h1,.text-divider h2,.text-divider h3,.text-divider h4,.text-divider p,.text-divider small{line-height:1;margin:0}.text-divider__avatar-stack{align-items:center;display:flex;flex-direction:row-reverse;flex-shrink:0}.text-divider__stack-avatar{border-radius:50%;margin-left:-6px;outline:2px solid var(--td-ring,#fff);outline-offset:0}.text-divider__avatar-stack>:last-child{margin-left:0}.text-divider__line{flex:1}.text-divider__right{flex-shrink:0}.chat-message{background-color:var(--chat-bg);border-radius:18px;display:inline-flex;flex-direction:column;font-family:var(--font-nunito);gap:6px;max-width:72%;padding:12px 16px;position:relative;word-break:break-word}.chat-message--received{align-self:flex-start;border-bottom-left-radius:4px}.chat-message--received:after{background:var(--chat-bg);border-radius:0 0 60% 0;bottom:-14px;content:"";height:16px;left:0;position:absolute;width:22px}.chat-message--sent{align-self:flex-end;border-bottom-right-radius:4px}.chat-message--sent:after{background:var(--chat-bg);border-radius:0 0 0 60%;bottom:-14px;content:"";height:16px;position:absolute;right:0;width:22px}.chat-message__header{align-items:center;color:var(--chat-hdr);display:flex;font-size:.8125rem;gap:6px;line-height:1;white-space:nowrap}.chat-message__avatar-name{align-items:center;display:flex;gap:2px}.chat-message__avatar{border-radius:50%!important;flex-shrink:0;height:22px!important;width:22px!important}.chat-message__name{font-weight:700}.chat-message__separator,.chat-message__time{font-weight:400;opacity:.6}.chat-message__body{color:var(--chat-msg);font-size:.9375rem;font-weight:700;line-height:1.5;margin:0}.chat-thread{gap:14px;padding:16px 0}.chat-thread,.question-card{display:flex;flex-direction:column;width:100%}.question-card{background-color:var(--qc-bg);border-radius:16px;box-sizing:border-box;font-family:var(--font-nunito);gap:10px;padding:12px 14px}.question-card__label{align-items:center;background-color:var(--qc-label-bg);border-radius:.5rem;display:inline-flex;gap:6px;padding:4px 10px 4px 4px;width:-moz-fit-content;width:fit-content}.question-card__label-emoji{display:inline-block}.question-card__label-text{color:var(--qc-label-txt);font-size:.8125rem;font-weight:700;line-height:1}.question-card__respondents{display:flex;flex-direction:column;gap:12px;list-style:none;margin:0;padding:0}.question-card__respondent{align-items:center;display:flex;gap:0;justify-content:flex-start}.question-card__respondent-avatar{background-color:var(--qc-ans-bg);border-radius:.4rem!important;flex-shrink:0;height:40px!important;margin-right:12px;width:40px!important}.question-card__respondent-text{align-items:center;background-color:var(--qc-ans-bg);border-radius:.4rem!important;color:var(--qc-btn-txt);display:flex;font-size:.875rem;font-weight:600;height:40px;padding:0 1rem}.question-card__revealed{display:flex;flex-direction:column;gap:10px}.question-card__question-text{background-color:var(--qc-btn-bg);border-radius:.4rem;color:var(--qc-ans-txt);font-size:.9375rem;font-weight:600;line-height:1.4;margin:0;padding:.3rem}.question-card__answers{display:flex;flex-direction:column;gap:8px;list-style:none;margin:0;padding:0}.question-card__answer-row{align-items:center;display:flex;gap:8px}.question-card__answer-avatar{background-color:var(--qc-ans-bg);border-radius:.4rem!important;flex-shrink:0;height:40px!important;width:40px!important}.question-card__answer-name{display:flex;min-width:32px}.question-card__answer-chip,.question-card__answer-name{align-items:center;background-color:var(--qc-ans-bg);border-radius:.4rem!important;font-size:.8125rem;font-weight:700;height:40px;padding:0 1rem}.question-card__answer-chip{display:inline-flex;display:flex}.question-card__btn{background-color:var(--qc-btn-bg);border:none;border-radius:10px;color:var(--qc-btn-txt);cursor:pointer;display:block;font-family:var(--font-nunito);font-size:.9375rem;font-weight:700;padding:10px 0;text-align:center;transition:opacity .15s ease,transform .1s ease;width:100%}.question-card__btn:hover{opacity:.88}.question-card__btn:active{opacity:.75;transform:scale(.98)}.friend-list-item{align-items:center;background-color:var(--fi-bg);border:2px solid transparent;border-radius:14px;box-sizing:border-box;cursor:pointer;display:flex;font-family:var(--font-nunito);justify-content:space-between;padding:8px 12px;text-align:left;transition:opacity .15s ease,transform .1s ease;width:100%}.friend-list-item:hover{opacity:.88}.friend-list-item:active{opacity:.75;transform:scale(.98)}.friend-list-item--selected{border-color:var(--fi-selected-border)}.friend-list-item__left{align-items:center;display:flex;flex:1;gap:12px;min-width:0}.friend-list-item__avatar{margin:0!important}.friend-list-item__name{color:var(--fi-name);font-size:.9375rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.friend-list-item__avatar-stack{align-items:center;display:flex;flex-direction:row-reverse}.friend-list-item__avatar-stack>:last-child{margin-left:0!important}.friend-list-item__count-wrap{align-items:baseline;display:flex;gap:5px;margin-left:2px}.friend-list-item__count{color:var(--fi-count);font-size:1rem;font-weight:800;line-height:1}.friend-list-item__count-label{color:var(--fi-count-label);font-size:.8125rem;font-weight:600}.friend-list-item__chevron{color:var(--fi-chevron);flex-shrink:0;margin-left:8px}@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;500;700&family=Nunito+Sans:wght@300;500;700;900&display=swap");*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
2
2
 
3
3
  /*
4
4
  ! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com