/* /public/styles/chat/picker.css */
/* picker.css — панель эмодзи/стикеров (категории/поиск/сетка/низ) */

.ct-picker[hidden]{ display:none !important; }

/* ─────────────────────────────────────────────
   ✅ КРИТИЧЕСКИЙ FIX: чтобы picker НЕ "выталкивался" вниз
   Причина: flex-item без min-height:0 не сжимается и ломает layout
───────────────────────────────────────────── */
.ct-panel{ min-height: 0; }
.ct-chat{
  min-height: 0 !important;
  height: 100% !important;
  /* relative НЕ обязателен, но не мешает */
  position: relative !important;
  flex: 1 1 auto !important;
}
.ct-messages{
  min-height: 0 !important;
  flex: 1 1 auto !important;
}
.ct-compose{ flex: 0 0 auto !important; }
.ct-picker{
  flex: 0 0 auto !important;
  min-height: 0 !important;
}

/* контейнер панели (обычный режим) */
.ct-picker{
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding: 10px 12px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  gap: 10px;

  height: 320px;
  max-height: 42vh;
  overflow: hidden;       /* ✅ чтобы низ не "уезжал" */
}

/* верхняя лента категорий */
.ct-picker-cats{
  display:flex;
  gap: 8px;
  overflow:auto;
  padding-bottom: 4px;
  flex: 0 0 auto;
  min-height: 38px;
  align-items:center;
  -webkit-overflow-scrolling: touch;
}

.ct-picker-cat{
  flex: 0 0 auto;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  cursor:pointer;
  font-weight: 900;
  white-space: nowrap;
}
.ct-picker-cat.is-active{
  background: color-mix(in oklab, var(--brand, #0ea5e9), var(--surface) 84%);
  border-color: color-mix(in oklab, var(--brand, #0ea5e9), var(--border) 45%);
}

/* поиск */
.ct-picker-search{
  width: 100%;
  height: 40px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  padding: 0 12px;
  outline: none;
  flex: 0 0 auto;
}

/* сетка контента */
.ct-picker-grid{
  flex: 1 1 auto;
  min-height: 0;          /* ✅ MUST HAVE */
  overflow:auto;

  display:grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
  padding: 2px;

  align-content: start;   /* ✅ чтобы элементы не разъезжались */
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.ct-emoji-tile{
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  display:grid;
  place-items:center;
  touch-action: manipulation;
}

.ct-emoji-tile:hover{
  border-color: color-mix(in oklab, var(--brand, #0ea5e9), var(--border) 55%);
  background: color-mix(in oklab, var(--surface-2), #000 4%);
}

.ct-emoji-ch{
  font-size: 22px;
  line-height: 1;
}

.ct-emoji-tile img.emoji{
  width: 22px;
  height: 22px;
  display: inline-block !important;
  vertical-align: -0.12em;
}

/* секции в grid */
.ct-emoji-section{
  grid-column: 1 / -1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 6px 6px 2px;
  margin-top: 2px;

  font-weight: 900;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .35px;
  text-transform: uppercase;
}

.ct-emoji-empty{
  grid-column: 1 / -1;
  margin: 10px 0 6px;
  padding: 14px 12px;
  border-radius: 16px;
  border: 1px dashed var(--border);
  background: color-mix(in oklab, var(--surface-2), #000 3%);
  color: var(--muted);
  text-align:center;
  font-weight: 800;
}

/* нижнее меню */
.ct-picker-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  flex: 0 0 auto;
  margin-top: auto; /* ✅ всегда прижат к низу внутри picker */
}

.ct-picker-tabs{
  display:flex;
  gap: 8px;
}

.ct-picker-tab{
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor:pointer;
  font-weight: 900;
}
.ct-picker-tab.is-active{
  background: color-mix(in oklab, var(--brand, #0ea5e9), var(--surface) 84%);
  border-color: color-mix(in oklab, var(--brand, #0ea5e9), var(--border) 45%);
}

.ct-picker-gear{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor:pointer;
  font-weight: 900;
}

/* кнопки справа внизу (свернуть/закрыть) */
.ct-picker-actions{
  display:flex;
  gap: 8px;
  align-items:center;
  justify-content:flex-end;
}

.ct-picker-collapse,
.ct-picker-close{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor:pointer;
  font-weight: 900;
  display:grid;
  place-items:center;
}

.ct-picker-collapse:hover,
.ct-picker-close:hover,
.ct-picker-gear:hover{
  border-color: color-mix(in oklab, var(--brand, #0ea5e9), var(--border) 55%);
  background: color-mix(in oklab, var(--surface), #000 4%);
}

/* ─────────────────────────────────────────────
   ✅ BIG stickers grid (только для режима stickers)
   Требование: 3 карточки в ряд (НЕ 4 даже на широких)
───────────────────────────────────────────── */
.ct-picker.is-mode-stickers .ct-picker-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  padding: 10px !important;
}

/* на очень узких экранах — 2 в ряд, чтобы не было мельчения */
@media (max-width: 360px){
  .ct-picker.is-mode-stickers .ct-picker-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

.ct-picker.is-mode-stickers .ct-sticker-tile{
  border-radius: 16px;
  border: 1px solid color-mix(in oklab, var(--border), transparent 35%);
  background: color-mix(in oklab, var(--surface-2), #000 2%);
}

.ct-picker.is-mode-stickers .ct-sticker-tile img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transform: scale(1.12);
}

/* ─────────────────────────────────────────────
   ✅ Expanded режим (БЕЗ absolute!)
   - прячем сообщения
   - растягиваем picker на свободное место
   - compose остаётся внизу и НЕ перекрывает меню пикера
───────────────────────────────────────────── */
.ct-chat.is-picker-expanded .ct-messages{ display:none; }

.ct-chat.is-picker-expanded .ct-picker,
.ct-picker.is-expanded{
  flex: 1 1 auto !important;
  height: auto !important;
  max-height: none !important;
}

/* compose не превращаем в overlay */
.ct-chat.is-picker-expanded .ct-compose{
  position: static !important;
}

/* ✅ Компенсация мобильной клавиатуры (и в обычном, и в expanded) */
.ct-chat:not(.is-picker-expanded) .ct-compose,
.ct-chat:not(.is-picker-expanded) .ct-picker{
  transform: translateY(calc(-1 * max(0px, var(--ct-kb, 0px))));
}

.ct-chat.is-picker-expanded .ct-compose,
.ct-chat.is-picker-expanded .ct-picker{
  transform: translateY(calc(-1 * max(0px, var(--ct-kb, 0px))));
}

/* sticker message (в сообщениях) */
.ct-msg-sticker{
  width: 180px;
  max-width: min(220px, 56vw);
}
.ct-msg-sticker img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}