:global(.webchat-fluent) .part-grouping-decorator { font-family: var(--webchat-fontFamilyBase); min-width: 0; /* #region Token defaults */ --webchat-part-grouping__bubble--space-inline: var(--webchat-spacingHorizontalL); --webchat-part-grouping__bubble--space-block: var(--webchat-spacingVerticalM); --webchat-part-grouping__bubble--min-height: var(--webchat-bubble-minHeight); --webchat-part-grouping__bubble--max-width: var(--webchat-bubble-maxWidth); --webchat-part-grouping__bubble--min-width: var(--webchat-bubble-minWidth); --webchat-part-grouping__bubble--border-color: transparent; --webchat-part-grouping__bubble--border-radius: var(--webchat-borderRadiusXLarge); --webchat-part-grouping__bubble-content--background: var(--webchat-part-grouping__bubble--background-color); --webchat-part-grouping__bubble-content--shadow: var(--webchat-part-grouping__bubble--box-shadow); --webchat-part-grouping__code-block--space-inline: var(--webchat-part-grouping__bubble--space-inline); --webchat-part-grouping__collapsible-content--space-block-start-end: var(--webchat-spacingVerticalNone) var(--webchat-part-grouping__bubble--space-block); --webchat-part-grouping__message-status--space-block: calc(var(--webchat-part-grouping__bubble--space-block) + 1px); --webchat-part-grouping__text-content--space-block-inline: var(--webchat-part-grouping__bubble--space-block) var(--webchat-part-grouping__bubble--space-inline); --webchat-bubble-maxWidth: var(--bubble-maxWidth, max(450px, 75%)); --webchat-bubble-minWidth: var(--bubble-minWidth, auto); --webchat-bubble-minHeight: var(--bubble-minHeight, 36px); --webchat-externalLink-mask: var( --externalLink-mask, var(--webchat__icon-url--external-link) center center / 10px 10px ); --webchat-externalLink-maxWidth: var(--externalLink-maxWidth, 204px); &.part-grouping-decorator--from-user { --webchat-part-grouping__bubble--background-color: var(--webchat-colorBrandBackground2); --webchat-part-grouping__bubble--space-block: var(--webchat-spacingVerticalS); --webchat-part-grouping__bubble--min-width: auto; } &.part-grouping-decorator--from-bot { --webchat-part-grouping__bubble--background-color: var(--webchat-colorNeutralBackground1); --webchat-part-grouping__bubble--space-block: var(--webchat-spacingVerticalM); --webchat-part-grouping__bubble--min-width: var(--webchat-bubble-minWidth); } /* #endregion */ /* #region Generated badge & attachments */ :global(.stacked-layout .bubble .text-content__generated-badge) { align-items: center; align-self: flex-start; background-color: var(--webchat-colorNeutralBackground5); border-radius: var(--webchat-borderRadiusMedium); box-sizing: border-box; color: var(--webchat-colorNeutralForeground3); cursor: default; display: inline-flex; font-size: var(--webchat-fontSizeBase100); height: 16px; line-height: var(--webchat-lineHeightBase100); padding-inline: var(--webchat-spacingHorizontalXS); } :global(.message-status-loader) { --webchat__component-icon--mask: unset; --webchat__component-icon--image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%22%20height%3D%22100%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22a%22%20x1%3D%22-.5%22%20x2%3D%221.5%22%20y1%3D%22.5%22%20y2%3D%22.5%22%20gradientUnits%3D%22objectBoundingBox%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23d161aa%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23e96d80%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22b%22%20x1%3D%22-.5%22%20x2%3D%221.5%22%20y1%3D%22.5%22%20y2%3D%22.5%22%20gradientUnits%3D%22objectBoundingBox%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%2342a3a6%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2373af69%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22c%22%20x1%3D%22-.5%22%20x2%3D%221.5%22%20y1%3D%22.5%22%20y2%3D%22.5%22%20gradientUnits%3D%22objectBoundingBox%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%2365a5dd%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%238173ee%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22url(%23a)%22%3E%3Canimate%20attributeName%3D%22r%22%20begin%3D%220s%22%20calcMode%3D%22spline%22%20dur%3D%223.6s%22%20keySplines%3D%220.8%200%200.2%201%3B0.8%200%200.2%201%3B0.8%200%200.2%201%3B0.8%200%200.2%201%3B0.8%200%200.2%201%3B0.8%200%200.2%201%22%20keyTimes%3D%220%3B0.1667%3B0.3333%3B0.5%3B0.6667%3B0.8333%3B1%22%20repeatCount%3D%22indefinite%22%20values%3D%2250%3B0%3B0%3B0%3B0%3B49%3B49%22%2F%3E%3Canimate%20attributeName%3D%22opacity%22%20begin%3D%220s%22%20calcMode%3D%22spline%22%20dur%3D%223.6s%22%20keySplines%3D%220.8%200%200.2%201%3B0.8%200%200.2%201%3B0.8%200%200.2%201%3B0.8%200%200.2%201%3B0.8%200%200.2%201%3B0.8%200%200.2%201%22%20keyTimes%3D%220%3B0.1667%3B0.3333%3B0.5%3B0.6667%3B0.6668%3B1%22%20repeatCount%3D%22indefinite%22%20values%3D%221%3B0%3B0%3B0%3B0%3B1%3B1%22%2F%3E%3Canimate%20attributeName%3D%22cx%22%20begin%3D%220s%22%20calcMode%3D%22spline%22%20dur%3D%223.6s%22%20keySplines%3D%220.8%200%200.2%201%3B0.8%200%200.2%201%3B0.8%200%200.2%201%3B0.8%200%200.2%201%3B0.8%200%200.2%201%3B0.8%200%200.2%201%22%20keyTimes%3D%220%3B0.1667%3B0.3333%3B0.5%3B0.6667%3B0.8333%3B1%22%20repeatCount%3D%22indefinite%22%20values%3D%2250%3B100%3B0%3B0%3B0%3B50%3B50%22%2F%3E%3C%2Fcircle%3E%3Ccircle%20cy%3D%2250%22%20r%3D%220%22%20fill%3D%22url(%23b)%22%20opacity%3D%220%22%3E%3Canimate%20attributeName%3D%22r%22%20begin%3D%220s%22%20calcMode%3D%22spline%22%20dur%3D%223.6s%22%20keySplines%3D%220.8%200%200.2%201%3B0.8%200%200.2%201%3B0.8%200%200.2%201%3B0.8%200%200.2%201%3B0.8%200%200.2%201%3B0.8%200%200.2%201%22%20keyTimes%3D%220%3B0.1667%3B0.3333%3B0.5%3B0.6667%3B0.8333%3B1%22%20repeatCount%3D%22indefinite%22%20values%3D%220%3B49%3B49%3B0%3B0%3B0%3B0%22%2F%3E%3Canimate%20attributeName%3D%22opacity%22%20begin%3D%220s%22%20calcMode%3D%22spline%22%20dur%3D%223.6s%22%20keySplines%3D%220.8%200%200.2%201%3B0.8%200%200.2%201%3B0.8%200%200.2%201%3B0.8%200%200.2%201%3B0.8%200%200.2%201%3B0.8%200%200.2%201%22%20keyTimes%3D%220%3B0.0001%3B0.3333%3B0.5%3B0.6667%3B0.8333%3B1%22%20repeatCount%3D%22indefinite%22%20values%3D%220%3B1%3B1%3B0%3B0%3B0%3B0%22%2F%3E%3Canimate%20attributeName%3D%22cx%22%20begin%3D%220s%22%20calcMode%3D%22spline%22%20dur%3D%223.6s%22%20keySplines%3D%220.8%200%200.2%201%3B0.8%200%200.2%201%3B0.8%200%200.2%201%3B0.8%200%200.2%201%3B0.8%200%200.2%201%3B0.8%200%200.2%201%22%20keyTimes%3D%220%3B0.1667%3B0.3333%3B0.5%3B0.6667%3B0.8333%3B1%22%20repeatCount%3D%22indefinite%22%20values%3D%220%3B50%3B50%3B100%3B0%3B0%3B0%22%2F%3E%3C%2Fcircle%3E%3Ccircle%20cy%3D%2250%22%20r%3D%220%22%20fill%3D%22url(%23c)%22%20opacity%3D%220%22%3E%3Canimate%20attributeName%3D%22r%22%20begin%3D%220s%22%20calcMode%3D%22spline%22%20dur%3D%223.6s%22%20keySplines%3D%220.8%200%200.2%201%3B0.8%200%200.2%201%3B0.8%200%200.2%201%3B0.8%200%200.2%201%3B0.8%200%200.2%201%3B0.8%200%200.2%201%22%20keyTimes%3D%220%3B0.1667%3B0.3333%3B0.5%3B0.6667%3B0.8333%3B1%22%20repeatCount%3D%22indefinite%22%20values%3D%220%3B0%3B0%3B49%3B49%3B0%3B0%22%2F%3E%3Canimate%20attributeName%3D%22opacity%22%20begin%3D%220s%22%20calcMode%3D%22spline%22%20dur%3D%223.6s%22%20keySplines%3D%220.8%200%200.2%201%3B0.8%200%200.2%201%3B0.8%200%200.2%201%3B0.8%200%200.2%201%3B0.8%200%200.2%201%3B0.8%200%200.2%201%22%20keyTimes%3D%220%3B0.1667%3B0.1668%3B0.5%3B0.6667%3B0.8333%3B1%22%20repeatCount%3D%22indefinite%22%20values%3D%220%3B0%3B0%3B1%3B1%3B0%3B0%22%2F%3E%3Canimate%20attributeName%3D%22cx%22%20begin%3D%220s%22%20calcMode%3D%22spline%22%20dur%3D%223.6s%22%20keySplines%3D%220.8%200%200.2%201%3B0.8%200%200.2%201%3B0.8%200%200.2%201%3B0.8%200%200.2%201%3B0.8%200%200.2%201%3B0.8%200%200.2%201%22%20keyTimes%3D%220%3B0.1667%3B0.3333%3B0.5%3B0.6667%3B0.8333%3B1%22%20repeatCount%3D%22indefinite%22%20values%3D%220%3B0%3B0%3B50%3B50%3B100%3B0%22%2F%3E%3C%2Fcircle%3E%3C%2Fsvg%3E'); animation: none; color: transparent; @media (prefers-reduced-motion: reduce) { --webchat__component-icon--image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%22%20height%3D%22100%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22a%22%20x1%3D%22-.5%22%20x2%3D%221.5%22%20y1%3D%22.5%22%20y2%3D%22.5%22%20gradientUnits%3D%22objectBoundingBox%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23d161aa%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23e96d80%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2249%22%20fill%3D%22url(%23a)%22%2F%3E%3C%2Fsvg%3E'); } } :global(.stacked-layout .bubble .webchat__fileContent__badge) { cursor: default; font-size: var(--webchat-fontSizeBase300); line-height: var(--webchat-lineHeightBase300); :global(.webchat__fileContent__fileName) { color: var(--webchat-colorBrandForegroundLink); font-family: inherit; } :global(.webchat__fileContent__size) { color: var(--webchat-colorNeutralForeground2); font-family: inherit; } } :global(.stacked-layout .bubble .webchat__fileContent__downloadIcon) { color: var(--webchat-colorBrandForegroundLink); } /* #endregion */ /* #region Markdown & citations */ :global(.render-markdown) a[href]:not(:global(.render-markdown__pure-identifier)) { color: var(--webchat-colorBrandForegroundLink); text-decoration-color: transparent; &:target { color: var(--webchat-colorBrandForegroundLinkSelected); } &:hover { color: var(--webchat-colorBrandForegroundLinkHover); text-decoration: underline 1px currentColor; } &:active { color: var(--webchat-colorBrandForegroundLinkPressed); } &:focus-visible { outline: none; text-decoration: underline 1px double var(--webchat-colorStrokeFocus2); } :global(.render-markdown__external-link-icon) { background: currentColor; -webkit-mask: var(--webchat__icon-url--external-link) no-repeat; mask: var(--webchat__icon-url--external-link) no-repeat; } } :global(.render-markdown :is(.render-markdown__citation, .render-markdown__pure-identifier)) { align-items: center; background-color: var(--webchat-colorNeutralBackground3); border-radius: var(--webchat-borderRadiusMedium); border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke2); box-sizing: border-box; color: var(--webchat-colorNeutralForeground2); display: inline-flex; font-size: var(--webchat-fontSizeBase100); font-weight: var(--webchat-fontWeightSemibold); justify-content: center; line-height: 12.4px; margin-left: var(--webchat-spacingHorizontalXXS); margin-right: var(--webchat-spacingHorizontalXXS); min-height: 12.4px; min-width: 14px; text-decoration: none; transition: all var(--webchat-durationNormal) var(--webchat-curveDecelerateMid); vertical-align: calc((var(--webchat-lineHeightBase100) - var(--webchat-fontSizeBase100)) / 2); &:hover { background-color: var(--webchat-colorBrandBackground2Hover); border-color: var(--webchat-colorBrandStroke2Hover); color: var(--webchat-colorBrandForeground2Hover); cursor: pointer; } &:hover:active { background-color: var(--webchat-colorBrandBackground2Pressed); border-color: var(--webchat-colorBrandStroke2Pressed); color: var(--webchat-colorBrandForeground2Pressed); } &::before, &::after { all: unset; } &:has(:global(.render-markdown__external-link-icon)) { padding-inline: 3px; } :global(.render-markdown__external-link-icon) { background: currentColor; height: 0.7em; -webkit-mask: var(--webchat__icon-url--external-link) no-repeat; mask: var(--webchat__icon-url--external-link) no-repeat; } } /* #endregion */ /* #region Citation summary */ :global(.link-definitions__header) { border-radius: var(--webchat-borderRadiusMedium); :global(.link-definitions__header-text) { color: var(--webchat-colorNeutralForeground3); } :global(.link-definitions__message-sensitivity-label-text) { color: var(--webchat-colorNeutralForeground4); } :global(.link-definitions__header-chevron) { color: var(--webchat-colorNeutralForeground3); font-size: var(--webchat__font-size--small); } &:focus-visible { outline-offset: 1px; outline: var(--webchat-strokeWidthThin) solid var(--webchat-colorStrokeFocus2); } } :global(.link-definitions) { --webchat__citation__external-link--mask: var(--webchat-externalLink-mask); --webchat__citation__link--max-width: var(--webchat-externalLink-maxWidth); :global(.link-definitions__list) { color: var(--webchat__color--subtle); display: flex; flex-flow: row wrap; gap: var(--webchat-spacingHorizontalS); } :global(.link-definitions__list-item) { border-radius: var(--webchat-borderRadiusMedium); max-width: var(--webchat__citation__link--max-width); } :global(.link-definitions__list-item-box) { background-color: var(--webchat-colorNeutralBackground3); border-radius: var(--webchat-borderRadiusMedium); border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke2); box-sizing: border-box; color: currentColor; display: inline-flex; font-size: var(--webchat__font-size--small); height: 24px; padding-inline-end: var(--webchat-spacingHorizontalS); } :global(.link-definitions__list-item-body) { font-family: inherit; gap: var(--webchat-spacingHorizontalSNudge); min-width: 0; padding: 0; } :global(.link-definitions__badge) { align-self: center; background-color: transparent; border-radius: 0; border: none; color: currentColor; font-size: var(--webchat-fontSizeBase100); font-weight: var(--webchat-fontWeightSemibold); line-height: var(--webchat-lineHeightBase100); margin: 0; min-width: 20px; padding: 0; position: relative; text-align: center; } :global(.link-definitions__badge)::after { border-right: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke2); bottom: 0; content: ''; display: block; height: 16px; position: absolute; right: 0; top: 0; width: 0; } :global(.link-definitions__list-item-main-text) { gap: var(--webchat-spacingHorizontalXS); } :global(.link-definitions__list-item-text) { color: currentColor; text-decoration: none; text-overflow: ellipsis; } :global(.link-definitions__list-item-main-text):has(:global(.link-definitions__open-in-new-window-icon))::before { align-self: center; background: currentColor; color: currentColor; content: ''; flex: none; font-size: var(--webchat-fontSizeBase400); height: 1em; -webkit-mask: var(--webchat__citation__external-link--mask) no-repeat; mask: var(--webchat__citation__external-link--mask) no-repeat; padding: 0; width: 1em; } /* It seems Copilot does not show per-item sensitivity label, i.e. "General", etc. */ :global(.link-definitions__list-item-badge), :global(.link-definitions__open-in-new-window-icon) { display: none; } } /* #endregion */ /* #region Header & collapsible grouping */ :global(.stacked-layout .collapsible-grouping__header) { justify-content: flex-start; min-width: 0; padding: var(--webchat-spacingVerticalNone) var(--webchat-spacingHorizontalNone); place-self: start; position: relative; :global(.activity-button) { background: transparent; border: none; cursor: pointer; font-size: var(--webchat-fontSizeBase300); padding: var(--webchat-spacingVerticalXXS) var(--webchat-spacingHorizontalXS); &::after { content: ''; cursor: pointer; display: block; inset: 0; position: absolute; } } :global(.activity-button__text) { font-size: 0; height: 0; overflow: clip; position: absolute; width: 0; } } :global(.stacked-layout .collapsible-grouping__content .part-grouping-activity__activities) { --webchat--collapsible-grouping__list--gap: var(--webchat-spacingVerticalS); padding: var(--webchat-spacingVerticalL) var(--webchat-spacingHorizontalL); } :global(.stacked-layout .collapsible-grouping) { display: grid; &:global(.collapsible-grouping--open) { gap: var(--webchat-spacingVerticalM); } } :global(.collapsible-grouping__content .stacked-layout .stacked-layout__title), :global(.collapsible-grouping__title) { color: var(--webchat-colorNeutralForeground2); font-size: var(--webchat-fontSizeBase300); font-weight: var(--webchat-fontWeightSemibold); line-height: var(--webchat-lineHeightBase300); } :global(.collapsible-grouping), :global(.collapsible-grouping__header) { border: none; } :global(.stacked-layout .stacked-layout__message-status) { --webchat__component-icon--size: 14px; color: var(--webchat-colorNeutralForeground2); font-size: var(--webchat-fontSizeBase400); } :global(.collapsible-grouping) { max-width: 100%; :global(.stacked-layout__message-status) { height: unset; width: unset; :global(.component-icon) { height: 19px; width: 19px; } } :global(.stacked-layout .activity-loader) { display: none; } :global(.part-grouping-decorator .bubble .bubble__content) { box-sizing: content-box; gap: var(--webchat-spacingVerticalXS); } } /* #endregion */ /* #region Stacked layout & message status */ :global(.stacked-layout) { display: flex; flex-flow: column nowrap; margin-inline: var(--webchat-spacingHorizontalMNudge); :global(.stacked-layout) { margin-inline: var(--webchat-spacingHorizontalNone); position: static; } :global(.stacked-layout__main .stacked-layout__title) { color: var(--webchat-colorNeutralForeground4); font-size: var(--webchat-fontSizeBase400); line-height: var(--webchat-lineHeightBase400); margin: var(--webchat-part-grouping__bubble--space-block) var(--webchat-part-grouping__bubble--space-inline); } &:global(.stacked-layout--no-message .stacked-layout__attachment-row:first-child) { margin-block-start: 0; } } :global(.stacked-layout .stacked-layout__main .stacked-layout__message-status) { margin-block-start: var(--webchat-part-grouping__message-status--space-block); } :global(.stacked-layout .stacked-layout__content:has(.bubble)) { max-width: 100%; overflow: visible; } :global(.stacked-layout .stacked-layout__status) { font-size: var(--webchat__font-size--small); line-height: var(--webchat__line-height--small); } /* #endregion */ /* #region Carousel layout */ :global(.carousel-layout) { :global(.carousel-filmstrip__avatar-gutter), :global(.carousel-filmstrip__alignment-pad) { margin: 0; width: var(--webchat-spacingHorizontalMNudge); } } /* #endregion */ /* #region Bubble surface */ :global(.stacked-layout .bubble) { max-width: min(var(--webchat-part-grouping__bubble--max-width), 100%); min-width: var(--webchat-part-grouping__bubble--min-width); overflow: visible; } :global(.stacked-layout .bubble):has(:global(.activity-loader)) :global(.bubble__content) { background: unset; box-shadow: unset; border-color: transparent; } :global(.stacked-layout .bubble .bubble__content) { background-color: var(--webchat-part-grouping__bubble-content--background); border-color: var(--webchat-part-grouping__bubble--border-color); border-radius: var(--webchat-part-grouping__bubble--border-radius); border-width: 0; box-shadow: var(--webchat-part-grouping__bubble-content--shadow); box-sizing: border-box; color: var(--webchat-colorNeutralForeground1); max-width: 100%; min-height: var(--webchat-part-grouping__bubble--min-height); } :global(.stacked-layout .bubble .text-content) { font-size: var(--webchat__font-size--medium); line-height: var(--webchat__line-height--medium); min-height: auto; padding: var(--webchat-part-grouping__text-content--space-block-inline); &:empty { padding-block-end: 0; } + :global(.text-content) { margin-top: calc(var(--webchat-part-grouping__bubble--space-block) * -1); } } /* #endregion */ /* #region Code blocks */ :global(.stacked-layout .bubble .code-block-content) { border-radius: var(--webchat-borderRadiusXLarge); border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke1); font-size: var(--webchat-fontSizeBase300); font-weight: var(--webchat-fontWeightRegular); margin-block: var(--webchat-spacingVerticalNone); margin-inline: var(--webchat-part-grouping__code-block--space-inline); :global(.code-block-content__header) { padding: var(--webchat-spacingVerticalM) var(--webchat-spacingHorizontalL); } :global(.code-block-content__code-block) { padding-block: var(--webchat-spacingVerticalM); padding-inline: var(--webchat-spacingHorizontalL) var(--webchat-spacingHorizontalS); } :global(.code-block-copy-button) { --webchat__code-block__copy-button--color: var(--webchat-colorNeutralForeground1); --webchat__code-block__copy-button--background: var(--webchat-colorNeutralBackground3); margin-block-start: var(--webchat-spacingVerticalM); margin-inline-end: var(--webchat-spacingHorizontalL); position: absolute; right: 0; top: 0; } } /* #endregion */ /* #region Collapsible content */ :global(.stacked-layout .bubble .collapsible-content) { :global(.collapsible-content__summary) { &:focus-visible { border-radius: var(--webchat-borderRadiusSmall); outline-offset: 4px; outline: var(--webchat-strokeWidthThick) solid var(--webchat-colorStrokeFocus2); } } :global(.collapsible-content__content) { margin-block: var(--webchat-part-grouping__collapsible-content--space-block-start-end); :global(.stacked-layout__attachment-list) { gap: var(--webchat-spacingVerticalS); } :global(.stacked-layout__attachment-row) { margin: 0; :global(.text-content) { padding-block: 0; } } } } /* #endregion */ /* #region Group modifier */ &.part-grouping-decorator--group { --webchat-part-grouping__bubble-content--background: unset; --webchat-part-grouping__bubble-content--shadow: unset; --webchat-part-grouping__text-content--space-block-inline: var(--webchat-spacingVerticalXS) var(--webchat-part-grouping__bubble--space-inline); --webchat-part-grouping__message-status--space-block: var(--webchat-spacingVerticalXS); --webchat-part-grouping__code-block--space-inline: var(--webchat-part-grouping__bubble--space-inline) var(--webchat-spacingHorizontalNone); --webchat-part-grouping__collapsible-content--space-block-start-end: var(--webchat-spacingVerticalS) var(--webchat-spacingVerticalNone); :global(.stacked-layout .stacked-layout__main .stacked-layout__title), :global(.stacked-layout .stacked-layout__main .collapsible-content__summary) { margin: var(--webchat-spacingVerticalXS) var(--webchat-part-grouping__bubble--space-inline); } } /* #endregion */ /* #region Variant: Fluent */ &.variant-fluent { --webchat-part-grouping__bubble--box-shadow: var(--webchat-shadow4); :global(.stacked-layout .transcript-focus-area__activity-list) { --webchat--collapsible-grouping__list--gap: var(--webchat-spacingVerticalXS); padding: var(--webchat-spacingVerticalNone) var(--webchat-spacingHorizontalNone); gap: var(--webchat-spacingVerticalXS); } :global(.stacked-layout .stacked-layout__attachment-row) { margin-block-start: var(--webchat-spacingVerticalMNudge); } &.part-grouping-decorator--group { --webchat-part-grouping__bubble--min-height: 20px; :global(.collapsible-grouping) { anchor-name: --webchat-flair; border-radius: var(--webchat-part-grouping__bubble--border-radius); max-width: min(var(--webchat-part-grouping__bubble--max-width), 100%); padding: var(--webchat-part-grouping__bubble--space-block) var(--webchat-part-grouping__bubble--space-inline); position: relative; transition: background-color var(--webchat-durationNormal) var(--webchat-curveDecelerateMid), box-shadow var(--webchat-durationNormal) var(--webchat-curveDecelerateMid); :global(.collapsible-grouping__header .stacked-layout__message-status) { margin-block-start: var(--webchat-spacingVerticalNone); margin-inline-start: var(--webchat-spacingHorizontalNone); } :global(.stacked-layout .stacked-layout__message-status) { margin-inline-end: calc(var(--webchat-spacingHorizontalS) * -1); } } &:has(:global(.collapsible-grouping--open)) { :global(.collapsible-grouping) { background-color: var(--webchat-part-grouping__bubble--background-color); box-shadow: var(--webchat-part-grouping__bubble--box-shadow); } } :global(.bubble) { position: static; } :global(.border-flair) { border-radius: var(--webchat-part-grouping__bubble--border-radius); } :global(.bubble .bubble__content) { margin-block: calc(var(--webchat-spacingVerticalS) * -1); padding-block: var(--webchat-spacingVerticalS); } } } /* #endregion */ /* #region Variant: copilot */ &.variant-copilot { --webchat-part-grouping__bubble--border-color: transparent; --webchat-part-grouping__message-status--space-block: var(--webchat-spacingVerticalNone); padding-inline-start: var(--webchat-spacingHorizontalSNudge); position: relative; &.part-grouping-decorator--from-user { --webchat-part-grouping__bubble--border-color: var(--webchat-colorBrandStroke2); } &.part-grouping-decorator--from-bot { --webchat-part-grouping__bubble--border-color: var(--webchat-colorNeutralStroke1); --webchat-part-grouping__bubble--border-radius: var(--webchat-borderRadius2XLarge); --webchat-part-grouping__bubble--space-block: var(--webchat-spacingVerticalNone); --webchat-part-grouping__bubble--space-inline: var(--webchat-spacingHorizontalNone); --webchat-part-grouping__bubble--max-width: 100%; --webchat-part-grouping__bubble--min-height: 20px; --webchat-part-grouping__code-block--space-inline: var(--webchat-spacingHorizontalNone); margin-inline-end: var(--webchat-spacingHorizontalSNudge); :global(.stacked-layout) { margin: 0; position: static; } :global(.carousel-layout) { :global(.carousel-filmstrip__avatar-gutter), :global(.carousel-filmstrip__alignment-pad) { width: 0; } } :global(.bubble) { position: static; width: var(--webchat-part-grouping__bubble--max-width); :global(.bubble__content .adaptive-card-renderer > .ac-adaptiveCard) { font-family: var(--webchat-fontFamilyBase); /* Remove double padding for adaptive cards inside bubble */ padding: unset !important; :global(.ac-textBlock) { font-family: var(--webchat-fontFamilyBase) !important; } :global(.ac-container:not([style*='background-color:']) .ac-textBlock), > :global(.ac-textBlock) { color: currentColor !important; } :global(.ac-pushButton) { background-color: var(--webchat-colorNeutralBackground1); color: var(--webchat-colorNeutralForeground1); border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke1); border-radius: var(--webchat-borderRadiusLarge); transition: all var(--webchat-durationNormal) var(--webchat-curveDecelerateMid); } :global(.ac-pushButton:hover) { background-color: var(--webchat-colorNeutralBackground1Hover); border-color: var(--webchat-colorNeutralStroke1Hover); color: var(--webchat-colorNeutralForeground1Hover); cursor: pointer; } :global(.ac-pushButton:active), :global(.ac-pushButton[aria-pressed='true']) { background-color: var(--webchat-colorNeutralBackground1Pressed); border-color: var(--webchat-colorNeutralStroke1Pressed); color: var(--webchat-colorNeutralForeground1Pressed); outline-style: none; } :global(.ac-pushButton:focus-visible) { border-color: var(--webchat-colorStrokeFocus2); border-width: var(--webchat-strokeWidthThin); outline: var(--webchat-strokeWidthThick) solid var(--webchat-colorTransparentStroke); box-shadow: 0 0 0 var(--webchat-strokeWidthThin) var(--webchat-colorStrokeFocus2) inset; } :global(.ac-pushButton.primary) { background-color: var(--webchat-colorBrandBackground); border-color: transparent; color: var(--webchat-colorNeutralForegroundOnBrand); } :global(.ac-pushButton.primary:hover) { background-color: var(--webchat-colorBrandBackgroundHover); border-color: transparent; color: var(--webchat-colorNeutralForegroundOnBrand); } :global(.ac-pushButton.primary:active), :global(.ac-pushButton.primary[aria-pressed='true']) { background-color: var(--webchat-colorBrandBackgroundPressed); border-color: transparent; color: var(--webchat-colorNeutralForegroundOnBrand); } } } &:not(.part-grouping-decorator--group) { :global(.bubble__content) { display: flex; flex-direction: column; gap: var(--webchat-spacingVerticalS); } } :global(.bubble .collapsible-content .collapsible-content__content) { margin-block: var(--webchat-spacingVerticalNone); :global(.stacked-layout__attachment-list) { margin-block-start: var(--webchat-spacingVerticalS); } :global(.stacked-layout__attachment) { max-width: var(--webchat-part-grouping__bubble--max-width); } } :global(.stacked-layout__status) { display: none; } } &.part-grouping-decorator--group { --webchat-part-grouping__message-status--space-block: var(--webchat-spacingVerticalNone); --webchat-part-grouping__text-content--space-block-inline: var(--webchat-spacingVerticalNone) var(--webchat-spacingHorizontalNone); :global(.collapsible-grouping__content) { border: var(--webchat-strokeWidthThin) solid transparent; border-radius: var(--webchat-part-grouping__bubble--border-radius); position: relative; @supports (anchor-name: --webchat-flair) { anchor-name: --webchat-flair; position: static; } } &:has(:global(.collapsible-grouping--open)) { :global(.collapsible-grouping__content) { background-color: var(--webchat-part-grouping__bubble--background-color); border-color: var(--webchat-part-grouping__bubble--border-color); } } :global(.bubble .bubble__content) { margin-block: calc(var(--webchat-spacingVerticalS) * -1); padding-block: var(--webchat-spacingVerticalS); :global(.stacked-layout__bubble .stacked-layout__title), :global(.stacked-layout__bubble .collapsible-content__summary) { color: var(--webchat-colorNeutralForeground2); margin-block: var(--webchat-spacingVerticalXXS); } :global(.stacked-loyout__bubble .stacked-layout__message-status), :global(.stacked-layout__bubble .stacked-layout__title), :global(.stacked-layout__bubble .collapsible-content__summary), :global(.stacked-layout__bubble .text-content) { font-size: var(--webchat-fontSizeBase200); line-height: var(--webchat-lineHeightBase200); } :global(.stacked-layout__bubble .text-content) { color: var(--webchat-colorNeutralForeground3); } } } &.part-grouping-decorator--from-bot:not(.part-grouping-decorator--group) :global(.bubble__content) { box-sizing: content-box; padding-block: var(--webchat-spacingVerticalM); padding-inline: var(--webchat-spacingHorizontalL); } &:not(.part-grouping-decorator--group) :global(.stacked-layout .bubble .bubble__content) { border-width: var(--webchat-strokeWidthThin); border-style: solid; } &:not(.part-grouping-decorator--group) :global(.bubble:not(.bubble--from-user) .bubble__content) { anchor-name: --webchat-flair; max-width: unset; } :global(.activity-status) { margin: 0 0 var(--webchat-spacingHorizontalXXS); } :global(.stacked-layout__status) { order: -1; } &:has(:global(.bubble--from-user)) { :global(.bubble) { margin-block-end: var(--webchat-spacingVerticalM); } } &:has(:global(.bubble.bubble--from-user)), &:has(:global(.pre-chat-message-activity)), &:has(:global(.liner-message-activity)) { padding-inline-start: var(--webchat-spacingHorizontalNone); } :global(.bubble .text-content .text-content__generated-badge) { display: none; } :global(.stacked-layout) { margin-inline: var(--webchat-spacingHorizontalSNudge); } :global(.stacked-layout:has(.collapsible-grouping)) { margin-inline: var(--webchat-spacingHorizontalNone); } :global(.collapsible-grouping) { margin-inline: var(--webchat-spacingHorizontalXS); } :global(.collapsible-grouping .collapsible-grouping__chevron), :global(.collapsible-content .collapsible-content__chevron) { transform: rotate(270deg); } :global(.collapsible-grouping--open .collapsible-grouping__chevron), :global(.collapsible-content[open] .collapsible-content__chevron) { transform: rotate(360deg); } :global(.collapsible-grouping__header) { margin-inline: calc(var(--webchat-spacingHorizontalXS) * -1); } :global(.collapsible-grouping__title) { color: var(--webchat-colorNeutralForeground2); font-size: var(--webchat-fontSizeBase200); font-weight: var(--webchat-fontWeightSemibold); line-height: var(--webchat-lineHeightBase200); } :global(.collapsible-grouping__content) { anchor-name: --webchat-flair; background: var(--webchat-colorNeutralBackground1); background-clip: padding-box; border-radius: var(--webchat-borderRadius2XLarge); height: unset; opacity: unset; visibility: unset; } :global(.collapsible-grouping__list) > * { interpolate-size: allow-keywords; transition: margin calc(var(--webchat__transition-duration) / 2) var(--webchat__transition-easing), height calc(var(--webchat__transition-duration) / 2) var(--webchat__transition-easing); } :global(.collapsible-grouping__content--open .collapsible-grouping__list) > * { /* We use animation so we can reset needed properties immediately upon switching classes */ animation: collapsible-grouping__fade-in var(--webchat__transition-duration) calc(var(--webchat__transition-duration) / 4) var(--webchat__transition-easing) both; height: auto; transition: margin var(--webchat__transition-duration) var(--webchat__transition-easing), height var(--webchat__transition-duration) var(--webchat__transition-easing); } :global(.collapsible-grouping__content:not(.collapsible-grouping__content--open)) { /* We use animation so we can reset needed properties immediately upon switching classes */ animation: collapsible-grouping__fade-in var(--webchat__transition-duration) var(--webchat__transition-duration) var(--webchat__transition-easing) both; } :global(.collapsible-grouping__content:not(.collapsible-grouping__content--open) .collapsible-grouping__list) { padding: var(--webchat-spacingVerticalNone) var(--webchat-spacingHorizontalNone); > *:not(:has(:global(.stacked-layout__message-status--incomplete))) { height: 0; margin: 0; visibility: hidden; overflow: clip; } > *:has(:global(.stacked-layout__message-status--incomplete)) { /* We use animation so we can reset needed properties immediately upon switching classes */ animation: collapsible-grouping__fade-in var(--webchat__transition-duration) var(--webchat__transition-duration) var(--webchat__transition-easing) both; pointer-events: none; :global(.stacked-layout__message-status--incomplete), :global(.collapsible-content__chevron) { visibility: hidden; } } &:has(:global(.stacked-layout__message-status--incomplete)) { padding: var(--webchat-spacingVerticalNone) var(--webchat-spacingHorizontalNone); transform: translate(-4px, -20px); margin-block-end: calc(-20px - var(--webchat--collapsible-grouping__list--gap)); } } :global(.stacked-layout .stacked-layout__message-status) { --webchat__component-icon--size: 14px; color: var(--webchat-colorNeutralForeground2); height: 20px; margin-inline: var(--webchat-spacingHorizontalNone) var(--webchat-spacingHorizontalS); width: 20px; :global(.component-icon) { height: unset; width: unset; } } :global(.stacked-layout .transcript-focus-area__activity-list) { --webchat--collapsible-grouping__list--gap: var(--webchat-spacingVerticalS); padding: var(--webchat-spacingVerticalM) var(--webchat-spacingHorizontalM); } :global(.border-flair) { border-radius: var(--webchat-borderRadius2XLarge); inset: anchor(top) anchor(right) anchor(bottom) anchor(left); position-anchor: --webchat-flair; } } /* #endregion */ } @keyframes collapsible-grouping__fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }