.contacts { background:var(--surface); display:flex; flex-direction:column; min-height:0; position:relative; z-index:1; }
.contacts .clist { flex:1; }
/* surfaces without lines: tone separates, not borders */
.pa .contacts { animation:none; box-shadow:none; }
.contacts .c-last { text-overflow:ellipsis; -webkit-mask-image:none; mask-image:none; }
.pa .contacts .clist {
  padding-bottom:28px; scrollbar-width:thin; scrollbar-color:transparent transparent; scroll-behavior:smooth;
  transition:scrollbar-color .25s ease; overscroll-behavior:contain; padding-left:6px; padding-right:6px;
}
.pa .contacts:hover .clist { scrollbar-color:var(--border-strong) transparent; }
.pa .contacts:focus-within .clist { scrollbar-color:var(--border-strong) transparent; }
.clist { list-style:none; margin:0; padding:4px 10px 16px; overflow:auto; display:flex; flex-direction:column; gap:2px; padding-top:4px; }
.clist.drop-ready { background:var(--nav-active-bg); border-radius:12px; box-shadow:inset 0 0 0 2px var(--nav-active-fg); }
/* contacts: agent entry */
.contact {
  width:100%; display:flex; text-align:left; border:0; background:transparent; border-radius:10px;
  padding:8px 8px; gap:10px; align-items:center;
}
.contact:hover { background:var(--hover); }
.contact.on { background:var(--nav-active-bg); }
.contact .c-last { display:block; }
.contact .c-sub { gap:6px; min-width:0; }
.contact .c-dot {
  position:absolute; right:14px; top:50%; width:9px; height:9px; margin-top:-4px; border-radius:50%;
  background:var(--tone-gold-fg); transition:opacity .12s;
}
.contact.dragging { opacity:.45; }
.pa.dark .contact.on { background:var(--contact-on-bg); box-shadow:inset 0 0 0 1px var(--border); }
.c-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.c-row { display:flex; align-items:center; gap:8px; }
.c-name { font-weight:600; font-size:14px; }
.c-last {
  color:var(--text-2); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:clip;
  -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 28px), transparent);
  mask-image:linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
.c-last.strong { color:var(--text); font-weight:500; }
.c-li { position:relative; }
.c-li .contact { padding:8px 8px; gap:10px; }
.c-li[draggable="true"] { cursor:grab; }
.c-li:hover .c-more { opacity:1; }
.c-li:focus-within .c-more { opacity:1; }
.c-li:hover .c-dot { opacity:0; }
.c-li:focus-within .c-dot { opacity:0; }
.c-li .contact .c-count {
  margin-left:auto; margin-right:34px; flex-shrink:0; min-width:20px; height:20px; padding:0 6px;
  border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-size:12px;
  font-weight:600; font-variant-numeric:tabular-nums; background:var(--tone-info-bg); color:var(--tone-info-fg);
}
/* conversations dialog */
.sres .c-body { min-width:0; }
.pins { margin:6px 6px 0; padding:10px 6px 4px; border-radius:12px; transition:background .15s, box-shadow .15s; }
.pins[hidden] { display:none; }
.pins.drop-ready { background:var(--nav-active-bg); box-shadow:inset 0 0 0 2px var(--nav-active-fg); }
.pins.is-empty:not(.drop-ready) { display:none; }
.pins.is-empty.drop-ready .pins-empty { display:block; }
.pins-empty { display:none; margin:0; padding:18px 4px; text-align:center; font-size:12px; font-weight:600; color:var(--nav-active-fg); }
.pin-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; }
.pin-li { position:relative; }
.pin-li[draggable="true"] { cursor:grab; }
.pin-li:hover .c-more { opacity:1; }
.pin-li:focus-within .c-more { opacity:1; }
.pin-tile {
  width:100%; min-height:44px; display:flex; flex-direction:column; align-items:center; gap:6px; border:0;
  background:transparent; padding:8px 2px 6px; border-radius:12px;
}
.pin-tile:hover { background:var(--hover); }
.pin-tile.on { background:var(--nav-active-bg); }
.pin-tile.dragging { opacity:.45; }
.pin-dot {
  position:absolute; top:0; right:0; width:13px; height:13px; border-radius:50%; background:var(--tone-gold-fg);
  box-shadow:0 0 0 2px var(--surface);
}
.pin-name { font-size:12px; font-weight:600; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.c-more {
  position:absolute; right:6px; top:50%; width:32px; height:32px; margin-top:-16px; border:0; border-radius:50%;
  background:transparent; color:var(--text-2); display:inline-flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .12s;
}
.c-more svg { fill:currentColor; stroke:none; }
.c-more:hover { background:var(--hover); color:var(--text); }
.pin-li .c-more { right:2px; top:2px; margin-top:0; width:28px; height:28px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--border); }
.c-more[aria-expanded="true"] { opacity:1; }
.c-empty { margin:4px 10px; font-size:12px; color:var(--text-2); list-style:none; }
@supports selector(::-webkit-scrollbar) {
  .contacts .clist::-webkit-scrollbar { width:8px; }
  .contacts .clist::-webkit-scrollbar-button { display:none; width:0; height:0; }
  .contacts .clist::-webkit-scrollbar-track { background:transparent; }
  .contacts .clist::-webkit-scrollbar-thumb {
    background-color:transparent; border-radius:999px; border:2px solid transparent; background-clip:padding-box;
  }
  .pa .contacts .clist { scrollbar-width:auto; scrollbar-color:auto; }
  .contacts:hover .clist::-webkit-scrollbar-thumb { background-color:var(--border-strong); }
  .contacts:focus-within .clist::-webkit-scrollbar-thumb { background-color:var(--border-strong); }
  .pa .contacts:hover .clist { scrollbar-width:auto; scrollbar-color:auto; }
  .pa .contacts:focus-within .clist { scrollbar-width:auto; scrollbar-color:auto; }
}
@container (min-width: 720px) and (max-width: 1099px) {
  /* the rail (every rule below is off while the drawer is open: the drawer shows the full sidebar) */
  .pa:not(.side-over) .contacts::-webkit-scrollbar { display:none; }
  .pa:not(.side-over) .contacts .c-body { display:none; }
  .pa:not(.side-over) .contacts { overflow-y:auto; overflow-x:hidden; scrollbar-width:none; overscroll-behavior:contain; z-index:10; }
  .pa:not(.side-over) .contacts .clist { flex:1 0 auto; overflow:visible; }
  .pa:not(.side-over) .clist { padding:8px 8px 28px; }
  .pa:not(.side-over) .contact { justify-content:center; padding:8px 0; }
  .pa:not(.side-over) .contact .c-dot { right:4px; top:4px; margin-top:0; box-shadow:0 0 0 2px var(--surface); }
  .pa:not(.side-over) .c-li .contact { justify-content:center; position:relative; padding:6px 0; }
  /* states ride on the avatar instead of beside it: unread count top-right,
     a waiting Pedido as a gold dot when there is no count to show */
  .pa:not(.side-over) .c-li .contact .c-count {
    position:absolute; top:2px; right:2px; left:auto; z-index:1; margin:0; min-width:18px; height:18px;
    padding:0 5px; font-size:11px; line-height:18px; border-radius:999px; background:var(--btn-bg);
    color:var(--btn-fg); box-shadow:0 0 0 2px var(--surface);
  }
  .pa:not(.side-over) .c-li:hover .c-dot { opacity:1; }
  .pa:not(.side-over) .pins { margin:4px 10px 0; padding:4px 0 10px; border-radius:0; box-shadow:0 1px 0 var(--border); }
  .pa:not(.side-over) .pins.drop-ready { border-radius:12px; box-shadow:inset 0 0 0 2px var(--nav-active-fg); }
  .pa:not(.side-over) .pin-grid { grid-template-columns:1fr; gap:8px; }
  .pa:not(.side-over) .pin-li { display:flex; justify-content:center; }
  .pa:not(.side-over) .pin-name { display:none; }
  .pa:not(.side-over) .c-more { display:none; }
}
@container (max-width: 719px) {
  .pa .contacts .clist { flex:none; }
}
@media (pointer: coarse) {
  .pin-li .c-more { width:44px; height:44px; right:-6px; top:-6px; margin-top:0; }
  .c-more { width:44px; height:44px; margin-top:-22px; right:2px; }
}
@media (hover: none) {
  .c-li .c-dot { opacity:0; }
  .c-more { opacity:1; }
}
@media (prefers-reduced-motion: reduce) {
  .pa .contacts .clist { scroll-behavior:auto; transition:none; }
  .contact .c-dot { transition:none; animation:none; }
  .pins { transition:none; animation:none; }
  .c-more { transition:none; animation:none; }
}

/* ---- sidebar drawer: one mechanism for tablet and phone. body.side-over (set by app.js) lifts .contacts
   out of the layout as a left drawer over the conversation, with .side-scrim behind it; body.side-leaving
   keeps it in place for the slide-out. The drawer always has the full sidebar look. */
@keyframes side-in { from { transform:translateX(-100%); } to { transform:none; } }
@keyframes side-out { from { transform:none; } to { transform:translateX(-100%); } }
.side-scrim { display:none; }
@container (max-width: 1099px) {
  .pa .side-scrim {
    display:block; position:fixed; inset:0; z-index:40; background:var(--scrim); opacity:0; visibility:hidden;
    pointer-events:none; transition:opacity .22s ease-out, visibility 0s linear .22s;
  }
  .pa.side-over:not(.side-leaving) .side-scrim { opacity:1; visibility:visible; pointer-events:auto; transition:opacity .22s ease-out; }
  .pa.side-over .contacts {
    position:fixed; z-index:41; left:0; top:0; bottom:0; width:min(86vw, 340px); display:flex;
    box-shadow:var(--shadow-lg); animation:side-in .22s cubic-bezier(.16,1,.3,1) both;
  }
  .pa.side-over.side-leaving .contacts { animation:side-out .22s cubic-bezier(.16,1,.3,1) both; }
}
@media (prefers-reduced-motion: reduce) {
  .pa .side-scrim { transition:none; }
  .pa.side-over .contacts, .pa.side-over.side-leaving .contacts { animation:none; }
}