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

.banner {
  flex: 0 0 auto;
  margin: 0 var(--spacing-lg, 16px) var(--spacing-lg, 16px);
  padding: var(--spacing-xl, 24px) var(--spacing-lg, 16px);
  border-radius: 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: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 var(--spacing-lg, 16px);
  /* 与 splash 标题的粉色字保持视觉一致（白底渐变叠加层需要白字保证可读性） */
  opacity: 0.95;
}

.cta {
  width: 100%;
  padding: 0.875rem 1.5rem;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffb8e0 0%, #f57ec0 100%);
  color: #fff;
  font-size: 1.125rem;
  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);
}