/* fix3 P2: emoji panel (community composers). Theme-token based so it
 * follows light/dark like every other panel. */
.emoji-panel {
  position: fixed;
  z-index: 10050;
  width: min(324px, calc(100vw - 16px));
  max-height: 264px;
  overflow-y: auto;
  padding: 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(2, 10, 20, .42);
  opacity: 0;
  transform: translateY(6px) scale(.98);
  pointer-events: none;
  transition: opacity .18s ease, transform .22s cubic-bezier(.32, 1.28, .36, 1);
}
.emoji-panel.open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  padding: 4px 0;
}
.emoji-grid + .emoji-grid { border-top: 1px solid var(--border); }
.emoji-cell {
  appearance: none;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 22px;
  line-height: 1.25;
  padding: 5px 0;
  border-radius: 10px;
  text-align: center;
}
.emoji-cell:hover, .emoji-cell:active { background: var(--hover, rgba(127, 147, 179, .16)); }
.emoji-btn {
  appearance: none;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--muted, #8fa3bd);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex: 0 0 auto;
  padding: 0;
}
.emoji-btn:hover { color: var(--text); background: var(--hover, rgba(127, 147, 179, .16)); }

/* fix5: tabbed panel (common / brand / faces / hands / hearts / fun),
 * image cells for token emoji, inline rendered size, credit line. */
.emoji-panel { display: flex; flex-direction: column; max-height: min(420px, 60vh); overflow: hidden; padding: 0; }
.emoji-tabs { display: flex; gap: 2px; padding: 8px 8px 0; flex-wrap: wrap; }
.emoji-tab {
  appearance: none; border: none; background: none; cursor: pointer;
  color: var(--muted, #8fa3bd); font: inherit; font-size: 12.5px; font-weight: 700;
  padding: 6px 9px; border-radius: 999px;
}
.emoji-tab:hover { color: var(--text); }
.emoji-tab.active { background: var(--accent-grad, linear-gradient(120deg, #6c5ce7, #00cec9)); color: #fff; }
.emoji-body { overflow-y: auto; padding: 4px 10px 8px; }
.emoji-cell.img { display: flex; align-items: center; justify-content: center; }
.emoji-cell.img img { width: 26px; height: 26px; pointer-events: none; }
.emoji-credit { padding: 6px 12px 8px; font-size: 10.5px; color: var(--muted, #8fa3bd); border-top: 1px solid var(--border); }
.eg-emo { width: 1.3em; height: 1.3em; vertical-align: -0.28em; }

/* fix6: live composer preview strip (emoji-panel.js) — renders the
 * in-progress input through rich(), same as the published surfaces. */
.emoji-preview {
  margin-top: 8px; padding: 9px 12px;
  background: var(--panel2, rgba(127,147,179,.08));
  border: 1px dashed var(--border);
  border-radius: 12px;
  font-size: 14.5px; line-height: 1.55; color: var(--text);
  word-break: break-word; white-space: pre-wrap;
  max-height: 120px; overflow-y: auto;
}

/* fix8: above .compose-back (240) and modals; bottom sheet on phones */
.emoji-panel.sheet { width: 100vw; max-height: min(360px, 50vh); border-radius: 18px 18px 0 0; padding-bottom: env(safe-area-inset-bottom, 0); }