.AIChat-responseText * {
  all: revert;
}

.AIChatButton {
  position: relative;
}

.AIChat-generatedFieldMarker {
  background-color: var(--color-purple3);
  border-radius: 5px;
  color: var(--color-gray7);
  margin-bottom: 5px;
  margin-left: 15px;
  padding: 5px;
  text-align: center;
  white-space: nowrap;
  width: fit-content;
}

.AIChatButton {
  --IconButton-name: 'magic_button';
  position: absolute;
  right: 0;
  top: var(--gap-xl);
}

.AIChatButton:has(+ .AutoExpand > .ProseMirrorContainer) {
  top: var(--gap-m);
}

.CIG-row.is-unlabeled .AIChatButton {
  top: calc(-1 * (var(--gap-s) * 3 + var(--Icon-size)));
}

.frame[name='ai-chat'].loading {
  visibility: visible;
}

/* Keep AIChat frame content visible while loading so users can see previous conversations */
.AIChat-frame.loading {
  visibility: visible;
}

.AIChat-suggestions {
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--gap-m);

  > button {
    margin: 0 var(--gap-s) var(--gap-s) 0;
  }
}

.AIChat-frame > .Message {
  margin: calc(0px - var(--Widget-padding));
  margin-bottom: var(--Widget-padding);
}

.AIChat-prompt,
.AIChat-response {
  background: var(--color-gray1);
  border-radius: var(--gap-s);
  padding: var(--gap-m) var(--gap-m) var(--gap-m) calc(var(--gap-m) * 2 + var(--Icon-size));
  position: relative;
}

.AIChat-prompt {
  margin-bottom: var(--gap-m);
}

.AIChat-response {
  margin-bottom: calc(var(--Text-height) + var(--gap-l));
  min-height: calc(var(--gap-m) * 2 + var(--Text-height));
}

/* Esca replaces the old magic_button glyph: pin it in the reserved icon gutter so the response
   text stays aligned with the prompt text. The component sizes itself from --esca-avatar-size
   (inline width/height, so plain width/height won't take), and top centers it on the first line
   like the prompt's person glyph. */
.AIChat-response > btu-esca-avatar {
  --esca-avatar-size: calc(var(--Icon-size) + var(--gap-m));
  left: var(--gap-m);
  margin: 0;
  position: absolute;
  top: calc(var(--gap-m) + (var(--Text-height) - var(--esca-avatar-size)) / 2);
}

.AIChat-prompt::before,
.AIChat-response::before {
  left: var(--gap-m);
  position: absolute;
  top: calc(var(--gap-m) - (var(--Icon-size) - var(--Text-height)) / 2);
}

.AIChat-prompt::before,
.AIChat-response::before {
  color: var(--color-gray5);
  direction: ltr;
  display: inline-block;
  font-family: 'Material Symbols Outlined';
  font-feature-settings: 'liga';
  font-size: var(--Icon-size);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-weight: normal;
  letter-spacing: normal;
  line-height: 1;
  text-rendering: optimizeLegibility;
  text-transform: none;
  transform: var(--Icon-transform);
  vertical-align: top;
  white-space: nowrap;
  word-wrap: normal;
}

.AIChat-prompt::before {
  content: 'person';
}

.AIChat-response.is-error {
  background-color: var(--color-red6);
  color: var(--color-white);
}

.AIChat-response.is-error::before {
  color: var(--color-white);
  content: 'error';
}

.AIChat-controls {
  position: absolute;
  right: 0;
  top: 100%;
}

.AIChat-controls button {
  margin-left: var(--gap-m);
}

.AIChat-ActionBar form {
  display: flex;
  flex-wrap: wrap;
  width: 100%;

  .is-disabled {
    opacity: 0.3;
    pointer-events: none;
  }

  > btu-input {
    width: 100%;

    + button {
      margin-left: 0 !important;
    }
  }
}

.AuthorPersonaContainer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: var(--gap-xl);
}

h2.AuthorPersona-title {
  margin-top: var(--gap-s);
}

.AuthorPersona {
  background-color: var(--color-gray1);
  border: solid 1px var(--color-gray4);
  border-radius: 7px;
  flex-basis: 100%;
  padding: var(--gap-m);
}

select[name='authorPersonaId'] + .ComboInput {
  margin-inline-start: auto;
  width: fit-content;
}

select[name='authorPersonaId'].is-readOnly + .ComboInput {
  pointer-events: none;
  opacity: 0.5;
}

/*
 *  Ask AI
 */

.Page-askAiLink {
  min-width: calc(var(--Icon-size) + var(--gap-m));
  order: 8;
  padding: 0;
}

:root:not(.is-lightHeader) .Page-askAiLink {
  --Link-color: var(--color-white);
  --Link-hoverColor: var(--color-white);
  --Link-decoration: none;
}

.Page.is-askAiOpen {
  --Page-bottom: 40%;

  grid-template: 'broadcastAlert' auto 'broadcast' auto 'header' auto 'content' 1fr 'askAi' 40% / 1fr;
}

.Page-askAi {
  background: var(--color-white);
  border-color: var(--color-gray3);
  border-style: solid;
  border-width: 1px 0 0;
  grid-area: askAi;
  overflow: auto;
  position: relative;
  scroll-behavior: smooth;
}

.Page-askAi .Page.is-askAiOpen {
  display: block;
}

.Page-askAi > .frame {
  background: var(--color-white);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 9;
}

@media (min-width: 577px) {
  .Page-askAiLink {
    margin: 0 calc(var(--gap-l) - var(--gap-s)) 0 calc(0px - var(--gap-s));
  }

  .Page.is-askAiOpen .ContentEdit-preview {
    left: 0;
    right: var(--ContentEdit-rightWidth);
  }
}

@media (min-width: 769px) {
  .Page.is-askAiOpen {
    --Page-bottom: 0px;
    --Page-right: 360px;

    grid-template: 'broadcastAlert broadcastAlert' auto 'broadcast broadcast' auto 'header header' auto 'content askAi' 1fr / 1fr var(
        --Page-right
      );
    .ContentEdit-preview {
      left: auto;
      right: calc(var(--Page-right) + var(--ContentEdit-toolbarWidth));
    }

    .is-asideHidden .ContentEdit-preview {
      right: var(--ContentEdit-toolbarWidth);
    }

    .Page-content,
    .Popup {
      --ContentEdit-leftWidth: calc(
        100vw - var(--ContentEdit-previewWidth) - var(--ContentEdit-toolbarWidth) - var(--Page-right)
      );
    }
  }
}

bsp-ask-ai {
  display: block;
  height: 100%;
}

.AskAI-host {
  height: 100%;
}

.AskAI {
  background-color: var(--color-dominant1);
  border-left: 1px solid var(--color-gray3);
  display: flex;
  flex-direction: column;
  /* Mirrors the v5 text-sm body copy; without this the panel renders at the 16px
     page default and looks out of place next to the rest of the CMS. */
  font-size: var(--fontSize-s);
  height: 100%;
  position: relative;
}

.AskAI-title {
  align-items: center;
  background-color: var(--color-dominant2);
  display: flex;
  font-size: var(--fontSize-m);
  font-weight: bold;
  gap: var(--gap-s);
  justify-content: space-between;
  padding: var(--gap-s) var(--gap-l);
}

.AskAI-title > span:first-child {
  align-items: center;
  display: flex;
  gap: var(--gap-s);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.AskAI-controls {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: var(--gap-s);
}

/* Slightly smaller than the 28px default so the header controls don't dominate the panel. */
.AskAI-title .IconButton {
  --Icon-size: var(--iconSize-s);
}

.AskAI-back {
  --IconButton-name: 'arrow_back';
}

.AskAI-newChat {
  --IconButton-name: 'add_comment';
}

.AskAI-history {
  --IconButton-name: 'history';
}

.AskAI .AskAi-close {
  --IconButton-name: 'close';
}

/* The widget renders native SVG icons (Icon.svelte adds the .btu-icon class).
   This file only loads on the v4 UI, where the Material glyph hooks below
   render the icons instead — so hide the SVGs to avoid a double-render. */
.AskAI .btu-icon {
  display: none;
}

/* Material Symbols glyphs for widget buttons that are not v4 IconButtons.
   Scoped under .AskAI so the reset outweighs the global v4
   `[dir] button` rule that paints borders and padding on every button. */
.AskAI .AskAI-copy,
.AskAI .AskAI-scrollDown,
.AskAI .AskAI-errorDismiss,
.AskAI .AskAI-chatRowMenu {
  background: transparent;
  border: 0;
  color: var(--color-gray5);
  cursor: pointer;
  padding: 0;
}

.AskAI .AskAI-copy:hover,
.AskAI .AskAI-scrollDown:hover,
.AskAI .AskAI-errorDismiss:hover,
.AskAI .AskAI-chatRowMenu:hover {
  color: var(--color-black);
}

.AskAI-copy::before,
.AskAI-scrollDown::before,
.AskAI-errorDismiss::before,
.AskAI-chatRowMenu::before {
  direction: ltr;
  display: inline-block;
  font-family: 'Material Symbols Outlined';
  font-feature-settings: 'liga';
  font-size: var(--Icon-size);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-weight: normal;
  letter-spacing: normal;
  line-height: 1;
  text-rendering: optimizeLegibility;
  text-transform: none;
  vertical-align: top;
  white-space: nowrap;
  word-wrap: normal;
}

.AskAI-copy::before {
  content: 'content_copy';
}

.AskAI-copy.is-copied::before {
  content: 'check';
}

.AskAI-copy.is-copyFailed::before {
  content: 'error';
}

.AskAI-scrollDown::before {
  content: 'arrow_downward';
}

.AskAI-errorDismiss::before {
  content: 'close';
}

.AskAI-chatRowMenu::before {
  content: 'more_vert';
}

.AskAI-error {
  align-items: center;
  animation: fadeIn 0.3s ease-in-out;
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-gray3);
  color: var(--color-red6);
  display: flex;
  font-size: var(--fontSize-s);
  gap: var(--gap-s);
  justify-content: space-between;
  padding: var(--gap-s) var(--gap-l);
}

.AskAI-errorDismiss {
  color: inherit;
  flex-shrink: 0;
}

.AskAI-conversationWrap {
  flex: 1 1 0%;
  min-height: 0;
  position: relative;
}

.AskAI-conversation {
  inset: 0;
  overflow-y: scroll;
  padding: var(--gap-m);
  position: absolute;
  z-index: 1;
}

.AskAI-results {
  margin-bottom: var(--gap-l);
}

.AskAI-initial,
.AskAI-userQuestionContainer,
.AskAI-answer {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray3);
  margin-top: var(--gap-m);
  padding: var(--gap-m);
}

.AskAI-initial {
  align-items: center;
  display: flex;
  margin-top: 0;
}

.AskAI-initial p {
  color: var(--color-gray5);
  font-size: var(--fontSize-xs);
  margin: 0;
}

.AskAI-userQuestionContainer {
  align-items: center;
  display: flex;
  font-weight: bold;
}

.AskAI-userQuestion {
  flex: 1;
  min-width: 0;
}

.AskAI .Icon,
.AskAI .Avatar {
  margin-right: var(--gap-m);
}

.AskAI-answer {
  position: relative;
}

.AskAI-copy {
  --Icon-size: var(--iconSize-xs);

  position: absolute;
  right: var(--gap-s);
  top: var(--gap-s);
}

.AskAI sup {
  color: var(--color-blue5);
  font-size: var(--fontSize-xs);
  line-height: var(--lineHeight-xs);
}

.AskAI a.ai-chat-citation {
  color: inherit;
  text-decoration: none;
}

.AskAI-answer details {
  font-size: var(--fontSize-s);
  margin-top: var(--gap-m);
}

.AskAI-answer details summary {
  color: var(--color-gray5);
  cursor: pointer;
  font-weight: bold;
}

.AskAI-answer details ol {
  list-style: decimal;
  margin-top: var(--gap-s);
  padding-left: var(--gap-l);
}

.AskAI-answer details ol li {
  margin-bottom: var(--gap-xs);
}

.AskAI-toolStatus {
  background-color: var(--color-dominant2);
  border-radius: var(--gap-xs);
  display: inline-flex;
  font-size: var(--fontSize-s);
  gap: var(--gap-xs);
  margin-right: var(--gap-xs);
  margin-top: var(--gap-s);
  padding: var(--gap-xs) var(--gap-s);
}

.AskAI-toolStatus.is-error {
  background-color: var(--color-red6);
  color: var(--color-white);
}

/* Doubly scoped to win over both the shared button reset above and the global
   v4 `[dir] button` rule, since this button keeps its own border and background. */
.AskAI .AskAI-scrollDown {
  --Icon-size: var(--iconSize-s);

  align-items: center;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray3);
  border-radius: 50%;
  bottom: var(--gap-m);
  box-shadow: var(--shadow-1);
  display: flex;
  height: calc(var(--gap-s) * 2 + var(--Icon-size));
  justify-content: center;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: calc(var(--gap-s) * 2 + var(--Icon-size));
  z-index: 2;
}

.AskAI-form {
  align-items: center;
  background-color: var(--color-white);
  border-top: 1px solid var(--color-dominant2);
  display: flex;
  gap: var(--gap-m);
  padding: var(--gap-m);
}

/* The CMS form enhancement wraps the raw input in a <btu-input> element, so the
   wrapper (not the input) is the flex child that has to grow. */
.AskAI-form > btu-input {
  flex: 1;
  min-width: 0;
}

.AskAI-query {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray4);
  flex: 1;
  font: inherit;
  min-width: 0;
  padding: var(--gap-s) var(--gap-m);
  width: 100%;
}

.AskAI-query:disabled {
  background-color: var(--color-gray1);
  color: var(--color-gray5);
  cursor: not-allowed;
}

.AskAI-query:disabled::placeholder {
  color: var(--color-gray4);
  font-style: italic;
}

button.AskAI-button {
  background-color: var(--Link-color);
  border: 0;
  color: var(--color-white);
  cursor: pointer;
  padding: var(--gap-s) var(--gap-m);
}

button.AskAI-button:disabled {
  cursor: default;
  opacity: 0.5;
}

.AskAI-formControls {
  align-items: center;
  display: flex;
}

#askAiChatsPanel {
  background-color: var(--color-white);
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.AskAI-chatList {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.AskAI-chatsEmpty {
  color: var(--color-gray5);
  padding: var(--gap-m);
  text-align: center;
}

.AskAI-chatRow {
  align-items: center;
  border-bottom: 1px solid var(--color-gray3);
  display: flex;
}

.AskAI-chatRow:hover {
  background-color: var(--color-gray1);
}

.AskAI .AskAI-chatRowLoad {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  flex: 1;
  font: inherit;
  min-width: 0;
  padding: var(--gap-m) var(--gap-l);
  text-align: left;
  text-transform: none;
}

/* Clamp lives on the inner span: line-clamped text bleeds through the
   padding-bottom of the element it is applied to. */
.AskAI-chatRowText {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.AskAI-chatRowLoad[aria-current='true'] {
  font-weight: bold;
}

.AskAI .AskAI-chatRowMenu {
  flex-shrink: 0;
  margin-right: var(--gap-s);
  padding: var(--gap-s);
}

.AskAI-chatRename {
  border: 1px solid var(--color-gray4);
  flex: 1;
  font-size: var(--fontSize-s);
  margin: var(--gap-s) var(--gap-l);
  min-width: 0;
  padding: var(--gap-xs) var(--gap-s);
}

.AskAI .AskAI-rowMenuBackdrop {
  background: transparent;
  border: 0;
  cursor: default;
  inset: 0;
  padding: 0;
  position: fixed;
  z-index: 40;
}

/* Width must stay 160px to match ROW_MENU_WIDTH in ChatsPanel.svelte. */
.AskAI-rowMenu {
  background-color: var(--color-white);
  border: 1px solid var(--color-gray3);
  box-shadow: var(--shadow-1);
  padding: var(--gap-xs) 0;
  position: fixed;
  width: 160px;
  z-index: 50;
}

.AskAI .AskAI-rowMenuItem {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: block;
  font: inherit;
  text-transform: none;
  padding: var(--gap-s) var(--gap-l);
  text-align: left;
  width: 100%;
}

.AskAI-rowMenuItem:hover {
  background-color: var(--color-gray1);
}

.AskAI-rowMenuItem.is-danger {
  color: var(--color-red6);
}

.AskAI-loading,
.AIChat-loading {
  background-color: var(--color-dominant2);
  border-radius: var(--gap-l);
  display: inline-block;
  padding: 0 var(--gap-xs);
  white-space: nowrap;
  width: calc(var(--gap-l) + var(--gap-xl));
}

.AskAI-loading > i::after,
.AIChat-loading > i::after {
  /* Unique name: the bundled btu styles also define a global @keyframes ellipsis, which would otherwise shadow this one. */
  animation: ai-loading-ellipsis steps(5, end) 900ms infinite;
  /* btu's preflight sets border-box on ::after; keep content-box so the 40px reveal isn't eaten by padding. */
  box-sizing: content-box;
  content: '\2022 \2022 \2022';
  display: inline-block;
  line-height: 0.8rem;
  overflow: hidden;
  padding: 0 var(--gap-s);
  text-wrap: nowrap;
  width: 0;
}

@keyframes ai-loading-ellipsis {
  to {
    width: 40px;
  }
}

/*
 * Audit Dashboard Widget
 */

.KeyMetrics-container {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.75rem;
  padding-bottom: var(--gap-xl);
}

.KeyMetrics-group {
  display: flex;
  flex-direction: column;
}

.KeyMetrics-icon.Icon::before {
  content: attr(data-icon);
}

.KeyMetrics-icon.Icon {
  align-items: center;
  display: flex;
  justify-content: center;
  margin-right: var(--gap-s);
}

.KeyMetrics-item {
  background: var(--color-white);
  box-shadow: var(--shadow-1);
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex: 1 1 200px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  padding: var(--gap-m);
}

.KeyMetrics-value {
  font-weight: bold;
}

/*
 * Usage Dashboard Widget
 */

.UsageDashboardWidget-barChart {
  margin-top: var(--gap-l);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}