/* Embed builder styles — extracted from dashboard.css (identical cascade;
   selectors are disjoint from what remains, so load order is safe).
   Loaded right after dashboard.css in shell.html. */

#wg-pane-welcome .emb-bar{ background:linear-gradient(180deg,#10B981,#0d9668); }
#wg-pane-welcome.wb-mode-text .emb-bar,
#wg-pane-welcome .wb-mode-text .emb-bar{ background:rgba(255,255,255,0.1); }
.wg-boost .emb-bar{ background:linear-gradient(180deg,#F47FFF,#C850E0); }
.wg-boost.wb-mode-text .emb-bar,
.wg-boost .wb-mode-text .emb-bar{ background:rgba(255,255,255,0.1); }
.emb-bar{ flex:0 0 4px; background:var(--grad-crimson); }
.emb-main{ flex:1; min-width:0; padding:16px 18px; display:flex; flex-direction:column; gap:13px; }
.emb-author{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-muted); }
.emb-chrome-field{ flex:1; min-width:0; }
.emb-author .ep-host, .emb-footer .ep-host,
.emb-author .ep-host-inline, .emb-footer .ep-host-inline{ width:auto; flex:1; min-width:0; }
.emb-input-author{ font-size:13px; font-weight:600; padding:6px 10px; }
.emb-input-footer{ font-size:12px; padding:5px 10px; }
.emb-author .ebx-img-x, .emb-footer .ebx-img-x{
  width:14px; height:14px; font-size:9px; top:-5px; right:-5px;
}
.emb-author-av{ width:22px; height:22px; border-radius:50%; background:var(--surface-3); display:inline-flex; align-items:center; justify-content:center; font-size:12px; }
.emb-author-name{ font-weight:600; color:var(--text); }
.emb-chip{ font-size:9px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-dim);
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08);
  padding:2px 7px; border-radius:999px; margin-left:auto; font-family:'JetBrains Mono',monospace; }
.emb-grid{ display:flex; gap:14px; align-items:flex-start; }
.emb-col{ flex:1; min-width:0; display:flex; flex-direction:column; gap:13px; }
.emb-region{ display:flex; flex-direction:column; gap:5px; }
.emb-tag{ font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--text-dim); font-family:'JetBrains Mono',monospace; }
.emb-input-title{ font-size:16px; font-weight:700; }
.emb-thumb{
  flex:0 0 84px; height:84px; border:1px dashed rgba(255,255,255,0.14); border-radius:8px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  color:var(--text-dim); font-size:10px; text-align:center; background:rgba(255,255,255,0.02);
}
.emb-thumb-ic{ font-size:18px; opacity:.6; }
.emb-thumb .emb-chip{ margin-left:0; }
.emb-image{
  width:100%; min-height:118px; border:1px dashed rgba(255,255,255,0.14); border-radius:10px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  color:var(--text-dim); font-size:12px; cursor:pointer; background:rgba(255,255,255,0.02);
  background-size:cover; background-position:center; background-repeat:no-repeat;
  transition:border-color .18s var(--ease), color .18s var(--ease);
  position:relative;
}
.emb-image:hover{ border-color:rgba(232,25,44,0.5); color:var(--text-muted); }
.emb-image-clear{
  display:none; position:absolute; top:8px; right:8px;
  width:24px; height:24px; border-radius:7px; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.6); color:#fff; font-size:16px; line-height:1;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,0.15); cursor:pointer;
}
.emb-image-clear:hover{ background:rgba(232,25,44,0.85); }
.emb-image.has-img .emb-image-clear{ display:flex; }
.emb-image-ic{ font-size:22px; opacity:.6; }
.emb-image.has-img{ min-height:160px; border-style:solid; border-color:rgba(255,255,255,0.12); justify-content:flex-end; align-items:flex-end; padding:10px; }
.emb-image.has-img .emb-image-ic{ display:none; }
.emb-image.has-img .emb-image-lbl{ background:rgba(0,0,0,0.6); color:#fff; padding:4px 10px; border-radius:7px; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.emb-image.has-img .emb-image-lbl::before{ content:"Change image"; }
.emb-image.has-img .emb-image-lbl{ font-size:0; }
.emb-image.has-img .emb-image-lbl::before{ font-size:11px; }
.emb-footer{ display:flex; align-items:center; gap:6px; font-size:11px; color:var(--text-dim);
  border-top:1px solid rgba(255,255,255,0.06); padding-top:10px; }
.emb-footer .emb-chip{ margin-left:auto; }
.discovery-icon-zone .emb-image-ic{ font-size:26px; opacity:.6; }
.discovery-icon-zone.has-img .emb-image-ic{ display:none; }
.discovery-icon-zone .emb-image-clear{ display:none; }
.discovery-icon-zone.has-img .emb-image-clear{ display:flex; width:22px; height:22px; font-size:14px; }
.discovery-banner-zone .emb-image-ic{ font-size:22px; opacity:.6; }
.discovery-banner-zone.has-img .emb-image-ic,.discovery-banner-zone.has-img .emb-image-lbl{ display:none; }
.discovery-banner-zone.has-img .emb-image-clear{ display:flex; }
.discovery-icon-zone.locked .emb-image-clear,.discovery-banner-zone.locked .emb-image-clear{ display:none !important; }
.discovery-banner-zone.locked .emb-image-ic,.discovery-banner-zone.locked .emb-image-lbl{ display:none; }

/* Placeholders helper bar */
.emb-ph{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px; padding:10px 14px;
  border-radius:10px; background:linear-gradient(135deg, rgba(0,176,244,0.07), rgba(88,101,242,0.04));
  border:1px solid rgba(88,101,242,0.2); }
.emb-ph-title{ font-size:11px; font-weight:700; color:#8aa0ff; font-family:'JetBrains Mono',monospace; }
.emb-ph code{ font-size:11px; color:#cbd2ff; background:rgba(255,255,255,0.06); padding:2px 7px; border-radius:6px; font-family:'JetBrains Mono',monospace; }
.emb-ph-hint{ font-size:11px; color:var(--text-dim); margin-left:auto; }
/* Text mode softens the canvas into a plain message box */
.wb-mode-text .emb-canvas{ background:rgba(255,255,255,0.02); }
.wb-mode-text .emb-bar{ background:rgba(255,255,255,0.1); }
.wb-mode-text .emb-input-desc{ min-height:88px; }
.wb-compact .emb-main{ padding:12px 14px; gap:10px; }
.wb-compact .emb-input-desc{ min-height:64px; }
.wb-compact .emb-ph{ margin-top:8px; padding:8px 10px; }

@media (max-width:560px){
  .emb-grid{ flex-direction:column; }
  .emb-thumb{ flex:0 0 auto; width:100%; height:64px; flex-direction:row; }
  .emb-ph-hint{ margin-left:0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   EMBED BUILDER  (#tab-embed)
   Builder = grouped form + a Discord-accurate live preview. Saved/History =
   card lists. The preview palette is hardcoded to Discord's dark theme so it
   reads as a real embed regardless of dashboard surface tokens.
   ═══════════════════════════════════════════════════════════════════════════ */
.emb-layout{ grid-template-columns:1fr 440px; }
.emb-side{ position:sticky; top:20px; display:flex; flex-direction:column; gap:16px; }

/* colour picker row */
.emb-color-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.emb-color.emb-color-off{ opacity:.45; }
.emb-color.emb-color-off input[type=color]{ filter:grayscale(1); }

/* fields builder */
.emb-fields-list{ display:flex; flex-direction:column; gap:10px; margin:10px 0 12px; }
.emb-field-row{ background:rgba(255,255,255,.02); border:1px solid var(--border); border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:8px; }
.emb-field-head{ display:flex; align-items:center; gap:10px; }
.emb-field-idx{ font-size:11px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:var(--text-dim); margin-right:auto; }
.emb-field-inline-tog{ display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--text-muted); cursor:pointer; }
.emb-addfield-btn{ width:100%; }

/* action bar */
.emb-actions{ display:flex; gap:10px; margin-top:6px; }
.emb-actions .emb-publish-btn{ flex:1; }
.emb-actions .btn-ghost{ flex:0 0 auto; }
.emb-actions-sub{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:8px; min-height:16px; }
.emb-cap-note{ font-size:11px; color:var(--text-dim); }
.emb-publish-card{ }

/* ── LIVE PREVIEW — Discord message + embed ─────────────────────────────── */
.emb-pv-msg{ display:flex; gap:14px; padding:6px 2px; }
.emb-pv-avatar{ width:40px; height:40px; border-radius:50%; flex:0 0 auto;
  background:radial-gradient(circle at 30% 30%, #b32530, #7d1a22); }
.emb-pv-body{ min-width:0; flex:1; }
.emb-pv-author{ display:flex; align-items:center; gap:8px; margin-bottom:3px; }
.emb-pv-name{ font-weight:600; color:#f2f3f5; font-size:15px; }
.emb-pv-content{ color:#dbdee1; font-size:14px; line-height:1.4; margin-bottom:6px; white-space:pre-wrap; overflow-wrap:anywhere; }
.emb-pv-empty{ color:var(--text-dim); font-size:13px; font-style:italic; padding:8px 0; }

.emb-pv{ position:relative; width:100%; max-width:100%; min-width:0; box-sizing:border-box;
  background:#2b2d31; border-radius:4px;
  border-left:4px solid #4f545c; padding:8px 16px 16px 12px; }
.emb-pv-grid{ display:flex; gap:12px; }
.emb-pv-main{ min-width:0; flex:1; }
.emb-pv-authorrow{ display:flex; align-items:center; gap:8px; margin:6px 0 2px; }
.emb-pv-authoricon{ width:24px; height:24px; border-radius:50%; object-fit:cover; }
.emb-pv-authorname{ font-size:14px; font-weight:600; color:#f2f3f5; overflow-wrap:anywhere; }
.emb-pv-title{ display:block; font-size:16px; font-weight:600; color:#f2f3f5; margin:6px 0 0; overflow-wrap:anywhere; text-decoration:none; }
.emb-pv-title-link{ color:#00a8fc; }
.emb-pv-desc{ font-size:14px; color:#d1d3d7; line-height:1.4; margin-top:8px; white-space:pre-wrap; overflow-wrap:anywhere; }
.emb-pv-desc a, .emb-pv-link{ color:#00a8fc; text-decoration:none; }
.emb-pv-code{ background:#1e1f22; border-radius:4px; padding:1px 4px; font-family:'JetBrains Mono',monospace; font-size:12px; color:#e3e5e8; white-space:pre-wrap; }


/* Discord's line-level markdown, mirrored in the preview so what you see is
   what gets posted: headings, quotes, subtext, bullets and spoilers. Each is a
   block-level span because the surrounding text is joined with <br>. */
.emb-pv-h1{ display:block; font-size:20px; font-weight:700; color:#f2f3f5; margin:6px 0 2px; }
.emb-pv-h2{ display:block; font-size:17px; font-weight:700; color:#f2f3f5; margin:6px 0 2px; }
.emb-pv-h3{ display:block; font-size:15px; font-weight:700; color:#f2f3f5; margin:4px 0 2px; }
.emb-pv-sub{ display:block; font-size:12px; color:#949ba4; }
.emb-pv-quote{ display:block; border-left:4px solid #4e5058; padding-left:8px; margin:2px 0; color:#dbdee1; }
.emb-pv-li{ display:block; padding-left:14px; text-indent:-9px; }
.emb-pv-li::before{ content:'• '; color:#b5bac1; }
/* Hidden until clicked, exactly like Discord. */
.emb-pv-spoiler{ background:#1e1f22; color:transparent; border-radius:4px; padding:0 2px; cursor:pointer; }
.emb-pv-spoiler:hover{ color:#dbdee1; }

.emb-pv-fields{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.emb-pv-field{ flex:1 1 100%; min-width:0; }
.emb-pv-field-inline{ flex:1 1 30%; min-width:120px; }
.emb-pv-fieldname{ font-size:14px; font-weight:600; color:#f2f3f5; margin-bottom:2px; overflow-wrap:anywhere; }
.emb-pv-fieldval{ font-size:14px; color:#d1d3d7; line-height:1.35; overflow-wrap:anywhere; }

.emb-pv-image{ margin-top:12px; }
.emb-pv-image img{ max-width:100%; border-radius:4px; display:block; }
.emb-pv-thumb{ flex:0 0 auto; margin-top:8px; }
.emb-pv-thumb img{ width:80px; height:80px; border-radius:4px; object-fit:cover; }

.emb-pv-footer{ display:flex; align-items:center; gap:8px; margin-top:10px; }
.emb-pv-footericon{ width:20px; height:20px; border-radius:50%; object-fit:cover; }
.emb-pv-footertext, .emb-pv-footertime{ font-size:12px; color:#b8bbbf; font-weight:500; }
.emb-pv-footersep{ font-size:12px; color:#b8bbbf; }

/* ── SAVED / HISTORY CARD LISTS ─────────────────────────────────────────── */
.emb-card-list{ display:flex; flex-direction:column; gap:12px; }
.emb-empty{ color:var(--text-dim); font-size:13px; padding:18px; text-align:center; border:1px dashed var(--border); border-radius:12px; }
.emb-card{ display:flex; gap:14px; align-items:flex-start; justify-content:space-between;
  background:rgba(255,255,255,.02); border:1px solid var(--border); border-radius:14px; padding:14px 16px; transition:border-color .15s; }
.emb-card:hover{ border-color:var(--crimson-border); }
.emb-card-main{ min-width:0; flex:1; }
.emb-card-top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.emb-card-name{ font-weight:600; color:var(--text); font-size:14px; }
.emb-card-meta{ font-size:11px; color:var(--text-dim); margin-top:8px; }
.emb-card-actions{ display:flex; flex-direction:column; gap:8px; flex:0 0 auto; }
.emb-danger:hover{ border-color:rgba(232,25,44,.5) !important; color:#ff6b78 !important; }

.emb-badge{ font-size:11px; font-weight:600; padding:2px 9px; border-radius:999px; letter-spacing:.3px; white-space:nowrap; }
.emb-badge-pub{ background:rgba(59,209,122,.14); color:#4fd48a; border:1px solid rgba(59,209,122,.3); }
.emb-badge-draft{ background:rgba(255,255,255,.05); color:var(--text-muted); border:1px solid var(--border); }
.emb-badge-hist{ background:rgba(88,101,242,.14); color:#8b98ff; border:1px solid rgba(88,101,242,.3); }
.emb-hist-chan{ opacity:.7; }
.emb-hist-jump{ color:var(--crimson); text-decoration:none; }
.emb-hist-jump:hover{ text-decoration:underline; }

/* mini embed swatch inside a card */
.emb-mini{ background:#2b2d31; border-radius:4px; border-left:3px solid #4f545c; padding:6px 10px; max-width:340px; }
.emb-mini-title{ font-size:13px; font-weight:600; color:#f2f3f5; overflow-wrap:anywhere; }
.emb-mini-desc{ font-size:12px; color:#b8bbbf; margin-top:2px; overflow-wrap:anywhere; }

@media (max-width:900px){
  .emb-layout{ grid-template-columns:1fr; }
  .emb-side{ position:static; }
  .emb-card{ flex-direction:column; }
  .emb-card-actions{ flex-direction:row; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   EMBED BUILDER — WYSIWYG editor (.ebx-*)   MEE6-style: you type inside the
   embed. Placeholders come from the global [contenteditable][data-ph]:empty
   rule. Palette is hardcoded Discord dark so it reads as a real embed.
   ═══════════════════════════════════════════════════════════════════════════ */
.emb-builder-panel .cp-body{ }
.ebx-stage{ max-width:100%; min-width:0; }

/* message row (bot header + plain content) */
.ebx-msgrow{ display:flex; gap:14px; margin-bottom:14px; }
.ebx-avatar{ width:40px; height:40px; border-radius:50%; flex:0 0 auto;
  background:radial-gradient(circle at 30% 30%, #b32530, #7d1a22); }
.ebx-msgbody{ flex:1; min-width:0; }
.ebx-authorline{ display:flex; align-items:center; gap:8px; margin-bottom:5px; }
.ebx-botname{ font-weight:600; color:#f2f3f5; font-size:15px; }
.ebx-content{ background:#383a40; border-radius:8px; padding:11px 14px; color:#dbdee1;
  font-size:14px; line-height:1.4; min-height:20px; outline:none; white-space:pre-wrap; overflow-wrap:anywhere; cursor:text; }
.ebx-content:focus{ box-shadow:0 0 0 1px rgba(88,101,242,.6); }

/* the embed = [left rail][box][right rail] */
.ebx-embed{ display:flex; align-items:flex-start; gap:8px; min-width:0; max-width:100%; }
.ebx-box{ display:flex; background:#2b2d31; border-radius:8px; overflow:visible; flex:1; min-width:0; max-width:100%; }
.ebx-bar{ flex:0 0 4px; background:#DC1F26; }
.ebx-embed-main{ flex:1; min-width:0; padding:12px 16px 14px; }
.ebx-grid{ display:flex; gap:12px; }
.ebx-col{ flex:1; min-width:0; }

/* rails (color / duplicate / delete) */
.ebx-rail{ display:flex; flex-direction:column; gap:8px; flex:0 0 auto; padding-top:2px; }
.ebx-rail-btn{ width:34px; height:34px; border-radius:9px; border:1px solid var(--border);
  background:var(--surface-2,#1e1f22); color:var(--text-muted); display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:15px; position:relative; transition:all .15s; }
.ebx-rail-btn:hover{ border-color:var(--crimson-border); color:var(--text); }
.ebx-rail-del:hover{ border-color:rgba(232,25,44,.5); color:#ff6b78; background:rgba(232,25,44,.1); }
.ebx-colorbtn{ overflow:hidden; }
.ebx-color-ring{ position:absolute; inset:6px; border-radius:50%;
  background:conic-gradient(red,orange,yellow,lime,cyan,blue,magenta,red); }
.ebx-colorbtn input[type=color]{ position:absolute; inset:0; opacity:0; width:100%; height:100%; border:none; padding:0; cursor:pointer; }

/* author / header */
.ebx-authorrow{ display:flex; align-items:center; gap:8px; margin-bottom:2px; }
.ebx-header{ font-size:14px; font-weight:600; color:#f2f3f5; outline:none; min-width:40px; cursor:text; overflow-wrap:anywhere; }
.ebx-header:hover{ background:rgba(255,255,255,.04); }
.ebx-header:focus{ background:rgba(88,101,242,.14); box-shadow:0 0 0 1px rgba(88,101,242,.5); }

/* title / description / footer editable */
.ebx-title{ font-size:16px; font-weight:600; color:#f2f3f5; outline:none; margin:6px 0 0; min-height:20px; cursor:text; overflow-wrap:anywhere; }
.ebx-desc{ font-size:14px; color:#d1d3d7; line-height:1.45; outline:none; margin-top:8px; min-height:20px; white-space:pre-wrap; cursor:text; overflow-wrap:anywhere; }
.ebx-footer{ font-size:12px; color:#b8bbbf; font-weight:500; outline:none; min-width:40px; cursor:text; overflow-wrap:anywhere; }
.ebx-title:hover, .ebx-desc:hover, .ebx-footer:hover{ background:rgba(255,255,255,.04); }
.ebx-title:focus, .ebx-desc:focus, .ebx-footer:focus{ background:rgba(88,101,242,.14); box-shadow:0 0 0 1px rgba(88,101,242,.5); }

/* icon slots (author / footer pics) */
.ebx-iconslot{ flex:0 0 auto; border-radius:50%; border:1.5px dashed #4e5058; background:transparent;
  color:#72767d; display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; padding:0; position:relative; transition:border-color .15s; }
.ebx-iconslot:hover{ border-color:#7a7f87; color:#b5bac1; }
.ebx-iconslot-sm{ width:24px; height:24px; font-size:12px; }
.ebx-iconslot-xs{ width:20px; height:20px; font-size:10px; }
.ebx-iconslot.ebx-has-icon{ border-style:solid; border-color:transparent; }
.ebx-iconimg{ width:100%; height:100%; object-fit:cover; }

/* fields */
.ebx-fields{ display:flex; flex-wrap:wrap; gap:10px 16px; margin-top:10px; }
.ebx-field{ flex:1 1 100%; min-width:0; position:relative; }
.ebx-field-inline{ flex:1 1 30%; min-width:120px; }
.ebx-field-name{ font-size:14px; font-weight:600; color:#f2f3f5; outline:none; min-height:18px; cursor:text; overflow-wrap:anywhere; }
.ebx-field-value{ font-size:14px; color:#d1d3d7; line-height:1.35; outline:none; min-height:18px; margin-top:2px; cursor:text; overflow-wrap:anywhere; }
.ebx-field-name:hover, .ebx-field-value:hover{ background:rgba(255,255,255,.04); }
.ebx-field-name:focus, .ebx-field-value:focus{ background:rgba(88,101,242,.14); box-shadow:0 0 0 1px rgba(88,101,242,.5); }
.ebx-field-tools{ display:flex; align-items:center; gap:10px; margin-top:3px; }
.ebx-field-inline-tog{ display:inline-flex; align-items:center; gap:4px; font-size:11px; color:#8a8d93; cursor:pointer; }
.ebx-field-del{ background:none; border:none; color:#8a8d93; font-size:12px; cursor:pointer; padding:0 2px; }
.ebx-field-del:hover{ color:#ff6b78; }
.ebx-addfield{ background:none; border:none; color:#00a8fc; font-size:13px; font-weight:500; cursor:pointer; padding:8px 0 2px; display:block; }
.ebx-addfield:hover{ text-decoration:underline; }

/* Link / channel buttons — editor lives BELOW the embed (aligned under it),
   like where Discord renders action buttons. */
.ebx-buttons-wrap{ padding-left:54px; max-width:574px; margin-top:2px; }
.ebx-buttons{ display:flex; flex-direction:column; gap:8px; }
.ebx-buttons:empty{ display:none; }
/* Each button = a tidy 2-line card: [emoji · label · type · ✕] then the
   destination full-width. Never wraps awkwardly. */
.ebx-btn-row{
  display:grid; gap:7px 8px; align-items:center;
  grid-template-columns:64px 1fr 104px 34px;
  grid-template-areas:"emoji label kind del" "dest dest dest dest";
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:10px; padding:9px 10px;
}
.ebx-btn-row .field-input{ height:36px; }
.ebx-btn-emoji{ grid-area:emoji; text-align:center; padding-left:4px; padding-right:4px; }
.ebx-btn-label{ grid-area:label; min-width:0; }
.ebx-btn-kind{ grid-area:kind; }
.ebx-btn-url, .ebx-btn-ch{ grid-area:dest; min-width:0; }
.ebx-btn-row .ebx-field-del{ grid-area:del; justify-self:end; }
/* Preview chips — mirror Discord's grey link buttons under the message. */
.emb-pv-buttons{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.emb-pv-buttons:empty{ display:none; }
.emb-pv-btn{ display:inline-flex; align-items:center; gap:6px; background:#4e5058; color:#fff; border-radius:8px; padding:8px 12px; font-size:14px; font-weight:500; line-height:1; }
.emb-pv-btn-ext{ opacity:.65; font-size:11px; }

/* Align the editable embed's left edge with the message text above it
   (avatar 40 + gap 14 = 54; rail 34 + gap 8 = 42 → nudge 12). */
.emb-builder-panel .ebx-embed{ padding-left:12px; }

/* main image dropzone */
.ebx-image{ position:relative; margin-top:12px; border:2px dashed #4e5058; border-radius:6px;
  min-height:120px; display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; transition:border-color .15s, background .15s; }
.ebx-image:hover, .ebx-image.ebx-drag{ border-color:#00a8fc; background:rgba(0,168,252,.05); }
.ebx-image.ebx-has-img{ border-style:solid; border-color:transparent; min-height:0; }
.ebx-image-img{ max-width:100%; display:block; border-radius:4px; }

/* The Message-mode dropzone. Same control as the embed's, but it sits in the
   message row rather than inside the embed block, and it is capped narrower so
   it reads as an attachment under a message rather than a full-width banner. */
.ebx-image-plain{ max-width:440px; margin-top:10px; }
.ebx-image-plain[hidden]{ display:none !important; }
.ebx-image-ph{ display:flex; flex-direction:column; align-items:center; gap:6px; color:#8a8d93; font-size:12px; padding:24px; text-align:center; }
.ebx-image-ic{ font-size:26px; opacity:.7; }

/* thumbnail (top-right) */
.ebx-thumb{ position:relative; flex:0 0 auto; width:80px; height:80px; border:2px dashed #4e5058; border-radius:6px;
  background:transparent; display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; padding:0; color:#8a8d93; font-size:22px; transition:border-color .15s; }
.ebx-thumb:hover{ border-color:#00a8fc; }
.ebx-thumb-img{ width:100%; height:100%; object-fit:cover; }
.ebx-thumb .ebx-thumb-ph{ opacity:.7; }

/* remove-image buttons */
.ebx-img-x{ position:absolute; top:6px; right:6px; width:22px; height:22px; border-radius:50%;
  background:rgba(0,0,0,.65); color:#fff; border:none; cursor:pointer; font-size:12px; display:flex; align-items:center; justify-content:center; z-index:2; }
.ebx-img-x:hover{ background:#da373c; }

/* footer row */
.ebx-footerrow{ display:flex; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap; }
.ebx-footer-dot{ color:#b8bbbf; font-size:12px; }
.ebx-ts{ display:inline-flex; align-items:center; gap:5px; font-size:11px; color:#8a8d93; cursor:pointer; margin-left:auto; }

/* publish bar under the embed */
.ebx-publishbar{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:20px; padding-top:18px; border-top:1px solid var(--border); }
/* channel picker · schedule toggle · action buttons — all on one baseline */
.ebx-publishbar > .ebx-pub-actions,
.ebx-publishbar > .emb-sched-toggle{ align-self:flex-end; }
.ebx-pub-channel{ flex:1; min-width:220px; max-width:340px; }
.ebx-pub-label{ display:block; font-size:12px; font-weight:600; color:var(--text-muted); margin-bottom:7px; }
/* Save draft + the single action button, as a matched pair. `.save-btn` is
   built for stacked forms (width:100%, margin-top:20px) — reset both here or
   Publish sits ~20px lower than Save draft. */
.ebx-pub-actions{ display:flex; gap:10px; align-items:center; }
.ebx-pub-actions > button{
  margin:0; width:auto; height:44px; flex:0 0 auto;
  padding-top:0; padding-bottom:0;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  line-height:1;
}

@media (max-width:640px){
  .ebx-grid{ flex-direction:column-reverse; }
  .ebx-thumb{ width:100%; height:120px; }
  .ebx-publishbar{ flex-direction:column; align-items:stretch; }
  .ebx-pub-channel{ max-width:none; }
  .ebx-pub-actions{ justify-content:flex-end; }
  .emb-sched-toggle{ width:100%; margin:0 0 4px; }
}

/* ── [hidden] must beat an explicit display ─────────────────────────────────
   The UA stylesheet's `[hidden]{display:none}` loses to ANY author rule that
   sets display, so `el.hidden = true` on a flex element does nothing at all.
   That is how the embed builder came to render inside Message mode: the guard
   existed, but as `#emb-embed-wrap[hidden]` — keyed to an id that stopped
   existing when the editor became a composer mount.

   Keyed by CLASS here so it holds for every composer instance, not one id. */
.ebx-embed[hidden]{ display:none !important; }
.ebx-msgrow[hidden]{ display:none !important; }
.ebx-image[hidden]{ display:none !important; }
.ebx-thumb[hidden]{ display:none !important; }

/* [hidden] must beat the flex display on the image remove-buttons, else the ✕
   shows on empty dropzones (display:flex overrides the hidden attribute). */
.ebx-img-x[hidden]{ display:none !important; }

/* Builder: WYSIWYG editor on the left, clean live preview on the right.
   Both tracks minmax(0, …) so a wide editor cannot shove the preview off-screen
   (body overflow-x:hidden was clipping the empty preview card). */
.emb-build-layout{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px); gap:20px; align-items:start; }
.emb-builder-panel, .emb-builder-panel .cp-body{ min-width:0; }
/* The two help cards sit UNDER the builder, side by side — the right-hand
   column is for the live preview and nothing else. grid-column:1 keeps them in
   the builder's column even though they come after the preview in the DOM,
   which is what lets the preview stay sticky beside the editor. */

/* Formatting toolbar above the message box. Deliberately quiet — it sits inside
   the message bubble, so it must not compete with the text being written. */
.ebx-fmtbar{ display:flex; flex-wrap:wrap; gap:4px; margin:0 0 6px; }
.ebx-fmt{
  min-width:28px; height:26px; padding:0 7px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid transparent; border-radius:6px;
  color:#949ba4; font-size:12.5px; line-height:1; cursor:pointer;
  transition:background .12s, color .12s, border-color .12s;
}
.ebx-fmt:hover{ background:#3f4248; border-color:#4e5058; color:#f2f3f5; }
.ebx-fmt:active{ transform:translateY(1px); }
.ebx-fmt b, .ebx-fmt i, .ebx-fmt u, .ebx-fmt s{ font-size:13px; }

/* The help pair spans the FULL width under both columns, so the bottom of the
   page is one clean band instead of two cards squeezed under the builder with
   dead space beside them. */
.emb-help-row{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:start; margin-top:4px; }
.emb-help-row .info-card{ min-width:0; }
.emb-help-row .emb-md-help code{ white-space:normal; }
@media (max-width:900px){ .emb-help-row{ grid-template-columns:1fr; } }

/* The preview rides along with the builder: it is a grid item whose AREA is the
   full height of the row, while `align-self:start` keeps the card itself at the
   top — that pairing is what gives sticky room to travel. Without the explicit
   area height it would have nothing to stick within and would simply scroll away
   as soon as the builder got tall. */
.emb-preview-col{ position:sticky; top:16px; align-self:start; min-width:0; overflow:visible; width:100%; max-width:100%; max-height:calc(100vh - 32px); overflow-y:auto; }
.emb-preview-col .info-card,
.emb-preview-card{
  width:100%; max-width:100%;
  padding:18px 16px 20px; overflow:visible !important; min-width:0;
  box-sizing:border-box;
  /* backdrop-filter + border-radius clips like overflow:hidden, which cut the empty preview. */
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.emb-preview-col .emb-pv-msg{ display:flex; gap:14px; padding:4px 0; min-width:0; }
.emb-preview-col .emb-pv-avatar{ width:40px; height:40px; border-radius:50%; flex:0 0 auto;
  background:radial-gradient(circle at 30% 30%, #b32530, #7d1a22); }
.emb-preview-col .emb-pv-body{ min-width:0; flex:1; }
.emb-preview-col .emb-pv-author{ display:flex; align-items:center; gap:8px; margin-bottom:3px; }
.emb-preview-col .emb-pv-name{ font-weight:600; color:#f2f3f5; font-size:15px; }
.emb-preview-col .emb-pv-content{ color:#dbdee1; font-size:14px; line-height:1.4; margin-bottom:6px; white-space:pre-wrap; overflow-wrap:anywhere; }
.emb-preview-col .emb-pv-empty{ color:var(--text-dim); font-size:13px; font-style:italic; padding:8px 0; }
@media (max-width:1100px){
  .emb-build-layout{ grid-template-columns:1fr; }
  .emb-preview-col{ position:static; }
}
.ebx-col .mention-wrap, .ebx-msgbody .mention-wrap, .ebx-authorrow .mention-wrap,
.ebx-footerrow .mention-wrap, .ebx-field .mention-wrap{ display:block; min-width:0; flex:1; }
.ebx-authorrow .ep-host, .ebx-footerrow .ep-host,
.ebx-authorrow .ep-host-inline, .ebx-footerrow .ep-host-inline{ width:auto; flex:1; min-width:0; }
.ebx-field .ep-host-inline{ width:100%; flex:1 1 auto; }
.ebx-field-name, .ebx-field-value{ min-height:18px; }
.ebx-col .mention-dropdown, .ebx-msgbody .mention-dropdown, .ebx-field .mention-dropdown{
  max-height:220px; overflow-y:auto;
}
#am-pane-trap .ebx-box{ max-width:none; }
#am-pane-trap .ebx-embed{ width:100%; }
#am-pane-trap .ebx-header, #am-pane-trap .ebx-title, #am-pane-trap .ebx-desc, #am-pane-trap .ebx-footer{
  min-width:0; width:100%;
}
/* "Choose a Cyndrix Card" on the embed image zone. Unlike .emb-image-clear this
   is ALWAYS visible — with no image set there is nothing to remove but picking
   one is exactly what you came here to do, and hiding it is how Embed mode
   ended up with no way to reach the gallery at all. */
.emb-image-cards{
  display:flex; position:absolute; top:8px; right:8px;
  width:24px; height:24px; border-radius:7px; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.6); color:#fff; font-size:13px; line-height:1;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,0.15); cursor:pointer;
}
.emb-image-cards:hover{ background:rgba(232,25,44,0.85); }
/* When there IS an image the × appears, so the gallery button steps left to
   make room rather than sitting under it. */
.emb-image.has-img .emb-image-cards{ right:38px; }

/* The formatting cheat-sheet in the builder's side panel. */
.emb-md-help{ width:100%; border-collapse:collapse; margin-top:8px; }
.emb-md-help td{ padding:3px 0; vertical-align:top; }
.emb-md-help td:first-child{ width:46%; padding-right:10px; white-space:nowrap; }
.emb-md-help code{ background:#1e1f22; border-radius:4px; padding:1px 5px; font-family:'JetBrains Mono',monospace; font-size:11.5px; color:#e3e5e8; }

.u-mt12{ margin-top:12px; }

/* Collapsed syntax reference. Closed by default: it is something you look up
   once, not something that should own the bottom of the page. */
.emb-md-details{ margin-top:12px; border-top:1px solid var(--border); padding-top:10px; }
.emb-md-details > summary{
  cursor:pointer; list-style:none; color:#b5bac1; font-size:12.5px; font-weight:600;
  display:flex; align-items:center; gap:6px; user-select:none;
}
.emb-md-details > summary::-webkit-details-marker{ display:none; }
.emb-md-details > summary::before{ content:'▸'; font-size:11px; transition:transform .12s; }
.emb-md-details[open] > summary::before{ transform:rotate(90deg); }
.emb-md-details > summary:hover{ color:#f2f3f5; }

/* Button emoji: the stored value is a raw <a:name:id> token, which a text input
   can only render as those literal characters. The real emoji is painted over
   the field so picking one looks like picking an emoji, not pasting an id. */
.ebx-btn-emojislot{ position:relative; display:block; grid-area:emoji; min-width:0; }
/* The emoji picker wraps this input in .ep-wrap-single, whose 110px width is
   sized for the counting field. Here the input lives in a 64px grid track, so
   it has to fill the track instead of overflowing onto the label. */
.ebx-btn-emojislot > .ep-wrap,
.ebx-btn-emojislot > .ep-wrap-single{ display:block; width:100%; }
.ebx-btn-emojislot > .ep-wrap > input.field-input,
.ebx-btn-emojislot > .ep-wrap-single > input.field-input{ width:100%; padding-right:22px; }
.ebx-btn-emojipv{
  position:absolute; left:9px; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; pointer-events:none; z-index:2;
}
.ebx-btn-emojipv .dc-emoji{ width:20px; height:20px; display:block; }
/* Only while a preview covers it — an ordinary unicode emoji stays readable. */
.ebx-btn-emoji-masked{ color:transparent; caret-color:#f2f3f5; }

/* Plain-message mode: the mentions card is hidden (no embed, so no
   message-line-vs-embed split to explain) and Text formatting takes the whole
   band rather than half of it. The explicit [hidden] rule is defensive — an
   author `display:` on .info-card would otherwise outrank the UA sheet and the
   card would stay visible, which has caught this codebase out before. */
#emb-help-mentions[hidden]{ display:none !important; }
.emb-help-row.emb-help-solo{ grid-template-columns:1fr; }

/* Rendered <t:…> timestamps — Discord tints these like a mention chip. */
.emb-pv-time{ background:rgba(88,101,242,0.16); border-radius:3px; padding:0 2px; color:#c9cdfb; }