.chat-contact-header { position: relative; flex: 1 1 0%; min-width: 0; color: #1f2937; }
.chat-contact-header .chat-contact-name { display: block; max-width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font-size: 16px; font-weight: 600; line-height: 20px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-contact-meta { display: flex; align-items: center; gap: 6px; min-width: 0; height: 24px; }
.chat-contact-header .chat-contact-phone { flex: 0 1 auto; min-width: 0; padding: 0; border: 0; background: transparent; color: #64748b; font-size: 12px; line-height: 18px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: left; }
.chat-contact-header .chat-channel-chip { display: inline-flex; flex: 0 1 auto; align-items: center; justify-content: center; gap: 4px; min-width: 24px; max-width: 45%; height: 24px; padding: 0 5px; border: 0; border-radius: 6px; background: rgb(5 150 105 / 9%); color: #047857; cursor: pointer; }
.chat-channel-chip svg { flex-shrink: 0; }
.chat-channel-label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 10px; font-weight: 600; }
.chat-contact-header .chat-channel-chip[data-channel^="telegram"] { color: #0369a1; background: rgb(14 165 233 / 10%); }
.chat-contact-header .chat-channel-chip[data-channel="instagram"] { color: #be185d; background: rgb(236 72 153 / 9%); }
.chat-contact-header .chat-channel-chip[data-channel^="max"] { color: #6d28d9; background: rgb(124 58 237 / 9%); }
.chat-contact-header button:focus-visible { outline: 2px solid #10b981; outline-offset: 2px; }
.chat-contact-header button:hover { filter: brightness(.9); }
.chat-channel-details { position: absolute; top: calc(100% + 8px); left: 0; z-index: 70; display: flex; flex-direction: column; gap: 3px; width: max-content; max-width: min(280px, calc(100vw - 80px)); padding: 10px 12px; border: 1px solid #dce5e2; border-radius: 12px; background: #fff; color: #334155; box-shadow: 0 8px 28px rgb(0 0 0 / 16%); font-size: 12px; overflow-wrap: anywhere; }
html:is(.dark, .crm-glass) .chat-contact-header { color: #e5edf3; }
html:is(.dark, .crm-glass) .chat-contact-header .chat-contact-phone { color: #b3c7d3; }
html:is(.dark, .crm-glass) .chat-contact-header .chat-channel-chip { color: #94dfc5; background: rgb(117 222 187 / 12%); }
html:is(.dark, .crm-glass) .chat-contact-header .chat-channel-chip[data-channel^="telegram"] { color: #9bd8ff; }
html:is(.dark, .crm-glass) .chat-contact-header .chat-channel-chip[data-channel="instagram"] { color: #ffb5d5; }
html:is(.dark, .crm-glass) .chat-contact-header .chat-channel-chip[data-channel^="max"] { color: #d2bbff; }
html:is(.dark, .crm-glass) .chat-channel-details { background: #213746; color: #e5edf3; border-color: rgb(211 235 247 / 20%); }
@media (max-width: 767px) {
  .chat-header:has(.chat-contact-header) { gap: 4px; }
  /* The contact name and number already open the same client card. */
  .chat-header:has(.chat-contact-header) .header-actions .profile-button { display: none; }
  .chat-contact-header .chat-contact-name { font-size: 14px; }
  .chat-contact-meta { gap: 4px; }
  .chat-contact-header .chat-channel-chip { flex: 0 0 24px; padding: 0; }
  .chat-channel-label { display: none; }
}
@media (max-width: 374px) {
  .chat-header:has(.chat-contact-header) { padding-inline: 8px; }
  .chat-header:has(.chat-contact-header) .incognito-toggle--compact { width: 36px; height: 36px; min-height: 36px; }
  .chat-contact-header .chat-contact-phone { font-size: 11px; }
}