/* /EmbedCreator: message editor with a Discord-style preview (dark palette of its own) */
:root { --ec-bg: #313338; --ec-panel: #2b2d31; --ec-input: #1e1f22; --ec-text: #dbdee1; --ec-muted: #949ba4; --ec-accent: #5865f2; --ec-line: #3f4147; --ec-bad: #f23f43; }
* { box-sizing: border-box; }
body.ec-page { margin: 0; background: var(--ec-bg); color: var(--ec-text); font-family: "gg sans", "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.4; }
.ec-wrap { max-width: 1280px; margin: 0 auto; padding: 24px 16px 60px; }
.ec-title { margin: 0 0 18px; font-size: 1.7rem; font-weight: 600; }
.ec-heading { margin: 0 0 10px; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ec-muted); }
.ec-noscript { color: var(--ec-bad); }
.ec-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 900px) { .ec-layout { grid-template-columns: minmax(0, 1fr); } }
.ec-preview-col { position: sticky; top: 16px; }
@media (max-width: 900px) { .ec-preview-col { position: static; } }

/* editor */
.ec-box { background: var(--ec-panel); border: 1px solid var(--ec-line); border-radius: 8px; padding: 14px 16px; margin-bottom: 14px; }
.ec-box > summary, .ec-sub > summary { cursor: pointer; font-weight: 600; list-style-position: inside; }
.ec-box > summary { font-size: 1rem; }
.ec-box[open] > summary { margin-bottom: 10px; }
.ec-sub { border-top: 1px solid var(--ec-line); margin-top: 12px; padding-top: 10px; }
.ec-sub[open] > summary { margin-bottom: 8px; }
.ec-row { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.ec-row > label, .ec-label { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--ec-muted); display: flex; justify-content: space-between; }
.ec-count { font-weight: 400; }
.ec-row input[type="text"], .ec-row input[type="url"], .ec-row textarea, .ec-hex { width: 100%; padding: 8px 10px; font: inherit; font-size: .95rem; color: var(--ec-text); background: var(--ec-input); border: 1px solid transparent; border-radius: 4px; }
.ec-row textarea { min-height: 90px; resize: vertical; }
.ec-row input:focus, .ec-row textarea:focus, .ec-hex:focus { outline: none; border-color: var(--ec-accent); }
.ec-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ec-color { display: flex; align-items: center; gap: 10px; }
.ec-color input[type="color"] { width: 42px; height: 34px; padding: 0; border: 0; background: none; cursor: pointer; }
.ec-hex { width: 120px; }
.ec-check { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--ec-text); }
.ec-btn { padding: 7px 14px; font: inherit; font-size: .9rem; font-weight: 500; color: #fff; background: var(--ec-accent); border: 0; border-radius: 4px; cursor: pointer; }
.ec-btn:hover { filter: brightness(1.1); }
.ec-btn.ghost { background: transparent; color: var(--ec-text); border: 1px solid var(--ec-line); }
.ec-btn.danger { background: transparent; color: var(--ec-bad); border: 1px solid var(--ec-line); }
.ec-field { border: 1px solid var(--ec-line); border-radius: 6px; padding: 8px 10px; margin: 8px 0; background: var(--ec-bg); }
.ec-field-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ec-json { width: 100%; min-height: 240px; padding: 10px; font: .85rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ec-text); background: var(--ec-input); border: 1px solid transparent; border-radius: 4px; resize: vertical; white-space: pre; }
.ec-json:focus { outline: none; border-color: var(--ec-accent); }
.ec-json.bad { border-color: var(--ec-bad); }
.ec-jsonmsg { min-height: 1.3em; margin: 6px 0 0; font-size: .85rem; color: var(--ec-bad); }
.ec-actions { display: flex; gap: 8px; margin-top: 8px; }

/* preview: a webhook message with one embed */
.dc-preview { background: var(--ec-bg); border: 1px solid var(--ec-line); border-radius: 8px; padding: 16px; font-size: 1rem; }
.dc-message { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; }
.dc-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--ec-accent) center / cover; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.dc-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.dc-name { font-weight: 500; color: #f2f3f5; }
.dc-bot { padding: 0 4px; border-radius: 3px; background: var(--ec-accent); color: #fff; font-size: .62rem; font-weight: 600; line-height: 1.3; text-transform: uppercase; align-self: center; }
.dc-time { font-size: .72rem; color: var(--ec-muted); }
.dc-content { white-space: pre-wrap; overflow-wrap: anywhere; }
.dc-content:empty { display: none; }
.dc-md h1, .dc-md h2, .dc-md h3 { margin: 8px 0 4px; font-weight: 700; line-height: 1.2; white-space: normal; }
.dc-md h1 { font-size: 1.5rem; } .dc-md h2 { font-size: 1.25rem; } .dc-md h3 { font-size: 1.05rem; }
.dc-md a { color: #00a8fc; text-decoration: none; } .dc-md a:hover { text-decoration: underline; }
.dc-md code { padding: 1px 4px; border-radius: 3px; background: #1e1f22; font: .85em ui-monospace, Menlo, Consolas, monospace; }
.dc-md pre { margin: 6px 0; padding: 8px; border: 1px solid #1e1f22; border-radius: 4px; background: #2b2d31; white-space: pre-wrap; }
.dc-md pre code { padding: 0; background: none; }
.dc-md blockquote { margin: 2px 0; padding: 0 8px 0 12px; border-left: 4px solid #4e5058; white-space: pre-wrap; }
.dc-spoiler { background: #1e1f22; color: transparent; border-radius: 3px; cursor: pointer; }
.dc-spoiler.shown { background: #3b3d44; color: inherit; }
.dc-embed { display: grid; grid-template-columns: minmax(0, 1fr) auto; max-width: 520px; margin-top: 6px; padding: 8px 16px 16px 12px; background: var(--ec-panel); border-left: 4px solid #1e1f22; border-radius: 4px; }
.dc-embed > * { grid-column: 1; min-width: 0; }
.dc-embed > .dc-thumb { grid-column: 2; grid-row: 1 / span 8; margin: 8px 0 0 16px; max-width: 80px; max-height: 80px; border-radius: 4px; object-fit: contain; justify-self: end; }
.dc-embed > .dc-wide { grid-column: 1 / -1; }
.dc-author { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: .875rem; font-weight: 600; color: #f2f3f5; }
.dc-author img { width: 24px; height: 24px; border-radius: 50%; }
.dc-etitle { margin-top: 8px; font-size: 1rem; font-weight: 600; color: #f2f3f5; overflow-wrap: anywhere; }
.dc-etitle a { color: #00a8fc; }
.dc-edesc { margin-top: 8px; font-size: .875rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.dc-edesc:empty { display: none; }
.dc-fields { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.dc-fname { font-size: .875rem; font-weight: 600; color: #f2f3f5; overflow-wrap: anywhere; }
.dc-fvalue { font-size: .875rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.dc-image { display: block; max-width: 100%; max-height: 300px; margin-top: 16px; border-radius: 4px; }
.dc-footer { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: .75rem; color: var(--ec-muted); }
.dc-footer img { width: 20px; height: 20px; border-radius: 50%; }
.ec-row .ec-color input.ec-hex { width: 120px; flex: none; } /* beats the width: 100% of .ec-row input[type="text"] */
.ec-btn { white-space: nowrap; }
.ec-linkrow { display: flex; gap: 8px; }
.ec-linkrow .ec-link { flex: 1; min-width: 0; padding: 8px 10px; font: .85rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ec-text); background: var(--ec-input); border: 1px solid transparent; border-radius: 4px; }
.ec-linkrow .ec-link:focus { outline: none; border-color: var(--ec-accent); }
.ec-linkrow .ec-link.bad { border-color: var(--ec-bad); }
.ec-editrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ec-editing { border-color: var(--ec-accent); }
.ec-save { background: #248046; letter-spacing: .03em; }
.ec-newrow { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ec-newrow .ec-name { width: 220px; padding: 7px 10px; font: inherit; font-size: .95rem; color: var(--ec-text); background: var(--ec-input); border: 1px solid transparent; border-radius: 4px; }
.ec-newrow .ec-name:focus { outline: none; border-color: var(--ec-accent); }
.ec-btn:disabled { opacity: .45; cursor: not-allowed; filter: none; }

.ec-info { width: min(760px, 100%); margin: 0 0 20px; }

/* wide screens: the Information box goes in the empty space left of the editor, top level with the Link box (placed by embedcreator.js) */
@media (min-width: 2060px) {
  .ec-wrap { position: relative; }
  .ec-info { position: absolute; top: var(--ec-info-top, 0); right: calc(100% + 4px); width: 380px; margin: 0; }
}