

.discord-preview {
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:20px 16px;
  max-width:704px;
  margin:0 auto;
  border-radius:8px;
  background:#313338;
  color:#dbdee1;
  font:400 16px/1.375 "gg sans","Noto Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  text-align:left;
  overflow-wrap:anywhere;
  color-scheme:dark
}
.composer-canvas.preview-mode { background:#313338;border-color:#1e1f22;padding:8px }
.discord-preview .discord-avatar { width:40px;height:40px;flex:none;border-radius:50%;object-fit:cover;margin-top:2px }
.discord-message { flex:1;min-width:0 }
.discord-head { display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin:0 0 4px;min-height:22px }
.discord-head strong { font-size:16px;font-weight:600;color:#f2f3f5;line-height:22px }
.discord-head small { color:#949ba4;font-size:12px;font-weight:400;margin-left:3px }
.discord-head .bot-tag { display:inline-flex;align-items:center;gap:2px;font-size:10px;line-height:15px;height:15px;padding:0 4px;color:#fff;background:#5865f2;border-radius:3px }
.bot-tag .icon { width:10px;height:10px;stroke-width:3px }
.discord-stack,.discord-block,.discord-section-text { display:flex;flex-direction:column;gap:8px;min-width:0 }
.discord-block { position:relative;background:#2b2d31;border:1px solid #1e1f22;border-radius:8px;padding:16px;max-width:520px;overflow:hidden }
.discord-block.has-accent { padding-left:19px }
.discord-accent { position:absolute;left:0;top:0;width:4px;height:100%;pointer-events:none }
.discord-markdown { min-width:0 }
.discord-content .discord-markdown p,.discord-fragment .discord-markdown p { margin:0;font-size:inherit;line-height:1.375;color:inherit;white-space:pre-wrap;overflow-wrap:anywhere }
.discord-markdown strong { font-weight:700 }
.discord-content .discord-markdown h1,.discord-content .discord-markdown h2,.discord-content .discord-markdown h3,
.discord-fragment .discord-markdown h1,.discord-fragment .discord-markdown h2,.discord-fragment .discord-markdown h3 {
  margin:16px 0 8px;color:inherit;font-weight:700;letter-spacing:normal;line-height:1.25
}
.discord-content .discord-markdown h1,.discord-fragment .discord-markdown h1 { font-size:24px }
.discord-content .discord-markdown h2,.discord-fragment .discord-markdown h2 { font-size:20px }
.discord-content .discord-markdown h3,.discord-fragment .discord-markdown h3 { font-size:16px }
.discord-markdown>:first-child { margin-top:0!important }
.discord-markdown>:last-child { margin-bottom:0!important }
.discord-content .discord-markdown .discord-subtext,.discord-fragment .discord-markdown .discord-subtext { font-size:13px;line-height:1.4;color:#949ba4 }
.discord-markdown ul,.discord-markdown ol { margin:4px 0;padding-left:24px }
.discord-markdown li { padding:0;margin:0;white-space:pre-wrap }
.discord-markdown blockquote { border-left:4px solid #4e5058;padding-left:12px;margin:4px 0;white-space:pre-wrap }
.discord-markdown code { background:#1e1f22;font:85%/1.4 Consolas,"Courier New",monospace;border-radius:3px;padding:2px 4px;white-space:pre-wrap;overflow-wrap:anywhere }
.discord-markdown pre { background:#2b2d31;border:1px solid #1e1f22;border-radius:4px;padding:8px;margin:6px 0;white-space:pre-wrap }
.discord-markdown pre code { background:transparent;padding:0 }
.discord-link { color:#00a8fc;text-decoration:none;cursor:default }
a.discord-link { cursor:pointer }
a.discord-link:hover { text-decoration:underline }
.discord-mention { background:#5865f24d;color:#c9cdfb;border-radius:3px;padding:0 2px;font-weight:500 }
.discord-timestamp { background:#4e505899;border-radius:3px;padding:0 2px }
.discord-emoji { display:inline-block;width:20px;height:20px;font-size:20px;line-height:20px;vertical-align:middle;object-fit:contain;flex:none }
.discord-section { display:flex;align-items:flex-start;gap:16px;min-width:0 }
.discord-section-text { flex:1;min-width:0 }
.discord-accessory { flex:none;align-self:center;max-width:40% }
.discord-thumbnail { width:80px;height:80px;max-width:100%;overflow:hidden;border-radius:8px }
.discord-thumbnail .preview-image { width:100%;height:100%;object-fit:cover;display:block }
.discord-thumbnail .media-placeholder { width:80px;height:80px;padding:6px;font-size:10px }
.discord-row { display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0 }
.discord-button { display:inline-flex;justify-content:center;align-items:center;gap:8px;min-height:32px;min-width:60px;padding:6px 16px;background:#4e5058;color:#fff;border:1px solid transparent;border-radius:4px;font-size:14px;font-weight:500;line-height:18px;white-space:normal;overflow-wrap:anywhere;cursor:default }
.discord-button.primary { background:#5865f2 }
.discord-button.success { background:#248046 }
.discord-button.danger { background:#da373c }
.discord-button.premium { background:#5865f2 }
.discord-button.is-disabled,.discord-select.is-disabled { opacity:.5 }
.discord-button>.icon { width:16px;height:16px;flex:none }
.discord-select { display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:40px;background:#1e1f22;border:1px solid #1e1f22;border-radius:4px;color:#b5bac1;padding:8px 12px;width:100%;font-size:14px }
.discord-separator { flex:none;height:1px;background:#4e505899;margin:8px 0 }
.discord-separator.large { margin:16px 0 }
.discord-separator.no-divider { background:transparent }
.discord-gallery { display:grid;gap:4px;grid-template-columns:minmax(0,1fr);min-width:0;overflow:hidden;border-radius:8px }
.discord-gallery.gallery-2,.discord-gallery.gallery-3,.discord-gallery.gallery-4 { grid-template-columns:repeat(2,minmax(0,1fr)) }
.discord-gallery.gallery-3>:first-child { grid-row:span 2 }
.discord-gallery-item { min-width:0;overflow:hidden;display:flex }
.discord-gallery .preview-image { display:block;width:100%;max-height:350px;object-fit:cover;min-width:0 }
.discord-gallery:not(.gallery-1) .preview-image { height:100%;max-height:300px;aspect-ratio:1 }
.discord-gallery.gallery-3>:first-child .preview-image { aspect-ratio:.5 }
.discord-gallery .media-placeholder { flex:1 }
.discord-file { display:flex;align-items:center;gap:12px;padding:16px;background:#2b2d31;border:1px solid #1e1f22;border-radius:8px;font-size:14px }
.discord-file>.icon { width:28px;height:28px;flex:none;color:#b5bac1 }
.discord-file>.icon:last-child { width:20px;height:20px;margin-left:auto }
.discord-spoiler { position:relative;display:inline;background:#1e1f22;border-radius:3px;cursor:pointer }
.discord-spoiler:not(.is-revealed)>.spoiler-content { opacity:0;user-select:none;pointer-events:none }
.discord-spoiler.is-revealed { background:#4e505866 }
.discord-spoiler.spoiler-block { display:block;border-radius:8px;overflow:hidden }
.spoiler-block>.spoiler-content { display:block }
.spoiler-block:not(.is-revealed)>.spoiler-content { opacity:1;filter:blur(30px) }
.spoiler-caption { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700;letter-spacing:.5px;background:#1117 }
.is-revealed>.spoiler-caption { display:none }
.discord-spoiler:focus-visible { outline:2px solid #00a8fc;outline-offset:2px }
.media-placeholder { display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:20px 14px;background:#232428;color:#b5bac1;min-height:80px;font-size:12px;text-align:center;overflow-wrap:anywhere }
.block-preview .media-placeholder { background:#f1f2ef;color:#6b747d }
.block-preview .discord-markdown .discord-subtext { color:#757b83 }
.block-preview .preview-image { max-height:130px }
.discord-fragment { font:400 16px/1.375 "gg sans","Noto Sans","Helvetica Neue",Helvetica,Arial,sans-serif;pointer-events:none }
.block-container { position:relative }
.builder-accent { position:absolute;inset:0;pointer-events:none;border-radius:8px;overflow:hidden;z-index:1 }
.block-container:has(>.builder-accent>.discord-accent)>.block-heading { padding-left:11px }
.preview-foot { display:block;font-size:11px;margin-top:10px }
@media(max-width:600px) {
  .discord-preview { padding:16px 12px;gap:10px }
  .discord-preview .discord-avatar { width:32px;height:32px }
  .discord-block { padding:12px }
  .discord-block.has-accent { padding-left:15px }
  .discord-button { padding:6px 10px }
  .discord-head small { flex-basis:100%;margin-left:0 }
}