.me { display:flex; align-items:center; gap:10px; }
.pa .me { margin-left:0; border:0; background:transparent; padding:4px 8px 4px 4px; border-radius:999px; min-height:44px; color:var(--text-2); }
.me .me-txt { text-align:left; color:var(--text); }
.pa .me:hover { background:var(--hover); }
.pa .me[aria-expanded="true"] { background:var(--hover); }
.me-txt { display:flex; flex-direction:column; line-height:1.2; }
.me-name { font-weight:600; font-size:12px; }
.me-role { font-size:12px; color:var(--text-2); }
.msg.me { align-self:flex-end; align-items:flex-end; }
.me-dock { position:relative; background:var(--surface); box-shadow:none; padding:8px 8px 10px; }
.me-dock::before {
  content:""; position:absolute; left:0; right:0; bottom:100%; height:32px;
  background:linear-gradient(to bottom, transparent, var(--surface)); pointer-events:none;
}
.me-dock .me { width:100%; justify-content:flex-start; border-radius:12px; padding:6px 10px 6px 6px; }
.me-dock .me-txt { display:flex; }
.me-dock .me .me-txt { flex:1; }
/* the account dock stays at the foot of the agents column even when the Hoje block below the list is hidden */
.contacts > .me-dock { margin-top:auto; }
@container (min-width: 720px) and (max-width: 1099px) {
  /* a Pedido waiting is a small gold dot on the avatar, not a ring (a ring reads as keyboard focus) */
  .pa:not(.side-over) .me-dock { padding:8px 0 10px; display:flex; justify-content:center; }
  .pa:not(.side-over) .me-dock .me-txt { display:none; }
  .pa:not(.side-over) .me-dock .me { width:auto; padding:6px; border-radius:999px; }
  .pa:not(.side-over) .contacts .me-dock { position:sticky; bottom:0; z-index:2; margin-top:auto; }
  /* the rail scrolls, so the account menu must not live in its box: it floats from the account button instead */
  .pa:not(.side-over) .contacts .me-dock .menu.up { position:fixed; left:12px; right:auto; bottom:72px; top:auto; width:260px; z-index:60; }
}
@container (max-width: 719px) {
  .me-txt { display:none; }
  .top .me { order:2; margin-left:0; }
}