/* Reset & base — стиль сайту (як Telegram / Instagram) */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: #0e1621;
  color: #e4e4e4;
  min-height: 100vh;
  line-height: 1.4;
}

.app {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

.page-header {
  text-align: center;
  margin-bottom: 1.5rem;
}
.page-header h1 { font-size: 1.5rem; margin: 0 0 0.25rem 0; }
.page-header p { margin: 0; color: #8b98a5; font-size: 0.9rem; }

.layout {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 800px) {
  .layout { grid-template-columns: 1fr; }
}

.panel {
  background: #17212b;
  border-radius: 12px;
  padding: 1.25rem;
  border: 1px solid #242f3d;
}
.panel h2 { margin: 0 0 1rem 0; font-size: 1.1rem; color: #fff; }
.form-panel .form-section { margin-bottom: 1.5rem; }
.form-panel .form-section:last-child { margin-bottom: 0; }
.form-panel h3 { margin: 0 0 0.75rem 0; font-size: 0.95rem; color: #8b98a5; }
.form-panel label {
  display: block;
  margin-bottom: 0.75rem;
}
.form-panel label span {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.85rem;
  color: #8b98a5;
}
.form-panel input[type="text"],
.form-panel input[type="datetime-local"],
.form-panel input[type="number"],
.form-panel textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #242f3d;
  border-radius: 8px;
  background: #242f3d;
  color: #e4e4e4;
  font-size: 0.95rem;
}
.form-panel input[type="file"] {
  width: 100%;
  font-size: 0.85rem;
  color: #8b98a5;
}
.form-panel textarea { resize: vertical; min-height: 60px; }

.form-hint { font-size: 0.85rem; color: #8b98a5; margin: 0 0 0.75rem 0; }
.message-actions { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.btn {
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: 8px;
  font-size: 0.9rem;
  cursor: pointer;
  background: #242f3d;
  color: #e4e4e4;
}
.btn-add { background: #2b5278; color: #fff; }
.btn-add:hover { background: #346a96; }
.btn-call { background: #1e3a2f; color: #3ba55d; }
.btn-call:hover { background: #2d4a3e; }
.btn-small {
  padding: 0.25rem 0.4rem;
  font-size: 0.8rem;
  min-width: 28px;
}
.message-list { display: flex; flex-direction: column; gap: 0.5rem; }
.msg-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem;
  background: #242f3d;
  border-radius: 8px;
  border: 1px solid #2f3d4d;
}
.msg-row .msg-badge {
  flex-shrink: 0;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
}
.msg-row.msg-contact .msg-badge { background: #182533; color: #6ab2f2; }
.msg-row.msg-me .msg-badge { background: #2b5278; color: #fff; }
.msg-row.msg-call .msg-badge { background: #1e3a2f; color: #3ba55d; }
.msg-row .msg-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.msg-row .msg-datetime-wrap { margin: 0; }
.msg-row .msg-datetime {
  width: 100%;
  padding: 0.35rem 0.5rem;
  border: 1px solid #2f3d4d;
  border-radius: 6px;
  background: #17212b;
  color: #e4e4e4;
  font-size: 0.8rem;
  cursor: pointer;
}
.msg-row .msg-datetime::-webkit-calendar-picker-indicator {
  filter: invert(0.8);
  cursor: pointer;
  opacity: 0.8;
}
.msg-row .msg-datetime::-webkit-datetime-edit { color: #e4e4e4; }
.msg-row .msg-datetime::-webkit-datetime-edit-fields-wrapper { color: #e4e4e4; }
.msg-row .msg-call-opts { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.msg-row .msg-call-opts label { margin: 0; display: flex; align-items: center; gap: 0.35rem; }
.msg-row .msg-call-opts select.msg-call-starter {
  padding: 0.25rem 0.5rem;
  border: 1px solid #2f3d4d;
  border-radius: 6px;
  background: #17212b;
  color: #e4e4e4;
  font-size: 0.85rem;
  cursor: pointer;
}
.msg-row .msg-call-opts input[type="number"] { width: 60px; margin: 0; padding: 0.25rem 0.35rem; }
.msg-row .msg-text-wrap { margin: 0; }
.msg-row textarea { margin: 0; min-height: 44px; }
.msg-row .msg-actions { margin: 0; display: flex; gap: 2px; flex-shrink: 0; }
.msg-row .msg-actions .btn { padding: 0.25rem; }

/* Перемикач «Зберегти фото Base64» — тумблер у стилі сайту */
.export-toggle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: #8b98a5;
}
.export-toggle input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}
.export-toggle-track {
  display: inline-flex;
  flex-shrink: 0;
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: #242f3d;
  border: 1px solid #2f3d4d;
  position: relative;
  transition: background 0.2s, border-color 0.2s;
}
.export-toggle-track::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #e4e4e4;
  top: 2px;
  left: 2px;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.export-toggle input:checked + .export-toggle-track {
  background: #2b5278;
  border-color: #346a96;
}
.export-toggle input:checked + .export-toggle-track::after {
  transform: translateX(20px);
}
.export-toggle-label { user-select: none; }

/* Кнопка вибору файлу (аватарка) */
.field-with-file {
  display: block;
  margin-bottom: 0.75rem;
}
.field-with-file > span:first-of-type {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.85rem;
  color: #8b98a5;
}
.btn-file {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
}
.btn-file input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 0;
}
.btn-file:hover { background: #2f3d4d; }
.form-section-export .message-actions { margin-bottom: 0; }
.btn-upload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-upload input[hidden] { position: absolute; width: 0; height: 0; opacity: 0; }

/* ========== Тільки превʼю в стилі Discord ========== */
.preview-panel h2 { margin-bottom: 0.5rem; }
.preview-resize-hint {
  margin: 0 0 0.75rem 0;
  font-size: 0.85rem;
  color: #7f8b99;
}
/* Обгортка з можливістю зміни розміру — тягни за кут */
.dc-preview-resizable {
  display: block;
  width: 520px;
  height: 520px;
  min-width: 320px;
  min-height: 400px;
  max-width: 100%;
  max-height: min(85vh, 700px);
  margin: 0 auto;
  resize: both;
  overflow: auto;
  border-radius: 8px;
  background: #313338;
}
.dc-preview-resizable::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.dc-preview-resizable::-webkit-scrollbar-track {
  background: #2b2d31;
  border-radius: 0 0 8px 0;
}
.dc-preview-resizable::-webkit-scrollbar-thumb {
  background: #3f4147;
  border-radius: 5px;
}
.dc-preview-resizable::-webkit-resizer {
  background: linear-gradient(135deg, transparent 50%, #3f4147 50%);
  border-radius: 0 0 8px 0;
}
.discord-frame {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 280px;
  background: #313338;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #3f4147;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}

.dc-chat {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  min-height: 120px;
}

/* Нижня панель вводу в стилі Discord */
.dc-input-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #383a40;
  border-top: 1px solid #3f4147;
  flex-shrink: 0;
  border-radius: 0 0 8px 8px;
}
.dc-input-plus {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #b5bac1;
  cursor: default;
}
.dc-input-plus svg {
  width: 24px;
  height: 24px;
  stroke-width: 2.0;
}
.dc-input-field {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: none;
  background: transparent;
  color: #dbdee1;
  font-size: 0.9375rem;
  outline: none;
}
.dc-input-field::placeholder {
  color: #949ba4;
}
.dc-input-icons {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.dc-input-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: #b5bac1;
  font-size: 10px;
  font-weight: 600;
  border-radius: 4px;
  cursor: default;
  flex-shrink: 0;
}
/* Подарунок — Discord gift, fill #5865f2 */
.dc-icon-gift {
  /* background-color: #FFFFFF; */
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="24" height="24" preserveAspectRatio="xMidYMid meet" style="width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px); content-visibility: visible;"><defs><clipPath id="__lottie_element_1070"><rect width="24" height="24" x="0" y="0"></rect></clipPath><clipPath id="__lottie_element_1072"><path d="M0,0 L600,0 L600,600 L0,600z"></path></clipPath></defs><g clip-path="url(%23__lottie_element_1070)"><g clip-path="url(%23__lottie_element_1072)" transform="matrix(0.03999999910593033,0,0,0.03999999910593033,0,0)" opacity="1" style="display: block;"><g transform="matrix(25,0,0,25,300,300)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(181,186,193)" fill-opacity="1" d=" M-7,10 C-8.104999542236328,10 -9,9.104999542236328 -9,8 C-9,8 -9,2.5 -9,2.5 C-9,2.2239999771118164 -8.776000022888184,2 -8.5,2 C-8.5,2 -1.5,2 -1.5,2 C-1.2239999771118164,2 -1,2.2239999771118164 -1,2.5 C-1,2.5 -1,9.5 -1,9.5 C-1,9.776000022888184 -1.2239999771118164,10 -1.5,10 C-1.5,10 -7,10 -7,10z M1,9.5 C1,9.776000022888184 1.2239999771118164,10 1.5,10 C1.5,10 7,10 7,10 C8.104999542236328,10 9,9.104999542236328 9,8 C9,8 9,2.5 9,2.5 C9,2.2239999771118164 8.776000022888184,2 8.5,2 C8.5,2 1.5,2 1.5,2 C1.2239999771118164,2 1,2.2239999771118164 1,2.5 C1,2.5 1,9.5 1,9.5z"></path></g></g><g transform="matrix(25,0,0,25,300,300)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(181,186,193)" fill-opacity="1" d=" M-10,-2 C-10,-3.1050000190734863 -9.104999542236328,-4 -8,-4 C-8,-4 8,-4 8,-4 C9.104999542236328,-4 10,-3.1050000190734863 10,-2 C10,-2 10,-0.5 10,-0.5 C10,-0.2240000069141388 9.776000022888184,0 9.5,0 C9.5,0 -9.5,0 -9.5,0 C-9.776000022888184,0 -10,-0.2240000069141388 -10,-0.5 C-10,-0.5 -10,-2 -10,-2z"></path></g></g><g transform="matrix(25,0,0,25,300,300)" opacity="1" style="display: block;"><path stroke-linecap="butt" stroke-linejoin="round" fill-opacity="0" stroke="rgb(181,186,193)" stroke-opacity="1" stroke-width="2" d=" M7,-6 C7,-7.6570000648498535 5.6570000648498535,-9 4,-9 C4,-9 3.9110000133514404,-9 3.9110000133514404,-9 C2.49399995803833,-9 1.2589999437332153,-8.03600025177002 0.9150000214576721,-6.660999774932861 C0.9150000214576721,-6.660999774932861 0,-3 0,-3 C0,-3 4,-3 4,-3 C5.6570000648498535,-3 7,-4.3429999351501465 7,-6 C7,-6 7,-6 7,-6z"></path><g opacity="1" transform="matrix(1,0,0,1,0,0)"></g></g><g transform="matrix(25,0,0,25,300,300)" opacity="1" style="display: block;"><path stroke-linecap="butt" stroke-linejoin="round" fill-opacity="0" stroke="rgb(181,186,193)" stroke-opacity="1" stroke-width="2" d=" M-7,-6 C-7,-7.6570000648498535 -5.6570000648498535,-9 -4,-9 C-4,-9 -3.9110000133514404,-9 -3.9110000133514404,-9 C-2.49399995803833,-9 -1.2589999437332153,-8.03600025177002 -0.9150000214576721,-6.660999774932861 C-0.9150000214576721,-6.660999774932861 0,-3 0,-3 C0,-3 -4,-3 -4,-3 C-5.6570000648498535,-3 -7,-4.3429999351501465 -7,-6 C-7,-6 -7,-6 -7,-6z"></path><g opacity="1" transform="matrix(1,0,0,1,0,0)"></g></g></g></g></svg>');
/* background-attachment: fixed | scroll; */
/* background-size: auto | cover | contain | 500px 250px; */
/* background-position: center | right 30px bottom 15px; */
/* background-repeat: no-repeat | repeat | repeat-x; */
/* background-origin: border-box | padding-box | content-box; */
/* background-clip: border-box | padding-box | content-box; */
/* background-blend-mode: multiply | screen | overlay; */
}
/* GIF — білий текст на blurple */
.dc-icon-gif {
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 700;
  background-color: #b5bac1;
  color: #313338;
  border-radius: 4px;
  width: 20px;
  height: 20px;
}
/* Квадратний смайлик-стікер — заокруглений квадрат з загнутим кутом */
.dc-icon-emoji1 {
/* background-color: #FFFFFF; */
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="24" height="24" preserveAspectRatio="xMidYMid meet" style="width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px); content-visibility: visible;"><defs><clipPath id="__lottie_element_1277"><rect width="24" height="24" x="0" y="0"></rect></clipPath><clipPath id="__lottie_element_1279"><path d="M0,0 L600,0 L600,600 L0,600z"></path></clipPath><g id="__lottie_element_1284"><g style="display: block;" transform="matrix(25,0,0,25,300,300)" opacity="1"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(181,186,193)" fill-opacity="1" d=" M-5.5,-2 C-4.671999931335449,-2 -4,-2.671999931335449 -4,-3.5 C-4,-4.328000068664551 -4.671999931335449,-5 -5.5,-5 C-6.328000068664551,-5 -7,-4.328000068664551 -7,-3.5 C-7,-2.671999931335449 -6.328000068664551,-2 -5.5,-2z M7,-3.5 C7,-2.671999931335449 6.328000068664551,-2 5.5,-2 C4.671999931335449,-2 4,-2.671999931335449 4,-3.5 C4,-4.328000068664551 4.671999931335449,-5 5.5,-5 C6.328000068664551,-5 7,-4.328000068664551 7,-3.5z M-2.9110000133514404,-0.5559999942779541 C-3.2179999351501465,-1.0149999856948853 -3.8399999141693115,-1.1380000114440918 -4.298999786376953,-0.8309999704360962 C-4.757999897003174,-0.5239999890327454 -4.880000114440918,0.09700000286102295 -4.572999954223633,0.5559999942779541 C-3.5880000591278076,2.0269999504089355 -1.9079999923706055,3 0,3 C1.9079999923706055,3 3.5880000591278076,2.0269999504089355 4.572999954223633,0.5559999942779541 C4.880000114440918,0.09700000286102295 4.756999969482422,-0.5239999890327454 4.297999858856201,-0.8309999704360962 C3.8389999866485596,-1.1380000114440918 3.2179999351501465,-1.0149999856948853 2.9110000133514404,-0.5559999942779541 C2.2809998989105225,0.38499999046325684 1.2120000123977661,1 0,1 C-1.2120000123977661,1 -2.2809998989105225,0.38499999046325684 -2.9110000133514404,-0.5559999942779541z"></path></g></g></g><g id="__lottie_element_1294"><g clip-path="url(%23__lottie_element_1295)" transform="matrix(1,0,0,1,0,0)" opacity="1" style="display: none;"><g style="display: none;"><g><path></path></g></g><g style="display: none;"><g><path></path></g></g><g style="display: none;"><g><path stroke-linecap="round" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4"></path></g></g><g style="display: none;"><g><path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4"></path></g></g><g clip-path="url(%23__lottie_element_1301)" style="display: none;"><g><path></path></g></g></g></g><clipPath id="__lottie_element_1295"><path d="M0,0 L600,0 L600,600 L0,600z"></path></clipPath><clipPath id="__lottie_element_1301"><path fill="%23ffffff" clip-rule="nonzero"></path><path fill="%23ffffff" clip-rule="nonzero"></path></clipPath><filter id="__lottie_element_1318" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%"><feComponentTransfer in="SourceGraphic"><feFuncA type="table" tableValues="1.0 0.0"></feFuncA></feComponentTransfer></filter><mask id="__lottie_element_1294_2" mask-type="alpha"><g filter="url(%23__lottie_element_1318)"><rect width="600" height="600" x="0" y="0" fill="%23ffffff" opacity="0"></rect><use xlink:href="%23__lottie_element_1294"></use></g></mask><filter id="__lottie_element_1319" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%"><feComponentTransfer in="SourceGraphic"><feFuncA type="table" tableValues="1.0 0.0"></feFuncA></feComponentTransfer></filter><mask id="__lottie_element_1284_2" mask-type="alpha"><g filter="url(%23__lottie_element_1319)"><rect width="600" height="600" x="0" y="0" fill="%23ffffff" opacity="0"></rect><use xlink:href="%23__lottie_element_1284"></use></g></mask></defs><g clip-path="url(%23__lottie_element_1277)"><g clip-path="url(%23__lottie_element_1279)" transform="matrix(0.03999999910593033,0,0,0.03999999910593033,0,0)" opacity="1" style="display: block;"><g mask="url(%23__lottie_element_1294_2)" style="display: none;"><g><g><path></path></g></g></g><g transform="matrix(25,0,0,25,300,300)" opacity="1" style="display: none;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(181,186,193)" fill-opacity="1" d=" M-6,-10 C-6,-10 6,-10 6,-10 C8.208999633789062,-10 10,-8.208999633789062 10,-6 C10,-6 10,1.5 10,1.5 C10,1.7760000228881836 9.776000022888184,2 9.5,2 C9.5,2 7,2 7,2 C4.238999843597412,2 2,4.238999843597412 2,7 C2,7 2,9.5 2,9.5 C2,9.776000022888184 1.7760000228881836,10 1.5,10 C1.5,10 -6,10 -6,10 C-8.208999633789062,10 -10,8.208999633789062 -10,6 C-10,6 -10,-6 -10,-6 C-10,-8.208999633789062 -8.208999633789062,-10 -6,-10z M9.659000396728516,4 C9.692000389099121,4 9.71399974822998,4.033999919891357 9.699999809265137,4.064000129699707 C9.555000305175781,4.36299991607666 9.359999656677246,4.639999866485596 9.121000289916992,4.879000186920166 C9.121000289916992,4.879000186920166 4.879000186920166,9.121000289916992 4.879000186920166,9.121000289916992 C4.639999866485596,9.359999656677246 4.36299991607666,9.555000305175781 4.064000129699707,9.699999809265137 C4.033999919891357,9.71399974822998 4,9.692000389099121 4,9.659000396728516 C4,9.659000396728516 4,9.17199993133545 4,9.17199993133545 C4,9.17199993133545 4,7 4,7 C4,5.3429999351501465 5.3429999351501465,4 7,4 C7,4 9.17199993133545,4 9.17199993133545,4 C9.17199993133545,4 9.659000396728516,4 9.659000396728516,4z M-5.5,-2 C-4.671999931335449,-2 -4,-2.671999931335449 -4,-3.5 C-4,-4.328000068664551 -4.671999931335449,-5 -5.5,-5 C-6.328000068664551,-5 -7,-4.328000068664551 -7,-3.5 C-7,-2.671999931335449 -6.328000068664551,-2 -5.5,-2z M7,-3.5 C7,-4.328000068664551 6.328000068664551,-5 5.5,-5 C4.671999931335449,-5 4,-4.328000068664551 4,-3.5 C4,-2.671999931335449 4.671999931335449,-2 5.5,-2 C6.328000068664551,-2 7,-2.671999931335449 7,-3.5z M-2.9110000133514404,-0.5559999942779541 C-3.2179999351501465,-1.0149999856948853 -3.8399999141693115,-1.1380000114440918 -4.298999786376953,-0.8309999704360962 C-4.757999897003174,-0.5239999890327454 -4.880000114440918,0.09700000286102295 -4.572999954223633,0.5559999942779541 C-3.5880000591278076,2.0269999504089355 -1.9079999923706055,3 0,3 C1.9079999923706055,3 3.5880000591278076,2.0269999504089355 4.572999954223633,0.5559999942779541 C4.880000114440918,0.09700000286102295 4.756999969482422,-0.5239999890327454 4.297999858856201,-0.8309999704360962 C3.8389999866485596,-1.1380000114440918 3.2179999351501465,-1.0149999856948853 2.9110000133514404,-0.5559999942779541 C2.2809998989105225,0.38499999046325684 1.2120000123977661,1 0,1 C-1.2120000123977661,1 -2.2809998989105225,0.38499999046325684 -2.9110000133514404,-0.5559999942779541z"></path></g></g><g mask="url(%23__lottie_element_1284_2)" style="display: block;"><g transform="matrix(25,0,0,25,300,300)" opacity="1"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(181,186,193)" fill-opacity="1" d=" M-6,-10 C-6,-10 6,-10 6,-10 C8.208999633789062,-10 10,-8.208999633789062 10,-6 C10,-6 10,1.5 10,1.5 C10,1.7760000228881836 9.776000022888184,2 9.5,2 C9.5,2 7,2 7,2 C4.238999843597412,2 2,4.238999843597412 2,7 C2,7 2,9.5 2,9.5 C2,9.776000022888184 1.7760000228881836,10 1.5,10 C1.5,10 -6,10 -6,10 C-8.208999633789062,10 -10,8.208999633789062 -10,6 C-10,6 -10,-6 -10,-6 C-10,-8.208999633789062 -8.208999633789062,-10 -6,-10z M9.659000396728516,4 C9.692000389099121,4 9.71399974822998,4.033999919891357 9.699999809265137,4.064000129699707 C9.555000305175781,4.36299991607666 9.359999656677246,4.639999866485596 9.121000289916992,4.879000186920166 C9.121000289916992,4.879000186920166 4.879000186920166,9.121000289916992 4.879000186920166,9.121000289916992 C4.639999866485596,9.359999656677246 4.36299991607666,9.555000305175781 4.064000129699707,9.699999809265137 C4.033999919891357,9.71399974822998 4,9.692000389099121 4,9.659000396728516 C4,9.659000396728516 4,9.17199993133545 4,9.17199993133545 C4,9.17199993133545 4,7 4,7 C4,5.3429999351501465 5.3429999351501465,4 7,4 C7,4 9.17199993133545,4 9.17199993133545,4 C9.17199993133545,4 9.659000396728516,4 9.659000396728516,4z"></path></g></g></g></g></g></svg>');
/* background-attachment: fixed | scroll; */
/* background-size: auto | cover | contain | 500px 250px; */
/* background-position: center | right 30px bottom 15px; */
/* background-repeat: no-repeat | repeat | repeat-x; */
/* background-origin: border-box | padding-box | content-box; */
/* background-clip: border-box | padding-box | content-box; */
/* background-blend-mode: multiply | screen | overlay; */
}
/* Круглий смайлик */
.dc-icon-emoji2 {
  /* зроби тут смійлик */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23b5bac1'/%3E%3Cellipse cx='9' cy='10' rx='1' ry='1.4' fill='%23313338'/%3E%3Cellipse cx='15' cy='10' rx='1' ry='1.4' fill='%23313338'/%3E%3Cpath d='M8 14c1 2 5 2 8 0' stroke='%23313338' stroke-width='1.3' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center/22px no-repeat;
}
/* Чотири смайлика — сітка з 4 іконок */
.dc-icon-stickers {
  /* background-color: #FFFFFF; */
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 96 96" width="24" height="24" preserveAspectRatio="xMidYMid meet" style="width: 100%; height: 100%; transform: translate3d(0px, 0px, 0px); content-visibility: visible;"><defs><clipPath id="__lottie_element_904"><rect width="96" height="96" x="0" y="0"></rect></clipPath><clipPath id="__lottie_element_906"><path d="M0,0 L96,0 L96,96 L0,96z"></path></clipPath></defs><g clip-path="url(%23__lottie_element_904)"><g clip-path="url(%23__lottie_element_906)" transform="matrix(2.700000047683716,0,0,2.700000047683716,-79.60000610351562,-81.35110473632812)" opacity="1" style="display: block;"><g transform="matrix(1,0,0,1,32.02199935913086,32.64699935913086)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,7.179999828338623,7.181000232696533)"><path fill="rgb(199,200,206)" fill-opacity="1" d=" M-6.554999828338623,1.6410000324249268 C-6.929999828338623,3.0420000553131104 -6.099999904632568,4.480999946594238 -4.698999881744385,4.85699987411499 C-4.698999881744385,4.85699987411499 1.6410000324249268,6.554999828338623 1.6410000324249268,6.554999828338623 C3.0409998893737793,6.931000232696533 4.48199987411499,6.098999977111816 4.85699987411499,4.698999881744385 C4.85699987411499,4.698999881744385 6.554999828338623,-1.6410000324249268 6.554999828338623,-1.6410000324249268 C6.929999828338623,-3.0420000553131104 6.098999977111816,-4.480999946594238 4.698999881744385,-4.85699987411499 C4.698999881744385,-4.85699987411499 -1.6410000324249268,-6.556000232696533 -1.6410000324249268,-6.556000232696533 C-3.0409998893737793,-6.931000232696533 -4.48199987411499,-6.099999904632568 -4.85699987411499,-4.698999881744385 C-4.85699987411499,-4.698999881744385 -6.554999828338623,1.6410000324249268 -6.554999828338623,1.6410000324249268z"></path></g></g><g transform="matrix(1,0,0,1,47.44300079345703,32.419002532958984)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,7.802000045776367,7.021999835968018)"><path fill="rgb(199,200,206)" fill-opacity="1" d=" M-6.478000164031982,2.4040000438690186 C-7.552000045776367,4.372000217437744 -6.126999855041504,6.771999835968018 -3.884999990463257,6.771999835968018 C-3.884999990463257,6.771999835968018 3.885999917984009,6.771999835968018 3.885999917984009,6.771999835968018 C6.127999782562256,6.771999835968018 7.552000045776367,4.372000217437744 6.479000091552734,2.4040000438690186 C6.479000091552734,2.4040000438690186 2.5929999351501465,-4.718999862670898 2.5929999351501465,-4.718999862670898 C1.4739999771118164,-6.771999835968018 -1.4730000495910645,-6.771999835968018 -2.5929999351501465,-4.718999862670898 C-2.5929999351501465,-4.718999862670898 -6.478000164031982,2.4040000438690186 -6.478000164031982,2.4040000438690186z"></path></g></g><g transform="matrix(1,0,0,1,32.119998931884766,49.04499816894531)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,7.081999778747559,7.046999931335449)"><path fill="rgb(199,200,206)" fill-opacity="1" d=" M-0.9409999847412109,-6.26800012588501 C-0.42100000381469727,-6.796999931335449 0.41999998688697815,-6.796999931335449 0.9409999847412109,-6.26800012588501 C0.9409999847412109,-6.26800012588501 2.056999921798706,-5.132999897003174 2.056999921798706,-5.132999897003174 C2.2699999809265137,-4.916999816894531 2.5480000972747803,-4.78000020980835 2.8459999561309814,-4.744999885559082 C2.8459999561309814,-4.744999885559082 4.4120001792907715,-4.561999797821045 4.4120001792907715,-4.561999797821045 C5.140999794006348,-4.4770002365112305 5.665999889373779,-3.805999994277954 5.585000038146973,-3.061000108718872 C5.585000038146973,-3.061000108718872 5.410999774932861,-1.4630000591278076 5.410999774932861,-1.4630000591278076 C5.377999782562256,-1.1579999923706055 5.447000026702881,-0.8510000109672546 5.605999946594238,-0.5910000205039978 C5.605999946594238,-0.5910000205039978 6.441999912261963,0.7720000147819519 6.441999912261963,0.7720000147819519 C6.831999778747559,1.406999945640564 6.644999980926514,2.24399995803833 6.0229997634887695,2.6440000534057617 C6.0229997634887695,2.6440000534057617 4.690999984741211,3.502000093460083 4.690999984741211,3.502000093460083 C4.436999797821045,3.6649999618530273 4.24399995803833,3.9119999408721924 4.144000053405762,4.201000213623047 C4.144000053405762,4.201000213623047 3.621000051498413,5.7179999351501465 3.621000051498413,5.7179999351501465 C3.378000020980835,6.423999786376953 2.619999885559082,6.796999931335449 1.9259999990463257,6.551000118255615 C1.9259999990463257,6.551000118255615 0.43799999356269836,6.021999835968018 0.43799999356269836,6.021999835968018 C0.15399999916553497,5.921999931335449 -0.1550000011920929,5.921999931335449 -0.43799999356269836,6.021999835968018 C-0.43799999356269836,6.021999835968018 -1.9270000457763672,6.551000118255615 -1.9270000457763672,6.551000118255615 C-2.619999885559082,6.796999931335449 -3.378000020980835,6.423999786376953 -3.621999979019165,5.7179999351501465 C-3.621999979019165,5.7179999351501465 -4.144999980926514,4.201000213623047 -4.144999980926514,4.201000213623047 C-4.24399995803833,3.9119999408721924 -4.436999797821045,3.6649999618530273 -4.690999984741211,3.502000093460083 C-4.690999984741211,3.502000093460083 -6.02400016784668,2.6440000534057617 -6.02400016784668,2.6440000534057617 C-6.644999980926514,2.24399995803833 -6.831999778747559,1.406999945640564 -6.442999839782715,0.7720000147819519 C-6.442999839782715,0.7720000147819519 -5.605999946594238,-0.5910000205039978 -5.605999946594238,-0.5910000205039978 C-5.447000026702881,-0.8510000109672546 -5.377999782562256,-1.1579999923706055 -5.4120001792907715,-1.4630000591278076 C-5.4120001792907715,-1.4630000591278076 -5.585000038146973,-3.061000108718872 -5.585000038146973,-3.061000108718872 C-5.665999889373779,-3.805999994277954 -5.142000198364258,-4.4770002365112305 -4.4120001792907715,-4.561999797821045 C-4.4120001792907715,-4.561999797821045 -2.8469998836517334,-4.744999885559082 -2.8469998836517334,-4.744999885559082 C-2.5480000972747803,-4.78000020980835 -2.2699999809265137,-4.916999816894531 -2.056999921798706,-5.132999897003174 C-2.056999921798706,-5.132999897003174 -0.9409999847412109,-6.26800012588501 -0.9409999847412109,-6.26800012588501z"></path></g></g><g transform="matrix(-1,0,0,-1,62.694000244140625,63.320003509521484)" opacity="1" style="display: block;"><g opacity="1" transform="matrix(1,0,0,1,7.247000217437744,7.247000217437744)"><path fill="rgb(199,200,206)" fill-opacity="1" d=" M1.5130000114440918,-5.5920000076293945 C0.9929999709129333,-6.997000217437744 -0.9940000176429749,-6.997000217437744 -1.5140000581741333,-5.5920000076293945 C-1.5140000581741333,-5.5920000076293945 -2.190999984741211,-3.760999917984009 -2.190999984741211,-3.760999917984009 C-2.4600000381469727,-3.0339999198913574 -3.0339999198913574,-2.4600000381469727 -3.76200008392334,-2.190999984741211 C-3.76200008392334,-2.190999984741211 -5.5920000076293945,-1.5130000114440918 -5.5920000076293945,-1.5130000114440918 C-6.997000217437744,-0.9940000176429749 -6.997000217437744,0.9929999709129333 -5.5920000076293945,1.5130000114440918 C-5.5920000076293945,1.5130000114440918 -3.76200008392334,2.190999984741211 -3.76200008392334,2.190999984741211 C-3.0339999198913574,2.4600000381469727 -2.4600000381469727,3.0339999198913574 -2.190999984741211,3.760999917984009 C-2.190999984741211,3.760999917984009 -1.5140000581741333,5.5920000076293945 -1.5140000581741333,5.5920000076293945 C-0.9940000176429749,6.997000217437744 0.9929999709129333,6.997000217437744 1.5130000114440918,5.5920000076293945 C1.5130000114440918,5.5920000076293945 2.190000057220459,3.760999917984009 2.190000057220459,3.760999917984009 C2.4600000381469727,3.0339999198913574 3.0329999923706055,2.4600000381469727 3.760999917984009,2.190999984741211 C3.760999917984009,2.190999984741211 5.5920000076293945,1.5130000114440918 5.5920000076293945,1.5130000114440918 C6.997000217437744,0.9929999709129333 6.997000217437744,-0.9940000176429749 5.5920000076293945,-1.5130000114440918 C5.5920000076293945,-1.5130000114440918 3.760999917984009,-2.190999984741211 3.760999917984009,-2.190999984741211 C3.0329999923706055,-2.4600000381469727 2.4600000381469727,-3.0339999198913574 2.190000057220459,-3.760999917984009 C2.190000057220459,-3.760999917984009 1.5130000114440918,-5.5920000076293945 1.5130000114440918,-5.5920000076293945z"></path></g></g></g></g></svg>');
/* background-attachment: fixed | scroll; */
/* background-size: auto | cover | contain | 500px 250px; */
/* background-position: center | right 30px bottom 15px; */
/* background-repeat: no-repeat | repeat | repeat-x; */
/* background-origin: border-box | padding-box | content-box; */
/* background-clip: border-box | padding-box | content-box; */
/* background-blend-mode: multiply | screen | overlay; */
}

/* Роздільник дати — горизонтальна лінія з датою по центру */
.dc-date-sep {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
}
.dc-date-sep::before,
.dc-date-sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #3f4147;
}
.dc-date-sep span {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: #b5bac1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.dc-messages > .dc-date-sep:first-child { margin-top: 0; }

.dc-messages { display: flex; flex-direction: column; gap: 0; }

/* Один ряд повідомлення — аватар зліва, контент справа */
.dc-msg {
  display: flex;
  gap: 16px;
  padding: 2px 0 2px 0;
  margin: 1px 0;
  position: relative;
}
.dc-msg:hover { background: #2e3035; border-radius: 4px; margin: 1px 4px; padding-left: 4px; margin-left: 0; }

.dc-msg-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #2b2d31;
}
.dc-msg-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dc-msg-avatar.has-img img { display: block; }
.dc-msg-avatar:not(.has-img) img { display: none; }
.dc-msg-avatar:not(.has-img)::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: #b5bac1;
  border-radius: 50%;
}

.dc-msg-body { min-width: 0; flex: 1; }
.dc-msg-header {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}
.dc-msg-username {
  font-size: 1rem;
  font-weight: 600;
  color: #f2f3f5;
}
.dc-msg-time {
  font-size: 12px;
  color: #949ba4;
  font-weight: 400;
}
.dc-msg-content {
  font-size: 0.9375rem;
  color: #dbdee1;
  word-wrap: break-word;
  white-space: pre-wrap;
}
.dc-msg-content:empty::before { content: '\00a0'; }

/* Блок дзвінку — іконка телефону, нік, текст події */
.dc-call {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 4px 0;
  margin: 1px 0;
}
.dc-call:hover { background: #2e3035; border-radius: 4px; margin: 1px 4px; padding: 4px 4px 4px 4px; }
.dc-call-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3ba55d;
}
.dc-call-icon svg {
  width: 24px;
  height: 24px;
}
.dc-call-body {
  font-size: 0.9375rem;
  color: #dbdee1;
}
.dc-call-body .dc-msg-username { margin-right: 4px; font-weight: 600; color: #f2f3f5; }
.dc-call-body .dc-call-desc { color: #dbdee1; }