/* A Discord message, drawn the way Discord draws it (dark theme).
 *
 * Sizes, colours and the embed grid follow Discord's own client: a 4px colour
 * bar, the thumbnail spanning the right column, inline fields three to a row
 * on a twelve-column grid, the image full width under everything. The point
 * of a preview is that nothing surprises anyone after they press Send.
 */
.pe-msg {
  --pe-bg: #313338;
  --pe-text: #dbdee1;
  --pe-head: #f2f3f5;
  --pe-muted: #949ba4;
  --pe-link: #00a8fc;
  --pe-embed: #2b2d31;
  --pe-code: #1e1f22;
  display: flex;
  gap: 16px;
  padding: 14px 16px 16px;
  color: var(--pe-text);
  background: var(--pe-bg);
  border-radius: 12px;
  font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.375;
  text-align: left;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
.pe-avatar { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #5865f2; }
.pe-main { flex: 1 1 auto; min-width: 0; }
.pe-header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; margin-bottom: 1px; }
.pe-name { color: var(--pe-head); font-weight: 500; font-size: 16px; }
.pe-tag {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  position: relative;
  top: -2px;
  padding: 0 4.5px;
  height: 15px;
  font-size: 10px;
  font-weight: 600;
  line-height: 15px;
  color: #fff;
  background: #5865f2;
  border-radius: 3px;
  text-transform: uppercase;
}
.pe-tag svg { width: 12px; height: 12px; }
.pe-time { color: var(--pe-muted); font-size: 12px; font-weight: 500; }

.pe-content, .pe-desc, .pe-fvalue { white-space: pre-wrap; }
.pe-content { font-size: 16px; }
.pe-content:empty { display: none; }

/* ---- markdown -------------------------------------------------------------- */
.pe-msg a { color: var(--pe-link); text-decoration: none; }
.pe-msg a:hover { text-decoration: underline; }
.pe-msg strong { font-weight: 700; }
.pe-msg code {
  padding: 0 .2em;
  margin: -.2em 0;
  font-family: "gg mono", Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", Monaco, monospace;
  font-size: 85%;
  line-height: 1.125rem;
  background: var(--pe-embed);
  border: 1px solid var(--pe-code);
  border-radius: 4px;
  white-space: pre-wrap;
}
.pe-msg pre {
  margin: 6px 0 0;
  max-width: 90%;
  padding: 7px;
  font-family: "gg mono", Consolas, Monaco, monospace;
  font-size: 14px;
  line-height: 1.125rem;
  color: #b5bac1;
  background: var(--pe-embed);
  border: 1px solid var(--pe-code);
  border-radius: 4px;
  white-space: pre-wrap;
}
.pe-msg pre code { padding: 0; margin: 0; font-size: inherit; background: none; border: 0; }
.pe-embed code, .pe-embed pre { background: var(--pe-code); border-color: var(--pe-code); }
.pe-embed pre code { background: none; }
.pe-embed pre { max-width: 100%; }
.pe-quote { display: flex; margin: 2px 0; }
.pe-quote::before { content: ""; flex: 0 0 4px; border-radius: 4px; background: #4e5058; margin-inline-end: 12px; }
.pe-quote > div { min-width: 0; flex: 1 1 auto; }
.pe-h1, .pe-h2, .pe-h3 { display: block; margin: 8px 0 0; color: var(--pe-head); font-weight: 700; line-height: 1.375em; }
.pe-h1 { font-size: 24px; }
.pe-h2 { font-size: 20px; }
.pe-h3 { font-size: 16px; }
.pe-sub { display: block; color: var(--pe-muted); font-size: 13px; line-height: 1.11rem; }
.pe-msg ul, .pe-msg ol { margin: 4px 0 0 16px; padding: 0 0 0 10px; white-space: normal; }
.pe-msg li { margin-bottom: 2px; white-space: pre-wrap; }
.pe-spoiler { background: #1e1f22; color: transparent; border-radius: 3px; cursor: pointer; transition: color .1s, background .1s; }
.pe-spoiler.open { background: rgba(255, 255, 255, 0.1); color: inherit; }
.pe-mention {
  padding: 0 2px;
  font-weight: 500;
  color: #c9cdfb;
  background: rgba(88, 101, 242, 0.3);
  border-radius: 3px;
  white-space: nowrap;
}
.pe-stamp { padding: 0 2px; background: rgba(255, 255, 255, 0.06); border-radius: 3px; }
.pe-emoji { width: 1.375em; height: 1.375em; vertical-align: bottom; object-fit: contain; }
.pe-jumbo .pe-emoji { width: 48px; height: 48px; }

/* ---- the embed ------------------------------------------------------------- */
.pe-embeds { display: grid; gap: 4px; margin-top: 2px; }
.pe-embed {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-self: start;
  max-width: 516px;
  width: 100%;
  padding: 8px 16px 16px 12px;
  box-sizing: border-box;
  background: var(--pe-embed);
  border-left: 4px solid #1e1f22;
  border-radius: 4px;
}
.pe-embed.has-thumb { grid-template-columns: minmax(0, 1fr) auto; }
.pe-embed > * { grid-column: 1 / 2; min-width: 0; }
.pe-embed.has-thumb > .pe-image, .pe-embed.has-thumb > .pe-footer { grid-column: 1 / 3; }
.pe-author { display: flex; align-items: center; margin-top: 8px; color: var(--pe-head); font-size: 14px; font-weight: 600; line-height: 1.375; }
.pe-author a { color: var(--pe-head); }
.pe-author img { width: 24px; height: 24px; margin-inline-end: 8px; border-radius: 50%; object-fit: cover; }
.pe-title { margin-top: 8px; color: var(--pe-head); font-size: 16px; font-weight: 600; line-height: 1.375; }
.pe-title a { color: var(--pe-link); }
.pe-desc { margin-top: 8px; font-size: 14px; line-height: 1.125rem; }
.pe-fields { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.pe-field { min-width: 0; font-size: 14px; line-height: 1.125rem; }
.pe-fname { margin-bottom: 2px; color: var(--pe-head); font-weight: 600; }
.pe-thumb {
  grid-column: 2 / 3 !important;
  grid-row: 1 / 8;
  justify-self: end;
  margin: 8px 0 0 16px;
  max-width: 80px;
  max-height: 80px;
  border-radius: 4px;
  object-fit: contain;
}
.pe-image { margin-top: 16px; max-width: 100%; max-height: 300px; border-radius: 4px; object-fit: contain; justify-self: start; }
.pe-footer { display: flex; align-items: center; margin-top: 8px; color: var(--pe-text); font-size: 12px; font-weight: 500; line-height: 1rem; }
.pe-footer img { width: 20px; height: 20px; margin-inline-end: 8px; border-radius: 50%; object-fit: cover; }
.pe-footer .pe-sep { margin: 0 4px; }
.pe-broken {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  color: #f0b232;
  font-size: 12px;
  line-height: 1.3;
  text-align: center;
  background: rgba(240, 178, 50, 0.08);
  border: 1px dashed rgba(240, 178, 50, 0.45);
  border-radius: 4px;
}
.pe-thumb.pe-broken { width: 80px; height: 80px; padding: 4px; }

/* ---- components ------------------------------------------------------------ */
.pe-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 60px;
  height: 32px;
  padding: 2px 16px;
  box-sizing: border-box;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  border-radius: 8px;
  background: #4e5058;
  user-select: none;
}
.pe-btn.primary { background: #5865f2; }
.pe-btn.success { background: #248046; }
.pe-btn.danger { background: #da373c; }
.pe-btn.off { opacity: .5; }
.pe-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 400px;
  height: 40px;
  padding: 0 12px;
  margin-top: 8px;
  box-sizing: border-box;
  color: var(--pe-muted);
  font-size: 14px;
  background: #1e1f22;
  border: 1px solid #1e1f22;
  border-radius: 8px;
}
.pe-select svg { width: 16px; height: 16px; }

@media (max-width: 520px) {
  .pe-msg { gap: 10px; padding: 12px 10px 14px; }
  .pe-avatar { flex-basis: 34px; width: 34px; height: 34px; }
  .pe-embed.has-thumb .pe-thumb { max-width: 60px; max-height: 60px; }
}