/*
 * 口袋48 聊天气泡 · 通用渲染样式
 *
 * 结构：
 *   <div class="p48-bubble">
 *     <div class="p48-bubble__bg"></div>      ← 九宫格背景
 *     <div class="p48-bubble__deco"></div>    ← 可选：独立装饰图层
 *     文字…
 *   </div>
 *
 * 为什么背景要单独一层？
 *   九宫格的 border-width 会占据布局空间。如果直接给外层加 border，
 *   文字区域就被 caps 锁死了，没法单独调。
 *   拆成一层绝对定位的背景后：
 *     - caps 只负责「图怎么切、怎么拉伸」
 *     - padding 只负责「文字放在哪」
 *   两者可以分开调，这对装饰很复杂的皮肤很重要。
 */

.p48-bubble {
  position: relative;
  isolation: isolate;          /* 让内部负 z-index 只在本组件内生效 */
  display: inline-block;
  box-sizing: border-box;
  max-width: 100%;
  vertical-align: top;

  /* 文字区域，由 JS 写入，和九宫格 caps 解耦 */
  padding: var(--pad-top, 0px) var(--pad-right, 0px) var(--pad-bottom, 0px) var(--pad-left, 0px);

  font-size: var(--font-size, 15px);
  line-height: var(--line-height, 1.4);
  color: var(--text-color, #000);
  white-space: pre-wrap;
  overflow-wrap: anywhere;

  /* 防止气泡比九宫格还小，把图压扁 */
  min-width: var(--min-width, 0px);
  min-height: var(--min-height, 0px);
}

.p48-bubble__bg {
  position: absolute;
  inset: 0;
  z-index: -2;

  border-style: solid;
  border-width: var(--cap-top) var(--cap-right) var(--cap-bottom) var(--cap-left);
  border-image-source: var(--img);
  border-image-slice: var(--slice);
  border-image-width: var(--cap-top) var(--cap-right) var(--cap-bottom) var(--cap-left);
  border-image-repeat: stretch;

  background-color: var(--bg, #fff);
  background-clip: padding-box;
}

.p48-bubble__deco {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

/* 图片加载失败时的兜底：不画实色边框，只保留底色 */
.p48-bubble__bg--fallback {
  border-color: transparent;
}

/* 可选：整体缩放（只改 caps 和字号，切割线不变） */
.p48-bubble--lg {
  --font-size: 17px;
}