/* CSS Variables for theming */
.emote-picker-wrap {
  --ep-bg: #fff;
  --ep-bg-hover: #f8f8f8;
  --ep-bg-item-hover: #e3f2fd;
  --ep-border: #e0e0e0;
  --ep-border-light: #f0f0f0;
  --ep-text: #333;
  --ep-text-muted: #666;
  --ep-text-dim: #999;
  --ep-input-bg: #fafafa;
  --ep-accent: #1E88E5;
  --ep-btn-bg: #f0f0f0;
  --ep-btn-hover: #e0e0e0;
  --ep-tip-bg: #333;
  --ep-tip-color: #fff;
  --ep-shadow: 0 -4px 16px rgba(0,0,0,0.12);
  --ep-scrollbar: #ccc;
  position: relative; display: inline-block;
}

/* Dark theme auto-detection */
.emote-picker-wrap.ep-dark {
  --ep-bg: #1e1e1e;
  --ep-bg-hover: #2a2a2a;
  --ep-bg-item-hover: #1a3a5c;
  --ep-border: #3a3a3a;
  --ep-border-light: #2a2a2a;
  --ep-text: #e0e0e0;
  --ep-text-muted: #aaa;
  --ep-text-dim: #777;
  --ep-input-bg: #2a2a2a;
  --ep-btn-bg: #2a2a2a;
  --ep-btn-hover: #3a3a3a;
  --ep-tip-bg: #555;
  --ep-tip-color: #fff;
  --ep-shadow: 0 -4px 16px rgba(0,0,0,0.4);
  --ep-scrollbar: #555;
}

.emote-picker-btn {
  width: 32px; height: 32px; border: none; border-radius: 6px;
  background: var(--ep-btn-bg); cursor: pointer; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.emote-picker-btn:hover { background: var(--ep-btn-hover); }
.emote-picker-btn.active { background: var(--ep-accent); color: #fff; }

.emote-panel {
  display: none; position: absolute; bottom: 100%; left: 0;
  width: 570px; height: 400px; background: var(--ep-bg);
  border: 1px solid var(--ep-border); border-radius: 10px;
  box-shadow: var(--ep-shadow);
  flex-direction: column; overflow: visible;
  z-index: 9999; margin-bottom: 6px;
}
.emote-panel.open { display: flex; }
.emote-panel.pos-top { bottom: auto; top: 100%; margin-top: 6px; margin-bottom: 0; }

.emote-panel-header {
  display: flex; align-items: center; padding: 8px 10px; gap: 6px;
  border-bottom: 1px solid var(--ep-border-light);
  border-radius: 10px 10px 0 0; background: var(--ep-bg);
  flex-shrink: 0;
}
.emote-panel-search {
  flex: 1; padding: 5px 10px; border: 1px solid var(--ep-border); border-radius: 6px;
  font-size: 13px; outline: none; background: var(--ep-input-bg); color: var(--ep-text);
}
.emote-panel-search:focus { border-color: var(--ep-accent); background: var(--ep-bg); }


.emote-panel-grid {
  flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 4px; align-content: start;
  border-radius: 0 0 10px 10px; background: var(--ep-bg);
  scrollbar-width: thin;
}
.emote-panel-grid::-webkit-scrollbar { width: 6px; }
.emote-panel-grid::-webkit-scrollbar-thumb { background: var(--ep-scrollbar); border-radius: 0; }
.emote-panel-grid::-webkit-scrollbar-track { background: transparent; }
.emote-panel-item {
  width: 52px; height: 52px; padding: 4px; border-radius: 6px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.12s; position: relative;
}
.emote-panel-item:hover { background: var(--ep-bg-item-hover); transform: scale(1.12); }
.emote-panel-item img { width: 40px; height: 40px; object-fit: contain; pointer-events: none; }
/* Shared tooltip (lives on wrap, not inside grid) */
.ep-tooltip {
  position: absolute; pointer-events: none; z-index: 99999;
  background: var(--ep-tip-bg); color: var(--ep-tip-color);
  padding: 3px 10px; border-radius: 4px; font-size: 11px; white-space: nowrap;
  transform: translateX(-50%);
}

.emote-section-header {
  grid-column: 1/-1; font-size: 12px; font-weight: 600; color: var(--ep-accent);
  padding: 8px 4px 4px; margin-top: 2px;
  border-bottom: 1px solid var(--ep-border-light);
}
.emote-section-header:first-child { margin-top: 0; padding-top: 4px; }

.emote-panel-empty {
  grid-column: 1/-1; text-align: center; color: var(--ep-text-dim); padding: 20px 0; font-size: 13px;
}

/* Rich editor (contenteditable overlay for textarea) */
.emote-rich-editor {
  font-size: 14px; line-height: 22px; color: inherit;
  cursor: text; position: relative;
}
.emote-rich-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--ep-text-dim, #999); pointer-events: none;
}
div.emote-rich-editor img.emote-inline-editor {
  width: 28px !important; height: 28px !important; vertical-align: middle; margin: 0 2px;
  display: inline-block !important; cursor: default; object-fit: contain;
}

/* Emote display in messages */
img.emote-inline { width: 28px; height: 28px; vertical-align: middle; margin: 0 1px; }
img.emote-medium { width: 80px; height: 80px; object-fit: contain; display: inline-block; vertical-align: middle; margin: 2px; }
img.emote-large { width: 120px; height: 120px; object-fit: contain; display: block; margin: 4px 0; }