/* Emoji picker overlay — app-wide (long-term goal tabs, popups, sidebar, calendar).
 * The picker body is the vendored <emoji-picker> custom element; everything below
 * is the floating shell around it plus the theme bridge into its shadow DOM. */

.emoji-picker-overlay {
  position: fixed;
  inset: 0;
  pointer-events: auto;
  z-index: 3000;
}

.emoji-picker {
  position: absolute;
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  pointer-events: auto;
  z-index: 1;
}

/* The custom element only exposes styling through these custom properties —
 * map them onto the app's theme variables so the picker follows the active theme. */
.emoji-picker emoji-picker {
  width: min(360px, 92vw);
  height: min(440px, 80vh);

  --background: var(--card);
  --border-color: var(--border-subtle);
  --button-active-background: var(--tab-active-bg);
  --button-hover-background: var(--border-subtle);
  --category-font-color: var(--text-muted);
  --category-font-size: 12px;
  --indicator-color: var(--accent);
  --input-border-color: var(--border-subtle);
  --input-border-radius: 6px;
  --input-font-color: var(--text-primary);
  --input-font-size: 14px;
  --input-placeholder-color: var(--text-muted);
  --outline-color: var(--accent);
  --num-columns: 8;
  --emoji-size: 1.35rem;
}