/* ==========================================================================
   Пікер емодзі — спільна панель чату і стрічки
   ==========================================================================

   Вийняв із messages.css 2 листопада 2026: замовник попросив смайлики й
   у стрічці («там, где есть возможность написать комментарий»), а поверхня
   в них одна. Два екрани з однієї панелі означають або один файл, або дві
   копії правил, які розійдуться першою ж правкою.

   Що ЛИШИЛОСЯ по місцях і чому: прив'язка панелі до кнопки. У чаті смуга
   кнопок одна й панель рахується від неї (--emo-shift:36px — ширина іконки
   фото ліворуч), у стрічці панель стоїть над полем коментаря, і зсуву в неї
   немає. Тому контейнер із position:relative і своїм --emo-shift описує
   кожен екран сам: messages.css — .chat__emoji, feed.css — .emo-host.

   Набір символів і механіка вставки — public/js/emoji.js (свій, без
   зовнішніх залежностей; причини — у докблоці того файла).
   ========================================================================== */

/* Та сама спливна панель, що бібліотека фото: рецепт .group__body з груп
   вподобань. Своїх кольорів немає — дно #141415, контур --edge-bright,
   акцент на вибраному розділі. */
.emo{
  /* Вертикаль — від кнопки (8px над смайликом), горизонталь зсунута на
     --emo-shift: у чаті це ширина іконки фото із зазором рядка, і панель
     вирівняна по лівому краю рядка кнопок, тому вміщається навіть на
     320px. Прибита до самої кнопки, вона на 390px виходила за екран на
     10px (заміряно). */
  position:absolute;z-index:14;left:calc(-1 * var(--emo-shift,0px));bottom:calc(100% + 8px);
  /* Стеля ширини враховує і зсув: на 320px панель інакше впиралася в
     правий край екрана (заміряно --w=320). */
  width:330px;max-width:min(330px,calc(100vw - 2 * var(--pad) - var(--emo-shift,0px)));
  border:1px solid var(--edge-bright);background:#141415;box-shadow:0 30px 60px -30px #000;
}
.emo__tabs{display:flex;border-bottom:1px solid var(--edge)}
.emo__tab{
  flex:1;display:grid;place-items:center;padding:9px 0;
  border:none;border-bottom:2px solid transparent;background:none;cursor:pointer;
  color:rgba(242,239,233,.45);transition:color .2s var(--ease),border-color .2s var(--ease);
}
.emo__tab:hover{color:var(--cream-soft)}
.emo__tab[aria-selected="true"]{color:var(--brass);border-bottom-color:var(--brass)}
.emo__tab svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* Висота панелі обмежена, бо розділ «Смайли» довгий: інакше вона
   виносила б композер за межі екрана. */
.emo__grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));
  gap:2px;padding:8px;max-height:min(42vh,230px);overflow-y:auto;
}
.emo__item{
  aspect-ratio:1;padding:0;border:none;border-radius:2px;background:none;cursor:pointer;
  font-size:21px;line-height:1;transition:background .15s var(--ease);
}
.emo__item:hover{background:#242426}
.emo__item:focus-visible{outline:2px solid var(--signal);outline-offset:-2px}