/* Shieldy Welcome/Farewell modal preview r29
   Presentation-only. The original live preview nodes stay in the DOM for all
   existing renderers; only their on-page column is visually suppressed. */

/* 1) Release the old permanent preview column and give the editor full width. */
body[data-account-page="bots"] #sh-interaction-view-welcome :is(#shieldy-welcome-form,#shieldy-farewell-form).b05cbcf65-welcome-preview-layout{
  display:block!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:0!important;
  width:100%!important;
  min-width:0!important;
}
body[data-account-page="bots"] #sh-interaction-view-welcome :is(#shieldy-welcome-form,#shieldy-farewell-form).b05cbcf65-welcome-preview-layout>.welcome-event-card{
  display:block!important;
  grid-column:auto!important;
  grid-row:auto!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
}
/* The source preview must remain alive for the old JS, but it must not occupy
   layout space. Do not remove it, re-parent it, or change its data attributes. */
body[data-account-page="bots"] #sh-interaction-view-welcome :is(#shieldy-welcome-form,#shieldy-farewell-form)>.welcome-inline-preview[data-welcome-preview-kind]{
  display:none!important;
  position:static!important;
  inset:auto!important;
  width:auto!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
}
body[data-account-page="bots"] #sh-interaction-view-welcome :is(#shieldy-welcome-form,#shieldy-farewell-form).b05cbcf65-welcome-preview-layout .welcome-event-workspace{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  margin-top:12px!important;
}
body[data-account-page="bots"] #sh-interaction-view-welcome :is(#shieldy-welcome-form,#shieldy-farewell-form).b05cbcf65-welcome-preview-layout .welcome-dependent{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
}

/* 2) Preview action in the existing event header — no structural rewrite. */
body[data-account-page="bots"] #sh-interaction-view-welcome .welcome-event-card>.automod-rule-head{
  gap:10px!important;
}
body[data-account-page="bots"] #sh-interaction-view-welcome .welcome-event-card>.automod-rule-head>div:first-child{
  min-width:0!important;
  flex:1 1 auto!important;
}
body[data-account-page="bots"] #sh-interaction-view-welcome .jj-welcome-preview-trigger-r29{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  gap:7px!important;
  min-height:38px!important;
  margin-left:auto!important;
  padding:8px 13px!important;
  border:1px solid #2da44e!important;
  border-radius:10px!important;
  background:color-mix(in srgb,#2da44e 8%,var(--account-surface,#fff))!important;
  color:#1f883d!important;
  box-shadow:none!important;
  font:850 12px/1.1 Nunito,sans-serif!important;
  white-space:nowrap!important;
  cursor:pointer!important;
  transition:background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease!important;
}
body[data-account-page="bots"] #sh-interaction-view-welcome .jj-welcome-preview-trigger-r29:hover,
body[data-account-page="bots"] #sh-interaction-view-welcome .jj-welcome-preview-trigger-r29:focus-visible,
body[data-account-page="bots"] #sh-interaction-view-welcome .jj-welcome-preview-trigger-r29[aria-expanded="true"]{
  border-color:#1f883d!important;
  background:#2da44e!important;
  color:#fff!important;
  outline:none!important;
  box-shadow:0 0 0 3px rgba(45,164,78,.14)!important;
}
body[data-account-page="bots"] #sh-interaction-view-welcome .jj-welcome-preview-trigger-r29:hover{
  transform:translateY(-1px)!important;
}
body[data-account-page="bots"] #sh-interaction-view-welcome .jj-welcome-preview-trigger-r29 .jj-welcome-preview-eye-r29{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:16px!important;
  height:16px!important;
  font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif!important;
  font-size:14px!important;
  line-height:1!important;
}
/* Keep the existing event toggle compact and immediately to the right. */
body[data-account-page="bots"] #sh-interaction-view-welcome .welcome-event-card>.automod-rule-head>.mini-switch{
  flex:0 0 auto!important;
  margin-left:0!important;
}

/* 3) Modal. Explicit fixed centering avoids the top-left dialog regression. */
body[data-account-page="bots"] #sh-interaction-view-welcome .jj-welcome-preview-modal-r29{
  position:fixed!important;
  top:50%!important;
  left:50%!important;
  right:auto!important;
  bottom:auto!important;
  z-index:2147482500!important;
  width:min(880px,calc(100vw - 36px))!important;
  max-width:880px!important;
  max-height:88vh!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  transform:translate(-50%,-50%)!important;
  border:0!important;
  border-radius:16px!important;
  background:transparent!important;
  color:var(--account-text,#17212b)!important;
  box-shadow:none!important;
}
body[data-account-page="bots"] #sh-interaction-view-welcome .jj-welcome-preview-modal-r29:not([open]){
  display:none!important;
}
body[data-account-page="bots"] #sh-interaction-view-welcome .jj-welcome-preview-modal-r29::backdrop{
  background:rgba(15,23,42,.58)!important;
  backdrop-filter:blur(2px)!important;
}
body[data-account-page="bots"] #sh-interaction-view-welcome .jj-welcome-preview-modal-dialog-r29{
  display:flex!important;
  flex-direction:column!important;
  width:100%!important;
  max-height:88vh!important;
  min-width:0!important;
  overflow:hidden!important;
  border:1px solid var(--account-border,#d8dee4)!important;
  border-radius:16px!important;
  background:var(--account-surface,#fff)!important;
  box-shadow:0 28px 80px rgba(15,23,42,.28)!important;
}
body[data-account-page="bots"] #sh-interaction-view-welcome .jj-welcome-preview-modal-head-r29{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:16px!important;
  padding:18px 20px 15px!important;
  border-bottom:1px solid var(--account-border,#d8dee4)!important;
  background:var(--account-surface,#fff)!important;
}
body[data-account-page="bots"] #sh-interaction-view-welcome .jj-welcome-preview-modal-copy-r29{
  display:grid!important;
  gap:4px!important;
  min-width:0!important;
}
body[data-account-page="bots"] #sh-interaction-view-welcome .jj-welcome-preview-modal-title-line-r29{
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  flex-wrap:wrap!important;
}
body[data-account-page="bots"] #sh-interaction-view-welcome .jj-welcome-preview-modal-copy-r29 h3{
  margin:0!important;
  color:var(--account-text,#17212b)!important;
  font-size:18px!important;
  line-height:1.25!important;
}
body[data-account-page="bots"] #sh-interaction-view-welcome .jj-welcome-preview-modal-copy-r29 p{
  margin:0!important;
  color:var(--account-muted,#718096)!important;
  font-size:12px!important;
  line-height:1.45!important;
}
body[data-account-page="bots"] #sh-interaction-view-welcome .jj-welcome-preview-live-r29{
  display:inline-flex!important;
  align-items:center!important;
  min-height:23px!important;
  padding:3px 8px!important;
  border:1px solid rgba(45,164,78,.34)!important;
  border-radius:999px!important;
  background:rgba(45,164,78,.08)!important;
  color:#1f883d!important;
  font-size:9px!important;
  font-weight:850!important;
  white-space:nowrap!important;
}
body[data-account-page="bots"] #sh-interaction-view-welcome .jj-welcome-preview-close-r29{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 36px!important;
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  min-height:36px!important;
  padding:0!important;
  border:1px solid rgba(207,34,46,.45)!important;
  border-radius:10px!important;
  background:rgba(207,34,46,.06)!important;
  color:#cf222e!important;
  font:800 25px/1 Arial,sans-serif!important;
  cursor:pointer!important;
  transition:background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease!important;
}
body[data-account-page="bots"] #sh-interaction-view-welcome .jj-welcome-preview-close-r29:hover,
body[data-account-page="bots"] #sh-interaction-view-welcome .jj-welcome-preview-close-r29:focus-visible{
  border-color:#cf222e!important;
  background:#cf222e!important;
  color:#fff!important;
  outline:none!important;
  box-shadow:0 0 0 3px rgba(207,34,46,.12)!important;
}
body[data-account-page="bots"] #sh-interaction-view-welcome .jj-welcome-preview-context-r29{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  min-height:39px!important;
  padding:9px 20px!important;
  border-bottom:1px solid var(--account-border,#d8dee4)!important;
  background:var(--account-surface-soft,#f6f8fa)!important;
  color:var(--account-muted,#656d76)!important;
  font-size:11px!important;
  font-weight:750!important;
}
body[data-account-page="bots"] #sh-interaction-view-welcome .jj-welcome-preview-context-r29 strong{
  color:var(--account-text,#1f2328)!important;
  font-weight:850!important;
}
body[data-account-page="bots"] #sh-interaction-view-welcome .jj-welcome-preview-stage-r29{
  flex:1 1 auto!important;
  min-height:260px!important;
  max-height:calc(88vh - 132px)!important;
  overflow:auto!important;
  padding:22px!important;
  background:var(--account-surface-soft,#f6f8fa)!important;
  scrollbar-gutter:stable!important;
}
/* Mirror is display-only; preview buttons/links must never execute from the modal. */
body[data-account-page="bots"] #sh-interaction-view-welcome .jj-welcome-preview-stage-r29 .jj-welcome-preview-mirror-r29{
  width:100%!important;
  max-width:700px!important;
  margin:0 auto!important;
  pointer-events:none!important;
  user-select:none!important;
}
/* Keep the source's current renderer, but let it breathe in the wider modal. */
body[data-account-page="bots"] #sh-interaction-view-welcome .jj-welcome-preview-stage-r29 .shieldy-direct-message-preview-b53abbb03{
  width:100%!important;
  max-width:680px!important;
  margin:0 auto!important;
}
body[data-account-page="bots"] #sh-interaction-view-welcome .jj-welcome-preview-empty-r29{
  display:grid!important;
  place-items:center!important;
  gap:5px!important;
  min-height:230px!important;
  padding:26px!important;
  border:1px dashed var(--account-border,#d8dee4)!important;
  border-radius:13px!important;
  background:color-mix(in srgb,var(--account-surface,#fff) 76%,transparent)!important;
  text-align:center!important;
}
body[data-account-page="bots"] #sh-interaction-view-welcome .jj-welcome-preview-empty-r29 strong{
  color:var(--account-text,#1f2328)!important;
  font-size:14px!important;
}
body[data-account-page="bots"] #sh-interaction-view-welcome .jj-welcome-preview-empty-r29 span{
  max-width:520px!important;
  color:var(--account-muted,#656d76)!important;
  font-size:12px!important;
  line-height:1.45!important;
}

/* Dark theme alignment. */
html[data-theme="dark"] body[data-account-page="bots"] #sh-interaction-view-welcome .jj-welcome-preview-trigger-r29{
  background:rgba(46,160,67,.10)!important;
  border-color:rgba(63,185,80,.62)!important;
  color:#56d364!important;
}
html[data-theme="dark"] body[data-account-page="bots"] #sh-interaction-view-welcome .jj-welcome-preview-trigger-r29:hover,
html[data-theme="dark"] body[data-account-page="bots"] #sh-interaction-view-welcome .jj-welcome-preview-trigger-r29:focus-visible,
html[data-theme="dark"] body[data-account-page="bots"] #sh-interaction-view-welcome .jj-welcome-preview-trigger-r29[aria-expanded="true"]{
  background:#238636!important;
  border-color:#3fb950!important;
  color:#fff!important;
}
html[data-theme="dark"] body[data-account-page="bots"] #sh-interaction-view-welcome .jj-welcome-preview-live-r29{
  border-color:rgba(63,185,80,.4)!important;
  background:rgba(46,160,67,.10)!important;
  color:#56d364!important;
}
html[data-theme="dark"] body[data-account-page="bots"] #sh-interaction-view-welcome .jj-welcome-preview-close-r29{
  border-color:rgba(248,81,73,.5)!important;
  background:rgba(248,81,73,.08)!important;
  color:#ff7b72!important;
}
html[data-theme="dark"] body[data-account-page="bots"] #sh-interaction-view-welcome .jj-welcome-preview-close-r29:hover,
html[data-theme="dark"] body[data-account-page="bots"] #sh-interaction-view-welcome .jj-welcome-preview-close-r29:focus-visible{
  background:#da3633!important;
  border-color:#f85149!important;
  color:#fff!important;
}

@media(max-width:720px){
  body[data-account-page="bots"] #sh-interaction-view-welcome .welcome-event-card>.automod-rule-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:start!important;
  }
  body[data-account-page="bots"] #sh-interaction-view-welcome .welcome-event-card>.automod-rule-head>div:first-child{
    grid-column:1!important;
    grid-row:1!important;
  }
  body[data-account-page="bots"] #sh-interaction-view-welcome .welcome-event-card>.automod-rule-head>.mini-switch{
    grid-column:2!important;
    grid-row:1!important;
  }
  body[data-account-page="bots"] #sh-interaction-view-welcome .jj-welcome-preview-trigger-r29{
    grid-column:1 / -1!important;
    grid-row:2!important;
    width:100%!important;
    margin:2px 0 0!important;
  }
  body[data-account-page="bots"] #sh-interaction-view-welcome .jj-welcome-preview-modal-r29{
    width:calc(100vw - 20px)!important;
    max-height:92vh!important;
  }
  body[data-account-page="bots"] #sh-interaction-view-welcome .jj-welcome-preview-modal-dialog-r29{
    max-height:92vh!important;
    border-radius:14px!important;
  }
  body[data-account-page="bots"] #sh-interaction-view-welcome .jj-welcome-preview-modal-head-r29{
    padding:15px 15px 12px!important;
  }
  body[data-account-page="bots"] #sh-interaction-view-welcome .jj-welcome-preview-context-r29{
    padding:8px 15px!important;
  }
  body[data-account-page="bots"] #sh-interaction-view-welcome .jj-welcome-preview-stage-r29{
    max-height:calc(92vh - 124px)!important;
    min-height:220px!important;
    padding:14px!important;
  }
}