/* Базовые стили мессенджера для макета на лендинге.
   Снимок правил chat.css, buttons.css, main.css и Bootstrap, которые в CRM срабатывают на видимых частях
   раздела «Мессенджер» (список чатов, шапка, лента, поле ввода, меню шаблонов «/»). Поверх них, как и в CRM,
   идут ui.css и messenger-ui.css. Обёртка :where(.lp-crm) не добавляет специфичности — порядок и вес правил
   те же, что в продукте. Если мессенджер в CRM заметно поменяется, снимок нужно обновить. */
:where(.lp-crm) .chat-layout {
  --bs-border-radius: 0.375rem;
  --crm-hover-transition: background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
  --green-btn-bg: rgba(40, 167, 69, 0.1);
  --green-btn-border: rgba(40, 167, 69, 0.2);
  --green-btn-color: #166534;
  --info-btn-bg: rgba(23, 162, 184, 0.1);
  --info-btn-border: rgba(23, 162, 184, 0.2);
  --info-btn-color: #0e6674;
}
:where(.lp-crm) strong { font-weight: bolder; }
:where(.lp-crm) svg { vertical-align: middle; }
:where(.lp-crm) label { display: inline-block; }
:where(.lp-crm) button { border-radius: 0px; }
:where(.lp-crm) button, :where(.lp-crm) input, :where(.lp-crm) textarea { margin: 0px; font-family: inherit; font-size: inherit; line-height: inherit; }
:where(.lp-crm) button { text-transform: none; }
:where(.lp-crm) [type="button"], :where(.lp-crm) button { appearance: button; }
:where(.lp-crm) textarea { resize: vertical; }
:where(.lp-crm) .badge { --bs-badge-padding-x: 0.65em; --bs-badge-padding-y: 0.35em; --bs-badge-font-size: 0.75em; --bs-badge-font-weight: 700; --bs-badge-color: #fff; --bs-badge-border-radius: var(--bs-border-radius); display: inline-block; padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x); font-size: var(--bs-badge-font-size); font-weight: var(--bs-badge-font-weight); line-height: 1; color: var(--bs-badge-color); text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: var(--bs-badge-border-radius); }
:where(.lp-crm) .visually-hidden { width: 1px !important; height: 1px !important; padding: 0px !important; margin: -1px !important; overflow: hidden !important; clip: rect(0px, 0px, 0px, 0px) !important; white-space: nowrap !important; border: 0px !important; }
:where(.lp-crm) .visually-hidden:not(caption) { position: absolute !important; }
:where(.lp-crm) input, :where(.lp-crm) textarea { user-select: text !important; }
:where(.lp-crm) .action-btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; text-align: center; cursor: pointer; transition: var(--crm-hover-transition); will-change: transform; text-decoration: none; transform-origin: center center; border: 1px solid transparent; background: transparent; color: inherit; gap: 6px; line-height: 1; white-space: nowrap; width: 100%; }
:where(.lp-crm) .action-btn.send-msg-btn { background-color: var(--green-btn-bg); color: var(--green-btn-color); border: 1px solid var(--green-btn-border); }
:where(.lp-crm) .info-btn { background-color: var(--info-btn-bg); color: var(--info-btn-color); border: 1px solid var(--info-btn-border); }
:where(.lp-crm) .badge-success { background-color: var(--green-btn-bg); color: var(--green-btn-color); border: 1px solid var(--green-btn-border); }
:where(.lp-crm) .info-btn.chat-quick-action-btn { width: 36px; height: 36px; min-width: 36px; min-height: 36px; border-radius: 10px; padding: 0px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgb(209, 213, 219); background: rgb(249, 250, 251); color: rgb(55, 65, 81); transition: var(--crm-hover-transition); position: relative; }
:where(.lp-crm) .info-btn.chat-quick-action-btn svg { width: 18px; height: 18px; display: block; }
:where(.lp-crm) .info-btn.chat-quick-action-btn { transition: var(--crm-hover-transition); will-change: transform; transform-origin: center center; }
:where(.lp-crm) .chat-container { display: flex; flex-direction: column; height: 100%; background: white; box-shadow: rgba(0, 0, 0, 0.05) 0px 5px 15px; border: 1px solid var(--border); overflow: hidden; position: relative; }
:where(.lp-crm) .message { margin-bottom: 5px; max-width: 400px; min-width: 150px; width: fit-content; padding: 10px 14px; border-radius: 12px; font-size: 13px; line-height: 1.35; position: relative; color: white; font-weight: 500; box-shadow: rgba(0, 0, 0, 0.12) 0px 3px 8px; transform-origin: center center; animation: 0.25s ease 0s 1 normal forwards running messageAppear; transform: translateY(10px); }
:where(.lp-crm) .message-incoming { background: linear-gradient(263.87deg, rgb(74, 85, 104) 0%, rgb(45, 55, 72) 100%); box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 20px, rgba(0, 0, 0, 0.1) 0px 10px 20px, rgb(74, 85, 104) 0px -2px 4px inset, rgb(45, 55, 72) 0px -8px 8px inset; align-self: flex-start; margin-right: auto; margin-left: 10px; }
:where(.lp-crm) .message-outgoing { background: linear-gradient(263.87deg, rgb(124, 58, 237) 0%, rgb(91, 33, 182) 100%); box-shadow: rgba(124, 58, 237, 0.1) 0px 10px 20px, rgba(91, 33, 182, 0.1) 0px 10px 20px, rgb(124, 58, 237) 0px -2px 4px inset, rgb(91, 33, 182) 0px -8px 8px inset; align-self: flex-end; margin-left: auto; margin-right: 10px; }
:where(.lp-crm) .message-item { margin-top: 16px; width: fit-content; max-width: min(500px, 100%); min-width: 0px; position: relative; z-index: 0; display: flex; flex-direction: column; user-select: text; }
:where(.lp-crm) .message-item--outgoing { margin-left: auto; padding-left: 80px; }
:where(.lp-crm) .message-item--incoming { margin-right: auto; padding-right: 80px; }
:where(.lp-crm) .message-top { display: flex; align-items: flex-end; gap: 8px; }
:where(.lp-crm) .message-top-row { display: flex; align-items: center; gap: 8px; width: 100%; justify-content: space-between; }
:where(.lp-crm) .message-top-left { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0px; flex: 1 1 auto; }
:where(.lp-crm) .message-top-name { font-weight: 500; font-size: 14px; color: rgb(23, 25, 38); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(.lp-crm) .message-item .message { margin: 4px 0px 0px; padding: 0px; width: 100%; min-width: 0px; max-width: 100%; border-radius: 20px; }
:where(.lp-crm) .message-item .message.message-incoming, :where(.lp-crm) .message-item .message.message-outgoing { align-self: stretch; margin-left: 0px; margin-right: 0px; position: relative; overflow: hidden; transition: background 0.24s, box-shadow 0.24s, transform 0.24s, filter 0.24s; }
:where(.lp-crm) .message-item--outgoing .message { border-top-right-radius: 3.5px; }
:where(.lp-crm) .message-item--incoming .message { border-top-left-radius: 3.5px; }
:where(.lp-crm) .message-item .message-content.message__content { padding-top: 12px; min-width: 0px; }
:where(.lp-crm) .message-item .message-content.message__content > * { margin-left: 12px; margin-right: 12px; }
:where(.lp-crm) .message-item .message-footer { margin-top: 0px; min-height: 30px; display: flex; align-items: center; justify-content: space-between; padding: 0px 12px; color: rgba(255, 255, 255, 0.7); border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; gap: 8px; }
:where(.lp-crm) .message-footer__right { display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
:where(.lp-crm) .message-text { margin-top: 10px; white-space: pre-wrap; word-break: break-word; }
:where(.lp-crm) .message-time { color: rgba(255, 255, 255, 0.7); font-size: 0.85em; }
:where(.lp-crm) .chat-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; margin-left: 8px; }
:where(.lp-crm) .chat-messages { flex: 1 1 0%; padding: 15px 10px; overflow: hidden auto; touch-action: pan-y; overscroll-behavior-x: contain; background-color: rgb(245, 247, 250); display: flex; flex-direction: column; transition: var(--crm-hover-transition); position: relative; }
@keyframes chatSpin { 
  100% { transform: rotate(360deg); }
}
:where(.lp-crm) .chat-list-container { position: absolute; inset: 0px; height: 100%; overflow-y: auto; padding-top: calc(78px); padding-bottom: calc(74px); transition: var(--crm-hover-transition); scrollbar-color: transparent transparent; scrollbar-width: none !important; }
:where(.lp-crm) .chat-list-container::-webkit-scrollbar { display: none !important; width: 0px !important; height: 0px !important; }
:where(.lp-crm) .chat-list-container::-webkit-scrollbar-thumb { background: transparent !important; }
:where(.lp-crm) .chat-list-container::-webkit-scrollbar-track { background: transparent !important; }
@keyframes chatAppear { 
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0px); }
}
:where(.lp-crm) .chat-item { padding: 12px 16px; border-bottom: 1px solid rgb(240, 240, 240); cursor: pointer; box-shadow: none; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; overflow: hidden; transition: var(--crm-hover-transition),
    max-height 220ms ease,
    opacity 180ms ease,
    padding-top 220ms ease,
    padding-bottom 220ms ease,
    border-bottom-width 220ms ease; max-height: var(--chat-item-max-height, 160px); will-change: max-height, opacity, transform, padding; }
:where(.lp-crm) .chat-left { display: flex; align-items: center; gap: 10px; min-width: 0px; flex: 1 1 auto; }
:where(.lp-crm) .chat-left .chat-info { min-width: 0px; flex: 1 1 auto; }
:where(.lp-crm) .crm-avatar { width: 36px; height: 36px; border-radius: 999px; flex: 0 0 36px; position: relative; overflow: hidden; background: linear-gradient(263.87deg, rgb(124, 58, 237) 0%, rgb(91, 33, 182) 100%); box-shadow: rgba(124, 58, 237, 0.18) 0px 6px 12px; border: 1px solid rgba(91, 33, 182, 0.2); display: inline-flex; align-items: center; justify-content: center; color: white; font-weight: 800; font-size: 14px; letter-spacing: 0.02em; user-select: none; }
:where(.lp-crm) .crm-avatar__fallback { width: 100%; height: 100%; display: inline-flex; align-items: center; justify-content: center; color: rgb(255, 255, 255); -webkit-text-fill-color: currentcolor; font-size: inherit; line-height: 1; text-rendering: geometricprecision; position: absolute; inset: 0px; z-index: 1; -webkit-font-smoothing: antialiased; }
:where(.lp-crm) .crm-avatar--chat { width: 38px; height: 38px; flex-basis: 38px; overflow: visible; }
:where(.lp-crm) .chat-source-icon { position: absolute; right: -3px; bottom: -3px; z-index: 4; width: 17px; height: 17px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 999px; background: rgb(255, 255, 255); box-shadow: rgba(15, 23, 42, 0.28) 0px 1px 4px; pointer-events: none; }
:where(.lp-crm) .chat-source-icon__svg { display: block; width: 100%; height: 100%; flex: 0 0 100%; }
:where(.lp-crm) .crm-avatar--lead { width: 40px; height: 40px; flex-basis: 40px; }
@keyframes chatDisappear { 
  100% { opacity: 0; transform: translateY(-10px); height: 0px; padding-top: 0px; padding-bottom: 0px; margin-bottom: 0px; border-bottom-width: 0px; }
}
:where(.lp-crm) .chat-item.active { background-color: rgb(248, 245, 255); border-left: 3px solid rgb(124, 58, 237); position: relative; }
:where(.lp-crm) .chat-item.active .chat-name { color: rgb(91, 33, 182); font-weight: 600; }
:where(.lp-crm) .chat-item.active .chat-preview { color: rgb(107, 70, 193); }
:where(.lp-crm) .chat-item.active .chat-time { color: var(--primary); font-weight: 500; }
:where(.lp-crm) .chat-item.active::after { content: ""; position: absolute; right: 0px; top: 50%; transform: translateY(-50%); width: 4px; height: 20px; background: rgb(124, 58, 237); border-radius: 2px 0px 0px 2px; }
:where(.lp-crm) .chat-item.unread { background-color: rgb(240, 244, 255); }
:where(.lp-crm) .chat-item.unread .chat-name { font-weight: 700; }
:where(.lp-crm) .chat-input { padding-top: 15px; padding-right: 15px; padding-left: 15px; padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(263.87deg, rgb(255, 255, 255) 0%, rgb(248, 250, 252) 100%); display: flex; flex-wrap: wrap; gap: 10px; border-top: 1px solid rgb(226, 232, 240); }
:where(.lp-crm) .action-btn.send-msg-btn { transition: var(--crm-hover-transition); margin-left: 10px; height: 45px; width: 45px; align-self: flex-end; padding: 6px 10px; }
:where(.lp-crm) .input-with-icon { position: relative; display: flex; align-items: center; flex: 1 1 0%; }
:where(.lp-crm) .input-with-icon input, :where(.lp-crm) .input-with-icon textarea { width: 100%; padding: 6px 14px; border: 1px solid rgb(224, 224, 224); border-radius: 8px; font-size: 14px; transition: var(--crm-hover-transition); background-color: rgb(249, 249, 249); }
:where(.lp-crm) .chat-textarea { resize: none; overflow-y: auto; line-height: 1.4; min-height: 45px; max-height: calc(11.2em + 12px); white-space: pre-wrap; scrollbar-width: none; }
:where(.lp-crm) .chat-textarea::-webkit-scrollbar { display: none; width: 0px; height: 0px; }
:where(.lp-crm) .with-attach-btn { padding-right: 14px !important; width: 100%; }
:where(.lp-crm) .attach-btn-inside { position: absolute; right: 65px; bottom: 5px; transform: none; cursor: pointer; padding: 8px; color: rgb(107, 114, 128); transition: var(--crm-hover-transition), right 0.2s ease; border-radius: 6px; display: flex; align-items: center; justify-content: center; z-index: 2; }
:where(.lp-crm) .more-actions-btn { right: 95px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: none; }
:where(.lp-crm) .emoji-btn { right: 155px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: none; }
:where(.lp-crm) .attach-btn-inside svg { width: 18px; height: 18px; }
:where(.lp-crm) .attach-btn-inside svg :not(defs):not(defs *)[stroke="#000000"] { stroke: currentcolor; }
:where(.lp-crm) .chat-textarea { scrollbar-width: none; }
:where(.lp-crm) .chat-textarea::-webkit-scrollbar { display: none; width: 0px; height: 0px; }
:where(.lp-crm) .input-with-icon .chat-textarea.with-attach-btn { padding-bottom: 56px; }
:where(.lp-crm) .chat-input .input-with-icon::after { content: ""; position: absolute; right: 60px; bottom: 4px; height: 38px; width: 170px; background: linear-gradient(90deg, rgba(249, 249, 249, 0) 0%, rgb(249, 249, 249) 40%); border-bottom-right-radius: 8px; pointer-events: none; z-index: 1; transition: width 0.2s; }
:where(.lp-crm) .input-with-icon .chat-textarea.with-attach-btn { scrollbar-width: none; }
:where(.lp-crm) .input-with-icon .chat-textarea.with-attach-btn::-webkit-scrollbar { display: none; width: 0px; height: 0px; }
:where(.lp-crm) .chat-sidebar { width: 300px; background: rgb(255, 255, 255); border-right: 1px solid var(--border); height: 100%; overflow: hidden; position: relative; transition: var(--crm-hover-transition); }
:where(.lp-crm) .chat-layout .chat-sidebar { scrollbar-width: none; }
:where(.lp-crm) .chat-layout .chat-sidebar::-webkit-scrollbar { width: 0px; height: 0px; }
:where(.lp-crm) .chat-layout { display: flex; height: var(--app-vh, 100dvh); overflow-x: hidden; overscroll-behavior-y: contain; position: relative; }
:where(.lp-crm) .chat-info { flex: 1 1 0%; overflow: hidden; }
:where(.lp-crm) .chat-info-header { display: flex; align-items: center; flex-direction: row; margin-bottom: 4px; min-width: 0px; flex: 1 1 0%; }
:where(.lp-crm) .chat-name-wrap { display: flex; align-items: center; gap: 5px; min-width: 0px; flex: 1 1 0%; }
:where(.lp-crm) .chat-name-wrap .chat-name { flex: 1 1 0%; min-width: 0px; }
:where(.lp-crm) .chat-name { display: flex; align-items: center; font-weight: 600; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; }
:where(.lp-crm) .chat-preview { font-size: 13px; color: var(--text-light); max-width: 20ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(.lp-crm) .unread-count { background: var(--green-btn-color); color: white; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }
:where(.lp-crm) .chat-time { font-size: 12px; color: var(--text-light); margin-left: 8px; }
:where(.lp-crm) .chat-main { flex: 1 1 0%; display: flex; flex-direction: column; position: relative; }
:where(.lp-crm) .chat-layout { overflow-x: hidden; }
:where(.lp-crm) .chat-header-top .lead-header-actions { display: inline-flex; align-items: center; gap: 6px; }
:where(.lp-crm) .chat-header-top #pipeline-stage-icon-btn { min-width: 36px; }
:where(.lp-crm) .chat-header-top #pipeline-stage-icon-btn .chat-quick-action-btn__label { display: none; }
:where(.lp-crm) .chat-header-top #pipeline-stage-icon-btn { display: inline-flex; align-items: center; gap: 8px; width: auto; max-width: min(360px, 32vw); padding: 0px 12px; }
:where(.lp-crm) .chat-header-top #pipeline-stage-icon-btn svg { flex: 0 0 18px; width: 18px; height: 18px; }
:where(.lp-crm) .chat-header-top #pipeline-stage-icon-btn .chat-quick-action-btn__label { display: inline-block; min-width: 0px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; line-height: 1; }
:where(.lp-crm) .crm-dd-menu { display: none; background: rgb(255, 255, 255); border: 1px solid rgb(229, 231, 235); border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.08) 0px 6px 20px; max-height: 240px; overflow: hidden auto; padding: 6px; scrollbar-width: none; will-change: transform; }
:where(.lp-crm) .crm-dd-menu::-webkit-scrollbar { width: 0px; height: 0px; }
:where(.lp-crm) .slash-macros-menu { min-width: 260px; max-width: 520px; animation: 120ms ease 0s 1 normal none running fadeInScale; }
:where(.lp-crm) .slash-macros-menu .crm-dd-option { white-space: nowrap; }
:where(.lp-crm) .slash-macros-menu .crm-dd-option.selected { background: rgb(237, 233, 254); color: rgb(76, 29, 149); }
:where(.lp-crm) .lead-macros-btn { right: 185px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: none; }
:where(.lp-crm) .lead-macros-btn__glyph { display: grid; width: 18px; height: 18px; place-items: center; }
:where(.lp-crm) .lead-macros-btn__glyph svg { display: block; width: 18px; height: 18px; }
@keyframes fadeInScale { 
  0% { opacity: 0; transform: scale(0.96); }
  100% { opacity: 1; transform: scale(1); }
}
:where(.lp-crm) .crm-dd-menu { display: none; background: rgb(255, 255, 255); border: 1px solid rgb(229, 231, 235); border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.08) 0px 6px 20px; max-height: 240px; overflow: hidden auto; padding: 6px; }
:where(.lp-crm) .crm-dd-option { padding: 6px 8px; border-radius: 6px; font-size: 12px; color: rgb(17, 24, 39); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: var(--crm-hover-transition); }
:where(.lp-crm) .crm-dd-option.selected { background: rgb(237, 233, 254); color: rgb(76, 29, 149); }
:where(.lp-crm) .slash-macros-menu .slash-macro-option { display: flex; align-items: center; gap: 8px; }
:where(.lp-crm) .slash-macros-menu .slash-macro-option .sm-text { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: rgb(17, 24, 39); }
:where(.lp-crm) .slash-macros-menu .slash-macro-option .sm-text .sm-prefix { font-weight: 700; }
:where(.lp-crm) .chat-main { --lead-panel-width: min(360px, 92vw); overflow-x: hidden; }
:where(.lp-crm) .chat-main { transition: var(--crm-hover-transition); }
:where(.lp-crm) .unread-count { display: inline-grid; place-items: center; line-height: 20px; }
:where(.lp-crm) .chat-layout, :where(.lp-crm) .chat-layout * { scrollbar-width: thin; scrollbar-color: rgb(91, 33, 182) transparent; }
:where(.lp-crm) .chat-layout { text-size-adjust: 100%; }
:where(.lp-crm) .chat-layout::-webkit-scrollbar, :where(.lp-crm) .chat-layout ::-webkit-scrollbar { width: 8px; height: 8px; }
:where(.lp-crm) .chat-layout::-webkit-scrollbar-thumb, :where(.lp-crm) .chat-layout ::-webkit-scrollbar-thumb { background-color: rgb(91, 33, 182); border-radius: 8px; background-clip: padding-box; border: 2px solid transparent; }
:where(.lp-crm) .chat-layout::-webkit-scrollbar-track, :where(.lp-crm) .chat-layout ::-webkit-scrollbar-track { background: transparent; }
:where(.lp-crm) .message-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: 12px; color: rgb(160, 174, 192); }
:where(.lp-crm) .message-footer, :where(.lp-crm) .message-item .message-footer { align-items: center; }
:where(.lp-crm) .message-footer { line-height: 1; }
:where(.lp-crm) .message-status { display: flex; align-items: center; line-height: 0; }
:where(.lp-crm) .message-status svg { display: block; }
:where(.lp-crm) .message-time { display: inline-flex; align-items: center; line-height: 1; }
:where(.lp-crm) .message-status { display: flex; align-items: center; gap: 5px; }
:where(.lp-crm) .message-status .delivered { color: rgb(56, 161, 105); font-size: 14px; }
@keyframes crmSidebarMsgSearchSpin { 
  100% { transform: rotate(360deg); }
}
:where(.lp-crm) .badge { padding: 3px 8px; border-radius: 12px; font-size: 0.8em; }
:where(.lp-crm) .chat-header { background: rgb(248, 249, 250); border-bottom: 1px solid rgb(234, 234, 234); padding: 15px 20px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
:where(.lp-crm) .chat-header-top { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 12px; }
:where(.lp-crm) .chat-header-top-left { min-width: 0px; }
:where(.lp-crm) .chat-header-top-right { justify-self: end; }
:where(.lp-crm) .chat-header-top .lead-name { display: flex; gap: 6px; min-width: 0px; }
:where(.lp-crm) .chat-header-top .lead-first-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(.lp-crm) .chat-header-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
:where(.lp-crm) .chat-header-top-left { display: flex; align-items: center; gap: 7px; min-width: 0px; flex: 1 1 auto; }
:where(.lp-crm) .chat-header-top-right { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
:where(.lp-crm) .lead-main-info-left { display: flex; flex-direction: row; align-items: center; gap: 10px; min-width: 0px; }
:where(.lp-crm) .lead-main-text { display: flex; flex-direction: column; min-width: 0px; }
:where(.lp-crm) .lead-name { display: flex; align-items: center; gap: 5px; line-height: 1.2; font-size: 18px; font-weight: 500; }
:where(.lp-crm) .lead-first-name { font-size: 16px; font-weight: 600; }
:where(.lp-crm) .badge { padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 500; }
:where(.lp-crm) .chat-search-container { position: absolute; left: 8px; right: 8px; top: 10px; z-index: 12; padding: 10px; margin: 0px; background: rgb(231, 238, 247); color: rgb(51, 65, 85); border: 1px solid rgb(203, 213, 225); border-radius: 12px; box-shadow: rgba(15, 23, 42, 0.14) 0px 10px 26px, rgba(15, 23, 42, 0.04) 0px 0px 0px 1px; }
:where(.lp-crm) .chat-search-row { display: flex; align-items: center; gap: 8px; }
:where(.lp-crm) .chat-search-row .input-with-icon { flex: 1 1 auto; min-width: 0px; }
:where(.lp-crm) .chat-quick-action-btn { flex: 0 0 auto; }
:where(.lp-crm) .chat-search-row .info-btn.chat-quick-action-btn { width: 36px; height: 36px; border-radius: 10px; }
:where(.lp-crm) .chat-search-row .info-btn.chat-quick-action-btn svg { width: 18px; height: 18px; }
:where(.lp-crm) .chat-list__footer .info-btn.chat-quick-action-btn { width: 36px; height: 36px; border-radius: 10px; }
:where(.lp-crm) .chat-search-container .input-with-icon { position: relative; }
:where(.lp-crm) .crm-clearable { position: relative; }
:where(.lp-crm) .crm-clearable [data-clearable="1"] { padding-right: 40px !important; }
:where(.lp-crm) #chat-search-input { width: 100%; height: 36px; padding: 0px 12px 0px 32px; border-radius: 10px; font-size: 14px; }
:where(.lp-crm) .search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: rgb(156, 163, 175); }
:where(.lp-crm) .chat-list__footer { position: absolute; left: 8px; right: 8px; bottom: 10px; z-index: 12; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px; margin: 0px; background: rgb(231, 238, 247); color: rgb(51, 65, 85); border: 1px solid rgb(203, 213, 225); border-radius: 12px; box-shadow: rgba(15, 23, 42, 0.14) 0px 10px 26px, rgba(15, 23, 42, 0.04) 0px 0px 0px 1px; }
:where(.lp-crm) .chat-list__footer-count { padding: 6px; border-radius: 10px; font-weight: 600; font-size: 13px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(.lp-crm) .date-separator { text-align: center; margin: 16px 0px 8px; font-size: 12px; font-weight: 500; color: rgb(107, 114, 128); position: relative; }
:where(.lp-crm) .date-separator::before, :where(.lp-crm) .date-separator::after { content: ""; position: absolute; top: 50%; width: 35%; height: 1px; background: linear-gradient(to right, transparent, rgb(209, 213, 219)); }
:where(.lp-crm) .date-separator::before { left: 0px; }
:where(.lp-crm) .date-separator::after { right: 0px; transform: scaleX(-1); }
:where(.lp-crm) .system-message { display: flex; justify-content: flex-start; margin: 8px 0px 8px 10px; padding: 0px; max-width: 100%; position: relative; font-family: inherit; background: transparent !important; box-shadow: none !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: none !important; }
:where(.lp-crm) .system-message .system-message-inner { background: linear-gradient(145deg, rgb(248, 250, 252), rgb(241, 245, 249)); color: rgb(71, 85, 105); font-size: 10px; line-height: 1.4; padding: 20px 20px 10px; border-radius: 14px; max-width: 100%; width: auto; box-shadow: rgba(0, 0, 0, 0.08) 0px 1px 2px, rgb(226, 232, 240) 0px 0px 0px 1px; border: 1px solid rgb(226, 232, 240); display: flex; flex-direction: column; text-align: center; font-weight: 500; font-family: Manrope, sans-serif; }
:where(.lp-crm) .system-message .system-message-text { white-space: pre-wrap; word-break: break-word; }
:where(.lp-crm) .system-message .system-message-meta { text-align: right; font-size: 10px; margin-top: 2px; opacity: 0.6; font-weight: 400; }
:where(.lp-crm) .system-message.system-message--generic { justify-content: center; margin-left: 0px; width: 100%; }
:where(.lp-crm) .system-message.system-message--generic .system-message-inner { background: transparent; border: 0px; box-shadow: none; padding: 0px; max-width: min(860px, 100%); align-items: center; }
:where(.lp-crm) .system-message.system-message--generic .system-message-meta { text-align: center; font-size: 0.675rem; line-height: 1.25rem; color: rgba(107, 114, 128, 0.85); opacity: 1; margin: 0px; letter-spacing: 0.01em; order: 0; }
:where(.lp-crm) .system-message.system-message--generic .system-message-text { text-align: center; font-size: 0.675rem; line-height: 1.25rem; color: rgb(17, 24, 39); margin: 0px; order: 1; }
:where(.lp-crm) .system-message.system-message--generic .system-message-by { text-align: center; font-size: 0.675rem; line-height: 1.15rem; color: rgba(107, 114, 128, 0.85); margin-top: 2px; margin-bottom: 0px; order: 0; }
:where(.lp-crm) .system-message.system-message--generic.system-message--automation .system-message-text { display: flex; flex-direction: column; align-items: center; gap: 4px; }
:where(.lp-crm) .system-message .system-message-stage-change { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; max-width: 100%; }
:where(.lp-crm) .system-message .system-message-stage-change__title { text-wrap: balance; max-width: 42em; }
:where(.lp-crm) .system-message .system-message-stage-change__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; width: 100%; }
:where(.lp-crm) .system-message .stage-pill { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; padding: 4px 10px; border-radius: 999px; font-weight: 700; font-size: 0.7rem; line-height: 1.35; word-break: break-word; text-align: center; }
:where(.lp-crm) .system-message .stage-pill--from { background: rgba(225, 29, 72, 0.09); color: rgb(159, 18, 57); border: 1px solid rgba(225, 29, 72, 0.32); }
:where(.lp-crm) .system-message .stage-pill--to { background: rgba(5, 150, 105, 0.09); color: rgb(4, 120, 87); border: 1px solid rgba(5, 150, 105, 0.32); }
:where(.lp-crm) .system-message .stage-pill-arrow { color: rgba(107, 114, 128, 0.95); font-weight: 700; flex-shrink: 0; }
:where(.lp-crm) .system-message-inner .system-message-text { white-space: normal !important; }
:where(.lp-crm) .comments-panel-btn { border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: none; right: 125px; }
:where(.lp-crm) .chat-tag-wrapper { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; flex-wrap: nowrap; }
:where(.lp-crm) .chat-tag-display { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; line-height: 1; cursor: pointer; }
:where(.lp-crm) .chat-tag-list { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; max-width: 100%; }
:where(.lp-crm) .tag-pill { display: inline-flex; align-items: center; gap: 4px; background: rgb(249, 250, 251); border: 1px solid rgb(229, 231, 235); border-radius: 9999px; padding: 4px 8px; font-size: 11px; line-height: 1; color: rgb(55, 65, 81); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; }
:where(.lp-crm) .tag-pill-label { pointer-events: none; }
:where(.lp-crm) .chat-tag-edit-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: 0 0 24px; aspect-ratio: 1 / 1; border-radius: 50%; border: 1px dashed rgb(209, 213, 219); background: rgb(255, 255, 255); color: rgb(107, 114, 128); font-size: 0px; position: relative; padding: 0px; cursor: pointer; -webkit-font-smoothing: antialiased; transition: var(--crm-hover-transition); }
:where(.lp-crm) .chat-tag-edit-btn::before { content: ""; width: 14px; height: 14px; background-color: currentcolor; mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2028%2028'%3E%3Cg%3E%3Cg%3E%3Cpath%20fill='black'%20d='M25.969%201.029h-10a1%201%200%200%200-.707.293L13.183%203.4A6.991%206.991%200%201%201%203.4%2013.183l-1.381%201.382a3.488%203.488%200%200%200%200%204.928l6.486%206.486a3.484%203.484%200%200%200%204.928%200l13.243-13.243a1%201%200%200%200%20.293-.707v-10a1%201%200%200%200-1-1zM22%208a2%202%200%201%201%202-2%202%202%200%200%201-2%202z'/%3E%3Cpath%20fill='black'%20d='M9%2014a5%205%200%201%200-5-5%205.006%205.006%200%200%200%205%205zM7%208h1V7a1%201%200%200%201%202%200v1h1a1%201%200%200%201%200%202h-1v1a1%201%200%200%201-2%200v-1H7a1%201%200%200%201%200-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); mask-repeat: no-repeat; mask-position: center center; mask-size: contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; }
:where(.lp-crm) .chat-tag-edit-btn::before { width: 15px; height: 15px; }
:where(.lp-crm) .chat-item-tags { flex: 0 0 100%; display: flex; gap: 6px; margin-top: 8px; overflow: auto hidden; scrollbar-width: none; padding: 2px 2px 3px 0px; }
:where(.lp-crm) .chat-item-tags::-webkit-scrollbar { display: none; }
:where(.lp-crm) .ci-tag { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; height: 22px; padding: 0px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.01em; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: rgba(255, 255, 255, 0.08) 0px 1px 0px inset, rgba(15, 23, 42, 0.18) 0px 1px 2px; transition: transform 0.15s, opacity 0.15s, box-shadow 0.15s, filter 0.15s; }
:where(.lp-crm) .chat-item.active .ci-tag { border-color: rgba(124, 58, 237, 0.16); box-shadow: rgba(255, 255, 255, 0.12) 0px 1px 0px inset, rgba(124, 58, 237, 0.14) 0px 2px 8px; }
@keyframes msgSearchSlideDown { 
  0% { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 1; transform: translateY(0px); }
}
@keyframes msgSearchPulse { 
  0% { outline-color: var(--brand, #5b21b6); }
  60% { outline-color: var(--brand, #5b21b6); }
  100% { outline-color: transparent; }
}
@keyframes msgSearchSpin { 
  100% { transform: rotate(360deg); }
}
@keyframes chatAdFilterEnter { 
  0% { opacity: 0; transform: translateY(8px) scale(0.99); }
  100% { opacity: 1; transform: translateY(0px) scale(1); }
}