/* Site-wide development notice (cloud/templates/onboarding/_notice.html).  Literal colours and
   specific selectors on purpose: it appears on the landing page, the onboarding pages, the
   knowledge pages and the workspace shell, which each define their own tokens and bare p/a rules. */
.site-notice { box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 0.75rem;
  width: 100%; padding: 0.55rem 1rem; background: #11203b; border-bottom: 1px solid #2c4472;
  color: #dbe6f7; font: 400 0.875rem/1.45 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-align: center; }
.site-notice[hidden] { display: none !important; }
.site-notice .site-notice-text { margin: 0; color: #dbe6f7; font: inherit; max-width: 60rem; }
.site-notice .site-notice-link { color: #9ec9ff; text-decoration: underline; text-underline-offset: 0.15em; overflow-wrap: anywhere; }
.site-notice .site-notice-link:hover { color: #ffffff; }
.site-notice .site-notice-link:focus-visible, .site-notice .site-notice-close:focus-visible { outline: 2px solid #9ec9ff; outline-offset: 2px; }

/* In the workspace shell the page is a fixed-height app, so the notice floats over it.  It is pinned to the
   top, never the bottom: the composer, record button, toasts and phone navigation all live at the bottom.
   notice.js moves it under the shell's header when there is one.  z-index 80 keeps it below the recording
   overlay, the image lightbox and the dialogs (90 and above). */
.site-notice.site-notice-float { position: fixed; z-index: 80; left: 50%; transform: translateX(-50%);
  top: calc(0.5rem + env(safe-area-inset-top, 0px)); width: auto; max-width: min(34rem, calc(100vw - 1.5rem));
  border: 1px solid #2c4472; border-radius: 0.75rem; padding: 0.5rem 0.5rem 0.5rem 0.9rem; font-size: 0.8125rem;
  text-align: left; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); }
.site-notice .site-notice-close { flex: none; width: 1.75rem; height: 1.75rem; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: #dbe6f7; font: 400 1.25rem/1 system-ui, sans-serif; cursor: pointer; }
.site-notice .site-notice-close:hover { background: rgba(255, 255, 255, 0.12); }