/* KAAPSULE® Embed Discord : styles propres à l'outil. L'interface reste noir et blanc ;
   seul l'aperçu (.dc) reprend les couleurs de Discord pour montrer le vrai rendu. */

/* ---------- mise en page ---------- */
.ed { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.ed-form, .ed-view { min-width: 0; }
.ed-sticky { position: sticky; top: 80px; max-height: calc(100vh - 96px); overflow: auto; }
.ed-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ed-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ed-note { color: var(--g-500); font-size: 12.5px; margin-top: 14px; }
.ed-empty { color: var(--g-400); font-size: 14px; margin-top: 16px; border: 1px dashed var(--g-700); padding: 16px; }
.ed-embeds { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ed-embeds h2 { margin-bottom: 12px; }
.ed-sec { padding-top: 14px; }
#embed-form { margin-top: 20px; }
#embed-form .sec { margin-top: 28px; }
.ed-h2 { font-family: var(--f-display); font-weight: 400; font-size: 24px; letter-spacing: -.02em; line-height: 1.1; margin-bottom: 8px; }
#import-box { margin-bottom: 16px; }
#import-box .err { margin-top: 12px; }

/* compteurs de caractères */
.field > span small, .cnt { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .04em; color: var(--g-500); text-transform: none; margin-left: 6px; }
.cnt.over { background: var(--paper); color: var(--ink); padding: 0 5px; }
.field .bad, .fld .bad { border-color: var(--paper); border-style: dashed; }

/* couleur */
.ed-color { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ed-color input[type="color"] { width: 44px; height: 40px; padding: 2px; background: var(--ink); border: 1px solid var(--g-700); cursor: pointer; }
.ed-color #color-hex { width: 120px; font-family: var(--f-mono); font-size: 13px; text-transform: uppercase; }
.ed-color.none input[type="color"] { opacity: .35; }

/* horodatage */
#ts-date { margin-top: 10px; max-width: 280px; }
#ts-hint { margin-top: 6px; }

/* champs de l'embed */
.flds { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.fld { border: 1px solid var(--g-800); padding: 12px; display: grid; gap: 10px; background: var(--ink); }
.fld-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fld-head .mono { margin-right: auto; }
.fld .field textarea { min-height: 64px; }
.mini { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--g-400); border: 1px solid var(--g-700); padding: 5px 8px; }
.mini:hover:not(:disabled) { color: var(--paper); border-color: var(--paper); }
.mini:disabled { opacity: .35; cursor: default; }
.fld-empty { color: var(--g-500); font-size: 13px; }

/* statut, limites */
.ed-status { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.iss { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--g-300); }
.iss .pill { flex: none; margin-top: 1px; }
.iss.ok { color: var(--paper); }
.lims { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; border: 1px solid var(--g-800); }
.lim { display: flex; justify-content: space-between; gap: 8px; padding: 7px 12px; border-bottom: 1px solid var(--g-900); font-family: var(--f-mono); font-size: 11.5px; color: var(--g-500); min-width: 0; }
.lim:nth-child(odd) { border-right: 1px solid var(--g-900); }
.lim b { color: var(--g-200); font-weight: 500; white-space: nowrap; }
.lim.over { background: var(--paper); color: var(--ink); }
.lim.over b { color: var(--ink); }

/* sorties */
.ed-out { margin-top: 56px; }
.ed-out .out .bar { flex-wrap: wrap; align-items: center; }
.ed-outnote { margin-right: auto; font-family: var(--f-mono); font-size: 11px; color: var(--g-500); min-width: 0; }
.ed-out pre { max-height: 520px; }

/* guide */
.guide { margin-top: 56px; }
.guide p, .steps li { color: var(--g-400); max-width: 75ch; }
.steps { margin: 14px 0 0 20px; display: grid; gap: 8px; }
.guide code, .faq code { background: var(--g-900); border: 1px solid var(--g-800); padding: 0 5px; color: var(--g-200); overflow-wrap: anywhere; }

/* ---------- aperçu Discord (couleurs du client Discord, thème sombre) ---------- */
.dc {
  --dc-bg: #313338; --dc-embed: #2b2d31; --dc-dark: #1e1f22; --dc-text: #dbdee1; --dc-head: #f2f3f5;
  --dc-muted: #949ba4; --dc-link: #00a8fc; --dc-blurple: #5865f2;
  background: var(--dc-bg); color: var(--dc-text); padding: 16px 16px 16px 0; overflow: hidden;
  font-family: 'gg sans', 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.375;
}
.dc a { color: var(--dc-link); }
.dc a:hover { text-decoration: underline; }
.dc-msg { display: grid; grid-template-columns: 72px minmax(0, 1fr); }
.dc-ava { width: 40px; height: 40px; border-radius: 50%; margin-left: 16px; overflow: hidden; background: var(--dc-blurple); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 16px; }
.dc-ava img { width: 100%; height: 100%; object-fit: cover; }
.dc-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0 6px; min-width: 0; }
.dc-name { color: var(--dc-head); font-weight: 500; font-size: 16px; overflow-wrap: anywhere; }
.dc-tag { background: var(--dc-blurple); color: #fff; font-size: 10px; font-weight: 600; line-height: 15px; padding: 0 4px; border-radius: 3px; letter-spacing: .02em; }
.dc-time { color: var(--dc-muted); font-size: 12px; }
.dc-content { overflow-wrap: anywhere; }
.dc-embeds { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.dc-embed { max-width: 520px; background: var(--dc-embed); border-left: 4px solid var(--dc-dark); border-radius: 4px; }
.dc-embed.sel { outline: 1px dashed var(--dc-muted); outline-offset: 2px; }
.dc-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: 8px 16px 16px 12px; }
.dc-main { min-width: 0; grid-column: 1; }
.dc-author { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--dc-head); overflow-wrap: anywhere; }
.dc-author a { color: var(--dc-head); }
.dc-author img, .dc-author .dc-ph { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: none; }
.dc-title { margin-top: 8px; font-size: 16px; font-weight: 600; color: var(--dc-head); overflow-wrap: anywhere; }
.dc-title a { color: var(--dc-link); }
.dc-desc { margin-top: 8px; font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.dc-fields { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.dc-field { font-size: 14px; line-height: 1.3; min-width: 0; overflow-wrap: anywhere; }
.dc-field.w12 { grid-column: span 12; } .dc-field.w6 { grid-column: span 6; } .dc-field.w4 { grid-column: span 4; }
.dc-fname { color: var(--dc-head); font-weight: 600; margin-bottom: 2px; }
.dc-thumb { grid-column: 2; grid-row: 1; margin: 8px 0 0 16px; width: 80px; }
.dc-thumb img, .dc-thumb .dc-ph { max-width: 80px; max-height: 80px; border-radius: 4px; object-fit: contain; }
.dc-thumb .dc-ph { width: 80px; height: 80px; }
.dc-image { grid-column: 1 / -1; margin-top: 16px; }
.dc-image img { max-width: 100%; max-height: 300px; border-radius: 4px; object-fit: contain; }
.dc-image .dc-ph { height: 120px; }
.dc-footer { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--dc-text); overflow-wrap: anywhere; }
.dc-footer img, .dc-footer .dc-ph { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex: none; }
.dc-ph { display: flex; align-items: center; justify-content: center; background: var(--dc-dark); color: var(--dc-muted); font-size: 11px; border-radius: 4px; padding: 4px; text-align: center; overflow: hidden; word-break: break-all; }
.dc-empty { color: var(--dc-muted); font-size: 14px; font-style: italic; }

/* markdown dans l'aperçu */
.dc .md-l { white-space: pre-wrap; min-height: 1.3em; }
.dc strong { font-weight: 700; }
.dc code { font-family: Consolas, 'Andale Mono WT', 'Courier New', monospace; font-size: 85%; background: var(--dc-dark); padding: 0 .2em; border-radius: 3px; }
.dc .md-pre { background: var(--dc-dark); border-radius: 4px; padding: 7px 9px; margin: 6px 0 2px; white-space: pre-wrap; overflow-wrap: anywhere; }
.dc .md-pre code { background: none; padding: 0; font-size: 12.5px; }
.dc .md-quote { border-left: 4px solid #4e5058; padding: 0 8px 0 12px; margin: 2px 0; }
.dc .md-h1, .dc .md-h2, .dc .md-h3 { color: var(--dc-head); font-weight: 700; line-height: 1.25; margin: 8px 0 4px; }
.dc .md-h1 { font-size: 1.5em; } .dc .md-h2 { font-size: 1.25em; } .dc .md-h3 { font-size: 1em; }
.dc .md-sub { font-size: 12px; color: var(--dc-muted); }
.dc .md-list { margin: 2px 0 2px 18px; }
.dc ul.md-list { list-style: disc; }
.dc .md-lvl1 { margin-left: 16px; list-style-type: circle; }
.dc .md-lvl2 { margin-left: 32px; list-style-type: square; }
.dc .md-mention { background: rgba(88, 101, 242, .3); color: #c9cdfb; font-weight: 500; padding: 0 2px; border-radius: 3px; }
.dc .md-emoji { color: var(--dc-muted); }
.dc .md-spoiler { background: var(--dc-dark); color: transparent; border-radius: 3px; transition: color 150ms ease; }
.dc .md-spoiler:hover { color: inherit; background: rgba(255, 255, 255, .1); }

@media (max-width: 860px) {
  .ed { grid-template-columns: 1fr; }
  .ed-sticky { position: static; max-height: none; overflow: visible; }
  .dc { padding-right: 8px; font-size: 14px; }
  .dc-msg { grid-template-columns: 52px minmax(0, 1fr); }
  .dc-ava { margin-left: 8px; }
  .dc-in { padding: 8px 10px 12px 10px; }
  .dc-thumb { margin-left: 10px; width: 64px; }
  .dc-thumb img, .dc-thumb .dc-ph { max-width: 64px; max-height: 64px; }
  .dc-thumb .dc-ph { width: 64px; height: 64px; }
  .lims { grid-template-columns: 1fr; }
  .lim:nth-child(odd) { border-right: 0; }
  .ed-outnote { flex-basis: 100%; }
}