style(replays): update some css on chapter list (#95747)

fix some wonky css on the chapter list for ai summary:

### 1. error text & highlight matches breadcrumb (the shade was too
dark)

<img width="840" height="692" alt="Screenshot 2025-07-16 at 4 07 44 PM"
src="https://github.com/user-attachments/assets/30604040-c230-4867-9eea-9aaedb6c6923"
/>

### 2. error/feedback chapter, when expanded, has an arrow down chevron
to match other chapters
<img width="844" height="459" alt="SCR-20250716-ogcl"
src="https://github.com/user-attachments/assets/1f51b9c8-d9ac-48a8-9e70-f5dfac6adf64"
/>


### 3. remove the top gap in the chapter background when hovered
### 4. background color of nested breadcrumbs is lighter to match figma
design


https://github.com/user-attachments/assets/55cba370-32ec-412b-9d3f-79291d4a5571

Author: michellewzhang

static/app/views/replays/detail/ai/chapterList.tsx

@@ -103,6 +103,7 @@ function ChapterRow({
   const {onClickTimestamp} = useCrumbHandlers();
   const [currentHoverTime] = useCurrentHoverTime();
   const [isHovered, setIsHovered] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
   const startOffset = Math.max(start - (replay?.getStartTimestampMs() ?? 0), 0);
   const endOffset = Math.max(end - (replay?.getStartTimestampMs() ?? 0), 0);
@@ -113,6 +114,8 @@ function ChapterRow({
 
   return (
     <ChapterWrapper
+      data-has-error={Boolean(error)}
+      data-has-feedback={Boolean(feedback)}
       className={classNames(className, {
         beforeCurrentTime: hasOccurred,
         afterCurrentTime: !hasOccurred,
@@ -122,10 +125,9 @@ function ChapterRow({
       })}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
+      onToggle={e => setIsOpen(e.currentTarget.open)}
     >
       <Chapter
-        error={error}
-        feedback={feedback}
         onClick={() =>
           trackAnalytics('replay.ai-summary.chapter-clicked', {
             chapter_type: error ? 'error' : feedback ? 'feedback' : undefined,
@@ -135,13 +137,13 @@ function ChapterRow({
       >
         <ChapterIconWrapper>
           {error ? (
-            isHovered ? (
-              <ChapterIconArrow direction="right" size="xs" color="errorText" />
+            isOpen || isHovered ? (
+              <ChapterIconArrow direction="right" size="xs" color="red300" />
             ) : (
-              <IconFire size="xs" color="errorText" />
+              <IconFire size="xs" color="red300" />
             )
           ) : feedback ? (
-            isHovered ? (
+            isOpen || isHovered ? (
               <ChapterIconArrow direction="right" size="xs" color="pink300" />
             ) : (
               <IconMegaphone size="xs" color="pink300" />
@@ -237,6 +239,24 @@ const ChapterWrapper = styled('details')`
   &.activeChapter .beforeCurrentTime:last-child {
     border-bottom-color: ${p => p.theme.purple300};
   }
+
+  /* the border-top is used to eliminate some of the top gap */
+
+  &:hover {
+    border-top: 1px solid ${p => p.theme.backgroundSecondary};
+  }
+
+  [data-has-feedback='true'] {
+    &:hover {
+      border-top: 1px solid ${p => p.theme.pink100};
+    }
+  }
+
+  [data-has-error='true'] {
+    &:hover {
+      border-top: 1px solid ${p => p.theme.red100};
+    }
+  }
 `;
 
 const ChapterBreadcrumbRow = styled(BreadcrumbRow)`
@@ -245,29 +265,22 @@ const ChapterBreadcrumbRow = styled(BreadcrumbRow)`
   &::before {
     display: none;
   }
-  &:last-child {
-    background-color: transparent;
-  }
-  details[open]:last-child &:last-child {
-    background-color: ${p => p.theme.background};
+
+  &:hover {
+    background-color: ${p => p.theme.backgroundSecondary};
   }
 `;
 
-const Chapter = styled('summary')<{error?: boolean; feedback?: boolean}>`
+const Chapter = styled('summary')`
   cursor: pointer;
   display: flex;
   align-items: center;
   font-size: ${p => p.theme.fontSize.lg};
   padding: 0 ${space(0.75)};
-  color: ${p =>
-    p.error ? p.theme.errorText : p.feedback ? p.theme.pink300 : p.theme.textColor};
+  color: ${p => p.theme.textColor};
+
   &:hover {
-    background-color: ${p =>
-      p.error
-        ? p.theme.red100
-        : p.feedback
-          ? p.theme.pink100
-          : p.theme.backgroundSecondary};
+    background-color: ${p => p.theme.backgroundSecondary};
   }
 
   /* sorry */
@@ -279,6 +292,22 @@ const Chapter = styled('summary')<{error?: boolean; feedback?: boolean}>`
   &::-webkit-details-marker {
     display: none;
   }
+
+  [data-has-feedback='true'] & {
+    color: ${p => p.theme.pink300};
+
+    &:hover {
+      background-color: ${p => p.theme.pink100};
+    }
+  }
+
+  [data-has-error='true'] & {
+    color: ${p => p.theme.red300};
+
+    &:hover {
+      background-color: ${p => p.theme.red100};
+    }
+  }
 `;
 
 const ChapterTitle = styled('div')`
@@ -295,6 +324,7 @@ const ChapterTitle = styled('div')`
   }
 
   border-bottom: 1px solid ${p => p.theme.innerBorder};
+  margin-bottom: -1px; /* Compensate for border to fully eliminate gap */
 
   details:last-child:not([open]) & {
     border-bottom: none;