/* ============================================================
   KOMPAKT EMOJI SEÇİCİ — Discord stili
   Karanlık tema varsayılan, html[data-theme="light"] uyumlu.
   ============================================================ */

.rc-emoji-picker{
  /* Tema değişkenleri — global theme.css üzerinden */
  --ep-bg:var(--popout-bg);
  --ep-bg-alt:var(--popout-inner);
  --ep-hover:var(--hover);
  --ep-text:var(--text);
  --ep-muted:var(--muted);
  --ep-border:var(--border);
  --ep-accent:var(--accent);

  position:fixed;
  z-index:10000;
  display:none;
  flex-direction:column;
  width:340px;
  max-height:340px;
  background:var(--ep-bg);
  border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  overflow:hidden;
  font-family:inherit;
  color:var(--ep-text);
  transform-origin:top left;
}

/* Açılış animasyonu */
.rc-emoji-picker.anim{
  animation:rc-ep-in .12s ease-out;
}
@keyframes rc-ep-in{
  from{ opacity:0; transform:scale(.95); }
  to{ opacity:1; transform:scale(1); }
}

/* --- Arama --- */
.rc-ep-search{
  padding:8px;
  flex:0 0 auto;
}
.rc-ep-search-input{
  width:100%;
  box-sizing:border-box;
  background:var(--ep-bg-alt);
  border:none;
  outline:none;
  border-radius:6px;
  padding:8px 10px;
  color:var(--ep-text);
  font-size:13px;
}
.rc-ep-search-input::placeholder{ color:var(--ep-muted); }

/* --- Gövde: sol şerit + grid --- */
.rc-ep-body{
  display:flex;
  flex:1 1 auto;
  min-height:0;
}

/* Sol dikey kategori şeridi — Discord: 48px genislik */
.rc-ep-rail{
  flex:0 0 48px;
  width:48px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:8px;
  background:var(--ep-bg-alt);
  overflow-y:auto;
}
.rc-ep-rail-btn{
  width:32px;
  height:32px;
  border:none;
  background:transparent;
  border-radius:4px;
  font-size:17px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:.7;
  transition:background .1s ease-in-out, opacity .1s;
}
.rc-ep-rail-btn:hover{ background:var(--ep-hover); opacity:1; }
.rc-ep-rail-btn.active{
  opacity:1;
  background:var(--ep-hover);
  box-shadow:inset 2px 0 0 var(--ep-accent);
}

/* --- Emoji grid (kaydırılabilir) --- */
.rc-ep-grid{
  flex:1 1 auto;
  overflow-y:auto;
  padding:0 6px 6px;
}

.rc-ep-section{ margin-top:6px; }
/* Discord kategori basligi: 12px, uppercase, semibold */
.rc-ep-section-title{
  position:sticky;
  top:0;
  z-index:1;
  background:var(--ep-bg);
  padding:6px 2px 4px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--ep-muted);
}
.rc-ep-section-grid{
  display:grid;
  grid-template-columns:repeat(8, 1fr);
}

/* Tek emoji hücresi — Discord: ~40px hücre, 4px radius, emoji ~28px */
.rc-ep-emoji{
  width:100%;
  aspect-ratio:1 / 1;
  min-height:40px;
  border:none;
  background:transparent;
  border-radius:4px;
  font-size:24px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  transition:background .08s, transform .08s;
}
.rc-ep-emoji:hover{
  background:var(--ep-hover);
  transform:scale(1.12);
}

.rc-ep-empty{
  padding:24px 12px;
  text-align:center;
  color:var(--ep-muted);
  font-size:13px;
}

/* --- Alt önizleme --- */
.rc-ep-preview{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  background:var(--ep-bg-alt);
  border-top:1px solid var(--ep-border);
  min-height:24px;
}
.rc-ep-prev-emoji{ font-size:24px; line-height:1; }
.rc-ep-prev-name{
  font-size:13px;
  font-weight:600;
  color:var(--ep-text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.rc-ep-prev-emoji:empty + .rc-ep-prev-name{ color:var(--ep-muted); font-weight:400; }

/* --- İnce scrollbar --- */
.rc-ep-grid::-webkit-scrollbar,
.rc-ep-rail::-webkit-scrollbar{ width:8px; }
.rc-ep-grid::-webkit-scrollbar-thumb,
.rc-ep-rail::-webkit-scrollbar-thumb{
  background:var(--ep-bg-alt);
  border-radius:4px;
}
.rc-ep-grid::-webkit-scrollbar-thumb{ background:var(--scrollbar); }
.rc-ep-grid{ scrollbar-width:thin; scrollbar-color:var(--scrollbar) transparent; }
.rc-ep-rail{ scrollbar-width:none; }