/* ============================================
   Rich Text Editor Styles (Composer)
   ============================================ */

/* Inline code styling for composer */
.cometchat-rich-text__code,
code.cometchat-rich-text__code {
  font-family: 'Courier New', monospace;
  font-size: 13px;
  background: var(--cometchat-extended-primary-color-100);
  color: var(--cometchat-primary-color);
  padding: var(--cometchat-spacing) var(--cometchat-spacing-1);
  border-radius: var(--cometchat-radius-1);
}

/* Reset rich text element spacing inside subtitle preview */
.cometchat-message-composer__reply-preview p,
.cometchat-message-composer__reply-preview blockquote,
.cometchat-message-composer__reply-preview pre,
.cometchat-message-composer__reply-preview code,
.cometchat-message-composer__reply-preview ul,
.cometchat-message-composer__reply-preview ol,
.cometchat-message-composer__reply-preview li,
.cometchat-message-composer__reply-preview h1,
.cometchat-message-composer__reply-preview h2,
.cometchat-message-composer__reply-preview h3,
.cometchat-message-composer__reply-preview h4,
.cometchat-message-composer__reply-preview h5,
.cometchat-message-composer__reply-preview h6 {
  margin: 0;
  padding: 0;
  display: inline;
  font: inherit;
  color: inherit;
  border: none;
  background: none;
  white-space: nowrap;
}
.cometchat-conversation-item__subtitle-text ol , .cometchat-conversation-item__subtitle-text ul{
  margin: 0;
  padding: 0;
  padding-left: var(--cometchat-padding-4);
}
/* ============================================
   Content Editable Area
   ============================================ */

.cometchat-rich-text-editor__content {
  padding: 0;
  overflow: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
.cometchat-rich-text-editor__content::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}
.cometchat-message-composer__input-section--multiline .cometchat-rich-text-editor__content{
  padding: 0;
}

.cometchat-rich-text__code-block{
    background: var(--cometchat-neutral-color-100);
    margin: 0;
    padding: 0;
}
.cometchat-rich-text-editor__content:focus-visible{
    outline: none;
}
.cometchat-rich-text-editor__content ol,.cometchat-rich-text-editor__content ul{
    padding-left: var(--cometchat-padding-8);
    margin: 0;
}
.cometchat-rich-text__blockquote{
    margin: var(--cometchat-rich-text-blockquote-margin, 0 var(--cometchat-spacing-2));
    padding: var(--cometchat-rich-text-blockquote-padding, 0 var(--cometchat-spacing-3));
    border-left: var(--cometchat-rich-text-blockquote-border-left, 4px solid var(--cometchat-neutral-color-400));
    color: var(--cometchat-rich-text-blockquote-color, var(--cometchat-text-color-secondary));
}

/* ============================================
   Text Bubble Rich Text Formatting Styles
   Styles for dynamically generated HTML from markdown formatter
   ============================================ */

/**
 * Inline code
 */
.cometchat-text-bubble__content code {
  font-family: 'Courier New', 'Consolas', monospace;
  font-size: 0.9em;
  padding: var(--cometchat-spacing) var(--cometchat-spacing-1);
  border-radius: var(--cometchat-radius-1);
}



/**
 * Code blocks
 */
.cometchat-text-bubble__content pre {
  padding: var(--cometchat-spacing-3);
  border-radius: var(--cometchat-radius-2);
  overflow-x: auto;
  max-width: 100%;
  margin: var(--cometchat-spacing-2) 0;
  white-space: pre;
  margin: 0;
  padding: 0;
}

/* Code blocks in incoming messages */
.cometchat-text-bubble-incoming .cometchat-text-bubble__content pre,
.cometchat-text-bubble.cometchat-text-bubble-incoming .cometchat-text-bubble__content pre {
  background: var(--cometchat-background-color-02);
  color: var(--cometchat-neutral-color-900);
}

/* Code blocks in outgoing messages */
.cometchat-text-bubble-outgoing .cometchat-text-bubble__content pre,
.cometchat-text-bubble.cometchat-text-bubble-outgoing .cometchat-text-bubble__content pre {
  background: rgba(255, 255, 255, 0.2);
  color: var(--cometchat-static-white);
}

.cometchat-text-bubble__content pre code {
  background: transparent;
  padding: 0;
  border-radius: 0;
  display: inline-block;
  height: fit-content;
  width: fit-content;
}

/**
 * Blockquote
 */
.cometchat-text-bubble__content blockquote {
  margin: var(--cometchat-spacing-2) 0;
  padding-left: var(--cometchat-spacing-3);
  border-left: 3px solid;
  font-style: italic;
}

/* Blockquote in incoming messages */
.cometchat-text-bubble-incoming .cometchat-text-bubble__content blockquote,
.cometchat-text-bubble.cometchat-text-bubble-incoming .cometchat-text-bubble__content blockquote {
  border-left-color: var(--cometchat-neutral-color-600);
  color: var(--cometchat-neutral-color-700);
}

/* Blockquote in outgoing messages */
.cometchat-text-bubble-outgoing .cometchat-text-bubble__content blockquote,
.cometchat-text-bubble.cometchat-text-bubble-outgoing .cometchat-text-bubble__content blockquote {
  border-left-color: rgba(255, 255, 255, 0.5);
  color: rgba(255, 255, 255, 0.9);
}

/**
 * Unordered lists
 */
.cometchat-text-bubble__content ul {
  margin: var(--cometchat-spacing-2) 0;
  padding-left: var(--cometchat-spacing-5);
  list-style-type: disc;
  white-space: normal; /* Override pre-wrap for lists */
}

/**
 * Ordered lists
 */
.cometchat-text-bubble__content ol {
  margin: var(--cometchat-spacing-2) 0;
  padding-left: var(--cometchat-spacing-5);
  list-style-type: decimal;
  white-space: normal; /* Override pre-wrap for lists */
}

/**
 * Nested lists inside list items — remove extra margin
 */
.cometchat-text-bubble__content li ul,
.cometchat-text-bubble__content li ol {
  margin: 0;
}

/**
 * List items
 */
.cometchat-text-bubble__content li {
  margin: var(--cometchat-spacing-1) 0;
  line-height: 1.5;
  white-space: normal; /* Override pre-wrap for list items */
}

.cometchat-text-bubble__content li:first-child {
  margin-top: 0;
}

.cometchat-text-bubble__content li:last-child {
  margin-bottom: 0;
}

/**
 * Bold text
 */
.cometchat-text-bubble__content strong {
  font-weight: 700;
}

/**
 * Italic text
 */
.cometchat-text-bubble__content em {
  font-style: italic;
}

/**
 * Underline text
 */
.cometchat-text-bubble__content u {
  text-decoration: underline;
}

/**
 * Strikethrough text
 */
.cometchat-text-bubble__content s {
  text-decoration: line-through;
}

/**
 * Links
 */
.cometchat-text-bubble__content a {
  text-decoration: underline;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

/* Links in incoming messages */
.cometchat-text-bubble-incoming .cometchat-text-bubble__content a,
.cometchat-text-bubble.cometchat-text-bubble-incoming .cometchat-text-bubble__content a {
  color: var(--cometchat-info-color);
}

.cometchat-text-bubble-incoming .cometchat-text-bubble__content a:hover,
.cometchat-text-bubble.cometchat-text-bubble-incoming .cometchat-text-bubble__content a:hover {
  opacity: 0.8;
}

.cometchat-text-bubble-incoming .cometchat-text-bubble__content a:focus,
.cometchat-text-bubble.cometchat-text-bubble-incoming .cometchat-text-bubble__content a:focus {
  outline: 2px solid var(--cometchat-info-color);
  outline-offset: 2px;
}

/* Links in outgoing messages */
.cometchat-text-bubble-outgoing .cometchat-text-bubble__content a,
.cometchat-text-bubble.cometchat-text-bubble-outgoing .cometchat-text-bubble__content a {
  color: var(--cometchat-static-white);
}

.cometchat-text-bubble-outgoing .cometchat-text-bubble__content a:hover,
.cometchat-text-bubble.cometchat-text-bubble-outgoing .cometchat-text-bubble__content a:hover {
  opacity: 0.8;
}

.cometchat-text-bubble-outgoing .cometchat-text-bubble__content a:focus,
.cometchat-text-bubble.cometchat-text-bubble-outgoing .cometchat-text-bubble__content a:focus {
  outline: 2px solid var(--cometchat-static-white);
  outline-offset: 2px;
}

/**
 * Headings
 */
.cometchat-text-bubble__content h1 {
  font: var(--cometchat-font-heading1-bold);
  margin: var(--cometchat-spacing-3) 0 var(--cometchat-spacing-2);
}

.cometchat-text-bubble__content h2 {
  font: var(--cometchat-font-heading2-bold);
  margin: var(--cometchat-spacing-3) 0 var(--cometchat-spacing-2);
}

.cometchat-text-bubble__content h3 {
  font: var(--cometchat-font-heading3-bold);
  margin: var(--cometchat-spacing-2) 0 var(--cometchat-spacing-1);
}

.cometchat-text-bubble__content h4 {
  font: var(--cometchat-font-heading4-bold);
  margin: var(--cometchat-spacing-2) 0 var(--cometchat-spacing-1);
}

.cometchat-text-bubble__content h5,
.cometchat-text-bubble__content h6 {
  font: var(--cometchat-font-body-bold);
  margin: var(--cometchat-spacing-2) 0 var(--cometchat-spacing-1);
}

/**
 * Paragraphs
 */
.cometchat-text-bubble__content p {
  margin: 0;
}

.cometchat-text-bubble__content p + p {
  margin-top: var(--cometchat-spacing-2);
}
.cometchat-rich-text-editor__content {
  position: relative;
}
.cometchat-rich-text-editor__content:empty::before {
  content: attr(data-placeholder);
  color: var(--cometchat-text-color-tertiary);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 479px) {
  .cometchat-message-composer__input-section--multiline .cometchat-rich-text-editor__content{
padding: var(--cometchat-padding-1);
}
}
.cometchat-rich-text__link{
  text-decoration: none;
  color: var(--cometchat-primary-color);
  cursor: pointer;
}

/**
 * Mention Styles
 *
 * Global CSS rules for @mention spans across all rendering contexts:
 * - Message text bubbles (incoming/outgoing)
 * - Conversation subtitles
 * - Message composer input
 * - Reply preview
 *
 * Imported via css-variables.css so styles are available globally
 * regardless of Angular view encapsulation.
 *
 * Class structure matches React UIKit:
 *   .cometchat-mentions              — base mention styling
 *   .cometchat-mentions-you          — self mention (logged-in user)
 *   .cometchat-mentions-other        — other user mention
 *   .cometchat-mentions-incoming     — mention inside an incoming (left) bubble
 *   .cometchat-mentions-outgoing     — mention inside an outgoing (right) bubble
 *
 * @see Requirements 5.1, 5.2, 5.3, 5.4, 5.5, 5.6
 */

/* ==================== Base Mention Styles ==================== */

/**
 * Base mention styling (singular class for individual mention spans)
 * Applied to all mention <span> elements before specific variants
 * @see Requirements 10.1, 10.2
 */
.cometchat-mention {
  display: inline;
  padding: var(--cometchat-spacing) var(--cometchat-spacing-1);
  border-radius: var(--cometchat-radius-1);
  font: var(--cometchat-font-body-medium);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.cometchat-mentions {
  display: inline-block;
  white-space: nowrap;
  color: var(--cometchat-text-color-highlight);
  font: var(--cometchat-font-body-regular);
  user-select: all;
  -webkit-user-select: all;
}

/* ==================== Direction Variants (Incoming / Outgoing) ==================== */

.cometchat-mentions-outgoing,
.cometchat-mentions-incoming {
  border-radius: var(--cometchat-radius);
  display: inline-block;
  padding: 0px var(--cometchat-padding);
  cursor: pointer;
}

/* ==================== Combined Direction + Self/Other Backgrounds ==================== */

/**
 * Incoming + Self mention
 * @see Requirement 5.3
 */
.cometchat-mentions-incoming.cometchat-mentions-you {
  background: rgba(255, 171, 0, 0.20);
}

/**
 * Incoming + Other mention
 * @see Requirement 5.4
 */
.cometchat-mentions-incoming.cometchat-mentions-other {
  background: rgba(104, 82, 214, 0.20);
}

/**
 * Outgoing + Self mention
 * @see Requirement 5.3
 */
.cometchat-mentions-outgoing.cometchat-mentions-you {
  background: rgba(255, 171, 0, 0.20);
}

/**
 * Outgoing + Other mention
 * @see Requirement 5.5
 */
.cometchat-mentions-outgoing.cometchat-mentions-other {
  background: rgba(249, 248, 253, 0.20);
}

/* ==================== Combined Direction + Self/Other Text Colors ==================== */

/**
 * Incoming + Self mention text
 * @see Requirement 5.3
 */
.cometchat-mentions-incoming.cometchat-mentions-you  {
  color: var(--cometchat-warning-color);
}

/**
 * Incoming + Other mention text
 * @see Requirement 5.4
 */
.cometchat-mentions-incoming.cometchat-mentions-other  {
  color: var(--cometchat-text-color-highlight);
}

/**
 * Outgoing + Self mention text
 * @see Requirement 5.3
 */
.cometchat-mentions-outgoing.cometchat-mentions-you  {
  color: var(--cometchat-warning-color);
}

/**
 * Outgoing + Other mention text
 * @see Requirement 5.5
 */
.cometchat-mentions-outgoing.cometchat-mentions-other  {
  color: var(--cometchat-static-white);
}

/* ==================== Context: Conversation Subtitle ==================== */

/**
 * Mentions in conversation subtitle — no direction context,
 * so style based on self/other only.
 * @see Requirement 5.6
 */
.cometchat-conversation-item__subtitle-text .cometchat-mentions {
  border-radius: var(--cometchat-radius);
  background: rgba(104, 82, 214, 0.20);
  padding: 0px var(--cometchat-padding);
  color: var(--cometchat-text-color-highlight);
  font: var(--cometchat-font-body-regular);
}

.cometchat-conversation-item__subtitle-text .cometchat-mentions-you {
  border-radius: var(--cometchat-radius);
  background: rgba(255, 171, 0, 0.20);
  padding: 0px var(--cometchat-padding);
    color: var(--cometchat-warning-color);
  font: var(--cometchat-font-body-regular);
}

/* ==================== Context: Composer Input ==================== */

/**
 * Mentions in the message composer input — no direction context,
 * so style based on self/other only.
 * @see Requirement 5.6
 */
.cometchat-message-composer .cometchat-rich-text-editor__content .cometchat-mentions  {
  color: var(--cometchat-text-color-highlight);
  font: var(--cometchat-font-body-regular);
  display: inline;
}

.cometchat-message-composer .cometchat-rich-text-editor__content .cometchat-mentions-you  {
  color: var(--cometchat-warning-color);
  font: var(--cometchat-font-body-regular);
}

/* ==================== Context: Reply/Edit Preview ==================== */

/**
 * Mentions in reply/edit preview subtitle — no direction context,
 * so style based on self/other only.
 * @see Requirement 5.6
 */
.cometchat-message-composer__reply-preview-subtitle .cometchat-mentions,
.cometchat-message-composer__edit-preview-subtitle .cometchat-mentions {
  border-radius: var(--cometchat-radius);
  background: rgba(104, 82, 214, 0.20);
  padding: 0px var(--cometchat-padding);
  color: var(--cometchat-text-color-highlight);
  font: var(--cometchat-font-caption1-regular);
}

.cometchat-message-composer__reply-preview-subtitle .cometchat-mentions-you,
.cometchat-message-composer__edit-preview-subtitle .cometchat-mentions-you {
  border-radius: var(--cometchat-radius);
  background: rgba(255, 171, 0, 0.20);
  padding: 0px var(--cometchat-padding);
  color: var(--cometchat-warning-color);
  font: var(--cometchat-font-caption1-regular);
}

/* Rich Text Editor Styles - imported globally for view encapsulation compatibility */
/* Focus rules are defined in rich-text-styles.css */

/* Mention Styles - imported globally for consistent mention rendering across all contexts */

@font-face {
  font-family: 'Roboto';
  src: url('Roboto-Black.d863c263b1406663.woff2') format('woff2'),
       url('Roboto-Black.cf9b4c7969d00cd7.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('Roboto-BlackItalic.956b915e430bea6b.woff2') format('woff2'),
       url('Roboto-BlackItalic.cc1dbbb7468b8073.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('Roboto-Bold.aa7af41080b936fb.woff2') format('woff2'),
       url('Roboto-Bold.a5947e779e3f9830.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('Roboto-BoldItalic.89f601dad57ad144.woff2') format('woff2'),
       url('Roboto-BoldItalic.13f5ef80cae5a577.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('Roboto-Regular.90a86f32c292fe85.woff2') format('woff2'),
       url('Roboto-Regular.8ff6965283b25d97.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('Roboto-Italic.4c4f88b20bc52f66.woff2') format('woff2'),
       url('Roboto-Italic.bc297ed5b23d4574.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('Roboto-Light.de675baf07889d7e.woff2') format('woff2'),
       url('Roboto-Light.cf1d77a223344a49.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('Roboto-LightItalic.4be29b26d653fb48.woff2') format('woff2'),
       url('Roboto-LightItalic.73657c5d2b422dd6.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('Roboto-Medium.3e06996a8faece1c.woff2') format('woff2'),
       url('Roboto-Medium.530bae4d999e632d.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('Roboto-MediumItalic.6edfd5b46a926c5c.woff2') format('woff2'),
       url('Roboto-MediumItalic.3459c5e460293e25.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
/* Links in subtitle */
.cometchat-link{
  text-decoration: none;
  color: var(--cometchat-conversations-subtitle-color, var(--cometchat-text-color-secondary));
}

:root {
  /* Spacing Units
  Define consistent spacing units to be used throughout the application. These variables provide a range of spacing intervals for padding, margin, and layout styling, ensuring uniformity across components.
    */

  --cometchat-spacing: 2px;
  --cometchat-spacing-1: 4px;
  --cometchat-spacing-2: 8px;
  --cometchat-spacing-3: 12px;
  --cometchat-spacing-4: 16px;
  --cometchat-spacing-5: 20px;
  --cometchat-spacing-6: 24px;
  --cometchat-spacing-7: 28px;
  --cometchat-spacing-8: 32px;
  --cometchat-spacing-9: 36px;
  --cometchat-spacing-10: 40px;
  --cometchat-spacing-11: 44px;
  --cometchat-spacing-12: 48px;
  --cometchat-spacing-13: 52px;
  --cometchat-spacing-14: 56px;
  --cometchat-spacing-15: 60px;
  --cometchat-spacing-16: 64px;
  --cometchat-spacing-17: 68px;
  --cometchat-spacing-18: 72px;
  --cometchat-spacing-19: 76px;
  --cometchat-spacing-20: 80px;
  --cometchat-spacing-max: 1000px;

  /* Padding
  Map padding values to corresponding spacing units for consistent padding across all UI elements,
  enhancing visual rhythm and balance.
    */
  --cometchat-padding: var(--cometchat-spacing);
  --cometchat-padding-1: var(--cometchat-spacing-1);
  --cometchat-padding-2: var(--cometchat-spacing-2);
  --cometchat-padding-3: var(--cometchat-spacing-3);
  --cometchat-padding-4: var(--cometchat-spacing-4);
  --cometchat-padding-5: var(--cometchat-spacing-5);
  --cometchat-padding-6: var(--cometchat-spacing-6);
  --cometchat-padding-7: var(--cometchat-spacing-7);
  --cometchat-padding-8: var(--cometchat-spacing-8);
  --cometchat-padding-9: var(--cometchat-spacing-9);
  --cometchat-padding-10: var(--cometchat-spacing-10);

  /* Margin
    Map margin values to corresponding spacing units to ensure consistent spacing between elements and maintain a cohesive layout throughout the application.
    */
  --cometchat-margin: var(--cometchat-spacing);
  --cometchat-margin-1: var(--cometchat-spacing-1);
  --cometchat-margin-2: var(--cometchat-spacing-2);
  --cometchat-margin-3: var(--cometchat-spacing-3);
  --cometchat-margin-4: var(--cometchat-spacing-4);
  --cometchat-margin-5: var(--cometchat-spacing-5);
  --cometchat-margin-6: var(--cometchat-spacing-6);
  --cometchat-margin-7: var(--cometchat-spacing-7);
  --cometchat-margin-8: var(--cometchat-spacing-8);
  --cometchat-margin-9: var(--cometchat-spacing-9);
  --cometchat-margin-10: var(--cometchat-spacing-10);
  --cometchat-margin-11: var(--cometchat-spacing-11);
  --cometchat-margin-12: var(--cometchat-spacing-12);
  --cometchat-margin-13: var(--cometchat-spacing-13);
  --cometchat-margin-14: var(--cometchat-spacing-14);
  --cometchat-margin-15: var(--cometchat-spacing-15);
  --cometchat-margin-16: var(--cometchat-spacing-16);
  --cometchat-margin-17: var(--cometchat-spacing-17);
  --cometchat-margin-18: var(--cometchat-spacing-18);
  --cometchat-margin-19: var(--cometchat-spacing-19);
  --cometchat-margin-20: var(--cometchat-spacing-20);

  /* Border Radius
   Define border-radius values tied to spacing units,
      providing consistent rounded corners for UI elements,
      aligning with the overall design system.
     */
  --cometchat-radius: var(--cometchat-spacing);
  --cometchat-radius-1: var(--cometchat-spacing-1);
  --cometchat-radius-2: var(--cometchat-spacing-2);
  --cometchat-radius-3: var(--cometchat-spacing-3);
  --cometchat-radius-4: var(--cometchat-spacing-4);
  --cometchat-radius-5: var(--cometchat-spacing-5);
  --cometchat-radius-6: var(--cometchat-spacing-6);
  --cometchat-radius-max: var(--cometchat-spacing-max);
  /*
    These variables define the fonts for different text elements.
    Use these to maintain consistent typography styles throughout your application.
     */
  --cometchat-font-family: 'Roboto', 'Inter';
  --cometchat-font-title-bold: 700 32px/38.4px var(--cometchat-font-family);
  --cometchat-font-title-medium: 500 32px/38.4px var(--cometchat-font-family);
  --cometchat-font-title-regular: 400 32px/38.4px var(--cometchat-font-family);

  --cometchat-font-heading1-bold: 700 24px/28.8px var(--cometchat-font-family);
  --cometchat-font-heading1-medium: 500 24px/28.8px var(--cometchat-font-family);
  --cometchat-font-heading1-regular: 400 24px/28.8px var(--cometchat-font-family);

  --cometchat-font-heading2-bold: 700 20px/24px var(--cometchat-font-family);
  --cometchat-font-heading2-medium: 500 20px/24px var(--cometchat-font-family);
  --cometchat-font-heading2-regular: 400 20px/24px var(--cometchat-font-family);

  --cometchat-font-heading3-bold: 700 18px/21.6px var(--cometchat-font-family);
  --cometchat-font-heading3-medium: 500 18px/21.6px var(--cometchat-font-family);
  --cometchat-font-heading3-regular: 400 18px/21.6px var(--cometchat-font-family);

  --cometchat-font-heading4-bold: 700 16px/19.2px var(--cometchat-font-family);
  --cometchat-font-heading4-medium: 500 16px/19.2px var(--cometchat-font-family);
  --cometchat-font-heading4-regular: 400 16px/19.2px var(--cometchat-font-family);

  --cometchat-font-body-bold: 700 14px/16.8px var(--cometchat-font-family);
  --cometchat-font-body-medium: 500 14px/16.8px var(--cometchat-font-family);
  --cometchat-font-body-regular: 400 14px/16.8px var(--cometchat-font-family);

  --cometchat-font-caption1-bold: 700 12px/14.4px var(--cometchat-font-family);
  --cometchat-font-caption1-medium: 500 12px/14.4px var(--cometchat-font-family);
  --cometchat-font-caption1-regular: 400 12px/14.4px var(--cometchat-font-family);

  --cometchat-font-caption2-bold: 700 10px/12px var(--cometchat-font-family);
  --cometchat-font-caption2-medium: 500 10px/12px var(--cometchat-font-family);
  --cometchat-font-caption2-regular: 400 10px/12px var(--cometchat-font-family);

  --cometchat-font-button-bold: 700 14px/16.8px var(--cometchat-font-family);
  --cometchat-font-button-medium: 500 14px/16.8px var(--cometchat-font-family);
  --cometchat-font-button-regular: 400 14px/16.8px var(--cometchat-font-family);

  --cometchat-font-link: 400 14px/19.6px var(--cometchat-font-family);

  /*Primary & Extended Colors
   Set the primary color and a range of extended shades to be used throughout the application,
    maintaining a consistent visual theme with variations to suit different UI components and states.
     */
  --cometchat-primary-color: #6852D6;
  --cometchat-extended-primary-color-50: #F9F8FD;
  --cometchat-extended-primary-color-100: #EDEAFA;
  --cometchat-extended-primary-color-200: #DCD7F6;
  --cometchat-extended-primary-color-300: #CCC4F1;
  --cometchat-extended-primary-color-400: #BBB1ED;
  --cometchat-extended-primary-color-500: #AA9EE8;
  --cometchat-extended-primary-color-600: #9A8BE4;
  --cometchat-extended-primary-color-700: #8978DF;
  --cometchat-extended-primary-color-800: #7965DB;
  --cometchat-extended-primary-color-900: #5D49BE;

  /*
    Neutral Colors
     Define a neutral color palette, providing versatile shades for backgrounds,text and borders. These neutrals serve as the foundation for the application's color scheme.
     */
  --cometchat-neutral-color-50: #FFFFFF;
  --cometchat-neutral-color-100: #FAFAFA;
  --cometchat-neutral-color-200: #F5F5F5;
  --cometchat-neutral-color-300: #E8E8E8;
  --cometchat-neutral-color-400: #DCDCDC;
  --cometchat-neutral-color-500: #707070;
  --cometchat-neutral-color-600: #727272;
  --cometchat-neutral-color-700: #5B5B5B;
  --cometchat-neutral-color-800: #434343;
  --cometchat-neutral-color-900: #141414;

  /*
  Alert Colors
   Assign colors for various alerts, such as informational messages, warnings,  success notifications,
and errors.
     */
  --cometchat-info-color: #0B7BEA;
  --cometchat-warning-color: #FFAB00;
  --cometchat-success-color: #09C26F;
  --cometchat-error-color: #F44649;
  --cometchat-error-color-100: #FEF3F2;

  /*
    Static colors
     Assign colors for various alerts, such as informational messages, warnings,  success notifications,
  and errors.
       */

  --cometchat-static-black: #141414;
  --cometchat-static-white: #FFFFFF;

  /*
  Background Colors
   Specify background colors derived from the neutral palette for different sections of the application.
     */
  --cometchat-background-color-01: var(--cometchat-neutral-color-50);
  --cometchat-background-color-02: var(--cometchat-neutral-color-100);
  --cometchat-background-color-03: var(--cometchat-neutral-color-200);
  --cometchat-background-color-04: var(--cometchat-neutral-color-300);



  /*
  Border Colors
Define border colors for UI elements,
    creating clear visual boundaries
      */
  --cometchat-border-color-light: var(--cometchat-neutral-color-200);
  --cometchat-border-color-default: var(--cometchat-neutral-color-300);
  --cometchat-border-color-dark: var(--cometchat-neutral-color-400);
  --cometchat-border-color-highlight: var(--cometchat-primary-color);


  /*
  Text Colors
  Define text colors to ensure readability and contrast against various background shades. These include primary, secondary, tertiary, disabled, and highlight text colors.
      */
  --cometchat-text-color-primary: var(--cometchat-neutral-color-900);
  --cometchat-text-color-secondary: var(--cometchat-neutral-color-600);
  --cometchat-text-color-tertiary: var(--cometchat-neutral-color-500);
  --cometchat-text-color-disabled: var(--cometchat-neutral-color-400);
  --cometchat-text-color-white: var(--cometchat-neutral-color-50);
  --cometchat-text-color-highlight: var(--cometchat-primary-color);

  /*
  Icon Colors
   Assign colors for icons throughout the application. Icon colors align with the text and background palettes.
     */
  --cometchat-icon-color-primary: var(--cometchat-neutral-color-900);
  --cometchat-icon-color-secondary: var(--cometchat-neutral-color-500);
  --cometchat-icon-color-tertiary: var(--cometchat-neutral-color-400);
  --cometchat-icon-color-white: var(--cometchat-neutral-color-50);
  --cometchat-icon-color-highlight: var(--cometchat-primary-color);

  /*
    Styling for shimmer effects shown while loading content in the uikit.
     */
  --cometchat-shimmer-background-color: var(--cometchat-neutral-color-200);
  --cometchat-shimmer-gradient-color: linear-gradient(90deg, #E0E0E0 0%, #EEE 100%);
  --cometchat-text-shimmer-gradient-color: linear-gradient(270deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.70) 50%, rgba(255, 255, 255, 0.00) 100%);


  /*
    Styling for buttons.
     */
  --cometchat-primary-button-background: var(--cometchat-primary-color);
  --cometchat-primary-button-text: var(--cometchat-static-white);
  --cometchat-primary-button-icon: var(--cometchat-static-white);
  --cometchat-secondary-button-background: var(--cometchat-neutral-color-900);
  --cometchat-secondary-button-icon: var(--cometchat-neutral-color-900);
  --cometchat-secondary-button-text: var(--cometchat-neutral-color-900);
  --cometchat-link-button: var(--cometchat-info-color);
  --cometchat-fab-button-background: var(--cometchat-primary-color);
  --cometchat-fab-button-icon: var(--cometchat-static-white);
  --cometchat-white-hover: var(--cometchat-neutral-color-100);
  --cometchat-white-pressed: var(--cometchat-neutral-color-300);

  /*
    Shadow & Overlay Variables
    Define shadow and overlay values for consistent elevation and backdrop styling.
    These variables ensure shadows and overlays adapt to light/dark themes.
     */
  --cometchat-shadow-sm: 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08);
  --cometchat-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.15);
  --cometchat-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
  --cometchat-overlay-background: rgba(0, 0, 0, 0.5);
  --cometchat-overlay-background-heavy: rgba(0, 0, 0, 0.75);
  --cometchat-overlay-background-light: rgba(0, 0, 0, 0.6);
  --cometchat-text-shadow-default: 0 1px 2px rgba(0, 0, 0, 0.3);
  --cometchat-text-shadow-strong: 0 2px 4px rgba(0, 0, 0, 0.3);
  --cometchat-outgoing-code-background: rgba(255, 255, 255, 0.2);
  --cometchat-outgoing-border-translucent: rgba(255, 255, 255, 0.5);
  --cometchat-outgoing-text-translucent: rgba(255, 255, 255, 0.9);
  --cometchat-outgoing-selection-background: rgba(255, 255, 255, 0.35);
  --cometchat-outgoing-hover-background: rgba(255, 255, 255, 0.1);
  --cometchat-outgoing-border-subtle: rgba(255, 255, 255, 0.3);
  --cometchat-receiver-hover-background: rgba(0, 0, 0, 0.05);

  /*
    Focus Indicator Variables
    Define focus ring styles for keyboard accessibility.
    These variables ensure visible focus indicators across all interactive elements,
    meeting WCAG 2.1 Level AA requirements (minimum 3:1 contrast ratio).
     */
  --cometchat-focus-ring-color: var(--cometchat-primary-color);
  --cometchat-focus-ring-width: 2px;
  --cometchat-focus-ring-offset: 2px;
  --cometchat-focus-ring-style: solid;
  
  /* Focus indicator for dark backgrounds */
  --cometchat-focus-ring-color-inverse: var(--cometchat-static-white);
  
  /* Focus indicator shadow (alternative to outline) */
  --cometchat-focus-shadow: 0 0 0 var(--cometchat-focus-ring-width) var(--cometchat-focus-ring-color);
  --cometchat-focus-shadow-inset: inset 0 0 0 var(--cometchat-focus-ring-width) var(--cometchat-focus-ring-color);

  /*
    Mention Colors
    Define colors for mentions in text bubbles and message composer.
    Self-mentions (when the logged-in user is mentioned) have distinct styling from other-user mentions.
    All colors meet WCAG AA contrast ratio requirements (4.5:1 minimum).
     */
  --cometchat-mention-self-background: #EDE7FF;
  --cometchat-mention-self-text: #5D49BE;
  --cometchat-mention-other-background: #E3F2FD;
  --cometchat-mention-other-text: #0B5394;

  /* Badge Global Variables */
  --cometchat-badge-background: var(--cometchat-primary-color);
  --cometchat-badge-color: var(--cometchat-static-white);
  --cometchat-badge-font: var(--cometchat-font-caption2-medium);
  --cometchat-badge-border-radius: var(--cometchat-radius-max);
  --cometchat-badge-height: 20px;
  --cometchat-badge-min-width: 20px;

  /* StatusIndicator Global Variables */
  --cometchat-status-indicator-size: 12px;
  --cometchat-status-indicator-border: 2px solid var(--cometchat-background-color-01);
  --cometchat-status-indicator-online-color: var(--cometchat-success-color);
  --cometchat-status-indicator-offline-color: var(--cometchat-neutral-color-400);

  /* Avatar Global Variables */
  --cometchat-avatar-size: 48px;
  --cometchat-avatar-border-radius: var(--cometchat-radius-max);
  --cometchat-avatar-background: var(--cometchat-extended-primary-color-500);
  --cometchat-avatar-text-color: var(--cometchat-primary-button-icon);
  --cometchat-avatar-text-font: var(--cometchat-font-heading2-bold);
  --cometchat-avatar-border: none;

  /* Date Global Variables */
  --cometchat-date-color: var(--cometchat-text-color-secondary);
  --cometchat-date-font: var(--cometchat-font-caption1-regular);
}

[data-theme="dark"] {
  --cometchat-primary-color: #6852D6;
  --cometchat-extended-primary-color-50: #15102B;
  --cometchat-extended-primary-color-100: #1D173C;
  --cometchat-extended-primary-color-200: #251E4D;
  --cometchat-extended-primary-color-300: #2E245E;
  --cometchat-extended-primary-color-400: #362B6F;
  --cometchat-extended-primary-color-500: #3E3180;
  --cometchat-extended-primary-color-600: #473892;
  --cometchat-extended-primary-color-700: #4F3EA3;
  --cometchat-extended-primary-color-800: #5745B4;
  --cometchat-extended-primary-color-900: #7460D9;
  /**
   * Neutral Colors
  * Define a neutral color palette, providing versatile shades for backgrounds,text and borders. These neutrals serve as the foundation for the application's color scheme.
   **/
  --cometchat-neutral-color-50: #141414;
  --cometchat-neutral-color-100: #1A1A1A;
  --cometchat-neutral-color-200: #272727;
  --cometchat-neutral-color-300: #383838;
  --cometchat-neutral-color-400: #4C4C4C;
  --cometchat-neutral-color-500: #9E9E9E;
  --cometchat-neutral-color-600: #989898;
  --cometchat-neutral-color-700: #A8A8A8;
  --cometchat-neutral-color-800: #C8C8C8;
  --cometchat-neutral-color-900: #FFFFFF;
  /*
  Alert Colors
  Assign colors for various alerts, such as informational messages, warnings,  success notifications,
  and errors.
     */

  --cometchat-info-color: #0D66BF;
  --cometchat-warning-color: #D08D04;
  --cometchat-success-color: #0B9F5D;
  --cometchat-message-seen-color: #56E8A7;
  --cometchat-error-color: #C73C3E;
  --cometchat-error-color-100: #3A0C05;
  
    /*
    Static colors
     Assign colors for various alerts, such as informational messages, warnings,  success notifications,
  and errors.
       */

       --cometchat-static-black: #141414;
       --cometchat-static-white: #FFFFFF;

  /*
  Background Colors
   Specify background colors derived from the neutral palette for different sections of the application.
     */
  --cometchat-background-color-01: var(--cometchat-neutral-color-50);
  --cometchat-background-color-02: var(--cometchat-neutral-color-100);
  --cometchat-background-color-03: var(--cometchat-neutral-color-200);
  --cometchat-background-color-04: var(--cometchat-neutral-color-300);

  /*
  Border Colors
Define border colors for UI elements,
    creating clear visual boundaries
      */
  --cometchat-border-color-light: var(--cometchat-neutral-color-200);
  --cometchat-border-color-default: var(--cometchat-neutral-color-300);
  --cometchat-border-color-dark: var(--cometchat-neutral-color-400);
  --cometchat-border-color-highlight: var(--cometchat-primary-color);

  /*
  Text Colors
  Define text colors to ensure readability and contrast against various background shades. These include primary, secondary, tertiary, disabled, and highlight text colors.
      */
  --cometchat-text-color-primary: var(--cometchat-neutral-color-900);
  --cometchat-text-color-secondary: var(--cometchat-neutral-color-600);
  --cometchat-text-color-tertiary: var(--cometchat-neutral-color-500);
  --cometchat-text-color-disabled: var(--cometchat-neutral-color-400);
  --cometchat-text-color-white: var(--cometchat-neutral-color-50);
  --cometchat-text-color-highlight: var(--cometchat-primary-color);

  /*
  Icon Colors
   Assign colors for icons throughout the application. Icon colors align with the text and background palettes.
     */
  --cometchat-icon-color-primary: var(--cometchat-neutral-color-900);
  --cometchat-icon-color-secondary: var(--cometchat-neutral-color-500);
  --cometchat-icon-color-tertiary: var(--cometchat-neutral-color-400);
  --cometchat-icon-color-white: var(--cometchat-neutral-color-50);
  --cometchat-icon-color-highlight: var(--cometchat-primary-color);
  /*
  Styling for shimmer effects shown while loading content in the uikit.
   */
  --cometchat-shimmer-background-color: var(--cometchat-background-color-01);
  --cometchat-shimmer-gradient-color: linear-gradient(90deg, #383838 0%, #272727 100%);
  --cometchat-text-shimmer-gradient-color: linear-gradient(270deg, rgba(26, 26, 26, 0.00) 0%, rgba(26, 26, 26, 0.70) 50%, rgba(26, 26, 26, 0.00) 100%);

  /*
   Styling for buttons.
  */
  --cometchat-primary-button-background: var(--cometchat-primary-color);
  --cometchat-primary-button-text: var(--cometchat-static-white);
  --cometchat-primary-button-icon: var(--cometchat-static-white);
  --cometchat-secondary-button-background: var(--cometchat-neutral-color-900);
  --cometchat-secondary-button-text: var(--cometchat-neutral-color-900);
  --cometchat-secondary-button-icon: var(--cometchat-neutral-color-900);
  --cometchat-link-button: var(--cometchat-info-color);
  --cometchat-fab-button-background: var(--cometchat-primary-color);
  --cometchat-fab-button-icon: var(--cometchat-static-white);
  --cometchat-white-hover: var(--cometchat-neutral-color-100);
  --cometchat-white-pressed: var(--cometchat-neutral-color-300);

  /*
    Shadow & Overlay Variables (Dark Theme)
     */
  --cometchat-shadow-sm: 0px 4px 6px -2px rgba(0, 0, 0, 0.12), 0px 12px 16px -4px rgba(0, 0, 0, 0.16);
  --cometchat-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.3);
  --cometchat-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
  --cometchat-overlay-background: rgba(0, 0, 0, 0.6);
  --cometchat-overlay-background-heavy: rgba(0, 0, 0, 0.85);
  --cometchat-overlay-background-light: rgba(0, 0, 0, 0.7);
  --cometchat-outgoing-code-background: rgba(255, 255, 255, 0.15);
  --cometchat-outgoing-border-translucent: rgba(255, 255, 255, 0.4);
  --cometchat-outgoing-text-translucent: rgba(255, 255, 255, 0.85);
  --cometchat-outgoing-selection-background: rgba(255, 255, 255, 0.3);
  --cometchat-outgoing-hover-background: rgba(255, 255, 255, 0.08);
  --cometchat-outgoing-border-subtle: rgba(255, 255, 255, 0.25);
  --cometchat-receiver-hover-background: rgba(255, 255, 255, 0.05);

  /*
    Focus Indicator Variables (Dark Theme)
    Define focus ring styles for keyboard accessibility in dark theme.
    Uses a lighter primary color variant for better visibility on dark backgrounds.
     */
  --cometchat-focus-ring-color: var(--cometchat-extended-primary-color-500);
  --cometchat-focus-ring-color-inverse: var(--cometchat-static-white);

  /*
    Mention Colors (Dark Theme)
    Define colors for mentions in dark theme.
    Self-mentions (when the logged-in user is mentioned) have distinct styling from other-user mentions.
    All colors meet WCAG AA contrast ratio requirements (4.5:1 minimum) for dark backgrounds.
     */
  --cometchat-mention-self-background: #2E245E;
  --cometchat-mention-self-text: #B8A7F5;
  --cometchat-mention-other-background: #1A3A52;
  --cometchat-mention-other-text: #7EC8F5;
}


/* Import CometChat UIKit CSS variables */

html {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--cometchat-font-family);
  background: var(--cometchat-background-color-01);
  color: var(--cometchat-text-color-primary);
  height: 100%;
  box-sizing: border-box;
  /* Safe area: prevent content from going behind notch/status bar/home indicator */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* ═══════════════════════════════════════════════════
   UIKit Host Element Layout Fixes
   Angular custom elements are inline by default and don't
   participate in flex layout. These rules make UIKit
   components stretch to fill their flex containers.
   ═══════════════════════════════════════════════════ */

cometchat-selector,
cometchat-tabs,
cometchat-messages,
cometchat-threaded-messages,
cometchat-user-details,
cometchat-group-details,
cometchat-empty-state {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Selector and messages fill available space in their panels */
cometchat-selector {
  flex: 1;
  overflow: hidden;
}

/* Tabs stay pinned at the bottom */
cometchat-tabs {
  flex-shrink: 0;
}

/* Messages and threaded messages fill center/right panels */
cometchat-messages,
cometchat-threaded-messages {
  flex: 1;
  overflow: hidden;
}

/* Side panel components fill the right panel */
cometchat-user-details,
cometchat-group-details,
cometchat-search-view {
  flex: 1;
  overflow: hidden;
}

/* Empty state fills center panel */
cometchat-empty-state {
  flex: 1;
}

/* UIKit component host elements inside flex wrappers */
cometchat-conversations,
cometchat-users,
cometchat-groups,
cometchat-call-logs,
cometchat-message-list,
cometchat-message-composer,
cometchat-message-header,
cometchat-thread-header {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* List components fill their panel */
cometchat-conversations,
cometchat-users,
cometchat-groups,
cometchat-call-logs,
cometchat-message-list {
  flex: 1;
  overflow: hidden;
}

/* Header and composer stay fixed size */
cometchat-message-header,
cometchat-thread-header,
cometchat-message-composer {
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════
   Thread panel: white background on the message list
   to visually separate it from the main messages.
   Must be global — Angular emulated encapsulation
   prevents component CSS from reaching UIKit internals.
   ═══════════════════════════════════════════════════ */

.cometchat-threaded-messages {
  --cometchat-message-list-background: var(--cometchat-background-color-01);
}

/* ═══════════════════════════════════════════════════
   Skip Navigation Link
   Visually hidden by default, visible on keyboard focus.
   ═══════════════════════════════════════════════════ */

.cometchat-skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  z-index: 9999;
}

.cometchat-skip-link:focus {
  position: fixed;
  top: var(--cometchat-spacing-2);
  left: var(--cometchat-spacing-2);
  width: auto;
  height: auto;
  padding: var(--cometchat-spacing-2) var(--cometchat-spacing-3);
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: nowrap;
  background: var(--cometchat-primary-color);
  color: var(--cometchat-static-white);
  font: var(--cometchat-font-body-medium);
  border-radius: var(--cometchat-radius-2);
  text-decoration: none;
  outline: none;
}

/* ═══════════════════════════════════════════════════
   Global Focus-Visible Ring
   Consistent keyboard focus indicator for all
   interactive elements across the sample app.
   ═══════════════════════════════════════════════════ */

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="tab"]:focus-visible,
[role="button"]:focus-visible,
[role="radio"]:focus-visible,
[role="link"]:focus-visible {
  outline: 2px solid var(--cometchat-primary-color);
  outline-offset: 2px;
}