/* Sticker picker (toolbar popup) and sticker album management on /cai-dat-tuivoz. */

.sticker-picker { display: flex; flex-direction: column; gap: 8px; width: 100%; min-width: 0; --sticker-cell: 72px; --sticker-rows: 2; }
/* The shared panel is a wrapping flex row built for inline inputs; the sticker
   picker needs the full width and its own vertical stack. */
.editor-panel[data-panel-kind="stickers"] { display: block; padding: 10px; }
/* The picker is a fixed-height column sized to exactly two sticker rows: tabs
   and footer keep their intrinsic size and the grid scrolls, so a long album
   never stretches the panel. `--sticker-cell` is the row height. */
.editor-panel[data-panel-kind="stickers"] .sticker-picker { width: 100%; height: auto; max-height: 90vh; }
.sticker-tabs { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 6px; overflow-x: auto; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
/* editor.css sets `font: inherit` on every `.rich-editor button` and a generic
   `.editor-panel button` padding, both more specific than a bare `.sticker-*`
   class, so every picker control must be scoped to the sticker panel. */
.editor-panel[data-panel-kind="stickers"] .sticker-tab {
  width: auto; height: auto; padding: 5px 10px;
  border: 1px solid var(--border); border-radius: 3px;
  background: var(--content-bg-alt); color: var(--text);
  font: inherit; font-size: calc(12px * var(--ui-scale)); line-height: 1.4; cursor: pointer; white-space: nowrap;
}
.editor-panel[data-panel-kind="stickers"] .sticker-tab:hover { border-color: var(--link); color: var(--link); }
.editor-panel[data-panel-kind="stickers"] .sticker-tab.is-active { background: var(--link); border-color: var(--link); color: var(--on-accent); font-weight: var(--fw-bold); }
.sticker-grid { display: grid; grid-auto-rows: var(--sticker-cell); align-content: start; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; overflow-y: auto; flex: 0 0 auto; padding: 2px; height: calc(var(--sticker-cell) * var(--sticker-rows) + 8px * (var(--sticker-rows) - 1) + 4px); }
.sticker-empty { grid-column: 1 / -1; margin: 10px 2px; color: var(--dimmed); font-size: calc(13px * var(--ui-scale)); line-height: 1.6; }
.sticker-foot { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--border); padding-top: 6px; font-size: calc(12px * var(--ui-scale)); }
.sticker-status { color: var(--dimmed); }
.sticker-manage { color: var(--link); }

.sticker-item { position: relative; display: flex; min-width: 0; }
.editor-panel[data-panel-kind="stickers"] .sticker-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 72px; padding: 4px; border: 2px solid var(--border); border-radius: 5px; background: transparent; cursor: pointer; transition: border-color .15s, transform .15s; }
.editor-panel[data-panel-kind="stickers"] .sticker-btn:hover { border-color: var(--link); transform: scale(1.05); }
.sticker-btn img { max-width: 100%; max-height: 100%; object-fit: contain; }
.editor-panel[data-panel-kind="stickers"] .sticker-remove { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; padding: 0; border: 2px solid var(--content-bg); border-radius: 50%; background: #f44336; color: #fff; font-size: calc(11px * var(--ui-scale)); font-weight: var(--fw-bold); line-height: 1; cursor: pointer; opacity: .75; }
.editor-panel[data-panel-kind="stickers"] .sticker-remove:hover { opacity: 1; }
/* Icon-only clear button: a compact square that sits at the end of the grid, so it
   does not stretch into a full-width row the way a labelled button did. */
.editor-panel[data-panel-kind="stickers"] .sticker-clear-all { justify-self: end; width: 26px; height: 26px; min-width: 0; margin-top: 2px; padding: 0; border-radius: 4px; background: transparent; font-size: calc(13px * var(--ui-scale)); line-height: 1; }
.editor-panel[data-panel-kind="stickers"] .sticker-clear-all:hover { background: var(--danger-bg); border-color: var(--danger-text-strong); }

/* Settings: album table. */
.sticker-album-list { list-style: none; margin: 0 0 12px; padding: 0; }
.sticker-album-row { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid var(--border); }
.sticker-album-row.is-dragging { opacity: .5; }
.sticker-album-row.is-drop-before { border-top: 2px solid var(--link); }
.sticker-album-row.is-drop-after { border-bottom: 2px solid var(--link); }
.sticker-album-empty { padding: 12px 4px; color: var(--dimmed); }
.sticker-album-preview { flex: 0 0 40px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 3px; background: var(--quote-bg); }
.sticker-album-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sticker-album-select { flex: 0 0 auto; display: flex; align-items: center; }
.sticker-export svg { display: block; }
.sticker-badge { display: inline-block; padding: 1px 5px; border-radius: 3px; color: #fff; font-size: calc(11px * var(--ui-scale)); }
.sticker-badge--imgur { background: #4caf50; }
.sticker-badge--pikvn { background: #ff6b6b; }
.sticker-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.sticker-form { margin: 0 0 16px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--quote-bg); }
.sticker-progress { margin: 6px 0; color: var(--dimmed); font-size: calc(13px * var(--ui-scale)); }
.sticker-progress:not(.is-error) { color: var(--link); }

.sticker-recent-preview { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.sticker-recent-item { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 1px solid var(--border); border-radius: 4px; background: var(--quote-bg); }
.sticker-recent-item img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Album image manager (Sửa album sticker). The grid also appears inside .modal-body, so it
   must not bring its own background. */
.sticker-images-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; max-height: 50vh; overflow-y: auto; margin: 6px 0 4px; padding: 4px; }
.sticker-images-cell { position: relative; display: flex; align-items: center; justify-content: center; height: 84px; padding: 6px; border: 2px solid var(--border); border-radius: 5px; cursor: grab; background: var(--quote-bg); }
.sticker-images-cell.is-dragging { opacity: .5; }
.sticker-images-cell.is-drop-target { border-color: var(--link); background: var(--surface-hover); box-shadow: inset 0 0 0 1px var(--link); }
.sticker-images-cell img { max-width: 100%; max-height: 100%; object-fit: contain; pointer-events: none; }
.sticker-image-move-controls { display: none; }
.sticker-images-cell .sticker-remove { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: var(--danger-text); color: #fff; font-size: calc(11px * var(--ui-scale)); line-height: 1; cursor: pointer; opacity: 0; transition: opacity .12s; }
.sticker-images-cell:hover .sticker-remove,
.sticker-images-cell:focus-within .sticker-remove { opacity: 1; }
/* No hover on touch: the ✕ has to be permanently visible or the image cannot be removed. */
@media (hover: none), (max-width: 620px) {
  .sticker-images-cell .sticker-remove { opacity: 1; }
  .sticker-image-move-controls {
    position: absolute;
    right: 2px;
    bottom: 2px;
    display: flex;
    gap: 2px;
  }
  .sticker-image-move {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--surface);
    color: var(--text);
    line-height: 1;
    cursor: pointer;
  }
  .sticker-image-move:disabled { opacity: .4; }
}
.sticker-images-index { position: absolute; bottom: -6px; left: -6px; min-width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; padding: 0 4px; border-radius: 9px; background: var(--link); color: var(--on-accent); font-size: calc(10px * var(--ui-scale)); font-weight: var(--fw-bold); }
/* The editor modal must be wider than the default 560px: it holds the image grid. */
.sticker-editor-modal { max-width: 780px; }
.sticker-editor-modal .sticker-images-count { margin-left: 8px; padding: 1px 9px; border-radius: 12px; background: var(--link); color: var(--on-accent); font-size: calc(11px * var(--ui-scale)); font-weight: var(--fw-bold); }

@media (max-width: 620px) {
  .sticker-picker { width: calc(100vw - 24px); --sticker-cell: 60px; }
  .sticker-grid { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); }
  .editor-panel[data-panel-kind="stickers"] .sticker-btn { height: 60px; }
  .sticker-album-row { flex-wrap: nowrap; gap: 4px; }
  .sticker-album-row .button--small { min-width: 26px; padding: 4px; }
  .sticker-images-grid { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }
}