/* Плитка диалога: как в приложении — карточка, время сверху, счётчик снизу. */
#chat-list{padding:4px 0 18px}
#chat-list .chat-row{
  display:flex;align-items:center;gap:10px;
  margin:4px 12px;padding:6px 10px;min-height:66px;
  border-radius:18px;background:var(--bg-3);border-bottom:0;
}
#chat-list .chat-row:hover{background:color-mix(in srgb,var(--bg-4) 72%,var(--bg-3))}
#chat-list .chat-row.on{background:color-mix(in srgb,var(--accent) 16%,var(--bg-3))}
#chat-list .chat-row>.av{width:54px;height:54px;flex:0 0 54px;font-size:18px}
#chat-list .tile-main{flex:1;min-width:0;height:54px;display:flex;flex-direction:column;justify-content:flex-start}
#chat-list .tile-top{display:flex;align-items:center;gap:5px;min-width:0;min-height:20px}
#chat-list .tile-top .chat-name{flex:1;min-width:0;font-size:15px;font-weight:650;line-height:20px}
#chat-list .chat-row.skin-dark .chat-name{color:#F4F6F8}
#chat-list .chat-row.skin-dark .tile-prev,
#chat-list .chat-row.skin-dark .tile-meta .chat-time{color:#D5D8DC}
#chat-list .chat-row.skin-dark .tick.read{color:#6EF0FF}
#chat-list .chat-row.skin-dark .tile-meta .chat-time.hot{color:#F4F6F8}
#chat-list .chat-row.skin-dark .badge{background:#F4F6F8;color:#2C2A28}
#chat-list .chat-row.skin-dark.muted .badge{background:#D5D8DC;color:#2C2A28}
#chat-list .chat-row.skin-light .chat-name{color:#2C2A28}
#chat-list .chat-row.skin-light .tile-prev,
#chat-list .chat-row.skin-light .tile-meta .chat-time{color:#5C5854}
#chat-list .chat-row.skin-light .tile-meta .chat-time.hot{color:#2C2A28}
#chat-list .chat-row.skin-light .tick.read{color:#007A88}
#chat-list .chat-row.skin-light .badge{background:#2C2A28;color:#F4F6F8}
#chat-list .chat-row.skin-light.muted .badge{background:#5C5854;color:#F4F6F8}
.tile-pick{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 12px}
.tile-swatch{width:72px;height:40px;padding:0;border-radius:12px;border:1px solid color-mix(in srgb,var(--muted) 35%,transparent);overflow:hidden;background:var(--bg-3);cursor:pointer}
.tile-swatch.on{border:2px solid var(--accent)}
.tile-swatch img{width:100%;height:100%;object-fit:cover;display:block}
.tile-swatch.locked{opacity:.45}
#chat-list .tile-prev{margin-top:8px;min-width:0;color:var(--muted);font-size:13px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#chat-list .tile-prev .chat-typing,#chat-list .tile-prev .draft{overflow:hidden;text-overflow:ellipsis}
#chat-list .tile-meta{flex:0 0 auto;height:54px;margin-left:8px;display:flex;flex-direction:column;align-items:flex-end}
#chat-list .tile-meta .chat-time{font-size:12px;line-height:16px;color:var(--muted);margin-bottom:auto}
#chat-list .tile-meta .chat-time.hot{color:var(--accent);font-weight:650}
#chat-list .tile-meta .badge{margin-top:auto;height:20px;min-width:20px;padding:0 6px;border-radius:10px;font-size:11px}
#chat-list .chat-row.muted .badge{background:var(--muted);color:var(--bg)}
#chat-list .tick{display:inline-flex;flex:none;width:15px;height:15px;color:var(--muted)}
#chat-list .tick.read{color:var(--accent)}
#chat-list .tick svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#chat-list .tile-pin,#chat-list .tile-mute{
  width:20px;height:20px;flex:none;border-radius:6px;
  background:color-mix(in srgb,var(--accent) 18%,transparent);
  display:inline-flex;align-items:center;justify-content:center;
}
#chat-list .tile-mute{background:color-mix(in srgb,var(--muted) 22%,transparent)}
#chat-list .tile-pin::before,#chat-list .tile-mute::before{
  content:"";width:14px;height:14px;background:var(--accent);
  -webkit-mask:center/contain no-repeat;mask:center/contain no-repeat;
}
#chat-list .tile-mute::before{background:var(--muted)}
#chat-list .tile-pin::before{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M16 9V4h1V2H7v2h1v5c0 1.66-1.34 3-3 3v2h5.97v7l1.03 1 1.03-1V14H19v-2c-1.66 0-3-1.34-3-3z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M16 9V4h1V2H7v2h1v5c0 1.66-1.34 3-3 3v2h5.97v7l1.03 1 1.03-1V14H19v-2c-1.66 0-3-1.34-3-3z'/></svg>")}
#chat-list .tile-mute::before{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51A8.8 8.8 0 0 0 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3 3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06a9 9 0 0 0 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4 9.91 6.09 12 8.18V4z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51A8.8 8.8 0 0 0 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3 3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06a9 9 0 0 0 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4 9.91 6.09 12 8.18V4z'/></svg>")}