/* compose-emoji.css — кнопка эмодзи внутри поля + НОВОЕ поле ввода */

.ct-input-wrap{
  position: relative;
  flex: 1 1 auto;
  display:flex;
  align-items:flex-end;
  min-width: 0; /* важно, иначе будет распирать в ширину */
}

/* ✅ поле ввода: до 5 строк, дальше внутренний скролл */
.ct-input-rich{
  width: 100%;
  max-width: 100%;
  min-width: 0;

  min-height: 42px;
  height: auto;

  line-height: 1.35;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);

  padding: 10px 42px 10px 12px; /* место под 😊 */
  outline: none;

  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;

  overflow-y: auto;
  overflow-x: hidden;

  display:block;
  cursor:text;

  -webkit-user-select:text;
  user-select:text;

  -webkit-overflow-scrolling: touch;

  /* 5 строк: 5*line-height + padding (примерно) */
  max-height: calc(1.35em * 5 + 20px);

  scrollbar-width: none;
}
.ct-input-rich::-webkit-scrollbar{ display:none; }

/* placeholder для contenteditable */
.ct-input-rich:empty::before{
  content: attr(data-placeholder);
  color: var(--muted);
  opacity: .9;
}

/* фокус */
.ct-input-rich:focus{
  border-color: color-mix(in oklab, var(--brand, #0ea5e9), var(--border) 55%);
}

/* ✅ старый input прячем, когда включили rich */
.ct-input-wrap.has-rich #ctInput{
  position:absolute !important;
  left: -99999px !important;
  top: -99999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* кнопка 😊 */
.ct-emoji-btn{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor:pointer;
  display:grid;
  place-items:center;
  font-weight: 900;
  z-index: 4;
}
#ctEmojiBtn{ right: 6px; }

.ct-emoji-btn:hover{
  border-color: color-mix(in oklab, var(--brand, #0ea5e9), var(--border) 55%);
}

/* ✅ Twemoji везде inline, чтобы не становилось “столбиком” */
img.emoji{
  display:inline-block !important;
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.14em;
}