@pega/cosmos-react-work 9.0.0-build.9.9 → 9.0.1

package/lib/components/CaseView/CaseView.styles.js

@@ -1,12 +1,12 @@
 import styled, { css } from 'styled-components';
-import { getContrast, hideVisually, meetsContrastGuidelines, rgba, transparentize } from 'polished';
+import { getContrast, hideVisually, mix, rgba, transparentize } from 'polished';
 import { useContext } from 'react';
-import { Button, calculateFontSize, CardContent, defaultThemeProp, StyledBreadcrumbs, StyledButtonLink, StyledFieldValue, StyledStackedFieldValue, StyledIcon, StyledLabel, StyledPopover, StyledText, StyledTooltip, tryCatch, FieldValueList, StyledLink, readableHue, StyledCard, Text, readableColor, AppShellContext, AIButton, StyledButton, calculateForegroundColor, calculateBackgroundAndContrastColor, isSolidColor, StyledSummaryListItem, StyledProgressBackdrop } from '@pega/cosmos-react-core';
+import { Button, calculateFontSize, CardContent, defaultThemeProp, resolveSupplementalColor, StyledBreadcrumbs, StyledButtonLink, StyledFieldValue, StyledInlineFieldValueRow, StyledStackedFieldValue, StyledIcon, StyledLabel, StyledPopover, StyledText, StyledTooltip, tryCatch, FieldValueList, StyledLink, readableHue, StyledCard, Text, readableColor, AppShellContext, AIButton, StyledButton, calculateForegroundColor, calculateBackgroundAndContrastColor, isSolidColor, StyledSummaryListItem, StyledProgressBackdrop, Image, Icon, animations, useDirection } from '@pega/cosmos-react-core';
 import { StyledMenu } from '@pega/cosmos-react-core/lib/components/Menu/Menu.styles';
 import { headerHeight } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.styles';
 import { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';
 import { StyledAllTabsWrapper, StyledTabs, StylesAllTabsButtonWrapper } from '@pega/cosmos-react-core/lib/components/Tabs/Tabs.styles';
-import { resizeDrawerMinWidth, resizeDrawerMaxWidth, resizeDrawerDefaultWidth } from '@pega/cosmos-react-core/lib/styles/constants';
+import { resizeDrawerMinWidth, resizeDrawerMaxWidth, resizeDrawerDefaultWidth, wcagContrast } from '@pega/cosmos-react-core/lib/styles/constants';
 import { StyledMenuButton } from '@pega/cosmos-react-core/lib/components/MenuButton/MenuButton';
 import { StyledTab } from '@pega/cosmos-react-core/lib/components/Tabs/Tab';
 import { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';
@@ -14,12 +14,58 @@ import { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/C
 import { StyledStage, StyledStageContainer, StyledStages } from '../Stages/Stages.styles';
 import { StyledAssignments } from '../Assignments/Assignments.styles';
 import { StyledAssignments as StyledHierarchicalAssignments } from '../HierarchicalAssignments/Assignments.styles';
-import { StyledGenAICoachContainer } from '../GenAICoach/GenAICoach.styles';
+import { StyledGenAICoachContainer, StyledInitialMessageContainer } from '../GenAICoach/GenAICoach.styles';
 import { StyledTaskList } from '../Tasks/TaskList';
 import { oneColumnDetailsColumnWidth } from '../Details/Details.styles';
 import { useCaseViewContext } from './CaseView.context';
 const labelWidth = '16ch';
 const inlineEndButtonOffset = '0.375rem';
+export const resolveCaseTypeColor = (theme, color) => {
+    if (!color)
+        return undefined;
+    const supplementalColor = resolveSupplementalColor(theme, color);
+    if (supplementalColor !== undefined)
+        return supplementalColor;
+    return color;
+};
+const mixCaseColorWithBackground = (color, background) => mix(0.85, background, color);
+const getCaseTypeHeaderColors = (theme, color) => {
+    const resolvedCaseTypeColor = resolveCaseTypeColor(theme, color);
+    const headerBackground = resolvedCaseTypeColor &&
+        theme.base['case-type-colors'] === 'header-and-icon' &&
+        isSolidColor(theme.components.card.background)
+        ? mixCaseColorWithBackground(resolvedCaseTypeColor, theme.components.card.background)
+        : theme.components['case-view'].header.background;
+    const headerForeground = resolvedCaseTypeColor && theme.base['case-type-colors'] === 'header-and-icon'
+        ? readableColor(headerBackground)
+        : calculateForegroundColor(headerBackground, theme.components['case-view'].header['foreground-color']);
+    return { caseTypeColor: resolvedCaseTypeColor ?? undefined, headerBackground, headerForeground };
+};
+const getCaseViewColors = (theme, caseTypeColor) => {
+    const interactive = theme.base.palette.interactive;
+    const caseTypeHeaderColors = getCaseTypeHeaderColors(theme, caseTypeColor);
+    const headerBackground = caseTypeHeaderColors.headerBackground;
+    const foregroundColor = caseTypeHeaderColors.headerForeground;
+    const isGradientBackground = !isSolidColor(headerBackground);
+    const elementBackground = isGradientBackground
+        ? readableColor(foregroundColor)
+        : headerBackground;
+    const interactiveUsable = getContrast(elementBackground, interactive) >= wcagContrast.AA;
+    const interactiveColor = !isGradientBackground && interactiveUsable ? interactive : foregroundColor;
+    let hoverBackground = rgba(interactiveColor, 0.15);
+    if (!isGradientBackground && interactiveUsable) {
+        hoverBackground = readableHue(interactive, interactiveColor);
+    }
+    return {
+        caseTypeColor: caseTypeHeaderColors.caseTypeColor,
+        headerBackground,
+        foregroundColor,
+        elementBackground,
+        interactiveColor,
+        interactiveUsable,
+        hoverBackground
+    };
+};
 export const StyledSummaryPrimaryList = styled(FieldValueList)(({ theme, wrapped }) => {
     const fontSizes = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
     const detached = theme.components['field-value-list'].inline.detached;
@@ -35,10 +81,10 @@ export const StyledSummaryPrimaryList = styled(FieldValueList)(({ theme, wrapped
           `}
           grid-template-columns: ${labelWidth} auto;
         `}
-
     ${StyledFieldValue} {
       font-size: ${fontSizes[theme.components.text.h1['font-size']]};
       font-weight: ${theme.components.text.h1['font-weight']};
+
       > ${StyledButtonLink} {
         font-weight: inherit;
       }
@@ -57,12 +103,13 @@ export const StyledCaseSummaryFields = styled.div(({ theme }) => {
     const { components: { 'field-value-list': { inline: { detached } } } } = theme;
     return (detached &&
         css `
-      ${StyledSummaryPrimaryList},${StyledSummarySecondaryList} {
-        padding: calc(${theme.components.card.padding} * 2);
+      ${StyledSummaryPrimaryList} {
+        padding-block-start: calc(${theme.components.card.padding} * 2);
+        padding-inline: calc(${theme.components.card.padding} * 2);
       }
 
-      ${StyledSummaryPrimaryList} + ${StyledSummarySecondaryList} {
-        border-block-start: 0.0625rem solid ${theme.base.palette['border-line']};
+      ${StyledSummarySecondaryList} {
+        padding: calc(${theme.components.card.padding} * 2);
       }
     `);
 });
@@ -75,7 +122,7 @@ export const StyledSummaryTabContent = styled(CardContent)(({ theme }) => {
         max-width: ${oneColumnDetailsColumnWidth};
       }
 
-      > ${StyledFieldValue} {
+      > ${StyledFieldValue}, > ${StyledInlineFieldValueRow} > ${StyledFieldValue} {
         max-width: calc(${oneColumnDetailsColumnWidth} - ${labelWidth} - 2 * ${spacing});
       }
     }
@@ -88,27 +135,33 @@ export const StyledSummaryHeading = styled(Text)(({ theme }) => {
   `;
 });
 StyledSummaryHeading.defaultProps = defaultThemeProp;
-export const StyledCaseHeader = styled.header(({ theme }) => {
-    const { components: { 'case-view': { header: { 'foreground-color': caseHeaderForegroundColor, background }, summary: { detached: summaryDetached }, utilities: { detached: utilitiesDetached } } }, base: { 'border-radius': borderRadius, spacing, shadow, 'z-index': zIndex, palette } } = theme;
-    const foregroundColor = calculateForegroundColor(background, caseHeaderForegroundColor);
-    const { aboveSM, aboveMD, persistentUtility, aboveXL, summaryExpanded, isPreview } = useCaseViewContext();
+export const StyledCaseViewImage = styled(Image) `
+  max-height: 100%;
+`;
+export const StyledCaseHeader = styled.div(({ theme }) => {
+    const { components: { 'case-view': { summary: { detached: summaryDetached }, utilities: { detached: utilitiesDetached } } }, base: { 'border-radius': borderRadius, spacing, shadow, 'z-index': zIndex, palette } } = theme;
+    const { aboveSM, aboveMD, color, persistentUtility, aboveXL, summaryExpanded, isPreview } = useCaseViewContext();
     const shouldRenderMobileTabs = !aboveMD || (persistentUtility && !aboveXL) || !summaryExpanded;
     const caseHeaderBorderRadius = shouldRenderMobileTabs
         ? `0 0 ${utilitiesDetached ? borderRadius : 0} ${borderRadius}`
         : `${borderRadius} ${borderRadius} 0 0`;
+    const { headerBackground, foregroundColor } = getCaseViewColors(theme, color);
     return css `
-    background: ${background};
+    background: ${headerBackground};
     color: ${foregroundColor};
     padding: ${spacing} calc(2 * ${spacing});
     position: relative;
 
+    ${summaryDetached &&
+        css `
+      border-bottom: 0.0625rem solid ${palette['border-line']};
+    `}
     ${summaryDetached &&
         !isPreview &&
         aboveSM &&
         css `
       border-radius: ${caseHeaderBorderRadius};
     `}
-
     h1:focus-visible {
       outline: transparent;
       box-shadow: ${shadow.focus};
@@ -123,6 +176,7 @@ export const StyledCaseHeader = styled.header(({ theme }) => {
 StyledCaseHeader.defaultProps = defaultThemeProp;
 export const StyledFollowIconWrap = styled.label `
   font-size: 1.25rem;
+
   input {
     ${hideVisually}
   }
@@ -132,8 +186,35 @@ export const StyledFollowIconWrap = styled.label `
   }
 `;
 StyledFollowIconWrap.defaultProps = defaultThemeProp;
-export const StyledSubheading = styled.p ``;
+export const StyledSubheading = styled.div ``;
 StyledSubheading.defaultProps = defaultThemeProp;
+export const StyledCaseHeaderPromotedAction = styled(Button)(({ theme }) => {
+    const { color: caseTypeColor } = useCaseViewContext();
+    const { elementBackground, interactiveColor, hoverBackground } = getCaseViewColors(theme, caseTypeColor);
+    return css `
+    --button-background-color: ${elementBackground};
+    color: ${interactiveColor};
+    background-color: transparent;
+    border-color: ${interactiveColor};
+
+    @media (hover: hover) {
+      &:hover {
+        --button-background-color: ${hoverBackground};
+        color: ${interactiveColor};
+        background-color: ${hoverBackground};
+        border-color: ${interactiveColor};
+      }
+
+      &:active {
+        --button-background-color: ${hoverBackground};
+        color: ${interactiveColor};
+        background-color: ${hoverBackground};
+        border-color: ${interactiveColor};
+      }
+    }
+  `;
+});
+StyledCaseHeaderPromotedAction.defaultProps = defaultThemeProp;
 export const StyledHeaderActions = styled.div(({ offsetEnd, theme }) => {
     return css `
     margin-inline-start: auto;
@@ -145,20 +226,23 @@ export const StyledHeaderActions = styled.div(({ offsetEnd, theme }) => {
       padding-inline-end: ${inlineEndButtonOffset};
     `};
 
-    ${StyledButton} {
+    ${StyledButton}:not(${StyledCaseHeaderPromotedAction}) {
       margin-inline-start: 0;
     }
+
+    ${StyledCaseHeaderPromotedAction}:not(:has(+ ${StyledCaseHeaderPromotedAction})) {
+      margin-inline-end: ${theme.base.spacing};
+    }
   `;
 });
 StyledHeaderActions.defaultProps = defaultThemeProp;
-export const StyledCaseHeaderText = styled.hgroup(({ theme }) => {
-    const { components: { 'case-view': { header: { 'foreground-color': foregroundColor, background: caseHeaderBackground } } } } = theme;
-    /* If the foreground-color is auto, we calculate the text color and transparentColor based on the background color. */
-    const color = calculateForegroundColor(caseHeaderBackground, foregroundColor);
+export const StyledCaseHeaderText = styled.div(({ theme }) => {
+    const { color } = useCaseViewContext();
+    const { foregroundColor, interactiveColor } = getCaseViewColors(theme, color);
     const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
     const idStyle = css `
-    color: ${color};
-    font-size: ${fontSize.s};
+    color: ${foregroundColor};
+    font-size: ${fontSize.xs};
     font-weight: normal;
   `;
     return css `
@@ -166,6 +250,9 @@ export const StyledCaseHeaderText = styled.hgroup(({ theme }) => {
 
     ${StyledSubheading} {
       ${idStyle}
+      ${StyledText} {
+        ${idStyle}
+      }
     }
 
     ${StyledBreadcrumbs} {
@@ -191,7 +278,7 @@ export const StyledCaseHeaderText = styled.hgroup(({ theme }) => {
     }
 
     > ${StyledText} > ${StyledLink} {
-      color: ${color};
+      color: ${interactiveColor};
     }
 
     + ${StyledHeaderActions} {
@@ -200,42 +287,6 @@ export const StyledCaseHeaderText = styled.hgroup(({ theme }) => {
   `;
 });
 StyledCaseHeaderText.defaultProps = defaultThemeProp;
-export const StyledCaseHeaderPromotedAction = styled(Button)(({ theme }) => {
-    const { base: { palette: { interactive } }, components: { 'case-view': { header: { background, 'foreground-color': foregroundColor } } } } = theme;
-    /* If foreground color is auto, we calculate the text color based on the background color. */
-    const textColor = calculateForegroundColor(background, foregroundColor);
-    const isGradientBackground = !isSolidColor(background);
-    const backgroundColor = isGradientBackground ? readableColor(textColor) : background;
-    const interactiveUsable = getContrast(backgroundColor, interactive) >= 4.5;
-    const color = !isGradientBackground && interactiveUsable ? interactive : textColor;
-    let hoverBackground = rgba(color, 0.15);
-    if (!isGradientBackground && interactiveUsable) {
-        hoverBackground = readableHue(interactive, color);
-    }
-    return css `
-    --button-background-color: ${backgroundColor};
-    color: ${color};
-    background-color: transparent;
-    border-color: ${color};
-
-    @media (hover: hover) {
-      &:hover {
-        --button-background-color: ${hoverBackground};
-        color: ${color};
-        background-color: ${hoverBackground};
-        border-color: ${color};
-      }
-
-      &:active {
-        --button-background-color: ${hoverBackground};
-        color: ${color};
-        background-color: ${hoverBackground};
-        border-color: ${color};
-      }
-    }
-  `;
-});
-StyledCaseHeaderPromotedAction.defaultProps = defaultThemeProp;
 export const StyledHeaderSummaryBlock = styled.div(({ hasItems, theme }) => {
     const { base: { spacing, palette: { 'brand-primary': primary } } } = theme;
     const color = readableColor(primary);
@@ -245,7 +296,6 @@ export const StyledHeaderSummaryBlock = styled.div(({ hasItems, theme }) => {
         css `
       border-inline-start: 0.0625rem solid ${transparentColor};
     `}
-
     ${StyledStackedFieldValue}:first-child {
       margin-inline-start: calc(2 * ${spacing});
     }
@@ -278,35 +328,32 @@ const popoverColorReset = (theme) => {
   `;
 };
 export const StyledHeaderSummary = styled.dl(({ theme }) => {
-    const { base: { palette: { interactive } }, components: { 'case-view': { header: { 'foreground-color': foregroundColor, background } } } } = theme;
-    /* If the foreground-color is auto, we calculate the text color and transparentColor based on the background color. */
-    const color = calculateForegroundColor(background, foregroundColor);
-    const { backgroundColor } = calculateBackgroundAndContrastColor(background, foregroundColor);
-    const interactiveUsable = meetsContrastGuidelines(backgroundColor, interactive).AA;
+    const { color: caseTypeColor } = useCaseViewContext();
+    const { foregroundColor, interactiveUsable } = getCaseViewColors(theme, caseTypeColor);
     return css `
     max-width: 100%;
     min-width: 0;
 
     > ${StyledStackedFieldValue} {
       > ${StyledLabel} {
-        color: ${color};
+        color: ${foregroundColor};
         white-space: nowrap;
       }
 
       > ${StyledFieldValue} {
-        color: ${color};
+        color: ${foregroundColor};
         white-space: nowrap;
       }
 
       ${StyledButtonLink},
       ${StyledLink} {
         &:focus-visible {
-          box-shadow: inset 0 0 0 0.0625rem ${color};
+          box-shadow: inset 0 0 0 0.0625rem ${foregroundColor};
         }
 
         ${!interactiveUsable &&
         css `
-          color: ${color};
+          color: ${foregroundColor};
           text-decoration: underline;
         `}
       }
@@ -326,30 +373,28 @@ export const StyledHeaderSummaryValue = styled(StyledFieldValue)(({ bold, trunca
         css `
       max-width: ${xs};
     `}
-
     ${bold &&
         css `
       font-weight: ${h1Weight};
     `}
-
       /*
        * :not([hidden]) necessary to prevent hidden span with preview a11y instructions from
        * factoring into scrollWidth of element when determining truncation.
        */
-      > :not([hidden]) {
+    > :not([hidden]) {
       display: inline;
     }
   `;
 });
 StyledHeaderSummaryValue.defaultProps = defaultThemeProp;
-export const StyledCaseSummaryInfo = styled.div(({ theme: { base: { palette: { 'primary-background': primaryBackground }, 'border-radius': borderRadius }, components: { tabs: { detached: tabsDetached } } } }) => {
+export const StyledCaseSummaryInfo = styled.div(({ theme: { base: { 'border-radius': borderRadius }, components: { tabs: { detached: tabsDetached }, card: { background } } } }) => {
     const { intelligentGuidance } = useCaseViewContext();
     return css `
       overflow: auto;
       flex: 1;
       ${tabsDetached &&
         css `
-        background: ${primaryBackground};
+        background: ${background};
         border-radius: ${borderRadius};
         border-start-start-radius: 0;
         border-start-end-radius: 0;
@@ -363,14 +408,14 @@ export const StyledCaseSummaryInfo = styled.div(({ theme: { base: { palette: { '
 });
 StyledCaseSummaryInfo.defaultProps = defaultThemeProp;
 export const StyledCaseSummaryContainer = styled.div(({ theme }) => {
-    const { base: { palette: { 'primary-background': primaryBackground } }, components: { 'field-value-list': { inline: { detached } } } } = theme;
+    const { components: { 'field-value-list': { inline: { detached } }, card: { background } } } = theme;
     return css `
     padding: calc(1.5 * ${theme.base.spacing}) calc(${theme.components.card.padding} * 2);
 
     ${detached &&
         css `
       padding: 0;
-      background: ${primaryBackground};
+      background: ${background};
     `}
   `;
 });
@@ -378,6 +423,7 @@ StyledCaseSummaryContainer.defaultProps = defaultThemeProp;
 export const StyledExpandCollapseButton = styled(Button)(() => {
     return css `
     border: none;
+
     ${StyledIcon} {
       width: 1.5rem;
       height: 1.5rem;
@@ -418,10 +464,11 @@ export const StyledExpandCollapseSummaryButton = styled(StyledExpandCollapseButt
   `;
 });
 StyledExpandCollapseSummaryButton.defaultProps = defaultThemeProp;
-export const StyledCaseSummary = styled.div(({ theme: { base: { spacing, palette: { 'primary-background': primaryBackground, 'border-line': borderLine }, 'border-radius': borderRadius, 'hit-area': { 'mouse-min': mouseMin, 'finger-min': fingerMin } }, components: { 'case-view': { summary: { detached } }, tabs: { detached: tabsDetached } } } }) => {
-    const { summaryExpanded, aboveMD } = useCaseViewContext();
+export const StyledCaseSummary = styled.div(({ theme, theme: { base: { spacing, palette: { 'border-line': borderLine }, 'border-radius': borderRadius, 'hit-area': { 'mouse-min': mouseMin, 'finger-min': fingerMin } }, components: { 'case-view': { summary: { detached } }, card: { background: cardBackground }, tabs: { detached: tabsDetached } } } }) => {
+    const { summaryExpanded, aboveMD, color } = useCaseViewContext();
+    const { caseTypeColor, headerBackground, interactiveColor } = getCaseViewColors(theme, color);
     return css `
-      background: ${primaryBackground};
+      background: ${cardBackground};
       position: relative;
       height: 100%;
       ${aboveMD &&
@@ -442,6 +489,7 @@ export const StyledCaseSummary = styled.div(({ theme: { base: { spacing, palette
           &[aria-orientation='vertical'] {
             padding-top: calc(1.5 * ${spacing});
             border-block-start: 0.0625rem solid ${borderLine};
+
             & ${StyledTab} {
               height: ${mouseMin};
 
@@ -452,6 +500,28 @@ export const StyledCaseSummary = styled.div(({ theme: { base: { spacing, palette
           }
         }
       `}
+
+      ${caseTypeColor &&
+        theme.base['case-type-colors'] === 'header-and-icon' &&
+        css `
+        & ${StyledTabs} {
+          &[aria-orientation='vertical']::after {
+            background: ${caseTypeColor};
+          }
+
+          &[aria-orientation='vertical']::before {
+            background: ${headerBackground};
+          }
+        }
+
+        & ${StyledTab}[aria-selected='true'] {
+          background-color: ${headerBackground};
+
+          span {
+            color: ${interactiveColor};
+          }
+        }
+      `}
     `;
 });
 StyledCaseSummary.defaultProps = defaultThemeProp;
@@ -464,15 +534,76 @@ export const StyledTasks = styled.div(({ theme: { base: { spacing } } }) => {
     `;
 });
 StyledTasks.defaultProps = defaultThemeProp;
-export const StyledTabPanelWrapper = styled.div(({ theme: { components: { card: { 'border-radius': cardBorderRadius } } } }) => {
+export const StyledTabPanelWrapper = styled.div(({ theme: { base: { animation: { speed, timing } }, components: { card: { 'border-radius': cardBorderRadius } } } }) => {
+    const { start } = useDirection();
     return css `
-      ${StyledTabPanel} ${StyledProgressBackdrop} {
-        border-radius: ${cardBorderRadius};
+      ${StyledTabPanel} {
+        ${StyledProgressBackdrop} {
+          border-radius: ${cardBorderRadius};
+        }
+      }
+
+      /* Top-level horizontal tabs (with or without overflow "All tabs" button) - slide in from top */
+      ${StyledTabs} ~ &,
+      ${StyledAllTabsWrapper} ~ & {
+        position: relative;
+        z-index: 0;
+
+        > ${StyledTabPanel} {
+          --reveal-from: 0.7;
+          --slide-in-y-start-offset: -0.8rem;
+          animation-name: ${animations.reveal}, ${animations.slideInYStart};
+          animation-duration: max(calc(${speed} * 2), 1ms);
+          animation-timing-function: ${timing.ease};
+
+          @media (prefers-reduced-motion: reduce) {
+            animation-duration: 1ms;
+          }
+        }
+      }
+
+      /* Top-level vertical tabs - slide in from start*/
+      &:not(${StyledTabs} ~ &):not(${StyledAllTabsWrapper} ~ &) > ${StyledTabPanel} {
+        ${start === 'right'
+        ? css `
+              --slide-in-x-end-offset: 1.5rem;
+              animation-name: ${animations.reveal}, ${animations.slideInXEnd};
+            `
+        : css `
+              --slide-in-x-start-offset: -1.5rem;
+              animation-name: ${animations.reveal}, ${animations.slideInXStart};
+            `}
+        animation-duration: max(calc(${speed} * 2), 1ms);
+        animation-timing-function: ${timing.ease};
+
+        @media (prefers-reduced-motion: reduce) {
+          animation-duration: 1ms;
+        }
+      }
+
+      /* Nested tab panels - always fade only */
+      ${StyledTabPanel} & ${StyledTabPanel} {
+        --reveal-from: 0.7;
+        animation-name: ${animations.reveal};
+        animation-duration: max(calc(${speed} * 2), 1ms);
+        animation-timing-function: ${timing.ease};
+
+        @media (prefers-reduced-motion: reduce) {
+          animation-duration: 1ms;
+        }
       }
     `;
 });
 StyledTabPanelWrapper.defaultProps = defaultThemeProp;
-export const StyledWorkArea = styled.div(({ theme: { base: { palette: { 'border-line': borderLine }, spacing, 'border-radius': borderRadius }, components: { 'case-view': { assignments: { detached: assignmentDetached, background: assignmentBackground, 'foreground-color': assignmentForegroundColor } }, tabs: { detached: tabsDetached }, card: { background, 'foreground-color': foregroundColor, 'border-radius': cardBorderRadius } } } }) => {
+// This component defintion was primarily required to conditionally hide empty div and avoid unnecessary row gap in work area.
+export const StyledBannersStagesTasksContainer = styled.div(() => {
+    return css `
+    &:has(> ${StyledTasks}:only-child > :only-child:empty[data-flow]) {
+      display: none;
+    }
+  `;
+});
+export const StyledWorkArea = styled.div(({ theme: { base: { palette: { 'border-line': borderLine }, spacing, 'border-radius': borderRadius, breakpoints }, components: { 'case-view': { assignments: { detached: assignmentDetached, background: assignmentBackground, 'foreground-color': assignmentForegroundColor } }, tabs: { detached: tabsDetached }, card: { background, 'foreground-color': foregroundColor, 'border-radius': cardBorderRadius } } } }) => {
     const { backgroundColor } = calculateBackgroundAndContrastColor(background, foregroundColor);
     const foregroundColorForAssignment = calculateForegroundColor(assignmentBackground, assignmentForegroundColor);
     const { summaryExpanded, aboveMD, intelligentGuidance, isPreview } = useCaseViewContext();
@@ -483,6 +614,16 @@ export const StyledWorkArea = styled.div(({ theme: { base: { palette: { 'border-
     return css `
       grid-area: work-area;
       padding: calc(2 * ${spacing});
+      @media (width < ${breakpoints.sm}) {
+        padding: calc(2 * ${spacing}) calc(0.75 * ${spacing});
+      }
+
+      /* Prevents unnecessary gap when case view has neither stages nor assignments */
+      &:has(> ${StyledBannersStagesTasksContainer} > ${StyledTasks}:first-child:empty) {
+        ${StyledBannersStagesTasksContainer} {
+          display: none;
+        }
+      }
 
       ${aboveMD &&
         css `
@@ -499,16 +640,14 @@ export const StyledWorkArea = styled.div(({ theme: { base: { palette: { 'border-
           margin-inline-start: calc(2 * ${spacing});
         `}
       `}
-
       /* Order of style here is necessary for overriding styles above. */
-    ${pbeRem > 0 &&
+      ${pbeRem > 0 &&
         css `
         /* Accounts for collapsed intelligentGuidance bubble covering work area content when fully scrolled. */
         padding-block-end: ${pbeRem}rem;
       `}
-
-    &:has(${StyledAssignments}),
-    &:has(${StyledHierarchicalAssignments}) {
+      &:has(${StyledAssignments}),
+      &:has(${StyledHierarchicalAssignments}) {
         ${StyledStages} {
           border-block-end: 0.0625rem solid ${borderLine};
 
@@ -541,6 +680,12 @@ export const StyledWorkArea = styled.div(({ theme: { base: { palette: { 'border-
         }
       `}
 
+      /* Ensure horizontal tabs stay above sliding tab content */
+      ${StyledTabs}[aria-orientation='horizontal'],
+      ${StyledAllTabsWrapper} {
+        z-index: 1;
+      }
+
       &:has(${StyledStages}) {
         ${StyledCard}${StyledAssignments},
         ${StyledCard}${StyledHierarchicalAssignments} {
@@ -561,6 +706,7 @@ export const StyledWorkArea = styled.div(({ theme: { base: { palette: { 'border-
                 background-color: ${backgroundColor};
                 border: solid 0.0625rem ${borderLine};
                 border-radius: var(--border-radius, ${borderRadius});
+
                 ${StyledSummaryListItem} {
                   padding: calc(${spacing} / 2) ${spacing};
                 }
@@ -581,8 +727,9 @@ export const StyledExpandCollapseUtilitiesButton = styled(StyledExpandCollapseBu
   `;
 });
 StyledExpandCollapseUtilitiesButton.defaultProps = defaultThemeProp;
+const genAICoachReservedSpace = '4rem';
 export const StyledUtilities = styled.div(({ theme }) => {
-    const { utilitiesExpanded, aboveLG, aboveMD } = useCaseViewContext();
+    const { utilitiesExpanded, aboveLG, aboveMD, hasGenAICoach } = useCaseViewContext();
     return css `
     height: max-content;
     margin-block: calc(2 * ${theme.base.spacing});
@@ -592,6 +739,7 @@ export const StyledUtilities = styled.div(({ theme }) => {
     }
 
     /* If utilities are in an expanded drawer. */
+
     ${utilitiesExpanded &&
         aboveMD &&
         !aboveLG &&
@@ -599,28 +747,34 @@ export const StyledUtilities = styled.div(({ theme }) => {
       /* Maintains the column width to avoid page content shift. */
       visibility: hidden;
     `}
-
     ${aboveLG &&
         utilitiesExpanded &&
         css `
       width: 25rem;
     `}
-
-
-    /* Selects the h2 in the utilities column, not the drawer. */
+      /* Selects the h2 in the utilities column, not the drawer. */
     ${StyledUtilitiesHeading} {
       /* Hide the utilities h2 under certain conditions.*/
       ${((aboveMD && !utilitiesExpanded) || (aboveMD && utilitiesExpanded && !aboveLG)) &&
         hideVisually()}
     }
+
+    /* Reserve space below so the docked GenAI coach doesn't overlap utility items. */
+    ${hasGenAICoach &&
+        css `
+      margin-block-end: ${genAICoachReservedSpace};
+    `}
   `;
 });
 StyledUtilities.defaultProps = defaultThemeProp;
-export const StyledSummary = styled.div(({ theme: { base: { spacing, breakpoints, 'z-index': zIndex }, components: { 'case-view': { summary: { detached: summaryDetached }, utilities: { detached: utilitiesDetached } } } } }) => {
+export const StyledSummary = styled.div(({ theme: { base: { spacing, breakpoints, 'z-index': zIndex, palette: { 'app-background': appBackground } }, components: { 'app-shell': { nav: { background: navBackground } }, 'case-view': { summary: { detached: summaryDetached }, utilities: { detached: utilitiesDetached } } } } }) => {
     const { aboveSM, aboveMD, persistentUtility, aboveXL, summaryExpanded, isPreview } = useCaseViewContext();
     const shouldRenderMobileTabs = !aboveMD || (persistentUtility && !aboveXL) || !summaryExpanded;
+    const inlineStartPadding = navBackground === appBackground && summaryExpanded ? `${spacing}` : `calc(${spacing} * 2)`;
     return css `
-      top: ${summaryExpanded ? 'var(--top-offset)' : 'var(--appshell-offset, 0)'};
+      top: ${summaryExpanded
+        ? 'var(--top-offset)'
+        : 'calc(var(--appshell-sticky-offset, var(--appshell-offset, 0rem)) + var(--appshell-top-offset, 0rem))'};
       width: 100%;
       z-index: ${zIndex.popover};
 
@@ -633,7 +787,7 @@ export const StyledSummary = styled.div(({ theme: { base: { spacing, breakpoints
       ${summaryDetached &&
         aboveSM &&
         css `
-        padding: calc(2 * ${spacing});
+        padding-inline-start: ${inlineStartPadding};
         padding-inline-end: ${utilitiesDetached && shouldRenderMobileTabs
             ? `calc(2 * ${spacing})`
             : 0};
@@ -659,40 +813,48 @@ export const StyledSummary = styled.div(({ theme: { base: { spacing, breakpoints
 StyledSummary.defaultProps = defaultThemeProp;
 export const StyledCaseDrawer = styled.div(({ previewActive, utilitiesExpanded, theme }) => {
     return css `
-    --utilities-drawer-width: var(--resize-drawer-width);
-    --utilities-drawer-min-width: ${resizeDrawerMinWidth};
-    min-width: var(--utilities-drawer-min-width);
-    max-width: ${resizeDrawerMaxWidth};
-    width: var(--utilities-drawer-width);
     background-color: ${theme.base.palette['primary-background']};
-    height: calc(100vh - ${headerHeight});
-    inset-block-start: ${headerHeight};
+    height: calc(
+      100dvh - var(--appshell-offset, ${headerHeight}) - var(--appshell-top-offset, 0rem) - var(
+          --appshell-bottom-offset,
+          0rem
+        )
+    );
+    inset-block-start: calc(
+      var(--appshell-offset, ${headerHeight}) + var(--appshell-top-offset, 0rem)
+    );
     z-index: ${theme.base['z-index'].drawer - 1};
+    max-width: ${resizeDrawerMinWidth};
 
     ${previewActive &&
         css `
-      @media (min-width: ${theme.base.breakpoints.xl}) {
+      @media (min-width: ${theme.base.breakpoints.md}) {
         inset-inline-end: ${resizeDrawerDefaultWidth};
         ${utilitiesExpanded &&
             css `
           inset-inline-end: var(--resize-drawer-width);
-          width: var(--utilities-drawer-min-width);
         `}
       }
     `}
-
     ${StyledGenAICoachContainer} {
-      width: calc(var(--utilities-drawer-width) - 2rem);
+      width: calc(${resizeDrawerMinWidth} - 2rem);
     }
   `;
 });
 StyledCaseDrawer.defaultProps = defaultThemeProp;
 export const StyledCaseDrawerContent = styled.div(({ theme: { base: { palette: { 'app-background': appBackground }, spacing } } }) => {
+    const { hasGenAICoach } = useCaseViewContext();
     return css `
       background: ${appBackground};
       padding: calc(2 * ${spacing});
       height: 100%;
       overflow: auto;
+
+      /* Reserve scroll space so the docked GenAI coach doesn't overlap utility items. */
+      ${hasGenAICoach &&
+        css `
+        padding-block-end: ${genAICoachReservedSpace};
+      `}
     `;
 });
 StyledCaseDrawerContent.defaultProps = defaultThemeProp;
@@ -704,6 +866,7 @@ export const StyledPersistentUtility = styled.div(({ theme, persistentUtilityExp
       z-index: 1;
       height: var(--case-view-height);
       inset-block-start: var(--top-offset);
+      inset-block-end: var(--bottom-offset);
       padding-block: calc(2 * ${theme.base.spacing});
     `;
 });
@@ -732,8 +895,13 @@ export const StyledCaseView = styled.div(({ theme: { base: { palette: { 'app-bac
     const utilitiesForegroundComputed = calculateForegroundColor(utilitiesBackground, utilitiesForegroundColor);
     const { aboveSM, aboveMD, isPreview } = useCaseViewContext();
     return css `
-      --top-offset: calc(var(--appshell-offset, 0rem) + var(--summary-height));
-      --case-view-height: calc(100vh - var(--top-offset));
+      --top-offset: calc(
+        var(--appshell-sticky-offset, var(--appshell-offset, 0rem)) + var(--summary-height) +
+          ${aboveSM ? 'var(--appshell-top-offset, 0rem)' : '0rem'}
+      );
+      /* stylelint-disable-next-line length-zero-no-unit */
+      --bottom-offset: var(--appshell-bottom-offset, 0rem);
+      --case-view-height: calc(100dvh - var(--top-offset) - var(--bottom-offset));
       position: relative;
       min-height: var(--case-view-height);
       background: ${appBackground};
@@ -750,12 +918,15 @@ export const StyledCaseView = styled.div(({ theme: { base: { palette: { 'app-bac
             margin-inline-end: 0;
             padding: calc(2 * ${spacing});
             padding-inline-end: 0;
-            border-radius: ${borderRadius} 0 0 ${borderRadius};
+            border-start-start-radius: ${borderRadius};
+            border-end-start-radius: ${borderRadius};
+            border-start-end-radius: 0;
+            border-end-end-radius: 0;
 
             ${StyledCard},
             ${StyledGenAICoachContainer} {
-              border-top-right-radius: 0;
-              border-bottom-right-radius: 0;
+              border-start-end-radius: 0;
+              border-end-end-radius: 0;
             }
 
             ${StyledGenAICoachContainer} {
@@ -773,6 +944,7 @@ export const StyledCaseView = styled.div(({ theme: { base: { palette: { 'app-bac
           ${StyledSummary} {
             padding-inline-end: calc(2 * ${spacing});
           }
+
           ${StyledCaseHeader} {
             border-end-end-radius: ${borderRadius};
           }
@@ -783,6 +955,10 @@ export const StyledCaseView = styled.div(({ theme: { base: { palette: { 'app-bac
         css `
         ${StyledGenAICoachContainer} {
           height: 42.5rem;
+
+          ${StyledInitialMessageContainer} {
+            justify-content: center;
+          }
         }
       `}
     `;
@@ -802,22 +978,53 @@ export const StyledCoachButton = styled(AIButton)(({ theme: { base: { spacing, b
     position: fixed;
     width: 2.75rem;
     height: 2.75rem;
-    inset-block-end: calc(2 * ${spacing});
+    inset-block-end: calc(
+      var(--footer-height, var(--appshell-bottom-offset, 0rem)) + 2 * ${spacing}
+    );
     inset-inline-end: calc(2 * ${spacing});
     ${previewActive &&
         css `
-      @media (min-width: ${breakpoints.xl}) {
+      @media (min-width: ${breakpoints.md}) {
         margin-inline-end: min(var(--resize-drawer-width), ${resizeDrawerMaxWidth});
       }
     `}
   `;
 });
 StyledCoachButton.defaultProps = defaultThemeProp;
-export const StyledUtilitiesWrapper = styled.div(({ genAIHeight }) => {
-    return genAIHeight !== undefined
-        ? css `
-        padding-block-end: calc(${genAIHeight}px + 1rem);
-      `
-        : null;
+export const StyledUtilitiesWrapper = styled.div ``;
+export const StyledCaseViewIcon = styled(Icon)(({ theme }) => {
+    const { color } = useCaseViewContext();
+    const caseTypeColorsEnabled = theme.base['case-type-colors'] === 'icon-only' ||
+        theme.base['case-type-colors'] === 'header-and-icon';
+    const resolvedCaseTypeColor = caseTypeColorsEnabled && color !== undefined ? resolveCaseTypeColor(theme, color) : undefined;
+    return css `
+    --icon-color: ${resolvedCaseTypeColor ?? theme.base.palette['brand-accent']};
+    --gradient-start: oklch(from var(--icon-color) calc(l - 0.3) calc(c * 1.5) h);
+    --gradient-mid: oklch(from var(--icon-color) l c h);
+    --gradient-end: oklch(from var(--icon-color) calc(l + 0.5) calc(c * 1.5) h);
+
+    ${theme.components['case-view'].icon.color !== 'auto' &&
+        css `
+      color: ${theme.components['case-view'].icon.color};
+    `}
+
+    ${theme.components['case-view'].icon.background !== 'auto' &&
+        css `
+      background: ${theme.components['case-view'].icon.background};
+    `}
+
+    ${theme.components['case-view'].icon.background === 'auto' &&
+        caseTypeColorsEnabled &&
+        resolvedCaseTypeColor &&
+        css `
+      background: ${resolvedCaseTypeColor};
+    `}
+
+    ${theme.components['case-view'].icon['box-shadow'] !== 'auto' &&
+        css `
+      box-shadow: ${theme.components['case-view'].icon['box-shadow']};
+    `}
+  `;
 });
+StyledCaseViewIcon.defaultProps = defaultThemeProp;
 //# sourceMappingURL=CaseView.styles.js.map