/*
 * Discord chat — the discord engine's skin.
 *
 * Two parts: the preview (.zdc, scoped and self-theming so the export, which
 * inlines computed styles off the card, is correct on its own) and a little
 * extra for the custom Conversation controls (role-colour swatches, the author
 * pickers). Everything visible in the export is a real element — no ::before /
 * ::after, which the renderer drops.
 */

/* ---- Preview: the channel --------------------------------------- */

.zdc{
--bg:#313338; --gutter:#2b2d31; --head:#313338; --headln:rgba(0,0,0,.2);
--text:#dbdee1; --muted:#949ba4; --name:#f2f3f5; --hash:#80848e;
--link:#00a8fc; --men:#c9cdfb; --menbg:rgba(88,101,242,.3);
--react:#2b2d31; --reactbr:#232428; --reactink:#b5bac1;
--rsel:rgba(88,101,242,.15); --rselbr:#5865f2; --rselink:#dee0fc;
--divln:#3f4147; --blurple:#5865f2;
width:560px; max-width:100%; height:680px;
display:flex; flex-direction:column;
border-radius:12px; overflow:hidden;
background:var(--bg); color:var(--text);
font:400 16px/1.375 var(--px);
-webkit-font-smoothing:antialiased;
}
.zdc[data-theme=light]{
--bg:#ffffff; --gutter:#f2f3f5; --head:#ffffff; --headln:#e3e5e8;
--text:#313338; --muted:#5c5e66; --name:#060607; --hash:#6d6f78;
--link:#0068e0; --men:#4752c4; --menbg:rgba(88,101,242,.15);
--react:#ffffff; --reactbr:#e3e5e8; --reactink:#4e5058;
--rsel:#e7e9fd; --rselbr:#5865f2; --rselink:#4752c4;
--divln:#e3e5e8;
}

/* Header */
.zdhd{
flex-shrink:0; display:flex; align-items:center; gap:8px;
height:48px; padding:0 16px;
background:var(--head); color:var(--name);
box-shadow:0 1px 0 var(--headln);
position:relative; z-index:2;
}
.zdhash{font:400 24px/1 var(--px); color:var(--hash); margin-top:-2px}
.zdcn .zs-ed{font:600 16px/1.25 var(--px); color:var(--name)}
.zdtp{
min-width:0; padding-left:10px; margin-left:4px;
border-left:1px solid var(--divln); overflow:hidden;
}
.zdtp .zs-ed{font:400 14px/1.3 var(--px); color:var(--muted); white-space:nowrap; text-overflow:ellipsis; overflow:hidden; max-width:260px}

/* The stream */
.zdbody{
flex:1 1 auto; min-height:0; overflow-y:auto;
display:flex; flex-direction:column;
padding:14px 0 22px;
}
.zdspace{flex-grow:1}
.zdbody > :first-child.zdspace + *{margin-top:0}

/* A message */
.zdm{position:relative; padding:2px 48px 1px 72px; margin-top:17px}
.zdm.zgrp{margin-top:1px}
.zdm.zgrp:hover{background:rgba(2,2,2,.04)}
.zdc[data-theme=dark] .zdm.zgrp:hover{background:rgba(255,255,255,.02)}
.zdm:first-of-type{margin-top:0}

.zdav{
position:absolute; left:16px; top:2px;
width:40px; height:40px; border-radius:50%;
background-position:center; background-size:cover; background-repeat:no-repeat;
display:flex; align-items:center; justify-content:center;
overflow:hidden;
}
.zdav-i{font:500 16px/1 var(--px); color:#fff}
.zdgt{
position:absolute; left:0; top:4px; width:72px;
text-align:center; font:400 11px/1.375 var(--px); color:var(--muted);
opacity:0;
}
.zdm.zgrp:hover .zdgt{opacity:1}

.zdcb{min-width:0}
.zdh{display:flex; align-items:baseline; flex-wrap:wrap; gap:8px; margin-bottom:1px}
.zdu{font:600 16px/1.375 var(--px); color:var(--name)}
.zdts{font:500 12px/1.375 var(--px); color:var(--muted)}
.zdbot{
display:inline-flex; align-items:center; gap:3px;
font:600 10px/1 var(--px); letter-spacing:.02em; text-transform:uppercase;
color:#fff; background:var(--blurple); padding:2px 5px; border-radius:4px;
transform:translateY(-1px);
}

/* The message text. .zs-ed is the dashed editor from studio.css; keep it
   inline, wrapping, inheriting Discord's ink. */
.zdtx{
display:inline; font:400 16px/1.375 var(--px); color:var(--text);
white-space:pre-wrap; overflow-wrap:anywhere;
}
.zdtx.zs-ed{padding:1px 2px; margin:-1px -2px}
.zdmen{background:var(--menbg); color:var(--men); border-radius:3px; padding:0 2px; font-weight:500}
.zdlink{color:var(--link)}

/* Reactions */
.zdre{display:flex; flex-wrap:wrap; gap:6px; margin-top:5px}
.zdchip{
display:inline-flex; align-items:center; gap:5px;
padding:2px 7px; border-radius:8px; line-height:1.3;
background:var(--react); border:1px solid var(--reactbr); color:var(--reactink);
}
.zde{font-size:15px}
.zdct{font:600 13px/1 var(--px); font-variant-numeric:tabular-nums}

/* Date divider */
.zdd{display:flex; align-items:center; gap:8px; margin:14px 16px}
.zdd-l{flex:1; height:1px; background:var(--divln)}
.zdd-t.zs-ed{font:600 12px/1 var(--px); color:var(--muted); padding:0 4px}

/* Follow-edit highlight. The shared .zs-ed.zs-linked rule (studio.css) lights
   the field regions (channel / topic). A message or date row is highlighted a
   different way — discord.js toggles .zs-linked on the ROW (data-agu) from
   state.msg — so the row needs its own outline. The chat engine carries this
   as .zbch.zs-linked in chat.css, which the discord engine does not load. */
.zdm.zs-linked,.zdd.zs-linked{outline:2px solid #F6D144; outline-offset:2px; border-radius:6px}
.zdc[data-theme=light] .zdm.zs-linked,.zdc[data-theme=light] .zdd.zs-linked{outline-color:#856612}

/* Export: unframe and let the whole channel render. */
.zdc.zs-export{height:auto; max-width:none; border-radius:0}
.zdc.zs-export .zdbody{overflow:visible}
.zdc.zs-export .zdgt{display:none}

/* ---- Conversation controls -------------------------------------- *
 *
 * The thread editor reuses the shared studio classes (.zbem card, .znr row,
 * .zbbg add button, .zacy / .znn icon buttons, .zanr segmented control, …),
 * but those are styled in chat.css, which the `discord` engine does NOT load.
 * The block tagged "ported" below carries those rules verbatim so the People /
 * Messages editor matches every other tool; the `.zd*` rules above it are
 * Discord's own (people roster, role swatches, author row).
 */

.zdplist{display:flex; flex-direction:column; gap:12px; margin:12px 0}

/* A person: avatar, name + role-colour + BOT, remove. */
.zdp{display:flex; align-items:flex-start; gap:10px;
padding:12px; border-radius:12px; border:1px solid var(--bgz); background:var(--agb)}
.zdpav{
flex:0 0 auto; width:38px; height:38px; border-radius:50%;
background-position:center; background-size:cover; background-repeat:no-repeat;
display:flex; align-items:center; justify-content:center; padding:0; overflow:hidden; cursor:pointer;
}
.zdpm{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:9px}
.zdpr{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.zdpx{flex:0 0 auto}

/* Role-colour swatches (NOT a .zbqu segment — those paint their own button bg). */
.zdsw{display:flex; gap:7px; flex-wrap:wrap; border:0; padding:0; background:none}
.zdswb{
width:22px; height:22px; border-radius:50%; padding:0; cursor:pointer;
background:var(--zc); border:2px solid transparent; box-shadow:0 0 0 1px rgba(0,0,0,.12);
}
.zdswb[aria-checked=true]{border-color:#fff; box-shadow:0 0 0 2px var(--zc)}

/* BOT toggle chip (shared .zbnp base, Discord's pressed state). */
.zdbt[aria-pressed=true]{background:#5865f2; border-color:#5865f2; color:#fff}

/* The author picker, on its own row under the number + action buttons. */
.zdauthrow{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.zdfrom{flex:0 0 auto; font:700 12px/1.17 var(--px); letter-spacing:.06em; text-transform:uppercase; color:var(--pz)}
.zdauth{flex:1 1 auto; flex-wrap:wrap; gap:4px}
.zdab{display:inline-flex; align-items:center; justify-content:center; gap:7px; white-space:nowrap}
.zdab-d{width:10px; height:10px; border-radius:50%; background:var(--zc); flex:0 0 auto}

.zdmrow{display:flex; gap:8px}
.zdmrow .zbls{flex:1 1 auto; min-width:0}
.zdreact{margin:0}

/* ---- ported from chat.css (editor controls) --------------------- */
.zov{display:flex;align-items:baseline;gap:8px}
.zov .zik{flex-grow:1;margin:0}
.zjr{font:400 12px/1.17 var(--px);color:var(--ke);font-variant-numeric:tabular-nums;white-space:nowrap}
.zow{margin:0;font-size:12.5px;line-height:1.45;color:var(--xq)}
.zblq.zbkd{gap:12px}
.zbkd .zbpf{gap:12px;max-height:568px;overflow-y:auto;margin:0 -6px;padding:20px 6px 22px;scroll-padding:8px;border-top:1px solid #EDEBE4;border-bottom:1px solid #EDEBE4}
.zbem{display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:12px;border:1px solid var(--bgz);background:var(--agb)}
.zbem .zbls{height:36px;padding:0 10px;font-size:13.5px;border-radius:9px}
.zbem .zblt{font:600 12px/1.15 var(--px);color:var(--xq)}
.zbem[data-kind=date]{flex-direction:row;align-items:center;gap:12px;padding:10px 14px;border:1px dashed var(--aqh);background:var(--pw)}
.zbem[data-kind=date] > .znr,.zbem[data-kind=date] > .zix{display:contents}
.zbem[data-kind=date] .znp{display:none}
.zbem[data-kind=date] .zacx{display:none}
.zbem[data-kind=date] .zbls{order:1;flex:1 1 auto;width:auto;min-width:0;border-radius:10px}
.zbem[data-kind=date] .zacy{order:2}
.ze{display:none;align-items:center;gap:12px;font:700 12px/1.17 var(--px);letter-spacing:.06em;text-transform:uppercase;color:var(--pz)}
.zbem[data-kind=date] .ze{display:flex}
.ze svg{flex-shrink:0}
.znr{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.zacx{flex-shrink:0;width:20px;font:700 12px/1 var(--px);color:var(--ke)}
.znp{flex-grow:1}
.zacy,.znn{width:36px;height:36px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border:1px solid var(--ft);border-radius:9px;background:var(--agb);cursor:pointer}
.zacy:hover,.znn:hover{background:var(--ay)}
.zanr{flex:0 0 auto;padding:4px;border-radius:11px;gap:4px}
.zanr button{flex:1 0 auto;min-width:64px;padding:9px 16px;border-radius:8px;font-size:12.5px;line-height:1.2;white-space:nowrap}
.zix{display:flex;flex-direction:column;gap:12px}
.zbem .zazc{min-height:64px;max-height:160px;padding:10px 12px;border-radius:10px;font:400 14px/1.45 var(--px);resize:none;field-sizing:content;overflow-y:auto}
.zbem .zazc:focus{padding:9px 11px}
.zarw{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:8px}
.zbbg{width:100%;min-height:52px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:9px;border:1.5px dashed var(--aqh);border-radius:12px;background:var(--pw);font:600 13.5px/1 var(--px);color:var(--bkt);cursor:pointer}
.zbbg:hover{border-color:var(--bkt)}
.zbbg[disabled]{opacity:.55;cursor:not-allowed}
.zbbg svg{flex-shrink:0;color:var(--xq)}
.zhg{width:22px;height:22px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--bkt)}