/* Стикеры */
.stk-panel { display: flex; flex-direction: column; gap: 10px; }
.stk-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.stk-panel-head h2 { margin: 0; font-size: var(--fs-lg); }

/* Наборы стикеров — вкладки-закладки сайта (.tabs), компактнее. */
.stk-tabs { margin-bottom: var(--sp-2); }
.stk-tabs .tab { min-height: var(--h-md); font-size: var(--fs-ui); }

.stk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
.stk-cell { position: relative; aspect-ratio: 1; display: grid; place-items: center; padding: 4px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; font: inherit; }
.stk-cell:hover, .stk-cell:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.stk-cell img { max-width: 100%; max-height: 100%; object-fit: contain; pointer-events: none; }
.stk-empty { margin: 0; }

.stk-picker { width: min(300px, 80vw); max-height: 260px; overflow: auto; }
.stk-picker .stk-grid { grid-template-columns: repeat(4, 1fr); }
.stk-pop-wrap { position: relative; display: inline-flex; }
.stk-pop { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 20; padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.stk-pop[hidden] { display: none; }
.stk-pop-link { display: inline-block; margin-top: 8px; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: var(--fs-sm); cursor: pointer; text-decoration: underline; }
.stk-btn { border: 0; background: none; cursor: pointer; font: inherit; font-size: var(--fs-xl); line-height: 1; padding: 6px; color: inherit; }

/* Стикер в переписке: без пузыря */
.chat .chat-msg.stk-msg .chat-bubble { background: none; border: 0; box-shadow: none; padding: 0; }
.stk-msg .chat-meta { color: var(--muted); }
.stk-chat-img { display: block; width: 120px; height: 120px; object-fit: contain; }
.stk-gone { display: block; padding: 8px 12px; border: 1px dashed var(--border); border-radius: var(--radius); }

/* Менеджер */
.stk-manager { display: flex; flex-direction: column; gap: 14px; }
.stk-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.stk-pack { margin-bottom: 14px; }
.stk-pack-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.stk-pack-name { font: inherit; font-weight: 600; max-width: 260px; }
.stk-item { cursor: default; }
.stk-del { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; line-height: 1; background: var(--surface); border-radius: 50%; }
.stk-del:hover { color: var(--bad); }

/* Редактор нарезки */
.stk-cutter { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.stk-modes, .stk-actions, .stk-controls { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.stk-controls[hidden] { display: none; }
.stk-controls input[type='number'] { width: 70px; }
.stk-check { display: inline-flex; align-items: center; gap: 4px; }
.stk-canvas-wrap { overflow: auto; text-align: center; }
.stk-canvas { max-width: 100%; border: 1px solid var(--border); background-color: var(--checker-bg); background-image: linear-gradient(45deg, var(--checker) 25%, transparent 25%, transparent 75%, var(--checker) 75%), linear-gradient(45deg, var(--checker) 25%, transparent 25%, transparent 75%, var(--checker) 75%); background-size: 16px 16px; background-position: 0 0, 8px 8px; touch-action: none; }
.stk-canvas.stk-manual { cursor: crosshair; }
.stk-sel-list { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.stk-sel { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px 2px 8px; border: 1px solid var(--border); border-radius: var(--radius); font-size: var(--fs-sm); }

/* Большая анимация */
.stk-burst { position: fixed; inset: 0; width: 100vw; height: 100vh; margin: 0; padding: 0; border: 0; background: none; overflow: visible; display: grid; place-items: center; pointer-events: none; z-index: 10000; }
.stk-burst-img { width: min(60vmin, 360px); height: min(60vmin, 360px); object-fit: contain; filter: drop-shadow(0 8px 18px var(--shade-sticker)); animation: stk-burst 2.4s ease-out forwards; }
@keyframes stk-burst {
  0% { transform: scale(0.1); opacity: 0; }
  14% { transform: scale(1.18); opacity: 1; }
  22% { transform: scale(0.94); }
  30% { transform: scale(1.04); }
  38% { transform: scale(1); }
  83% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .stk-burst-img { animation: stk-fade 1.8s ease-out forwards; }
  @keyframes stk-fade { 0% { opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
}