/* =========================================================
   СМС-ЭПИЗОД — телефон в посте
   один класс на обёртке решает сторону:
   .cb-sms           — облачка справа (синие)
   .cb-sms--left     — облачка слева (кремовые)
   .is-flip на одном сообщении — ответ собеседника, уходит на другую сторону
   ========================================================= */

.cb-sms {
  /* размеры телефона — можно менять прямо тут */
  --sms-w: 290px;
  --sms-h: 520px;
  --sms-pic: 190px;            /* макс. ширина картинки */
  --sms-pic-h: 230px;          /* макс. высота картинки */

  /* экран и стекло */
  --sms-screen: var(--card);                    /* фон: цвет, градиент или url(...) */
  --sms-ui: var(--text);                        /* цвет времени, иконок, имени */
  --sms-accent: var(--blue);                    /* стрелка «назад» и камера */
  --sms-glass: rgba(255, 255, 255, .55);        /* стекло плашек */
  --sms-glass-line: rgba(255, 255, 255, .7);

  /* сторона «моих» облачков (можно градиент) */
  --sms-side: flex-end;
  --sms-bg: var(--blue);
  --sms-color: #fff;
  --sms-r: 14px 14px 3px 14px;  /* острый угол = хвостик */

  /* сторона собеседника (.is-flip, тоже можно градиент) */
  --sms-alt-side: flex-start;
  --sms-alt-bg: var(--chip);
  --sms-alt-color: var(--text);
  --sms-alt-r: 14px 14px 14px 3px;

  /* звуковая волна */
  --sms-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 159.5 24' preserveAspectRatio='none'%3E%3Cpath d='M0 9.5h2v5h-2zM4.5 9.5h2v5h-2zM9 6.5h2v11h-2zM13.5 9h2v6h-2zM18 6h2v12h-2zM22.5 7h2v10h-2zM27 8.5h2v7h-2zM31.5 5.5h2v13h-2zM36 8h2v8h-2zM40.5 5.5h2v13h-2zM45 7.5h2v9h-2zM49.5 7.5h2v9h-2zM54 5h2v14h-2zM58.5 1.5h2v21h-2zM63 7h2v10h-2zM67.5 6h2v12h-2zM72 3h2v18h-2zM76.5 0.5h2v23h-2zM81 3.5h2v17h-2zM85.5 4.5h2v15h-2zM90 0.5h2v23h-2zM94.5 7.5h2v9h-2zM99 1.5h2v21h-2zM103.5 6h2v12h-2zM108 7h2v10h-2zM112.5 7.5h2v9h-2zM117 6h2v12h-2zM121.5 3h2v18h-2zM126 7.5h2v9h-2zM130.5 5h2v14h-2zM135 5h2v14h-2zM139.5 7h2v10h-2zM144 6.5h2v11h-2zM148.5 9.5h2v5h-2zM153 9.5h2v5h-2zM157.5 10h2v4h-2z'/%3E%3C/svg%3E");

  display: flex;
  flex-direction: column;
  width: var(--sms-w);
  max-width: 100%;
  height: var(--sms-h);
  margin: 10px auto;
  padding: 5px;
  box-sizing: border-box;
  background: var(--beige);
  border: 1px solid var(--border);
  border-radius: 30px;
  box-shadow: var(--shadow);
  font: 400 12px/1.3 var(--font1);
  color: var(--text);
  text-align: left;
}

/* версия «облачка слева» — меняются местами только переменные */
.cb-sms--left {
  --sms-side: flex-start;
  --sms-bg: var(--chip);
  --sms-color: var(--text);
  --sms-r: 14px 14px 14px 3px;

  --sms-alt-side: flex-end;
  --sms-alt-bg: var(--blue);
  --sms-alt-color: #fff;
  --sms-alt-r: 14px 14px 3px 14px;
}

.cb-sms *,
.cb-sms *::before,
.cb-sms *::after { box-sizing: border-box; margin: 0; }

/* экран: фон задаётся переменной --sms-screen (цвет, градиент или url картинки) */
.cb-sms__screen {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--sms-screen);
  background-size: cover;
  background-position: center;
  border: 1px solid var(--border);
  border-radius: 25px;
  color: var(--sms-ui);
}

/* стекло: полупрозрачный фон + размытие того, что под ним */
.cb-sms__who,
.cb-sms__call,
.cb-sms__date,
.cb-sms__bar::before,
.cb-sms__bar span {
  background: var(--sms-glass);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
          backdrop-filter: blur(10px) saturate(1.4);
  border: 1px solid var(--sms-glass-line);
  box-shadow: var(--soft);
}

/* --- статус-бар: время + иконки --- */
.cb-sms__status {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 20px 0 24px;
  font-size: 11px;
  font-weight: 600;
}
.cb-sms__status::after {
  content: "\f012\2002\f1eb\2002\f240";
  font: 400 10px/1 var(--fa);
}

/* --- шапка: стеклянная капсула «назад + аватар + имя» и кнопка звонка --- */
.cb-sms__head {
  position: absolute;
  z-index: 2;
  top: 30px;
  left: 10px;
  right: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cb-sms__who {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 75%;
  height: 34px;
  padding: 0 12px 0 10px;
  border-radius: 17px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.cb-sms__who::before {
  content: "\f053";
  font: 400 11px/1 var(--fa);
  color: var(--sms-accent);
}
.cb-sms__who img {
  flex: none;
  width: 26px;
  height: 26px;
  max-width: none;
  border-radius: 50%;
  object-fit: cover;
}
/* пиксельное сердечко после имени */
.cb-sms__who::after {
  content: "";
  flex: none;
  width: 8px;
  height: 7px;
  background: var(--red);
  -webkit-mask: var(--heart) center / contain no-repeat;
          mask: var(--heart) center / contain no-repeat;
}

.cb-sms__call {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--sms-accent);
}
.cb-sms__call::before { content: "\f03d"; font: 400 12px/1 var(--fa); }

/* --- переписка: скролл без видимой полосы --- */
.cb-sms__body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 76px 10px 54px;
  /* сообщения мягко тают под шапкой и полем ввода */
  -webkit-mask: linear-gradient(transparent 34px, #000 80px, #000 calc(100% - 48px), transparent calc(100% - 14px));
          mask: linear-gradient(transparent 34px, #000 80px, #000 calc(100% - 48px), transparent calc(100% - 14px));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.cb-sms__body::-webkit-scrollbar { display: none; }
.cb-sms__body > * { flex-shrink: 0; }

/* дата — светлая плашка по центру */
.cb-sms__date {
  align-self: center;
  margin: 8px 0 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 9px;
}
.cb-sms__date:first-child { margin-top: 0; }

/* «доставлено / прочитано» под облачком */
.cb-sms__note {
  align-self: var(--sms-side);
  padding: 0 4px;
  font: 400 8px/1 var(--font2);
  opacity: .7;
}

/* --- облачко --- */
.cb-sms__msg {
  --b: var(--sms-bg);
  --t: var(--sms-color);
  --r: var(--sms-r);
  align-self: var(--sms-side);
  max-width: 78%;
  padding: 6px 10px;
  background: var(--b);
  color: var(--t);
  border-radius: var(--r);
  box-shadow: var(--soft);
  font-size: 11.5px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.cb-sms__msg.is-flip {
  --b: var(--sms-alt-bg);
  --t: var(--sms-alt-color);
  --r: var(--sms-alt-r);
  align-self: var(--sms-alt-side);
}
.cb-sms__msg a { color: inherit; text-decoration: underline; }

/* --- картинка: любые пропорции, облачко по размеру картинки --- */
.cb-sms__pic { padding: 3px; }
.cb-sms__pic img {
  display: block;
  width: auto;
  height: auto;
  max-width: var(--sms-pic);
  max-height: var(--sms-pic-h);
  border-radius: 11px 11px 2px 11px;
}
.cb-sms__pic.is-flip img,
.cb-sms--left .cb-sms__pic:not(.is-flip) img { border-radius: 11px 11px 11px 2px; }
.cb-sms--left .cb-sms__pic.is-flip img { border-radius: 11px 11px 2px 11px; }

/* --- голосовое: клик = плей + расшифровка --- */
.cb-sms__voice { width: 78%; }
.cb-sms__voice summary {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  cursor: pointer;
  outline: none;
}
.cb-sms__voice summary::-webkit-details-marker { display: none; }

/* кнопка плей / пауза */
.cb-sms__voice summary::before {
  content: "\f04b";
  flex: none;
  width: 22px;
  height: 22px;
  padding-left: 2px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font: 400 8px/19px var(--fa);
  text-align: center;
}
.cb-sms__voice[open] summary::before { content: "\f04c"; padding-left: 0; }

/* волна: светлая часть «проигрывается» слева направо */
.cb-sms__wave {
  flex: 1;
  height: 20px;
  background:
    linear-gradient(var(--t), var(--t)) 0 0 / 0% 100% no-repeat,
    color-mix(in srgb, var(--t) 45%, transparent);
  -webkit-mask: var(--sms-wave) center / 100% 100% no-repeat;
          mask: var(--sms-wave) center / 100% 100% no-repeat;
}
.cb-sms__voice[open] .cb-sms__wave {
  animation: cb-sms-play var(--dur, 4s) linear forwards;
}
@keyframes cb-sms-play { to { background-size: 100% 100%, auto; } }

.cb-sms__voice summary b {
  flex: none;
  font: 400 9px/1 var(--font2);
  opacity: .8;
}

/* расшифровка */
.cb-sms__text {
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px dashed color-mix(in srgb, var(--t) 40%, transparent);
  font-size: 10.5px;
  line-height: 1.35;
}
.cb-sms__text::before {
  content: "\440\430\441\448\438\444\440\43e\432\43a\430";
  display: block;
  margin-bottom: 3px;
  font: 400 8px/1 var(--font2);
  opacity: .6;
}

/* --- поле ввода внизу (декор), тоже стекло --- */
.cb-sms__bar {
  position: absolute;
  z-index: 2;
  left: 10px;
  right: 10px;
  bottom: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.cb-sms__bar::before {
  content: "\f067";
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font: 400 11px/28px var(--fa);
  text-align: center;
}
.cb-sms__bar span {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
  height: 30px;
  padding: 0 12px;
  border-radius: 15px;
  font-size: 10px;
  opacity: .9;
}
.cb-sms__bar span::after {
  content: "\f130";
  font: 400 11px/1 var(--fa);
}
/* =========================================================
   ГЕНЕРАТОР СМС-ЭПИЗОДА
   ========================================================= */

/* шапка поста: плашка-заголовок + пояснение */
.cb-gen-intro { margin: 0 0 16px; }
.cb-gen-intro b {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 7px 14px;
  background: var(--chip);
  box-shadow: var(--shadow);
  font-size: 11px;
  font-weight: 600;
}
.cb-gen-intro p {
  margin: -4px 0 0 !important;
  padding: 18px 22px 16px;
  background: var(--panel);
  box-shadow: var(--shadow);
  font-size: 11.5px;
  line-height: 1.4;
}

.cb-gen {
  font: 400 11px/1.3 var(--font1);
  color: var(--text);
  text-align: left;
}
.cb-gen *, .cb-gen *::before, .cb-gen *::after { box-sizing: border-box; }

.cb-gen__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 14px;
}

.cb-gen__phone { flex: none; width: 290px; max-width: 100%; }
.cb-gen__phone .cb-sms { margin: 0; }

.cb-gen__box {
  padding: 14px;
  background: var(--panel);
  border-radius: 10px;
}

/* средняя колонка: список сообщений со своим скроллом */
.cb-gen__msgs {
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
  height: 520px;
  padding: 12px;
}
.cb-gen__list {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: -4px;
  padding: 4px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.cb-gen__list:empty::before {
  content: "\441\43e\43e\431\449\435\43d\438\439  \43f\43e\43a\430  \43d\435\442  \2014  \436\43c\438  \ab\434\43e\431\430\432\438\442\44c  \441\43e\43e\431\449\435\43d\438\435\bb";
  margin: auto;
  padding: 0 20px;
  color: var(--muted);
  font-size: 10.5px;
  text-align: center;
}

.cb-gen__side {
  flex: 1 1 230px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* подписи и строки полей */
.cb-gen__label {
  display: block;
  margin: 0 0 6px;
  font-size: 10.5px;
  color: var(--label);
}
.cb-gen__row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.cb-gen__box > .cb-gen__row:last-child,
.cb-gen__card .cb-gen__row { margin-bottom: 0; }
.cb-gen__row.is-tight { align-items: center; flex-wrap: nowrap; margin-top: 6px; }
.cb-gen__row.is-tight .cb-gen__label { margin: 0 auto 0 2px; }

/* поля */
.cb-gen input[type="text"],
.cb-gen textarea {
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 26px;
  margin: 0;
  padding: 0 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 13px;
  box-shadow: none;
  font: 400 10.5px/1.3 var(--font1);
  color: var(--text);
  outline: none;
}
.cb-gen textarea {
  display: block;
  height: auto;
  min-height: 48px;
  padding: 7px 12px;
  border-radius: 10px;
  resize: vertical;
}
.cb-gen input[type="text"]:focus,
.cb-gen textarea:focus { border-color: var(--blue); }
.cb-gen input::placeholder,
.cb-gen textarea::placeholder { color: var(--hint-light); }
.cb-gen input.is-short { flex: 0 0 72px; }

/* цвет: кружок-пипетка + поле для кода */
.cb-gen__color {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1 1 100px;
  min-width: 0;
  margin: 0;
}
.cb-gen__color input[type="color"] {
  flex: none;
  width: 26px;
  height: 26px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  overflow: hidden;
  -webkit-appearance: none;
          appearance: none;
}
.cb-gen__color input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.cb-gen__color input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.cb-gen__color input[type="color"]::-moz-color-swatch { border: 0; border-radius: 50%; }
/* цвет не выбран — пустой кружок в клетку */
.cb-gen__color.is-empty input[type="color"] {
  background: repeating-conic-gradient(var(--gray) 0 25%, var(--card) 0 50%) 0 0 / 8px 8px;
}
.cb-gen__color.is-empty input[type="color"]::-webkit-color-swatch { opacity: 0; }
.cb-gen__color.is-empty input[type="color"]::-moz-color-swatch { opacity: 0; }

/* чипсы-переключатели */
.cb-gen button.cb-gen__chip {
  height: 22px;
  padding: 0 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--label);
  font: 400 10px/20px var(--font1);
  text-transform: none;
}
.cb-gen button.cb-gen__chip:hover { background: var(--card); border-color: var(--blue); color: var(--blue); }
.cb-gen button.cb-gen__chip.is-on { background: var(--blue); border-color: var(--blue); color: #fff; }
.cb-gen button.cb-gen__chip.is-on:hover { background: var(--blue-dark); border-color: var(--blue-dark); }

/* --- карточка сообщения --- */
.cb-gen__card {
  flex: none;
  padding: 9px 10px 10px;
  background: var(--card);
  border-radius: 8px;
  box-shadow: var(--soft);
}
.cb-gen__card.is-blink { animation: cb-gen-blink .6s ease 2; }
@keyframes cb-gen-blink { 50% { box-shadow: 0 0 0 2px var(--blue); } }

.cb-gen__card-head {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-bottom: 7px;
}
.cb-gen__type {
  margin-right: auto;
  font: 400 9px/1 var(--font2);
  color: var(--muted);
}
.cb-gen__hint {
  margin-right: auto;
  font-size: 10.5px;
  color: var(--blue);
}

/* «я / собеседник» — маленький сегмент */
.cb-gen__seg { display: inline-flex; margin-right: 4px; }
.cb-gen__seg button.cb-gen__chip { height: 18px; padding: 0 7px; font-size: 9px; line-height: 16px; }
.cb-gen__seg button.cb-gen__chip:first-child { border-radius: 9px 0 0 9px; }
.cb-gen__seg button.cb-gen__chip:last-child { border-radius: 0 9px 9px 0; margin-left: -1px; }

/* круглые иконки: выше, ниже, удалить */
.cb-gen button.cb-gen__icon {
  flex: none;
  width: 20px;
  height: 20px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
}
.cb-gen button.cb-gen__icon::before { font: 400 9px/20px var(--fa); }
.cb-gen button.cb-gen__icon.is-up::before { content: "\f077"; }
.cb-gen button.cb-gen__icon.is-down::before { content: "\f078"; }
.cb-gen button.cb-gen__icon.is-del::before { content: "\f00d"; font-size: 10px; }
.cb-gen button.cb-gen__icon:hover { background: var(--beige); color: var(--text); }
.cb-gen button.cb-gen__icon.is-del:hover { color: var(--red); }
.cb-gen button.cb-gen__icon:disabled { opacity: .3; pointer-events: none; }

/* добавить / очистить */
.cb-gen button.cb-gen__add {
  flex: none;
  height: 30px;
  margin-top: 10px;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 15px;
  color: var(--label);
  font: 400 10.5px/1 var(--font1);
  text-transform: none;
}
.cb-gen button.cb-gen__add:hover { background: var(--card); border: 1px solid var(--blue); color: var(--blue); }
.cb-gen button.cb-gen__clear {
  align-self: center;
  margin-top: 6px;
  padding: 2px 4px;
  background: none;
  border: 0;
  color: var(--muted);
  font: 400 9.5px/1 var(--font1);
  text-transform: none;
}
.cb-gen button.cb-gen__clear:hover { background: none; color: var(--red); }

/* --- нижние кнопки --- */
.cb-gen__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}
.cb-gen button.cb-gen__btn {
  height: 32px;
  padding: 0 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 3px;
  box-shadow: var(--shadow);
  color: var(--text);
  font: 600 11px/1 var(--font1);
  text-transform: none;
}
.cb-gen button.cb-gen__btn:hover { background: var(--beige); border-color: var(--border); }
.cb-gen button.cb-gen__btn.is-main { background: var(--blue); border-color: var(--blue); color: var(--card); }
.cb-gen button.cb-gen__btn.is-main:hover,
.cb-gen button.cb-gen__btn.is-done { background: var(--red); border-color: var(--red); color: var(--card); }

/* --- окно «из памяти» --- */
.cb-gen__modal {
  position: fixed;
  z-index: 9999;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(30, 15, 17, .35);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}
.cb-gen__pop {
  width: 640px;
  max-width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 16px 18px 20px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
}
.cb-gen__pop-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 600;
}
.cb-gen__empty { margin: 10px 0; color: var(--muted); font-size: 11px; }

.cb-gen__presets {
  display: grid;
  grid-template-columns: repeat(auto-fill, 118px);
  justify-content: center;
  gap: 16px;
}
.cb-gen__preset {
  position: relative;
  cursor: pointer;
  text-align: center;
  font-size: 10px;
  color: var(--label);
}
.cb-gen__mini {
  width: 118px;
  height: 212px;
  margin-bottom: 5px;
  overflow: hidden;
  border-radius: 13px;
  pointer-events: none;
  transition: box-shadow .2s;
}
.cb-gen__mini .cb-sms {
  --sms-w: 295px;
  --sms-h: 530px;
  max-width: none;
  margin: 0;
  transform: scale(.4);
  transform-origin: 0 0;
}
.cb-gen__preset:hover .cb-gen__mini { box-shadow: 0 0 0 2px var(--blue); }
.cb-gen__preset button.cb-gen__icon {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--card);
  box-shadow: var(--soft);
}