.site-announcement {
  position: relative;
  z-index: 1040;
  --announcement-hover: rgb(0 0 0 / 18%);
  --announcement-pressed: rgb(0 0 0 / 28%);
  color: var(--announcement-foreground, #000000);
  background: var(--announcement-background, #F59E0B);
  text-align: left;
  font: var(--text-body-sm)/var(--line-height-body) var(--font-family-sans);
}
.site-announcement--dark {
  --announcement-hover: rgb(255 255 255 / 18%);
  --announcement-pressed: rgb(255 255 255 / 28%);
}
.site-announcement[hidden], .site-announcement__close[hidden] { display: none; }
.site-announcement__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-6);
}
.site-announcement__content { flex: 1; min-width: 0; overflow-wrap: anywhere; white-space: pre-line; }
/* styles.css assigns an !important light color to every paragraph. Keep this
   exception local so arbitrary announcement backgrounds retain their contrast. */
.site-announcement__content p { margin: 0; color: inherit !important; }
.site-announcement__content p + p { margin-top: var(--space-2); }
.site-announcement__content a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }
.site-announcement__content a:hover { color: inherit; text-decoration-thickness: 2px; }
.site-announcement__close {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  color: inherit;
  background: transparent;
  font-size: var(--text-xl);
  line-height: 1;
  cursor: pointer;
}
.site-announcement__close:hover { background: var(--announcement-hover); }
.site-announcement__close:active { background: var(--announcement-pressed); }
.site-announcement :focus-visible { outline: var(--focus-ring-width) solid currentColor; outline-offset: var(--focus-ring-offset); }
@media (max-width: 575.98px) {
  .site-announcement__inner { padding-inline: var(--space-4); gap: var(--space-2); }
}

/* overflow-x:hidden creates an unintended body scroll container (overflow-y:auto)
   and traps sticky children while the document scrolls. Clip only while visible;
   intentional overflow-y locks for modals/workspaces remain untouched. */
html.announcement-visible,
html.announcement-visible body { overflow-x: clip !important; }
/* Lock the viewport, not a second body scroller, when a drawer/modal is open. */
html.announcement-visible:has(> body.sidebar-open),
html.announcement-visible:has(> body.modal-open),
html.announcement-visible:has(> body.offcanvas-open) { overflow-y: hidden !important; }
html.announcement-visible body.sidebar-open,
html.announcement-visible body.modal-open,
html.announcement-visible body.offcanvas-open,
html.announcement-visible body.offcanvas-nav-open { overflow: clip !important; }
.site-announcement[data-enhanced] { position: sticky; top: 0; }
/* Both sticky elements retain their flow space. The site shell's old fixed-header
   spacer is therefore removed only while the announcement is visible. */
body[data-announcement-shell="site"] > #global-announcement:not([hidden]) ~ #header_id {
  position: sticky !important;
}
body > #global-announcement[data-enhanced]:not([hidden]) ~ #header_id {
  top: var(--announcement-height, 0px) !important;
}
body[data-announcement-shell="site"] > #global-announcement:not([hidden]) ~ main { padding-top: 0; }
body > #global-announcement ~ #transparent-menu-background {
  top: var(--announcement-height, 0px) !important;
}
/* Without measurement use a coherent normal-flow stack, including its background.
   No invisible fixed shell is left behind when the user scrolls. */
body > #global-announcement:not([data-enhanced]):not([hidden]) ~ #header_id {
  position: static !important;
}
body > #global-announcement:not([data-enhanced]):not([hidden]) ~ #transparent-menu-background {
  display: none;
}
/* Full-height desktop navigation must start below the in-flow announcement. */
@media (min-width: 992px) {
  body.ai-chat-page > #global-announcement ~ main ai-leftbar .panel,
  body.vs-page > #global-announcement ~ main .vs-sidebar {
    top: var(--announcement-height, 0px) !important;
    height: calc(100dvh - var(--announcement-height, 0px)) !important;
  }
  /* Without JS there is no measured offset: keep navigation in its grid column
     below the header rather than covering its first controls with the banner. */
  body.ai-chat-page > #global-announcement:not([data-enhanced]) ~ main ai-leftbar .panel,
  body.vs-page > #global-announcement:not([data-enhanced]) ~ main .vs-sidebar {
    position: static !important;
    height: auto !important;
  }
}
body.ai-chat-page > #global-announcement ~ main ai-center[data-empty="1"] .ai-center-inner {
  height: calc(100dvh - var(--site-header-h, 72px) - var(--announcement-height, 0px)) !important;
}
body.ai-chat-page > #global-announcement ~ main,
body.ai-chat-page > #global-announcement ~ main #wrapper_main_menu_content,
body.ai-chat-page > #global-announcement ~ main ai-app,
body.ai-chat-page > #global-announcement ~ main ai-app #shell,
body.ai-chat-page > #global-announcement ~ main ai-app .center-wrap,
body.ai-chat-page > #global-announcement ~ main ai-center {
  min-height: calc(100dvh - var(--site-header-h, 72px) - var(--announcement-height, 0px));
}
body.vs-page > #global-announcement ~ main .vs-app {
  min-height: calc(100dvh - 71px - var(--announcement-height, 0px));
}
@media (max-width: 991.98px) {
  body > #global-announcement[data-enhanced]:not([hidden]) ~ #header_id #offcanvasNavbar2,
  body.ai-chat-page > #global-announcement[data-enhanced]:not([hidden]) ~ main ai-leftbar .panel,
  body.vs-page > #global-announcement[data-enhanced]:not([hidden]) ~ main .vs-sidebar {
    top: var(--announcement-height, 0px) !important;
    height: calc(100dvh - var(--announcement-height, 0px)) !important;
  }
  body.vs-page > #global-announcement ~ main .vs-app {
    min-height: calc(100dvh - 72px - var(--announcement-height, 0px));
  }
}