/* =====================================================================
   INBOX: filter chips
   
   ===================================================================== */
.inbox-filters{ display:flex; gap:6px; padding:8px 10px 6px; flex-wrap:nowrap; overflow-x:auto;
  overflow-y:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
  scrollbar-width:none; -ms-overflow-style:none; border-bottom:1px solid var(--line);
  /* dan pashe halka fade — bojhay je aro chip ache */
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent); }
.inbox-filters::-webkit-scrollbar{ height:0; display:none }
.inbox-filters .fchip{ flex:0 0 auto; scroll-snap-align:start }
.inbox-filters .fchip{ font-size:12px; font-weight:600; padding:5px 11px; border-radius:18px; border:1px solid var(--line); background:var(--panel); color:var(--faint); cursor:pointer; display:inline-flex; align-items:center; gap:5px; transition:.12s; }
.inbox-filters .fchip:hover{ color:var(--ink); }
.inbox-filters .fchip.active{ background:var(--grad); color:#fff; border-color:transparent; }
.inbox-filters .fc-cnt{ font-size:10.5px; font-weight:800; background:rgba(245,158,11,.18); color:#b45309; padding:0 6px; border-radius:12px; min-width:16px; text-align:center; }
.inbox-filters .fchip.active .fc-cnt{ background:rgba(255,255,255,.28); color:#fff; }
.inbox-filters .fc-cnt.fc-blue{ background:rgba(37,99,235,.14); color:var(--blue-600); }
.inbox-filters .fchip.active .fc-cnt.fc-blue{ background:rgba(255,255,255,.28); color:#fff; }

/* unseen thread */
.conv .unread-dot{width:9px;height:9px;border-radius:50%;background:var(--blue-600);flex:0 0 auto;
  box-shadow:0 0 0 3px rgba(37,99,235,.16)}
.conv.unread .name{font-weight:800;color:var(--ink)}
.conv.unread .prev{font-weight:700;color:var(--ink)}
/* pin */
.conv .pinbtn{width:24px;height:24px;border-radius:7px;border:none;background:none;color:var(--faint);
  display:grid;place-items:center;cursor:pointer;opacity:0;transition:.13s;flex:0 0 auto;padding:0}
.conv .pinbtn svg{width:14px;height:14px}
.conv:hover .pinbtn{opacity:.75}
.conv .pinbtn:hover{opacity:1;background:var(--tint);color:var(--blue-600)}
.conv .pinbtn.on{opacity:1;color:var(--blue-600)}
.conv .pinbtn.on svg{fill:currentColor}
.conv.pinned{background:linear-gradient(90deg,rgba(37,99,235,.05),transparent 60%)}
.conv .agent-dot{ display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; font-size:11px; margin-left:5px; vertical-align:middle; }
.conv.needs-agent{ background:rgba(245,158,11,.06); }