/* ChatInsufficientCreditsBanner — 积分不足横幅
 * 视觉规格（与设计稿对齐）：
 *   - 粉→品红渐变背景（与 splash gradient 一致）
 *   - 居中文案 + 渐变 pill 按钮
 *   - 圆角 + 阴影（与 /sidebar 已有卡片的视觉重量对齐）
 */

.banner {
  flex: 0 0 auto;
  margin:
    0
    var(--chat-inline-padding, 16px)
    var(--page-section-gap, 16px);
  padding:
    var(--page-section-gap-lg, 24px)
    var(--responsive-card-padding, 16px);
  border-radius: var(--responsive-card-radius-sm, 24px);
  background: linear-gradient(135deg, #f96ade 0%, #f657a0 100%);
  text-align: center;
  box-shadow: 0 4px 16px rgba(248, 77, 150, 0.25);
}

.text {
  color: #fff;
  font-size: var(--responsive-card-title, 18px);
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 var(--spacing-sm, 8px);
  /* 与 splash 标题的粉色字保持视觉一致（白底渐变叠加层需要白字保证可读性） */
  opacity: 0.95;
}

.description {
  max-width: min(100%, 360px);
  margin: 0 auto var(--spacing-lg, 16px);
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--responsive-caption, 14px);
  font-weight: 600;
  line-height: 1.4;
}

.cta {
  width: 100%;
  min-height: var(--responsive-control-height, 48px);
  padding: 0 var(--responsive-card-padding-lg, 24px);
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffb8e0 0%, #f57ec0 100%);
  color: #fff;
  font-size: var(--responsive-card-title, 18px);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.cta:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.cta:active {
  transform: scale(0.98);
}
