/* ===== مجتمع الحلبة: التعليقات والرسائل الخاصة ===== */

/* ---------- tokens: light (site default) ---------- */
.cx{
  --cx-ink:var(--bg);--cx-card:var(--surface);--cx-line:var(--line);--cx-text:var(--text);--cx-muted:var(--muted);
  --cx-gold:var(--gold);--cx-gold-bg:var(--gold-bg);--cx-danger:var(--red);--cx-ok:var(--green);
  --cx-raise:#f7f2e2;--cx-raise-2:#ebe3c7;--cx-line-2:#b8ad80;--cx-faint:#7a7250;
  --cx-bub:#fbf8ed;--cx-bub-line:rgba(80,70,30,.13);--cx-own:#ecdcae;--cx-own-line:rgba(176,122,16,.4);--cx-own-meta:#7b6a35;
  --cx-on-gold:#0d0f08;--cx-gold-wash:rgba(176,122,16,.13);--cx-hover:rgba(29,26,16,.05);--cx-shadow:rgba(60,50,20,.22);
  --cx-sk:rgba(29,26,16,.07);--cx-sk-hi:rgba(29,26,16,.13);
  --cx-n0:#ad472c;--cx-n1:#26745d;--cx-n2:#5944b0;--cx-n3:#a03b6f;--cx-n4:#2b5d99;--cx-n5:#706a12;--cx-n6:#a9561f;--cx-n7:#1c7480;
  --cx-a0:#e6d2bd;--cx-a1:#d1d9c5;--cx-a2:#d9d1d2;--cx-a3:#e4d0c8;--cx-a4:#d1d5cf;--cx-a5:#dcd7b9;--cx-a6:#e5d4bb;--cx-a7:#cfd9cb;
  color:var(--cx-text)
}
/* ---------- tokens: dark ---------- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .cx{
    --cx-raise:#1d2113;--cx-raise-2:#262b19;--cx-line-2:#3c4329;--cx-faint:#85826a;
    --cx-bub:#1d2113;--cx-bub-line:rgba(236,230,204,.06);--cx-own:#332d12;--cx-own-line:rgba(224,168,46,.24);--cx-own-meta:#a5955c;
    --cx-on-gold:#1b1404;--cx-gold-wash:rgba(224,168,46,.12);--cx-hover:rgba(236,230,204,.04);--cx-shadow:rgba(0,0,0,.6);
    --cx-sk:rgba(236,230,204,.05);--cx-sk-hi:rgba(236,230,204,.1);
    --cx-n0:#e58266;--cx-n1:#7fbfa8;--cx-n2:#ab9cf0;--cx-n3:#e092b5;--cx-n4:#8fb6e8;--cx-n5:#cfc86e;--cx-n6:#eda57f;--cx-n7:#72c3cc;
    --cx-a0:#3e2c1c;--cx-a1:#293929;--cx-a2:#323237;--cx-a3:#3d302b;--cx-a4:#2d3736;--cx-a5:#393a1d;--cx-a6:#3f3321;--cx-a7:#273930;
  }
}
:root[data-theme="dark"] .cx{
  --cx-raise:#1d2113;--cx-raise-2:#262b19;--cx-line-2:#3c4329;--cx-faint:#85826a;
  --cx-bub:#1d2113;--cx-bub-line:rgba(236,230,204,.06);--cx-own:#332d12;--cx-own-line:rgba(224,168,46,.24);--cx-own-meta:#a5955c;
  --cx-on-gold:#1b1404;--cx-gold-wash:rgba(224,168,46,.12);--cx-hover:rgba(236,230,204,.04);--cx-shadow:rgba(0,0,0,.6);
  --cx-sk:rgba(236,230,204,.05);--cx-sk-hi:rgba(236,230,204,.1);
  --cx-n0:#e58266;--cx-n1:#7fbfa8;--cx-n2:#ab9cf0;--cx-n3:#e092b5;--cx-n4:#8fb6e8;--cx-n5:#cfc86e;--cx-n6:#eda57f;--cx-n7:#72c3cc;
  --cx-a0:#3e2c1c;--cx-a1:#293929;--cx-a2:#323237;--cx-a3:#3d302b;--cx-a4:#2d3736;--cx-a5:#393a1d;--cx-a6:#3f3321;--cx-a7:#273930;
}

/* ---------- neutralise site-wide element styles ---------- */
:where(.cx) button{margin:0;padding:0;border:0;border-radius:0;background:none;color:inherit;font:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;text-align:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
:where(.cx) button:disabled{cursor:default}
:where(.cx) input,:where(.cx) textarea{margin:0;font:inherit;color:inherit;letter-spacing:inherit}
:where(.cx) p{margin:0}
.cx svg{display:block;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cx :focus-visible{outline:2px solid var(--cx-gold-bg);outline-offset:2px}
.cx-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---------- avatars ---------- */
.cx-av{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:1.05rem;line-height:1;color:var(--cx-hue,var(--cx-gold));background:var(--cx-tint,var(--cx-raise-2));box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);user-select:none}
.cx-av.cx-sm{width:34px;height:34px;font-size:.92rem}
.cx-av.cx-lg{width:48px;height:48px;font-size:1.25rem}
.cx-h0{--cx-hue:var(--cx-n0);--cx-tint:var(--cx-a0)}.cx-h1{--cx-hue:var(--cx-n1);--cx-tint:var(--cx-a1)}
.cx-h2{--cx-hue:var(--cx-n2);--cx-tint:var(--cx-a2)}.cx-h3{--cx-hue:var(--cx-n3);--cx-tint:var(--cx-a3)}
.cx-h4{--cx-hue:var(--cx-n4);--cx-tint:var(--cx-a4)}.cx-h5{--cx-hue:var(--cx-n5);--cx-tint:var(--cx-a5)}
.cx-h6{--cx-hue:var(--cx-n6);--cx-tint:var(--cx-a6)}.cx-h7{--cx-hue:var(--cx-n7);--cx-tint:var(--cx-a7)}

/* ---------- shared bits ---------- */
.cx-status{min-height:1.4em;margin:8px 4px 0;font-size:.88rem;color:var(--cx-muted)}
.cx-status:empty{min-height:0;margin:0}
.cx-status.cx-err{color:var(--cx-danger)}
.cx-status.cx-ok{color:var(--cx-ok)}
.cx-go{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 18px;border-radius:999px;background:var(--cx-gold-bg);color:var(--cx-on-gold);font-weight:800;white-space:nowrap;transition:filter .15s,transform .1s,opacity .15s}
.cx-go:hover{filter:brightness(1.06)}
.cx-go:active{transform:scale(.97)}
.cx-go:disabled{opacity:.45;filter:none;transform:none}
.cx-go svg{width:17px;height:17px}
.cx-ghost{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--cx-line);color:var(--cx-muted);font-size:.85rem;font-weight:700;transition:color .15s,border-color .15s,background .15s}
.cx-ghost:hover{color:var(--cx-text);border-color:var(--cx-line-2)}
.cx-ghost svg{width:16px;height:16px}
.cx-ibtn{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:var(--cx-muted);border:1px solid var(--cx-line);background:var(--cx-ink);transition:color .15s,border-color .15s}
.cx-ibtn:hover{color:var(--cx-text);border-color:var(--cx-line-2)}
.cx-ibtn svg{width:18px;height:18px}
.cx-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:34px 16px;text-align:center;color:var(--cx-muted)}
.cx-empty .cx-eic{width:58px;height:58px;margin-bottom:6px;border-radius:18px;display:grid;place-items:center;background:var(--cx-gold-wash);color:var(--cx-gold)}
.cx-empty .cx-eic svg{width:28px;height:28px}
.cx-empty b{color:var(--cx-text);font-size:1.05rem}
.cx-empty p{max-width:30em;font-size:.92rem}
@keyframes cxShine{to{background-position:-200% 0}}
.cx-sk{border-radius:10px;background:linear-gradient(90deg,var(--cx-sk) 25%,var(--cx-sk-hi) 50%,var(--cx-sk) 75%);background-size:200% 100%;animation:cxShine 1.3s linear infinite}

/* ================= comments ================= */
.cx-cm{margin-top:14px}
.cx-compose{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--cx-line);border-radius:20px;background:var(--cx-raise);transition:border-color .2s,box-shadow .2s}
.cx-compose:focus-within{border-color:var(--cx-gold-bg);box-shadow:0 0 0 3px var(--cx-gold-wash)}
.cx-cbox{flex:1;min-width:0}
.cx-compose textarea{display:block;width:100%;box-sizing:border-box;min-height:42px;max-height:260px;resize:none;border:0;border-radius:0;background:transparent;padding:8px 2px;line-height:1.75;outline:none;box-shadow:none}
.cx-compose textarea::placeholder,.cx-as input::placeholder,.cx-field input::placeholder,.cx-send-box textarea::placeholder{color:var(--cx-faint);opacity:1}
.cx-cfoot{display:none;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px;padding-top:12px;border-top:1px dashed var(--cx-line)}
.cx-compose.cx-open .cx-cfoot{display:flex}
.cx-as{display:flex;align-items:center;gap:8px;flex:1 1 120px;min-width:0;color:var(--cx-muted);font-size:.85rem;font-weight:700}
.cx-as input{flex:1;min-width:0;box-sizing:border-box;height:36px;padding:0 14px;border:1px solid var(--cx-line);border-radius:999px;background:var(--cx-ink);font-size:.92rem;font-weight:600;outline:none;transition:border-color .15s}
.cx-as input:focus{border-color:var(--cx-gold-bg)}
.cx-cbtns{display:flex;align-items:center;gap:8px;margin-inline-start:auto}
.cx-count{font-size:.78rem;font-variant-numeric:tabular-nums;color:var(--cx-faint)}
.cx-count.cx-warn{color:var(--cx-danger)}
.cx-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:24px 0 4px}
.cx-total{font-weight:800;font-size:1rem}
.cx-sort{display:inline-flex;padding:3px;border-radius:999px;background:var(--cx-raise);border:1px solid var(--cx-line)}
.cx-sort button{padding:4px 13px;border-radius:999px;font-size:.82rem;font-weight:700;color:var(--cx-muted);transition:background .15s,color .15s}
.cx-sort button[aria-pressed="true"]{background:var(--cx-gold-bg);color:var(--cx-on-gold)}
.cx-list{display:flex;flex-direction:column}
.cx-c{display:flex;gap:12px;padding:16px 2px;border-top:1px solid var(--cx-line)}
.cx-c:first-child{border-top:0}
.cx-c.cx-new{animation:cxIn .45s ease-out}
@keyframes cxIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.cx-c-main{flex:1;min-width:0}
.cx-c-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;line-height:1.4}
.cx-c-name{font-weight:800;color:var(--cx-hue,var(--cx-text));overflow-wrap:anywhere}
.cx-you{padding:1px 9px;border-radius:999px;background:var(--cx-gold-wash);color:var(--cx-gold);font-size:.7rem;font-weight:800}
.cx-c-time{font-size:.78rem;color:var(--cx-faint)}
.cx-c-body{margin-top:4px;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.85}
.cx-c-body.cx-clamp{display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
.cx-more{margin-top:2px;font-size:.86rem;font-weight:800;color:var(--cx-gold)}
.cx-c-acts{display:flex;align-items:center;gap:6px;margin-top:10px}
.cx-vote{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--cx-line);font-size:.85rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--cx-muted);transition:color .15s,border-color .15s,background .15s,transform .1s}
.cx-vote svg{width:16px;height:16px}
.cx-vote:hover{color:var(--cx-text);border-color:var(--cx-line-2)}
.cx-vote:active{transform:scale(.95)}
.cx-vote[aria-pressed="true"]{background:var(--cx-gold-wash);border-color:var(--cx-gold-bg);color:var(--cx-gold)}
.cx-vote:disabled{opacity:.6}
.cx-del{display:inline-flex;align-items:center;gap:6px;height:32px;margin-inline-start:auto;padding:0 12px;border-radius:999px;color:var(--cx-faint);font-size:.82rem;font-weight:700;transition:color .15s,background .15s}
.cx-del svg{width:16px;height:16px}
.cx-del:hover{color:var(--cx-danger)}
.cx-del.cx-arm{background:var(--cx-danger);color:#fff}
.cx-c-sk{display:flex;gap:12px;padding:16px 2px}
.cx-c-sk .cx-av{background:var(--cx-sk)}
.cx-c-sk div{flex:1;display:flex;flex-direction:column;gap:8px;padding-top:4px}

/* ================= private messages ================= */
.cx-pm{display:flex;flex-direction:column;gap:12px}
.cx-start{display:flex;flex-direction:column;align-items:center;gap:10px;padding:26px 12px 22px;text-align:center}
.cx-start-ic{width:66px;height:66px;border-radius:22px;display:grid;place-items:center;background:var(--cx-gold-wash);color:var(--cx-gold)}
.cx-start-ic svg{width:30px;height:30px}
.cx-start h3{font-size:1.45rem;line-height:1.3}
.cx-start p{max-width:32em;color:var(--cx-muted);font-size:.95rem}
.cx-feats{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:4px 0 6px;padding:0;list-style:none}
.cx-feats li{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;border:1px solid var(--cx-line);background:var(--cx-raise);font-size:.8rem;font-weight:700;color:var(--cx-muted)}
.cx-feats svg{width:15px;height:15px;color:var(--cx-gold)}
.cx-start .cx-go{min-height:46px;padding:0 26px;font-size:1rem}
.cx-me{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;border:1px solid var(--cx-line);background:linear-gradient(135deg,var(--cx-raise),var(--cx-raise-2))}
.cx-me-t{flex:1;min-width:0}
.cx-me-t small{display:block;font-size:.75rem;font-weight:700;color:var(--cx-muted)}
.cx-me-t b{display:block;font-size:1.12rem;font-weight:800;color:var(--cx-gold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;unicode-bidi:plaintext;text-align:start}
.cx-field{display:flex;align-items:center;gap:8px;padding:5px;padding-inline-start:14px;border-radius:999px;border:1px solid var(--cx-line);background:var(--cx-ink);transition:border-color .15s,box-shadow .15s}
.cx-field:focus-within{border-color:var(--cx-gold-bg);box-shadow:0 0 0 3px var(--cx-gold-wash)}
.cx-field>svg{width:18px;height:18px;color:var(--cx-faint)}
.cx-field input{flex:1;min-width:0;height:36px;padding:0;border:0;background:transparent;outline:none;box-shadow:none}
.cx-ren{display:flex;flex-direction:column;gap:6px}
.cx-ren[hidden]{display:none}
.cx-hint{padding:0 14px;font-size:.78rem;color:var(--cx-faint)}
.cx-sec{display:flex;align-items:center;gap:8px;margin-top:4px;padding:0 4px;font-size:.88rem;font-weight:800;color:var(--cx-muted)}
.cx-chip{min-width:22px;padding:0 8px;border-radius:999px;background:var(--cx-raise-2);font-size:.75rem;line-height:22px;text-align:center;font-variant-numeric:tabular-nums}
.cx-threads{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--cx-line);border-radius:18px;background:var(--cx-ink)}
.cx-th{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border-top:1px solid var(--cx-line);text-align:start;transition:background .15s}
.cx-th:first-child{border-top:0}
.cx-th:hover{background:var(--cx-hover)}
.cx-th-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cx-th-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.cx-th-top b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-th-top time{flex:none;font-size:.75rem;color:var(--cx-faint)}
.cx-th-sn{display:flex;align-items:center;gap:8px;font-size:.88rem;color:var(--cx-muted)}
.cx-th-sn>span:not(.cx-dot){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-th.cx-unread .cx-th-top b{font-weight:800;color:var(--cx-text)}
.cx-th.cx-unread .cx-th-sn>span:not(.cx-dot){color:var(--cx-text);font-weight:700}
.cx-th.cx-unread time{color:var(--cx-gold);font-weight:700}
.cx-dot{flex:none;min-width:22px;height:22px;padding:0 7px;box-sizing:border-box;border-radius:999px;display:grid;place-items:center;background:var(--cx-gold-bg);color:var(--cx-on-gold);font-size:.74rem;font-weight:800}
.cx-blk{flex:none;padding:0 8px;border-radius:999px;background:var(--cx-hover);color:var(--cx-danger);font-size:.7rem;font-weight:800;line-height:20px}
.cx-thread{gap:0;height:640px;height:clamp(440px,calc(100vh - 210px),640px);height:clamp(440px,calc(100dvh - 210px),640px);overflow:hidden;border:1px solid var(--cx-line);border-radius:20px;background:var(--cx-ink)}
.cx-thead{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--cx-line);background:var(--cx-card)}
.cx-thead .cx-ibtn{border-color:transparent;background:transparent}
.cx-thead .cx-ibtn:hover{background:var(--cx-hover)}
.cx-back svg{transform:scaleX(-1)}
[dir="rtl"] .cx-back svg{transform:none}
.cx-tid{flex:1;min-width:0}
.cx-tid b{display:block;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-tid small{display:block;font-size:.76rem;color:var(--cx-faint)}
.cx-tid small.cx-red{color:var(--cx-danger);font-weight:700}
.cx-thead .cx-ghost.cx-on{color:var(--cx-danger);border-color:var(--cx-danger)}
.cx-banner{padding:8px 14px;background:var(--cx-gold-wash);color:var(--cx-muted);font-size:.82rem;text-align:center}
.cx-banner[hidden]{display:none}
.cx-log{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:3px;padding:14px 12px 10px}
.cx-day{align-self:center;margin:12px 0 8px;padding:2px 12px;border-radius:999px;background:var(--cx-raise-2);color:var(--cx-muted);font-size:.74rem;font-weight:700}
.cx-day:first-child{margin-top:0}
.cx-b{align-self:flex-start;max-width:min(80%,520px);box-sizing:border-box;padding:7px 12px 5px;border:1px solid var(--cx-bub-line);border-radius:18px;background:var(--cx-bub)}
.cx-b.cx-mine{align-self:flex-end;background:var(--cx-own);border-color:var(--cx-own-line)}
.cx-b:not(.cx-cont){margin-top:6px}
.cx-b:not(.cx-mine):not(.cx-cont){border-start-start-radius:6px}
.cx-b.cx-mine:not(.cx-cont){border-start-end-radius:6px}
.cx-b p{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.7}
.cx-bm{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin-top:1px;font-size:.7rem;line-height:1.4;color:var(--cx-faint)}
.cx-b.cx-mine .cx-bm{color:var(--cx-own-meta)}
.cx-tick svg{width:16px;height:16px}
.cx-tick.cx-read{color:var(--cx-gold)}
.cx-b.cx-fresh{animation:cxIn .3s ease-out}
.cx-log .cx-empty{margin:auto}
.cx-send-box{display:flex;align-items:flex-end;gap:8px;padding:10px;border-top:1px solid var(--cx-line);background:var(--cx-card)}
.cx-send-box textarea{flex:1;min-width:0;box-sizing:border-box;min-height:44px;max-height:140px;resize:none;padding:10px 16px;border:1px solid var(--cx-line);border-radius:22px;background:var(--cx-ink);line-height:1.5;outline:none;box-shadow:none;transition:border-color .15s}
.cx-send-box textarea:focus{border-color:var(--cx-gold-bg)}
.cx-send{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--cx-gold-bg);color:var(--cx-on-gold);transition:opacity .15s,transform .1s}
.cx-send:active{transform:scale(.94)}
.cx-send:disabled{opacity:.4}
.cx-send svg{width:20px;height:20px}
[dir="rtl"] .cx-send svg{transform:scaleX(-1)}
.cx-thread .cx-status{margin:0;padding:0 14px 8px;background:var(--cx-card)}
.cx-thread .cx-status:empty{padding:0}
.cx-loading{display:flex;flex-direction:column;gap:12px;padding:6px 0}

@media (min-width:720px){
  .cx-compose{padding:16px 18px}
  .cx-me{padding:14px 18px}
}
@media (prefers-reduced-motion:reduce){
  .cx-sk,.cx-c.cx-new,.cx-b.cx-fresh{animation:none}
}
[dir="rtl"] .cx-go-send svg{transform:scaleX(-1)}
.cx [hidden]{display:none!important}
.cx-compose textarea:focus-visible,.cx-as input:focus-visible,.cx-field input:focus-visible,.cx-send-box textarea:focus-visible{outline:none}
.cx-as input{color:var(--cx-text)}
@media (max-width:419px){.cx-thead .cx-ghost{width:36px;padding:0;justify-content:center}.cx-thead .cx-ghost span{display:none}}