/*
 * Reddit post & thread — the reddit engine's skin.
 *
 * Preview (.zrd, scoped + self-theming so the export, which inlines computed
 * styles off the card, is correct on its own) + a little extra for the custom
 * Post/People/Comments editor. The "ported from chat.css" block carries the
 * shared thread-editor control styles that the reddit engine does not load.
 */

/* ---- Preview: the post + thread --------------------------------- */

.zrd{
--bg:#0e1113; --elev:#181c1f; --bd:#2a3236; --text:#d7dadc; --muted:#8ba2ad;
--link:#6a9ff5; --pill:#1a282d; --orange:#ff4500; --down:#7193ff;
--op:#2e6ef6; --mod:#4ac20b; --admin:#ff585b; --flbg:#17304a; --fl:#9cc4ff;
width:620px; max-width:100%; height:720px;
display:flex; flex-direction:column; overflow:hidden;
border-radius:14px; border:1px solid var(--bd); background:var(--bg); color:var(--text);
font:14px/1.45 "IBM Plex Sans","Noto Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
-webkit-font-smoothing:antialiased;
}
.zrd[data-theme=light]{
--bg:#ffffff; --elev:#f6f8f9; --bd:#e2e7ea; --text:#16181a; --muted:#5c6c74;
--link:#0079d3; --pill:#eef1f3; --orange:#ff4500; --down:#7193ff;
--op:#0045ac; --mod:#3aa005; --admin:#d93a3a; --flbg:#e3effb; --fl:#1b5a9c;
}

/* post */
.zrp{flex:0 0 auto; padding:14px 16px 10px}
.zrp-top{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted)}
.zrsi{width:22px; height:22px; border-radius:50%; background:linear-gradient(135deg,#ff6a33,#ff4500); flex:0 0 auto}
.zrsn{color:var(--text); font-weight:700; display:inline-flex; align-items:center}
.zrsn .zs-ed{font:700 12.5px/1.2 var(--px); color:var(--text)}
.zrdot{opacity:.7; margin:0 1px}
.zrjoin{margin-left:auto; font-size:12px; font-weight:700; color:#fff; background:#2e6ef6; border-radius:999px; padding:5px 14px}
.zrd[data-theme=light] .zrjoin{background:#0b57d0}
.zrp-auth{font-size:12.5px; color:var(--muted); margin:7px 0 2px}
.zrflair{display:inline-block; background:var(--flbg); color:var(--fl); font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px; margin-left:6px}
.zrp-title{margin:6px 0 8px}
.zrp-title .zs-ed{font:600 19px/1.3 var(--px); color:var(--text)}
.zrp-body{font-size:14px; line-height:1.5}
.zrp-body .zs-ed{font:400 14px/1.5 var(--px); color:var(--text); white-space:pre-wrap; overflow-wrap:anywhere}
.zrp-img{display:block; width:100%; height:300px; border-radius:12px; border:1px solid var(--bd);
background:var(--elev) center/cover no-repeat; margin-top:4px;
display:flex; align-items:center; justify-content:center; color:var(--muted)}
.zrd:not([data-postimage]) .zrp-img{display:none}
.zrd[data-postimage] .zrp-body{display:none}

.zru{color:var(--link)}
.zrm{color:var(--link); font-weight:600}

.zrp-act{display:flex; align-items:center; gap:8px; margin-top:12px; flex-wrap:wrap}
.zrvote{display:inline-flex; align-items:center; gap:8px; background:var(--pill); border-radius:999px; padding:6px 10px; font-weight:700; font-size:13px; color:var(--text)}
.zrar{width:18px; height:18px; display:block}
.zrv-post .zrscore{color:var(--orange); font-variant-numeric:tabular-nums}
.zrv-post .zrar:first-child{color:var(--orange)}
.zrchip{display:inline-flex; align-items:center; gap:7px; background:var(--pill); border-radius:999px; padding:6px 12px; font-weight:600; font-size:13px; color:var(--text)}
.zrchip svg{width:17px; height:17px}
.zraw{display:inline-flex; align-items:center; gap:3px; margin-left:2px}
.zrc-award{width:18px; height:18px; border-radius:50%; display:inline-block}
.zra-gold{background:radial-gradient(circle at 40% 35%,#ffe08a,#f1a600)}
.zra-heart{background:radial-gradient(circle at 40% 35%,#ff9bbb,#e0417a)}
.zra-rock{background:radial-gradient(circle at 40% 35%,#b6e0ff,#3fa0e0)}

/* comments */
.zrc-head{flex:0 0 auto; padding:10px 16px; border-top:1px solid var(--bd); display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted)}
.zrsort{display:inline-flex; align-items:center; gap:5px; font-weight:700; color:var(--text)}
.zrthread{flex:1 1 auto; min-height:0; overflow-y:auto; padding:6px 16px 18px}
.zrnest{margin-left:14px; padding-left:12px; border-left:2px solid var(--bd)}
.zrnest:hover{border-left-color:var(--muted)}

.zrc{display:flex; gap:8px; padding:9px 0 3px}
.zrc-av{width:26px; height:26px; border-radius:50%; flex:0 0 auto; background-size:cover; background-position:center}
.zrc-main{flex:1; min-width:0}
.zrc-meta{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); flex-wrap:wrap}
.zrc-user{color:var(--text); font-weight:600}
.zrbadge{font-size:10px; font-weight:700; letter-spacing:.02em; padding:1px 5px; border-radius:4px; text-transform:uppercase; display:inline-flex; align-items:center}
.zrb-op{background:rgba(46,110,246,.18); color:var(--op)}
.zrb-mod{background:rgba(74,194,11,.16); color:var(--mod)}
.zrb-admin{background:rgba(255,88,91,.18); color:var(--admin)}
.zrb-verified{padding:0; color:#4ac20b; background:none}
.zrc-text{display:inline; font:400 14px/1.5 var(--px); color:var(--text); white-space:pre-wrap; overflow-wrap:anywhere}
.zrc-text.zs-ed{padding:2px 0; margin:2px 0}
.zrc-act{display:flex; align-items:center; gap:16px; font-size:12px; font-weight:700; color:var(--muted); margin-top:3px}
.zrc-vote{display:inline-flex; align-items:center; gap:7px}
.zrc-vote .zrar{width:16px; height:16px}
.zrc-s{color:var(--text); font-variant-numeric:tabular-nums}
.zrc-reply{display:inline-flex; align-items:center; gap:5px}
.zrc-reply svg{width:15px; height:15px}
.zrc-collapsed{font-size:12.5px; color:var(--muted)}
.zrc-plus{display:inline-grid; place-items:center; width:16px; height:16px; border:1px solid var(--muted); border-radius:3px; font-weight:700; font-size:12px}
.zrc-pts{color:var(--muted)}
.zrc-folded{opacity:.7}

/* follow-edit highlight (chat.css carries .zbch.zs-linked; port for .zrc) */
.zrc.zs-linked{outline:2px solid #F6D144; outline-offset:3px; border-radius:6px}
.zrd[data-theme=light] .zrc.zs-linked{outline-color:#856612}

/* export: unframe, full height */
.zrd.zs-export{height:auto; max-width:none; border-radius:0}
.zrd.zs-export .zrthread{overflow:visible}

/* ---- Editor: Reddit-specific ------------------------------------ */

.zrpost .zblm{margin-top:0}
.zrplist{display:flex; flex-direction:column; gap:12px; margin:12px 0}
.zrp-row{display:flex; align-items:flex-start; gap:10px; padding:12px; border-radius:12px; border:1px solid var(--bgz); background:var(--agb)}
.zrp-av{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}
.zrp-m{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:9px}
.zrp-tags{flex-wrap:wrap}
.zrp-x{flex:0 0 auto}

.zrfrom{flex:0 0 auto; font:700 12px/1.17 var(--px); letter-spacing:.06em; text-transform:uppercase; color:var(--pz)}
.zrc-auth{flex:1 1 auto; flex-wrap:wrap; gap:4px}
.zrab{white-space:nowrap}
.zrc-depth{display:inline-flex; align-items:center; gap:4px; flex:0 0 auto}
.zrc-dn{font:700 11px/1 var(--px); color:var(--ke); min-width:16px; text-align:center}
.zrc-card .zix{margin-top:8px}
.zrc-row2{display:flex; gap:8px}
.zrc-sm{flex:1 1 0}
.zrc-sm .zbls{height:36px; padding:0 10px; font-size:13.5px; border-radius:9px}

/* ---- 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:600px;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)}
.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:54px;padding:9px 14px;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:180px;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)}