/* comms: الرسائل الداخلية + ملاحظاتي */

/* ---------- الرسائل ---------- */
.mwrap{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px;height:calc(100vh - 190px);min-height:420px}
.mlist{background:var(--card);border-radius:var(--r);box-shadow:var(--hair),var(--sh);overflow:auto;padding:6px}
.mth{display:flex;gap:10px;align-items:center;padding:10px;border-radius:10px;color:var(--ink)}
.mth:hover{background:var(--raised)}
.mth.on{background:var(--ps)}
.mth.un b{color:var(--p2)}
.mth.new{opacity:.85}
.mth .mt1{display:flex;flex-direction:column;min-width:0;flex:1}
.mth .between{display:flex;justify-content:space-between;align-items:center;gap:6px}
.mth .ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mwrap .av{width:34px;height:34px;flex:none;border-radius:50%;background:var(--ps);color:var(--p2);display:grid;place-items:center;font-weight:500}
.mcnt{background:var(--p);color:#fff;border-radius:10px;font-size:11.5px;min-width:20px;padding:0 6px;text-align:center;font-variant-numeric:tabular-nums}
.mpane{background:var(--card);border-radius:var(--r);box-shadow:var(--hair),var(--sh);display:flex;flex-direction:column;min-height:0;overflow:hidden}
.mpane>.empty,.mpane>.boot{margin:auto}
.mhead{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--ln2)}
.mhead .grow{flex:1;min-width:0}
.mback{display:none}
.mmsgs{flex:1;overflow:auto;padding:14px 16px;background:var(--bg)}
.mday{text-align:center;margin:10px 0}
.mday span{font-size:12px;color:var(--i3);background:var(--card);box-shadow:var(--hair);border-radius:10px;padding:1px 10px}
.msg{display:flex;margin:6px 0}
.msg.me{justify-content:flex-start}
.msg.them{justify-content:flex-end}
.msg .bub{max-width:min(560px,80%);border-radius:14px;padding:8px 12px;box-shadow:var(--hair);background:var(--card)}
.msg.me .bub{background:var(--ps);border-bottom-right-radius:4px}
.msg.them .bub{border-bottom-left-radius:4px}
.mtx{white-space:normal;word-wrap:break-word;overflow-wrap:anywhere}
.mmeta{font-size:11.5px;color:var(--i3);margin-top:4px}
.mmeta .rd{color:var(--p2)}
.mfs{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.mimg img{max-width:180px;max-height:180px;border-radius:8px;display:block;object-fit:cover}
.mfile{display:inline-flex;align-items:center;gap:6px;font-size:13px;padding:4px 8px;border-radius:8px;background:var(--raised)}
.mchip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;padding:2px 10px;border-radius:999px;background:var(--raised);color:var(--p2);margin:0 0 4px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mchip .i{width:14px;height:14px}
.mchip.off{color:var(--i3)}
.mbox{border-top:1px solid var(--ln2);padding:10px 12px;background:var(--card)}
.mrow{display:flex;gap:8px;align-items:flex-end}
.mrow textarea{resize:none;min-height:38px;max-height:160px}
.mrow .btn.p{height:38px}
.mreq{font-size:12.5px;color:var(--p2);margin-bottom:6px;cursor:pointer}
.mfiles:not(:empty){margin-bottom:6px}
.mattach{cursor:pointer}
@media (max-width:900px){
  .mwrap{grid-template-columns:1fr;height:calc(100vh - 210px - var(--safe-b))}
  .mwrap.has-open .mlist{display:none}
  .mwrap:not(.has-open) .mpane{display:none}
  .mback{display:inline-flex}
}

/* ---------- ملاحظاتي: ألوان هادئة ---------- */
.nc-sand{--nb:#FBF6EC;--nl:#EFE3CB}
.nc-sky{--nb:#EEF6FB;--nl:#D3E7F3}
.nc-mint{--nb:#EEF7F2;--nl:#D2EADC}
.nc-rose{--nb:#FBF0F1;--nl:#F0D6DA}
.nc-lilac{--nb:#F4F1FA;--nl:#DFD7EF}
.nc-stone{--nb:#F4F4F3;--nl:#E2E2DF}
.nsearch{width:220px}
.nquick{display:flex;gap:8px;align-items:center;background:var(--card);border-radius:var(--r);box-shadow:var(--hair),var(--sh);padding:10px}
.nquick .in{flex:1;border:0;box-shadow:none;font-size:15px}
.nquick .in:focus{box-shadow:none}
.nquick label.btn{cursor:pointer}
.nhint{margin:6px 4px 0}
.nsec{margin:20px 2px 8px;font-size:13px;color:var(--i2)}
.ngrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:14px;align-items:start}
.nsec+.ngrid{margin-top:0}
.ncard{background:var(--nb,#fff);border:1px solid var(--nl,var(--ln));border-radius:14px;padding:12px 14px;cursor:pointer;transition:box-shadow .15s var(--ease);min-width:0}
.ncard:hover{box-shadow:0 4px 14px rgba(0,0,0,.06)}
.nhead{display:flex;justify-content:space-between;align-items:flex-start;gap:6px}
.nt{font-weight:500;overflow-wrap:anywhere}
.nb{font-size:14px;margin-top:4px;max-height:180px;overflow:hidden;overflow-wrap:anywhere;color:var(--ink)}
.nicon{background:none;border:0;cursor:pointer;padding:2px 4px;border-radius:6px;font-size:13px;color:var(--i3);opacity:.55}
.nicon:hover{background:rgba(0,0,0,.05);opacity:1}
.nicon.on{opacity:1}
.nchk{list-style:none;margin:8px 0 2px;padding:0}
.nchk li{display:flex;align-items:center;gap:6px;padding:2px 0}
.nchk label{display:flex;gap:8px;align-items:flex-start;cursor:pointer;flex:1;min-width:0}
.nchk input{margin-top:4px;accent-color:var(--p)}
.nchk li.dn span{text-decoration:line-through;color:var(--i3)}
.nimgs{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.nimgs img{width:64px;height:64px;object-fit:cover;border-radius:8px;display:block}
.nimgs .more{font-size:12px;color:var(--i3);align-self:center}
.nimgs.ed img{width:96px;height:96px}
.nimgs .ni{position:relative}
.nimgs .ni .nicon{position:absolute;top:2px;left:2px;background:rgba(255,255,255,.85);opacity:1}
.ncard audio,.ned audio{width:100%;height:36px;margin-top:8px}
.naud{flex-wrap:nowrap}
.naud audio{flex:1}
.nfoot{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;align-items:center}
.nfoot:empty{display:none}
.nfoot .mchip{margin:0;background:rgba(255,255,255,.7)}
.ned{background:var(--nb,#fff);margin:-22px -24px;padding:22px 24px;border-radius:16px}
.ned .nti{font-size:17px;font-weight:500;background:transparent;border-color:transparent}
.ned .nbody{background:rgba(255,255,255,.6);margin-top:8px}
.ned .grow{flex:1;min-width:0}
.ned .row .in{background:rgba(255,255,255,.75)}
.ned .nclient{position:relative}
.ned .nclient .sres{top:40px}
.sws{display:flex;gap:8px;margin-top:6px}
.sw{width:26px;height:26px;border-radius:50%;border:1px solid var(--nl);background:var(--nb);cursor:pointer;padding:0}
.sw.on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--p)}
.btn.rec{color:var(--red);box-shadow:0 0 0 1px #F3C7C7}
@media (max-width:560px){
  .nsearch{width:100%}
  .ngrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ned{margin:-22px -16px;padding:22px 16px}
}