

/* Чат с экспертом — светлое оформление */

body.sf-chat-page {
  --sf-chat-panel: #fff;
  --sf-chat-soft: #f7f9fc;
  --sf-chat-line: #dce5ef;
  --sf-chat-ink: #182b40;
  --sf-chat-muted: #6b7b8d;
  --sf-chat-blue: #0082ff;
  --sf-chat-blue-soft: #edf6ff;
}

/* Убираем пустую оболочку страницы и дублирующий логотип */

body.sf-chat-page .sf-chat-legacy-empty,
body.sf-chat-page .gc-main-content > .container > .standard-logo,
body.sf-chat-page > .talks-widget-button {
  display: none !important;
}

/* Общий контейнер */

body.sf-chat-page .sf-chat-shell {
  position: relative !important;
  inset: auto !important;
  display: block !important;

  width: 100% !important;
  max-width: var(--sf-content-width, 1520px) !important;
  height: auto !important;
  min-height: 0 !important;

  margin: 16px auto !important;
  padding: 0 var(--sf-content-gutter, 16px) !important;

  transform: none !important;
  z-index: 1 !important;

  font-family: Inter, "Segoe UI", Arial, sans-serif;
  color: var(--sf-chat-ink);
}

.sf-chat-shell,
.sf-chat-shell * {
  box-sizing: border-box;
}

.sf-chat-shell .talks-widget-window {
  position: relative !important;
  inset: auto !important;
  display: block !important;

  width: 100% !important;
  max-width: none !important;

  height: var(--sf-chat-height, 75vh) !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;

  border: 1px solid var(--sf-chat-line) !important;
  border-radius: 16px !important;

  background: var(--sf-chat-panel) !important;
  box-shadow: 0 8px 28px rgb(22 48 77 / 8%) !important;

  font-family: inherit !important;
  color: var(--sf-chat-ink) !important;
}

/* Штатная шапка продолжает управлять состоянием чата */

.sf-chat-shell .talks-widget-header {
  display: none !important;
}

.sf-chat-shell .talks-widget-body {
  display: grid !important;
  grid-template-columns: minmax(270px, 330px) minmax(0, 1fr) !important;

  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;

  padding: 0 !important;
  overflow: hidden !important;

  background: var(--sf-chat-panel) !important;
}

.sf-chat-shell .talks-widget-body > * {
  grid-row: 1;
  min-width: 0 !important;
  min-height: 0 !important;
}

/* Список диалогов */

.sf-chat-shell .conversations-list-block {
  position: relative !important;
  inset: auto !important;

  grid-column: 1;
  display: flex !important;
  flex-direction: column;

  width: auto !important;
  height: 100% !important;
  float: none !important;

  border-right: 1px solid var(--sf-chat-line) !important;
  background: var(--sf-chat-panel) !important;
}

.sf-chat-section-heading {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  margin: 0;
  padding: 18px 16px 12px;

  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
}

.sf-chat-section-count {
  color: var(--sf-chat-muted);
  font-size: 12px;
  font-weight: 400;
}

.sf-chat-shell .conversations-list {
  position: relative !important;
  inset: auto !important;

  flex: 1 1 auto;

  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  padding: 0 8px 10px !important;
  overflow: auto !important;
  overscroll-behavior: contain;
}

.sf-chat-shell .conversation-annotate {
  position: relative !important;

  display: flex !important;
  align-items: center;
  gap: 10px;

  min-height: 78px;

  margin: 3px 0 !important;
  padding: 10px !important;

  border: 1px solid transparent !important;
  border-radius: 11px;

  background: transparent !important;
  cursor: pointer;
}

.sf-chat-shell .conversation-annotate:hover {
  background: var(--sf-chat-soft) !important;
}

.sf-chat-shell .conversation-annotate.active {
  border-color: #d2e8ff !important;
  background: var(--sf-chat-blue-soft) !important;
}

/* Аватары */

.sf-chat-shell :is(.conversation-img-block, .respondent-img-block) {
  display: block !important;
  flex: 0 0 42px;

  width: 42px !important;
  height: 42px !important;

  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

.sf-chat-shell :is(.conversation-img, .respondent-img-block) {
  overflow: hidden;
  border-radius: 50%;
  background: var(--sf-chat-blue-soft);
}

.sf-chat-shell .conversation-img {
  display: grid;
  place-items: center;

  width: 42px !important;
  height: 42px !important;
}

.sf-chat-shell :is(.conversation-img, .respondent-img-block) img {
  display: block;

  width: 100% !important;
  height: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  border-radius: 50%;
  object-fit: cover;
}

.sf-chat-shell .conversation-img:not(:has(img))::before {
  content: attr(data-sf-initials);
  color: var(--sf-chat-blue);
  font-weight: 700;
}

/* Название, последнее сообщение и время */

.sf-chat-shell :is(.conversation-data-block, .respondent-data-block) {
  flex: 1 1 auto;

  width: auto !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  float: none !important;

  text-align: left !important;
}

.sf-chat-shell .conversation-title-block {
  position: relative !important;

  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 7px;

  margin: 0 !important;
  padding: 0 !important;
}

.sf-chat-shell .conversation-title {
  grid-area: 1 / 1;
  display: block !important;

  width: auto !important;
  min-width: 0;

  color: var(--sf-chat-ink) !important;
  font: 650 13px/1.4 Inter, "Segoe UI", Arial, sans-serif !important;

  white-space: normal !important;
  overflow-wrap: anywhere;
}

.sf-chat-shell :is(.conversation-time, .conversation-fresh-comment-count) {
  position: static !important;
  inset: auto !important;

  margin: 0 !important;
  float: none !important;
  justify-self: end;
}

.sf-chat-shell .conversation-time {
  grid-area: 1 / 2;

  color: var(--sf-chat-muted) !important;
  font: 400 10px/1.4 Inter, sans-serif !important;
}

.sf-chat-shell .conversation-text {
  grid-area: 2 / 1;
  display: -webkit-box !important;

  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;

  color: var(--sf-chat-muted) !important;
  font: 400 12px/1.45 Inter, "Segoe UI", Arial, sans-serif !important;

  white-space: normal !important;
  overflow-wrap: anywhere;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Непрочитанные сообщения */

.sf-chat-shell .conversation-fresh-comment-count {
  grid-area: 2 / 2;
  display: none !important;

  min-width: 20px;
  height: 20px;
  padding: 0 5px !important;

  border-radius: 20px;
  background: var(--sf-chat-blue) !important;
  color: #fff !important;

  font: 600 11px/20px Inter, sans-serif !important;
  text-align: center;
}

.sf-chat-shell .conversation-fresh-comment-count[data-sf-unread="1"] {
  display: block !important;
}

/* Кнопка нового разговора */

.sf-chat-shell .conversation-list-footer {
  position: static !important;
  flex: none;

  padding: 12px !important;

  border-top: 1px solid var(--sf-chat-line) !important;
  background: var(--sf-chat-panel) !important;
}

.sf-chat-shell .conversation-list-footer .btn-new {
  display: block !important;

  width: 100%;
  min-height: 44px;

  margin: 0 !important;
  padding: 11px 14px !important;

  border: 0 !important;
  border-radius: 10px !important;

  background: var(--sf-chat-blue) !important;
  box-shadow: none !important;
  color: #fff !important;

  font: 600 13px/1.4 Inter, "Segoe UI", Arial, sans-serif !important;
}

/* Правая часть */

.sf-chat-shell :is(.selected-conversation, .new-conversation) {
  position: relative !important;
  inset: auto !important;

  grid-column: 2;
  display: none !important;
  flex-direction: column;

  width: auto !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;

  background: var(--sf-chat-panel) !important;
}

.sf-chat-shell[data-sf-chat-view="thread"] .selected-conversation,
.sf-chat-shell[data-sf-chat-view="new"] .new-conversation {
  display: flex !important;
}

/* Состояние, когда диалог ещё не выбран */

.sf-chat-empty-state {
  grid-column: 2;
  display: none;

  align-content: center;
  justify-items: center;

  padding: 28px;
  background: var(--sf-chat-soft);
  text-align: center;
}

.sf-chat-shell[data-sf-chat-view="list"] .sf-chat-empty-state {
  display: grid;
}

.sf-chat-empty-icon {
  display: grid;
  place-items: center;

  width: 56px;
  height: 56px;
  margin-bottom: 14px;

  border-radius: 50%;
  background: var(--sf-chat-blue-soft);
  color: var(--sf-chat-blue);
  font-size: 25px;
}

.sf-chat-empty-state strong {
  color: var(--sf-chat-ink);
  font-size: 16px;
  line-height: 1.4;
}

.sf-chat-empty-state p {
  max-width: 340px;
  margin: 8px 0 0;

  color: var(--sf-chat-muted);
  font-size: 13px;
  line-height: 1.6;
}

/* Заголовки правой части */

.sf-chat-panel-top,
.sf-chat-thread-header {
  flex: none;
  padding: 16px 20px;
  border-bottom: 1px solid var(--sf-chat-line);
}

.sf-chat-panel-title {
  margin: 0;

  color: var(--sf-chat-ink);
  font-size: 15px;
  line-height: 1.4;
  font-weight: 650;
}

.sf-chat-panel-hint {
  margin: 5px 0 0;

  color: var(--sf-chat-muted);
  font-size: 12px;
  line-height: 1.5;
}

.sf-chat-mobile-back {
  display: none;

  border: 0;
  background: transparent;
  color: var(--sf-chat-blue);

  font: 600 13px/1.4 Inter, sans-serif;
  cursor: pointer;
}

.sf-chat-thread-header {
  display: flex;
  align-items: center;
  gap: 12px;

  min-height: 72px;
}

.sf-chat-thread-avatar {
  display: grid;
  flex: none;
  place-items: center;

  width: 42px;
  height: 42px;

  border-radius: 50%;
  background: var(--sf-chat-blue-soft);
  color: var(--sf-chat-blue);

  font-size: 13px;
  font-weight: 700;
}

.sf-chat-thread-name {
  min-width: 0;

  color: var(--sf-chat-ink) !important;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.4;

  overflow-wrap: anywhere;
}

/* Выбор эксперта */

.sf-chat-shell .respondent-list {
  flex: 1 1 auto;

  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 14px !important;

  overflow: auto !important;
  overscroll-behavior: contain;
}

.sf-chat-shell .respondent-annotate {
  display: flex !important;
  align-items: center;
  gap: 12px;

  min-height: 76px;

  margin: 0 0 8px !important;
  padding: 12px !important;

  border: 1px solid var(--sf-chat-line) !important;
  border-radius: 11px;

  background: var(--sf-chat-panel) !important;
  cursor: pointer;
}

.sf-chat-shell .respondent-annotate:not(:has(.respondent-img-block img))::before {
  content: attr(data-sf-initials);

  display: grid;
  flex: 0 0 40px;
  place-items: center;

  width: 40px;
  height: 40px;

  border-radius: 50%;
  background: var(--sf-chat-blue-soft);
  color: var(--sf-chat-blue);

  font-size: 12px;
  font-weight: 700;
}

.sf-chat-shell .respondent-annotate:hover {
  border-color: #acd4ff !important;
  background: var(--sf-chat-soft) !important;
}

.sf-chat-shell .respondent-title-block {
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

.sf-chat-shell .respondent-title {
  color: var(--sf-chat-ink) !important;
  font: 650 13px/1.4 Inter, "Segoe UI", Arial, sans-serif !important;

  white-space: normal !important;
  overflow-wrap: anywhere;
}

.sf-chat-shell .respondent-text-block {
  display: -webkit-box !important;
  overflow: hidden;

  margin: 4px 0 0 !important;

  color: var(--sf-chat-muted) !important;
  font: 400 12px/1.5 Inter, "Segoe UI", Arial, sans-serif !important;

  text-align: left !important;
  overflow-wrap: anywhere;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Контейнер переписки */

.sf-chat-shell :is(
  .sf-chat-thread-slot,
  .conversation-widget,
  .comments-tree-wrapper
),
.sf-chat-shell .comments-tree-wrapper > .comments-tree {
  display: flex !important;
  flex: 1 1 auto;
  flex-direction: column;

  min-width: 0;
  min-height: 0 !important;

  height: auto !important;
  max-height: none !important;

  margin: 0 !important;
  overflow: hidden;
}

.sf-chat-shell .comments-tree,
.sf-chat-shell .comments-tree a {
  font-family: Inter, "Segoe UI", Arial, sans-serif !important;
}

.sf-chat-shell .sf-chat-history {
  flex: 1 1 auto;

  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;

  padding: 20px !important;
  overflow: auto !important;
  overscroll-behavior: contain;

  background: var(--sf-chat-soft) !important;
}

.sf-chat-history[data-sf-empty="1"]::before {
  content: "Здесь появится ваша переписка";

  display: grid;
  place-items: center;
  height: 100%;

  color: var(--sf-chat-muted);
  font-size: 13px;
  text-align: center;
}

/* Сообщения */

.sf-chat-shell .sf-chat-history .gc-comment.level-1 {
  margin: 0 0 10px !important;
  padding: 0 !important;
}

.sf-chat-shell .sf-chat-history .gc-comment.level-1 > .comment-wrapper {
  width: 100% !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
}

.sf-chat-shell .sf-chat-history .gc-comment.level-1 > .comment-wrapper > .comment {
  width: fit-content !important;
  max-width: min(86%, 620px);

  margin: 0 auto 0 0 !important;
  padding: 11px 14px !important;

  border: 1px solid var(--sf-chat-line) !important;
  border-radius: 13px 13px 13px 4px;

  background: var(--sf-chat-panel) !important;
}

.sf-chat-shell .sf-chat-history
.gc-comment:is(.my-comment, .own-user-comment)
> .comment-wrapper > .comment {
  margin-left: auto !important;
  margin-right: 0 !important;

  border-color: #d2e8ff !important;
  border-radius: 13px 13px 4px 13px;

  background: var(--sf-chat-blue-soft) !important;
}

.sf-chat-shell .sf-chat-history .comment > .user-image-wrapper,
.sf-chat-shell .gc-comment-form form > .user-image-wrapper {
  display: none !important;
}

.sf-chat-shell .sf-chat-history .comment > .title {
  margin: 0 0 5px !important;
  padding: 0 !important;
}

.sf-chat-shell .sf-chat-history .title .user-profile-link {
  color: var(--sf-chat-muted) !important;
  font: 600 11px/1.4 Inter, sans-serif !important;
}

.sf-chat-shell .sf-chat-history .title .user-profile-link .text {
  color: inherit !important;
  font: inherit !important;
}

.sf-chat-shell .sf-chat-history .comment > .text {
  float: none !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  color: var(--sf-chat-ink);
  font: 400 13px/1.55 Inter, "Segoe UI", Arial, sans-serif;
}

.sf-chat-shell .sf-chat-history .text-content {
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;

  border: 0 !important;
  background: transparent !important;
  overflow-wrap: anywhere;
}

.sf-chat-shell .sf-chat-history .text-content p {
  margin: 0 0 6px;
}

.sf-chat-shell .sf-chat-history .text-content a {
  color: var(--sf-chat-blue) !important;
  font: inherit !important;
}

.sf-chat-shell .sf-chat-history .comment-time {
  position: static !important;
  margin: 7px 0 0 !important;

  color: var(--sf-chat-muted) !important;
  font-size: 10px !important;
  line-height: 1.5;
}

.sf-chat-shell .sf-chat-history :is(img, video, audio, .answer-file-box) {
  max-width: 100% !important;
}

.sf-chat-shell .sf-chat-history .comment-files-widget {
  max-width: 100%;
  gap: 8px !important;
}

.sf-chat-shell .typing-text {
  color: var(--sf-chat-muted);
  font-size: 11px;
}

/* Штатная форма отправки */

.sf-chat-shell .gc-comment-form {
  position: static !important;
  flex: none;

  margin: 0 !important;
  padding: 12px 18px !important;

  border-top: 1px solid var(--sf-chat-line) !important;
  background: var(--sf-chat-panel) !important;
}

.sf-chat-shell .gc-comment-form :is(.new-comment, form) {
  width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  background: transparent !important;
}

.sf-chat-shell .gc-comment-form .textarea-block {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;

  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sf-chat-shell .gc-comment-form .emoji-container {
  position: relative;
  grid-area: 1 / 1 / 2 / -1;
  min-width: 0;
}

.sf-chat-shell .gc-comment-form .new-comment-textarea {
  display: block;

  width: 100% !important;
  min-width: 0;
  min-height: 44px !important;
  max-height: 160px !important;

  margin: 0 !important;
  padding: 11px 42px 11px 12px !important;

  overflow-y: auto !important;
  border: 1px solid var(--sf-chat-line) !important;
  border-radius: 10px;

  background: #fff !important;
  color: var(--sf-chat-ink) !important;

  font: 400 13px/1.5 Inter, "Segoe UI", Arial, sans-serif !important;
  box-shadow: none !important;
  resize: none !important;
}

.sf-chat-shell .gc-comment-form .new-comment-textarea:focus {
  outline: 0;
  border-color: var(--sf-chat-blue) !important;
}

.sf-chat-shell .gc-comment-form .emoji-button {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  left: auto !important;

  display: grid;
  place-items: center;

  width: 32px;
  height: 32px;

  color: var(--sf-chat-muted);
}

.sf-chat-shell .gc-comment-form .attach-file-button-container {
  position: relative !important;
  inset: auto !important;

  grid-area: 2 / 1;
  justify-self: start;

  width: 34px;
  margin: 0 !important;
}

.sf-chat-shell .gc-comment-form .uploadifive-button {
  width: 34px !important;
  height: 34px !important;
  line-height: 34px !important;

  border: 0 !important;
  border-radius: 8px;

  background: var(--sf-chat-soft) !important;
  color: var(--sf-chat-muted) !important;
}

.sf-chat-shell .gc-comment-form .comment-attach-file-link {
  grid-area: 2 / 1;

  min-width: 0;
  margin-left: 42px;

  color: var(--sf-chat-muted);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.sf-chat-shell .gc-comment-form .btn-send {
  grid-area: 2 / 2;

  min-height: 40px;

  margin: 0 !important;
  padding: 10px 16px !important;

  border: 0 !important;
  border-radius: 9px !important;

  background: var(--sf-chat-blue) !important;
  color: #fff !important;

  font: 600 13px/1.4 Inter, "Segoe UI", Arial, sans-serif !important;
  box-shadow: none !important;

  white-space: nowrap;
  text-transform: none !important;
}

.sf-chat-shell .gc-comment-form .btn-send .fa {
  margin-right: 6px;
}

.sf-chat-shell :is(.btn-new, .btn-send):hover:not(:disabled) {
  background: #006fdc !important;
}

.sf-chat-shell .gc-comment-form .btn-send:disabled {
  opacity: .55;
}

.sf-chat-shell .gc-comment-form .file-uploader {
  grid-area: 3 / 1 / 4 / -1;

  min-width: 0;
  max-height: 100px !important;
  overflow: auto !important;
}

.sf-chat-shell :is(button, [role="button"], a):focus-visible {
  outline: 2px solid var(--sf-chat-blue) !important;
  outline-offset: 2px;
}

/* Телефоны */

@media (max-width: 767px) {
  body.sf-chat-page .sf-chat-shell {
    margin-top: 12px !important;
    padding-inline: var(--sf-content-gutter, 12px) !important;
  }

  .sf-chat-shell .talks-widget-window {
    border-radius: 12px !important;
  }

  .sf-chat-shell .talks-widget-body {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .sf-chat-shell .conversations-list-block {
    border-right: 0 !important;
  }

  .sf-chat-shell[data-sf-chat-view="thread"] .conversations-list-block,
  .sf-chat-shell[data-sf-chat-view="new"] .conversations-list-block,
  .sf-chat-shell .sf-chat-empty-state {
    display: none !important;
  }

  .sf-chat-shell :is(.selected-conversation, .new-conversation) {
    grid-column: 1;
  }

  .sf-chat-mobile-back {
    display: inline-flex;
    align-items: center;

    min-height: 44px;
    padding: 8px 0;
  }

  .sf-chat-panel-top {
    padding: 4px 14px 12px;
  }

  .sf-chat-thread-header {
    flex-wrap: wrap;
    gap: 7px 10px;

    min-height: 0;
    padding: 4px 14px 12px;
  }

  .sf-chat-thread-header .sf-chat-mobile-back {
    flex-basis: 100%;
  }

  .sf-chat-thread-avatar {
    width: 34px;
    height: 34px;
    font-size: 11px;
  }

  .sf-chat-thread-name {
    flex: 1 1 0;
    font-size: 14px;
  }

  .sf-chat-shell .respondent-list {
    padding: 10px !important;
  }

  .sf-chat-shell .respondent-annotate {
    gap: 10px;
    padding: 10px !important;
  }

  .sf-chat-shell .sf-chat-history {
    padding: 12px !important;
  }

  .sf-chat-shell .sf-chat-history
  .gc-comment.level-1 > .comment-wrapper > .comment {
    max-width: 94%;
    padding: 10px 12px !important;
  }

  .sf-chat-shell .gc-comment-form {
    padding: 10px !important;
  }

  .sf-chat-shell .gc-comment-form .new-comment-textarea {
    font-size: 16px !important;
  }

  .sf-chat-shell .gc-comment-form .btn-send {
    min-height: 44px;
    padding-inline: 14px !important;
  }
}

/* ------------- 
content start - Тема виджета
------------- */

/* =========================================
   ВСПЛЫВАЮЩИЙ ЧАТ GETCOURSE
   ========================================= */

.talks-widget-window.sf-floating-chat {
  --sf-fc-panel: #fff;
  --sf-fc-soft: #f7f9fc;
  --sf-fc-line: #dce5ef;
  --sf-fc-ink: #182b40;
  --sf-fc-muted: #6b7b8d;
  --sf-fc-blue: #0082ff;
  --sf-fc-blue-soft: #edf6ff;

  overflow: hidden !important;

  border-color: var(--sf-fc-line) !important;
  border-radius: 14px !important;

  background: var(--sf-fc-panel) !important;
  box-shadow: 0 10px 32px rgb(22 48 77 / 16%) !important;

  color: var(--sf-fc-ink) !important;
  font-family: Inter, "Segoe UI", Arial, sans-serif !important;
}

.sf-floating-chat * {
  box-sizing: border-box;
}

/* Шапка */

.sf-floating-chat .talks-widget-header {
  display: flex !important;
  align-items: center;
  justify-content: center;

  padding: 0 48px !important;

  border-bottom: 1px solid var(--sf-fc-line) !important;
  background: #fff !important;
  color: var(--sf-fc-ink) !important;
}

.sf-floating-chat .talks-widget-header .caption {
  display: -webkit-box;
  min-width: 0;
  margin: 0 !important;
  overflow: hidden;

  color: var(--sf-fc-ink) !important;
  font: 650 14px/1.35 Inter, "Segoe UI", Arial, sans-serif !important;

  text-align: center;
  overflow-wrap: anywhere;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.sf-floating-chat .talks-widget-header .caption a {
  color: inherit !important;
}

.sf-floating-chat .talks-widget-header :is(.btn-back, .btn-close) {
  top: 2px !important;

  width: 40px;
  height: 44px;
  padding: 0 !important;

  border-radius: 9px;
  color: var(--sf-fc-muted) !important;

  font-size: 18px;
  line-height: 44px;
  text-align: center;

  cursor: pointer;
}

.sf-floating-chat .talks-widget-header .btn-back {
  left: 4px !important;
}

.sf-floating-chat .talks-widget-header .btn-close {
  right: 4px !important;
}

.sf-floating-chat .talks-widget-header .btn-back::before {
  content: "←";
  font-family: Inter, Arial, sans-serif;
}

.sf-floating-chat .talks-widget-header :is(.btn-back, .btn-close):hover {
  color: var(--sf-fc-blue) !important;
  background: var(--sf-fc-soft);
}

/* Переключение штатных экранов чата */

.sf-floating-chat .talks-widget-body {
  padding: 0 !important;
  overflow: hidden !important;
  background: #fff !important;
}

.sf-floating-chat :is(
  .conversations-list-block,
  .selected-conversation,
  .new-conversation
) {
  display: none !important;
  flex-direction: column;

  min-width: 0;
  min-height: 0 !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;

  background: #fff !important;
}

.sf-floating-chat[data-sf-floating-view="list"] .conversations-list-block,
.sf-floating-chat[data-sf-floating-view="new"] .new-conversation,
.sf-floating-chat[data-sf-floating-view="thread"] .selected-conversation {
  display: flex !important;
}

/* Список диалогов */

.sf-floating-chat .conversations-list {
  flex: 1 1 auto;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  padding: 8px !important;
  overflow: auto !important;
  overscroll-behavior: contain;
}

.sf-floating-chat .conversation-annotate {
  position: relative !important;

  display: flex !important;
  align-items: center;
  gap: 10px;

  min-height: 78px;

  margin: 3px 0 !important;
  padding: 10px !important;

  border: 1px solid transparent !important;
  border-radius: 11px;

  background: transparent !important;
  cursor: pointer;
}

.sf-floating-chat .conversation-annotate:hover {
  background: var(--sf-fc-soft) !important;
}

.sf-floating-chat .conversation-annotate.active {
  border-color: #d2e8ff !important;
  background: var(--sf-fc-blue-soft) !important;
}

/* Фотографии */

.sf-floating-chat :is(.conversation-img-block, .respondent-img-block) {
  display: block !important;
  flex: 0 0 40px;

  width: 40px !important;
  height: 40px !important;

  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

.sf-floating-chat :is(.conversation-img, .respondent-img-block) {
  overflow: hidden;
  border-radius: 50%;
  background: var(--sf-fc-blue-soft);
}

.sf-floating-chat .conversation-img {
  display: grid;
  place-items: center;

  width: 40px;
  height: 40px;
}

.sf-floating-chat :is(.conversation-img, .respondent-img-block) img {
  display: block;

  width: 100% !important;
  height: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  border-radius: 50%;
  object-fit: cover;
}

.sf-floating-chat .conversation-img:not(:has(img))::before {
  content: attr(data-sf-initials);

  color: var(--sf-fc-blue);
  font-size: 12px;
  font-weight: 700;
}

.sf-floating-chat .conversation-img .empty-conversation-img {
  display: none !important;
}

/* Названия и последнее сообщение */

.sf-floating-chat :is(.conversation-data-block, .respondent-data-block) {
  flex: 1 1 auto;

  width: auto !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  float: none !important;

  text-align: left !important;
}

.sf-floating-chat .conversation-title-block {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 7px;
}

.sf-floating-chat .conversation-title {
  grid-area: 1 / 1;
  display: block !important;
  min-width: 0;

  color: var(--sf-fc-ink) !important;
  font: 650 13px/1.4 Inter, "Segoe UI", Arial, sans-serif !important;

  white-space: normal !important;
  overflow-wrap: anywhere;
}

.sf-floating-chat :is(.conversation-time, .conversation-fresh-comment-count) {
  position: static !important;
  inset: auto !important;
  justify-self: end;

  margin: 0 !important;
  float: none !important;
}

.sf-floating-chat .conversation-time {
  grid-area: 1 / 2;

  color: var(--sf-fc-muted) !important;
  font: 400 10px/1.4 Inter, sans-serif !important;
}

.sf-floating-chat .conversation-text {
  grid-area: 2 / 1;
  display: -webkit-box !important;

  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;

  color: var(--sf-fc-muted) !important;
  font: 400 12px/1.45 Inter, "Segoe UI", Arial, sans-serif !important;

  white-space: normal !important;
  overflow-wrap: anywhere;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Счётчики непрочитанных */

.sf-floating-chat .conversation-fresh-comment-count {
  grid-area: 2 / 2;
  display: none !important;

  min-width: 20px;
  height: 20px;
  padding: 0 5px !important;

  border-radius: 20px;
  background: var(--sf-fc-blue) !important;
  color: #fff !important;

  font: 600 11px/20px Inter, sans-serif !important;
  text-align: center;
}

.sf-floating-chat .conversation-fresh-comment-count[data-sf-unread="1"] {
  display: block !important;
}

/* Новый разговор */

.sf-floating-chat .conversation-list-footer {
  position: static !important;
  flex: none;

  padding: 12px !important;

  border-top: 1px solid var(--sf-fc-line) !important;
  background: #fff !important;
}

.sf-floating-chat .conversation-list-footer .btn-new {
  display: block !important;

  width: 100%;
  min-height: 44px;

  margin: 0 !important;
  padding: 10px 14px !important;

  border: 0 !important;
  border-radius: 10px !important;

  background: var(--sf-fc-blue) !important;
  color: #fff !important;
  box-shadow: none !important;

  font: 600 13px/1.4 Inter, "Segoe UI", Arial, sans-serif !important;
  text-transform: none !important;
}

/* Выбор эксперта */

.sf-floating-chat .respondent-list {
  flex: 1 1 auto;

  height: auto !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 12px !important;

  overflow: auto !important;
  overscroll-behavior: contain;
}

.sf-floating-chat .respondent-annotate {
  display: flex !important;
  align-items: center;
  gap: 10px;

  margin: 0 0 8px !important;
  padding: 12px !important;

  border: 1px solid var(--sf-fc-line) !important;
  border-radius: 11px;

  background: #fff !important;
  cursor: pointer;
}

.sf-floating-chat .respondent-annotate:not(:has(.respondent-img-block img))::before {
  content: attr(data-sf-initials);

  display: grid;
  flex: 0 0 40px;
  place-items: center;

  width: 40px;
  height: 40px;

  border-radius: 50%;
  background: var(--sf-fc-blue-soft);
  color: var(--sf-fc-blue);

  font-size: 12px;
  font-weight: 700;
}

.sf-floating-chat .respondent-annotate:hover {
  border-color: #acd4ff !important;
  background: var(--sf-fc-soft) !important;
}

.sf-floating-chat .respondent-title-block {
  text-align: left !important;
}

.sf-floating-chat .respondent-title {
  color: var(--sf-fc-ink) !important;
  font: 650 13px/1.4 Inter, "Segoe UI", Arial, sans-serif !important;

  white-space: normal !important;
  overflow-wrap: anywhere;
}

.sf-floating-chat .respondent-text-block {
  display: -webkit-box !important;

  margin-top: 4px !important;
  overflow: hidden;

  color: var(--sf-fc-muted) !important;
  font: 400 12px/1.5 Inter, "Segoe UI", Arial, sans-serif !important;

  text-align: left !important;
  overflow-wrap: anywhere;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* История переписки */

.sf-floating-chat :is(
  .sf-floating-slot,
  .conversation-widget,
  .comments-tree-wrapper
),
.sf-floating-chat .comments-tree-wrapper > .comments-tree {
  display: flex !important;
  flex: 1 1 auto;
  flex-direction: column;

  min-width: 0;
  min-height: 0 !important;
  height: auto !important;

  margin: 0 !important;
  overflow: hidden;
}

.sf-floating-chat .comments-tree,
.sf-floating-chat .comments-tree a {
  font-family: Inter, "Segoe UI", Arial, sans-serif !important;
}

.sf-floating-chat .sf-floating-history {
  flex: 1 1 auto;

  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;

  padding: 14px !important;
  overflow: auto !important;
  overscroll-behavior: contain;

  background: var(--sf-fc-soft) !important;
}

/* Сообщения */

.sf-floating-chat .sf-floating-history .gc-comment.level-1 {
  margin: 0 0 10px !important;
  padding: 0 !important;
}

.sf-floating-chat .sf-floating-history
.gc-comment.level-1 > .comment-wrapper {
  width: 100% !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
}

.sf-floating-chat .sf-floating-history
.gc-comment.level-1 > .comment-wrapper > .comment {
  width: fit-content !important;
  max-width: 90%;

  margin: 0 auto 0 0 !important;
  padding: 10px 12px !important;

  border: 1px solid var(--sf-fc-line) !important;
  border-radius: 13px 13px 13px 4px;

  background: #fff !important;
}

.sf-floating-chat .sf-floating-history
.gc-comment:is(.my-comment, .own-user-comment)
> .comment-wrapper > .comment {
  margin-left: auto !important;
  margin-right: 0 !important;

  border-color: #d2e8ff !important;
  border-radius: 13px 13px 4px 13px;

  background: var(--sf-fc-blue-soft) !important;
}

.sf-floating-chat .sf-floating-history .comment > .user-image-wrapper,
.sf-floating-chat .gc-comment-form form > .user-image-wrapper {
  display: none !important;
}

.sf-floating-chat .sf-floating-history .comment > .title {
  margin: 0 0 5px !important;
  padding: 0 !important;
}

.sf-floating-chat .sf-floating-history .title .user-profile-link {
  color: var(--sf-fc-muted) !important;
  font: 600 11px/1.4 Inter, sans-serif !important;
}

.sf-floating-chat .sf-floating-history .title .user-profile-link .text {
  color: inherit !important;
  font: inherit !important;
}

.sf-floating-chat .sf-floating-history .comment > .text {
  float: none !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  color: var(--sf-fc-ink);
  font: 400 13px/1.55 Inter, "Segoe UI", Arial, sans-serif;
}

.sf-floating-chat .sf-floating-history .text-content {
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;

  border: 0 !important;
  background: transparent !important;

  overflow-wrap: anywhere;
}

.sf-floating-chat .sf-floating-history .text-content a {
  color: var(--sf-fc-blue) !important;
  font: inherit !important;
}

.sf-floating-chat .sf-floating-history .comment-time {
  color: var(--sf-fc-muted) !important;
  font-size: 10px !important;
}

.sf-floating-chat .sf-floating-history
:is(img, video, audio, .answer-file-box) {
  max-width: 100% !important;
}

.sf-floating-chat .sf-floating-history .comment-files-widget {
  gap: 8px !important;
}

/* Форма отправки */

.sf-floating-chat .gc-comment-form {
  position: static !important;
  flex: none;

  margin: 0 !important;
  padding: 10px 12px !important;

  border-top: 1px solid var(--sf-fc-line) !important;
  background: #fff !important;
}

.sf-floating-chat .gc-comment-form :is(.new-comment, form) {
  width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  background: transparent !important;
}

.sf-floating-chat .gc-comment-form .textarea-block {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;

  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sf-floating-chat .gc-comment-form .emoji-container {
  position: relative;
  grid-area: 1 / 1 / 2 / -1;
  min-width: 0;
}

.sf-floating-chat .gc-comment-form .new-comment-textarea {
  width: 100% !important;
  min-width: 0;

  min-height: 44px !important;
  max-height: 140px !important;

  margin: 0 !important;
  padding: 11px 42px 11px 12px !important;

  overflow-y: auto !important;

  border: 1px solid var(--sf-fc-line) !important;
  border-radius: 10px;

  background: #fff !important;
  color: var(--sf-fc-ink) !important;

  font: 400 13px/1.5 Inter, "Segoe UI", Arial, sans-serif !important;

  box-shadow: none !important;
  resize: none !important;
}

.sf-floating-chat .gc-comment-form .new-comment-textarea:focus {
  outline: 0;
  border-color: var(--sf-fc-blue) !important;
}

.sf-floating-chat .gc-comment-form .emoji-button {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  left: auto !important;

  display: grid;
  place-items: center;

  width: 32px;
  height: 32px;

  color: var(--sf-fc-muted);
}

/* Вложения */

.sf-floating-chat .gc-comment-form .attach-file-button-container {
  position: relative !important;
  inset: auto !important;

  grid-area: 2 / 1;
  justify-self: start;

  width: 34px;
  margin: 0 !important;
}

.sf-floating-chat .gc-comment-form .uploadifive-button {
  width: 34px !important;
  height: 34px !important;

  padding: 0 !important;
  line-height: 34px !important;

  border: 0 !important;
  border-radius: 8px;

  background: var(--sf-fc-soft) !important;
  color: var(--sf-fc-muted) !important;
}

.sf-floating-chat .gc-comment-form .comment-attach-file-link {
  grid-area: 2 / 1;

  min-width: 0;
  margin-left: 42px;

  color: var(--sf-fc-muted);
  font-size: 11px;

  overflow-wrap: anywhere;
}

.sf-floating-chat .gc-comment-form .file-uploader {
  grid-area: 3 / 1 / 4 / -1;

  min-width: 0;
  max-height: 100px !important;
  overflow: auto !important;
}

/* Кнопка отправки */

.sf-floating-chat .gc-comment-form .btn-send {
  grid-area: 2 / 2;
  min-height: 40px;

  margin: 0 !important;
  padding: 10px 14px !important;

  border: 0 !important;
  border-radius: 9px !important;

  background: var(--sf-fc-blue) !important;
  color: #fff !important;

  font: 600 13px/1.4 Inter, "Segoe UI", Arial, sans-serif !important;

  box-shadow: none !important;
  white-space: nowrap;
  text-transform: none !important;
}

.sf-floating-chat .gc-comment-form .btn-send .fa {
  margin-right: 6px;
}

.sf-floating-chat :is(.btn-new, .btn-send):hover:not(:disabled) {
  background: #006fdc !important;
}

.sf-floating-chat .gc-comment-form .btn-send:disabled {
  opacity: .55;
}

.sf-floating-chat :is(button, a, [role="button"]):focus-visible {
  outline: 2px solid var(--sf-fc-blue) !important;
  outline-offset: 2px;
}

/* Круглая кнопка открытия чата */

.talks-widget-button.sf-floating-chat-trigger {
  background-color: #0082ff !important;
  box-shadow: 0 6px 18px rgb(0 130 255 / 24%) !important;
}

.talks-widget-button.sf-floating-chat-trigger:hover {
  background-color: #006fdc !important;
}

.sf-floating-chat-trigger .conversations-counter {
  background: #e53935 !important;
  color: #fff !important;

  box-shadow: 0 0 0 2px #fff;
  font-weight: 600;
}

/* Телефоны */

@media (max-width: 767px) {
  .sf-floating-chat .conversation-annotate {
    padding: 10px 8px !important;
  }

  .sf-floating-chat .respondent-list {
    padding: 10px !important;
  }

  .sf-floating-chat .respondent-annotate {
    padding: 10px !important;
  }

  .sf-floating-chat .sf-floating-history {
    padding: 12px !important;
  }

  .sf-floating-chat .gc-comment-form {
    padding: 10px !important;
  }

  .sf-floating-chat .gc-comment-form .new-comment-textarea {
    font-size: 16px !important;
  }

  .sf-floating-chat .gc-comment-form .btn-send {
    min-height: 44px;
  }
}
/* ------------- 
content finish - Тема виджета
------------- */
