/* Smooth HTMX transitions */
.htmx-settling {
  opacity: 0.8;
}
.htmx-swapping {
  opacity: 0.5;
  transition: opacity 0.15s ease-out;
}
.htmx-added {
  opacity: 0;
}
.htmx-added.htmx-settling {
  opacity: 1;
  transition: opacity 0.3s ease-in;
}

/* Inline edit highlight */
.inline-edit:focus-within {
  outline: 2px solid #4170ed;
  outline-offset: 2px;
  border-radius: 0.5rem;
}

/* Toast notification */
.toast {
  animation: toast-in 0.3s ease-out, toast-out 0.3s ease-in 2.7s forwards;
}
@keyframes toast-in {
  from { transform: translateY(1rem); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes toast-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Telegram HTML WYSIWYG placeholder */
.telegram-html-editor-editable[data-empty][data-placeholder]:before {
  content: attr(data-placeholder);
  color: #94a3b8;
  pointer-events: none;
  position: absolute;
  left: 0.75rem;
  top: 0.75rem;
}

/* Убираем «лестницу» отступов: браузер вставляет div/p при Enter — без вертикальных margin как у абзацев */
.telegram-html-editor-editable.telegram-html-editor-body {
  position: relative;
  margin: 0;
  min-height: 1.25em;
}
.telegram-html-editor-editable.telegram-html-editor-body * {
  margin-top: 0;
  margin-bottom: 0;
}
.telegram-html-editor-editable.telegram-html-editor-body div,
.telegram-html-editor-editable.telegram-html-editor-body p {
  margin: 0;
  min-height: 0;
}

/* Старый вариант: внешний contenteditable + внутренний body (если где-то останется) */
.telegram-html-editor-editable .telegram-html-editor-body {
  margin: 0;
  min-height: 1.25em;
}
.telegram-html-editor-editable .telegram-html-editor-body * {
  margin-top: 0;
  margin-bottom: 0;
}
.telegram-html-editor-editable .telegram-html-editor-body div,
.telegram-html-editor-editable .telegram-html-editor-body p {
  margin: 0;
  min-height: 0;
}

/* Превью сообщений как в Telegram (HTML из бота) */
.telegram-preview-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  margin-bottom: 0.35rem;
}
.telegram-preview-note {
  font-size: 0.75rem;
  color: #64748b;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}
.telegram-html-preview-frame {
  font-size: 0.9375rem;
  line-height: 1.45;
  color: #0f172a;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  max-width: 28rem;
}
.telegram-html-preview-frame a {
  color: #2488cc;
  text-decoration: none;
}
.telegram-html-preview-frame a:hover {
  text-decoration: underline;
}
.telegram-html-preview-frame b,
.telegram-html-preview-frame strong {
  font-weight: 600;
}
.telegram-html-preview-frame i,
.telegram-html-preview-frame em {
  font-style: italic;
}
.telegram-html-preview-frame code {
  font-size: 0.875em;
  background: #f1f5f9;
  padding: 0.1em 0.35em;
  border-radius: 0.25rem;
}