/**
 * karin-deco-slots.css — 装饰槽位系统
 *
 * 给可宿主元素(会话列表项 / 消息行)各预留两个绝对定位的"装饰槽",
 * 一切外观由 CSS 变量驱动 —— 主题 / 聊天美化自定义 CSS 只塞变量即可
 * 贴贴纸、角标、印花、光斑,不需要改任何 DOM 与组件代码。
 *
 * 不塞变量 = 槽位完全不可见(width 0、无背景、无内容),零默认影响。
 *
 * ── 用法示例(贴进「聊天美化 → 自定义 CSS」)────────────────
 *   .qq-chat-item {
 *     --deco-1-content: '🎀';
 *     --deco-1-top: -6px;  --deco-1-right: 8px;
 *     --deco-1-font-size: 16px;  --deco-1-transform: rotate(12deg);
 *   }
 *   .qq-room__row--them .qq-room__bubble-wrap {
 *     --deco-1-image: linear-gradient(#ffd9a0, #ffadc0);  …
 *   }
 * 变量名统一 --deco-1-* / --deco-2-*,完整字段见下方槽位定义。
 * ─────────────────────────────────────────────────────────────
 */

/* 宿主:槽位的包含块。这两个选择器内部原本没有绝对定位后代,
   提升 relative 无副作用。 */
.qq-chat-item,
.qq-room__row {
  position: relative;
}

/* 槽位本体:背景图层 */
.qq-chat-item .karin-deco,
.qq-room__row .karin-deco {
  position: absolute;
  pointer-events: none;
  box-sizing: border-box;
  top: var(--deco-1-top, auto);
  left: var(--deco-1-left, auto);
  right: var(--deco-1-right, auto);
  bottom: var(--deco-1-bottom, auto);
  width: var(--deco-1-width, auto);
  height: var(--deco-1-height, auto);
  background: var(--deco-1-bg, transparent);
  background-image: var(--deco-1-image, none);
  background-size: var(--deco-1-size, contain);
  background-position: var(--deco-1-position, center);
  background-repeat: var(--deco-1-repeat, no-repeat);
  border: var(--deco-1-border, none);
  border-radius: var(--deco-1-radius, 0);
  box-shadow: var(--deco-1-shadow, none);
  opacity: var(--deco-1-opacity, 1);
  z-index: var(--deco-1-z, 1);
  transform: var(--deco-1-transform, none);
  filter: var(--deco-1-filter, none);
  mix-blend-mode: var(--deco-1-mix-blend, normal);
  animation: var(--deco-1-animation, none);
  animation-delay: var(--deco-1-delay, 0s);
  font-size: var(--deco-1-font-size, 16px);
  color: var(--deco-1-color, inherit);
  line-height: 1;
}

/* 文字/emoji 贴纸走 :before —— 一槽两层:底图 + 文字 */
.qq-chat-item .karin-deco:before,
.qq-room__row .karin-deco:before {
  content: var(--deco-1-content, none);
  display: block;
  text-align: var(--deco-1-text-align, center);
  white-space: pre;
}

/* 第二槽:同构,变量前缀换成 --deco-2-*,默认 z 高一层 */
.qq-chat-item .karin-deco-2,
.qq-room__row .karin-deco-2 {
  top: var(--deco-2-top, auto);
  left: var(--deco-2-left, auto);
  right: var(--deco-2-right, auto);
  bottom: var(--deco-2-bottom, auto);
  width: var(--deco-2-width, auto);
  height: var(--deco-2-height, auto);
  background: var(--deco-2-bg, transparent);
  background-image: var(--deco-2-image, none);
  background-size: var(--deco-2-size, contain);
  background-position: var(--deco-2-position, center);
  background-repeat: var(--deco-2-repeat, no-repeat);
  border: var(--deco-2-border, none);
  border-radius: var(--deco-2-radius, 0);
  box-shadow: var(--deco-2-shadow, none);
  opacity: var(--deco-2-opacity, 1);
  z-index: var(--deco-2-z, 2);
  transform: var(--deco-2-transform, none);
  filter: var(--deco-2-filter, none);
  mix-blend-mode: var(--deco-2-mix-blend, normal);
  animation: var(--deco-2-animation, none);
  animation-delay: var(--deco-2-delay, 0s);
  font-size: var(--deco-2-font-size, 16px);
  color: var(--deco-2-color, inherit);
}

.qq-chat-item .karin-deco-2:before,
.qq-room__row .karin-deco-2:before {
  content: var(--deco-2-content, none);
  text-align: var(--deco-2-text-align, center);
}