/*
 * KoloPlus — widgets/main/chat_picker · v1.1.3.005
 * Emoji + sticker picker for messages composer.
 */

.kp-chat-picker-anchor {
  position: relative;
}

.kp-chat-picker__panel {
  background: var(--n-bg-2);
  border: 1px solid var(--n-line);
  border-radius: var(--n-r-lg);
  box-shadow: var(--n-sh-lg);
  overflow: hidden;
}

.kp-chat-picker__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--n-s-3) var(--n-s-3);
  border-bottom: 1px solid var(--n-line-soft);
  gap: var(--n-s-2);
}

.kp-chat-picker__tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.kp-chat-picker__tab,
.kp-chat-picker__close,
.kp-chat-picker__pack {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: inherit;
  font-size: var(--n-fs);
  font-weight: var(--n-w-med);
  color: var(--n-text-soft);
  background: transparent;
  border: 1px solid var(--n-line);
  border-radius: var(--n-r-pill);
  padding: 6px 12px;
  cursor: pointer;
  transition: background var(--n-dur-base) var(--n-ease),
              color var(--n-dur-base) var(--n-ease);
}
.kp-chat-picker__tab:hover,
.kp-chat-picker__close:hover,
.kp-chat-picker__pack:hover {
  background: var(--n-bg-hover);
  color: var(--n-text);
}
.kp-chat-picker__tab.is-active,
.kp-chat-picker__pack.is-active {
  background: var(--n-accent-soft);
  color: var(--n-accent);
  border-color: transparent;
}

.kp-chat-picker__search {
  padding: var(--n-s-3);
  border-bottom: 1px solid var(--n-line-soft);
}

.kp-chat-picker__search-input {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: var(--n-fs);
  border: 1px solid var(--n-line);
  background: var(--n-bg-sunk);
  color: var(--n-text);
  border-radius: var(--n-r-md);
  padding: 9px 12px;
  outline: none;
  transition: border-color var(--n-dur-base) var(--n-ease);
}
.kp-chat-picker__search-input:focus {
  border-color: var(--n-accent);
  box-shadow: var(--n-focus-ring);
}
.kp-chat-picker__search-input::placeholder {
  color: var(--n-text-mute);
}

.kp-chat-picker__pane {
  max-height: min(400px, 46vh);
  overflow-y: auto;
  padding: var(--n-s-3);
}

.kp-chat-picker__group + .kp-chat-picker__group,
.kp-chat-picker__dynamic + .kp-chat-picker__group,
.kp-chat-picker__packs + .kp-chat-picker__stickers {
  margin-top: var(--n-s-3);
}

.kp-chat-picker__group-title {
  font-size: var(--n-fs);
  line-height: 1.2;
  font-weight: var(--n-w-bold);
  color: var(--n-text-mute);
  margin: 0 0 var(--n-s-2);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.kp-chat-picker__emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
}

.kp-chat-picker__emoji-btn {
  position: relative;
  display: grid;
  place-items: center;
  height: 42px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--n-r-md);
  font-size: 22px;
  cursor: pointer;
  padding: 0;
  transition: background var(--n-dur-base) var(--n-ease);
}
.kp-chat-picker__emoji-btn:hover {
  background: var(--n-bg-hover);
}
.kp-chat-picker__emoji-glyph { pointer-events: none; }

.kp-chat-picker__emoji-fav,
.kp-chat-picker__fav {
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--n-bg-2);
  border: 1px solid var(--n-line);
  font-size: 10px;
  line-height: 1;
  color: var(--n-text-mute);
  cursor: pointer;
  z-index: 2;
}
.kp-chat-picker__emoji-fav.is-active,
.kp-chat-picker__fav.is-active {
  color: var(--n-warn);
  background: var(--n-warn-soft);
  border-color: transparent;
}

.kp-chat-picker__packs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: var(--n-s-3);
}

.kp-chat-picker__stickers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--n-s-2);
}

.kp-chat-picker__sticker-card { position: relative; }

.kp-chat-picker__sticker {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 110px;
  width: 100%;
  border: 1px solid var(--n-line);
  background: var(--n-bg-soft);
  border-radius: var(--n-r-md);
  cursor: pointer;
  padding: var(--n-s-3);
  color: var(--n-text);
  font-family: inherit;
  transition: background var(--n-dur-base) var(--n-ease),
              border-color var(--n-dur-base) var(--n-ease);
}
.kp-chat-picker__sticker:hover {
  background: var(--n-bg-hover);
  border-color: var(--n-line-strong);
}

.kp-chat-picker__sticker-icon {
  font-size: 36px;
  line-height: 1;
}
.kp-chat-picker__sticker-label {
  font-size: var(--n-fs);
  line-height: 1.2;
  color: var(--n-text-soft);
  text-align: center;
}
.kp-chat-picker__sticker-pack {
  font-size: var(--n-fs);
  line-height: 1.1;
  color: var(--n-text-mute);
  text-align: center;
}

.kp-chat-picker__dynamic[hidden] { display: none !important; }

.kp-chat-picker__empty {
  padding: var(--n-s-5) var(--n-s-3);
  text-align: center;
  font-size: var(--n-fs);
  color: var(--n-text-mute);
}

/* ── Sticker rendered in message bubble ──────────────────── */
.kp-msg-text--sticker { padding: 4px 0 2px; }

.kp-msg-sticker {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--n-s-3) var(--n-s-4);
  border-radius: var(--n-r-lg);
  background: var(--n-bg-soft);
  border: 1px solid var(--n-line);
  min-width: 120px;
}
.kp-msg-sticker__icon {
  font-size: 48px;
  line-height: 1;
}
.kp-msg-sticker__label {
  font-size: var(--n-fs);
  line-height: 1.2;
  font-weight: var(--n-w-sem);
  color: var(--n-text);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .kp-chat-picker__emoji-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .kp-chat-picker__stickers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}