/* Shieldy Welcome/Goodbye independent components v756.
   Preview boundaries intentionally model Discord messages, not UI cards. */
.welcome-components-card-v753 .feature-toggle-grid{margin-top:12px}
.welcome-components-card-v753 .feature-toggle-grid>label{min-height:72px}

.welcome-v754-message-count,
.welcome-v753-message-count{
  display:inline-flex;align-items:center;width:max-content;max-width:100%;
  margin:0 0 8px 48px;padding:4px 9px;
  border:1px solid var(--border-color,#30363d);border-radius:999px;
  background:rgba(110,118,129,.12);color:var(--muted,#8b949e);
  font-size:11px;font-weight:700;letter-spacing:.01em
}
.welcome-v754-message-count[data-count="2"],
.welcome-v753-message-count[data-count="2"]{color:var(--text-color,#c9d1d9)}
.welcome-v753-native-banner{display:block;width:100%;max-height:240px;object-fit:cover;border-radius:0 0 7px 7px}
.welcome-native-embed-image-slot[hidden]{display:none!important}

/* There is one authoritative Embed switch in "Состав сообщения". Legacy
   per-mode toggles stay in DOM only for compatibility with saved fields. */
.welcome-native-embed-mode-card .welcome-native-embed-toggle{display:none!important}

/* One Discord message may contain both Embed and Shieldy Card, but they remain
   separate attachments/components. Never visually weld their borders. */
#sh-interaction-view-welcome .welcome-preview-card-slot{
  display:grid!important;
  grid-template-columns:minmax(0,1fr);
  gap:12px!important;
  min-width:0
}
#sh-interaction-view-welcome .welcome-preview-card-slot:empty{display:none!important}
#sh-interaction-view-welcome .welcome-preview-card-slot>.welcome-native-embed-shell,
#sh-interaction-view-welcome .welcome-preview-card-slot>.welcome-embed-preview{
  min-width:0
}
#sh-interaction-view-welcome .welcome-preview-card-slot>.welcome-native-embed-shell+.welcome-embed-preview{
  margin-top:0!important
}

/* Separate mode is a real second Discord message. */
#sh-interaction-view-welcome [data-preview-primary-message][hidden],
#sh-interaction-view-welcome [data-preview-secondary-message][hidden]{display:none!important}
#sh-interaction-view-welcome [data-preview-secondary-message]{
  margin-top:2px!important;
  padding:12px!important
}
#sh-interaction-view-welcome [data-preview-secondary-message] .welcome-v754-secondary-author{
  margin:0 0 7px!important
}
#sh-interaction-view-welcome [data-preview-secondary-message] [data-preview-secondary-card-slot]{
  margin:0!important
}

/* Card/attachment indentation follows the author only in the first message.
   The second message owns its own author row, so its visual payload can use the
   full message width. Data selectors are used because the HTML intentionally
   keeps these slots id-free for Welcome and Goodbye reuse. */
#sh-interaction-view-welcome [data-preview-primary-card-slot]>.welcome-native-embed-shell,
#sh-interaction-view-welcome [data-preview-primary-card-slot]>.welcome-embed-preview{
  width:auto!important;
  max-width:calc(100% - 47px)!important;
  margin-left:47px!important;
  margin-right:0!important
}
#sh-interaction-view-welcome [data-preview-secondary-card-slot]>.welcome-native-embed-shell,
#sh-interaction-view-welcome [data-preview-secondary-card-slot]>.welcome-embed-preview{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important
}

@media (max-width:720px){
  .welcome-v754-message-count,.welcome-v753-message-count{margin-left:0}
  #sh-interaction-view-welcome [data-preview-primary-card-slot]>.welcome-native-embed-shell,
  #sh-interaction-view-welcome [data-preview-primary-card-slot]>.welcome-embed-preview{
    max-width:100%!important;margin-left:0!important
  }
}

/* v756: old preview styles must never override the native hidden attribute. */
#sh-interaction-view-welcome [data-preview-embed][hidden],
#sh-interaction-view-welcome .shieldy-welcome-image-card[hidden],
#sh-interaction-view-welcome [data-preview-native-embed][hidden]{
  display:none!important;
}

/* v756: concise Free explanation and expandable media libraries. */
#sh-interaction-view-welcome .welcome-free-visual-guide-v756{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin:12px 0 0;
}
#sh-interaction-view-welcome .welcome-free-visual-guide-v756>span{
  display:grid;
  gap:2px;
  min-width:0;
  padding:9px 10px;
  border:1px solid var(--account-border,#d8dee4);
  border-radius:10px;
  background:var(--account-surface-soft,#f6f8fa);
}
#sh-interaction-view-welcome .welcome-free-visual-guide-v756 b{
  color:var(--account-text,#1f2328);
  font-size:11px;
}
#sh-interaction-view-welcome .welcome-free-visual-guide-v756 small{
  color:var(--account-muted,#656d76);
  font-size:10px;
}
#sh-interaction-view-welcome .welcome-event-form[data-jj-welcome-section="premium"]
.welcome-subsection[data-jj-welcome-category="visual"]>.welcome-free-visual-guide-v756{
  display:none!important;
}
#sh-interaction-view-welcome .shieldy-site-media-disclosure{
  margin-top:12px;
  border:1px solid var(--account-border,#d8dee4);
  border-radius:11px;
  background:var(--account-surface-soft,#f6f8fa);
  overflow:hidden;
}
#sh-interaction-view-welcome .shieldy-site-media-disclosure>summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:46px;
  padding:10px 12px;
  cursor:pointer;
  list-style:none;
  user-select:none;
}
#sh-interaction-view-welcome .shieldy-site-media-disclosure>summary::-webkit-details-marker{display:none}
#sh-interaction-view-welcome .shieldy-site-media-disclosure>summary span{
  display:grid;
  gap:2px;
  min-width:0;
}
#sh-interaction-view-welcome .shieldy-site-media-disclosure>summary strong{
  color:var(--account-text,#1f2328);
  font-size:11px;
}
#sh-interaction-view-welcome .shieldy-site-media-disclosure>summary small{
  color:var(--account-muted,#656d76);
  font-size:10px;
}
#sh-interaction-view-welcome .shieldy-site-media-disclosure>summary i{
  color:var(--account-muted,#656d76);
  font-style:normal;
  transition:transform .16s ease;
}
#sh-interaction-view-welcome .shieldy-site-media-disclosure[open]>summary{
  border-bottom:1px solid var(--account-border,#d8dee4);
  background:var(--account-surface,#fff);
}
#sh-interaction-view-welcome .shieldy-site-media-disclosure[open]>summary i{transform:rotate(180deg)}
#sh-interaction-view-welcome .shieldy-site-media-disclosure__body{padding:12px}
@media(max-width:720px){
  #sh-interaction-view-welcome .welcome-free-visual-guide-v756{grid-template-columns:1fr}
}