/* main/sticker_picker — панель вибору стікера.
   Канонні примітиви (`.kp-btn`) не дублюємо: тут лише те, чого в них немає. */
.kp-sticker-picker { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.kp-sticker-picker[hidden] { display: none; }
.kp-sticker-picker__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.kp-sticker-picker__dialog {
  position: relative; width: min(560px, 100%); max-height: 70vh; display: flex; flex-direction: column;
  background: var(--kp-color-surface, #fff); color: var(--kp-color-text, #11213a);
  border: 1px solid var(--kp-color-border, #dfe6f0);
  border-radius: var(--kp-radius-lg, 14px) var(--kp-radius-lg, 14px) 0 0;
}
@media (min-width: 720px) { .kp-sticker-picker { align-items: center; } .kp-sticker-picker__dialog { border-radius: var(--kp-radius-lg, 14px); } }
.kp-sticker-picker__head { display: flex; align-items: center; gap: var(--kp-space-2, 8px); padding: var(--kp-space-3, 12px); border-bottom: 1px solid var(--kp-color-border, #dfe6f0); }
.kp-sticker-picker__title { font-weight: 600; }
.kp-sticker-picker__close { margin-left: auto; min-width: var(--kp-touch, 44px); min-height: var(--kp-touch, 44px); }
.kp-sticker-picker__tabs { display: flex; gap: var(--kp-space-2, 8px); padding: var(--kp-space-2, 8px) var(--kp-space-3, 12px); overflow-x: auto; }
.kp-sticker-picker__tab { min-height: var(--kp-touch, 44px); padding: 0 12px; border: 1px solid var(--kp-color-border, #dfe6f0); border-radius: var(--kp-radius-sm, 8px); background: var(--kp-color-surface-muted, #f4f6fa); color: inherit; white-space: nowrap; }
.kp-sticker-picker__tab.is-active { border-color: var(--kp-accent, #106cee); color: var(--kp-accent, #106cee); }
.kp-sticker-picker__pane { display: none; overflow-y: auto; padding: var(--kp-space-3, 12px); }
.kp-sticker-picker__pane.is-active { display: block; }
.kp-sticker-picker__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--kp-space-2, 8px); }
/* Ціль не менша за канонні 44 px, а сам малюнок — 96, бо в менших написи не читаються. */
.kp-sticker-picker__item { min-width: var(--kp-touch, 44px); min-height: var(--kp-touch, 44px); padding: 4px; border: 1px solid transparent; border-radius: var(--kp-radius-sm, 8px); background: none; cursor: pointer; }
.kp-sticker-picker__item:hover, .kp-sticker-picker__item:focus-visible { border-color: var(--kp-color-border, #dfe6f0); background: var(--kp-color-surface-muted, #f4f6fa); }
.kp-sticker-picker__item img { width: 100%; height: auto; display: block; }
.kp-sticker-picker__empty { padding: var(--kp-space-5, 24px); text-align: center; color: var(--kp-color-text-muted, #5b6b84); }
/* Стікер у листуванні. Без плеєра, без підпису — сам малюнок і є повідомлення. */
.kp-msg-sticker { display: block; max-width: 160px; }
.kp-msg-sticker img { width: 100%; height: auto; display: block; }
/* Стікер у коментарі — той самий розмір і та сама стриманість, що в листуванні. */
.kp-comment-sticker { display: block; max-width: 160px; margin-bottom: var(--kp-space-2, 8px); }
.kp-comment-sticker img { width: 100%; height: auto; display: block; }

/* 1.1.7.162: порожня панель — не глухий кут. Якщо наборів немає, людина має
   побачити, куди по них іти, а не лише те, що їх немає. */
.kp-sticker-picker__empty { text-align: center; padding: 1.5rem 1rem; color: var(--n-text-dim, #6b7280); }
.kp-sticker-picker__empty p { margin: 0 0 .75rem; }
.kp-sticker-picker__shop {
  display: inline-block; padding: .5rem .9rem; border-radius: .5rem;
  background: var(--n-accent, #106cee); color: #fff; text-decoration: none; font-weight: 600;
}
.kp-sticker-picker__shop:hover { filter: brightness(1.07); }

/* .191: common trigger art for messages, comments, and the media viewer. */
[data-kp-sticker-open] { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.kp-sticker-trigger-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 0; flex-shrink: 0; }
.kp-sticker-trigger-icon svg { width: 18px; height: 18px; }

/* .196: contextual link belongs to sticker picker, not the comments/messages page. */
.kp-sticker-picker__store-link{padding:6px 12px 9px;font-size:.83rem;text-align:right}
.kp-sticker-picker__store-link a{color:var(--accent,#169e70);text-decoration:underline;text-underline-offset:2px}