/* ══════════ پیام‌رسان هنرستان (مشترک پنل هنرجو و پنل اساتید) ══════════ */
.ch{
  --ch-bg:#fff;--ch-wall:#ece6d6;--ch-dot:rgba(23,38,37,.07);--ch-in:#fff;--ch-out:#d7ecd0;--ch-out-tx:#13261d;
  --ch-acc:#2f6b4f;--ch-acc2:#e8b33d;--ch-read:#2a9d63;--ch-hover:rgba(23,38,37,.05);--ch-ink:var(--ink,#172625);
  --ch-muted:var(--muted,#65706e);--ch-line:var(--line,rgba(23,38,37,.1));
  display:grid;grid-template-columns:330px 1fr;height:620px;min-height:340px;
  background:var(--ch-bg);border:1px solid var(--ch-line);border-radius:20px;overflow:hidden;
  box-shadow:0 8px 30px rgba(20,30,29,.08);color:var(--ch-ink);font-size:14px;line-height:1.75;position:relative;
}
html.dark .ch{
  --ch-bg:#172422;--ch-wall:#0e1716;--ch-dot:rgba(255,255,255,.035);--ch-in:#21312e;--ch-out:#2b5443;--ch-out-tx:#eef5ea;
  --ch-acc:#4f9a74;--ch-read:#7fd8a4;--ch-hover:rgba(255,255,255,.05);--ch-ink:#eef0e6;--ch-muted:#9aa6a3;--ch-line:rgba(245,243,231,.1);
}
.ch *{box-sizing:border-box}
.ch button,.ch input,.ch textarea{font-family:inherit;font-size:inherit;color:inherit}
.ch [hidden]{display:none!important}
.ch-list,.ch-body,.ch-compose textarea{scrollbar-width:thin;scrollbar-color:rgba(127,127,127,.35) transparent}
.ch-list::-webkit-scrollbar,.ch-body::-webkit-scrollbar{width:6px}
.ch-list::-webkit-scrollbar-thumb,.ch-body::-webkit-scrollbar-thumb{background:rgba(127,127,127,.35);border-radius:6px}

/* ── ستون لیست ── */
.ch-side{display:flex;flex-direction:column;min-height:0;border-left:1px solid var(--ch-line);background:var(--ch-bg)}
.ch-side-head{display:flex;align-items:center;gap:8px;padding:14px 16px 10px}
.ch-side-head>b{font-size:18px;font-weight:900}
.ch-sp{flex:1}
.ch-act{border:0;border-radius:11px;padding:6px 12px;font-size:12.5px!important;font-weight:800;background:var(--ch-acc);color:#fff!important;cursor:pointer}
.ch-act:hover{filter:brightness(1.08)}
.ch-search{display:flex;align-items:center;gap:8px;margin:0 14px 8px;padding:0 12px;border-radius:14px;background:var(--ch-hover);border:1px solid transparent;transition:.15s}
.ch-search:focus-within{border-color:var(--ch-acc);background:transparent}
.ch-search span{color:var(--ch-muted);font-size:17px}
.ch-search input{flex:1;min-width:0;height:40px;border:0!important;background:transparent!important;outline:none;padding:0!important;margin:0!important;font-size:13.5px!important}
.ch-chips{display:flex;gap:6px;overflow-x:auto;padding:0 14px 8px;scrollbar-width:none}
.ch-chips::-webkit-scrollbar{display:none}
.ch-chips button{flex:none;border:1px solid var(--ch-line);background:transparent;border-radius:20px;padding:3px 12px;font-size:12px!important;font-weight:700;cursor:pointer;white-space:nowrap}
.ch-chips button.on{background:var(--ch-acc);border-color:var(--ch-acc);color:#fff}
.ch-list{flex:1;min-height:0;overflow-y:auto;padding:2px 8px 10px;overscroll-behavior:contain}
.ch-item{display:flex;align-items:center;gap:11px;width:100%;text-align:right;border:0;background:none;padding:9px 10px;border-radius:14px;cursor:pointer;transition:background .12s}
.ch-item:hover{background:var(--ch-hover)}
.ch-item.on{background:var(--ch-acc);color:#fff}
.ch-item.on small,.ch-item.on time,.ch-item.on .ch-r3,.ch-item.on .ch-tick{color:rgba(255,255,255,.82)!important}
.ch-item.on .ch-nb{background:#fff;color:var(--ch-acc)}
.ch-av{width:48px;height:48px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:900;font-size:15px;color:#fff;
  background:var(--c);background:linear-gradient(145deg,color-mix(in srgb,var(--c) 78%,#fff),var(--c));text-shadow:0 1px 1px rgba(0,0,0,.15)}
.ch-av.big{width:76px;height:76px;font-size:24px}
.ch-it{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ch-r1{display:flex;align-items:baseline;gap:8px}
.ch-r1 b{flex:1;min-width:0;font-size:14.5px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-r1 time{flex:none;font-size:11px;color:var(--ch-muted)}
.ch-r1 em{flex:none;font-style:normal;font-size:11px;font-weight:800;color:var(--ch-acc)}
.ch-item.on .ch-r1 em{color:#fff}
.ch-r2{display:flex;align-items:center;gap:6px}
.ch-r2 small{flex:1;min-width:0;font-size:12.5px;color:var(--ch-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-r3{font-size:11px;color:var(--ch-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.85}
.ch-item.unread .ch-r1 b{font-weight:900}
.ch-item.unread .ch-r2 small{color:var(--ch-ink);font-weight:700}
.ch-item.unread .ch-r1 time{color:var(--ch-acc);font-weight:800}
.ch-nb{flex:none;min-width:22px;height:22px;padding:0 7px;border-radius:11px;background:var(--ch-acc);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:900}
.ch-sec{font-size:11.5px;font-weight:900;color:var(--ch-muted);padding:12px 12px 4px}
.ch-more{display:block;width:calc(100% - 8px);margin:8px 4px;padding:10px;border:1.5px dashed var(--ch-line);border-radius:14px;background:none;cursor:pointer;font-weight:800;font-size:13px!important;color:var(--ch-acc)!important}
.ch-more small{color:var(--ch-muted);font-weight:600}
.ch-none{padding:30px 16px;text-align:center;color:var(--ch-muted);font-size:13px;display:flex;flex-direction:column;gap:4px}
.ch-none b{color:var(--ch-ink);font-size:14px}
.ch-tick{font-style:normal;font-size:11px;letter-spacing:-3px;color:var(--ch-muted);margin-left:4px}
.ch-tick.read{color:var(--ch-read)}
.ch-loading{display:flex;align-items:center;justify-content:center;gap:9px;padding:30px;color:var(--ch-muted);font-size:13px;margin:auto}
.ch-loading i,.ch-older i{width:18px;height:18px;border-radius:50%;border:2.5px solid var(--ch-line);border-top-color:var(--ch-acc);animation:chspin .8s linear infinite}
@keyframes chspin{to{transform:rotate(360deg)}}

/* ── ستون گفت‌وگو ── */
.ch-main{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;
  background-color:var(--ch-wall);background-image:radial-gradient(var(--ch-dot) 1.2px,transparent 1.3px);background-size:20px 20px}
.ch-empty{margin:auto;text-align:center;padding:24px;max-width:340px;display:flex;flex-direction:column;align-items:center;gap:6px}
.ch-empty-ico{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;font-size:40px;background:var(--ch-bg);box-shadow:0 6px 24px rgba(0,0,0,.07);margin-bottom:8px}
.ch-empty b{font-size:16px}
.ch-empty p{font-size:13px;color:var(--ch-muted)}
.ch-conv{position:relative;display:flex;flex-direction:column;flex:1;min-height:0}
.ch-head{display:flex;align-items:center;gap:11px;padding:9px 16px;min-height:62px;background:var(--ch-bg);border-bottom:1px solid var(--ch-line);z-index:3}
.ch-head .ch-av{width:42px;height:42px;font-size:14px}
.ch-hinfo{display:flex;flex-direction:column;min-width:0;line-height:1.45}
.ch-hinfo b{font-size:15px;font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-hinfo small{font-size:12px;color:var(--ch-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-back{display:none;width:38px;height:38px;border-radius:50%;border:0;background:var(--ch-hover);font-size:18px!important;cursor:pointer;flex:none}
.ch-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 0 6px;scroll-behavior:auto}
.ch-older{display:flex;justify-content:center;padding:10px}
.ch-msgs{display:flex;flex-direction:column;padding:6px max(12px,4%) 8px}

.ch-day{position:sticky;top:6px;z-index:2;align-self:center;margin:14px 0 6px;pointer-events:none}
.ch-day span{display:inline-block;background:rgba(23,38,37,.5);color:#fff;font-size:11.5px;font-weight:700;padding:2px 13px;border-radius:20px;backdrop-filter:blur(4px)}
html.dark .ch-day span{background:rgba(0,0,0,.45)}
.ch-newline{display:flex;align-items:center;gap:10px;margin:12px 0 6px;color:var(--clay,#c1533b);font-size:12px;font-weight:900}
.ch-newline::before,.ch-newline::after{content:"";flex:1;height:1px;background:currentColor;opacity:.35}
.ch-newline span{background:var(--ch-bg);padding:1px 12px;border-radius:20px}

.ch-m{display:flex;position:relative;margin-top:8px;animation:chin .18s ease-out}
.ch-m.cont{margin-top:2px}
.ch-m.mine{justify-content:flex-start}          /* راست */
.ch-m:not(.mine){justify-content:flex-end}      /* چپ */
@keyframes chin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ch-bub{position:relative;max-width:min(80%,580px);padding:6px 12px 7px;border-radius:18px;background:var(--ch-in);
  box-shadow:0 1px 1.5px rgba(0,0,0,.09);overflow-wrap:anywhere;word-break:break-word;cursor:pointer;transition:filter .12s}
.ch-m.mine .ch-bub{background:var(--ch-out);color:var(--ch-out-tx)}
.ch-m.mine:not(.more) .ch-bub{border-bottom-right-radius:5px}
.ch-m:not(.mine):not(.more) .ch-bub{border-bottom-left-radius:5px}
.ch-m.mine.cont .ch-bub{border-top-right-radius:7px}
.ch-m.mine.more .ch-bub{border-bottom-right-radius:7px}
.ch-m:not(.mine).cont .ch-bub{border-top-left-radius:7px}
.ch-m:not(.mine).more .ch-bub{border-bottom-left-radius:7px}
.ch-m.sel .ch-bub{filter:brightness(.93);box-shadow:0 0 0 2px var(--ch-acc)}
html.dark .ch-m.sel .ch-bub{filter:brightness(1.15)}
.ch-tx{white-space:pre-wrap;font-size:14px}
.ch-tx a{color:#1f6fb5;text-decoration:underline;word-break:break-all}
html.dark .ch-tx a{color:#8cc4ff}
.ch-pad{display:inline-block;width:44px;height:1px}
.ch-m.mine .ch-pad{width:60px}
.ch-meta{position:absolute;left:10px;bottom:4px;display:flex;align-items:center;gap:2px;direction:ltr;font-size:10.5px;line-height:1;opacity:.62;white-space:nowrap}
.ch-m.mine .ch-meta{opacity:.75}
.ch-meta .ch-tick{margin:0 0 0 3px}
.ch-m.mine .ch-tick.read{color:var(--ch-read);opacity:1}
.ch-tick.wait{letter-spacing:0;font-size:9px}
.ch-tick.fail{letter-spacing:0;background:var(--clay,#c1533b);color:#fff!important;border-radius:50%;width:14px;height:14px;display:inline-grid;place-items:center;font-weight:900;font-size:10px}
.ch-m.failed .ch-bub{box-shadow:0 0 0 1.5px var(--clay,#c1533b)}
.ch-m.tmp .ch-bub{opacity:.85}
.ch-from{display:block;font-size:11.5px;font-weight:900;color:var(--ch-acc);margin-bottom:1px}
html.dark .ch-from{color:#8fd4ad}
.ch-cls{display:block;font-size:11px;font-weight:900;color:#a16d05;margin-bottom:1px}
html.dark .ch-cls{color:var(--mustard,#e8b33d)}
.ch-m.emo .ch-bub{background:none!important;box-shadow:none;padding:0 4px 16px;font-size:40px;line-height:1.25}
.ch-m.emo .ch-tx{font-size:40px}
.ch-m.emo .ch-pad{display:none}
.ch-m.emo .ch-meta{bottom:0;background:rgba(0,0,0,.35);color:#fff;opacity:1;padding:2px 6px;border-radius:10px}

.ch-hello{margin:auto;padding:40px 16px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.ch-hello b{font-size:16px}
.ch-hello p{font-size:13px;color:var(--ch-muted);background:var(--ch-bg);padding:4px 14px;border-radius:20px}

/* منوی پیام */
.ch-menu{position:absolute;bottom:100%;margin-bottom:4px;z-index:6;display:flex;background:var(--ch-bg);border:1px solid var(--ch-line);border-radius:13px;
  box-shadow:0 10px 30px rgba(0,0,0,.16);overflow:hidden;animation:chin .12s ease-out}
.ch-menu.below{bottom:auto;top:100%;margin:4px 0 0}
.ch-m.mine .ch-menu{right:0}
.ch-m:not(.mine) .ch-menu{left:0}
.ch-menu button{border:0;background:none;padding:8px 14px;font-size:12.5px!important;font-weight:800;cursor:pointer;white-space:nowrap}
.ch-menu button:hover{background:var(--ch-hover)}
.ch-menu button+button{border-right:1px solid var(--ch-line)}
.ch-menu .danger{color:var(--clay,#c1533b)!important}
.ch-menu .why{display:flex;align-items:center;padding:8px 12px;font-size:11.5px;font-weight:700;color:var(--clay,#c1533b);max-width:220px;white-space:normal;line-height:1.5;border-left:1px solid var(--ch-line)}

/* دکمه‌ی پایین */
.ch-down{position:absolute;left:16px;bottom:84px;z-index:4;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  background:var(--ch-bg);box-shadow:0 4px 16px rgba(0,0,0,.18);font-size:19px!important;font-weight:900;display:grid;place-items:center}
.ch-down span{position:absolute;top:-6px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--ch-acc);color:#fff;font-size:11px;display:grid;place-items:center}
.ch-closed{padding:12px 16px;text-align:center;font-size:12.5px;color:var(--ch-muted);background:var(--ch-bg);border-top:1px solid var(--ch-line)}

/* نوشتن */
.ch-compose{position:relative;display:flex;align-items:flex-end;gap:9px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:var(--ch-bg);border-top:1px solid var(--ch-line)}
.ch-compose textarea{flex:1;min-width:0;resize:none;min-height:46px;max-height:150px;margin:0!important;padding:11px 18px!important;border-radius:23px!important;
  border:1.5px solid var(--ch-line)!important;background:var(--ch-hover)!important;outline:none;font-size:14.5px!important;line-height:1.55;display:block;width:auto!important;
  overflow-y:hidden;height:46px}
.ch-compose textarea:focus{border-color:var(--ch-acc)!important;background:transparent!important}
.ch-send{width:46px;height:46px;flex:none;border-radius:50%;border:0;background:var(--ch-acc);color:#fff!important;display:grid;place-items:center;cursor:pointer;
  transition:transform .15s,background .15s;box-shadow:0 4px 12px color-mix(in srgb,var(--ch-acc) 40%,transparent)}
.ch-send svg{width:21px;height:21px;transform:scaleX(-1)}
.ch-send:not(:disabled):hover{transform:scale(1.06)}
.ch-send:disabled{background:var(--ch-line);color:var(--ch-muted)!important;box-shadow:none;cursor:default}
.ch-count{position:absolute;top:-20px;left:72px;font-size:11px;color:var(--ch-muted);background:var(--ch-bg);padding:0 8px;border-radius:8px}

/* ── گوشی و تبلت: یک ستون؛ با باز کردن گفت‌وگو، لیست کنار می‌رود ── */
@media(max-width:820px){
  .ch{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
  .ch-side{border-left:0;min-width:0}
  .ch-main{display:none}
  .ch.open .ch-side{display:none}
  .ch.open .ch-main{display:flex}
  .ch-back{display:grid;place-items:center}
  .ch-bub{max-width:86%}
  .ch-msgs{padding:6px 10px 8px}
  .ch-head{padding:8px 10px}
  .ch-compose{padding:8px 10px calc(8px + env(safe-area-inset-bottom))}
  .ch-down{bottom:76px;left:12px}
}