[data-homepage-ai-summary] > summary {
  background-image: linear-gradient(110deg, #0f172a 10%, #155e75 42%, #1e3a8a 60%, #0f172a 90%);
  background-size: 220% 100%;
  background-position: 0% 50%;
}

[data-ai-topic] > summary > [aria-hidden="true"] {
  transition: transform 180ms ease;
}

[data-ai-topic][open] > summary > [aria-hidden="true"] {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: no-preference) {
  [data-homepage-ai-summary] > summary {
    animation: homepage-ai-gradient 9s ease-in-out infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-ai-topic] > summary > [aria-hidden="true"] {
    transition: none;
  }
}

@keyframes homepage-ai-gradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.homepage-ai-panel { overscroll-behavior: contain; }
.homepage-ai-preview { color: #e2e8f0; font-size: 14px; line-height: 1.5; margin: 0 0 14px; }
.homepage-ai-preview p { margin: 4px 0 10px; }
.homepage-ai-preview .homepage-ai-takeaway { color: #bfdbfe; border-left: 2px solid #5d9aff; padding-left: 10px; }
.homepage-ai-context { font-size: 12px; line-height: 1.5; }
.homepage-ai-context p { margin: 10px 0; }

@media (max-width: 640px) {
  [data-homepage-ai-summary] { bottom: calc(6rem + env(safe-area-inset-bottom, 0px)) !important; }
  .homepage-ai-panel { max-height: min(38rem, calc(100dvh - 11rem - env(safe-area-inset-bottom, 0px))) !important; }
}
