@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=Open+Sans:wght@400;600;700&display=swap');

/* Глобальные переменные */
:root {
  --color-special-divider: rgba(137, 137, 137, 0.3);
  --color-white: #ffffff;
  --color-icons-secondary: #898989;
  --color-text-primary: #1c1c1e;
  --color-text-secondary: #6e6e73;
  --color-text-tertiary: #b8b8b8;
  --color-text-brand: #0168f9;
  --color-text-brand-hover: #0059d6;
  --color-text-brand-pressed: #024fbb;
  --color-critical: rgba(245, 55, 60, 1);
  --font-sans: 'Open Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace;
}

/* Спиннер загрузки виджета */
#js-app-loading::before {
  content: '';
  display: block;
  position: fixed;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  z-index: 2147483647;
  margin-top: -50px;
  margin-left: -50px;
  background: white;
  border-radius: 16px;
}

#js-app-loading::after {
  content: '';
  display: block;
  position: fixed;
  width: 36px !important;
  height: 36px !important;
  top: 50%;
  left: 50%;
  z-index: 2147483647;
  margin-top: -18px !important;
  margin-left: -18px !important;
  background: var(--color-text-brand) !important;
  /* SVG как маска */
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20viewBox%3D'25%2025%2050%2050'%20xmlns%3D'http://www.w3.org/2000/svg'%3E%3Ccircle%20cx%3D'50'%20cy%3D'50'%20r%3D'20'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'4'%20stroke-dasharray%3D'150%2C200'%20stroke-dashoffset%3D'-10'%20stroke-linecap%3D'round'/%3E%3C/svg%3E")
    no-repeat center;
  -webkit-mask-size: contain;
  mask: url("data:image/svg+xml,%3Csvg%20viewBox%3D'25%2025%2050%2050'%20xmlns%3D'http://www.w3.org/2000/svg'%3E%3Ccircle%20cx%3D'50'%20cy%3D'50'%20r%3D'20'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'4'%20stroke-dasharray%3D'150%2C200'%20stroke-dashoffset%3D'-10'%20stroke-linecap%3D'round'/%3E%3C/svg%3E")
    no-repeat center;
  mask-size: contain;

  animation: spin 1s linear infinite;
}

/* Анимация вращения */
@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

/* Базовые шрифты и цвета */
#widget-app.hde-plm-2gis {
  font-family: var(--font-sans);
  color: var(--color-text-primary);
}

#widget-app.hde-plm-2gis button {
  font-family: var(--font-sans);
}

#widget-app.hde-plm-2gis .message__time,
#widget-app.hde-plm-2gis .message__file .message__time,
#widget-app.hde-plm-2gis .csi .csi__footer,
#widget-app.hde-plm-2gis .csi .csi__footer button,
#widget-app.hde-plm-2gis .csi .csi__rate .csi__submit-rate button,
#widget-app.hde-plm-2gis .show-previous__button button {
  font-family: var(--font-sans) !important;
}

/* Обёртка */
#widget-app.hde-plm-2gis .container {
  overflow: hidden !important;
  border-radius: 16px !important;
  font-family: var(--font-sans) !important;
  border: 1px solid #89898914 !important;
  box-shadow: 0px 12px 36px 0px rgba(0, 0, 0, 0.07);
}

/* Спиннер загрузки файлов */
#widget-app.hde-plm-2gis .el-loading-mask svg circle {
  stroke: var(--color-text-brand);
}

/* Хедер */
#widget-app.hde-plm-2gis .header {
  flex: 0 0 48px;
  border-bottom: 1px solid var(--color-special-divider) !important;
  background-color: var(--color-white) !important;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary) !important;
}

#widget-app.hde-plm-2gis .header .header-default {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;

  /* Дубль хардкода высоты, потому что в Safari баг — высота 100% высчитывается некорректно. */
  height: 48px;
  padding: 0;
}

/* Логотип хедера без подключенного оператора */
#widget-app.hde-plm-2gis .header .we-are-online {
  margin: 0;
}

#widget-app.hde-plm-2gis .header .chat-mini-logo {
  width: 32px;
  height: 32px;
}

#widget-app.hde-plm-2gis .header .chat-mini-logo .icon i::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 32px;
  background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Crect%20width%3D%2232%22%20height%3D%2232%22%20rx%3D%2216%22%20fill%3D%22%23141414%22/%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M17%2024C17%2021.659%2017.5848%2020.1603%2018.3307%2019.2652C19.0667%2018.382%2020.0283%2018%2021%2018H22.3658L22.6014%2017.3332C22.8598%2016.6021%2023%2015.8164%2023%2015C23%2011.134%2019.866%208%2016%208C12.134%208%209%2011.134%209%2015C9%2015.8164%209.14016%2016.6021%209.39857%2017.3332L9.63424%2018H11C11.9717%2018%2012.9333%2018.382%2013.6693%2019.2652C14.4152%2020.1603%2015%2021.659%2015%2024H17Z%22%20fill%3D%22white%22/%3E%3C/svg%3E');
  background-size: contain;
  background-repeat: no-repeat;
}

/* Кнопка закрытия */
#widget-app.hde-plm-2gis .widget-close {
  box-sizing: border-box;
  display: flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  background-color: var(--color-white);
  font-weight: 700;
  color: var(--color-special-divider);
  top: 37px;
  right: 32px;
}

#widget-app.hde-plm-2gis .widget-close_mobile {
  top: 11px !important;
  right: 10px !important;
}

#widget-app.hde-plm-2gis .widget-close:active {
  border-width: 2px;
}

#widget-app.hde-plm-2gis .widget-close i::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: var(--color-text-secondary);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M6.41423 5.00001L9.50001 1.91423C9.89054 1.5237 9.89054 0.890539 9.50001 0.500014C9.10949 0.10949 8.47633 0.109489 8.0858 0.500014L5.00001 3.5858L1.91423 0.500014C1.5237 0.10949 0.890539 0.10949 0.500014 0.500014C0.10949 0.890538 0.109489 1.5237 0.500014 1.91423L3.5858 5.00001L0.500014 8.0858C0.10949 8.47633 0.10949 9.10949 0.500014 9.50001C0.890539 9.89054 1.5237 9.89054 1.91423 9.50002L5.00001 6.41423L8.0858 9.50001C8.47633 9.89054 9.10949 9.89054 9.50001 9.50001C9.89054 9.10949 9.89054 8.47633 9.50002 8.0858L6.41423 5.00001Z' fill='black'/></svg>");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M6.41423 5.00001L9.50001 1.91423C9.89054 1.5237 9.89054 0.890539 9.50001 0.500014C9.10949 0.10949 8.47633 0.109489 8.0858 0.500014L5.00001 3.5858L1.91423 0.500014C1.5237 0.10949 0.890539 0.10949 0.500014 0.500014C0.10949 0.890538 0.109489 1.5237 0.500014 1.91423L3.5858 5.00001L0.500014 8.0858C0.10949 8.47633 0.10949 9.10949 0.500014 9.50001C0.890539 9.89054 1.5237 9.89054 1.91423 9.50002L5.00001 6.41423L8.0858 9.50001C8.47633 9.89054 9.10949 9.89054 9.50001 9.50001C9.89054 9.10949 9.89054 8.47633 9.50002 8.0858L6.41423 5.00001Z' fill='black'/></svg>");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

#widget-app.hde-plm-2gis .widget-close:hover i::before,
#widget-app.hde-plm-2gis .widget-close:focus i::before {
  background-color: var(--color-text-primary);
}

/* Иконка кнопки закрытия */
#widget-app.hde-plm-2gis .widget-close i::before {
  content: '\e6db';
  font-size: 16px;
  font-weight: 800;
}

#widget-app.hde-plm-2gis .widget-close:hover i::before,
#widget-app.hde-plm-2gis .widget-close:focus i::before {
  background-color: var(--color-text-primary);
}

/* Поле ввода сообщения */
#widget-app.hde-plm-2gis div.message-input {
  box-sizing: border-box;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
  border-top: 1px solid var(--color-special-divider);
  color: var(--color-text-primary) !important;
}

/* Сообщение об отсутствии сетевого подключения */
#widget-app.hde-plm-2gis .message-input.message-input_error {
  justify-content: start;
  padding-left: 12px;
  font-family: var(--font-sans);
  background-color: var(--color-white) !important;
  color: var(--color-critical) !important;
  font-size: 14px;
}

#widget-app.hde-plm-2gis .message-input.message-input_error .message-input__send {
  display: none;
}

/* Кнопка загрузки файлов */
#widget-app.hde-plm-2gis .message-input__upload {
  align-self: flex-end;
  width: 40px;
  height: 40px;
  max-width: 40px;
}

#widget-app.hde-plm-2gis .message-input__upload button {
  padding: 0;
  font-size: 22px;
  color: var(--color-text-secondary);
}

/* Иконка кнопки загрузки */
#widget-app.hde-plm-2gis .message-input__upload button i::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: var(--color-text-secondary);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M10 15.5V10C10 9.44772 10.4477 9 11 9C11.5523 9 12 9.44772 12 10V15.5C12 15.7761 12.2239 16 12.5 16C12.7761 16 13 15.7761 13 15.5V7C13 5.89543 12.1046 5 11 5C9.89543 5 9 5.89543 9 7V15.5C9 17.433 10.567 19 12.5 19C14.433 19 16 17.433 16 15.5V10C16 9.44772 16.4477 9 17 9C17.5523 9 18 9.44772 18 10V15.5C18 18.5376 15.5376 21 12.5 21C9.46243 21 7 18.5376 7 15.5V7C7 4.79086 8.79086 3 11 3C13.2091 3 15 4.79086 15 7V15.5C15 16.8807 13.8807 18 12.5 18C11.1193 18 10 16.8807 10 15.5Z' fill='black'/></svg>");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M10 15.5V10C10 9.44772 10.4477 9 11 9C11.5523 9 12 9.44772 12 10V15.5C12 15.7761 12.2239 16 12.5 16C12.7761 16 13 15.7761 13 15.5V7C13 5.89543 12.1046 5 11 5C9.89543 5 9 5.89543 9 7V15.5C9 17.433 10.567 19 12.5 19C14.433 19 16 17.433 16 15.5V10C16 9.44772 16.4477 9 17 9C17.5523 9 18 9.44772 18 10V15.5C18 18.5376 15.5376 21 12.5 21C9.46243 21 7 18.5376 7 15.5V7C7 4.79086 8.79086 3 11 3C13.2091 3 15 4.79086 15 7V15.5C15 16.8807 13.8807 18 12.5 18C11.1193 18 10 16.8807 10 15.5Z' fill='black'/></svg>");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

#widget-app.hde-plm-2gis .message-input__upload button:hover i::before,
#widget-app.hde-plm-2gis .message-input__upload button:focus i::before,
#widget-app.hde-plm-2gis .message-input__upload button:active i::before {
  background-color: var(--color-text-primary);
}

#widget-app.hde-plm-2gis .message-input__upload button:focus {
  border: 2px solid var(--color-special-divider);
  border-radius: 8px;
}

/* Текстовое поле ввода */
#widget-app.hde-plm-2gis .message-input__textarea .el-textarea__inner {
  max-height: 200px;
  overflow-y: auto;
  font-size: 14px;
  min-height: 21px !important;
  margin: 0;
  color: var(--color-text-primary);
}

/* Кнопка отправки */
#widget-app.hde-plm-2gis .message-input__send {
  visibility: visible;
}

#widget-app.hde-plm-2gis .message-input__send button {
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  padding: 0;
}

/* Иконка кнопки отправки */
#widget-app.hde-plm-2gis .message-input__send button i::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: var(--color-text-secondary);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.42289 4.09384C5.05732 3.92324 4.62505 3.989 4.32676 4.2606C4.02847 4.53221 3.92258 4.95644 4.05827 5.33636L6.43815 12L4.05827 18.6637C3.92258 19.0436 4.02847 19.4678 4.32676 19.7394C4.62505 20.011 5.05732 20.0768 5.42289 19.9062L20.4229 12.9062C20.775 12.7419 21 12.3885 21 12C21 11.6115 20.775 11.2581 20.4229 11.0938L5.42289 4.09384ZM8.20473 11L6.74718 6.9189L17.6353 12L6.74718 17.0811L8.20473 13H11C11.5523 13 12 12.5523 12 12C12 11.4477 11.5523 11 11 11H8.20473Z' fill='black'/></svg>");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.42289 4.09384C5.05732 3.92324 4.62505 3.989 4.32676 4.2606C4.02847 4.53221 3.92258 4.95644 4.05827 5.33636L6.43815 12L4.05827 18.6637C3.92258 19.0436 4.02847 19.4678 4.32676 19.7394C4.62505 20.011 5.05732 20.0768 5.42289 19.9062L20.4229 12.9062C20.775 12.7419 21 12.3885 21 12C21 11.6115 20.775 11.2581 20.4229 11.0938L5.42289 4.09384ZM8.20473 11L6.74718 6.9189L17.6353 12L6.74718 17.0811L8.20473 13H11C11.5523 13 12 12.5523 12 12C12 11.4477 11.5523 11 11 11H8.20473Z' fill='black'/></svg>");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

#widget-app.hde-plm-2gis .message-input__send.message-input__send_active button:active,
#widget-app.hde-plm-2gis .message-input__send.message-input__send_active button:focus {
  border: 2px solid var(--color-special-divider);
}

#widget-app.hde-plm-2gis .message-input__send.message-input__send_active button i::before {
  background-color: var(--color-text-brand);
}

#widget-app.hde-plm-2gis .message-input__send.message-input__send_active button:hover i::before {
  background-color: var(--color-text-brand-hover);
}

#widget-app.hde-plm-2gis .message-input__send.message-input__send_active button:active i::before,
#widget-app.hde-plm-2gis .message-input__send.message-input__send_active button:focus i::before {
  background-color: var(--color-text-brand-pressed);
}

/* Кнопка Показать предыдущие обращения */
#widget-app.hde-plm-2gis .show-previous__button button {
  font-size: 12px;
  color: var(--color-text-brand);
}

#widget-app.hde-plm-2gis .show-previous__button button:hover,
#widget-app.hde-plm-2gis .show-previous__button button:focus {
  color: var(--color-text-brand-hover);
}

#widget-app.hde-plm-2gis .show-previous__button button:active {
  color: var(--color-text-brand-pressed);
}

/* Сообщения */
#widget-app.hde-plm-2gis .messages .message {
  margin-bottom: 12px;
}

#widget-app.hde-plm-2gis .message .message__container {
  background-color: #1414140f !important;
  color: var(--color-text-primary) !important;
  border-radius: 12px 12px 2px 12px;
}

#widget-app.hde-plm-2gis .message.message_visitor .message__container {
  background-color: #0059d614 !important;
}

#widget-app.hde-plm-2gis .message.message_files .message__file .message__text a {
  color: var(--color-text-primary) !important;
}

/* Имя отправителя */
#widget-app.hde-plm-2gis .message .message__name {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text-primary) !important;
}

#widget-app.hde-plm-2gis .message__text-container {
  display: flex;
  flex-flow: column;
}

/* Время отправки сообщения */
#widget-app.hde-plm-2gis .message__time,
#widget-app.hde-plm-2gis .message__file .message__time {
  padding: 2px 4px;
  font-size: 11px;
  color: var(--color-text-secondary) !important;
  border-radius: 4px;
}

#widget-app.hde-plm-2gis .message__time {
  background-color: transparent !important;
}

#widget-app.hde-plm-2gis .message__file .message__time {
  background-color: var(--color-white) !important;
}

/* Текст сообщения*/
#widget-app.hde-plm-2gis .message__text {
  padding: 0 2px;
  font-size: 14px;
}

/* Блок обратной связи */
#widget-app.hde-plm-2gis .csi .csi__header {
  font-weight: 600;
  margin: 0;
  padding: 16px 0;
}

/* Звездочки обратной связи */
#widget-app.hde-plm-2gis .csi .csi__rate {
  margin: -8px 0 16px;
}

/* Кнопка отправки обратной связи */
#widget-app.hde-plm-2gis .csi .csi__rate .csi__submit-rate button {
  background-color: var(--color-text-brand);
  color: var(--color-white);
  border: none;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  padding: 4px 8px;
  height: 40px;
}

#widget-app.hde-plm-2gis .csi .csi__rate .csi__submit-rate button:hover {
  background-color: var(--color-text-brand-hover);
}

#widget-app.hde-plm-2gis .csi .csi__rate .csi__submit-rate button:active {
  background-color: var(--color-text-brand-pressed);
}

#widget-app.hde-plm-2gis .csi .csi__footer {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 16px;
  border-top: 1px solid var(--color-special-divider);
}

/* Кнопка Создать новое обращение*/
#widget-app.hde-plm-2gis .csi .csi__footer button {
  display: block;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  height: 40px;
  padding: 4px 8px;
  background-color: #f0f0f0 !important;
  color: var(--color-text-brand);
}

#widget-app.hde-plm-2gis .csi .csi__footer button:hover {
  background-color: #e9e9e9 !important;
}

#widget-app.hde-plm-2gis .csi .csi__footer button:active {
  background-color: #d7d7d7 !important;
}

/* Комментарий обратной связи */
#widget-app.hde-plm-2gis .csi .csi__comment textarea {
  border-radius: 8px;
  font-size: 14px;
  border-color: var(--color-special-divider);
  color: var(--color-text-primary);
}