@blukavantui/community 0.0.0-stage → 1.0.1

package/dist/feedback.css

@@ -0,0 +1,1136 @@
+/* BluUI_Core → CommandPalette — owning Block stylesheet. */
+/* Shared control primitives, scoped to this component's runtime host. */
+.blu-command { --blu-widget-primary: var(--bluui-color-primary-solid, #4f46e5); color: var(--bluui-text, #182230); font: 14px/1.5 var(--bluui-font, Inter, ui-sans-serif, system-ui, sans-serif); min-width: 0; width: 100%; }
+.blu-command *, .blu-command *::before, .blu-command *::after { box-sizing: border-box; }
+.blu-command [hidden] { display: none !important; }
+.blu-command .blu-control { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 7px 12px; border: 1px solid var(--bluui-border, #dce3ed); border-radius: 8px; background: var(--bluui-surface, #fff); color: var(--bluui-text, #344054); font: inherit; font-weight: 500; line-height: 1.25; cursor: pointer; white-space: nowrap; }
+.blu-command .blu-control:hover:not(:disabled) { background: var(--bluui-surface-muted, #f4f5fb); border-color: var(--bluui-primary-border, #a5a1f8); }
+.blu-command .blu-control--primary { background: var(--blu-widget-primary); border-color: var(--blu-widget-primary); color: var(--bluui-on-primary, white); }
+.blu-command .blu-control--primary:hover:not(:disabled) { background: var(--bluui-color-primary-solid, #4338ca); color: var(--bluui-on-primary, white); }
+.blu-command .blu-control--quiet { border-color: transparent; background: transparent; }
+.blu-command .blu-control--icon { flex: 0 0 32px; min-width: 32px; min-height: 32px; padding: 3px; font-size: 18px; }
+.blu-command .blu-control:disabled { opacity: .5; cursor: default; }
+.blu-command .blu-input { min-width: 0; width: 100%; min-height: 38px; padding: 7px 10px; border: 1px solid var(--bluui-control-border, #d5deea); border-radius: 7px; background: var(--bluui-surface, white); color: var(--bluui-text, #182230); font: inherit; }
+.blu-command :is(.blu-control, .blu-input):focus-visible { outline: 2px solid var(--blu-widget-primary); outline-offset: 2px; }
+.blu-command .blu-component-error { color: var(--bluui-danger-text, #b42318); font-size: 12px; margin: 8px 0; overflow-wrap: anywhere; }
+.blu-command .blu-interactive__empty { padding: 24px 12px; color: var(--bluui-text-muted, #667085); text-align: center; }
+/* Native design canvas stand-in; runtime content stays in the empty host. */
+.blu-command-block > .blu-component-preview { display: none; -servicestudio-display: block; -servicestudio-padding: 18px; -servicestudio-border: 1px dashed var(--bluui-control-border, #c7d0e0); -servicestudio-border-radius: 10px; }
+
+/* Native dialog supplies the top layer, focus containment, and inert backdrop. */
+.blu-command__dialog { padding: 0; width: min(620px, calc(100vw - 32px)); max-height: min(650px, calc(100dvh - 48px)); border: 1px solid var(--bluui-border, #dce3ed); border-radius: 14px; color: var(--bluui-text, #182230); box-shadow: 0 28px 90px #10182840; overflow: hidden; }
+.blu-command__dialog::backdrop { background: var(--bluui-scrim, #18223066); backdrop-filter: blur(3px); }
+.blu-command .blu-command__dialog > .blu-input { height: 60px; padding: 18px 20px; border: 0; border-radius: 0; border-bottom: 1px solid var(--bluui-border, #e6eaf1); font-size: 16px; }
+.blu-command__list { list-style: none; margin: 0; padding: 10px; max-height: min(430px, calc(100dvh - 200px)); overflow: auto; }
+.blu-command__group { padding: 12px 10px 6px; color: var(--bluui-text-muted, #667085); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
+.blu-command__option { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 52px; padding: 10px 12px; margin: 3px 0; border-radius: 8px; cursor: pointer; }
+.blu-command__option[aria-selected="true"] { background: var(--bluui-primary-soft, #f0edff); color: var(--bluui-primary-text, #4338ca); }
+.blu-command__option[aria-disabled="true"] { opacity: .45; cursor: default; }
+.blu-command__copy { display: flex; flex-direction: column; }
+.blu-command__copy small { color: var(--bluui-text-muted, #667085); font-size: 12px; }
+.blu-command kbd { padding: 2px 6px; background: var(--bluui-surface-muted, #f5f6fa); border: 1px solid var(--bluui-border, #dce3ed); border-radius: 4px; font: 11px ui-monospace, monospace; white-space: nowrap; }
+.blu-command__footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 14px; border-top: 1px solid var(--bluui-border, #e6eaf1); color: var(--bluui-text-muted, #667085); font-size: 11px; }
+
+/* Runtime validation messages sit beside the interactive root. */
+.blu-command-block .blu-component-error { color: var(--bluui-danger-text, #b42318); font-size: 12px; margin: 8px 0; overflow-wrap: anywhere; }
+
+/* Shared controls used by this Block. Colors resolve through BluUITheme. */
+.blu-common-button{
+  appearance:none;
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  gap:8px;
+  min-height:36px;
+  padding:7px 13px;
+  border:1px solid var(--bluui-border,#dce3ed);
+  border-radius:8px;
+  background:var(--bluui-surface,#fff);
+  color:var(--bluui-text,#182333);
+  font:inherit;
+  font-size:13px;
+  font-weight:600;
+  line-height:1.4;
+  white-space:nowrap;
+  cursor:pointer;
+  text-decoration:none;
+  box-shadow:none
+}
+.blu-common-button:hover:not(:disabled){
+  background:var(--bluui-surface-muted,#f4f6fa);
+  border-color:var(--bluui-primary,#5144ed)
+}
+.blu-common-button--primary{
+  background:var(--bluui-color-primary-solid,#5144ed);
+  color:var(--bluui-color-primary-contrast,#fff);
+  border-color:transparent
+}
+.blu-common-button--primary:hover:not(:disabled){
+  background:var(--bluui-color-primary-solid,#5144ed);
+  filter:brightness(.93)
+}
+.blu-common-button:disabled{
+  opacity:.45;
+  cursor:not-allowed
+}
+.blu-common-button:focus-visible,.blu-pagination input:focus-visible,.blu-pagination select:focus-visible{
+  outline:3px solid var(--bluui-primary,#5144ed);
+  outline-offset:2px
+}
+.blu-common-muted{
+  color:var(--bluui-text-muted,#68758b);
+  font-size:14px
+}
+.blu-common-error{
+  color:var(--bluui-color-error-text,#b42318);
+  font-size:13px;
+  margin:8px 0
+}
+.blu-common-error[hidden]{
+  display:none!important
+}
+
+/* Top-layer overlay. Native Content and Footer widgets stay alive while closed. */
+.blu-overlay{
+  position:fixed;
+  inset:0;
+  width:100vw;
+  height:100dvh;
+  max-width:none;
+  max-height:none;
+  border:0;
+  margin:0;
+  padding:24px;
+  box-sizing:border-box;
+  background:rgba(8,14,27,.52);
+  backdrop-filter:blur(3px);
+  z-index:1100;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  color:var(--bluui-text)
+}
+.blu-overlay[hidden]{
+  display:none!important
+}
+.blu-overlay::backdrop{
+  background:transparent
+}
+.blu-overlay__panel{
+  width:min(560px,100%);
+  max-height:calc(100dvh - 48px);
+  display:flex;
+  flex-direction:column;
+  border:1px solid var(--bluui-border);
+  border-radius:18px;
+  background:var(--bluui-surface);
+  box-shadow:0 28px 90px #0005;
+  outline:none;
+  overflow:hidden
+}
+.blu-overlay[data-size=small] .blu-overlay__panel{
+  width:min(400px,100%)
+}
+.blu-overlay[data-size=large] .blu-overlay__panel{
+  width:min(800px,100%)
+}
+.blu-overlay__header{
+  position:relative;
+  padding:24px 64px 20px 24px;
+  border-bottom:1px solid var(--bluui-border)
+}
+.blu-overlay__header h2{
+  font-size:21px;
+  line-height:1.35;
+  letter-spacing:-.02em;
+  margin:0
+}
+.blu-overlay__description{
+  margin:8px 0 0;
+  font-size:14px;
+  line-height:1.6;
+  color:var(--bluui-text-muted)
+}
+.blu-overlay__description[hidden]{
+  display:none
+}
+.blu-overlay__close{
+  position:absolute;
+  right:18px;
+  top:20px;
+  padding:0;
+  width:34px;
+  min-height:34px;
+  font-size:23px;
+  border:0;
+  background:transparent
+}
+.blu-overlay__content{
+  padding:24px;
+  overflow:auto;
+  min-height:0;
+  line-height:1.6
+}
+.blu-overlay__footer{
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  gap:12px;
+  flex-wrap:wrap;
+  padding:16px 24px;
+  background:var(--bluui-surface-muted);
+  border-top:1px solid var(--bluui-border)
+}
+.blu-overlay__footer[hidden]{
+  display:none
+}
+.blu-overlay__actions{
+  display:flex;
+  gap:8px;
+  margin-left:auto
+}
+.blu-overlay__actions[hidden]{
+  display:none
+}
+/* Drawer variations share the same overlay and focus behavior. */
+.blu-overlay--drawer{
+  padding:0;
+  justify-content:flex-end;
+  align-items:stretch
+}
+.blu-overlay--drawer .blu-overlay__panel{
+  max-height:100dvh;
+  border-radius:18px 0 0 18px;
+  width:min(480px,calc(100vw - 24px))
+}
+.blu-overlay--drawer .blu-overlay__content{
+  flex:1
+}
+.blu-overlay--drawer[data-placement=left]{
+  justify-content:flex-start
+}
+.blu-overlay--drawer[data-placement=left] .blu-overlay__panel{
+  border-radius:0 18px 18px 0
+}
+.blu-overlay--drawer[data-placement=bottom]{
+  align-items:flex-end;
+  justify-content:center
+}
+.blu-overlay--drawer[data-placement=bottom] .blu-overlay__panel{
+  width:100%;
+  max-height:85dvh;
+  border-radius:18px 18px 0 0
+}
+@media(max-width:600px){.blu-overlay{
+  padding:12px
+}
+.blu-overlay--drawer{
+  padding:0
+}
+.blu-overlay__panel{
+  max-height:calc(100dvh - 24px)
+}
+.blu-overlay__header,.blu-overlay__content{
+  padding:20px
+}
+.blu-overlay__header{
+  padding-right:56px
+}
+.blu-overlay__footer{
+  padding:14px 20px
+}}
+
+/* Hide the canvas-only caption once this instance has initialized. */
+.blu-modal-block:has([data-blu-ready]) > .blu-component-preview {
+  display: none;
+}
+
+/* Shared controls used by this Block. Colors resolve through BluUITheme. */
+.blu-common-button{
+  appearance:none;
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  gap:8px;
+  min-height:36px;
+  padding:7px 13px;
+  border:1px solid var(--bluui-border,#dce3ed);
+  border-radius:8px;
+  background:var(--bluui-surface,#fff);
+  color:var(--bluui-text,#182333);
+  font:inherit;
+  font-size:13px;
+  font-weight:600;
+  line-height:1.4;
+  white-space:nowrap;
+  cursor:pointer;
+  text-decoration:none;
+  box-shadow:none
+}
+.blu-common-button:hover:not(:disabled){
+  background:var(--bluui-surface-muted,#f4f6fa);
+  border-color:var(--bluui-primary,#5144ed)
+}
+.blu-common-button--primary{
+  background:var(--bluui-color-primary-solid,#5144ed);
+  color:var(--bluui-color-primary-contrast,#fff);
+  border-color:transparent
+}
+.blu-common-button--primary:hover:not(:disabled){
+  background:var(--bluui-color-primary-solid,#5144ed);
+  filter:brightness(.93)
+}
+.blu-common-button:disabled{
+  opacity:.45;
+  cursor:not-allowed
+}
+.blu-common-button:focus-visible,.blu-pagination input:focus-visible,.blu-pagination select:focus-visible{
+  outline:3px solid var(--bluui-primary,#5144ed);
+  outline-offset:2px
+}
+.blu-common-muted{
+  color:var(--bluui-text-muted,#68758b);
+  font-size:14px
+}
+.blu-common-error{
+  color:var(--bluui-color-error-text,#b42318);
+  font-size:13px;
+  margin:8px 0
+}
+.blu-common-error[hidden]{
+  display:none!important
+}
+
+/* Top-layer overlay. Native Content and Footer widgets stay alive while closed. */
+.blu-overlay{
+  position:fixed;
+  inset:0;
+  width:100vw;
+  height:100dvh;
+  max-width:none;
+  max-height:none;
+  border:0;
+  margin:0;
+  padding:24px;
+  box-sizing:border-box;
+  background:rgba(8,14,27,.52);
+  backdrop-filter:blur(3px);
+  z-index:1100;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  color:var(--bluui-text)
+}
+.blu-overlay[hidden]{
+  display:none!important
+}
+.blu-overlay::backdrop{
+  background:transparent
+}
+.blu-overlay__panel{
+  width:min(560px,100%);
+  max-height:calc(100dvh - 48px);
+  display:flex;
+  flex-direction:column;
+  border:1px solid var(--bluui-border);
+  border-radius:18px;
+  background:var(--bluui-surface);
+  box-shadow:0 28px 90px #0005;
+  outline:none;
+  overflow:hidden
+}
+.blu-overlay[data-size=small] .blu-overlay__panel{
+  width:min(400px,100%)
+}
+.blu-overlay[data-size=large] .blu-overlay__panel{
+  width:min(800px,100%)
+}
+.blu-overlay__header{
+  position:relative;
+  padding:24px 64px 20px 24px;
+  border-bottom:1px solid var(--bluui-border)
+}
+.blu-overlay__header h2{
+  font-size:21px;
+  line-height:1.35;
+  letter-spacing:-.02em;
+  margin:0
+}
+.blu-overlay__description{
+  margin:8px 0 0;
+  font-size:14px;
+  line-height:1.6;
+  color:var(--bluui-text-muted)
+}
+.blu-overlay__description[hidden]{
+  display:none
+}
+.blu-overlay__close{
+  position:absolute;
+  right:18px;
+  top:20px;
+  padding:0;
+  width:34px;
+  min-height:34px;
+  font-size:23px;
+  border:0;
+  background:transparent
+}
+.blu-overlay__content{
+  padding:24px;
+  overflow:auto;
+  min-height:0;
+  line-height:1.6
+}
+.blu-overlay__footer{
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  gap:12px;
+  flex-wrap:wrap;
+  padding:16px 24px;
+  background:var(--bluui-surface-muted);
+  border-top:1px solid var(--bluui-border)
+}
+.blu-overlay__footer[hidden]{
+  display:none
+}
+.blu-overlay__actions{
+  display:flex;
+  gap:8px;
+  margin-left:auto
+}
+.blu-overlay__actions[hidden]{
+  display:none
+}
+/* Drawer variations share the same overlay and focus behavior. */
+.blu-overlay--drawer{
+  padding:0;
+  justify-content:flex-end;
+  align-items:stretch
+}
+.blu-overlay--drawer .blu-overlay__panel{
+  max-height:100dvh;
+  border-radius:0;
+  width:min(480px,calc(100vw - 24px))
+}
+.blu-overlay--drawer .blu-overlay__content{
+  flex:1
+}
+.blu-overlay--drawer[data-placement=left]{
+  justify-content:flex-start
+}
+.blu-overlay--drawer[data-placement=left] .blu-overlay__panel{
+  border-radius:0
+}
+.blu-overlay--drawer[data-placement=bottom]{
+  align-items:flex-end;
+  justify-content:center
+}
+.blu-overlay--drawer[data-placement=bottom] .blu-overlay__panel{
+  width:100%;
+  max-height:85dvh;
+  border-radius:0
+}
+@media(max-width:600px){.blu-overlay{
+  padding:12px
+}
+.blu-overlay--drawer{
+  padding:0
+}
+.blu-overlay__panel{
+  max-height:calc(100dvh - 24px)
+}
+.blu-overlay__header,.blu-overlay__content{
+  padding:20px
+}
+.blu-overlay__header{
+  padding-right:56px
+}
+.blu-overlay__footer{
+  padding:14px 20px
+}}
+
+/* Hide the canvas-only caption once this instance has initialized. */
+.blu-drawer-block:has([data-blu-ready]) > .blu-component-preview {
+  display: none;
+}
+
+/* Keep the Drawer square when another overlay component loads its shared rules. */
+.blu-overlay.blu-overlay--drawer[data-placement] .blu-overlay__panel {
+  border-radius: 0;
+}
+
+/* Shared controls used by this Block. Colors resolve through BluUITheme. */
+.blu-common-button{
+  appearance:none;
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  gap:8px;
+  min-height:36px;
+  padding:7px 13px;
+  border:1px solid var(--bluui-border,#dce3ed);
+  border-radius:8px;
+  background:var(--bluui-surface,#fff);
+  color:var(--bluui-text,#182333);
+  font:inherit;
+  font-size:13px;
+  font-weight:600;
+  line-height:1.4;
+  white-space:nowrap;
+  cursor:pointer;
+  text-decoration:none;
+  box-shadow:none
+}
+.blu-common-button:hover:not(:disabled){
+  background:var(--bluui-surface-muted,#f4f6fa);
+  border-color:var(--bluui-primary,#5144ed)
+}
+.blu-common-button--primary{
+  background:var(--bluui-color-primary-solid,#5144ed);
+  color:var(--bluui-color-primary-contrast,#fff);
+  border-color:transparent
+}
+.blu-common-button--primary:hover:not(:disabled){
+  background:var(--bluui-color-primary-solid,#5144ed);
+  filter:brightness(.93)
+}
+.blu-common-button:disabled{
+  opacity:.45;
+  cursor:not-allowed
+}
+.blu-common-button:focus-visible,.blu-pagination input:focus-visible,.blu-pagination select:focus-visible{
+  outline:3px solid var(--bluui-primary,#5144ed);
+  outline-offset:2px
+}
+.blu-common-muted{
+  color:var(--bluui-text-muted,#68758b);
+  font-size:14px
+}
+.blu-common-error{
+  color:var(--bluui-color-error-text,#b42318);
+  font-size:13px;
+  margin:8px 0
+}
+.blu-common-error[hidden]{
+  display:none!important
+}
+
+/* Fixed message stack. Only individual cards receive pointer events. */
+/* Persistent live regions remain accessible while taking no visual space.
+   Never use display:none or hidden: either would suppress announcements. */
+.blu-notification__announcer{
+  position:absolute;
+  width:1px;
+  height:1px;
+  padding:0;
+  margin:-1px;
+  overflow:hidden;
+  clip-path:inset(50%);
+  white-space:nowrap;
+  border:0
+}
+.blu-notifications{
+  position:fixed;
+  z-index:1300;
+  width:min(380px,calc(100vw - 32px));
+  display:flex;
+  flex-direction:column;
+  gap:12px;
+  pointer-events:none;
+  color:var(--bluui-text)
+}
+.blu-notifications[data-placement=TopRight]{
+  top:24px;
+  right:24px
+}
+.blu-notifications[data-placement=TopLeft]{
+  top:24px;
+  left:24px
+}
+.blu-notifications[data-placement=BottomRight]{
+  bottom:24px;
+  right:24px
+}
+.blu-notifications[data-placement=BottomLeft]{
+  bottom:24px;
+  left:24px
+}
+.blu-notification{
+  pointer-events:auto;
+  display:grid;
+  grid-template-columns:32px minmax(0,1fr) 26px;
+  gap:12px;
+  padding:18px;
+  background:var(--bluui-surface);
+  border:1px solid var(--bluui-border);
+  border-radius:14px;
+  box-shadow:0 12px 40px #0002;
+  animation:blu-notice-enter .18s ease-out
+}
+.blu-notification__icon{
+  display:grid;
+  place-items:center;
+  width:30px;
+  height:30px;
+  font-weight:700;
+  border-radius:50%;
+  background:var(--blu-common-soft);
+  color:var(--blu-common-color)
+}
+.blu-notification__copy strong{
+  font-size:14px;
+  line-height:1.5
+}
+.blu-notification__copy p{
+  margin:5px 0 12px;
+  color:var(--bluui-text-muted);
+  font-size:13px;
+  line-height:1.6
+}
+.blu-notification>button{
+  align-self:start;
+  border:0;
+  min-height:26px;
+  padding:0;
+  font-size:21px;
+  background:transparent
+}
+@keyframes blu-notice-enter{from{
+  opacity:0;
+  transform:translateY(-8px)
+}to{
+  opacity:1;
+  transform:translateY(0)
+}}
+@media(prefers-reduced-motion:reduce){.blu-notification{
+  animation:none
+}}
+@media(max-width:600px){.blu-notifications{
+  right:16px!important;
+  left:auto!important
+}}
+
+/* Hide the canvas-only caption once this instance has initialized. */
+.blu-notification-block:has([data-blu-ready]) > .blu-component-preview {
+  display: none;
+}
+
+/* Shared controls used by this Block. Colors resolve through BluUITheme. */
+.blu-common-button{
+  appearance:none;
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  gap:8px;
+  min-height:36px;
+  padding:7px 13px;
+  border:1px solid var(--bluui-border,#dce3ed);
+  border-radius:8px;
+  background:var(--bluui-surface,#fff);
+  color:var(--bluui-text,#182333);
+  font:inherit;
+  font-size:13px;
+  font-weight:600;
+  line-height:1.4;
+  white-space:nowrap;
+  cursor:pointer;
+  text-decoration:none;
+  box-shadow:none
+}
+.blu-common-button:hover:not(:disabled){
+  background:var(--bluui-surface-muted,#f4f6fa);
+  border-color:var(--bluui-primary,#5144ed)
+}
+.blu-common-button--primary{
+  background:var(--bluui-color-primary-solid,#5144ed);
+  color:var(--bluui-color-primary-contrast,#fff);
+  border-color:transparent
+}
+.blu-common-button--primary:hover:not(:disabled){
+  background:var(--bluui-color-primary-solid,#5144ed);
+  filter:brightness(.93)
+}
+.blu-common-button:disabled{
+  opacity:.45;
+  cursor:not-allowed
+}
+.blu-common-button:focus-visible,.blu-pagination input:focus-visible,.blu-pagination select:focus-visible{
+  outline:3px solid var(--bluui-primary,#5144ed);
+  outline-offset:2px
+}
+.blu-common-muted{
+  color:var(--bluui-text-muted,#68758b);
+  font-size:14px
+}
+.blu-common-error{
+  color:var(--bluui-color-error-text,#b42318);
+  font-size:13px;
+  margin:8px 0
+}
+.blu-common-error[hidden]{
+  display:none!important
+}
+
+/* Top-layer focus dialog. The spotlight blocks clicks while explaining targets. */
+.blu-tour{
+  position:fixed;
+  inset:0;
+  width:100vw;
+  height:100dvh;
+  max-width:none;
+  max-height:none;
+  margin:0;
+  padding:0;
+  border:0;
+  background:transparent;
+  z-index:1400;
+  overflow:hidden;
+  color:var(--bluui-text)
+}
+.blu-tour[hidden]{
+  display:none!important
+}
+.blu-tour::backdrop{
+  background:transparent
+}
+.blu-tour--centered{
+  background:rgba(8,14,27,.55)
+}
+.blu-tour__highlight{
+  position:fixed;
+  border:2px solid var(--bluui-primary,#5144ed);
+  border-radius:10px;
+  box-shadow:0 0 0 9999px rgba(8,14,27,.55);
+  pointer-events:none
+}
+.blu-tour__highlight[hidden]{
+  display:none
+}
+.blu-tour__panel{
+  position:fixed;
+  width:360px;
+  max-width:calc(100vw - 24px);
+  max-height:calc(100dvh - 24px);
+  overflow:auto;
+  padding:24px;
+  border:1px solid var(--bluui-border);
+  border-radius:16px;
+  background:var(--bluui-surface);
+  box-shadow:0 24px 70px #0004;
+  outline:none;
+  box-sizing:border-box
+}
+.blu-tour__progress{
+  color:var(--bluui-color-primary-text);
+  font-size:12px;
+  font-weight:700
+}
+.blu-tour__panel h2{
+  font-size:20px;
+  margin:10px 0 8px;
+  line-height:1.4
+}
+.blu-tour__panel p{
+  color:var(--bluui-text-muted);
+  font-size:14px;
+  line-height:1.65;
+  margin:0 0 22px
+}
+.blu-tour__actions{
+  display:flex;
+  gap:8px;
+  align-items:center
+}
+.blu-tour__actions>button:first-child{
+  margin-right:auto;
+  border:0;
+  padding-left:0;
+  background:transparent;
+  font-size:12px
+}
+
+/* Hide the canvas-only caption once this instance has initialized. */
+.blu-tour-block:has([data-blu-ready]) > .blu-component-preview {
+  display: none;
+}
+
+/* Shared controls used by this Block. Colors resolve through BluUITheme. */
+.blu-common-button{
+  appearance:none;
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  gap:8px;
+  min-height:36px;
+  padding:7px 13px;
+  border:1px solid var(--bluui-border,#dce3ed);
+  border-radius:8px;
+  background:var(--bluui-surface,#fff);
+  color:var(--bluui-text,#182333);
+  font:inherit;
+  font-size:13px;
+  font-weight:600;
+  line-height:1.4;
+  white-space:nowrap;
+  cursor:pointer;
+  text-decoration:none;
+  box-shadow:none
+}
+.blu-common-button:hover:not(:disabled){
+  background:var(--bluui-surface-muted,#f4f6fa);
+  border-color:var(--bluui-primary,#5144ed)
+}
+.blu-common-button--primary{
+  background:var(--bluui-color-primary-solid,#5144ed);
+  color:var(--bluui-color-primary-contrast,#fff);
+  border-color:transparent
+}
+.blu-common-button--primary:hover:not(:disabled){
+  background:var(--bluui-color-primary-solid,#5144ed);
+  filter:brightness(.93)
+}
+.blu-common-button:disabled{
+  opacity:.45;
+  cursor:not-allowed
+}
+.blu-common-button:focus-visible,.blu-pagination input:focus-visible,.blu-pagination select:focus-visible{
+  outline:3px solid var(--bluui-primary,#5144ed);
+  outline-offset:2px
+}
+.blu-common-muted{
+  color:var(--bluui-text-muted,#68758b);
+  font-size:14px
+}
+.blu-common-error{
+  color:var(--bluui-color-error-text,#b42318);
+  font-size:13px;
+  margin:8px 0
+}
+.blu-common-error[hidden]{
+  display:none!important
+}
+
+/* Illustration, copy and the optional native Actions slot form one empty state. */
+.blu-empty-state{
+  text-align:center;
+  padding:32px 24px 16px;
+  color:var(--bluui-text)
+}
+.blu-empty-state__art{
+  width:76px;
+  height:76px;
+  margin:0 auto 20px;
+  display:grid;
+  place-items:center;
+  background:var(--bluui-surface-muted);
+  border:1px solid var(--bluui-border);
+  border-radius:22px;
+  color:var(--bluui-text-muted);
+  font-size:40px;
+  font-weight:400
+}
+.blu-empty-state h3{
+  margin:0 0 8px;
+  font-size:18px
+}
+.blu-empty-state p{
+  margin:0 auto;
+  max-width:360px;
+  color:var(--bluui-text-muted);
+  font-size:14px;
+  line-height:1.6
+}
+.blu-empty-state--compact{
+  padding:16px
+}
+.blu-empty-state--compact .blu-empty-state__art{
+  width:48px;
+  height:48px;
+  border-radius:14px;
+  font-size:28px;
+  margin-bottom:12px
+}
+.blu-empty-state--compact h3{
+  font-size:15px
+}
+.blu-empty-state__actions{
+  display:flex;
+  justify-content:center;
+  gap:8px;
+  padding:0 24px 24px
+}
+
+/* Hide the canvas-only caption once this instance has initialized. */
+.blu-empty-state-block:has([data-blu-ready]) > .blu-component-preview {
+  display: none;
+}
+
+/* Shared control rules are scoped into each owning Block at build time.
+   Colors inherit BluUITheme; no screen or theme stylesheet additions are needed. */
+:is(.blu-notification-center, .blu-notification-center__panel) { box-sizing:border-box; width:100%; min-width:0; color:var(--bluui-text,#182230); font:14px/1.5 var(--blu-font-family,sans-serif); }
+:is(.blu-notification-center, .blu-notification-center__panel) *, :is(.blu-notification-center, .blu-notification-center__panel) *::before, :is(.blu-notification-center, .blu-notification-center__panel) *::after { box-sizing:border-box; }
+:is(.blu-notification-center, .blu-notification-center__panel) [hidden] { display:none !important; }
+:is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__body { min-width:0; }
+:is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__heading { margin:0 0 12px; font-size:18px; font-weight:650; line-height:1.4; }
+:is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 16px; }
+:is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__toolbar > .blu-platform__heading { flex:1; margin:0; }
+:is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:36px; padding:7px 12px; border:1px solid var(--bluui-control-border,#7b8799); border-radius:8px; background:var(--bluui-surface,#fff); color:var(--bluui-text,#182230); font:600 13px/1.4 var(--blu-font-family,sans-serif); cursor:pointer; text-decoration:none; }
+:is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__button:hover:not(:disabled) { background:var(--bluui-hover,#f0f2f7); }
+:is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__button[aria-pressed="true"] { color:var(--bluui-color-primary-text,#4338ca); border-color:var(--bluui-primary,#4f46e5); background:var(--bluui-color-primary-soft,#eef2ff); box-shadow:inset 0 0 0 1px var(--bluui-primary,#4f46e5); }
+:is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__button--primary { background:var(--bluui-color-primary-solid,#4f46e5); border-color:var(--bluui-color-primary-solid,#4f46e5); color:var(--bluui-color-primary-contrast,#fff); }
+:is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__button--primary:hover:not(:disabled) { background:var(--bluui-primary-hover,#4338ca); }
+:is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__button:disabled, :is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__input:disabled { cursor:default; background:var(--bluui-surface-muted,#f7f8fb); color:var(--bluui-text-muted,#5c6b80); border-color:var(--bluui-border,#e2e8f0); }
+:is(.blu-notification-center, .blu-notification-center__panel) :is(button,input,select,textarea,summary,[tabindex]):focus-visible { outline:2px solid var(--bluui-primary,#4f46e5); outline-offset:3px; }
+:is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__input { display:block; width:100%; min-width:0; min-height:38px; border:1px solid var(--bluui-control-border,#7b8799); border-radius:7px; padding:8px 10px; background:var(--bluui-surface,#fff); color:var(--bluui-text,#182230); font:inherit; }
+:is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__input[aria-invalid="true"] { border-color:var(--bluui-color-error-text,#a33133); }
+:is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__field { display:flex; flex-direction:column; gap:6px; margin:0; min-width:0; }
+:is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__label { font-size:12px; font-weight:600; }
+:is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__muted { color:var(--bluui-text-muted,#5c6b80); font-size:12px; }
+:is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__error { display:block; color:var(--bluui-color-error-text,#a33133); font-size:13px; overflow-wrap:anywhere; }
+:is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__success { color:var(--bluui-color-success-text,#2d6c0e); }
+:is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__status { color:var(--bluui-text-muted,#5c6b80); margin:10px 0 0; font-size:13px; }
+:is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__status:empty { margin:0; }
+:is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__empty { border:1px dashed var(--bluui-border-strong,#b8c4d4); border-radius:10px; padding:28px 20px; text-align:center; margin:12px 0; }
+:is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__empty p { color:var(--bluui-text-muted,#5c6b80); margin:6px 0 0; }
+:is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__savebar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:12px; margin:0 0 16px; border:1px solid var(--bluui-color-primary-border,#c7d2fe); border-radius:10px; background:var(--bluui-color-primary-soft,#eef2ff); }
+:is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__savebar > span { flex:1; min-width:100px; color:var(--bluui-color-primary-text,#4338ca); font-weight:600; }
+:is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__count { border-radius:20px; padding:3px 8px; background:var(--bluui-color-primary-soft,#eef2ff); color:var(--bluui-color-primary-text,#4338ca); font-size:12px; }
+:is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
+@media (forced-colors:active) { :is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__button[aria-pressed="true"] { outline:2px solid Highlight; } }
+
+/* The same inbox can be embedded or placed beside its bell as a nonmodal dialog. */
+.blu-notification-center__bell { position:relative; }
+.blu-notification-center__panel { box-sizing:border-box; width:100%; padding:20px; background:var(--bluui-surface,#fff); color:var(--bluui-text,#182230); border:1px solid var(--bluui-border,#e2e8f0); border-radius:14px; }
+.blu-notification-center__panel > input { margin-bottom:12px; }
+.blu-notification-center__panel--popover { position:fixed; z-index:9000; overflow:auto; overscroll-behavior:contain; box-shadow:var(--bluui-menu-shadow); }
+.blu-notification-center__list { padding:0; margin:14px 0 0; list-style:none; }
+.blu-notification-center__item { padding:16px 0 16px 12px; border-bottom:1px solid var(--bluui-border,#e2e8f0); border-left:3px solid transparent; margin-bottom:4px; }
+.blu-notification-center__item--unread { border-left-color:var(--blu-inbox-color,var(--bluui-primary,#4f46e5)); background:var(--bluui-surface-muted,#f7f8fb); }
+.blu-notification-center__item h4 { margin:0 0 6px; font-size:14px; }
+.blu-notification-center__item p { margin:0 0 8px; overflow-wrap:anywhere; }
+.blu-notification-center__item .blu-platform__muted { display:flex; flex-wrap:wrap; gap:8px; }
+.blu-notification-center__actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
+.blu-notification-center__actions .blu-platform__button { min-height:30px; padding:5px 8px; font-size:12px; }
+
+/* A visible design-time caption is hidden after the runtime mounts. */
+.blu-notification-center-block > .blu-component-preview { padding:20px; border:1px dashed var(--bluui-border-strong); color:var(--bluui-text-muted); border-radius:10px; }
+
+/* Chat owns its layout, typography and motion. Messages are keyed DOM nodes;
+   animation runs on insertion only, never again for each streaming update. */
+.blu-chat, .blu-chat * { box-sizing:border-box; }
+.blu-chat { display:flex; flex-direction:column; position:relative; width:100%; min-width:0; overflow:hidden; border:1px solid var(--bluui-border,#dce2eb); border-radius:18px; background:var(--bluui-surface,#fff); color:var(--bluui-text,#182230); font:14px/1.55 var(--blu-font-family,system-ui,sans-serif); box-shadow:0 8px 28px #15204408; }
+.blu-chat [hidden] { display:none !important; }
+.blu-chat-sr { position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
+.blu-chat__header { display:flex; align-items:center; gap:12px; padding:20px 24px; border-bottom:1px solid var(--bluui-border,#dce2eb); flex:none; }
+.blu-chat__header h2 { color:inherit; margin:0; font-size:17px; font-weight:650; line-height:1.4; }
+.blu-chat__header p { margin:3px 0 0; color:var(--bluui-text-muted,#5c6b80); font-size:12px; }
+.blu-chat__scroll { flex:1 1 0; min-height:80px; overflow:auto; overscroll-behavior:contain; padding:24px; scrollbar-gutter:stable; }
+.blu-chat__messages { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:24px; }
+.blu-chat__message { display:flex; gap:10px; min-width:0; }
+.blu-chat__message-column { max-width:88%; min-width:0; }
+.blu-chat__message[data-role="User"] { flex-direction:row-reverse; }
+.blu-chat__message[data-role="User"] .blu-chat__meta { justify-content:flex-end; }
+.blu-chat__message[data-role="User"] .blu-chat__prose { background:var(--bluui-color-primary-soft,#eef2ff); color:var(--bluui-color-primary-text,#3730a3); border-radius:14px 4px 14px 14px; padding:12px 16px; }
+.blu-chat__message[data-role="System"] .blu-chat__prose { color:var(--bluui-text-muted,#5c6b80); border-left:2px solid var(--bluui-border,#dce2eb); padding-left:12px; }
+.blu-chat__avatar { flex:0 0 30px; display:flex; align-items:center; justify-content:center; width:30px; height:30px; border:1px solid var(--bluui-border,#dce2eb); border-radius:10px; background:var(--bluui-surface-muted,#f7f8fb); font-weight:650; font-size:12px; overflow:hidden; }
+.blu-chat__avatar img { width:100%; height:100%; object-fit:cover; }
+.blu-chat__meta { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:3px 0 8px; font-size:11px; color:var(--bluui-text-muted,#5c6b80); }
+.blu-chat__meta strong { color:var(--bluui-text,#182230); font-size:12px; font-weight:650; }
+.blu-chat__prose { overflow-wrap:anywhere; min-width:0; }
+.blu-chat__prose p { white-space:pre-wrap; margin:0 0 8px; }
+.blu-chat__prose > :last-child { margin-bottom:0; }
+.blu-chat__prose h3 { color:inherit; margin:14px 0 8px; font-size:15px; }
+.blu-chat__prose ul, .blu-chat__prose ol { padding-left:22px; margin:8px 0; }
+.blu-chat__prose pre { overflow:auto; max-width:100%; padding:14px; border:1px solid var(--bluui-border,#dce2eb); border-radius:10px; background:var(--bluui-surface-muted,#f7f8fb); color:var(--bluui-text,#182230); font-size:12px; }
+.blu-chat__prose code { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.9em; }
+.blu-chat__prose :not(pre) > code { padding:2px 4px; border-radius:4px; background:var(--bluui-surface-muted,#f7f8fb); color:var(--bluui-text,#182230); }
+.blu-chat__prose a { color:var(--bluui-color-primary-text,#4338ca); text-decoration:underline; }
+.blu-chat__button { appearance:none; -webkit-appearance:none; display:inline-flex; justify-content:center; align-items:center; gap:6px; min-height:36px; margin:0; padding:7px 12px; border:1px solid var(--bluui-control-border,#7b8799); border-radius:9px; background:var(--bluui-surface,#fff); color:var(--bluui-text,#182230); font:600 12px/1.4 var(--blu-font-family,system-ui,sans-serif); cursor:pointer; box-shadow:none; text-transform:none; letter-spacing:normal; }
+.blu-chat__button svg { width:18px; height:18px; }
+.blu-chat__button:hover:not(:disabled) { background:var(--bluui-hover,#f0f2f7); }
+.blu-chat__button:disabled { opacity:.55; cursor:default; }
+.blu-chat__copy { min-height:28px; padding:3px 0; margin-top:6px; border:0; color:var(--bluui-text-muted,#5c6b80); font-size:11px; background:transparent; }
+.blu-chat__empty { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:24px 6px; height:100%; min-height:160px; }
+.blu-chat__empty > svg { width:36px; height:36px; padding:7px; border-radius:12px; background:var(--bluui-color-primary-soft,#eef2ff); color:var(--bluui-color-primary-text,#4338ca); margin-bottom:14px; }
+.blu-chat__empty h3 { font-size:24px; letter-spacing:-.7px; line-height:1.25; margin:0 0 10px; color:inherit; }
+.blu-chat__empty p { margin:0; max-width:35ch; color:var(--bluui-text-muted,#5c6b80); }
+.blu-chat__waiting { display:flex; flex:none; align-items:center; gap:10px; min-height:32px; padding:4px 24px; color:var(--bluui-text-muted,#5c6b80); font-size:12px; }
+.blu-chat__dots { display:flex; gap:4px; }
+.blu-chat__dots i { display:block; width:5px; height:5px; border-radius:50%; background:currentColor; animation:blu-chat-dot 1s ease-in-out 4; }
+.blu-chat__dots i:nth-child(2) { animation-delay:.12s; }
+.blu-chat__dots i:nth-child(3) { animation-delay:.24s; }
+.blu-chat__failure { flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px; margin:8px 16px; padding:10px; border:1px solid var(--bluui-color-error-border,#f5b4b4); border-radius:10px; background:var(--bluui-color-error-soft,#fff2f0); color:var(--bluui-color-error-text,#a33133); font-size:12px; overflow-wrap:anywhere; }
+.blu-chat__suggestions { display:flex; flex:none; flex-wrap:wrap; gap:6px; padding:10px 16px 0; }
+.blu-chat__suggestions:empty { display:none; }
+.blu-chat__suggestions .blu-chat__button { border-color:var(--bluui-border,#dce2eb); background:var(--bluui-surface-muted,#f7f8fb); font-weight:500; text-align:left; }
+.blu-chat__composer { flex:none; padding:12px; margin:12px 16px 16px; border:1px solid var(--bluui-control-border,#7b8799); border-radius:12px; background:var(--bluui-surface,#fff); }
+.blu-chat__composer:focus-within { border-color:var(--bluui-color-primary-solid,#4f46e5); box-shadow:0 0 0 2px var(--bluui-color-primary-soft,#eef2ff); }
+.blu-chat__composer textarea { appearance:none; display:block; width:100%; min-width:0; min-height:44px; max-height:160px; padding:0; margin:0; border:0; border-radius:0; background:transparent; color:inherit; font:inherit; line-height:1.5; resize:none; box-shadow:none; }
+.blu-chat__composer textarea::placeholder { color:var(--bluui-text-muted,#5c6b80); opacity:1; }
+.blu-chat__composer textarea:focus { outline:0; box-shadow:none; }
+.blu-chat__composer-actions { display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:6px; }
+.blu-chat__hint { color:var(--bluui-text-muted,#5c6b80); font-size:10px; }
+.blu-chat__button.blu-chat__send { background:var(--bluui-color-primary-solid,#4f46e5); color:var(--bluui-color-primary-contrast,#fff); border-color:transparent; width:36px; padding:8px; }
+.blu-chat__jump { position:absolute; top:76px; left:50%; transform:translateX(-50%); box-shadow:0 3px 15px #0002; z-index:1; white-space:nowrap; }
+.blu-chat :is(button,[tabindex]):focus-visible { outline:2px solid var(--bluui-color-primary-solid,#4f46e5); outline-offset:3px; }
+.blu-chat__message--new { animation:blu-chat-message .24s ease-out both; }
+@keyframes blu-chat-message { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
+@keyframes blu-chat-dot { 0%,70%,100% { transform:translateY(0); opacity:.55; } 35% { transform:translateY(-4px); opacity:1; } }
+.blu-chat[data-animate="false"] *, .blu-chat[data-animate="false"] *::before { animation:none !important; transition:none !important; }
+@media (prefers-reduced-motion:reduce) { .blu-chat *, .blu-chat *::before { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }
+@media (max-width:480px) { .blu-chat__scroll { padding:16px 12px; } .blu-chat__header { padding:16px; } .blu-chat__message-column { max-width:calc(100% - 40px); } .blu-chat__hint { font-size:9px; } }
+.blu-chat-block > .blu-component-preview { padding:24px; border:1px dashed var(--bluui-border,#dce2eb); border-radius:12px; }
+.blu-chat-block [data-blu-runtime-ready] + .blu-component-preview { display:none; }
+
+/* Chat owns its layout, typography and motion. Messages are keyed DOM nodes;
+   animation runs on insertion only, never again for each streaming update. */
+.blu-chat, .blu-chat * { box-sizing:border-box; }
+.blu-chat { display:flex; flex-direction:column; position:relative; width:100%; min-width:0; overflow:hidden; border:1px solid var(--bluui-border,#dce2eb); border-radius:18px; background:var(--bluui-surface,#fff); color:var(--bluui-text,#182230); font:14px/1.55 var(--blu-font-family,system-ui,sans-serif); box-shadow:0 8px 28px #15204408; }
+.blu-chat [hidden] { display:none !important; }
+.blu-chat-sr { position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
+.blu-chat__header { display:flex; align-items:center; gap:12px; padding:20px 24px; border-bottom:1px solid var(--bluui-border,#dce2eb); flex:none; }
+.blu-chat__header h2 { color:inherit; margin:0; font-size:17px; font-weight:650; line-height:1.4; }
+.blu-chat__header p { margin:3px 0 0; color:var(--bluui-text-muted,#5c6b80); font-size:12px; }
+.blu-chat__scroll { flex:1 1 0; min-height:80px; overflow:auto; overscroll-behavior:contain; padding:24px; scrollbar-gutter:stable; }
+.blu-chat__messages { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:24px; }
+.blu-chat__message { display:flex; gap:10px; min-width:0; }
+.blu-chat__message-column { max-width:88%; min-width:0; }
+.blu-chat__message[data-role="User"] { flex-direction:row-reverse; }
+.blu-chat__message[data-role="User"] .blu-chat__meta { justify-content:flex-end; }
+.blu-chat__message[data-role="User"] .blu-chat__prose { background:var(--bluui-color-primary-soft,#eef2ff); color:var(--bluui-color-primary-text,#3730a3); border-radius:14px 4px 14px 14px; padding:12px 16px; }
+.blu-chat__message[data-role="System"] .blu-chat__prose { color:var(--bluui-text-muted,#5c6b80); border-left:2px solid var(--bluui-border,#dce2eb); padding-left:12px; }
+.blu-chat__avatar { flex:0 0 30px; display:flex; align-items:center; justify-content:center; width:30px; height:30px; border:1px solid var(--bluui-border,#dce2eb); border-radius:10px; background:var(--bluui-surface-muted,#f7f8fb); font-weight:650; font-size:12px; overflow:hidden; }
+.blu-chat__avatar img { width:100%; height:100%; object-fit:cover; }
+.blu-chat__meta { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:3px 0 8px; font-size:11px; color:var(--bluui-text-muted,#5c6b80); }
+.blu-chat__meta strong { color:var(--bluui-text,#182230); font-size:12px; font-weight:650; }
+.blu-chat__prose { overflow-wrap:anywhere; min-width:0; }
+.blu-chat__prose p { white-space:pre-wrap; margin:0 0 8px; }
+.blu-chat__prose > :last-child { margin-bottom:0; }
+.blu-chat__prose h3 { color:inherit; margin:14px 0 8px; font-size:15px; }
+.blu-chat__prose ul, .blu-chat__prose ol { padding-left:22px; margin:8px 0; }
+.blu-chat__prose pre { overflow:auto; max-width:100%; padding:14px; border:1px solid var(--bluui-border,#dce2eb); border-radius:10px; background:var(--bluui-surface-muted,#f7f8fb); color:var(--bluui-text,#182230); font-size:12px; }
+.blu-chat__prose code { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.9em; }
+.blu-chat__prose :not(pre) > code { padding:2px 4px; border-radius:4px; background:var(--bluui-surface-muted,#f7f8fb); color:var(--bluui-text,#182230); }
+.blu-chat__prose a { color:var(--bluui-color-primary-text,#4338ca); text-decoration:underline; }
+.blu-chat__button { appearance:none; -webkit-appearance:none; display:inline-flex; justify-content:center; align-items:center; gap:6px; min-height:36px; margin:0; padding:7px 12px; border:1px solid var(--bluui-control-border,#7b8799); border-radius:9px; background:var(--bluui-surface,#fff); color:var(--bluui-text,#182230); font:600 12px/1.4 var(--blu-font-family,system-ui,sans-serif); cursor:pointer; box-shadow:none; text-transform:none; letter-spacing:normal; }
+.blu-chat__button svg { width:18px; height:18px; }
+.blu-chat__button:hover:not(:disabled) { background:var(--bluui-hover,#f0f2f7); }
+.blu-chat__button:disabled { opacity:.55; cursor:default; }
+.blu-chat__copy { min-height:28px; padding:3px 0; margin-top:6px; border:0; color:var(--bluui-text-muted,#5c6b80); font-size:11px; background:transparent; }
+.blu-chat__empty { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:24px 6px; height:100%; min-height:160px; }
+.blu-chat__empty > svg { width:36px; height:36px; padding:7px; border-radius:12px; background:var(--bluui-color-primary-soft,#eef2ff); color:var(--bluui-color-primary-text,#4338ca); margin-bottom:14px; }
+.blu-chat__empty h3 { font-size:24px; letter-spacing:-.7px; line-height:1.25; margin:0 0 10px; color:inherit; }
+.blu-chat__empty p { margin:0; max-width:35ch; color:var(--bluui-text-muted,#5c6b80); }
+.blu-chat__waiting { display:flex; flex:none; align-items:center; gap:10px; min-height:32px; padding:4px 24px; color:var(--bluui-text-muted,#5c6b80); font-size:12px; }
+.blu-chat__dots { display:flex; gap:4px; }
+.blu-chat__dots i { display:block; width:5px; height:5px; border-radius:50%; background:currentColor; animation:blu-chat-dot 1s ease-in-out 4; }
+.blu-chat__dots i:nth-child(2) { animation-delay:.12s; }
+.blu-chat__dots i:nth-child(3) { animation-delay:.24s; }
+.blu-chat__failure { flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px; margin:8px 16px; padding:10px; border:1px solid var(--bluui-color-error-border,#f5b4b4); border-radius:10px; background:var(--bluui-color-error-soft,#fff2f0); color:var(--bluui-color-error-text,#a33133); font-size:12px; overflow-wrap:anywhere; }
+.blu-chat__suggestions { display:flex; flex:none; flex-wrap:wrap; gap:6px; padding:10px 16px 0; }
+.blu-chat__suggestions:empty { display:none; }
+.blu-chat__suggestions .blu-chat__button { border-color:var(--bluui-border,#dce2eb); background:var(--bluui-surface-muted,#f7f8fb); font-weight:500; text-align:left; }
+.blu-chat__composer { flex:none; padding:12px; margin:12px 16px 16px; border:1px solid var(--bluui-control-border,#7b8799); border-radius:12px; background:var(--bluui-surface,#fff); }
+.blu-chat__composer:focus-within { border-color:var(--bluui-color-primary-solid,#4f46e5); box-shadow:0 0 0 2px var(--bluui-color-primary-soft,#eef2ff); }
+.blu-chat__composer textarea { appearance:none; display:block; width:100%; min-width:0; min-height:44px; max-height:160px; padding:0; margin:0; border:0; border-radius:0; background:transparent; color:inherit; font:inherit; line-height:1.5; resize:none; box-shadow:none; }
+.blu-chat__composer textarea::placeholder { color:var(--bluui-text-muted,#5c6b80); opacity:1; }
+.blu-chat__composer textarea:focus { outline:0; box-shadow:none; }
+.blu-chat__composer-actions { display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:6px; }
+.blu-chat__hint { color:var(--bluui-text-muted,#5c6b80); font-size:10px; }
+.blu-chat__button.blu-chat__send { background:var(--bluui-color-primary-solid,#4f46e5); color:var(--bluui-color-primary-contrast,#fff); border-color:transparent; width:36px; padding:8px; }
+.blu-chat__jump { position:absolute; top:76px; left:50%; transform:translateX(-50%); box-shadow:0 3px 15px #0002; z-index:1; white-space:nowrap; }
+.blu-chat :is(button,[tabindex]):focus-visible { outline:2px solid var(--bluui-color-primary-solid,#4f46e5); outline-offset:3px; }
+.blu-chat__message--new { animation:blu-chat-message .24s ease-out both; }
+@keyframes blu-chat-message { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
+@keyframes blu-chat-dot { 0%,70%,100% { transform:translateY(0); opacity:.55; } 35% { transform:translateY(-4px); opacity:1; } }
+.blu-chat[data-animate="false"] *, .blu-chat[data-animate="false"] *::before { animation:none !important; transition:none !important; }
+@media (prefers-reduced-motion:reduce) { .blu-chat *, .blu-chat *::before { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }
+@media (max-width:480px) { .blu-chat__scroll { padding:16px 12px; } .blu-chat__header { padding:16px; } .blu-chat__message-column { max-width:calc(100% - 40px); } .blu-chat__hint { font-size:9px; } }
+.blu-chat-block > .blu-component-preview { padding:24px; border:1px dashed var(--bluui-border,#dce2eb); border-radius:12px; }
+.blu-chat-block [data-blu-runtime-ready] + .blu-component-preview { display:none; }
+
+/* FloatButton is a reusable launcher. Container placement requires a positioned
+   ancestor; Viewport placement portals its root to body to escape clipped cards. */
+.blu-float { box-sizing:border-box; position:fixed; z-index:900; bottom:calc(var(--blu-float-offset,24px) + env(safe-area-inset-bottom,0px)); right:calc(var(--blu-float-offset,24px) + env(safe-area-inset-right,0px)); }
+.blu-float *, .blu-float *::before { box-sizing:border-box; }
+.blu-float [hidden] { display:none !important; }
+.blu-float[data-position="Container"] { position:absolute; z-index:2; }
+.blu-float[data-placement="BottomLeft"], .blu-float[data-placement="TopLeft"] { right:auto; left:calc(var(--blu-float-offset,24px) + env(safe-area-inset-left,0px)); }
+.blu-float[data-placement="TopLeft"], .blu-float[data-placement="TopRight"] { bottom:auto; top:calc(var(--blu-float-offset,24px) + env(safe-area-inset-top,0px)); }
+.blu-float__button { appearance:none; -webkit-appearance:none; position:relative; display:flex; gap:10px; align-items:center; justify-content:center; min-width:56px; min-height:56px; max-width:260px; margin:0; padding:14px; border:1px solid transparent; border-radius:50px; background:var(--blu-float-solid,#4f46e5); color:var(--blu-float-contrast,#fff); box-shadow:0 6px 18px #10182826; font:600 14px/1.4 var(--blu-font-family,system-ui,sans-serif); cursor:pointer; transition:transform .18s ease,box-shadow .18s ease; text-transform:none; letter-spacing:normal; }
+.blu-float[data-shape="Square"] .blu-float__button { border-radius:14px; }
+.blu-float__button:hover:not(:disabled) { transform:translateY(-3px); box-shadow:0 10px 24px #10182833; }
+.blu-float__button:active:not(:disabled) { transform:scale(.96); }
+.blu-float__button:focus-visible { outline:3px solid var(--bluui-text,#182230); outline-offset:4px; }
+.blu-float__button:disabled { opacity:.55; cursor:default; }
+.blu-float__icon, .blu-float__icon svg, .blu-float__icon img { display:block; width:24px; height:24px; flex:none; }
+/* Custom artwork keeps its aspect ratio and original colors. */
+.blu-float__icon img { object-fit:contain; }
+.blu-float__badge { position:absolute; top:-5px; right:-5px; display:flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 5px; border:2px solid var(--bluui-surface,#fff); border-radius:20px; background:var(--bluui-color-error-solid,#c93638); color:var(--bluui-color-error-contrast,#fff); font-size:10px; }
+.blu-float[data-animate="true"] { animation:blu-float-in .28s cubic-bezier(.2,.8,.2,1) both; }
+@keyframes blu-float-in { from { opacity:0; transform:translateY(12px) scale(.9); } to { opacity:1; transform:none; } }
+.blu-float[data-animate="false"] * { transition:none !important; }
+.blu-float[data-animate="false"] .blu-float__button { transform:none !important; }
+@media (prefers-reduced-motion:reduce) { .blu-float, .blu-float * { animation:none !important; transition:none !important; transform:none !important; } }
+@media (forced-colors:active) { .blu-float__button { border:1px solid ButtonText; } }
+.blu-float-button-block > .blu-component-preview { padding:24px; border:1px dashed var(--bluui-border,#dce2eb); }
+.blu-float-button-block [data-blu-runtime-ready] + .blu-component-preview { display:none; }
+
+.blu-float-button-block .blu-chat-sr, .blu-chat-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
+
+/* Widget composes the canonical Chat and FloatButton; its panel remains mounted
+   while closed so drafts, scroll position and responses are retained. */
+.blu-chat-widget { position:fixed; z-index:900; bottom:calc(var(--blu-widget-offset,24px) + env(safe-area-inset-bottom,0px)); right:calc(var(--blu-widget-offset,24px) + env(safe-area-inset-right,0px)); width:56px; height:56px; color:var(--bluui-text,#182230); font-family:var(--blu-font-family,system-ui,sans-serif); }
+.blu-chat-widget *, .blu-chat-widget *::before { box-sizing:border-box; }
+.blu-chat-widget[data-position="Container"] { position:absolute; z-index:4; }
+.blu-chat-widget[data-placement="BottomLeft"] { right:auto; left:calc(var(--blu-widget-offset,24px) + env(safe-area-inset-left,0px)); }
+.blu-chat-widget .blu-float { right:0; bottom:0; left:auto; top:auto; }
+.blu-chat-widget__panel { position:absolute; bottom:72px; right:0; width:min(390px,calc(100vw - 48px)); border:1px solid var(--bluui-border,#dce2eb); border-radius:20px; background:var(--bluui-surface,#fff); box-shadow:0 24px 80px #10182830; overflow:hidden; opacity:0; visibility:hidden; transform:translateY(14px) scale(.97); transform-origin:bottom right; transition:opacity .2s ease,transform .24s cubic-bezier(.2,.8,.2,1),visibility .24s; }
+.blu-chat-widget[data-placement="BottomLeft"] .blu-chat-widget__panel { right:auto; left:0; transform-origin:bottom left; }
+.blu-chat-widget[data-open="true"] .blu-chat-widget__panel { opacity:1; visibility:visible; transform:none; }
+.blu-chat-widget__header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; background:var(--bluui-surface-muted,#f7f8fb); border-bottom:1px solid var(--bluui-border,#dce2eb); }
+.blu-chat-widget__header h2 { color:inherit; font-size:15px; font-weight:650; margin:0; }
+.blu-chat-widget__header > div { display:flex; gap:6px; }
+.blu-chat-widget__header button { min-width:32px; min-height:32px; padding:6px; background:transparent; border-color:transparent; }
+.blu-chat-widget__header button:focus-visible { outline:2px solid var(--bluui-color-primary-solid,#4f46e5); outline-offset:2px; }
+.blu-chat-widget .blu-chat { border:0; border-radius:0; height:min(490px,calc(100dvh - 205px)) !important; min-height:200px; box-shadow:none; }
+.blu-chat-widget[data-expanded="true"] .blu-chat-widget__panel { width:min(680px,calc(100vw - 48px)); }
+.blu-chat-widget[data-expanded="true"] .blu-chat { height:min(650px,calc(100dvh - 205px)) !important; }
+.blu-chat-widget[data-position="Container"] .blu-chat-widget__panel { width:min(390px,calc(100cqw - 48px)); }
+.blu-chat-widget[data-position="Container"][data-expanded="true"] .blu-chat-widget__panel { width:min(680px,calc(100cqw - 48px)); }
+.blu-chat-widget[data-animate="false"] *, .blu-chat-widget[data-animate="false"] { animation:none !important; transition:none !important; }
+@media (max-width:480px) { .blu-chat-widget__panel { width:calc(100vw - 32px); right:calc(16px - var(--blu-widget-offset,24px)); bottom:70px; } .blu-chat-widget[data-placement="BottomLeft"] .blu-chat-widget__panel { left:calc(16px - var(--blu-widget-offset,24px)); } .blu-chat-widget .blu-chat { height:min(540px,calc(100dvh - 190px)) !important; } }
+@media (prefers-reduced-motion:reduce) { .blu-chat-widget, .blu-chat-widget * { animation:none !important; transition:none !important; } }
+.blu-chat-widget-block > .blu-component-preview { padding:24px; border:1px dashed var(--bluui-border,#dce2eb); }
+.blu-chat-widget-block [data-blu-runtime-ready] + .blu-component-preview { display:none; }
+
+/* FloatButton is a reusable launcher. Container placement requires a positioned
+   ancestor; Viewport placement portals its root to body to escape clipped cards. */
+.blu-float { box-sizing:border-box; position:fixed; z-index:900; bottom:calc(var(--blu-float-offset,24px) + env(safe-area-inset-bottom,0px)); right:calc(var(--blu-float-offset,24px) + env(safe-area-inset-right,0px)); }
+.blu-float *, .blu-float *::before { box-sizing:border-box; }
+.blu-float [hidden] { display:none !important; }
+.blu-float[data-position="Container"] { position:absolute; z-index:2; }
+.blu-float[data-placement="BottomLeft"], .blu-float[data-placement="TopLeft"] { right:auto; left:calc(var(--blu-float-offset,24px) + env(safe-area-inset-left,0px)); }
+.blu-float[data-placement="TopLeft"], .blu-float[data-placement="TopRight"] { bottom:auto; top:calc(var(--blu-float-offset,24px) + env(safe-area-inset-top,0px)); }
+.blu-float__button { appearance:none; -webkit-appearance:none; position:relative; display:flex; gap:10px; align-items:center; justify-content:center; min-width:56px; min-height:56px; max-width:260px; margin:0; padding:14px; border:1px solid transparent; border-radius:50px; background:var(--blu-float-solid,#4f46e5); color:var(--blu-float-contrast,#fff); box-shadow:0 6px 18px #10182826; font:600 14px/1.4 var(--blu-font-family,system-ui,sans-serif); cursor:pointer; transition:transform .18s ease,box-shadow .18s ease; text-transform:none; letter-spacing:normal; }
+.blu-float[data-shape="Square"] .blu-float__button { border-radius:14px; }
+.blu-float__button:hover:not(:disabled) { transform:translateY(-3px); box-shadow:0 10px 24px #10182833; }
+.blu-float__button:active:not(:disabled) { transform:scale(.96); }
+.blu-float__button:focus-visible { outline:3px solid var(--bluui-text,#182230); outline-offset:4px; }
+.blu-float__button:disabled { opacity:.55; cursor:default; }
+.blu-float__icon, .blu-float__icon svg, .blu-float__icon img { display:block; width:24px; height:24px; flex:none; }
+/* Custom artwork keeps its aspect ratio and original colors. */
+.blu-float__icon img { object-fit:contain; }
+.blu-float__badge { position:absolute; top:-5px; right:-5px; display:flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 5px; border:2px solid var(--bluui-surface,#fff); border-radius:20px; background:var(--bluui-color-error-solid,#c93638); color:var(--bluui-color-error-contrast,#fff); font-size:10px; }
+.blu-float[data-animate="true"] { animation:blu-float-in .28s cubic-bezier(.2,.8,.2,1) both; }
+@keyframes blu-float-in { from { opacity:0; transform:translateY(12px) scale(.9); } to { opacity:1; transform:none; } }
+.blu-float[data-animate="false"] * { transition:none !important; }
+.blu-float[data-animate="false"] .blu-float__button { transform:none !important; }
+@media (prefers-reduced-motion:reduce) { .blu-float, .blu-float * { animation:none !important; transition:none !important; transform:none !important; } }
+@media (forced-colors:active) { .blu-float__button { border:1px solid ButtonText; } }
+.blu-float-button-block > .blu-component-preview { padding:24px; border:1px dashed var(--bluui-border,#dce2eb); }
+.blu-float-button-block [data-blu-runtime-ready] + .blu-component-preview { display:none; }
+
+.blu-float-button-block .blu-chat-sr, .blu-chat-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }