/* ImageBubble 图片气泡样式 */

.bubble {
  position: relative;
  max-width: var(--chat-media-size, 220px);
  max-height: var(--chat-media-size, 220px);
  border-radius: var(--radius-lg, 12px);
  border-top-left-radius: 0;
  overflow: hidden;
  cursor: pointer;
  background: var(--color-bubble-background, #fff);
}

.image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.paywalled .image {
  filter: blur(8px);
  transform: scale(1.04);
}

.paywallOverlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(255, 255, 255, 0.14) 100%
    );
  pointer-events: none;
}

.errorFallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--chat-media-size, 220px);
  height: var(--chat-media-size, 220px);
  background: var(--color-bubble-background, #fff);
  color: var(--color-text-secondary, #9e9e9e);
  font-size: var(--icon-size-xl, 24px);
}